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

feat(DevicesPage): update cassette section UI and rename header to 'IEC Devices'

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-09 04:34:00 -04:00
parent 5ae3a6e584
commit 33fe06ca9f
1 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -255,7 +255,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
</div>
</div>
<div className="flex items-center justify-between mb-3">
<h2 className="text-sm text-neutral-500">All Devices</h2>
<h2 className="text-sm text-neutral-500">IEC Devices</h2>
<button
onClick={rescanBus}
disabled={isScanning}
@ -325,6 +325,33 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
/>
)}
{/* ── Cassette ── */}
<h2 className="text-sm text-neutral-500 pt-4">Cassette</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<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)}
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'}`} />
</button>
</div>
<div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">Play/Record</label>
<input type="text" value={cassette.play_record || ''} onChange={(e) => updateSetting(['cassette', 'play_record'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
</div>
<div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">Pulldown</label>
<input type="text" value={cassette.pulldown || ''} onChange={(e) => updateSetting(['cassette', 'pulldown'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
</div>
<div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">URL</label>
<input type="text" value={cassette.url || ''} onChange={(e) => updateSetting(['cassette', 'url'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
</div>
</div>
{/* ── Hardware ── */}
<h2 className="text-sm text-neutral-500 pt-4">Hardware</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
@ -383,32 +410,6 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
</div>
</div>
{/* ── Cassette ── */}
<h2 className="text-sm text-neutral-500 pt-4">Cassette</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<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)}
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'}`} />
</button>
</div>
<div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">Play/Record</label>
<input type="text" value={cassette.play_record || ''} onChange={(e) => updateSetting(['cassette', 'play_record'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
</div>
<div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">Pulldown</label>
<input type="text" value={cassette.pulldown || ''} onChange={(e) => updateSetting(['cassette', 'pulldown'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
</div>
<div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">URL</label>
<input type="text" value={cassette.url || ''} onChange={(e) => updateSetting(['cassette', 'url'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
</div>
</div>
{/* ── BOIP ── */}
<h2 className="text-sm text-neutral-500 pt-4">BOIP</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">