feat: enhance StatusPage with file info display and loading progress

src/app/components/StatusPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { HardDrive, Activity, Wifi, Signal, Clock } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
+import { ImageWithFallback } from './figma/ImageWithFallback';
 
 interface StatusPageProps {
   config: any;
@@ -40,12 +41,17 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
     { time: '14:31:58', event: 'Device reset', type: 'warning' }
   ];
 
-  const stats = {
+
-    bytesRead: '2.4 MB',
+  // Mock loading/progress state
-    bytesWritten: '156 KB',
+  const [loading, setLoading] = useState(false);
-    operations: 1247,
+  const [progress, setProgress] = useState(0.0); // 0.0 to 1.0
-    errors: 0
+
-  };
+  // Mock file info (replace with real data if available)
+  const lastFile = 'MEATLOAF MANIACS.PRG';
+  const fileSize = '1.44 MB'; // Replace with real size if available
+  const transferSpeed = '250 KB/s'; // Replace with real speed if available
+  // Mock image association (replace with real logic if available)
+  const imageUrl = lastFile.endsWith('.d64') ? '/assets/floppy.png' : undefined;
 
   return (
     <div className="p-4 space-y-4">
@@ -128,24 +134,40 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               <div className="w-2 h-2 rounded-full bg-green-500" />
             </div>
 
-            <div className="grid grid-cols-2 gap-4 mb-4">
+            {/* New device info cards */}
-              <div className="bg-neutral-50 rounded-lg p-3">
+            <div className="mb-4">
-                <div className="text-xs text-neutral-500">Bytes Read</div>
+              <div className="bg-neutral-50 rounded-lg p-3 flex flex-col items-start justify-center w-full mb-2">
-                <div className="text-lg font-medium">{stats.bytesRead}</div>
+                <div className="text-xs text-neutral-500 mb-1">Last File</div>
+                <div className="text-sm font-medium break-all w-full text-left">{lastFile}</div>
               </div>
-              <div className="bg-neutral-50 rounded-lg p-3">
+              <div className="flex flex-row justify-between gap-4 w-full">
-                <div className="text-xs text-neutral-500">Bytes Written</div>
+                <div className="bg-neutral-50 rounded-lg p-3 flex-1 flex flex-col items-start justify-center">
-                <div className="text-lg font-medium">{stats.bytesWritten}</div>
+                  <div className="text-xs text-neutral-500 mb-1">Size</div>
+                  <div className="text-sm font-medium">{fileSize}</div>
                 </div>
-              <div className="bg-neutral-50 rounded-lg p-3">
+                <div className="bg-neutral-50 rounded-lg p-3 flex-1 flex flex-col items-end justify-center">
-                <div className="text-xs text-neutral-500">Operations</div>
+                  <div className="text-xs text-neutral-500 mb-1">Transfer Speed</div>
-                <div className="text-lg font-medium">{stats.operations}</div>
+                  <div className="text-sm font-medium">{transferSpeed}</div>
-              </div>
-              <div className="bg-neutral-50 rounded-lg p-3">
-                <div className="text-xs text-neutral-500">Errors</div>
-                <div className="text-lg font-medium text-green-600">{stats.errors}</div>
                 </div>
               </div>
+            </div>
+
+            {/* Progress bar (shows when loading) */}
+            {loading && (
+              <div className="w-full h-3 bg-neutral-200 rounded overflow-hidden mb-4">
+                <div
+                  className="h-3 bg-blue-500 transition-all"
+                  style={{ width: `${progress * 100}%` }}
+                />
+              </div>
+            )}
+
+            {/* Image placeholder if associated */}
+            {imageUrl && (
+              <div className="w-full mb-4">
+                <ImageWithFallback src={imageUrl} alt="Media image" className="w-full h-32 object-contain rounded shadow bg-neutral-100" />
+              </div>
+            )}
 
             {/* Media switch buttons if media set is detected */}
             {(() => {