From 3da4d8afc35cfbdc5115e3ab6d3a37be138fb8d1 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 9 Jun 2026 05:22:49 -0400
Subject: [PATCH] feat(IECPage, config): add VDrive mode toggle and update ROM
 settings in config

---
 src/app/components/IECPage.tsx | 78 ++++++++++++++++++++++++++++++++++
 src/imports/config.json        | 16 +++----
 2 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/src/app/components/IECPage.tsx b/src/app/components/IECPage.tsx
index c610ec3..ab19375 100644
--- a/src/app/components/IECPage.tsx
+++ b/src/app/components/IECPage.tsx
@@ -9,6 +9,7 @@ interface IECPageProps {
 
 export default function IECPage({ config, setConfig }: IECPageProps) {
   const [showMediaBrowser, setShowMediaBrowser] = useState(false);
+  const [driveRomBrowsingKey, setDriveRomBrowsingKey] = useState<string | null>(null);
   const updateSetting = (path: string[], value: any) => {
     const newConfig = JSON.parse(JSON.stringify(config));
     let current = newConfig;
@@ -60,6 +61,22 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
           </button>
         </div>
 
+        <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)}
+            className={`relative w-12 h-6 rounded-full transition-colors ${
+              iec.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'
+              }`}
+            />
+          </button>
+        </div>
+
         <div className="p-4">
           <label className="text-sm text-neutral-500 block mb-2">Boot Disk</label>
           <div className="flex gap-2">
@@ -91,6 +108,67 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
       )}
       </div>
 
+      <h2 className="text-sm text-neutral-500 pt-4">Drive ROM</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={() => {
+              const newConfig = JSON.parse(JSON.stringify(config));
+              const dr = newConfig.iec.drive_rom ?? {};
+              const current = dr.enabled ?? dr.auto ?? 0;
+              dr.enabled = current ? 0 : 1;
+              delete dr.auto;
+              newConfig.iec.drive_rom = 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'
+            }`}
+          >
+            <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'
+              }`}
+            />
+          </button>
+        </div>
+        {(['default', 'd64', 'd71', 'd81'] as const).map((key) => (
+          <div key={key} className="p-4">
+            <label className="text-sm text-neutral-500 block mb-2">
+              {key === 'default' ? 'Default' : key.toUpperCase()}
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={iec.drive_rom?.[key] || ''}
+                onChange={(e) => updateSetting(['iec', 'drive_rom', key], e.target.value)}
+                className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
+              />
+              <button
+                onClick={() => setDriveRomBrowsingKey(key)}
+                className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
+                title="Browse files"
+              >
+                <FolderOpen className="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {driveRomBrowsingKey && (
+        <MediaBrowser
+          currentPath={iec.drive_rom?.[driveRomBrowsingKey] || '/'}
+          onSelect={(path) => {
+            updateSetting(['iec', 'drive_rom', driveRomBrowsingKey], path);
+            setDriveRomBrowsingKey(null);
+          }}
+          onClose={() => setDriveRomBrowsingKey(null)}
+        />
+      )}
+
       <h2 className="text-sm text-neutral-500 pt-4">Directory Settings</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
diff --git a/src/imports/config.json b/src/imports/config.json
index 8b17262..2b9a176 100644
--- a/src/imports/config.json
+++ b/src/imports/config.json
@@ -80,7 +80,15 @@
   "iec": {
     "enabled": 1,
     "vic20_mode": 0,
+    "vdrive": 0,
     "boot_disk": "/autoboot[.PRG|.D64|.D81|etc]",
+    "rom": {
+      "enabled": 1,
+      "default": "dos1541|dos1541.jd|dos1541ii|dos1541ii.jd|dos1571|dos1571.jd|dos1581|dos1581.jd",
+      "d64": "dos1541|dos1541.jd|dos1541ii|dos1541ii.jd",
+      "d71": "dos1571|dos1571.jd",
+      "d81": "dos1581|dos1581.jd"
+    },
     "directory": {
       "force_0801": 1,
       "nfo_header": 1,
@@ -137,14 +145,6 @@
         }
       },
       "drive": {
-        "vdrive": 0,
-        "rom": {
-          "auto": 1,
-          "default": "dos1541|dos1541.jd|dos1541ii|dos1541ii.jd|dos1571|dos1571.jd|dos1581|dos1581.jd",
-          "d64": "dos1541|dos1541.jd|dos1541ii|dos1541ii.jd",
-          "d71": "dos1571|dos1571.jd",
-          "d81": "dos1581|dos1581.jd"
-        },
         "8": {
           "enabled": 1,
           "url": "/sd",