feat(MediaSet): refactor MediaSet to use MediaSetEntry type for improved type safety

src/app/components/DeviceDetailOverlay.tsx

@@ -4,7 +4,7 @@ import { motion, AnimatePresence } from 'motion/react';
 import { toast } from 'sonner';
 import { fileExists, getFileContents, joinPath } from '../webdav';
 import MediaBrowser from './MediaBrowser';
-import MediaSet from './MediaSet';
+import MediaSet, { type MediaSetEntry } from './MediaSet';
 
 interface Device {
   id: string;
@@ -122,11 +122,11 @@ export default function DeviceDetailOverlay({
   };
 
   // Prefer an explicit .lst-derived mediaSet stored in config; fall back to pattern detection.
-  const [mediaSetFiles, setMediaSetFiles] = useState<string[] | null>(null);
+  const [mediaSetFiles, setMediaSetFiles] = useState<MediaSetEntry[] | null>(null);
 
   useEffect(() => {
     if (Array.isArray(deviceData.media_set) && deviceData.media_set.length > 0) {
-      setMediaSetFiles(deviceData.media_set as string[]);
+      setMediaSetFiles(deviceData.media_set as MediaSetEntry[]);
       return;
     }
     if (!deviceData.url) { setMediaSetFiles(null); return; }

src/app/components/MediaSet.tsx

@@ -1,7 +1,20 @@
+export type MediaSetEntry = string | { url: string; name?: string };
+
+export function mediaSetEntryUrl(e: MediaSetEntry): string {
+  return typeof e === 'string' ? e : e.url;
+}
+
+function entryLabel(e: MediaSetEntry, index: number): string {
+  if (typeof e === 'object' && e.name) return `${index + 1}: ${e.name}`;
+  const file = mediaSetEntryUrl(e);
+  const fileName = file.split('/').pop() || file;
+  return `${index + 1}: ${fileName.replace(/\.[^.]+$/, '')}`;
+}
+
 interface MediaSetProps {
-  files: string[];
+  files: MediaSetEntry[];
   activeUrl: string;
-  onSwitch: (file: string) => void;
+  onSwitch: (url: string) => void;
 }
 
 export default function MediaSet({ files, activeUrl, onSwitch }: MediaSetProps) {
@@ -9,21 +22,21 @@ export default function MediaSet({ files, activeUrl, onSwitch }: MediaSetProps)
     <div>
       <div className="text-sm text-neutral-500 mb-2">Media Set</div>
       <div className="flex gap-2 flex-wrap">
-        {files.map((file, index) => {
-          const fileName = file.split('/').pop() || file;
-          const title    = fileName.replace(/\.[^.]+$/, '');
-          const active   = activeUrl === file;
+        {files.map((entry, index) => {
+          const url    = mediaSetEntryUrl(entry);
+          const label  = entryLabel(entry, index);
+          const active = activeUrl === url;
           return (
             <button
-              key={file}
-              onClick={() => onSwitch(file)}
+              key={url}
+              onClick={() => onSwitch(url)}
               className={`px-3 py-1.5 rounded-lg text-sm ${
                 active
                   ? 'bg-blue-600 text-white'
                   : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
               }`}
             >
-              {`${index + 1}: ${title}`}
+              {label}
             </button>
           );
         })}

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 from './MediaSet';
+import MediaSet, { 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';
@@ -45,10 +45,10 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
     ? (activeDevice.base_url || splitPath(activeDevice.url || '/').parent)
     : null;
 
-  const mediaSetFiles: string[] | null = (() => {
+  const mediaSetFiles: MediaSetEntry[] | null = (() => {
     if (!activeDevice?.url) return null;
     if (Array.isArray(activeDevice.media_set) && activeDevice.media_set.length > 0)
-      return activeDevice.media_set as string[];
+      return activeDevice.media_set as MediaSetEntry[];
     const match = (activeDevice.url as string).match(/^(.+?)(\d+)(\.[^.]+)$/);
     if (!match) return null;
     const [, prefix, , ext] = match;