diff --git a/src/app/App.tsx b/src/app/App.tsx index e75ed10..6708012 100644 --- a/src/app/App.tsx +++ b/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(null); const pages = { - status: , - devices: , + status: , + devices: setDevicesOpenId(null)} />, iec: , network: , other: , @@ -108,7 +109,12 @@ export default function App() { ), // Individual app pages - 'file-manager': setCurrentPage('apps')} config={config} setConfig={setConfig} />, + 'file-manager': setCurrentPage('apps')} + config={config} + setConfig={setConfig} + onNavigateToDevice={(id) => { setCurrentPage('devices'); setDevicesOpenId(id); }} + />, 'serial-console': setCurrentPage('apps')} />, 'directory-editor': setCurrentPage('apps')} />, 'sector-editor': setCurrentPage('apps')} />, diff --git a/src/app/components/DevicesPage.tsx b/src/app/components/DevicesPage.tsx index 6e35018..db8807b 100644 --- a/src/app/components/DevicesPage.tsx +++ b/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': diff --git a/src/app/components/FileManager.tsx b/src/app/components/FileManager.tsx index f406c33..295f92a 100644 --- a/src/app/components/FileManager.tsx +++ b/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([]); 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); };