feat(app): move local server controls into server panel

Author: wangzexi

packages/app/src/components/dialog-select-server.tsx

@@ -23,14 +23,20 @@ interface ServerRowProps extends ParentProps {
   dimmed?: boolean
   badge?: JSXElement
   showCredentials?: boolean
+  name?: string
+  details?: string[]
+  credentials?: {
+    username?: string
+    password?: string
+  }
 }
 
 export function ServerRow(props: ServerRowProps) {
   const language = useLanguage()
   const [truncated, setTruncated] = createSignal(false)
   let nameRef: HTMLSpanElement | undefined
   let versionRef: HTMLSpanElement | undefined
-  const name = createMemo(() => serverName(props.conn))
+  const name = createMemo(() => props.name ?? serverName(props.conn))
 
   const check = () => {
     const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
@@ -53,22 +59,31 @@ export function ServerRow(props: ServerRowProps) {
 
   const tooltipValue = () => (
     <span class="flex items-center gap-2">
-      <span>{serverName(props.conn, true)}</span>
+      <span>{name()}</span>
       <Show when={props.status?.version}>
         <span class="text-text-invert-weak">v{props.status?.version}</span>
       </Show>
     </span>
   )
 
   const badge = children(() => props.badge)
+  const details = createMemo(() => props.details?.filter(Boolean) ?? [])
+  const credentials = createMemo(() => {
+    if (props.credentials) return props.credentials
+    if (props.conn.type !== "http") return
+    return {
+      username: props.conn.http.username,
+      password: props.conn.http.password,
+    }
+  })
 
   return (
     <Tooltip
       class="flex-1 min-w-0"
       value={tooltipValue()}
       contentStyle={{ "max-width": "none", "white-space": "nowrap" }}
       placement="top-start"
-      inactive={!truncated() && !props.conn.displayName}
+      inactive={!truncated() && !props.conn.displayName && !props.name}
     >
       <div class={props.class} classList={{ "opacity-50": props.dimmed }}>
         <div class="flex flex-col items-start min-w-0 w-full">
@@ -92,19 +107,21 @@ export function ServerRow(props: ServerRowProps) {
               {(badge) => badge()}
             </Show>
           </div>
-          <Show when={props.showCredentials && props.conn.type === "http" && props.conn}>
-            {(conn) => (
-              <div class="flex flex-row gap-3">
-                <span>
-                  {conn().http.username ? (
-                    <span class="text-text-weak">{conn().http.username}</span>
-                  ) : (
-                    <span class="text-text-weaker">{language.t("server.row.noUsername")}</span>
-                  )}
-                </span>
-                {conn().http.password && <span class="text-text-weak">••••••••</span>}
-              </div>
-            )}
+          <Show when={props.showCredentials && (details().length || credentials())}>
+            <div class="flex flex-row gap-3">
+              <Show when={details().length}>
+                <span class="text-text-weak">{details().join(" · ")}</span>
+              </Show>
+              <Show when={credentials()?.username}>
+                <span class="text-text-weak">{credentials()?.username}</span>
+              </Show>
+              <Show when={!details().length && credentials() && !credentials()?.username}>
+                <span class="text-text-weaker">{language.t("server.row.noUsername")}</span>
+              </Show>
+              <Show when={credentials()?.password}>
+                <span class="text-text-weak">••••••••</span>
+              </Show>
+            </div>
           </Show>
         </div>
         {props.children}

packages/app/src/components/server/server-row.tsx

@@ -1,4 +1,4 @@
-import { Component, Show, createEffect, createMemo, createResource, createSignal, onMount, type JSX } from "solid-js"
+import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -91,11 +91,6 @@ export const SettingsGeneral: Component = () => {
 
   const [store, setStore] = createStore({
     checking: false,
-    inboundEnabled: false,
-    inboundUsername: "",
-    inboundPassword: "",
-    inboundPort: "",
-    inboundSaving: false,
   })
 
   const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
@@ -124,102 +119,6 @@ export const SettingsGeneral: Component = () => {
 
     permission.disableAutoAccept(params.id, value)
   }
-  const desktop = createMemo(() => platform.platform === "desktop")
-  const [inboundConfig] = createResource(() => platform.getInboundServerConfig?.())
-  const [inboundRuntimeConfig] = createResource(() => platform.getInboundRuntimeServerConfig?.())
-  const [inboundHydrated, setInboundHydrated] = createSignal(false)
-  const [savedInboundConfig, setSavedInboundConfig] = createSignal<{
-    enabled: boolean
-    username: string
-    password: string
-    port: number | null
-  }>()
-
-  createEffect(() => {
-    if (inboundHydrated()) return
-
-    const config = inboundConfig()
-    if (!config) return
-    setStore("inboundEnabled", config.enabled)
-    setStore("inboundUsername", config.username)
-    setStore("inboundPassword", config.password)
-    setStore("inboundPort", config.port === null ? "" : String(config.port))
-    setSavedInboundConfig(config)
-    setInboundHydrated(true)
-  })
-  const inboundRuntime = createMemo(() => platform.inboundRuntimeServerConfig?.() ?? inboundRuntimeConfig())
-  const inboundUsernamePlaceholder = createMemo(() => inboundRuntime()?.username ?? "opencode")
-  const inboundPasswordPlaceholder = createMemo(
-    () => inboundRuntime()?.password ?? language.t("settings.general.row.inboundPassword.placeholder"),
-  )
-  const inboundPortPlaceholder = createMemo(() => {
-    const port = inboundRuntime()?.port
-    return typeof port === "number" ? String(port) : ""
-  })
-
-  const parseInboundPort = (value: string) => {
-    const trimmed = value.trim()
-    if (!trimmed) return null
-
-    const parsed = Number.parseInt(trimmed, 10)
-    if (!Number.isInteger(parsed) || parsed < 1 || parsed > 65535) return undefined
-
-    return parsed
-  }
-
-  const saveInboundConfig = (config: { enabled: boolean; username: string; password: string; port: string }) => {
-    if (!platform.setInboundServerConfig) return
-
-    const current = savedInboundConfig() ?? inboundConfig.latest
-    const port = parseInboundPort(config.port)
-    if (config.enabled && port === undefined) {
-      showToast({
-        title: language.t("common.requestFailed"),
-        description: language.t("settings.general.row.inboundPort.invalid"),
-      })
-      return
-    }
-
-    const next = {
-      enabled: config.enabled,
-      username: config.username.trim(),
-      password: config.password,
-      port: port ?? null,
-    }
-
-    const changed =
-      !current ||
-      current.enabled !== next.enabled ||
-      current.username !== next.username ||
-      current.password !== next.password ||
-      current.port !== next.port
-
-    if (!changed) return
-
-    setStore("inboundSaving", true)
-    void platform
-      .setInboundServerConfig(next)
-      .then(() => {
-        setSavedInboundConfig(next)
-      })
-      .finally(() => setStore("inboundSaving", false))
-  }
-
-  const saveInboundOnBlur = () => {
-    saveInboundConfig({
-      enabled: store.inboundEnabled,
-      username: store.inboundUsername,
-      password: store.inboundPassword,
-      port: store.inboundPort,
-    })
-  }
-
-  const saveInboundOnEnter = (event: KeyboardEvent) => {
-    if (event.key !== "Enter") return
-    event.preventDefault()
-    saveInboundOnBlur()
-  }
-
   const check = () => {
     if (!platform.checkUpdate) return
     setStore("checking", true)
@@ -827,106 +726,6 @@ export const SettingsGeneral: Component = () => {
     </div>
   )
 
-  const DesktopNetworkSection = () => (
-    <Show when={desktop() && platform.getInboundServerConfig && platform.setInboundServerConfig}>
-      <div class="flex flex-col gap-1">
-        <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.network")}</h3>
-        <SettingsList>
-          <SettingsRow
-            title={language.t("settings.general.row.inboundAccess.title")}
-            description={language.t("settings.general.row.inboundAccess.description")}
-          >
-            <div data-action="settings-inbound-access">
-              <Switch
-                checked={store.inboundEnabled}
-                disabled={inboundConfig.state === "pending" || store.inboundSaving}
-                onChange={(checked) => {
-                  setStore("inboundEnabled", checked)
-                  saveInboundConfig({
-                    enabled: checked,
-                    username: store.inboundUsername,
-                    password: store.inboundPassword,
-                    port: store.inboundPort,
-                  })
-                }}
-              />
-            </div>
-          </SettingsRow>
-          <Show when={store.inboundEnabled}>
-            <SettingsRow
-              title={language.t("settings.general.row.inboundUsername.title")}
-              description={language.t("settings.general.row.inboundUsername.description")}
-            >
-              <div class="w-full sm:w-[220px]">
-                <TextField
-                  data-action="settings-inbound-username"
-                  label={language.t("settings.general.row.inboundUsername.title")}
-                  hideLabel
-                  type="text"
-                  value={store.inboundUsername || ""}
-                  onChange={(value) => setStore("inboundUsername", value)}
-                  onBlur={saveInboundOnBlur}
-                  onKeyDown={saveInboundOnEnter}
-                  placeholder={inboundUsernamePlaceholder()}
-                  spellcheck={false}
-                  autocorrect="off"
-                  autocomplete="off"
-                  autocapitalize="off"
-                  class="text-12-regular"
-                />
-              </div>
-            </SettingsRow>
-            <SettingsRow
-              title={language.t("settings.general.row.inboundPassword.title")}
-              description={language.t("settings.general.row.inboundPassword.description")}
-            >
-              <div class="w-full sm:w-[220px]">
-                <TextField
-                  data-action="settings-inbound-password"
-                  label={language.t("settings.general.row.inboundPassword.title")}
-                  hideLabel
-                  type="text"
-                  value={store.inboundPassword || ""}
-                  onChange={(value) => setStore("inboundPassword", value)}
-                  onBlur={saveInboundOnBlur}
-                  onKeyDown={saveInboundOnEnter}
-                  placeholder={inboundPasswordPlaceholder()}
-                  class="text-12-regular"
-                />
-              </div>
-            </SettingsRow>
-            <SettingsRow
-              title={language.t("settings.general.row.inboundPort.title")}
-              description={language.t("settings.general.row.inboundPort.description")}
-            >
-              <div class="flex gap-2 items-center">
-                <div class="w-full sm:w-[220px]">
-                  <TextField
-                    data-action="settings-inbound-port"
-                    label={language.t("settings.general.row.inboundPort.title")}
-                    hideLabel
-                    type="text"
-                    inputMode="numeric"
-                    value={store.inboundPort || ""}
-                    onChange={(value) => setStore("inboundPort", value)}
-                    onBlur={saveInboundOnBlur}
-                    onKeyDown={saveInboundOnEnter}
-                    placeholder={inboundPortPlaceholder()}
-                    spellcheck={false}
-                    autocorrect="off"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    class="text-12-regular"
-                  />
-                </div>
-              </div>
-            </SettingsRow>
-          </Show>
-        </SettingsList>
-      </div>
-    </Show>
-  )
-
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
@@ -943,7 +742,6 @@ export const SettingsGeneral: Component = () => {
         <NotificationsSection />
 
         <SoundsSection />
-        <DesktopNetworkSection />
 
         <UpdatesSection />
 
@@ -973,7 +771,7 @@ export const SettingsGeneral: Component = () => {
           </div>
         </Show>
 
-        <Show when={desktop() && import.meta.env.VITE_OPENCODE_CHANNEL === "beta"}>
+        <Show when={platform.platform === "desktop" && import.meta.env.VITE_OPENCODE_CHANNEL === "beta"}>
           <AdvancedSection />
         </Show>
       </div>