From a5627ef860ab4b6325127e7531a9a739c0393dd0 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 14 Apr 2026 00:49:54 -0400
Subject: [PATCH] style: enhance media button titles in DeviceDetailOverlay and
 StatusPage for better clarity

---
 src/app/components/DeviceDetailOverlay.tsx | 33 +++++++++++-------
 src/app/components/StatusPage.tsx          | 40 ++++++++++++----------
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/app/components/DeviceDetailOverlay.tsx b/src/app/components/DeviceDetailOverlay.tsx
index 472ffa4..517504a 100644
--- a/src/app/components/DeviceDetailOverlay.tsx
+++ b/src/app/components/DeviceDetailOverlay.tsx
@@ -326,19 +326,26 @@ export default function DeviceDetailOverlay({
                     <div className="mt-3">
                       <label className="text-sm text-neutral-500 block mb-2">Media Set</label>
                       <div className="flex gap-2 flex-wrap">
-                        {mediaSet.files.slice(0, 5).map((file, index) => (
-                          <button
-                            key={index}
-                            onClick={() => switchMedia(index)}
-                            className={`px-3 py-1.5 rounded-lg text-sm ${
-                              deviceData.url === file
-                                ? 'bg-blue-600 text-white'
-                                : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
-                            }`}
-                          >
-                            Disk {index + 1}
-                          </button>
-                        ))}
+                        {mediaSet.files.slice(0, 5).map((file, index) => {
+                          // Attempt to extract a title from the filename, fallback to filename
+                          // Example: /path/to/Game Disk.d64 or /path/to/disk1.d64
+                          const fileName = file.split('/').pop() || file;
+                          // If you have a title mapping, replace this logic
+                          const title = fileName.replace(/\.[^.]+$/, '');
+                          return (
+                            <button
+                              key={index}
+                              onClick={() => switchMedia(index)}
+                              className={`px-3 py-1.5 rounded-lg text-sm ${
+                                deviceData.url === file
+                                  ? 'bg-blue-600 text-white'
+                                  : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
+                              }`}
+                            >
+                              {`${index + 1}: ${title}`}
+                            </button>
+                          );
+                        })}
                       </div>
                     </div>
                   )}
diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index 1420ebd..0e29e4e 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -162,25 +162,29 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               }
               return (
                 <div className="flex flex-wrap gap-2 mt-2">
-                  {mediaSet.map((file, idx) => (
-                    <button
-                      key={file}
-                      className={`px-2 py-1 rounded text-xs border ${url === file ? 'bg-blue-600 text-white border-blue-600' : 'bg-neutral-100 text-neutral-700 border-neutral-300'}`}
-                      onClick={e => {
-                        e.stopPropagation();
-                        if (setConfig) {
-                          const newConfig = JSON.parse(JSON.stringify(config));
-                          let current = newConfig;
-                          if (current.iec && current.iec.devices && current.iec.devices.drive && current.iec.devices.drive[num]) {
-                            current.iec.devices.drive[num].url = file;
-                            setConfig(newConfig);
+                  {mediaSet.map((file, idx) => {
+                    const fileName = file.split('/').pop() || file;
+                    const title = fileName.replace(/\.[^.]+$/, '');
+                    return (
+                      <button
+                        key={file}
+                        className={`px-2 py-1 rounded text-xs border ${url === file ? 'bg-blue-600 text-white border-blue-600' : 'bg-neutral-100 text-neutral-700 border-neutral-300'}`}
+                        onClick={e => {
+                          e.stopPropagation();
+                          if (setConfig) {
+                            const newConfig = JSON.parse(JSON.stringify(config));
+                            let current = newConfig;
+                            if (current.iec && current.iec.devices && current.iec.devices.drive && current.iec.devices.drive[num]) {
+                              current.iec.devices.drive[num].url = file;
+                              setConfig(newConfig);
+                            }
                           }
-                        }
-                      }}
-                    >
-                      {idx + 1}
-                    </button>
-                  ))}
+                        }}
+                      >
+                        {`${idx + 1}: ${title}`}
+                      </button>
+                    );
+                  })}
                 </div>
               );
             })()}