From b3a1360ad9d29811e672ba714dd006ee732d5a7b Mon Sep 17 00:00:00 2001
From: OpeOginni <107570612+OpeOginni@users.noreply.github.com>
Date: Mon, 12 Jan 2026 22:26:58 +0100
Subject: feat(dialog-select-server): add icon button for server removal
 (#8053)

---
 .../app/src/components/dialog-select-server.tsx    | 44 +++++++++++++++-------
 1 file changed, 31 insertions(+), 13 deletions(-)

(limited to 'packages/app/src/components')

diff --git a/packages/app/src/components/dialog-select-server.tsx b/packages/app/src/components/dialog-select-server.tsx
index 7e2bcc181..3e4ee8883 100644
--- a/packages/app/src/components/dialog-select-server.tsx
+++ b/packages/app/src/components/dialog-select-server.tsx
@@ -5,6 +5,7 @@ import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Button } from "@opencode-ai/ui/button"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { normalizeServerUrl, serverDisplayName, useServer } from "@/context/server"
 import { usePlatform } from "@/context/platform"
 import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
@@ -116,6 +117,10 @@ export function DialogSelectServer() {
     select(value, true)
   }
 
+  async function handleRemove(url: string) {
+      server.remove(url)
+  }
+
   return (
     <Dialog title="Servers" description="Switch which OpenCode server this app connects to.">
       <div class="flex flex-col gap-4 pb-4">
@@ -130,20 +135,33 @@ export function DialogSelectServer() {
           }}
         >
           {(i) => (
-            <div
-              class="flex items-center gap-2 min-w-0 flex-1"
-              classList={{ "opacity-50": store.status[i]?.healthy === false }}
-            >
+            <div class="flex items-center gap-2 min-w-0 flex-1 group/item">
               <div
-                classList={{
-                  "size-1.5 rounded-full shrink-0": true,
-                  "bg-icon-success-base": store.status[i]?.healthy === true,
-                  "bg-icon-critical-base": store.status[i]?.healthy === false,
-                  "bg-border-weak-base": store.status[i] === undefined,
-                }}
-              />
-              <span class="truncate">{serverDisplayName(i)}</span>
-              <span class="text-text-weak">{store.status[i]?.version}</span>
+                class="flex items-center gap-2 min-w-0 flex-1"
+                classList={{ "opacity-50": store.status[i]?.healthy === false }}
+              >
+                <div
+                  classList={{
+                    "size-1.5 rounded-full shrink-0": true,
+                    "bg-icon-success-base": store.status[i]?.healthy === true,
+                    "bg-icon-critical-base": store.status[i]?.healthy === false,
+                    "bg-border-weak-base": store.status[i] === undefined,
+                  }}
+                />
+                <span class="truncate">{serverDisplayName(i)}</span>
+                <span class="text-text-weak">{store.status[i]?.version}</span>
+              </div>
+              <Show when={current() !== i && server.list.includes(i)}>
+                <IconButton
+                  icon="circle-x"
+                  variant="ghost"
+                  class="bg-transparent transition-opacity shrink-0 hover:scale-110"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleRemove(i)
+                  }}
+                />
+              </Show>
             </div>
           )}
         </List>
-- 
cgit v1.2.3