Skip to content

refactor: optimize UI button layout and fix dependency loop #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 14, 2025
Merged

refactor: optimize UI button layout and fix dependency loop #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions src/app/_components/InstalledScriptsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ export function InstalledScriptsTab() {
containerStatusMutation.mutate({ serverIds });
}
}, 500);
}, [containerStatusMutation]);
}, []);

// Run cleanup when component mounts and scripts are loaded (only once)
useEffect(() => {
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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" />
Expand Down
6 changes: 4 additions & 2 deletions src/server/api/routers/installedScripts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down