From 3088f1801c3b1921dc5b17bfdf32c3ef4befb343 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Sat, 13 Jun 2026 22:11:47 -0400
Subject: [PATCH] fix(StatusPage): streamline active device selection and
 enhance device overlay integration

---
 src/app/components/StatusPage.tsx | 40 +++++++++++++++++--------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index 34b61ec..cb8bcd0 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -27,20 +27,32 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
     };
 
   const [showDeviceOverlay, setShowDeviceOverlay] = useState(false);
-  // Find the first enabled device as the active device
-  const findActiveDevice = () => {
+
+  // Build a sorted list of all IEC devices for the overlay.
+  const allIecDevices = Object.entries(config.devices?.iec ?? {})
+    .sort(([a], [b]) => parseInt(a) - parseInt(b))
+    .map(([num, d]: [string, any]) => ({
+      id: `drive-${num}`,
+      number: num,
+      type: (d.type ?? 'drive') as any,
+      name: d.name,
+      enabled: d.enabled,
+      url: d.url,
+      mode: d.mode,
+    }));
+
+  // Find the first enabled drive as the active device.
+  const activeDevice = (() => {
     if (config.devices?.iec) {
       for (const [num, device] of Object.entries(config.devices.iec)) {
         const d = device as any;
-        if (d.type === 'drive' && d.enabled) {
-          return { number: num, ...d };
-        }
+        if (d.type === 'drive' && d.enabled) return { number: num, ...d };
       }
     }
     return null;
-  };
+  })();
 
-  const activeDevice = findActiveDevice();
+  const activeDeviceIndex = allIecDevices.findIndex(d => d.number === activeDevice?.number);
   const activeDir = activeDevice
     ? (activeDevice.base_url || activeDevice.url || null)
     : null;
@@ -247,18 +259,10 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
 
           </div>
 
-          {showDeviceOverlay && (
+          {showDeviceOverlay && allIecDevices.length > 0 && (
             <DeviceDetailOverlay
-              devices={[{
-                id: `drive-${activeDevice.number}`,
-                number: activeDevice.number,
-                type: 'drive',
-                name: activeDevice.name,
-                enabled: activeDevice.enabled,
-                url: activeDevice.url,
-                mode: activeDevice.mode,
-              }]}
-              initialIndex={0}
+              devices={allIecDevices}
+              initialIndex={Math.max(0, activeDeviceIndex)}
               config={config}
               setConfig={setConfig}
               onClose={() => setShowDeviceOverlay(false)}