chore: refactoring and tests, splitting up files (#12495)

packages/app/src/components/status-popover.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js"
+import { createEffect, createMemo, For, onCleanup, Show } from "solid-js"
 import { createStore, reconcile } from "solid-js/store"
 import { useNavigate } from "@solidjs/router"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -7,30 +7,15 @@ import { Tabs } from "@opencode-ai/ui/tabs"
 import { Button } from "@opencode-ai/ui/button"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
-import { normalizeServerUrl, serverDisplayName, useServer } from "@/context/server"
+import { normalizeServerUrl, useServer } from "@/context/server"
 import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
-import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
 import { DialogSelectServer } from "./dialog-select-server"
 import { showToast } from "@opencode-ai/ui/toast"
-
-type ServerStatus = { healthy: boolean; version?: string }
-
-async function checkHealth(url: string, platform: ReturnType<typeof usePlatform>): Promise<ServerStatus> {
-  const signal = (AbortSignal as unknown as { timeout?: (ms: number) => AbortSignal }).timeout?.(3000)
-  const sdk = createOpencodeClient({
-    baseUrl: url,
-    fetch: platform.fetch,
-    signal,
-  })
-  return sdk.global
-    .health()
-    .then((x) => ({ healthy: x.data?.healthy === true, version: x.data?.version }))
-    .catch(() => ({ healthy: false }))
-}
+import { ServerRow } from "@/components/server/server-row"
+import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
 
 export function StatusPopover() {
   const sync = useSync()
@@ -42,10 +27,11 @@ export function StatusPopover() {
   const navigate = useNavigate()
 
   const [store, setStore] = createStore({
-    status: {} as Record<string, ServerStatus | undefined>,
+    status: {} as Record<string, ServerHealth | undefined>,
     loading: null as string | null,
     defaultServerUrl: undefined as string | undefined,
   })
+  const fetcher = platform.fetch ?? globalThis.fetch
 
   const servers = createMemo(() => {
     const current = server.url
@@ -60,7 +46,7 @@ export function StatusPopover() {
     if (!list.length) return list
     const active = server.url
     const order = new Map(list.map((url, index) => [url, index] as const))
-    const rank = (value?: ServerStatus) => {
+    const rank = (value?: ServerHealth) => {
       if (value?.healthy === true) return 0
       if (value?.healthy === false) return 2
       return 1
@@ -75,10 +61,10 @@ export function StatusPopover() {
   })
 
   async function refreshHealth() {
-    const results: Record<string, ServerStatus> = {}
+    const results: Record<string, ServerHealth> = {}
     await Promise.all(
       servers().map(async (url) => {
-        results[url] = await checkHealth(url, platform)
+        results[url] = await checkServerHealth(url, fetcher)
       }),
     )
     setStore("status", reconcile(results))
@@ -213,78 +199,43 @@ export function StatusPopover() {
                     const isDefault = () => url === store.defaultServerUrl
                     const status = () => store.status[url]
                     const isBlocked = () => status()?.healthy === false
-                    const [truncated, setTruncated] = createSignal(false)
-                    let nameRef: HTMLSpanElement | undefined
-                    let versionRef: HTMLSpanElement | undefined
-
-                    onMount(() => {
-                      const check = () => {
-                        const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
-                        const versionTruncated = versionRef ? versionRef.scrollWidth > versionRef.clientWidth : false
-                        setTruncated(nameTruncated || versionTruncated)
-                      }
-                      check()
-                      window.addEventListener("resize", check)
-                      onCleanup(() => window.removeEventListener("resize", check))
-                    })
-
-                    const tooltipValue = () => {
-                      const name = serverDisplayName(url)
-                      const version = status()?.version
-                      return (
-                        <span class="flex items-center gap-2">
-                          <span>{name}</span>
-                          <Show when={version}>
-                            <span class="text-text-invert-base">{version}</span>
-                          </Show>
-                        </span>
-                      )
-                    }
 
                     return (
-                      <Tooltip value={tooltipValue()} placement="top" inactive={!truncated()}>
-                        <button
-                          type="button"
-                          class="flex items-center gap-2 w-full h-8 pl-3 pr-1.5 py-1.5 rounded-md transition-colors text-left"
-                          classList={{
-                            "opacity-50": isBlocked(),
-                            "hover:bg-surface-raised-base-hover": !isBlocked(),
-                            "cursor-not-allowed": isBlocked(),
-                          }}
-                          aria-disabled={isBlocked()}
-                          onClick={() => {
-                            if (isBlocked()) return
-                            server.setActive(url)
-                            navigate("/")
-                          }}
+                      <button
+                        type="button"
+                        class="flex items-center gap-2 w-full h-8 pl-3 pr-1.5 py-1.5 rounded-md transition-colors text-left"
+                        classList={{
+                          "hover:bg-surface-raised-base-hover": !isBlocked(),
+                          "cursor-not-allowed": isBlocked(),
+                        }}
+                        aria-disabled={isBlocked()}
+                        onClick={() => {
+                          if (isBlocked()) return
+                          server.setActive(url)
+                          navigate("/")
+                        }}
+                      >
+                        <ServerRow
+                          url={url}
+                          status={status()}
+                          dimmed={isBlocked()}
+                          class="flex items-center gap-2 w-full min-w-0"
+                          nameClass="text-14-regular text-text-base truncate"
+                          versionClass="text-12-regular text-text-weak truncate"
+                          badge={
+                            <Show when={isDefault()}>
+                              <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
+                                {language.t("common.default")}
+                              </span>
+                            </Show>
+                          }
                         >
-                          <div
-                            classList={{
-                              "size-1.5 rounded-full shrink-0": true,
-                              "bg-icon-success-base": status()?.healthy === true,
-                              "bg-icon-critical-base": status()?.healthy === false,
-                              "bg-border-weak-base": status() === undefined,
-                            }}
-                          />
-                          <span ref={nameRef} class="text-14-regular text-text-base truncate">
-                            {serverDisplayName(url)}
-                          </span>
-                          <Show when={status()?.version}>
-                            <span ref={versionRef} class="text-12-regular text-text-weak truncate">
-                              {status()?.version}
-                            </span>
-                          </Show>
-                          <Show when={isDefault()}>
-                            <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
-                              {language.t("common.default")}
-                            </span>
-                          </Show>
                           <div class="flex-1" />
                           <Show when={isActive()}>
                             <Icon name="check" size="small" class="text-icon-weak shrink-0" />
                           </Show>
-                        </button>
-                      </Tooltip>
+                        </ServerRow>
+                      </button>
                     )
                   }}
                 </For>