idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor config structure: rename 'iec.devices' to 'devices.iec' across the codebase

Browse Source 
- Updated references in AGENTS.md, README.md, and various component files (DevicesPage, GeneralPage, IECPage, MediaManager, SearchOverlay, StatusPage) to reflect the new config structure.
- Adjusted settings handling in settings.ts to accommodate the new structure.
- Modified initial config in config.json to match the updated schema.
This commit is contained in:
Jaime Idolpx 2026-06-11 17:08:27 -04:00
parent 89d093e159
commit faa2e41be4
10 changed files with 149 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
AGENTS.md
View File

@ -72,7 +72,7 @@ src/
package.json
imports/
logo.svg
config.json # Bundled fallback (full merged config including iec.devices)
config.json # Bundled fallback (full merged config including devices.iec)
main.tsx
styles/
public/
@ -81,7 +81,7 @@ public/
service-worker.js # PWA service worker
files/
.sys/
config.json # Runtime config on device (no iec.devices)
config.json # Runtime config on device (no devices.iec)
devices.json # Runtime device list: { "iec": { "devices": { ... } } }
webdav3.py # Dev Python WebDAV + WebSocket server (port 80, serves files/)
index.html
@ -155,7 +155,7 @@ Grid of app cards grouped by category, each navigates to a stub `AppPage` unless
35. **Rescan Bus via WebSocket** — DevicesPage "Rescan Bus" button sends `"iec scan"` via shared WS
36. **WiFi Scan via WebSocket** — NetworkPage "Scan" button sends `"scan"` via shared WS before opening overlay
37. **WiFi connect via WebSocket** — WiFiScanOverlay "Connect" sends `"connect <ssid>"` or `"connect <ssid> <password>"`; NetworkPage known-network click sends same command, marks network `enabled: 1`, moves it to top of list
38. **Split config / devices storage** — `settings.ts` loads `/.sys/config.json` and `/.sys/devices.json` in parallel; merges with one-level deep merge (so `iec.devices` from devices.json is merged into `iec` from config.json); saves with split: `iec.devices` → `devices.json`, everything else (including remaining `iec` bus settings) → `config.json`; `beforeunload` flush also split across both files
38. **Split config / devices storage** — `settings.ts` loads `/.sys/config.json` and `/.sys/devices.json` in parallel; merges with one-level deep merge (so `devices.iec` from devices.json is merged into `iec` from config.json); saves with split: `devices.iec` → `devices.json`, everything else (including remaining `iec` bus settings) → `config.json`; `beforeunload` flush also split across both files
39. **SerialConsolePage** — xterm.js terminal (`@xterm/xterm` + `@xterm/addon-fit`) over shared `useWs()`; line-buffered input: printable chars echoed locally, `\r` sends buffer, `\x7f` backspaces, `\x03` clears; echo suppression via `echoQueue` ref; tiled icon background; lazy-loaded
40. **LazyLoader component** — `ui/lazy-loader.tsx`: animated progress bar with staged percentage steps (30 → 60 → 80 → 92%) for Suspense fallbacks; replaces inline `PageLoader` in `App.tsx`
41. **MediaViewerEditor tiled background** — icon tile overlay (`z-index: -1`) inside a `z-index: 0` stacking context; sub-components (HexEditor, ConfigEditor, CodeEditor) use transparent backgrounds so the tile shows through
@ -184,12 +184,12 @@ Config is split across two files on the device:
| File | Contents |
|---|---|
| `/.sys/config.json` | `general`, `host`, `hardware`, `wifi`, `network`, `bluetooth`, `modem`, `cassette`, `boip`, `iec` (bus settings only — no `iec.devices`) |
| `/.sys/config.json` | `general`, `host`, `hardware`, `wifi`, `network`, `bluetooth`, `modem`, `cassette`, `boip`, `iec` (bus settings only — no `devices.iec`) |
| `/.sys/devices.json` | `{ "iec": { "devices": { "printer": {...}, "drive": {...}, "network": {...}, "other": {...}, "meatloaf": {...} } } }` |
The `useSettings()` hook in `settings.ts` loads both files on mount, merges them into a single `config` object, and splits them back on save. All page components receive the unified `config` / `setConfig` props from `App.tsx`.
The bundled `src/imports/config.json` is used as the initial UI state while the server fetch is in flight. It contains the full merged shape (including `iec.devices`) so the UI renders immediately without waiting.
The bundled `src/imports/config.json` is used as the initial UI state while the server fetch is in flight. It contains the full merged shape (including `devices.iec`) so the UI renders immediately without waiting.
### media_set format

2
README.md
View File

@ -31,7 +31,7 @@ Device settings are stored in two separate files on the device (LittleFS erase-b
| File | Contents |
|---|---|
| `/.sys/config.json` | General, host, hardware, WiFi, network, Bluetooth, modem, cassette, BOIP, IEC bus settings |
| `/.sys/devices.json` | IEC device list (`iec.devices`) |
| `/.sys/devices.json` | IEC device list (`devices.iec`) |
`useSettings()` loads both files in parallel and merges them; saves split them back automatically. A bundled fallback (`src/imports/config.json`) is used as the initial UI state while the device is being contacted.

26
src/app/components/DevicesPage.tsx
View File

@ -106,13 +106,13 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
const [physicalDevices, setPhysicalDevices] = useState<PhysicalDevice[]>([]);
const [actionDevice, setActionDevice] = useState<DisplayDevice | null>(null);
const hardware = config.hardware || {};
const cassette = config.cassette || {};
const cassette = config.devices?.cassette || {};
const userport = config.devices?.userport || {};
// Virtual devices from config (used for detail overlay navigation)
const devices: Device[] = [];
if (config.iec?.devices) {
Object.entries(config.iec.devices).forEach(([num, device]: [string, any]) => {
if (config.devices?.iec) {
Object.entries(config.devices.iec).forEach(([num, device]: [string, any]) => {
const type = device.type as Device['type'];
const name = device.name || (
type === 'drive' ? `Drive ${num}` :
@ -249,7 +249,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
const toggleDeviceEnabled = (device: DisplayDevice, e: React.MouseEvent) => {
e.stopPropagation();
const newConfig = JSON.parse(JSON.stringify(config));
newConfig.iec.devices[device.number].enabled = device.enabled ? 0 : 1;
newConfig.devices.iec[device.number].enabled = device.enabled ? 0 : 1;
setConfig(newConfig);
toast.success(`Device #${device.number} ${device.enabled ? 'disabled' : 'enabled'}`);
};
@ -457,7 +457,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">Enabled</label>
<button
onClick={() => updateSetting(['cassette', 'enabled'], cassette.enabled ? 0 : 1)}
onClick={() => updateSetting(['devices', 'cassette', 'enabled'], cassette.enabled ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${cassette.enabled ? 'bg-blue-600' : 'bg-neutral-300'}`}
>
<div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${cassette.enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
@ -469,7 +469,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
<input
type="text"
value={cassette.url || ''}
onChange={(e) => updateSetting(['cassette', 'url'], e.target.value)}
onChange={(e) => updateSetting(['devices', 'cassette', 'url'], e.target.value)}
className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
/>
<button
@ -485,7 +485,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
{showCassetteUrlBrowser && (
<MediaBrowser
currentPath={cassette.url || '/'}
onSelect={(p) => updateSetting(['cassette', 'url'], p)}
onSelect={(p) => updateSetting(['devices', 'cassette', 'url'], p)}
onClose={() => setShowCassetteUrlBrowser(false)}
/>
)}
@ -496,17 +496,17 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">User Port Enabled</label>
<button
onClick={() => updateSetting(['hardware', 'userport', 'enabled'], hardware.userport?.enabled ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${hardware.userport?.enabled ? 'bg-blue-600' : 'bg-neutral-300'}`}
onClick={() => updateSetting(['devices', 'userport', 'enabled'], userport.enabled ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${userport.enabled ? 'bg-blue-600' : 'bg-neutral-300'}`}
>
<div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${hardware.userport?.enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
<div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${userport.enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
</button>
</div>
<div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">User Port Mode</label>
<select
value={hardware.userport?.mode?.split('|')[0] || 'serial'}
onChange={(e) => updateSetting(['hardware', 'userport', 'mode'], e.target.value)}
value={userport.mode?.split('|')[0] || 'serial'}
onChange={(e) => updateSetting(['devices', 'userport', 'mode'], e.target.value)}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
>
<option value="serial">Serial</option>

24
src/app/components/GeneralPage.tsx
View File

@ -38,7 +38,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
setConfig(newConfig);
};
const general = config.general || {};
const general = config.preferences // alias kept so JSX references below don't need renaming || {};
return (
<div className="p-4 space-y-4">
@ -51,7 +51,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<input
type="text"
value={general.devicename || ''}
onChange={(e) => updateSetting(['general', 'devicename'], e.target.value)}
onChange={(e) => updateSetting(['preferences', 'devicename'], e.target.value)}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
/>
</div>
@ -60,7 +60,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<label className="text-sm text-neutral-500 block mb-2">Appearance</label>
<select
value={general.appearance?.split('|')[0] || 'auto'}
onChange={(e) => updateSetting(['general', 'appearance'], e.target.value)}
onChange={(e) => updateSetting(['preferences', 'appearance'], e.target.value)}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
>
<option value="light">Light</option>
@ -73,7 +73,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<label className="text-sm text-neutral-500 block mb-2">Language</label>
<select
value={general.language?.split('|')[0] || 'en'}
onChange={(e) => updateSetting(['general', 'language'], e.target.value)}
onChange={(e) => updateSetting(['preferences', 'language'], e.target.value)}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
>
<option value="en">English</option>
@ -87,7 +87,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
{!tzError && timezones ? (
<select
value={general.timezone || ''}
onChange={(e) => updateSetting(['general', 'timezone'], e.target.value)}
onChange={(e) => updateSetting(['preferences', 'timezone'], e.target.value)}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
>
{general.timezone && !timezones.includes(general.timezone) && (
@ -101,7 +101,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<input
type="text"
value={general.timezone || ''}
onChange={(e) => updateSetting(['general', 'timezone'], e.target.value)}
onChange={(e) => updateSetting(['preferences', 'timezone'], e.target.value)}
placeholder={timezones === null && !tzError ? 'Loading…' : 'America/Los_Angeles'}
disabled={timezones === null && !tzError}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg disabled:opacity-50"
@ -114,7 +114,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<input
type="text"
value={general.country || ''}
onChange={(e) => updateSetting(['general', 'country'], e.target.value)}
onChange={(e) => updateSetting(['preferences', 'country'], e.target.value)}
placeholder="US"
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
/>
@ -123,7 +123,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">Rotation Sounds</label>
<button
onClick={() => updateSetting(['general', 'rotationsounds'], general.rotationsounds ? 0 : 1)}
onClick={() => updateSetting(['preferences', 'rotationsounds'], general.rotationsounds ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
general.rotationsounds ? 'bg-blue-600' : 'bg-neutral-300'
}`}
@ -139,7 +139,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">Config Enabled</label>
<button
onClick={() => updateSetting(['general', 'configenabled'], general.configenabled ? 0 : 1)}
onClick={() => updateSetting(['preferences', 'configenabled'], general.configenabled ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
general.configenabled ? 'bg-blue-600' : 'bg-neutral-300'
}`}
@ -155,7 +155,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">Status Wait Enabled</label>
<button
onClick={() => updateSetting(['general', 'status_wait_enabled'], general.status_wait_enabled ? 0 : 1)}
onClick={() => updateSetting(['preferences', 'status_wait_enabled'], general.status_wait_enabled ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
general.status_wait_enabled ? 'bg-blue-600' : 'bg-neutral-300'
}`}
@ -171,7 +171,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">Encrypt Passphrase</label>
<button
onClick={() => updateSetting(['general', 'encrypt_passphrase'], general.encrypt_passphrase ? 0 : 1)}
onClick={() => updateSetting(['preferences', 'encrypt_passphrase'], general.encrypt_passphrase ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
general.encrypt_passphrase ? 'bg-blue-600' : 'bg-neutral-300'
}`}
@ -187,7 +187,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">Reset with Host</label>
<button
onClick={() => updateSetting(['general', 'reset_with_host'], general.reset_with_host ? 0 : 1)}
onClick={() => updateSetting(['preferences', 'reset_with_host'], general.reset_with_host ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
general.reset_with_host ? 'bg-blue-600' : 'bg-neutral-300'
}`}

70
src/app/components/IECPage.tsx
View File

@ -22,14 +22,14 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
setConfig(newConfig);
};
const iec = config.iec || {};
const settings = config.settings || {};
const boolDirEntries = Object.entries(iec.directory || {}).filter(([, v]) => v === 0 || v === 1);
const boolDirEntries = Object.entries(settings.directory || {}).filter(([, v]) => v === 0 || v === 1);
const isCompatMode = boolDirEntries.length > 0 && boolDirEntries.every(([, v]) => v === 0);
const setAllDirBools = (val: 0 | 1) => {
const newConfig = JSON.parse(JSON.stringify(config));
const dir = newConfig.iec?.directory ?? {};
const dir = newConfig.settings?.directory ?? {};
for (const k of Object.keys(dir)) {
if (dir[k] === 0 || dir[k] === 1) dir[k] = val;
}
@ -44,14 +44,14 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">IEC Enabled</label>
<button
onClick={() => updateSetting(['iec', 'enabled'], iec.enabled ? 0 : 1)}
onClick={() => updateSetting(['settings', 'enabled'], settings.enabled ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
iec.enabled ? 'bg-blue-600' : 'bg-neutral-300'
settings.enabled ? 'bg-blue-600' : 'bg-neutral-300'
}`}
>
<div
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
iec.enabled ? 'translate-x-6' : 'translate-x-0.5'
settings.enabled ? 'translate-x-6' : 'translate-x-0.5'
}`}
/>
</button>
@ -60,14 +60,14 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">VIC-20 Mode</label>
<button
onClick={() => updateSetting(['iec', 'vic20_mode'], iec.vic20_mode ? 0 : 1)}
onClick={() => updateSetting(['settings', 'vic20_mode'], settings.vic20_mode ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
iec.vic20_mode ? 'bg-blue-600' : 'bg-neutral-300'
settings.vic20_mode ? 'bg-blue-600' : 'bg-neutral-300'
}`}
>
<div
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
iec.vic20_mode ? 'translate-x-6' : 'translate-x-0.5'
settings.vic20_mode ? 'translate-x-6' : 'translate-x-0.5'
}`}
/>
</button>
@ -76,14 +76,14 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">VDrive Mode</label>
<button
onClick={() => updateSetting(['iec', 'vdrive_mode'], iec.vdrive_mode ? 0 : 1)}
onClick={() => updateSetting(['settings', 'vdrive_mode'], settings.vdrive_mode ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
iec.vdrive_mode ? 'bg-blue-600' : 'bg-neutral-300'
settings.vdrive_mode ? 'bg-blue-600' : 'bg-neutral-300'
}`}
>
<div
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
iec.vdrive_mode ? 'translate-x-6' : 'translate-x-0.5'
settings.vdrive_mode ? 'translate-x-6' : 'translate-x-0.5'
}`}
/>
</button>
@ -94,8 +94,8 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<div className="flex gap-2">
<input
type="text"
value={iec.autoboot || ''}
onChange={(e) => updateSetting(['iec', 'autoboot'], e.target.value)}
value={settings.autoboot || ''}
onChange={(e) => updateSetting(['settings', 'autoboot'], e.target.value)}
className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
/>
<button
@ -110,9 +110,9 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
{showMediaBrowser && (
<MediaBrowser
currentPath={iec.autoboot || '/'}
currentPath={settings.autoboot || '/'}
onSelect={(path) => {
updateSetting(['iec', 'autoboot'], path);
updateSetting(['settings', 'autoboot'], path);
setShowMediaBrowser(false);
}}
onClose={() => setShowMediaBrowser(false)}
@ -128,20 +128,20 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<button
onClick={() => {
const newConfig = JSON.parse(JSON.stringify(config));
const dr = newConfig.iec.drive_rom ?? {};
const dr = newConfig.settings.drive_roms ?? {};
const current = dr.enabled ?? dr.auto ?? 0;
dr.enabled = current ? 0 : 1;
delete dr.auto;
newConfig.iec.drive_rom = dr;
newConfig.settings.drive_roms = dr;
setConfig(newConfig);
}}
className={`relative w-12 h-6 rounded-full transition-colors ${
(iec.drive_rom?.enabled ?? iec.drive_rom?.auto) ? 'bg-blue-600' : 'bg-neutral-300'
(settings.drive_roms?.enabled ?? settings.drive_roms?.auto) ? 'bg-blue-600' : 'bg-neutral-300'
}`}
>
<div
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
(iec.drive_rom?.enabled ?? iec.drive_rom?.auto) ? 'translate-x-6' : 'translate-x-0.5'
(settings.drive_roms?.enabled ?? settings.drive_roms?.auto) ? 'translate-x-6' : 'translate-x-0.5'
}`}
/>
</button>
@ -154,8 +154,8 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<div className="flex gap-2">
<input
type="text"
value={iec.drive_rom?.[key] || ''}
onChange={(e) => updateSetting(['iec', 'drive_rom', key], e.target.value)}
value={settings.drive_roms?.[key] || ''}
onChange={(e) => updateSetting(['settings', 'drive_roms', key], e.target.value)}
className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
/>
<button
@ -172,9 +172,9 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
{driveRomBrowsingKey && (
<MediaBrowser
currentPath={iec.drive_rom?.[driveRomBrowsingKey] || '/'}
currentPath={settings.drive_roms?.[driveRomBrowsingKey] || '/'}
onSelect={(path) => {
updateSetting(['iec', 'drive_rom', driveRomBrowsingKey], path);
updateSetting(['settings', 'drive_roms', driveRomBrowsingKey], path);
setDriveRomBrowsingKey(null);
}}
onClose={() => setDriveRomBrowsingKey(null)}
@ -198,14 +198,14 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
</button>
</div>
{Object.entries(iec.directory || {}).map(([key, value]) => (
{Object.entries(settings.directory || {}).map(([key, value]) => (
<div key={key} className={`p-4 flex items-center justify-between transition-opacity ${isCompatMode ? 'opacity-40' : ''}`}>
<label className="text-sm text-neutral-500">
{key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
</label>
{value === 0 || value === 1 ? (
<button
onClick={() => { if (!isCompatMode) updateSetting(['iec', 'directory', key], value ? 0 : 1); }}
onClick={() => { if (!isCompatMode) updateSetting(['settings', 'directory', key], value ? 0 : 1); }}
className={`relative w-12 h-6 rounded-full transition-colors ${value ? 'bg-blue-600' : 'bg-neutral-300'} ${isCompatMode ? 'cursor-not-allowed' : ''}`}
>
<div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${value ? 'translate-x-6' : 'translate-x-0.5'}`} />
@ -215,7 +215,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
type="number"
value={value}
disabled={isCompatMode}
onChange={(e) => updateSetting(['iec', 'directory', key], parseInt(e.target.value))}
onChange={(e) => updateSetting(['settings', 'directory', key], parseInt(e.target.value))}
className="w-24 px-3 py-1 border border-neutral-300 rounded-lg text-right disabled:cursor-not-allowed"
/>
)}
@ -229,13 +229,13 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<div className="p-3 bg-neutral-50">
<h3 className="text-xs text-neutral-600">Serial</h3>
</div>
{Object.entries(iec.fastloaders?.hardware?.serial || {}).map(([key, value]) => (
{Object.entries(settings.fastloaders?.hardware?.serial || {}).map(([key, value]) => (
<div key={key} className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">
{key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
</label>
<button
onClick={() => updateSetting(['iec', 'fastloaders', 'hardware', 'serial', key], value ? 0 : 1)}
onClick={() => updateSetting(['settings', 'fastloaders', 'hardware', 'serial', key], value ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
value ? 'bg-blue-600' : 'bg-neutral-300'
}`}
@ -252,13 +252,13 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<div className="p-3 bg-neutral-50">
<h3 className="text-xs text-neutral-600">Parallel</h3>
</div>
{Object.entries(iec.fastloaders?.hardware?.parallel || {}).map(([key, value]) => (
{Object.entries(settings.fastloaders?.hardware?.parallel || {}).map(([key, value]) => (
<div key={key} className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">
{key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
</label>
<button
onClick={() => updateSetting(['iec', 'fastloaders', 'hardware', 'parallel', key], value ? 0 : 1)}
onClick={() => updateSetting(['settings', 'fastloaders', 'hardware', 'parallel', key], value ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
value ? 'bg-blue-600' : 'bg-neutral-300'
}`}
@ -276,13 +276,13 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Code2 className="w-4 h-4" /> Software Fastloaders</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
{Object.entries(iec.fastloaders?.software || {}).map(([key, value]) => (
{Object.entries(settings.fastloaders?.software || {}).map(([key, value]) => (
<div key={key} className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">
{key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
</label>
<button
onClick={() => updateSetting(['iec', 'fastloaders', 'software', key], value ? 0 : 1)}
onClick={() => updateSetting(['settings', 'fastloaders', 'software', key], value ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
value ? 'bg-blue-600' : 'bg-neutral-300'
}`}
@ -300,13 +300,13 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
<h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Link className="w-4 h-4" /> Chainloaders</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
{Object.entries(iec.chainloaders || {}).map(([key, value]) => (
{Object.entries(settings.chainloaders || {}).map(([key, value]) => (
<div key={key} className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">
{key.toUpperCase()}
</label>
<button
onClick={() => updateSetting(['iec', 'chainloaders', key], value ? 0 : 1)}
onClick={() => updateSetting(['settings', 'chainloaders', key], value ? 0 : 1)}
className={`relative w-12 h-6 rounded-full transition-colors ${
value ? 'bg-blue-600' : 'bg-neutral-300'
}`}

10
src/app/components/MediaManager.tsx
View File

@ -625,10 +625,10 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
const mountOnDevice = async (deviceType: 'drive' | 'meatloaf', key: string) => {
if (!mountEntry || !setConfig || !config) return;
const newConfig = JSON.parse(JSON.stringify(config));
if (!newConfig.iec) newConfig.iec = {};
if (!newConfig.iec.devices) newConfig.iec.devices = {};
if (!newConfig.iec.devices[key]) newConfig.iec.devices[key] = { type: deviceType };
const dev = newConfig.iec.devices[key];
if (!newConfig.devices) newConfig.devices = {};
if (!newConfig.devices.iec) newConfig.devices.iec = {};
if (!newConfig.devices.iec[key]) newConfig.devices.iec[key] = { type: deviceType };
const dev = newConfig.devices.iec[key];
if (mountEntry.name.toLowerCase().endsWith('.lst')) {
try {
@ -1165,7 +1165,7 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
<DialogDescription className="truncate">{mountEntry?.name}</DialogDescription>
</DialogHeader>
{(() => {
const allDevices = Object.entries(config?.iec?.devices ?? {});
const allDevices = Object.entries(config?.devices?.iec ?? {});
const drives = allDevices
.filter(([, v]: [string, any]) => (v as any)?.type === 'drive')
.map(([k, v]: [string, any]) => ({ type: 'drive' as const, key: k, base_url: v?.base_url as string | undefined, url: v?.url as string | undefined, enabled: !!v?.enabled }));

8
src/app/components/SearchOverlay.tsx
View File

@ -121,8 +121,8 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
const handleMount = (deviceNum: string, result: SearchResult) => {
const newConfig = JSON.parse(JSON.stringify(config));
if (newConfig.iec?.devices?.[deviceNum]) {
newConfig.iec.devices[deviceNum].url = result.path;
if (newConfig.devices?.iec?.[deviceNum]) {
newConfig.devices.iec[deviceNum].url = result.path;
setConfig(newConfig);
toast.success(`Mounted ${result.name} on Device #${deviceNum}`);
setShowDeviceMenu(null);
@ -131,8 +131,8 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
const getAvailableDevices = () => {
const devices: { number: string; name: string; url?: string }[] = [];
if (config.iec?.devices) {
for (const [num, device] of Object.entries(config.iec.devices)) {
if (config.devices?.iec) {
for (const [num, device] of Object.entries(config.devices.iec)) {
const d = device as any;
if (d.type === 'drive' && d.enabled) {
devices.push({ number: num, name: `Drive ${num}`, url: d.url });

8
src/app/components/StatusPage.tsx
View File

@ -29,8 +29,8 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
const [showDeviceOverlay, setShowDeviceOverlay] = useState(false);
// Find the first enabled device as the active device
const findActiveDevice = () => {
if (config.iec?.devices) {
for (const [num, device] of Object.entries(config.iec.devices)) {
if (config.devices?.iec) {
for (const [num, device] of Object.entries(config.devices.iec)) {
const d = device as any;
if (d.type === 'drive' && d.enabled) {
return { number: num, ...d };
@ -57,8 +57,8 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
const switchActiveMedia = (file: string) => {
const newConfig = JSON.parse(JSON.stringify(config));
if (newConfig.iec?.devices?.[activeDevice!.number]) {
newConfig.iec.devices[activeDevice!.number].url = file;
if (newConfig.devices?.iec?.[activeDevice!.number]) {
newConfig.devices.iec[activeDevice!.number].url = file;
setConfig(newConfig);
}
};

16
src/app/settings.ts
View File

@ -62,7 +62,7 @@ export async function readSettings(): Promise<SettingsConfig | null> {
const devices = JSON.parse(devicesText);
if (devices && typeof devices === 'object') {
// One-level deep merge: devices.json keys are merged into matching
// top-level objects in config (e.g. devices.iec.devices → config.iec.devices).
// top-level objects in config (e.g. devices.devices.iec → config.devices.iec).
for (const [k, v] of Object.entries(devices)) {
if (config[k] && typeof config[k] === 'object' && !Array.isArray(config[k]) &&
v && typeof v === 'object' && !Array.isArray(v)) {
@ -87,10 +87,9 @@ export async function readSettings(): Promise<SettingsConfig | null> {
export async function writeSettings(config: SettingsConfig): Promise<void> {
try { await createFolder(SETTINGS_DIR, true); } catch { /* exists */ }
const { iec, ...mainConfig } = config;
const { devices: iecDevices, ...iecBusConfig } = (iec ?? {}) as any;
const configJson = JSON.stringify({ ...mainConfig, iec: iecBusConfig }, null, 2) + '\n';
const devicesJson = JSON.stringify({ iec: { devices: iecDevices } }, null, 2) + '\n';
const { devices, ...mainConfig } = config;
const configJson = JSON.stringify(mainConfig, null, 2) + '\n';
const devicesJson = JSON.stringify({ devices }, null, 2) + '\n';
await Promise.all([
putFileContents(SETTINGS_PATH, configJson),
@ -220,17 +219,16 @@ export function useSettings(): UseSettingsResult {
// Modern browsers: `fetch` with `keepalive: true` continues even
// after the page is being unloaded. We don't await it.
try {
const { iec, ...mainConfig } = configRef.current;
const { devices: iecDevices, ...iecBusConfig } = (iec ?? {}) as any;
const { devices, ...mainConfig } = configRef.current;
void fetch(absoluteUrl(SETTINGS_PATH), {
method: 'PUT',
body: JSON.stringify({ ...mainConfig, iec: iecBusConfig }, null, 2) + '\n',
body: JSON.stringify(mainConfig, null, 2) + '\n',
headers: { 'Content-Type': 'application/json' },
keepalive: true,
});
void fetch(absoluteUrl(DEVICES_PATH), {
method: 'PUT',
body: JSON.stringify({ iec: { devices: iecDevices } }, null, 2) + '\n',
body: JSON.stringify({ devices }, null, 2) + '\n',
headers: { 'Content-Type': 'application/json' },
keepalive: true,
});

144
src/imports/config.json
View File

@ -1,49 +1,20 @@
{
"general": {
"devicename": "Meatloaf",
"appearance": "light",
"preferences": {
"appearance": "auto",
"language": "en",
"timezone": "America/New_York",
"timezone": "America/Los_Angeles",
"country": "US",
"hsioindex": -1,
"rotationsounds": 1,
"configenabled": 1,
"altconfigfile": "",
"boot_mode": 0,
"fnconfig_on_spifs": 1,
"status_wait_enabled": 1,
"encrypt_passphrase": 0,
"devicename": "Meatloaf",
"rotationsounds": 0,
"reset_with_host": 0
},
"host": {
"model": "c64",
"video": "ntsc",
"language": "en",
"kernal": "Stock",
"basic": "BASIC 2.0"
"kernal": "stock",
"basic": "2"
},
"hardware": {
"ps2": 1,
"userport": {
"enabled": 0,
"mode": ""
}
},
"wifi": [
{
"enabled": 1,
"ssid": "meatloaf",
"passphrase": "meatloaf"
},
{
"ssid": "CODA-23B0",
"passphrase": "meatloaf"
},
{
"ssid": "EEP_OPP_ORK_AH_AH",
"passphrase": "meatloaf"
}
],
"network": {
"hostname": "meatloaf.local",
"sntpserver": "pool.ntp.org",
@ -62,27 +33,29 @@
"tcp_console": 1
}
},
"bluetooth": {
"enabled": 0,
"devicename": "meatloaf",
"baud": 19200
},
"modem": {
"modem_enabled": 1,
"sniffer_enabled": 0
},
"cassette": {
"enabled": 0,
"play_record": "0 Play",
"pulldown": "1 Pulldown Resistor",
"url": "/"
},
"iec": {
"wifi": [
{
"ssid": "EEP_OPP_ORK_AH_AH",
"passphrase": "meatloaf",
"enabled": 1
},
{
"enabled": 0,
"ssid": "meatloaf",
"passphrase": "meatloaf"
},
{
"ssid": "CODA-23B0",
"passphrase": "meatloaf",
"enabled": 0
}
],
"settings": {
"enabled": 1,
"vic20_mode": 0,
"vdrive": 0,
"vdrive_mode": 0,
"autoboot": "",
"rom": {
"drive_roms": {
"enabled": 0,
"default": "",
"d64": "",
@ -136,60 +109,63 @@
"sid": 1,
"koa": 1,
"bbs": 1
},
"devices": {
}
},
"devices": {
"iec": {
"4": {
"enabled": 1,
"type": "printer",
"name": "MPS803"
"name": "MPS803",
"url": "/.print"
},
"8": {
"enabled": 1,
"type": "drive",
"url": "/sd",
"mode": 1
"mode": 1,
"url": "/"
},
"9": {
"enabled": 0,
"type": "drive",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
},
"10": {
"enabled": 0,
"type": "drive",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
},
"11": {
"enabled": 0,
"type": "drive",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
},
"12": {
"enabled": 0,
"type": "drive",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
},
"13": {
"enabled": 0,
"type": "drive",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
},
"14": {
"enabled": 0,
"type": "drive",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
},
"15": {
"enabled": 0,
"type": "drive",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
},
"16": {
"enabled": 1,
@ -229,14 +205,20 @@
"30": {
"enabled": 1,
"type": "meatloaf",
"url": "/",
"mode": 1
"mode": 1,
"url": "/"
}
}
},
"boip": {
"enabled": 0,
"host": "",
"port": ""
},
"ps2": 0,
"userport": {
"enabled": 0,
"mode": "parallel"
},
"cassette": {
"enabled": 0,
"play_record": "0 Play",
"pulldown": "1 Pulldown Resistor",
"url": "/sd/choppin_mall.t64"
}
}
}