feat: add reset functionality and directory/disk map overlays to StatusPage

src/app/components/StatusPage.tsx

@@ -1,7 +1,9 @@
 import { useState } from 'react';
-import { HardDrive, Activity, Wifi, Signal, Clock } from 'lucide-react';
+import { HardDrive, Activity, Wifi, Signal, Clock, RefreshCw, FolderOpen, Map } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
 import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from './ui/dialog';
+import FileBrowser from './FileBrowser';
 
 interface StatusPageProps {
   config: any;
@@ -53,11 +55,33 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
   // Mock image association (replace with real logic if available)
   const imageUrl = lastFile.endsWith('.d64') ? '/assets/floppy.png' : undefined;
 
+  // Dialog/modal state for reset actions
+  const [showResetModal, setShowResetModal] = useState<null | 'meatloaf' | 'host'>(null);
+  const [resetStatus, setResetStatus] = useState('idle'); // 'idle' | 'in-progress' | 'done'
+
+  // Overlay state for directory/disk map
+  const [showDirectory, setShowDirectory] = useState(false);
+  const [showDiskMap, setShowDiskMap] = useState(false);
+
   return (
     <div className="p-4 space-y-4">
       <h2 className="text-sm text-neutral-500">System Status</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg p-4">
+        <div className="flex gap-2 mb-4">
+          <button
+            className="flex items-center gap-2 px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-sm font-medium"
+            onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
+          >
+            <RefreshCw className="w-4 h-4" /> Reset Meatloaf
+          </button>
+          <button
+            className="flex items-center gap-2 px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-sm font-medium"
+            onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
+          >
+            <RefreshCw className="w-4 h-4" /> Reset Host
+          </button>
+        </div>
         <div className="mb-4">
           <div className="text-xs text-neutral-500 mb-1">Memory Utilization</div>
           <div className="flex flex-col gap-2">
@@ -118,8 +142,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
           <h2 className="text-sm text-neutral-500 pt-2">Active Device</h2>
 
           <div
-            className="bg-white border border-neutral-200 rounded-lg p-4 cursor-pointer hover:bg-neutral-50 transition"
+            className="bg-white border border-neutral-200 rounded-lg p-4 relative"
-            onClick={() => setShowDeviceOverlay(true)}
           >
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
@@ -134,6 +157,22 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               <div className="w-2 h-2 rounded-full bg-green-500" />
             </div>
 
+            {/* Directory and Disk Map buttons */}
+            <div className="flex gap-2 mb-4">
+              <button
+                className="flex items-center gap-2 px-3 py-2 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-sm font-medium"
+                onClick={() => setShowDirectory(true)}
+              >
+                <FolderOpen className="w-4 h-4" /> Show Directory
+              </button>
+              <button
+                className="flex items-center gap-2 px-3 py-2 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-sm font-medium"
+                onClick={() => setShowDiskMap(true)}
+              >
+                <Map className="w-4 h-4" /> Show Disk Map
+              </button>
+            </div>
+
             {/* New device info cards */}
             <div className="mb-4">
               <div className="bg-neutral-50 rounded-lg p-3 flex flex-col items-start justify-center w-full mb-2">
@@ -232,6 +271,87 @@ 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="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
+                <div className="flex items-center justify-between p-4 border-b">
+                  <h2 className="text-xl font-medium">Directory</h2>
+                  <button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><X className="w-6 h-6" /></button>
+                </div>
+                <div className="flex-1 overflow-auto">
+                  <FileBrowser currentPath={activeDevice.url ? activeDevice.url.replace(/\/[^/]+$/, '') : '/'} onSelect={() => {}} onClose={() => setShowDirectory(false)} />
+                </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="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
+                <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"><X className="w-6 h-6" /></button>
+                </div>
+                <div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500">
+                  <span>Disk map visualization goes here.</span>
+                </div>
+              </div>
+            </div>
+          )}
+      {/* Reset Activity Modal */}
+      <Dialog open={!!showResetModal} onOpenChange={open => !open && setShowResetModal(null)}>
+        <DialogContent>
+          <DialogTitle>{showResetModal === 'meatloaf' ? 'Reset Meatloaf' : 'Reset Host'}</DialogTitle>
+          <DialogDescription>
+            {resetStatus === 'idle' && (
+              <>
+                Are you sure you want to reset {showResetModal === 'meatloaf' ? 'the Meatloaf device' : 'the Host'}?
+                <div className="flex gap-2 mt-4">
+                  <button
+                    className="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition"
+                    onClick={() => {
+                      setResetStatus('in-progress');
+                      setTimeout(() => setResetStatus('done'), 2000);
+                    }}
+                  >
+                    Reset
+                  </button>
+                  <button
+                    className="px-4 py-2 rounded bg-neutral-200 text-neutral-700 hover:bg-neutral-300 transition"
+                    onClick={() => setShowResetModal(null)}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </>
+            )}
+            {resetStatus === 'in-progress' && (
+              <div className="flex flex-col items-center gap-4 mt-4">
+                <span>Resetting...</span>
+                <div className="w-full h-2 bg-neutral-200 rounded overflow-hidden">
+                  <div className="h-2 bg-blue-500 animate-pulse" style={{ width: '100%' }} />
+                </div>
+              </div>
+            )}
+            {resetStatus === 'done' && (
+              <div className="flex flex-col items-center gap-4 mt-4">
+                <span className="text-green-600">Reset complete!</span>
+                <button
+                  className="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition"
+                  onClick={() => setShowResetModal(null)}
+                >
+                  Close
+                </button>
+              </div>
+            )}
+          </DialogDescription>
+        </DialogContent>
+      </Dialog>
+
           <h2 className="text-sm text-neutral-500 pt-2 flex items-center gap-2">
             <Activity className="w-4 h-4" />
             Activity Log