feat: add DirectoryListing component and integrate it into StatusPage; update fonts.css with new font definitions; enhance .gitignore to exclude files directory
This commit is contained in:
parent
d9314c874a
commit
8eb6e66005
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,4 +1,5 @@
|
|||
?archives/*
|
||||
dist/*
|
||||
files/*
|
||||
node_modules/*
|
||||
package-lock.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",
|
||||
|
|
|
|||
97
src/app/components/DirectoryListing.tsx
Normal file
97
src/app/components/DirectoryListing.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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">
|
||||
<FileBrowser currentPath={activeDevice.url ? activeDevice.url.replace(/\/[^/]+$/, '') : '/'} onSelect={() => {}} onClose={() => setShowDirectory(false)} />
|
||||
<div className="flex-1 overflow-auto flex flex-col">
|
||||
{(() => {
|
||||
// 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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user