feat: add DirectoryListing component and integrate it into StatusPage; update fonts.css with new font definitions; enhance .gitignore to exclude files directory

.gitignore

@@ -1,4 +1,5 @@
 ?archives/*
 dist/*
+files/*
 node_modules/*
 package-lock.json

package.json

@@ -62,7 +62,8 @@
     "sonner": "2.0.3",
     "tailwind-merge": "3.2.0",
     "tw-animate-css": "1.3.8",
-    "vaul": "1.1.2"
+    "vaul": "1.1.2",
+    "webdav": "^5.10.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "4.1.12",

src/app/components/DirectoryListing.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { Type } from 'lucide-react';
+
+export type DirectoryFont = 'C64_Pro_Mono' | 'CbmShift';
+
+const FONTS: { id: DirectoryFont; label: string }[] = [
+  { id: 'C64_Pro_Mono', label: 'C64 Pro' },
+  { id: 'CbmShift', label: 'CBM Shift' },
+];
+
+export interface DirectoryEntry {
+  blocks: number;
+  name: string;
+  type: string;
+}
+
+interface DirectoryListingProps {
+  entries: DirectoryEntry[];
+  footerNote?: string;
+}
+
+const TYPE_BADGE: Record<string, string> = {
+  PRG: 'bg-blue-100 text-blue-700',
+  SEQ: 'bg-green-100 text-green-700',
+  DEL: 'bg-neutral-200 text-neutral-500',
+  REL: 'bg-purple-100 text-purple-700',
+  USR: 'bg-orange-100 text-orange-700',
+};
+
+export default function DirectoryListing({ entries, footerNote }: DirectoryListingProps) {
+  const [font, setFont] = useState<DirectoryFont>('C64_Pro_Mono');
+
+  return (
+    <div className="flex flex-col h-full" style={{ fontFamily: `'${font}', monospace` }}>
+      {/* Font toggle bar */}
+      <div className="flex items-center justify-end gap-2 px-4 py-2 border-b border-neutral-200 bg-neutral-50">
+        <Type className="w-4 h-4 text-neutral-500" />
+        <span className="text-xs text-neutral-500">Font:</span>
+        <div className="inline-flex rounded-md border border-neutral-300 bg-white overflow-hidden">
+          {FONTS.map((f, idx) => (
+            <button
+              key={f.id}
+              onClick={() => setFont(f.id)}
+              className={`px-3 py-1 text-xs ${
+                font === f.id
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-neutral-700 hover:bg-neutral-100'
+              } ${idx > 0 ? 'border-l border-neutral-300' : ''}`}
+              aria-pressed={font === f.id}
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Listing */}
+      <div className="flex-1 overflow-auto text-sm">
+        {entries.length === 0 ? (
+          <div className="p-8 text-center text-neutral-500">
+            Empty directory
+          </div>
+        ) : (
+          entries.map((entry, idx) => (
+            <div
+              key={idx}
+              className="px-4 py-2 border-b border-neutral-100 flex items-center hover:bg-neutral-50"
+            >
+              <span className="inline-block w-16 text-neutral-700 flex-shrink-0">
+                {String(entry.blocks).padStart(3, ' ')}
+              </span>
+              <span className="inline-block w-40 truncate text-neutral-900 flex-shrink-0">
+                {entry.name}
+              </span>
+              <span className="inline-block w-16 flex-shrink-0">
+                <span
+                  className={`px-1.5 py-0.5 rounded text-xs font-medium ${
+                    TYPE_BADGE[entry.type] || 'bg-neutral-200 text-neutral-700'
+                  }`}
+                  style={{ fontFamily: 'system-ui, sans-serif' }}
+                >
+                  {entry.type}
+                </span>
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+
+      {footerNote && (
+        <div className="px-4 py-3 text-xs text-neutral-500 border-t border-neutral-200">
+          {footerNote}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/components/StatusPage.tsx

@@ -3,7 +3,7 @@ import { HardDrive, Activity, Wifi, Signal, Clock, RefreshCw, FolderOpen, Map }
 import DeviceDetailOverlay from './DeviceDetailOverlay';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from './ui/dialog';
-import FileBrowser from './FileBrowser';
+import DirectoryListing from './DirectoryListing';
 
 interface StatusPageProps {
   config: any;
@@ -74,7 +74,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
             className="bg-white border border-neutral-200 rounded-lg p-4 relative"
           >
             <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={() => setShowDeviceOverlay(true)}
+                className="flex items-center gap-3 text-left rounded-lg p-1 -m-1 hover:bg-neutral-50 transition cursor-pointer"
+                aria-label={`Open details for Device #${activeDevice.number}`}
+              >
                 <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                   <HardDrive className="w-5 h-5 text-blue-600" />
                 </div>
@@ -82,7 +87,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                   <div className="font-medium">Device #{activeDevice.number}</div>
                   <div className="text-sm text-neutral-500">{activeDevice.url}</div>
                 </div>
-              </div>
+              </button>
               <div className="w-2 h-2 rounded-full bg-green-500" />
             </div>
 
@@ -204,13 +209,66 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
           {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 mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
+              <div className="relative w-full h-full bg-white/90 shadow-2xl overflow-auto flex flex-col" onClick={(e) => e.stopPropagation()}>
                 <div className="flex items-center justify-between p-4 border-b">
-                  <h2 className="text-xl font-medium">Directory</h2>
+                  <div className="min-w-0">
+                    <h2 className="text-xl font-medium">Directory</h2>
+                    <div className="text-xs text-neutral-500 truncate mt-0.5">
+                      Device #{activeDevice.number} • {activeDevice.url ? activeDevice.url.split('/').pop() : 'No file mounted'}
+                    </div>
+                  </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 p-4">
+                <div className="flex-1 overflow-auto flex flex-col">
-                  <FileBrowser currentPath={activeDevice.url ? activeDevice.url.replace(/\/[^/]+$/, '') : '/'} onSelect={() => {}} onClose={() => setShowDirectory(false)} />
+                  {(() => {
+                    // Derive a directory listing for the currently mounted file.
+                    // In a real device this would come from reading the disk's
+                    // BAM/ directory sectors. Here we synthesize a plausible
+                    // listing based on the mounted file's name.
+                    const fileName = activeDevice.url ? activeDevice.url.split('/').pop() : '';
+                    if (!fileName) {
+                      return (
+                        <div className="p-8 text-center text-neutral-500 text-sm">
+                          No file mounted on this device.
+                        </div>
+                      );
+                    }
+
+                    // Mock directory entries (C64-style: blocks, name, type)
+                    const mockEntries = [
+                      { blocks: 42, name: 'PAC-MAN', type: 'PRG' },
+                      { blocks: 38, name: 'GALAGA', type: 'PRG' },
+                      { blocks: 21, name: 'HISCORE', type: 'SEQ' },
+                      { blocks: 12, name: 'LOADER', type: 'PRG' },
+                      { blocks: 5,  name: 'TITLE-SCREEN', type: 'SEQ' },
+                      { blocks: 3,  name: 'CONFIG', type: 'SEQ' },
+                      { blocks: 1,  name: 'PARTICLES', type: 'PRG' },
+                    ];
+
+                    const totalBlocks = 664; // standard D64 capacity
+                    const usedBlocks = mockEntries.reduce((sum, e) => sum + e.blocks, 0);
+                    const freeBlocks = totalBlocks - usedBlocks;
+
+                    return (
+                      <>
+                        <div
+                          className="px-4 py-2 bg-neutral-100 text-xs text-neutral-600 border-b border-neutral-200 flex items-center"
+                          style={{ fontFamily: "'C64_Pro_Mono', monospace" }}
+                        >
+                          <span className="inline-block w-16">BLOCKS</span>
+                          <span className="inline-block w-40">NAME</span>
+                          <span className="inline-block w-16">TYPE</span>
+                          <span className="ml-auto">{usedBlocks} BLOCKS USED · {freeBlocks} FREE</span>
+                        </div>
+                        <div className="flex-1 overflow-auto">
+                          <DirectoryListing
+                            entries={mockEntries}
+                            footerNote={`${mockEntries.length} FILES · ${fileName}`}
+                          />
+                        </div>
+                      </>
+                    );
+                  })()}
                 </div>
               </div>
             </div>

src/styles/fonts.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'C64_Pro_Mono';
+  src: url('/fonts/C64_Pro_Mono-STYLE.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'CbmShift';
+  src: url('/fonts/CbmShift-STYLE.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}