From 488d2304be632bb325598e270e7feb5c2a10e3a9 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 21:43:49 -0400
Subject: [PATCH] feat(DeviceDetailOverlay): improve device display and add
 clear URL/media set functionality

---
 src/app/components/DeviceDetailOverlay.tsx | 40 +++++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/app/components/DeviceDetailOverlay.tsx b/src/app/components/DeviceDetailOverlay.tsx
index 5a5aa62..2dfd3f4 100644
--- a/src/app/components/DeviceDetailOverlay.tsx
+++ b/src/app/components/DeviceDetailOverlay.tsx
@@ -240,14 +240,9 @@ export default function DeviceDetailOverlay({
               <button onClick={onClose} className="p-2 -m-2">
                 <X className="w-6 h-6" />
               </button>
-              <div className="flex items-center gap-2">
-                <div className={deviceData.enabled ? 'text-blue-600' : 'text-neutral-400'}>
-                  {getDeviceIcon(device.type)}
-                </div>
-                <div className="text-center">
-                  <div className="text-xs text-neutral-500 capitalize">{device.type}</div>
-                  <div className="font-medium">#{device.number}</div>
-                </div>
+              <div className={`flex flex-col items-center gap-0.5 ${deviceData.enabled ? 'text-blue-600' : 'text-neutral-400'}`}>
+                <span className="text-sm font-semibold leading-none">{device.number}</span>
+                {getDeviceIcon(device.type)}
               </div>
               <button
                 onClick={() => setShowCommandMenu(!showCommandMenu)}
@@ -352,9 +347,20 @@ export default function DeviceDetailOverlay({
                   <button
                     onClick={() => setBrowsingField('base_url')}
                     className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
+                    title="Browse"
                   >
                     <FolderOpen className="w-5 h-5" />
                   </button>
+                  <button
+                    onClick={() => {
+                      const path = getDevicePath();
+                      updateDeviceSetting([...path, 'base_url'], '');
+                    }}
+                    className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-red-50 hover:border-red-300 hover:text-red-500"
+                    title="Clear Base URL"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
                 </div>
               </div>
 
@@ -363,7 +369,7 @@ export default function DeviceDetailOverlay({
                 <div className="flex gap-2">
                   <input
                     type="text"
-                    value={deviceData.url}
+                    value={deviceData.url ?? ''}
                     onChange={(e) => {
                       const newUrl = e.target.value;
                       const devicePath = getDevicePath();
@@ -379,9 +385,25 @@ export default function DeviceDetailOverlay({
                   <button
                     onClick={() => setBrowsingField('url')}
                     className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
+                    title="Browse"
                   >
                     <FolderOpen className="w-5 h-5" />
                   </button>
+                  <button
+                    onClick={() => {
+                      const devicePath = getDevicePath();
+                      const newConfig = JSON.parse(JSON.stringify(config));
+                      let dev = newConfig;
+                      for (const k of devicePath) dev = dev[k];
+                      delete dev.url;
+                      delete dev.media_set;
+                      setConfig(newConfig);
+                    }}
+                    className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-red-50 hover:border-red-300 hover:text-red-500"
+                    title="Clear URL and media set"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
                 </div>
 
                 {mediaSetFiles && (