From 0a9cb90accd5a294d4a53f39ab645f77d9433de6 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 13:27:37 -0400
Subject: [PATCH] feat(StatusPage): add active image display logic and enhance
 media file handling

---
 src/app/components/StatusPage.tsx | 35 ++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index 7ace78b..dd2a172 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { HardDrive, Activity, Wifi, Radio, Clock, RefreshCw, Loader2, Printer, Power, Computer, Download, Trash2, Eye, FolderOpen } from 'lucide-react';
-import { listDirectory, deletePath, getFileContents, getWebDAVBaseUrl, humanFileSize, splitPath, type EntryInfo } from '../webdav';
+import { listDirectory, deletePath, fileExists, getFileContents, getWebDAVBaseUrl, humanFileSize, splitPath, type EntryInfo } from '../webdav';
 import { toast } from 'sonner';
 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,32 @@ 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(/\.[^/.]+$/, '');
+    const bases       = entryName ? [`${splitPath(url).parent}/${entryName}`, urlBase] : [urlBase];
+    const exts        = ['png', 'jpg', 'jpeg', 'gif', 'webp'];
+    let cancelled = false;
+    (async () => {
+      for (const base of bases) {
+        for (const ext of exts) {
+          const path = `${base}.${ext}`;
+          if (await fileExists(path)) {
+            if (!cancelled) setActiveImage(path);
+            return;
+          }
+        }
+      }
+      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 +201,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">