From 5b11a6bad89ee5bb90b96e85f4514399edcf4709 Mon Sep 17 00:00:00 2001
From: Michel Roegl-Brunner
 <73236783+michelroegl-brunner@users.noreply.github.com>
Date: Tue, 14 Oct 2025 16:22:38 +0200
Subject: [PATCH] refactor: optimize UI button layout and fix dependency loop
 (#149)

- Add Open UI button next to IP:Port in installed scripts table
- Move Re-detect button to Actions dropdown for better space usage
- Fix dependency array loop in fetchContainerStatuses useCallback
- Hide buttons for stopped containers to prevent invalid actions
- Enhance auto-detect success message with LXC ID and hostname
- Improve font consistency by removing monospace from IP:Port text
- Optimize screen real estate with cleaner, more scannable layout
---
 src/app/_components/InstalledScriptsTab.tsx | 31 ++++++++++++---------
 src/server/api/routers/installedScripts.ts  |  6 ++--
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx
index 8aca574..f53e04f 100644
--- a/src/app/_components/InstalledScriptsTab.tsx
+++ b/src/app/_components/InstalledScriptsTab.tsx
@@ -377,7 +377,7 @@ export function InstalledScriptsTab() {
         containerStatusMutation.mutate({ serverIds });
       }
     }, 500);
-  }, [containerStatusMutation]);
+  }, []);
 
   // Run cleanup when component mounts and scripts are loaded (only once)
   useEffect(() => {
@@ -1365,21 +1365,17 @@ export function InstalledScriptsTab() {
                           </div>
                         ) : (
                           script.web_ui_ip ? (
-                            <div className="flex items-center justify-between w-full">
-                              <button
-                                onClick={() => handleOpenWebUI(script)}
-                                className="text-sm font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline flex-shrink-0"
-                              >
+                            <div className="flex items-center space-x-3">
+                              <span className="text-sm text-foreground">
                                 {script.web_ui_ip}:{script.web_ui_port ?? 80}
-                              </button>
-                              {script.container_id && script.execution_mode === 'ssh' && (
+                              </span>
+                              {containerStatuses.get(script.id) === 'running' && (
                                 <button
-                                  onClick={() => handleAutoDetectWebUI(script)}
-                                  disabled={autoDetectWebUIMutation.isPending}
-                                  className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors flex-shrink-0 ml-2"
-                                  title="Re-detect IP and port"
+                                  onClick={() => handleOpenWebUI(script)}
+                                  className="text-xs px-2 py-1 bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md rounded disabled:opacity-50 flex-shrink-0"
+                                  title="Open Web UI"
                                 >
-                                  {autoDetectWebUIMutation.isPending ? '...' : 'Re-detect'}
+                                  Open UI
                                 </button>
                               )}
                             </div>
@@ -1487,6 +1483,15 @@ export function InstalledScriptsTab() {
                                         Open UI
                                       </DropdownMenuItem>
                                     )}
+                                    {script.container_id && script.execution_mode === 'ssh' && script.web_ui_ip && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleAutoDetectWebUI(script)}
+                                        disabled={autoDetectWebUIMutation.isPending || containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                                      >
+                                        {autoDetectWebUIMutation.isPending ? 'Re-detect...' : 'Re-detect IP/Port'}
+                                      </DropdownMenuItem>
+                                    )}
                                     {script.container_id && script.execution_mode === 'ssh' && (
                                       <>
                                         <DropdownMenuSeparator className="bg-gray-700" />
diff --git a/src/server/api/routers/installedScripts.ts b/src/server/api/routers/installedScripts.ts
index 3a25704..15407b3 100644
--- a/src/server/api/routers/installedScripts.ts
+++ b/src/server/api/routers/installedScripts.ts
@@ -1137,9 +1137,11 @@ export const installedScriptsRouter = createTRPCRouter({
         console.log('✅ Successfully updated database');
         return {
           success: true,
-          message: `Successfully detected IP: ${detectedIp}:${detectedPort}`,
+          message: `Successfully detected IP: ${detectedIp}:${detectedPort} for LXC ${scriptData.container_id} on ${(server as any).name}`,
           detectedIp,
-          detectedPort: detectedPort
+          detectedPort: detectedPort,
+          containerId: scriptData.container_id,
+          serverName: (server as any).name
         };
       } catch (error) {
         console.error('Error in autoDetectWebUI:', error);