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

feat(DevicesPage): improve device status display and enhance UI layout for device information

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-11 14:46:25 -04:00
parent 0192d230c9
commit d7c167a9bf
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/components/DevicesPage.tsx
View File

@ -190,7 +190,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
case 'Busy': return <><span className="text-amber-600">{dot('bg-amber-400')}Busy</span></>;
case 'Not Responding': return <><span className="text-red-600">{dot('bg-red-500')}Not Responding</span></>;
case 'Disabled': return <span className="text-neutral-400">Disabled</span>;
default: return <span className="text-blue-600">Virtual</span>;
default: return null;
}
};
@ -337,8 +337,11 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
key={device.id}
className="w-full bg-white border border-neutral-200 rounded-lg p-4 flex items-center gap-3"
>
{/* Icon */}
<div className={`flex-shrink-0 ${iconColor(device)}`}>
{/* Icon + number stacked */}
<div className={`flex-shrink-0 flex flex-col items-center gap-0.5 ${iconColor(device)}`}>
<span className="text-sm font-semibold leading-none">
{device.number}
</span>
{getDeviceIcon(device.type)}
</div>
@ -352,9 +355,6 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
<span className={!device.physical && !device.enabled ? 'text-neutral-400' : 'text-neutral-900'}>
{device.name || `Device ${device.number}`}
</span>
<span className="text-xs text-neutral-500 px-1.5 py-0.5 bg-neutral-100 rounded">
#{device.number}
</span>
{device.physical && (
<span className="text-xs text-green-700 px-1.5 py-0.5 bg-green-50 border border-green-200 rounded">
Physical
@ -366,9 +366,11 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
{[device.base_url, device.url].filter(Boolean).join('')}
</div>
)}
<div className="text-xs mt-1 flex items-center">
{statusEl(device.deviceStatus)}
</div>
{device.deviceStatus !== 'Virtual' && (
<div className="text-xs mt-1 flex items-center">
{statusEl(device.deviceStatus)}
</div>
)}
</button>
{/* Controls */}