feat: enhance device navigation by passing device ID from FileManager to DevicesPage

src/app/App.tsx

@@ -41,10 +41,11 @@ export default function App() {
   const { config, setConfig, saveStatus, pendingCount, flushNow, reload } = useSettings();
   const [showSearch, setShowSearch] = useState(false);
   const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const [devicesOpenId, setDevicesOpenId] = useState<string | null>(null);
 
   const pages = {
     status: <StatusPage config={config} setConfig={setConfig} />,
-    devices: <DevicesPage config={config} setConfig={setConfig} />, 
+    devices: <DevicesPage config={config} setConfig={setConfig} openDeviceId={devicesOpenId} onClearOpenDevice={() => setDevicesOpenId(null)} />,
     iec: <IECPage config={config} setConfig={setConfig} />, 
     network: <NetworkPage config={config} setConfig={setConfig} />, 
     other: <OtherPage config={config} setConfig={setConfig} />, 
@@ -108,7 +109,12 @@ export default function App() {
       </div>
     ),
     // Individual app pages
-    'file-manager': <FileManager onBack={() => setCurrentPage('apps')} config={config} setConfig={setConfig} />,
+    'file-manager': <FileManager
+      onBack={() => setCurrentPage('apps')}
+      config={config}
+      setConfig={setConfig}
+      onNavigateToDevice={(id) => { setCurrentPage('devices'); setDevicesOpenId(id); }}
+    />,
     'serial-console': <AppPage title="Serial Console" onBack={() => setCurrentPage('apps')} />,
     'directory-editor': <AppPage title="Directory Editor" onBack={() => setCurrentPage('apps')} />, 
     'sector-editor': <AppPage title="Sector Editor" onBack={() => setCurrentPage('apps')} />, 

src/app/components/DevicesPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
 import { toast } from 'sonner';
@@ -16,9 +16,11 @@ interface Device {
 interface DevicesPageProps {
   config: any;
   setConfig: (config: any) => void;
+  openDeviceId?: string | null;
+  onClearOpenDevice?: () => void;
 }
 
-export default function DevicesPage({ config, setConfig }: DevicesPageProps) {
+export default function DevicesPage({ config, setConfig, openDeviceId, onClearOpenDevice }: DevicesPageProps) {
   // Host Settings update function
   const updateSetting = (path: string[], value: any) => {
     const newConfig = JSON.parse(JSON.stringify(config));
@@ -106,6 +108,15 @@ export default function DevicesPage({ config, setConfig }: DevicesPageProps) {
     });
   }
 
+  // Auto-open the overlay when the parent passes a device ID (e.g. from a toast action)
+  useEffect(() => {
+    if (!openDeviceId) return;
+    const idx = devices.findIndex(d => d.id === openDeviceId);
+    if (idx >= 0) setSelectedDeviceIndex(idx);
+    onClearOpenDevice?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openDeviceId]);
+
   const getDeviceIcon = (type: Device['type']) => {
     switch (type) {
       case 'printer':

src/app/components/FileManager.tsx

@@ -248,13 +248,14 @@ interface FileManagerProps {
   config?: any;
   setConfig?: (c: any) => void;
   onBack?: () => void;
+  onNavigateToDevice?: (deviceId: string) => void;
 }
 
 // ─── Main component ───────────────────────────────────────────────────────────
 
 const FM_PATH_KEY = 'fileManager.path';
 
-export default function FileManager({ initialPath = '/', config, setConfig, onBack }: FileManagerProps) {
+export default function FileManager({ initialPath = '/', config, setConfig, onBack, onNavigateToDevice }: FileManagerProps) {
   const [path, setPath] = useState(() => normalizePath(localStorage.getItem(FM_PATH_KEY) || initialPath));
   const [entries, setEntries] = useState<EntryInfo[]>([]);
   const [loading, setLoading] = useState(false);
@@ -477,7 +478,12 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
     dev.url = mountEntry.path;
     if (!dev.enabled) dev.enabled = 1;
     setConfig(newConfig);
-    toast.success(`Mounted "${mountEntry.name}" on device #${key}`);
+    const deviceId = `${deviceType}-${key}`;
+    toast.success(`Mounted "${mountEntry.name}" on ${deviceType} #${key}`, {
+      action: onNavigateToDevice
+        ? { label: 'View Device', onClick: () => onNavigateToDevice(deviceId) }
+        : undefined,
+    });
     setMountEntry(null);
   };