feat(App, DevicesPage): rename 'Tools' to 'System' and update hardware section header to 'User Port'

src/app/App.tsx

@@ -319,7 +319,7 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
             className="flex-1 flex flex-col items-center gap-1 py-2"
           >
             <Wrench className="w-5 h-5 text-white" />
-            <span className="text-xs text-white">Tools</span>
+            <span className="text-xs text-white">System</span>
           </button>
         </div>
       </nav>

src/app/components/DevicesPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
-import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw } from 'lucide-react';
+import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw, FolderOpen } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
+import MediaBrowser from './MediaBrowser';
 import { toast } from 'sonner';
 import { useWs } from '../ws';
 
@@ -35,6 +36,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
   };
   const [selectedDeviceIndex, setSelectedDeviceIndex] = useState<number | null>(null);
   const [isScanning, setIsScanning] = useState(false);
+  const [showCassetteUrlBrowser, setShowCassetteUrlBrowser] = useState(false);
 
   const hardware = config.hardware || {};
   const modem    = config.modem    || {};
@@ -353,17 +355,8 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
       </div>
 
       {/* ── Hardware ── */}
-      <h2 className="text-sm text-neutral-500 pt-4">Hardware</h2>
+      <h2 className="text-sm text-neutral-500 pt-4">User Port</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">PS/2</label>
-          <button
-            onClick={() => updateSetting(['hardware', 'ps2'], hardware.ps2 ? 0 : 1)}
-            className={`relative w-12 h-6 rounded-full transition-colors ${hardware.ps2 ? 'bg-blue-600' : 'bg-neutral-300'}`}
-          >
-            <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${hardware.ps2 ? 'translate-x-6' : 'translate-x-0.5'}`} />
-          </button>
-        </div>
         <div className="p-4 flex items-center justify-between">
           <label className="text-sm text-neutral-500">User Port Enabled</label>
           <button
@@ -382,55 +375,25 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
           >
             <option value="serial">Serial</option>
             <option value="parallel">Parallel</option>
+            <option value="wic64">WiC64</option>
             <option value="IEEE-488">IEEE-488</option>
           </select>
         </div>
       </div>
 
-      {/* ── Modem ── */}
+      {/* ── Hardware ── */}
-      <h2 className="text-sm text-neutral-500 pt-4">Modem</h2>
+      {/* <h2 className="text-sm text-neutral-500 pt-4">Other Hardware</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">Modem Enabled</label>
+          <label className="text-sm text-neutral-500">PS/2</label>
           <button
-            onClick={() => updateSetting(['modem', 'modem_enabled'], modem.modem_enabled ? 0 : 1)}
+            onClick={() => updateSetting(['hardware', 'ps2'], hardware.ps2 ? 0 : 1)}
-            className={`relative w-12 h-6 rounded-full transition-colors ${modem.modem_enabled ? 'bg-blue-600' : 'bg-neutral-300'}`}
+            className={`relative w-12 h-6 rounded-full transition-colors ${hardware.ps2 ? 'bg-blue-600' : 'bg-neutral-300'}`}
           >
-            <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${modem.modem_enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
+            <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${hardware.ps2 ? 'translate-x-6' : 'translate-x-0.5'}`} />
           </button>
         </div>
-        <div className="p-4 flex items-center justify-between">
+      </div> */}
-          <label className="text-sm text-neutral-500">Sniffer Enabled</label>
-          <button
-            onClick={() => updateSetting(['modem', 'sniffer_enabled'], modem.sniffer_enabled ? 0 : 1)}
-            className={`relative w-12 h-6 rounded-full transition-colors ${modem.sniffer_enabled ? 'bg-blue-600' : 'bg-neutral-300'}`}
-          >
-            <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${modem.sniffer_enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
-          </button>
-        </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">
-        <div className="p-4 flex items-center justify-between">
-          <label className="text-sm text-neutral-500">Enabled</label>
-          <button
-            onClick={() => updateSetting(['boip', 'enabled'], boip.enabled ? 0 : 1)}
-            className={`relative w-12 h-6 rounded-full transition-colors ${boip.enabled ? 'bg-blue-600' : 'bg-neutral-300'}`}
-          >
-            <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${boip.enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
-          </button>
-        </div>
-        <div className="p-4">
-          <label className="text-sm text-neutral-500 block mb-2">Host</label>
-          <input type="text" value={boip.host || ''} onChange={(e) => updateSetting(['boip', 'host'], 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">Port</label>
-          <input type="text" value={boip.port || ''} onChange={(e) => updateSetting(['boip', 'port'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
-        </div>
-      </div>
     </div>
   );
 }