From 33fe06ca9f63badbecf8b88af9883ea2e97f2748 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 9 Jun 2026 04:34:00 -0400
Subject: [PATCH] feat(DevicesPage): update cassette section UI and rename
 header to 'IEC Devices'

---
 src/app/components/DevicesPage.tsx | 55 +++++++++++++++---------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/app/components/DevicesPage.tsx b/src/app/components/DevicesPage.tsx
index 335e638..662a961 100644
--- a/src/app/components/DevicesPage.tsx
+++ b/src/app/components/DevicesPage.tsx
@@ -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">