368 lines
17 KiB
TypeScript
368 lines
17 KiB
TypeScript
import { useState } from 'react';
|
|
import { Cpu, Settings, Wifi, Network, HardDrive, Activity, MoreHorizontal, Search, Wrench, User, LogOut, Bell, FileText, AppWindow, Folder, Edit, Eye, Database, Upload, Download, Code2, LayoutList, Image, ChevronLeft, Loader2, Check, AlertCircle, RefreshCw, Terminal, Link } from 'lucide-react';
|
|
import { Toaster } from 'sonner';
|
|
import StatusPage from './components/StatusPage';
|
|
import DevicesPage from './components/DevicesPage';
|
|
import GeneralPage from './components/GeneralPage';
|
|
import NetworkPage from './components/NetworkPage';
|
|
import IECPage from './components/IECPage';
|
|
import OtherPage from './components/OtherPage';
|
|
import ToolsPage from './components/ToolsPage';
|
|
import SearchOverlay from './components/SearchOverlay';
|
|
import FileManager from './components/FileManager';
|
|
import logoSvg from '../imports/logo.svg';
|
|
import { useSettings } from './settings';
|
|
|
|
type Page = 'status' | 'devices' | 'iec' | 'network' | 'other' | 'general' | 'tools' | 'apps' | AppId;
|
|
|
|
type AppId =
|
|
| 'file-manager'
|
|
| 'serial-console'
|
|
| 'directory-editor'
|
|
| 'sector-editor'
|
|
| 'bam-editor'
|
|
| 'disk-visualizer'
|
|
| 'ramrom-explorer'
|
|
| 'dump-disk-image'
|
|
| 'write-disk-image'
|
|
| 'prg-to-crt'
|
|
| 'magic-desk-cart-builder'
|
|
| 'easy-flash-cart-builder'
|
|
| 'basic-editor'
|
|
| 'assembler'
|
|
| 'sprite-editor'
|
|
| 'charset-editor'
|
|
| 'petscii-editor'
|
|
| 'idle-animation'
|
|
| 'loading-animation';
|
|
|
|
export default function App() {
|
|
const [currentPage, setCurrentPage] = useState<Page>('status');
|
|
const { config, setConfig, saveStatus, pendingCount, flushNow, reload } = useSettings();
|
|
const [showSearch, setShowSearch] = useState(false);
|
|
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
|
|
|
const pages = {
|
|
status: <StatusPage config={config} setConfig={setConfig} />,
|
|
devices: <DevicesPage config={config} setConfig={setConfig} />,
|
|
iec: <IECPage config={config} setConfig={setConfig} />,
|
|
network: <NetworkPage config={config} setConfig={setConfig} />,
|
|
other: <OtherPage config={config} setConfig={setConfig} />,
|
|
general: <GeneralPage config={config} setConfig={setConfig} />,
|
|
tools: <ToolsPage config={config} setConfig={setConfig} />,
|
|
apps: (
|
|
<div className="max-w-3xl mx-auto py-8 px-4">
|
|
<h1 className="text-2xl font-bold mb-6 text-center">Apps</h1>
|
|
<div className="space-y-10">
|
|
{/* Manangement Group */}
|
|
<div>
|
|
<h2 className="text-lg font-semibold mb-4 text-blue-700">Management</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<AppCard icon={<Folder className="w-7 h-7" />} label="File Manager" onClick={() => setCurrentPage('file-manager')} />
|
|
<AppCard icon={<Terminal className="w-7 h-7" />} label="Serial Console" onClick={() => setCurrentPage('serial-console')} />
|
|
<AppCard icon={<Link className="w-7 h-7" />} label="Short Codes" onClick={() => setCurrentPage('serial-console')} />
|
|
</div>
|
|
</div>
|
|
{/* Disk Group */}
|
|
<div>
|
|
<h2 className="text-lg font-semibold mb-4 text-blue-700">Disk</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<AppCard icon={<Folder className="w-7 h-7" />} label="Directory Editor" onClick={() => setCurrentPage('directory-editor')} />
|
|
<AppCard icon={<Edit className="w-7 h-7" />} label="Sector Editor" onClick={() => setCurrentPage('sector-editor')} />
|
|
<AppCard icon={<LayoutList className="w-7 h-7" />} label="BAM Editor" onClick={() => setCurrentPage('bam-editor')} />
|
|
<AppCard icon={<Eye className="w-7 h-7" />} label="Disk Visualizer" onClick={() => setCurrentPage('disk-visualizer')} />
|
|
<AppCard icon={<Database className="w-7 h-7" />} label="RAM/ROM Explorer" onClick={() => setCurrentPage('ramrom-explorer')} />
|
|
<AppCard icon={<Download className="w-7 h-7" />} label="Dump Disk Image" onClick={() => setCurrentPage('dump-disk-image')} />
|
|
<AppCard icon={<Upload className="w-7 h-7" />} label="Write Disk Image" onClick={() => setCurrentPage('write-disk-image')} />
|
|
</div>
|
|
</div>
|
|
{/* Cartridge Group */}
|
|
<div>
|
|
<h2 className="text-lg font-semibold mb-4 text-blue-700">Cartridge</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<AppCard icon={<Folder className="w-7 h-7" />} label="PRG to CRT" onClick={() => setCurrentPage('prg-to-crt')} />
|
|
<AppCard icon={<Edit className="w-7 h-7" />} label="Magic Desk Cart Builder" onClick={() => setCurrentPage('magic-desk-cart-builder')} />
|
|
<AppCard icon={<LayoutList className="w-7 h-7" />} label="Easy Flash Cart Builder" onClick={() => setCurrentPage('easy-flash-cart-builder')} />
|
|
</div>
|
|
</div>
|
|
{/* Development Group */}
|
|
<div>
|
|
<h2 className="text-lg font-semibold mb-4 text-green-700">Development</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<AppCard icon={<FileText className="w-7 h-7" />} label="Basic Editor" onClick={() => setCurrentPage('basic-editor')} />
|
|
<AppCard icon={<Code2 className="w-7 h-7" />} label="Assembler" onClick={() => setCurrentPage('assembler')} />
|
|
<AppCard icon={<Image className="w-7 h-7" />} label="Sprite Editor" onClick={() => setCurrentPage('sprite-editor')} />
|
|
<AppCard icon={<Edit className="w-7 h-7" />} label="Character Set Editor" onClick={() => setCurrentPage('charset-editor')} />
|
|
<AppCard icon={<Edit className="w-7 h-7" />} label="Petscii Editor" onClick={() => setCurrentPage('petscii-editor')} />
|
|
</div>
|
|
</div>
|
|
{/* Display Group */}
|
|
<div>
|
|
<h2 className="text-lg font-semibold mb-4 text-purple-700">Display</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<AppCard icon={<Activity className="w-7 h-7" />} label="Idle Animation" onClick={() => setCurrentPage('idle-animation')} />
|
|
<AppCard icon={<Loader2 className="w-7 h-7" />} label="Loading Animation" onClick={() => setCurrentPage('loading-animation')} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
// Individual app pages
|
|
'file-manager': <FileManager onBack={() => setCurrentPage('apps')} config={config} setConfig={setConfig} />,
|
|
'serial-console': <AppPage title="Serial Console" onBack={() => setCurrentPage('apps')} />,
|
|
'directory-editor': <AppPage title="Directory Editor" onBack={() => setCurrentPage('apps')} />,
|
|
'sector-editor': <AppPage title="Sector Editor" onBack={() => setCurrentPage('apps')} />,
|
|
'bam-editor': <AppPage title="BAM Editor" onBack={() => setCurrentPage('apps')} />,
|
|
'disk-visualizer': <AppPage title="Disk Visualizer" onBack={() => setCurrentPage('apps')} />,
|
|
'ramrom-explorer': <AppPage title="RAM/ROM Explorer" onBack={() => setCurrentPage('apps')} />,
|
|
'dump-disk-image': <AppPage title="Dump Disk Image" onBack={() => setCurrentPage('apps')} />,
|
|
'write-disk-image': <AppPage title="Write Disk Image" onBack={() => setCurrentPage('apps')} />,
|
|
'prg-to-crt': <AppPage title="PRG to CRT" onBack={() => setCurrentPage('apps')} />,
|
|
'magic-desk-cart-builder': <AppPage title="Magic Desk Cart Builder" onBack={() => setCurrentPage('apps')} />,
|
|
'easy-flash-cart-builder': <AppPage title="Easy Flash Cart Builder" onBack={() => setCurrentPage('apps')} />,
|
|
'basic-editor': <AppPage title="Basic Editor" onBack={() => setCurrentPage('apps')} />,
|
|
'assembler': <AppPage title="Assembler" onBack={() => setCurrentPage('apps')} />,
|
|
'sprite-editor': <AppPage title="Sprite Editor" onBack={() => setCurrentPage('apps')} />,
|
|
'charset-editor': <AppPage title="Character Set Editor" onBack={() => setCurrentPage('apps')} />,
|
|
'petscii-editor': <AppPage title="Petscii Editor" onBack={() => setCurrentPage('apps')} />,
|
|
'idle-animation': <AppPage title="Idle Animation" onBack={() => setCurrentPage('apps')} />,
|
|
'loading-animation': <AppPage title="Loading Animation" onBack={() => setCurrentPage('apps')} />
|
|
};
|
|
|
|
// AppCard component for app grid
|
|
function AppCard({ icon, label, onClick }: { icon: React.ReactNode; label: string; onClick: () => void }) {
|
|
return (
|
|
<button
|
|
className="flex flex-col items-center justify-center gap-2 bg-white rounded-xl shadow border border-neutral-200 hover:bg-blue-50 transition p-6 w-full h-32 focus:outline-none"
|
|
onClick={onClick}
|
|
>
|
|
<span className="text-blue-700">{icon}</span>
|
|
<span className="text-base font-medium text-neutral-800 mt-2">{label}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// AppPage component for individual app pages
|
|
function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
|
|
return (
|
|
<div className="max-w-2xl mx-auto py-8 px-4">
|
|
<button
|
|
className="flex items-center gap-2 mb-6 text-blue-700 hover:underline"
|
|
onClick={onBack}
|
|
>
|
|
<ChevronLeft className="w-5 h-5" /> Back to Apps
|
|
</button>
|
|
<h1 className="text-2xl font-bold mb-4">{title}</h1>
|
|
<div className="bg-white rounded-xl shadow p-8 text-neutral-500 text-center border border-neutral-200">
|
|
{title} coming soon...
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="size-full flex flex-col bg-neutral-50">
|
|
<Toaster position="top-center" />
|
|
<header className="bg-[#4d4d4d] px-0 py-0 flex-shrink-0">
|
|
<div className="flex items-stretch justify-between min-h-[56px]">
|
|
<div className="flex items-center h-full">
|
|
<img src={logoSvg} alt="Meatloaf" className="h-full max-h-[56px] w-auto object-contain" />
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => setShowSearch(true)}
|
|
className="p-2 hover:bg-[#5e5e5e] rounded-lg"
|
|
>
|
|
<Search className="w-5 h-5 text-white" />
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentPage('apps')}
|
|
className={`p-2 hover:bg-[#5e5e5e] rounded-lg${currentPage === 'apps' ? ' bg-[#5e5e5e]' : ''}`}
|
|
aria-label="Apps"
|
|
>
|
|
<AppWindow className="w-5 h-5 text-white" />
|
|
</button>
|
|
<SaveStatusBadge status={saveStatus} pendingCount={pendingCount} onSave={flushNow} onReload={reload} />
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
|
className="p-2 hover:bg-[#5e5e5e] rounded-lg"
|
|
>
|
|
<User className="w-5 h-5 text-white" />
|
|
</button>
|
|
{showProfileMenu && (
|
|
<div className="absolute right-0 top-12 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[200px] z-20">
|
|
<button
|
|
onClick={() => {
|
|
setShowProfileMenu(false);
|
|
setCurrentPage('general');
|
|
}}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
|
|
>
|
|
<Settings className="w-4 h-4 text-[#4d4d4d]" />
|
|
Settings
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setShowProfileMenu(false);
|
|
setCurrentPage('tools');
|
|
}}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
|
|
>
|
|
<Wrench className="w-4 h-4 text-[#4d4d4d]" />
|
|
Tools
|
|
</button>
|
|
<button
|
|
onClick={() => setShowProfileMenu(false)}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
|
|
>
|
|
<Bell className="w-4 h-4 text-[#4d4d4d]" />
|
|
Notifications
|
|
</button>
|
|
<button
|
|
onClick={() => setShowProfileMenu(false)}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
|
|
>
|
|
<FileText className="w-4 h-4 text-[#4d4d4d]" />
|
|
Documentation
|
|
</button>
|
|
<div className="border-t border-neutral-200 my-2" />
|
|
<button
|
|
onClick={() => setShowProfileMenu(false)}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2 text-red-600"
|
|
>
|
|
<LogOut className="w-4 h-4 text-[#4d4d4d]" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 overflow-y-auto">
|
|
{pages[currentPage]}
|
|
</main>
|
|
|
|
<nav className="bg-[#4d4d4d] flex-shrink-0">
|
|
<div className="flex">
|
|
<button
|
|
onClick={() => setCurrentPage('status')}
|
|
className="flex-1 flex flex-col items-center gap-1 py-2"
|
|
>
|
|
<Activity className="w-5 h-5 text-white" />
|
|
<span className="text-xs text-white">Status</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentPage('devices')}
|
|
className="flex-1 flex flex-col items-center gap-1 py-2"
|
|
>
|
|
<HardDrive className="w-5 h-5 text-white" />
|
|
<span className="text-xs text-white">Devices</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentPage('iec')}
|
|
className="flex-1 flex flex-col items-center gap-1 py-2"
|
|
>
|
|
<Cpu className="w-5 h-5 text-white" />
|
|
<span className="text-xs text-white">IEC</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentPage('network')}
|
|
className="flex-1 flex flex-col items-center gap-1 py-2"
|
|
>
|
|
<Network className="w-5 h-5 text-white" />
|
|
<span className="text-xs text-white">Network</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentPage('other')}
|
|
className="flex-1 flex flex-col items-center gap-1 py-2"
|
|
>
|
|
<MoreHorizontal className="w-5 h-5 text-white" />
|
|
<span className="text-xs text-white">More</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{showSearch && (
|
|
<SearchOverlay
|
|
config={config}
|
|
setConfig={setConfig}
|
|
onClose={() => setShowSearch(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Tiny indicator that reflects the current save status of the settings
|
|
* file. Renders nothing when idle (so it doesn't clutter the header).
|
|
*/
|
|
function SaveStatusBadge({
|
|
status,
|
|
pendingCount,
|
|
onSave,
|
|
onReload,
|
|
}: {
|
|
status: 'idle' | 'loading' | 'unsaved' | 'saving' | 'saved' | 'error';
|
|
pendingCount: number;
|
|
onSave: () => void;
|
|
onReload: () => void;
|
|
}) {
|
|
if (status === 'idle') return null;
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<span className="text-xs text-white/80 inline-flex items-center gap-1" title="Loading settings from /.sys/config.json">
|
|
<Loader2 className="w-3 h-3 animate-spin" /> Loading
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (status === 'unsaved') {
|
|
return (
|
|
<span className="inline-flex items-center gap-1">
|
|
<span className="text-xs text-amber-300" title={`${pendingCount} unsaved change${pendingCount === 1 ? '' : 's'}`}>
|
|
{pendingCount} unsaved
|
|
</span>
|
|
<button
|
|
onClick={onSave}
|
|
className="text-xs bg-amber-500 hover:bg-amber-400 text-white px-2 py-0.5 rounded"
|
|
title="Save now"
|
|
>
|
|
Save
|
|
</button>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (status === 'saving') {
|
|
return (
|
|
<span className="text-xs text-white/80 inline-flex items-center gap-1" title="Saving to /.sys/config.json">
|
|
<Loader2 className="w-3 h-3 animate-spin" /> Saving
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (status === 'saved') {
|
|
return (
|
|
<span className="text-xs text-white/80 inline-flex items-center gap-1" title="Saved to /.sys/config.json">
|
|
<Check className="w-3 h-3" /> Saved
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// error
|
|
return (
|
|
<button
|
|
onClick={onReload}
|
|
className="text-xs text-red-300 hover:text-white inline-flex items-center gap-1"
|
|
title="Failed to save to /.sys/config.json — click to retry"
|
|
>
|
|
<AlertCircle className="w-3 h-3" /> Save failed
|
|
<RefreshCw className="w-3 h-3" />
|
|
</button>
|
|
);
|
|
} |