feat(StatusPage): improve active image selection logic and enhance error handling for media files

src/app/components/StatusPage.tsx

@@ -6,7 +6,7 @@ import { MediaEntry } from './MediaEntry';
 import DirectorySlideshow from './DirectorySlideshow';
 import { useWs } from '../ws';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
-import MediaSet, { type MediaSetEntry } from './MediaSet';
+import MediaSet, { mediaSetEntryUrl, type MediaSetEntry } from './MediaSet';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
 import { ConfirmDialog, type ConfirmOptions } from './ui/confirm-dialog';
@@ -63,6 +63,33 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
     }
   };
 
+  const [activeImage, setActiveImage] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = activeDevice?.url;
+    if (!url) { setActiveImage(null); return; }
+    const activeEntry = mediaSetFiles?.find(e => mediaSetEntryUrl(e) === url);
+    const entryName   = activeEntry && typeof activeEntry === 'object' ? activeEntry.name : undefined;
+    const urlBase     = url.replace(/\.[^/.]+$/, '').split('/').pop() ?? '';
+    const dir         = splitPath(url).parent;
+    const normalize   = (s: string) => s.toLowerCase().replace(/[_-]+/g, ' ').trim();
+    const targets     = [entryName ? normalize(entryName) : null, normalize(urlBase)].filter(Boolean) as string[];
+    const imgExts     = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp']);
+    let cancelled = false;
+    listDirectory(dir)
+      .then(entries => {
+        if (cancelled) return;
+        const images = entries.filter(e => e.type === 'file' && imgExts.has(e.name.split('.').pop()?.toLowerCase() ?? ''));
+        for (const target of targets) {
+          const match = images.find(e => normalize(e.name.replace(/\.[^/.]+$/, '')) === target);
+          if (match) { setActiveImage(match.path); return; }
+        }
+        setActiveImage(null);
+      })
+      .catch(() => { if (!cancelled) setActiveImage(null); });
+    return () => { cancelled = true; };
+  }, [activeDevice?.url, mediaSetFiles]);
+
   // Mock activity log - in a real app this would come from device monitoring
   const activityLog = [
     { time: '14:32:15', event: 'File opened: game.d64', type: 'info' },
@@ -175,7 +202,10 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
               </div>
             </div>
 
-            {activeDir && <DirectorySlideshow path={activeDir} />}
+            {activeImage
+              ? <img src={getWebDAVBaseUrl() + activeImage} alt="" className="w-full h-48 object-contain rounded-lg mb-3" />
+              : activeDir && <DirectorySlideshow path={activeDir} />
+            }
 
             {mediaSetFiles && (
               <div className="mt-2">