feat(DeviceDetailOverlay, StatusPage): integrate MediaSet component for media switching functionality

src/app/components/DeviceDetailOverlay.tsx

@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'motion/react';
 import { toast } from 'sonner';
 import { getFileContents, joinPath } from '../webdav';
 import FileBrowser from './FileBrowser';
+import MediaSet from './MediaSet';
 
 interface Device {
   id: string;
@@ -340,26 +341,7 @@ export default function DeviceDetailOverlay({
 
                   {mediaSetFiles && (
                     <div className="mt-3">
-                      <label className="text-sm text-neutral-500 block mb-2">Media Set</label>
+                      <MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
-                      <div className="flex gap-2 flex-wrap">
-                        {mediaSetFiles.map((file: string, index: number) => {
-                          const fileName = file.split('/').pop() || file;
-                          const title = fileName.replace(/\.[^.]+$/, '');
-                          return (
-                            <button
-                              key={index}
-                              onClick={() => switchMedia(file)}
-                              className={`px-3 py-1.5 rounded-lg text-sm ${
-                                deviceData.url === file
-                                  ? 'bg-blue-600 text-white'
-                                  : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
-                              }`}
-                            >
-                              {`${index + 1}: ${title}`}
-                            </button>
-                          );
-                        })}
-                      </div>
                     </div>
                   )}
                 </div>

src/app/components/MediaSet.tsx

@@ -0,0 +1,33 @@
+interface MediaSetProps {
+  files: string[];
+  activeUrl: string;
+  onSwitch: (file: string) => void;
+}
+
+export default function MediaSet({ files, activeUrl, onSwitch }: MediaSetProps) {
+  return (
+    <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;
+          return (
+            <button
+              key={file}
+              onClick={() => onSwitch(file)}
+              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}`}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/app/components/StatusPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { HardDrive, Activity, Wifi, Signal, Clock, RefreshCw, FolderOpen, Map, Loader2 } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
+import MediaSet from './MediaSet';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from './ui/dialog';
 import DirectoryListing from './DirectoryListing';
@@ -34,6 +35,24 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
 
   const activeDevice = findActiveDevice();
 
+  const mediaSetFiles: string[] | null = (() => {
+    if (!activeDevice?.url) return null;
+    if (Array.isArray(activeDevice.mediaSet) && activeDevice.mediaSet.length > 0)
+      return activeDevice.mediaSet as string[];
+    const match = (activeDevice.url as string).match(/^(.+?)(\d+)(\.[^.]+)$/);
+    if (!match) return null;
+    const [, prefix, , ext] = match;
+    return Array.from({ length: 10 }, (_, i) => `${prefix}${i + 1}${ext}`);
+  })();
+
+  const switchActiveMedia = (file: string) => {
+    const newConfig = JSON.parse(JSON.stringify(config));
+    if (newConfig.iec?.devices?.drive?.[activeDevice!.number]) {
+      newConfig.iec.devices.drive[activeDevice!.number].url = file;
+      setConfig(newConfig);
+    }
+  };
+
   // 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' },
@@ -133,6 +152,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               <div className="w-2 h-2 rounded-full bg-green-500" />
             </div>
 
+            {mediaSetFiles && (
+              <div className="mt-2">
+                <MediaSet files={mediaSetFiles} activeUrl={activeDevice.url ?? ''} onSwitch={switchActiveMedia} />
+              </div>
+            )}
+
             {/* Directory and Disk Map buttons at bottom */}
 
             {/* New device info cards */}
@@ -170,47 +195,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               </div>
             )}
 
-            {/* Media switch buttons if media set is detected */}
-            {(() => {
-              // Media set detection logic (copied from DeviceDetailOverlay)
-              const url = activeDevice.url;
-              if (!url) return null;
-              const match = url.match(/^(.+?)(\d+)(\.[^.]+)$/);
-              if (!match) return null;
-              const [, prefix, num, ext] = match;
-              const currentNum = parseInt(num);
-              const mediaSet = [];
-              for (let i = 1; i <= 10; i++) {
-                mediaSet.push(`${prefix}${i}${ext}`);
-              }
-              return (
-                <div className="flex flex-wrap gap-2 mt-2">
-                  {mediaSet.map((file, idx) => {
-                    const fileName = file.split('/').pop() || file;
-                    const title = fileName.replace(/\.[^.]+$/, '');
-                    return (
-                      <button
-                        key={file}
-                        className={`px-2 py-1 rounded text-xs border ${url === file ? 'bg-blue-600 text-white border-blue-600' : 'bg-neutral-100 text-neutral-700 border-neutral-300'}`}
-                        onClick={e => {
-                          e.stopPropagation();
-                          if (setConfig) {
-                            const newConfig = JSON.parse(JSON.stringify(config));
-                            let current = newConfig;
-                            if (current.iec && current.iec.devices && current.iec.devices.drive && current.iec.devices.drive[num]) {
-                              current.iec.devices.drive[num].url = file;
-                              setConfig(newConfig);
-                            }
-                          }
-                        }}
-                      >
-                        {`${idx + 1}: ${title}`}
-                      </button>
-                    );
-                  })}
-                </div>
-              );
-            })()}
             <div className="flex flex-col gap-2 mt-6">
               <button
                 className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-base font-medium w-full"
@@ -249,9 +233,9 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
 
           {/* Directory Overlay */}
           {showDirectory && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <>
-              <div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
+              <div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
-              <div className="relative w-full h-full bg-white/90 shadow-2xl overflow-auto flex flex-col" onClick={(e) => e.stopPropagation()}>
+              <div className="fixed inset-0 z-50 bg-white shadow-2xl flex flex-col" onClick={(e) => e.stopPropagation()}>
                 <div className="flex items-center justify-between p-4 border-b">
                   <div className="min-w-0">
                     <h2 className="text-xl font-medium">Directory</h2>
@@ -261,7 +245,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                   </div>
                   <button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
                 </div>
-                <div className="flex-1 overflow-auto flex flex-col">
+                <div className="flex-1 min-h-0 flex flex-col">
                   {!activeDevice?.url && (
                     <div className="p-8 text-center text-neutral-500 text-sm">
                       No file mounted on this device.
@@ -293,24 +277,24 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                     />
                   )}
                 </div>
-              </div>
             </div>
+            </>
           )}
 
           {/* Disk Map Overlay */}
           {showDiskMap && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <>
-              <div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
+              <div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
-              <div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
+              <div className="fixed inset-0 z-50 bg-white shadow-2xl flex flex-col" onClick={(e) => e.stopPropagation()}>
                 <div className="flex items-center justify-between p-4 border-b">
                   <h2 className="text-xl font-medium">Disk Map</h2>
                   <button onClick={() => setShowDiskMap(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
                 </div>
-                <div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500 p-4">
+                <div className="flex-1 min-h-0 overflow-auto flex items-center justify-center text-neutral-500 p-4">
                   <span>Disk map visualization goes here.</span>
                 </div>
-              </div>
             </div>
+            </>
           )}
       {/* Reset Activity Modal */}
       <Dialog open={!!showResetModal} onOpenChange={open => !open && setShowResetModal(null)}>