idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(DeviceDetailOverlay): improve device display and add clear URL/media set functionality

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-11 21:43:49 -04:00
parent 242358fb0d
commit 488d2304be
1 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/components/DeviceDetailOverlay.tsx
View File

@ -240,14 +240,9 @@ export default function DeviceDetailOverlay({
<button onClick={onClose} className="p-2 -m-2"> <button onClick={onClose} className="p-2 -m-2">
<X className="w-6 h-6" /> <X className="w-6 h-6" />
</button> </button>
<div className="flex items-center gap-2"> <div className={`flex flex-col items-center gap-0.5 ${deviceData.enabled ? 'text-blue-600' : 'text-neutral-400'}`}>
<div className={deviceData.enabled ? 'text-blue-600' : 'text-neutral-400'}> <span className="text-sm font-semibold leading-none">{device.number}</span>
{getDeviceIcon(device.type)} {getDeviceIcon(device.type)}
</div>
<div className="text-center">
<div className="text-xs text-neutral-500 capitalize">{device.type}</div>
<div className="font-medium">#{device.number}</div>
</div>
</div> </div>
<button <button
onClick={() => setShowCommandMenu(!showCommandMenu)} onClick={() => setShowCommandMenu(!showCommandMenu)}
@ -352,9 +347,20 @@ export default function DeviceDetailOverlay({
<button <button
onClick={() => setBrowsingField('base_url')} onClick={() => setBrowsingField('base_url')}
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100" className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
title="Browse"
> >
<FolderOpen className="w-5 h-5" /> <FolderOpen className="w-5 h-5" />
</button> </button>
<button
onClick={() => {
const path = getDevicePath();
updateDeviceSetting([...path, 'base_url'], '');
}}
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-red-50 hover:border-red-300 hover:text-red-500"
title="Clear Base URL"
>
<X className="w-5 h-5" />
</button>
</div> </div>
</div> </div>
@ -363,7 +369,7 @@ export default function DeviceDetailOverlay({
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
type="text" type="text"
value={deviceData.url} value={deviceData.url ?? ''}
onChange={(e) => { onChange={(e) => {
const newUrl = e.target.value; const newUrl = e.target.value;
const devicePath = getDevicePath(); const devicePath = getDevicePath();
@ -379,9 +385,25 @@ export default function DeviceDetailOverlay({
<button <button
onClick={() => setBrowsingField('url')} onClick={() => setBrowsingField('url')}
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100" className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
title="Browse"
> >
<FolderOpen className="w-5 h-5" /> <FolderOpen className="w-5 h-5" />
</button> </button>
<button
onClick={() => {
const devicePath = getDevicePath();
const newConfig = JSON.parse(JSON.stringify(config));
let dev = newConfig;
for (const k of devicePath) dev = dev[k];
delete dev.url;
delete dev.media_set;
setConfig(newConfig);
}}
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-red-50 hover:border-red-300 hover:text-red-500"
title="Clear URL and media set"
>
<X className="w-5 h-5" />
</button>
</div> </div>
{mediaSetFiles && ( {mediaSetFiles && (