From 86b44bbed3e664446ef00fb7ff66d4d3c6863092 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 14 Oct 2025 13:24:24 +0000
Subject: [PATCH] Add Add Host shortcut to Docker hosts list

---
 .../src/components/Docker/DockerHosts.tsx      | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/components/Docker/DockerHosts.tsx b/frontend-modern/src/components/Docker/DockerHosts.tsx
index 2f5a53f..b4f3ed8 100644
--- a/frontend-modern/src/components/Docker/DockerHosts.tsx
+++ b/frontend-modern/src/components/Docker/DockerHosts.tsx
@@ -1,5 +1,6 @@
 import type { Component } from 'solid-js';
 import { For, Show, createMemo, createSignal, createEffect, on } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
 import type { DockerHost, DockerContainer, Alert } from '@/types/api';
 import { formatBytes, formatRelativeTime, formatUptime } from '@/utils/format';
 import { Card } from '@/components/shared/Card';
@@ -384,6 +385,7 @@ const DockerContainerRow: Component<{
 };
 
 export const DockerHosts: Component<DockerHostsProps> = (props) => {
+  const navigate = useNavigate();
   const { initialDataReceived, reconnecting, connected } = useWebSocket();
   const isLoading = createMemo(() => {
     if (typeof initialDataReceived === 'function') {
@@ -624,9 +626,19 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
               <div class="flex gap-4">
                 {/* Left: Host List */}
                 <Card padding="none" class="w-72 flex-shrink-0 overflow-hidden">
-                  <div class="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
-                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Docker Hosts</h3>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{sortedHosts().length} {sortedHosts().length === 1 ? 'host' : 'hosts'}</p>
+                  <div class="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-start justify-between gap-2">
+                    <div>
+                      <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Docker Hosts</h3>
+                      <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{sortedHosts().length} {sortedHosts().length === 1 ? 'host' : 'hosts'}</p>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => navigate('/settings/docker')}
+                      class="inline-flex items-center gap-1 rounded border border-blue-200 dark:border-blue-500/40 bg-white dark:bg-blue-500/10 px-2 py-1 text-[11px] font-medium text-blue-600 dark:text-blue-300 shadow-sm hover:bg-blue-50 dark:hover:bg-blue-500/20 transition-colors"
+                    >
+                      <span class="text-base leading-none">+</span>
+                      <span>Add Host</span>
+                    </button>
                   </div>
                   <div class="divide-y divide-gray-200 dark:divide-gray-700">
                     <For each={sortedHosts()}>