From 3f501c7679f5254b98ea8e3141441cf1ed1b310c Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Thu, 28 May 2026 13:31:58 +0800 Subject: [PATCH 1/6] feat(app): add servers tab to settings dialog --- .../components/dialog-connect-provider.tsx | 2 + packages/app/src/components/dialog-fork.tsx | 2 +- .../src/components/dialog-manage-models.tsx | 1 + .../components/dialog-select-directory.tsx | 1 + .../app/src/components/dialog-select-file.tsx | 1 + .../app/src/components/dialog-select-mcp.tsx | 1 + .../components/dialog-select-model-unpaid.tsx | 4 +- .../src/components/dialog-select-model.tsx | 2 +- .../src/components/dialog-select-provider.tsx | 1 + .../src/components/dialog-select-server.tsx | 285 +++++++++--------- .../app/src/components/dialog-settings.tsx | 10 +- .../app/src/components/settings-servers.tsx | 21 ++ packages/ui/src/components/list.css | 2 +- 13 files changed, 190 insertions(+), 143 deletions(-) create mode 100644 packages/app/src/components/settings-servers.tsx diff --git a/packages/app/src/components/dialog-connect-provider.tsx b/packages/app/src/components/dialog-connect-provider.tsx index a0ccc161f25f..fab172d2eedd 100644 --- a/packages/app/src/components/dialog-connect-provider.tsx +++ b/packages/app/src/components/dialog-connect-provider.tsx @@ -277,6 +277,7 @@ export function DialogConnectProvider(props: { provider: string }) {
{select()?.message}
x.value} current={select()?.options.find((x) => x.value === formStore.value[select()!.key])} @@ -364,6 +365,7 @@ export function DialogConnectProvider(props: { provider: string }) {
{ listRef = ref }} diff --git a/packages/app/src/components/dialog-fork.tsx b/packages/app/src/components/dialog-fork.tsx index 3618a0581e02..beb7b3ccb2b2 100644 --- a/packages/app/src/components/dialog-fork.tsx +++ b/packages/app/src/components/dialog-fork.tsx @@ -88,7 +88,7 @@ export const DialogFork: Component = () => { return ( x.id} diff --git a/packages/app/src/components/dialog-manage-models.tsx b/packages/app/src/components/dialog-manage-models.tsx index ace79e38a7c0..b46034bbad96 100644 --- a/packages/app/src/components/dialog-manage-models.tsx +++ b/packages/app/src/components/dialog-manage-models.tsx @@ -39,6 +39,7 @@ export const DialogManageModels: Component = () => { } > `${x?.provider?.id}:${x?.id}`} diff --git a/packages/app/src/components/dialog-select-directory.tsx b/packages/app/src/components/dialog-select-directory.tsx index c7c3b5098665..58601abac8be 100644 --- a/packages/app/src/components/dialog-select-directory.tsx +++ b/packages/app/src/components/dialog-select-directory.tsx @@ -324,6 +324,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) { return ( { description={language.t("dialog.mcp.description", { enabled: enabledCount(), total: totalCount() })} > x?.name ?? ""} diff --git a/packages/app/src/components/dialog-select-model-unpaid.tsx b/packages/app/src/components/dialog-select-model-unpaid.tsx index f916ef62308d..fae743bb81bd 100644 --- a/packages/app/src/components/dialog-select-model-unpaid.tsx +++ b/packages/app/src/components/dialog-select-model-unpaid.tsx @@ -45,7 +45,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
{language.t("dialog.model.unpaid.freeModels.title")}
(listRef = ref)} items={model.list} current={model.current()} @@ -90,7 +90,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
{language.t("dialog.model.unpaid.addMore.title")}
p.id} items={providers.popular} activeIcon="plus-small" diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx index fdef866a79d9..ca2643c3b5ba 100644 --- a/packages/app/src/components/dialog-select-model.tsx +++ b/packages/app/src/components/dialog-select-model.tsx @@ -37,7 +37,7 @@ const ModelList: Component<{ return ( `${x.provider.id}:${x.id}`} diff --git a/packages/app/src/components/dialog-select-provider.tsx b/packages/app/src/components/dialog-select-provider.tsx index 1273db596fcd..89310286daf2 100644 --- a/packages/app/src/components/dialog-select-provider.tsx +++ b/packages/app/src/components/dialog-select-provider.tsx @@ -29,6 +29,7 @@ export const DialogSelectProvider: Component = () => { return ( +
+} + +export function ServerManagementSettings() { + return +} + +function ServerManagement(props: { dialog?: boolean }) { const navigate = useNavigate() const dialog = useDialog() const server = useServer() @@ -351,7 +359,7 @@ export function DialogSelectServer() { async function select(conn: ServerConnection.Any, persist?: boolean) { if (!persist && store.status[ServerConnection.key(conn)]?.healthy === false) return - dialog.close() + if (props.dialog) dialog.close() if (persist && conn.type === "http") { server.add(conn) navigate("/") @@ -502,148 +510,151 @@ export function DialogSelectServer() { } } - return ( - -
- - } + const content = () => ( +
+ +
{formTitle()}
+ + + } + > + x.http.url} + onSelect={(x) => { + if (x) void select(x) + }} + divider={true} > - x.http.url} - onSelect={(x) => { - if (x) void select(x) - }} - divider={true} - class="flex-1 min-h-0 px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent" - > - {(i) => { - const key = ServerConnection.key(i) - return ( -
-
- -
- - - {language.t("dialog.server.status.default")} - - - } - showCredentials - /> -
- - + {(i) => { + const key = ServerConnection.key(i) + return ( +
+
+ +
+ + + {language.t("dialog.server.status.default")} + - - - - e.stopPropagation()} - onPointerDown={(e: PointerEvent) => e.stopPropagation()} - /> - - - { - if (i.type !== "http") return - startEdit(i) - }} - > - {language.t("dialog.server.menu.edit")} + } + showCredentials + /> +
+ + + + + + + e.stopPropagation()} + onPointerDown={(e: PointerEvent) => e.stopPropagation()} + /> + + + { + if (i.type !== "http") return + startEdit(i) + }} + > + {language.t("dialog.server.menu.edit")} + + + setDefault(key)}> + + {language.t("dialog.server.menu.default")} + - - setDefault(key)}> - - {language.t("dialog.server.menu.default")} - - - - - setDefault(null)}> - - {language.t("dialog.server.menu.defaultRemove")} - - - - - handleRemove(ServerConnection.key(i))} - class="text-text-on-critical-base hover:bg-surface-critical-weak" - > - {language.t("dialog.server.menu.delete")} + + + setDefault(null)}> + + {language.t("dialog.server.menu.defaultRemove")} + - - - - -
+ + + handleRemove(ServerConnection.key(i))} + class="text-text-on-critical-base hover:bg-surface-critical-weak" + > + {language.t("dialog.server.menu.delete")} + + + + +
- ) - }} - - +
+ ) + }} + + -
- - {language.t("dialog.server.add.button")} - - } - > - - -
+ } + > + +
-
+
) + + return props.dialog ? {content()} : content() } diff --git a/packages/app/src/components/dialog-settings.tsx b/packages/app/src/components/dialog-settings.tsx index 83cea131f5db..20d71f4bfd44 100644 --- a/packages/app/src/components/dialog-settings.tsx +++ b/packages/app/src/components/dialog-settings.tsx @@ -8,6 +8,7 @@ import { SettingsGeneral } from "./settings-general" import { SettingsKeybinds } from "./settings-keybinds" import { SettingsProviders } from "./settings-providers" import { SettingsModels } from "./settings-models" +import { SettingsServers } from "./settings-servers" export const DialogSettings: Component = () => { const language = useLanguage() @@ -17,7 +18,7 @@ export const DialogSettings: Component = () => { -
+
@@ -31,6 +32,10 @@ export const DialogSettings: Component = () => { {language.t("settings.tab.shortcuts")} + + + {language.t("status.popover.tab.servers")} +
@@ -61,6 +66,9 @@ export const DialogSettings: Component = () => { + + + diff --git a/packages/app/src/components/settings-servers.tsx b/packages/app/src/components/settings-servers.tsx new file mode 100644 index 000000000000..20616f57b635 --- /dev/null +++ b/packages/app/src/components/settings-servers.tsx @@ -0,0 +1,21 @@ +import { type Component } from "solid-js" +import { useLanguage } from "@/context/language" +import { ServerManagementSettings } from "./dialog-select-server" + +export const SettingsServers: Component = () => { + const language = useLanguage() + + return ( +
+
+
+

{language.t("status.popover.tab.servers")}

+
+
+ +
+ +
+
+ ) +} diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css index b12d304151df..a10df733030a 100644 --- a/packages/ui/src/components/list.css +++ b/packages/ui/src/components/list.css @@ -21,7 +21,7 @@ flex-direction: column; gap: 12px; overflow: hidden; - padding: 0 12px; + /*padding: 0 12px;*/ [data-slot="list-search-wrapper"] { display: flex; From 6da4fda0ae2a4473172646b0b41c6119f8e87f4c Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Mon, 1 Jun 2026 12:56:52 +0800 Subject: [PATCH 2/6] more --- packages/app/src/app.tsx | 6 +- .../components/dialog-select-directory.tsx | 20 +- .../src/components/dialog-select-server.tsx | 332 ++++++++++-------- .../src/components/session/session-header.tsx | 2 +- .../app/src/components/settings-models.tsx | 14 +- .../app/src/components/settings-providers.tsx | 12 +- .../src/components/settings-server-picker.tsx | 106 ++++++ .../app/src/components/settings-servers.tsx | 30 +- .../src/components/status-popover-body.tsx | 32 +- .../app/src/components/status-popover.tsx | 18 +- packages/app/src/components/titlebar.tsx | 13 +- packages/app/src/context/global.tsx | 248 +++++++++++++ packages/app/src/context/server-sdk.tsx | 23 +- packages/app/src/context/server-sync.tsx | 40 ++- packages/app/src/context/servers.tsx | 20 -- packages/app/src/context/settings.tsx | 4 + packages/app/src/pages/home.tsx | 233 ++++++------ packages/app/src/pages/layout.tsx | 7 +- packages/app/src/pages/session.tsx | 10 +- .../src/pages/session/session-side-panel.tsx | 11 +- 20 files changed, 818 insertions(+), 363 deletions(-) create mode 100644 packages/app/src/components/settings-server-picker.tsx create mode 100644 packages/app/src/context/global.tsx delete mode 100644 packages/app/src/context/servers.tsx diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx index 9554a6363112..915c8ec53086 100644 --- a/packages/app/src/app.tsx +++ b/packages/app/src/app.tsx @@ -33,6 +33,7 @@ import { CommentsProvider } from "@/context/comments" import { FileProvider } from "@/context/file" import { ServerSDKProvider } from "@/context/server-sdk" import { ServerSyncProvider } from "@/context/server-sync" +import { GlobalProvider } from "@/context/global" import { HighlightsProvider } from "@/context/highlights" import { LanguageProvider, type Locale, useLanguage } from "@/context/language" import { LayoutProvider } from "@/context/layout" @@ -47,7 +48,6 @@ import DirectoryLayout from "@/pages/directory-layout" import Layout from "@/pages/layout" import { ErrorPage } from "./pages/error" import { useCheckServerHealth } from "./utils/server-health" -import { ServersProvider } from "./context/servers" const HomeRoute = lazy(() => import("@/pages/home")) const Session = lazy(() => import("@/pages/session")) @@ -316,7 +316,7 @@ export function AppInterface(props: { }) { return ( - + @@ -337,7 +337,7 @@ export function AppInterface(props: { - + ) } diff --git a/packages/app/src/components/dialog-select-directory.tsx b/packages/app/src/components/dialog-select-directory.tsx index 58601abac8be..4eb5ba4b588a 100644 --- a/packages/app/src/components/dialog-select-directory.tsx +++ b/packages/app/src/components/dialog-select-directory.tsx @@ -6,15 +6,16 @@ import type { ListRef } from "@opencode-ai/ui/list" import { getDirectory, getFilename } from "@opencode-ai/core/util/path" import fuzzysort from "fuzzysort" import { createMemo, createResource, createSignal } from "solid-js" -import { useServerSDK } from "@/context/server-sdk" -import { useServerSync } from "@/context/server-sync" -import { useLayout } from "@/context/layout" +import { ServerSDK } from "@/context/server-sdk" import { useLanguage } from "@/context/language" +import { ServerConnection } from "@/context/server" +import { useGlobal } from "@/context/global" interface DialogSelectDirectoryProps { title?: string multiple?: boolean onSelect: (result: string | string[] | null) => void + server: ServerConnection.Any } type Row = { @@ -127,11 +128,7 @@ function uniqueRows(rows: Row[]) { }) } -function useDirectorySearch(args: { - sdk: ReturnType - start: () => string | undefined - home: () => string -}) { +function useDirectorySearch(args: { sdk: ServerSDK; start: () => string | undefined; home: () => string }) { const cache = new Map>>() let current = 0 @@ -246,9 +243,8 @@ function useDirectorySearch(args: { } export function DialogSelectDirectory(props: DialogSelectDirectoryProps) { - const sync = useServerSync() - const sdk = useServerSDK() - const layout = useLayout() + const global = useGlobal() + const { sync, sdk, ...serverCtx } = global.createServerCtx(props.server) const dialog = useDialog() const language = useLanguage() @@ -279,7 +275,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) { }) const recentProjects = createMemo(() => { - const projects = layout.projects.list() + const projects = serverCtx.projects.list() const byProject = new Map() for (const project of projects) { diff --git a/packages/app/src/components/dialog-select-server.tsx b/packages/app/src/components/dialog-select-server.tsx index 34d1fc34b660..556de1da08a5 100644 --- a/packages/app/src/components/dialog-select-server.tsx +++ b/packages/app/src/components/dialog-select-server.tsx @@ -16,6 +16,7 @@ import { useLanguage } from "@/context/language" import { usePlatform } from "@/context/platform" import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server" import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health" +import { useSettings } from "@/context/settings" const DEFAULT_USERNAME = "opencode" @@ -71,7 +72,7 @@ function useDefaultServer() { } } - return { defaultKey, canDefault, setDefault } + return { defaultKey: () => defaultKey.latest, canDefault, setDefault } } function useServerPreview() { @@ -121,7 +122,7 @@ function ServerForm(props: ServerFormProps) { } return ( -
+
-} + const dialog = useDialog() + const controller = useServerManagementController({ onSelect: dialog.close }) -export function ServerManagementSettings() { - return + return ( + +
+ }> + + +
+ + ) } -function ServerManagement(props: { dialog?: boolean }) { +export function useServerManagementController(options: { onSelect?: () => void } = {}) { const navigate = useNavigate() - const dialog = useDialog() const server = useServer() const platform = usePlatform() const language = useLanguage() @@ -319,7 +326,12 @@ function ServerManagement(props: { dialog?: boolean }) { return [current, ...list.filter((x) => x !== current)] }) - const current = createMemo(() => items().find((x) => ServerConnection.key(x) === server.key) ?? items()[0]) + const settings = useSettings() + const current = createMemo(() => + settings.general.newLayoutDesigns() + ? undefined + : (items().find((x) => ServerConnection.key(x) === server.key) ?? items()[0]), + ) const sortedItems = createMemo(() => { const list = items() @@ -359,7 +371,7 @@ function ServerManagement(props: { dialog?: boolean }) { async function select(conn: ServerConnection.Any, persist?: boolean) { if (!persist && store.status[ServerConnection.key(conn)]?.healthy === false) return - if (props.dialog) dialog.close() + options.onSelect?.() if (persist && conn.type === "http") { server.add(conn) navigate("/") @@ -510,151 +522,183 @@ function ServerManagement(props: { dialog?: boolean }) { } } - const content = () => ( + return { + defaultKey, + canDefault, + current, + sortedItems, + status: () => store.status, + isFormMode, + isAddMode, + formTitle, + formBusy, + formValue: () => (isAddMode() ? store.addServer.url : store.editServer.value), + formName: () => (isAddMode() ? store.addServer.name : store.editServer.name), + formUsername: () => (isAddMode() ? store.addServer.username : store.editServer.username), + formPassword: () => (isAddMode() ? store.addServer.password : store.editServer.password), + formError: () => (isAddMode() ? store.addServer.error : store.editServer.error), + formStatus: () => (isAddMode() ? store.addServer.status : store.editServer.status), + select, + setDefault, + startAdd, + startEdit, + resetForm, + submitForm, + handleRemove, + handleFormChange: () => (isAddMode() ? handleAddChange : handleEditChange), + handleFormNameChange: () => (isAddMode() ? handleAddNameChange : handleEditNameChange), + handleFormUsernameChange: () => (isAddMode() ? handleAddUsernameChange : handleEditUsernameChange), + handleFormPasswordChange: () => (isAddMode() ? handleAddPasswordChange : handleEditPasswordChange), + } +} + +export function ServerConnectionList(props: { controller: ReturnType }) { + const language = useLanguage() + const settings = useSettings() + + return (
- -
{formTitle()}
- - - } + x.http.url} + onSelect={(x) => { + if (x && !settings.general.newLayoutDesigns()) void props.controller.select(x) + }} + divider={true} > - x.http.url} - onSelect={(x) => { - if (x) void select(x) - }} - divider={true} - > - {(i) => { - const key = ServerConnection.key(i) - return ( -
-
- -
- - - {language.t("dialog.server.status.default")} - - - } - showCredentials - /> -
- - + {(i) => { + const key = ServerConnection.key(i) + return ( +
+
+ +
+ + + {language.t("dialog.server.status.default")} + - - - - e.stopPropagation()} - onPointerDown={(e: PointerEvent) => e.stopPropagation()} - /> - - - { - if (i.type !== "http") return - startEdit(i) - }} - > - {language.t("dialog.server.menu.edit")} + } + showCredentials + /> +
+ + + + + + + e.stopPropagation()} + onPointerDown={(e: PointerEvent) => e.stopPropagation()} + /> + + + { + if (i.type !== "http") return + props.controller.startEdit(i) + }} + > + {language.t("dialog.server.menu.edit")} + + + props.controller.setDefault(key)}> + {language.t("dialog.server.menu.default")} - - setDefault(key)}> - - {language.t("dialog.server.menu.default")} - - - - - setDefault(null)}> - - {language.t("dialog.server.menu.defaultRemove")} - - - - - handleRemove(ServerConnection.key(i))} - class="text-text-on-critical-base hover:bg-surface-critical-weak" - > - {language.t("dialog.server.menu.delete")} + + + props.controller.setDefault(null)}> + + {language.t("dialog.server.menu.defaultRemove")} + - - - - -
+ + + props.controller.handleRemove(ServerConnection.key(i))} + class="text-text-on-critical-base hover:bg-surface-critical-weak" + > + {language.t("dialog.server.menu.delete")} + + + + +
- ) - }} - - +
+ ) + }} +
- - {language.t("dialog.server.add.button")} - - } + - + {language.t("dialog.server.add.button")} +
) +} + +export function ServerConnectionForm(props: { controller: ReturnType }) { + const language = useLanguage() - return props.dialog ? {content()} : content() + return ( +
+ +
+ +
+
+ ) } diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx index 1c2cf47a7664..a24e352c3d95 100644 --- a/packages/app/src/components/session/session-header.tsx +++ b/packages/app/src/components/session/session-header.tsx @@ -530,7 +530,7 @@ type SessionHeaderV2ActionsState = { function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) { return ( -
+
diff --git a/packages/app/src/components/settings-models.tsx b/packages/app/src/components/settings-models.tsx index 14667338e951..f3d9e1522ff4 100644 --- a/packages/app/src/components/settings-models.tsx +++ b/packages/app/src/components/settings-models.tsx @@ -9,6 +9,7 @@ import { useLanguage } from "@/context/language" import { useModels } from "@/context/models" import { popularProviders } from "@/hooks/use-providers" import { SettingsList } from "./settings-list" +import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker" type ModelItem = ReturnType["list"]>[number] @@ -32,6 +33,14 @@ const ListEmptyState: Component<{ message: string; filter: string }> = (props) = } export const SettingsModels: Component = () => { + return ( + + + + ) +} + +const SettingsModelsContent: Component = () => { const language = useLanguage() const models = useModels() @@ -61,7 +70,10 @@ export const SettingsModels: Component = () => {
-

{language.t("settings.models.title")}

+
+

{language.t("settings.models.title")}

+ +
["connected"]>[number] @@ -28,6 +29,14 @@ const PROVIDER_NOTES = [ ] as const export const SettingsProviders: Component = () => { + return ( + + + + ) +} + +const SettingsProvidersContent: Component = () => { const dialog = useDialog() const language = useLanguage() const serverSDK = useServerSDK() @@ -129,8 +138,9 @@ export const SettingsProviders: Component = () => { return (
-
+

{language.t("settings.providers.title")}

+
diff --git a/packages/app/src/components/settings-server-picker.tsx b/packages/app/src/components/settings-server-picker.tsx new file mode 100644 index 000000000000..3f679753f053 --- /dev/null +++ b/packages/app/src/components/settings-server-picker.tsx @@ -0,0 +1,106 @@ +import { Button } from "@opencode-ai/ui/button" +import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu" +import { Icon } from "@opencode-ai/ui/icon" +import { QueryClientProvider } from "@tanstack/solid-query" +import { createMemo, For, type ParentProps, Show } from "solid-js" +import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row" +import { ModelsProvider } from "@/context/models" +import { ServerConnection } from "@/context/server" +import { ServerSDKProvider } from "@/context/server-sdk" +import { ServerSyncProvider } from "@/context/server-sync" +import { useGlobal } from "@/context/global" +import { useSettings } from "@/context/settings" + +export function SettingsServerScope(props: ParentProps) { + const global = useGlobal() + const settings = useSettings() + + return ( + + + {(server) => {props.children}} + + + ) +} + +function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnection.Any }>) { + const global = useGlobal() + const serverCtx = () => global.createServerCtx(props.server) + + return ( + + + + {props.children} + + + + ) +} + +export function SettingsServerPicker() { + const global = useGlobal() + const settings = useSettings() + const selected = createMemo(() => + settings.general.newLayoutDesigns() ? global.settings.server.selected() : undefined, + ) + + return ( + + {(conn) => ( + + + + + + + + + { + if (typeof key === "string") global.settings.server.set(ServerConnection.Key.make(key)) + }} + > + + {(item) => { + const key = ServerConnection.key(item) + const blocked = () => global.servers.health[key]?.healthy === false + return ( + + + + + + + + ) + }} + + + + + + )} + + ) +} diff --git a/packages/app/src/components/settings-servers.tsx b/packages/app/src/components/settings-servers.tsx index 20616f57b635..299d41f6db97 100644 --- a/packages/app/src/components/settings-servers.tsx +++ b/packages/app/src/components/settings-servers.tsx @@ -1,20 +1,32 @@ -import { type Component } from "solid-js" +import { Show, type Component } from "solid-js" import { useLanguage } from "@/context/language" -import { ServerManagementSettings } from "./dialog-select-server" +import { ServerConnectionForm, ServerConnectionList, useServerManagementController } from "./dialog-select-server" export const SettingsServers: Component = () => { const language = useLanguage() + const controller = useServerManagementController() return (
-
-
-

{language.t("status.popover.tab.servers")}

-
-
-
- + +
+
+

{language.t("status.popover.tab.servers")}

+
+
+ + + } + > +
+
{controller.formTitle()}
+ +
+
) diff --git a/packages/app/src/components/status-popover-body.tsx b/packages/app/src/components/status-popover-body.tsx index e0d1b01c89ec..a1382becf03e 100644 --- a/packages/app/src/components/status-popover-body.tsx +++ b/packages/app/src/components/status-popover-body.tsx @@ -17,7 +17,8 @@ import { useSync } from "@/context/sync" import { type ServerHealth } from "@/utils/server-health" import { useQueryOptions } from "@/context/server-sync" import { pathKey } from "@/utils/path-key" -import { useServers } from "@/context/servers" +import { useGlobal } from "@/context/global" +import { useSettings } from "@/context/settings" const pollMs = 10_000 @@ -153,7 +154,7 @@ type ServerStatusItem = { } export function StatusPopoverServerBody() { - const servers = useServers() + const global = useGlobal() const server = useServer() const platform = usePlatform() const dialog = useDialog() @@ -167,7 +168,7 @@ export function StatusPopoverServerBody() { dialogRun += 1 }) - const sortedServers = createMemo(() => listServersByHealth(servers.list(), server.key, servers.health)) + const sortedServers = createMemo(() => listServersByHealth(global.servers.list(), server.key, global.servers.health)) const defaultServer = useDefaultServerKey(platform.getDefaultServer) const serverItems = createMemo(() => sortedServers().map((conn) => { @@ -175,8 +176,8 @@ export function StatusPopoverServerBody() { return { key, conn, - health: servers.health[key], - blocked: servers.health[key]?.healthy === false, + health: global.servers.health[key], + blocked: global.servers.health[key]?.healthy === false, active: !!server.current && key === ServerConnection.key(server.current), onSelect: () => { navigate("/") @@ -288,12 +289,13 @@ function ServerStatusList(props: { state: ServerStatusState }) { export function StatusPopoverBody(props: { shown: Accessor }) { const sync = useSync() - const servers = useServers() + const global = useGlobal() const server = useServer() const platform = usePlatform() const dialog = useDialog() const language = useLanguage() const navigate = useNavigate() + const settings = useSettings() const fail = (err: unknown) => { showToast({ @@ -313,7 +315,7 @@ export function StatusPopoverBody(props: { shown: Accessor }) { dialogDead = true dialogRun += 1 }) - const sortedServers = createMemo(() => listServersByHealth(servers.list(), server.key, servers.health)) + const sortedServers = createMemo(() => listServersByHealth(global.servers.list(), server.key, global.servers.health)) const toggleMcp = useMcpToggleMutation() const defaultServer = useDefaultServerKey(platform.getDefaultServer) const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b))) @@ -338,10 +340,12 @@ export function StatusPopoverBody(props: { shown: Accessor }) { variant="alt" > - - {servers.list().length > 0 ? `${servers.list().length} ` : ""} - {language.t("status.popover.tab.servers")} - + {!settings.general.newLayoutDesigns() && ( + + {global.servers.list().length > 0 ? `${global.servers.list().length} ` : ""} + {language.t("status.popover.tab.servers")} + + )} {mcpConnected() > 0 ? `${mcpConnected()} ` : ""} {language.t("status.popover.tab.mcp")} @@ -362,7 +366,7 @@ export function StatusPopoverBody(props: { shown: Accessor }) { {(s) => { const key = ServerConnection.key(s) - const blocked = () => servers.health[key]?.healthy === false + const blocked = () => global.servers.health[key]?.healthy === false return ( - ) - }} - + + + + {language.t("common.default")} + + + } + > +
+ + + + + + ) + }} + - + +
-
- + + )}