diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx index 0eb5b4e9e0..5247c951d3 100644 --- a/packages/app/src/app.tsx +++ b/packages/app/src/app.tsx @@ -6,7 +6,7 @@ import { MarkedProvider } from "@opencode-ai/ui/context/marked" import { File } from "@opencode-ai/ui/file" import { Font } from "@opencode-ai/ui/font" import { Splash } from "@opencode-ai/ui/logo" -import { ThemeProvider } from "@opencode-ai/ui/theme/context" +import { ThemeProvider } from "@opencode-ai/ui/theme" import { MetaProvider } from "@solidjs/meta" import { type BaseRouterProps, Navigate, Route, Router } from "@solidjs/router" import { QueryClient, QueryClientProvider } from "@tanstack/solid-query" @@ -32,7 +32,7 @@ import { FileProvider } from "@/context/file" import { GlobalSDKProvider } from "@/context/global-sdk" import { GlobalSyncProvider } from "@/context/global-sync" import { HighlightsProvider } from "@/context/highlights" -import { LanguageProvider, type Locale, useLanguage } from "@/context/language" +import { LanguageProvider, useLanguage } from "@/context/language" import { LayoutProvider } from "@/context/layout" import { ModelsProvider } from "@/context/models" import { NotificationProvider } from "@/context/notification" @@ -130,7 +130,7 @@ function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) { ) } -export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) { +export function AppBaseProviders(props: ParentProps) { return ( @@ -139,7 +139,7 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) { void window.api?.setTitlebar?.({ mode }) }} > - + }> diff --git a/packages/app/src/components/dialog-connect-provider.tsx b/packages/app/src/components/dialog-connect-provider.tsx index e7eaa1fb29..734958dd58 100644 --- a/packages/app/src/components/dialog-connect-provider.tsx +++ b/packages/app/src/components/dialog-connect-provider.tsx @@ -1,4 +1,4 @@ -import type { ProviderAuthAuthorization, ProviderAuthMethod } from "@opencode-ai/sdk/v2/client" +import type { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client" import { Button } from "@opencode-ai/ui/button" import { useDialog } from "@opencode-ai/ui/context/dialog" import { Dialog } from "@opencode-ai/ui/dialog" @@ -9,7 +9,7 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon" import { Spinner } from "@opencode-ai/ui/spinner" import { TextField } from "@opencode-ai/ui/text-field" import { showToast } from "@opencode-ai/ui/toast" -import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js" +import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js" import { createStore, produce } from "solid-js/store" import { Link } from "@/components/link" import { useGlobalSDK } from "@/context/global-sdk" @@ -34,25 +34,15 @@ export function DialogConnectProvider(props: { provider: string }) { }) const provider = createMemo(() => globalSync.data.provider.all.find((x) => x.id === props.provider)!) - const fallback = createMemo(() => [ - { - type: "api" as const, - label: language.t("provider.connect.method.apiKey"), - }, - ]) - const [auth] = createResource( - () => props.provider, - async () => { - const cached = globalSync.data.provider_auth[props.provider] - if (cached) return cached - const res = await globalSDK.client.provider.auth() - if (!alive.value) return fallback() - globalSync.set("provider_auth", res.data ?? {}) - return res.data?.[props.provider] ?? fallback() - }, + const methods = createMemo( + () => + globalSync.data.provider_auth[props.provider] ?? [ + { + type: "api", + label: language.t("provider.connect.method.apiKey"), + }, + ], ) - const loading = createMemo(() => auth.loading && !globalSync.data.provider_auth[props.provider]) - const methods = createMemo(() => auth.latest ?? globalSync.data.provider_auth[props.provider] ?? fallback()) const [store, setStore] = createStore({ methodIndex: undefined as undefined | number, authorization: undefined as undefined | ProviderAuthAuthorization, @@ -187,11 +177,7 @@ export function DialogConnectProvider(props: { provider: string }) { index: 0, }) - const prompts = createMemo>(() => { - const value = method() - if (value?.type !== "oauth") return [] - return value.prompts ?? [] - }) + const prompts = createMemo(() => method()?.prompts ?? []) const matches = (prompt: NonNullable[number]>, value: Record) => { if (!prompt.when) return true const actual = value[prompt.when.key] @@ -310,12 +296,8 @@ export function DialogConnectProvider(props: { provider: string }) { listRef?.onKeyDown(e) } - let auto = false - createEffect(() => { - if (auto) return - if (loading()) return + onMount(() => { if (methods().length === 1) { - auto = true selectMethod(0) } }) @@ -591,14 +573,6 @@ export function DialogConnectProvider(props: { provider: string }) {
- -
-
- - {language.t("provider.connect.status.inProgress")} -
-
-
diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx index f4b8198e7e..b768bafcca 100644 --- a/packages/app/src/components/settings-general.tsx +++ b/packages/app/src/components/settings-general.tsx @@ -1,41 +1,27 @@ -import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js" +import { Component, Show, createMemo, createResource, 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" import { Select } from "@opencode-ai/ui/select" import { Switch } from "@opencode-ai/ui/switch" import { Tooltip } from "@opencode-ai/ui/tooltip" -import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context" +import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme" import { showToast } from "@opencode-ai/ui/toast" import { useLanguage } from "@/context/language" import { usePlatform } from "@/context/platform" import { useSettings, monoFontFamily } from "@/context/settings" -import { playSoundById, SOUND_OPTIONS } from "@/utils/sound" +import { playSound, SOUND_OPTIONS } from "@/utils/sound" import { Link } from "./link" import { SettingsList } from "./settings-list" let demoSoundState = { cleanup: undefined as (() => void) | undefined, timeout: undefined as NodeJS.Timeout | undefined, - run: 0, -} - -type ThemeOption = { - id: string - name: string -} - -let font: Promise | undefined - -function loadFont() { - font ??= import("@opencode-ai/ui/font-loader") - return font } // To prevent audio from overlapping/playing very quickly when navigating the settings menus, // delay the playback by 100ms during quick selection changes and pause existing sounds. const stopDemoSound = () => { - demoSoundState.run += 1 if (demoSoundState.cleanup) { demoSoundState.cleanup() } @@ -43,19 +29,12 @@ const stopDemoSound = () => { demoSoundState.cleanup = undefined } -const playDemoSound = (id: string | undefined) => { +const playDemoSound = (src: string | undefined) => { stopDemoSound() - if (!id) return + if (!src) return - const run = ++demoSoundState.run demoSoundState.timeout = setTimeout(() => { - void playSoundById(id).then((cleanup) => { - if (demoSoundState.run !== run) { - cleanup?.() - return - } - demoSoundState.cleanup = cleanup - }) + demoSoundState.cleanup = playSound(src) }, 100) } @@ -65,10 +44,6 @@ export const SettingsGeneral: Component = () => { const platform = usePlatform() const settings = useSettings() - onMount(() => { - void theme.loadThemes() - }) - const [store, setStore] = createStore({ checking: false, }) @@ -129,7 +104,9 @@ export const SettingsGeneral: Component = () => { .finally(() => setStore("checking", false)) } - const themeOptions = createMemo(() => theme.ids().map((id) => ({ id, name: theme.name(id) }))) + const themeOptions = createMemo(() => + Object.entries(theme.themes()).map(([id, def]) => ({ id, name: def.name ?? id })), + ) const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [ { value: "system", label: language.t("theme.scheme.system") }, @@ -166,7 +143,7 @@ export const SettingsGeneral: Component = () => { ] as const const fontOptionsList = [...fontOptions] - const noneSound = { id: "none", label: "sound.option.none" } as const + const noneSound = { id: "none", label: "sound.option.none", src: undefined } as const const soundOptions = [noneSound, ...SOUND_OPTIONS] const soundSelectProps = ( @@ -181,7 +158,7 @@ export const SettingsGeneral: Component = () => { label: (o: (typeof soundOptions)[number]) => language.t(o.label), onHighlight: (option: (typeof soundOptions)[number] | undefined) => { if (!option) return - playDemoSound(option.id === "none" ? undefined : option.id) + playDemoSound(option.src) }, onSelect: (option: (typeof soundOptions)[number] | undefined) => { if (!option) return @@ -192,7 +169,7 @@ export const SettingsGeneral: Component = () => { } setEnabled(true) set(option.id) - playDemoSound(option.id) + playDemoSound(option.src) }, variant: "secondary" as const, size: "small" as const, @@ -344,9 +321,6 @@ export const SettingsGeneral: Component = () => { current={fontOptionsList.find((o) => o.value === settings.appearance.font())} value={(o) => o.value} label={(o) => language.t(o.label)} - onHighlight={(option) => { - void loadFont().then((x) => x.ensureMonoFont(option?.value)) - }} onSelect={(option) => option && settings.appearance.setFont(option.value)} variant="secondary" size="small" diff --git a/packages/app/src/components/status-popover.tsx b/packages/app/src/components/status-popover.tsx index 8d5ecac39a..464522443f 100644 --- a/packages/app/src/components/status-popover.tsx +++ b/packages/app/src/components/status-popover.tsx @@ -16,6 +16,7 @@ import { useSDK } from "@/context/sdk" import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server" import { useSync } from "@/context/sync" import { useCheckServerHealth, type ServerHealth } from "@/utils/server-health" +import { DialogSelectServer } from "./dialog-select-server" const pollMs = 10_000 @@ -53,15 +54,11 @@ const listServersByHealth = ( }) } -const useServerHealth = (servers: Accessor, enabled: Accessor) => { +const useServerHealth = (servers: Accessor) => { const checkServerHealth = useCheckServerHealth() const [status, setStatus] = createStore({} as Record) createEffect(() => { - if (!enabled()) { - setStatus(reconcile({})) - return - } const list = servers() let dead = false @@ -165,12 +162,6 @@ export function StatusPopover() { const navigate = useNavigate() const [shown, setShown] = createSignal(false) - let dialogRun = 0 - let dialogDead = false - onCleanup(() => { - dialogDead = true - dialogRun += 1 - }) const servers = createMemo(() => { const current = server.current const list = server.list @@ -178,7 +169,7 @@ export function StatusPopover() { if (list.every((item) => ServerConnection.key(item) !== ServerConnection.key(current))) return [current, ...list] return [current, ...list.filter((item) => ServerConnection.key(item) !== ServerConnection.key(current))] }) - const health = useServerHealth(servers, shown) + const health = useServerHealth(servers) const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health)) const toggleMcp = useMcpToggleMutation() const defaultServer = useDefaultServerKey(platform.getDefaultServer) @@ -309,13 +300,7 @@ export function StatusPopover() { diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx index 0a5a7d2d3e..aed46f1262 100644 --- a/packages/app/src/components/terminal.tsx +++ b/packages/app/src/components/terminal.tsx @@ -1,7 +1,4 @@ -import { withAlpha } from "@opencode-ai/ui/theme/color" -import { useTheme } from "@opencode-ai/ui/theme/context" -import { resolveThemeVariant } from "@opencode-ai/ui/theme/resolve" -import type { HexColor } from "@opencode-ai/ui/theme/types" +import { type HexColor, resolveThemeVariant, useTheme, withAlpha } from "@opencode-ai/ui/theme" import { showToast } from "@opencode-ai/ui/toast" import type { FitAddon, Ghostty, Terminal as Term } from "ghostty-web" import { type ComponentProps, createEffect, createMemo, onCleanup, onMount, splitProps } from "solid-js" diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx index 0a41f31196..77de1a73ce 100644 --- a/packages/app/src/components/titlebar.tsx +++ b/packages/app/src/components/titlebar.tsx @@ -5,7 +5,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button" import { Icon } from "@opencode-ai/ui/icon" import { Button } from "@opencode-ai/ui/button" import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip" -import { useTheme } from "@opencode-ai/ui/theme/context" +import { useTheme } from "@opencode-ai/ui/theme" import { useLayout } from "@/context/layout" import { usePlatform } from "@/context/platform" diff --git a/packages/app/src/context/global-sync.tsx b/packages/app/src/context/global-sync.tsx index cbd08e99f5..2d1e501353 100644 --- a/packages/app/src/context/global-sync.tsx +++ b/packages/app/src/context/global-sync.tsx @@ -9,7 +9,17 @@ import type { } from "@opencode-ai/sdk/v2/client" import { showToast } from "@opencode-ai/ui/toast" import { getFilename } from "@opencode-ai/util/path" -import { createContext, getOwner, onCleanup, onMount, type ParentProps, untrack, useContext } from "solid-js" +import { + createContext, + getOwner, + Match, + onCleanup, + onMount, + type ParentProps, + Switch, + untrack, + useContext, +} from "solid-js" import { createStore, produce, reconcile } from "solid-js/store" import { useLanguage } from "@/context/language" import { Persist, persisted } from "@/utils/persist" @@ -70,8 +80,6 @@ function createGlobalSync() { let active = true let projectWritten = false - let bootedAt = 0 - let bootingRoot = false onCleanup(() => { active = false @@ -250,11 +258,6 @@ function createGlobalSync() { const sdk = sdkFor(directory) await bootstrapDirectory({ directory, - global: { - config: globalStore.config, - project: globalStore.project, - provider: globalStore.provider, - }, sdk, store: child[0], setStore: child[1], @@ -275,20 +278,15 @@ function createGlobalSync() { const unsub = globalSDK.event.listen((e) => { const directory = e.name const event = e.details - const recent = bootingRoot || Date.now() - bootedAt < 1500 if (directory === "global") { applyGlobalEvent({ event, project: globalStore.project, - refresh: () => { - if (recent) return - queue.refresh() - }, + refresh: queue.refresh, setGlobalProject: setProjects, }) if (event.type === "server.connected" || event.type === "global.disposed") { - if (recent) return for (const directory of Object.keys(children.children)) { queue.push(directory) } @@ -327,19 +325,17 @@ function createGlobalSync() { }) async function bootstrap() { - bootingRoot = true - try { - await bootstrapGlobal({ - globalSDK: globalSDK.client, - requestFailedTitle: language.t("common.requestFailed"), - translate: language.t, - formatMoreCount: (count) => language.t("common.moreCountSuffix", { count }), - setGlobalStore: setBootStore, - }) - bootedAt = Date.now() - } finally { - bootingRoot = false - } + await bootstrapGlobal({ + globalSDK: globalSDK.client, + connectErrorTitle: language.t("dialog.server.add.error"), + connectErrorDescription: language.t("error.globalSync.connectFailed", { + url: globalSDK.url, + }), + requestFailedTitle: language.t("common.requestFailed"), + translate: language.t, + formatMoreCount: (count) => language.t("common.moreCountSuffix", { count }), + setGlobalStore: setBootStore, + }) } onMount(() => { @@ -396,7 +392,13 @@ const GlobalSyncContext = createContext>() export function GlobalSyncProvider(props: ParentProps) { const value = createGlobalSync() - return {props.children} + return ( + + + {props.children} + + + ) } export function useGlobalSync() { diff --git a/packages/app/src/context/global-sync/bootstrap.ts b/packages/app/src/context/global-sync/bootstrap.ts index c795ab471c..13494b7ade 100644 --- a/packages/app/src/context/global-sync/bootstrap.ts +++ b/packages/app/src/context/global-sync/bootstrap.ts @@ -33,11 +33,27 @@ type GlobalStore = { export async function bootstrapGlobal(input: { globalSDK: OpencodeClient + connectErrorTitle: string + connectErrorDescription: string requestFailedTitle: string translate: (key: string, vars?: Record) => string formatMoreCount: (count: number) => string setGlobalStore: SetStoreFunction }) { + const health = await input.globalSDK.global + .health() + .then((x) => x.data) + .catch(() => undefined) + if (!health?.healthy) { + showToast({ + variant: "error", + title: input.connectErrorTitle, + description: input.connectErrorDescription, + }) + input.setGlobalStore("ready", true) + return + } + const tasks = [ retry(() => input.globalSDK.path.get().then((x) => { @@ -64,6 +80,11 @@ export async function bootstrapGlobal(input: { input.setGlobalStore("provider", normalizeProviderList(x.data!)) }), ), + retry(() => + input.globalSDK.provider.auth().then((x) => { + input.setGlobalStore("provider_auth", x.data ?? {}) + }), + ), ] const results = await Promise.allSettled(tasks) @@ -90,10 +111,6 @@ function groupBySession(input: T[]) }, {}) } -function projectID(directory: string, projects: Project[]) { - return projects.find((project) => project.worktree === directory || project.sandboxes?.includes(directory))?.id -} - export async function bootstrapDirectory(input: { directory: string sdk: OpencodeClient @@ -102,112 +119,88 @@ export async function bootstrapDirectory(input: { vcsCache: VcsCache loadSessions: (directory: string) => Promise | void translate: (key: string, vars?: Record) => string - global: { - config: Config - project: Project[] - provider: ProviderListResponse - } }) { - const loading = input.store.status !== "complete" - const seededProject = projectID(input.directory, input.global.project) - if (seededProject) input.setStore("project", seededProject) - if (input.store.provider.all.length === 0 && input.global.provider.all.length > 0) { - input.setStore("provider", input.global.provider) - } - if (Object.keys(input.store.config).length === 0 && Object.keys(input.global.config).length > 0) { - input.setStore("config", input.global.config) - } - if (loading) input.setStore("status", "partial") + if (input.store.status !== "complete") input.setStore("status", "loading") - const results = await Promise.allSettled([ - seededProject - ? Promise.resolve() - : retry(() => input.sdk.project.current()).then((x) => input.setStore("project", x.data!.id)), - retry(() => + const blockingRequests = { + project: () => input.sdk.project.current().then((x) => input.setStore("project", x.data!.id)), + provider: () => input.sdk.provider.list().then((x) => { input.setStore("provider", normalizeProviderList(x.data!)) }), - ), - retry(() => input.sdk.app.agents().then((x) => input.setStore("agent", x.data ?? []))), - retry(() => input.sdk.config.get().then((x) => input.setStore("config", x.data!))), - retry(() => - input.sdk.path.get().then((x) => { - input.setStore("path", x.data!) - const next = projectID(x.data?.directory ?? input.directory, input.global.project) - if (next) input.setStore("project", next) - }), - ), - retry(() => input.sdk.command.list().then((x) => input.setStore("command", x.data ?? []))), - retry(() => input.sdk.session.status().then((x) => input.setStore("session_status", x.data!))), - input.loadSessions(input.directory), - retry(() => input.sdk.mcp.status().then((x) => input.setStore("mcp", x.data!))), - retry(() => input.sdk.lsp.status().then((x) => input.setStore("lsp", x.data!))), - retry(() => - input.sdk.vcs.get().then((x) => { - const next = x.data ?? input.store.vcs - input.setStore("vcs", next) - if (next?.branch) input.vcsCache.setStore("value", next) - }), - ), - retry(() => - input.sdk.permission.list().then((x) => { - const grouped = groupBySession( - (x.data ?? []).filter((perm): perm is PermissionRequest => !!perm?.id && !!perm.sessionID), - ) - batch(() => { - for (const sessionID of Object.keys(input.store.permission)) { - if (grouped[sessionID]) continue - input.setStore("permission", sessionID, []) - } - for (const [sessionID, permissions] of Object.entries(grouped)) { - input.setStore( - "permission", - sessionID, - reconcile( - permissions.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)), - { key: "id" }, - ), - ) - } - }) - }), - ), - retry(() => - input.sdk.question.list().then((x) => { - const grouped = groupBySession((x.data ?? []).filter((q): q is QuestionRequest => !!q?.id && !!q.sessionID)) - batch(() => { - for (const sessionID of Object.keys(input.store.question)) { - if (grouped[sessionID]) continue - input.setStore("question", sessionID, []) - } - for (const [sessionID, questions] of Object.entries(grouped)) { - input.setStore( - "question", - sessionID, - reconcile( - questions.filter((q) => !!q?.id).sort((a, b) => cmp(a.id, b.id)), - { key: "id" }, - ), - ) - } - }) - }), - ), - ]) + agent: () => input.sdk.app.agents().then((x) => input.setStore("agent", x.data ?? [])), + config: () => input.sdk.config.get().then((x) => input.setStore("config", x.data!)), + } - const errors = results - .filter((item): item is PromiseRejectedResult => item.status === "rejected") - .map((item) => item.reason) - if (errors.length > 0) { - console.error("Failed to bootstrap instance", errors[0]) + try { + await Promise.all(Object.values(blockingRequests).map((p) => retry(p))) + } catch (err) { + console.error("Failed to bootstrap instance", err) const project = getFilename(input.directory) showToast({ variant: "error", title: input.translate("toast.project.reloadFailed.title", { project }), - description: formatServerError(errors[0], input.translate), + description: formatServerError(err, input.translate), }) + input.setStore("status", "partial") return } - if (loading) input.setStore("status", "complete") + if (input.store.status !== "complete") input.setStore("status", "partial") + + Promise.all([ + input.sdk.path.get().then((x) => input.setStore("path", x.data!)), + input.sdk.command.list().then((x) => input.setStore("command", x.data ?? [])), + input.sdk.session.status().then((x) => input.setStore("session_status", x.data!)), + input.loadSessions(input.directory), + input.sdk.mcp.status().then((x) => input.setStore("mcp", x.data!)), + input.sdk.lsp.status().then((x) => input.setStore("lsp", x.data!)), + input.sdk.vcs.get().then((x) => { + const next = x.data ?? input.store.vcs + input.setStore("vcs", next) + if (next?.branch) input.vcsCache.setStore("value", next) + }), + input.sdk.permission.list().then((x) => { + const grouped = groupBySession( + (x.data ?? []).filter((perm): perm is PermissionRequest => !!perm?.id && !!perm.sessionID), + ) + batch(() => { + for (const sessionID of Object.keys(input.store.permission)) { + if (grouped[sessionID]) continue + input.setStore("permission", sessionID, []) + } + for (const [sessionID, permissions] of Object.entries(grouped)) { + input.setStore( + "permission", + sessionID, + reconcile( + permissions.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)), + { key: "id" }, + ), + ) + } + }) + }), + input.sdk.question.list().then((x) => { + const grouped = groupBySession((x.data ?? []).filter((q): q is QuestionRequest => !!q?.id && !!q.sessionID)) + batch(() => { + for (const sessionID of Object.keys(input.store.question)) { + if (grouped[sessionID]) continue + input.setStore("question", sessionID, []) + } + for (const [sessionID, questions] of Object.entries(grouped)) { + input.setStore( + "question", + sessionID, + reconcile( + questions.filter((q) => !!q?.id).sort((a, b) => cmp(a.id, b.id)), + { key: "id" }, + ), + ) + } + }) + }), + ]).then(() => { + input.setStore("status", "complete") + }) } diff --git a/packages/app/src/context/language.tsx b/packages/app/src/context/language.tsx index 51dc09cd7d..b1edd541c3 100644 --- a/packages/app/src/context/language.tsx +++ b/packages/app/src/context/language.tsx @@ -1,10 +1,42 @@ import * as i18n from "@solid-primitives/i18n" -import { createEffect, createMemo, createResource } from "solid-js" +import { createEffect, createMemo } from "solid-js" import { createStore } from "solid-js/store" import { createSimpleContext } from "@opencode-ai/ui/context" import { Persist, persisted } from "@/utils/persist" import { dict as en } from "@/i18n/en" +import { dict as zh } from "@/i18n/zh" +import { dict as zht } from "@/i18n/zht" +import { dict as ko } from "@/i18n/ko" +import { dict as de } from "@/i18n/de" +import { dict as es } from "@/i18n/es" +import { dict as fr } from "@/i18n/fr" +import { dict as da } from "@/i18n/da" +import { dict as ja } from "@/i18n/ja" +import { dict as pl } from "@/i18n/pl" +import { dict as ru } from "@/i18n/ru" +import { dict as ar } from "@/i18n/ar" +import { dict as no } from "@/i18n/no" +import { dict as br } from "@/i18n/br" +import { dict as th } from "@/i18n/th" +import { dict as bs } from "@/i18n/bs" +import { dict as tr } from "@/i18n/tr" import { dict as uiEn } from "@opencode-ai/ui/i18n/en" +import { dict as uiZh } from "@opencode-ai/ui/i18n/zh" +import { dict as uiZht } from "@opencode-ai/ui/i18n/zht" +import { dict as uiKo } from "@opencode-ai/ui/i18n/ko" +import { dict as uiDe } from "@opencode-ai/ui/i18n/de" +import { dict as uiEs } from "@opencode-ai/ui/i18n/es" +import { dict as uiFr } from "@opencode-ai/ui/i18n/fr" +import { dict as uiDa } from "@opencode-ai/ui/i18n/da" +import { dict as uiJa } from "@opencode-ai/ui/i18n/ja" +import { dict as uiPl } from "@opencode-ai/ui/i18n/pl" +import { dict as uiRu } from "@opencode-ai/ui/i18n/ru" +import { dict as uiAr } from "@opencode-ai/ui/i18n/ar" +import { dict as uiNo } from "@opencode-ai/ui/i18n/no" +import { dict as uiBr } from "@opencode-ai/ui/i18n/br" +import { dict as uiTh } from "@opencode-ai/ui/i18n/th" +import { dict as uiBs } from "@opencode-ai/ui/i18n/bs" +import { dict as uiTr } from "@opencode-ai/ui/i18n/tr" export type Locale = | "en" @@ -27,7 +59,6 @@ export type Locale = type RawDictionary = typeof en & typeof uiEn type Dictionary = i18n.Flatten -type Source = { dict: Record } function cookie(locale: Locale) { return `oc_locale=${encodeURIComponent(locale)}; Path=/; Max-Age=31536000; SameSite=Lax` @@ -94,43 +125,24 @@ const LABEL_KEY: Record = { } const base = i18n.flatten({ ...en, ...uiEn }) -const dicts = new Map([["en", base]]) - -const merge = (app: Promise, ui: Promise) => - Promise.all([app, ui]).then(([a, b]) => ({ ...base, ...i18n.flatten({ ...a.dict, ...b.dict }) }) as Dictionary) - -const loaders: Record, () => Promise> = { - zh: () => merge(import("@/i18n/zh"), import("@opencode-ai/ui/i18n/zh")), - zht: () => merge(import("@/i18n/zht"), import("@opencode-ai/ui/i18n/zht")), - ko: () => merge(import("@/i18n/ko"), import("@opencode-ai/ui/i18n/ko")), - de: () => merge(import("@/i18n/de"), import("@opencode-ai/ui/i18n/de")), - es: () => merge(import("@/i18n/es"), import("@opencode-ai/ui/i18n/es")), - fr: () => merge(import("@/i18n/fr"), import("@opencode-ai/ui/i18n/fr")), - da: () => merge(import("@/i18n/da"), import("@opencode-ai/ui/i18n/da")), - ja: () => merge(import("@/i18n/ja"), import("@opencode-ai/ui/i18n/ja")), - pl: () => merge(import("@/i18n/pl"), import("@opencode-ai/ui/i18n/pl")), - ru: () => merge(import("@/i18n/ru"), import("@opencode-ai/ui/i18n/ru")), - ar: () => merge(import("@/i18n/ar"), import("@opencode-ai/ui/i18n/ar")), - no: () => merge(import("@/i18n/no"), import("@opencode-ai/ui/i18n/no")), - br: () => merge(import("@/i18n/br"), import("@opencode-ai/ui/i18n/br")), - th: () => merge(import("@/i18n/th"), import("@opencode-ai/ui/i18n/th")), - bs: () => merge(import("@/i18n/bs"), import("@opencode-ai/ui/i18n/bs")), - tr: () => merge(import("@/i18n/tr"), import("@opencode-ai/ui/i18n/tr")), -} - -function loadDict(locale: Locale) { - const hit = dicts.get(locale) - if (hit) return Promise.resolve(hit) - if (locale === "en") return Promise.resolve(base) - const load = loaders[locale] - return load().then((next: Dictionary) => { - dicts.set(locale, next) - return next - }) -} - -export function loadLocaleDict(locale: Locale) { - return loadDict(locale).then(() => undefined) +const DICT: Record = { + en: base, + zh: { ...base, ...i18n.flatten({ ...zh, ...uiZh }) }, + zht: { ...base, ...i18n.flatten({ ...zht, ...uiZht }) }, + ko: { ...base, ...i18n.flatten({ ...ko, ...uiKo }) }, + de: { ...base, ...i18n.flatten({ ...de, ...uiDe }) }, + es: { ...base, ...i18n.flatten({ ...es, ...uiEs }) }, + fr: { ...base, ...i18n.flatten({ ...fr, ...uiFr }) }, + da: { ...base, ...i18n.flatten({ ...da, ...uiDa }) }, + ja: { ...base, ...i18n.flatten({ ...ja, ...uiJa }) }, + pl: { ...base, ...i18n.flatten({ ...pl, ...uiPl }) }, + ru: { ...base, ...i18n.flatten({ ...ru, ...uiRu }) }, + ar: { ...base, ...i18n.flatten({ ...ar, ...uiAr }) }, + no: { ...base, ...i18n.flatten({ ...no, ...uiNo }) }, + br: { ...base, ...i18n.flatten({ ...br, ...uiBr }) }, + th: { ...base, ...i18n.flatten({ ...th, ...uiTh }) }, + bs: { ...base, ...i18n.flatten({ ...bs, ...uiBs }) }, + tr: { ...base, ...i18n.flatten({ ...tr, ...uiTr }) }, } const localeMatchers: Array<{ locale: Locale; match: (language: string) => boolean }> = [ @@ -156,6 +168,27 @@ const localeMatchers: Array<{ locale: Locale; match: (language: string) => boole { locale: "tr", match: (language) => language.startsWith("tr") }, ] +type ParityKey = "command.session.previous.unseen" | "command.session.next.unseen" +const PARITY_CHECK: Record, Record> = { + zh, + zht, + ko, + de, + es, + fr, + da, + ja, + pl, + ru, + ar, + no, + br, + th, + bs, + tr, +} +void PARITY_CHECK + function detectLocale(): Locale { if (typeof navigator !== "object") return "en" @@ -170,48 +203,27 @@ function detectLocale(): Locale { return "en" } -export function normalizeLocale(value: string): Locale { +function normalizeLocale(value: string): Locale { return LOCALES.includes(value as Locale) ? (value as Locale) : "en" } -function readStoredLocale() { - if (typeof localStorage !== "object") return - try { - const raw = localStorage.getItem("opencode.global.dat:language") - if (!raw) return - const next = JSON.parse(raw) as { locale?: string } - if (typeof next?.locale !== "string") return - return normalizeLocale(next.locale) - } catch { - return - } -} - -const warm = readStoredLocale() ?? detectLocale() -if (warm !== "en") void loadDict(warm) - export const { use: useLanguage, provider: LanguageProvider } = createSimpleContext({ name: "Language", - init: (props: { locale?: Locale }) => { - const initial = props.locale ?? readStoredLocale() ?? detectLocale() + init: () => { const [store, setStore, _, ready] = persisted( Persist.global("language", ["language.v1"]), createStore({ - locale: initial, + locale: detectLocale() as Locale, }), ) const locale = createMemo(() => normalizeLocale(store.locale)) + console.log("locale", locale()) const intl = createMemo(() => INTL[locale()]) - const [dict] = createResource(locale, loadDict, { - initialValue: dicts.get(initial) ?? base, - }) + const dict = createMemo(() => DICT[locale()]) - const t = i18n.translator(() => dict() ?? base, i18n.resolveTemplate) as ( - key: keyof Dictionary, - params?: Record, - ) => string + const t = i18n.translator(dict, i18n.resolveTemplate) const label = (value: Locale) => t(LABEL_KEY[value]) diff --git a/packages/app/src/context/notification.tsx b/packages/app/src/context/notification.tsx index 281a1ef33d..04bc2fdaaa 100644 --- a/packages/app/src/context/notification.tsx +++ b/packages/app/src/context/notification.tsx @@ -12,7 +12,7 @@ import { base64Encode } from "@opencode-ai/util/encode" import { decode64 } from "@/utils/base64" import { EventSessionError } from "@opencode-ai/sdk/v2" import { Persist, persisted } from "@/utils/persist" -import { playSoundById } from "@/utils/sound" +import { playSound, soundSrc } from "@/utils/sound" type NotificationBase = { directory?: string @@ -234,7 +234,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi if (session.parentID) return if (settings.sounds.agentEnabled()) { - void playSoundById(settings.sounds.agent()) + playSound(soundSrc(settings.sounds.agent())) } append({ @@ -263,7 +263,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi if (session?.parentID) return if (settings.sounds.errorsEnabled()) { - void playSoundById(settings.sounds.errors()) + playSound(soundSrc(settings.sounds.errors())) } const error = "error" in event.properties ? event.properties.error : undefined diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx index 247d36dd36..48788fe8ec 100644 --- a/packages/app/src/context/settings.tsx +++ b/packages/app/src/context/settings.tsx @@ -104,13 +104,6 @@ function withFallback(read: () => T | undefined, fallback: T) { return createMemo(() => read() ?? fallback) } -let font: Promise | undefined - -function loadFont() { - font ??= import("@opencode-ai/ui/font-loader") - return font -} - export const { use: useSettings, provider: SettingsProvider } = createSimpleContext({ name: "Settings", init: () => { @@ -118,7 +111,6 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont createEffect(() => { if (typeof document === "undefined") return - void loadFont().then((x) => x.ensureMonoFont(store.appearance?.font)) document.documentElement.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.font)) }) diff --git a/packages/app/src/context/terminal-title.ts b/packages/app/src/context/terminal-title.ts index c8b18f4211..3e8fa9af25 100644 --- a/packages/app/src/context/terminal-title.ts +++ b/packages/app/src/context/terminal-title.ts @@ -1,18 +1,45 @@ -const template = "Terminal {{number}}" +import { dict as ar } from "@/i18n/ar" +import { dict as br } from "@/i18n/br" +import { dict as bs } from "@/i18n/bs" +import { dict as da } from "@/i18n/da" +import { dict as de } from "@/i18n/de" +import { dict as en } from "@/i18n/en" +import { dict as es } from "@/i18n/es" +import { dict as fr } from "@/i18n/fr" +import { dict as ja } from "@/i18n/ja" +import { dict as ko } from "@/i18n/ko" +import { dict as no } from "@/i18n/no" +import { dict as pl } from "@/i18n/pl" +import { dict as ru } from "@/i18n/ru" +import { dict as th } from "@/i18n/th" +import { dict as tr } from "@/i18n/tr" +import { dict as zh } from "@/i18n/zh" +import { dict as zht } from "@/i18n/zht" -const numbered = [ - template, - "محطة طرفية {{number}}", - "Терминал {{number}}", - "ターミナル {{number}}", - "터미널 {{number}}", - "เทอร์มินัล {{number}}", - "终端 {{number}}", - "終端機 {{number}}", -] +const numbered = Array.from( + new Set([ + en["terminal.title.numbered"], + ar["terminal.title.numbered"], + br["terminal.title.numbered"], + bs["terminal.title.numbered"], + da["terminal.title.numbered"], + de["terminal.title.numbered"], + es["terminal.title.numbered"], + fr["terminal.title.numbered"], + ja["terminal.title.numbered"], + ko["terminal.title.numbered"], + no["terminal.title.numbered"], + pl["terminal.title.numbered"], + ru["terminal.title.numbered"], + th["terminal.title.numbered"], + tr["terminal.title.numbered"], + zh["terminal.title.numbered"], + zht["terminal.title.numbered"], + ]), +) export function defaultTitle(number: number) { - return template.replace("{{number}}", String(number)) + return en["terminal.title.numbered"].replace("{{number}}", String(number)) } export function isDefaultTitle(title: string, number: number) { diff --git a/packages/app/src/entry.tsx b/packages/app/src/entry.tsx index da22c55523..b5cbed6e75 100644 --- a/packages/app/src/entry.tsx +++ b/packages/app/src/entry.tsx @@ -97,15 +97,10 @@ if (!(root instanceof HTMLElement) && import.meta.env.DEV) { throw new Error(getRootNotFoundError()) } -const localUrl = () => - `http://${import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "localhost"}:${import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"}` - -const isLocalHost = () => ["localhost", "127.0.0.1", "0.0.0.0"].includes(location.hostname) - const getCurrentUrl = () => { - if (location.hostname.includes("opencode.ai")) return localUrl() - if (import.meta.env.DEV) return localUrl() - if (isLocalHost()) return localUrl() + if (location.hostname.includes("opencode.ai")) return "http://localhost:4096" + if (import.meta.env.DEV) + return `http://${import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "localhost"}:${import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"}` return location.origin } diff --git a/packages/app/src/hooks/use-providers.ts b/packages/app/src/hooks/use-providers.ts index a8f2360bbf..a25f8b4b25 100644 --- a/packages/app/src/hooks/use-providers.ts +++ b/packages/app/src/hooks/use-providers.ts @@ -22,7 +22,7 @@ export function useProviders() { const providers = () => { if (dir()) { const [projectStore] = globalSync.child(dir()) - if (projectStore.provider.all.length > 0) return projectStore.provider + return projectStore.provider } return globalSync.data.provider } diff --git a/packages/app/src/index.ts b/packages/app/src/index.ts index d80e9fffb0..53063f48f8 100644 --- a/packages/app/src/index.ts +++ b/packages/app/src/index.ts @@ -1,7 +1,6 @@ export { AppBaseProviders, AppInterface } from "./app" export { ACCEPTED_FILE_EXTENSIONS, ACCEPTED_FILE_TYPES, filePickerFilters } from "./constants/file-picker" export { useCommand } from "./context/command" -export { loadLocaleDict, normalizeLocale, type Locale } from "./context/language" export { type DisplayBackend, type Platform, PlatformProvider } from "./context/platform" export { ServerConnection } from "./context/server" export { handleNotificationClick } from "./utils/notification-click" diff --git a/packages/app/src/pages/directory-layout.tsx b/packages/app/src/pages/directory-layout.tsx index 6d3b04be9d..cd5e079a69 100644 --- a/packages/app/src/pages/directory-layout.tsx +++ b/packages/app/src/pages/directory-layout.tsx @@ -2,7 +2,8 @@ import { DataProvider } from "@opencode-ai/ui/context" import { showToast } from "@opencode-ai/ui/toast" import { base64Encode } from "@opencode-ai/util/encode" import { useLocation, useNavigate, useParams } from "@solidjs/router" -import { createEffect, createMemo, type ParentProps, Show } from "solid-js" +import { createMemo, createResource, type ParentProps, Show } from "solid-js" +import { useGlobalSDK } from "@/context/global-sdk" import { useLanguage } from "@/context/language" import { LocalProvider } from "@/context/local" import { SDKProvider } from "@/context/sdk" @@ -10,18 +11,10 @@ import { SyncProvider, useSync } from "@/context/sync" import { decode64 } from "@/utils/base64" function DirectoryDataProvider(props: ParentProps<{ directory: string }>) { - const location = useLocation() const navigate = useNavigate() const sync = useSync() const slug = createMemo(() => base64Encode(props.directory)) - createEffect(() => { - const next = sync.data.path.directory - if (!next || next === props.directory) return - const path = location.pathname.slice(slug().length + 1) - navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true }) - }) - return ( ) { export default function Layout(props: ParentProps) { const params = useParams() + const location = useLocation() const language = useLanguage() + const globalSDK = useGlobalSDK() const navigate = useNavigate() let invalid = "" - const resolved = createMemo(() => { - if (!params.dir) return "" - return decode64(params.dir) ?? "" - }) + const [resolved] = createResource( + () => { + if (params.dir) return [location.pathname, params.dir] as const + }, + async ([pathname, b64Dir]) => { + const directory = decode64(b64Dir) - createEffect(() => { - const dir = params.dir - if (!dir) return - if (resolved()) { - invalid = "" - return - } - if (invalid === dir) return - invalid = dir - showToast({ - variant: "error", - title: language.t("common.requestFailed"), - description: language.t("directory.error.invalidUrl"), - }) - navigate("/", { replace: true }) - }) + if (!directory) { + if (invalid === params.dir) return + invalid = b64Dir + showToast({ + variant: "error", + title: language.t("common.requestFailed"), + description: language.t("directory.error.invalidUrl"), + }) + navigate("/", { replace: true }) + return + } + + return await globalSDK + .createClient({ + directory, + throwOnError: true, + }) + .path.get() + .then((x) => { + const next = x.data?.directory ?? directory + invalid = "" + if (next === directory) return next + const path = pathname.slice(b64Dir.length + 1) + navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true }) + }) + .catch(() => { + invalid = "" + return directory + }) + }, + ) return ( diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx index 731f0fe5b2..1300f88a80 100644 --- a/packages/app/src/pages/layout.tsx +++ b/packages/app/src/pages/layout.tsx @@ -49,16 +49,21 @@ import { useNotification } from "@/context/notification" import { usePermission } from "@/context/permission" import { Binary } from "@opencode-ai/util/binary" import { retry } from "@opencode-ai/util/retry" -import { playSoundById } from "@/utils/sound" +import { playSound, soundSrc } from "@/utils/sound" import { createAim } from "@/utils/aim" import { setNavigate } from "@/utils/notification-click" import { Worktree as WorktreeState } from "@/utils/worktree" import { setSessionHandoff } from "@/pages/session/handoff" import { useDialog } from "@opencode-ai/ui/context/dialog" -import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context" +import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme" +import { DialogSelectProvider } from "@/components/dialog-select-provider" +import { DialogSelectServer } from "@/components/dialog-select-server" +import { DialogSettings } from "@/components/dialog-settings" import { useCommand, type CommandOption } from "@/context/command" import { ConstrainDragXAxis, getDraggableId } from "@/utils/solid-dnd" +import { DialogSelectDirectory } from "@/components/dialog-select-directory" +import { DialogEditProject } from "@/components/dialog-edit-project" import { DebugBar } from "@/components/debug-bar" import { Titlebar } from "@/components/titlebar" import { useServer } from "@/context/server" @@ -105,8 +110,6 @@ export default function Layout(props: ParentProps) { const pageReady = createMemo(() => ready()) let scrollContainerRef: HTMLDivElement | undefined - let dialogRun = 0 - let dialogDead = false const params = useParams() const globalSDK = useGlobalSDK() @@ -136,7 +139,7 @@ export default function Layout(props: ParentProps) { dir: globalSync.peek(dir, { bootstrap: false })[0].path.directory || dir, } }) - const availableThemeEntries = createMemo(() => theme.ids().map((id) => [id, theme.themes()[id]] as const)) + const availableThemeEntries = createMemo(() => Object.entries(theme.themes())) const colorSchemeOrder: ColorScheme[] = ["system", "light", "dark"] const colorSchemeKey: Record = { system: "theme.scheme.system", @@ -198,8 +201,6 @@ export default function Layout(props: ParentProps) { }) onCleanup(() => { - dialogDead = true - dialogRun += 1 if (navLeave.current !== undefined) clearTimeout(navLeave.current) clearTimeout(sortNowTimeout) if (sortNowInterval) clearInterval(sortNowInterval) @@ -335,9 +336,10 @@ export default function Layout(props: ParentProps) { const nextIndex = currentIndex === -1 ? 0 : (currentIndex + direction + ids.length) % ids.length const nextThemeId = ids[nextIndex] theme.setTheme(nextThemeId) + const nextTheme = theme.themes()[nextThemeId] showToast({ title: language.t("toast.theme.title"), - description: theme.name(nextThemeId), + description: nextTheme?.name ?? nextThemeId, }) } @@ -492,7 +494,7 @@ export default function Layout(props: ParentProps) { if (e.details.type === "permission.asked") { if (settings.sounds.permissionsEnabled()) { - void playSoundById(settings.sounds.permissions()) + playSound(soundSrc(settings.sounds.permissions())) } if (settings.notifications.permissions()) { void platform.notify(title, description, href) @@ -1150,10 +1152,10 @@ export default function Layout(props: ParentProps) { }, ] - for (const [id] of availableThemeEntries()) { + for (const [id, definition] of availableThemeEntries()) { commands.push({ id: `theme.set.${id}`, - title: language.t("command.theme.set", { theme: theme.name(id) }), + title: language.t("command.theme.set", { theme: definition.name ?? id }), category: language.t("command.category.theme"), onSelect: () => theme.commitPreview(), onHighlight: () => { @@ -1204,27 +1206,15 @@ export default function Layout(props: ParentProps) { }) function connectProvider() { - const run = ++dialogRun - void import("@/components/dialog-select-provider").then((x) => { - if (dialogDead || dialogRun !== run) return - dialog.show(() => ) - }) + dialog.show(() => ) } function openServer() { - const run = ++dialogRun - void import("@/components/dialog-select-server").then((x) => { - if (dialogDead || dialogRun !== run) return - dialog.show(() => ) - }) + dialog.show(() => ) } function openSettings() { - const run = ++dialogRun - void import("@/components/dialog-settings").then((x) => { - if (dialogDead || dialogRun !== run) return - dialog.show(() => ) - }) + dialog.show(() => ) } function projectRoot(directory: string) { @@ -1451,13 +1441,7 @@ export default function Layout(props: ParentProps) { layout.sidebar.toggleWorkspaces(project.worktree) } - const showEditProjectDialog = (project: LocalProject) => { - const run = ++dialogRun - void import("@/components/dialog-edit-project").then((x) => { - if (dialogDead || dialogRun !== run) return - dialog.show(() => ) - }) - } + const showEditProjectDialog = (project: LocalProject) => dialog.show(() => ) async function chooseProject() { function resolve(result: string | string[] | null) { @@ -1478,14 +1462,10 @@ export default function Layout(props: ParentProps) { }) resolve(result) } else { - const run = ++dialogRun - void import("@/components/dialog-select-directory").then((x) => { - if (dialogDead || dialogRun !== run) return - dialog.show( - () => , - () => resolve(null), - ) - }) + dialog.show( + () => , + () => resolve(null), + ) } } diff --git a/packages/app/src/utils/server-health.ts b/packages/app/src/utils/server-health.ts index a13fd34ef7..45a323c7be 100644 --- a/packages/app/src/utils/server-health.ts +++ b/packages/app/src/utils/server-health.ts @@ -14,15 +14,6 @@ interface CheckServerHealthOptions { const defaultTimeoutMs = 3000 const defaultRetryCount = 2 const defaultRetryDelayMs = 100 -const cacheMs = 750 -const healthCache = new Map< - string, - { at: number; done: boolean; fetch: typeof globalThis.fetch; promise: Promise } ->() - -function cacheKey(server: ServerConnection.HttpBase) { - return `${server.url}\n${server.username ?? ""}\n${server.password ?? ""}` -} function timeoutSignal(timeoutMs: number) { const timeout = (AbortSignal as unknown as { timeout?: (ms: number) => AbortSignal }).timeout @@ -96,18 +87,5 @@ export function useCheckServerHealth() { const platform = usePlatform() const fetcher = platform.fetch ?? globalThis.fetch - return (http: ServerConnection.HttpBase) => { - const key = cacheKey(http) - const hit = healthCache.get(key) - const now = Date.now() - if (hit && hit.fetch === fetcher && (!hit.done || now - hit.at < cacheMs)) return hit.promise - const promise = checkServerHealth(http, fetcher).finally(() => { - const next = healthCache.get(key) - if (!next || next.promise !== promise) return - next.done = true - next.at = Date.now() - }) - healthCache.set(key, { at: now, done: false, fetch: fetcher, promise }) - return promise - } + return (http: ServerConnection.HttpBase) => checkServerHealth(http, fetcher) } diff --git a/packages/app/src/utils/sound.ts b/packages/app/src/utils/sound.ts index 78e5a0c565..6dea812ec8 100644 --- a/packages/app/src/utils/sound.ts +++ b/packages/app/src/utils/sound.ts @@ -1,89 +1,106 @@ -let files: Record Promise> | undefined -let loads: Record Promise> | undefined - -function getFiles() { - if (files) return files - files = import.meta.glob("../../../ui/src/assets/audio/*.aac", { import: "default" }) as Record< - string, - () => Promise - > - return files -} +import alert01 from "@opencode-ai/ui/audio/alert-01.aac" +import alert02 from "@opencode-ai/ui/audio/alert-02.aac" +import alert03 from "@opencode-ai/ui/audio/alert-03.aac" +import alert04 from "@opencode-ai/ui/audio/alert-04.aac" +import alert05 from "@opencode-ai/ui/audio/alert-05.aac" +import alert06 from "@opencode-ai/ui/audio/alert-06.aac" +import alert07 from "@opencode-ai/ui/audio/alert-07.aac" +import alert08 from "@opencode-ai/ui/audio/alert-08.aac" +import alert09 from "@opencode-ai/ui/audio/alert-09.aac" +import alert10 from "@opencode-ai/ui/audio/alert-10.aac" +import bipbop01 from "@opencode-ai/ui/audio/bip-bop-01.aac" +import bipbop02 from "@opencode-ai/ui/audio/bip-bop-02.aac" +import bipbop03 from "@opencode-ai/ui/audio/bip-bop-03.aac" +import bipbop04 from "@opencode-ai/ui/audio/bip-bop-04.aac" +import bipbop05 from "@opencode-ai/ui/audio/bip-bop-05.aac" +import bipbop06 from "@opencode-ai/ui/audio/bip-bop-06.aac" +import bipbop07 from "@opencode-ai/ui/audio/bip-bop-07.aac" +import bipbop08 from "@opencode-ai/ui/audio/bip-bop-08.aac" +import bipbop09 from "@opencode-ai/ui/audio/bip-bop-09.aac" +import bipbop10 from "@opencode-ai/ui/audio/bip-bop-10.aac" +import nope01 from "@opencode-ai/ui/audio/nope-01.aac" +import nope02 from "@opencode-ai/ui/audio/nope-02.aac" +import nope03 from "@opencode-ai/ui/audio/nope-03.aac" +import nope04 from "@opencode-ai/ui/audio/nope-04.aac" +import nope05 from "@opencode-ai/ui/audio/nope-05.aac" +import nope06 from "@opencode-ai/ui/audio/nope-06.aac" +import nope07 from "@opencode-ai/ui/audio/nope-07.aac" +import nope08 from "@opencode-ai/ui/audio/nope-08.aac" +import nope09 from "@opencode-ai/ui/audio/nope-09.aac" +import nope10 from "@opencode-ai/ui/audio/nope-10.aac" +import nope11 from "@opencode-ai/ui/audio/nope-11.aac" +import nope12 from "@opencode-ai/ui/audio/nope-12.aac" +import staplebops01 from "@opencode-ai/ui/audio/staplebops-01.aac" +import staplebops02 from "@opencode-ai/ui/audio/staplebops-02.aac" +import staplebops03 from "@opencode-ai/ui/audio/staplebops-03.aac" +import staplebops04 from "@opencode-ai/ui/audio/staplebops-04.aac" +import staplebops05 from "@opencode-ai/ui/audio/staplebops-05.aac" +import staplebops06 from "@opencode-ai/ui/audio/staplebops-06.aac" +import staplebops07 from "@opencode-ai/ui/audio/staplebops-07.aac" +import yup01 from "@opencode-ai/ui/audio/yup-01.aac" +import yup02 from "@opencode-ai/ui/audio/yup-02.aac" +import yup03 from "@opencode-ai/ui/audio/yup-03.aac" +import yup04 from "@opencode-ai/ui/audio/yup-04.aac" +import yup05 from "@opencode-ai/ui/audio/yup-05.aac" +import yup06 from "@opencode-ai/ui/audio/yup-06.aac" export const SOUND_OPTIONS = [ - { id: "alert-01", label: "sound.option.alert01" }, - { id: "alert-02", label: "sound.option.alert02" }, - { id: "alert-03", label: "sound.option.alert03" }, - { id: "alert-04", label: "sound.option.alert04" }, - { id: "alert-05", label: "sound.option.alert05" }, - { id: "alert-06", label: "sound.option.alert06" }, - { id: "alert-07", label: "sound.option.alert07" }, - { id: "alert-08", label: "sound.option.alert08" }, - { id: "alert-09", label: "sound.option.alert09" }, - { id: "alert-10", label: "sound.option.alert10" }, - { id: "bip-bop-01", label: "sound.option.bipbop01" }, - { id: "bip-bop-02", label: "sound.option.bipbop02" }, - { id: "bip-bop-03", label: "sound.option.bipbop03" }, - { id: "bip-bop-04", label: "sound.option.bipbop04" }, - { id: "bip-bop-05", label: "sound.option.bipbop05" }, - { id: "bip-bop-06", label: "sound.option.bipbop06" }, - { id: "bip-bop-07", label: "sound.option.bipbop07" }, - { id: "bip-bop-08", label: "sound.option.bipbop08" }, - { id: "bip-bop-09", label: "sound.option.bipbop09" }, - { id: "bip-bop-10", label: "sound.option.bipbop10" }, - { id: "staplebops-01", label: "sound.option.staplebops01" }, - { id: "staplebops-02", label: "sound.option.staplebops02" }, - { id: "staplebops-03", label: "sound.option.staplebops03" }, - { id: "staplebops-04", label: "sound.option.staplebops04" }, - { id: "staplebops-05", label: "sound.option.staplebops05" }, - { id: "staplebops-06", label: "sound.option.staplebops06" }, - { id: "staplebops-07", label: "sound.option.staplebops07" }, - { id: "nope-01", label: "sound.option.nope01" }, - { id: "nope-02", label: "sound.option.nope02" }, - { id: "nope-03", label: "sound.option.nope03" }, - { id: "nope-04", label: "sound.option.nope04" }, - { id: "nope-05", label: "sound.option.nope05" }, - { id: "nope-06", label: "sound.option.nope06" }, - { id: "nope-07", label: "sound.option.nope07" }, - { id: "nope-08", label: "sound.option.nope08" }, - { id: "nope-09", label: "sound.option.nope09" }, - { id: "nope-10", label: "sound.option.nope10" }, - { id: "nope-11", label: "sound.option.nope11" }, - { id: "nope-12", label: "sound.option.nope12" }, - { id: "yup-01", label: "sound.option.yup01" }, - { id: "yup-02", label: "sound.option.yup02" }, - { id: "yup-03", label: "sound.option.yup03" }, - { id: "yup-04", label: "sound.option.yup04" }, - { id: "yup-05", label: "sound.option.yup05" }, - { id: "yup-06", label: "sound.option.yup06" }, + { id: "alert-01", label: "sound.option.alert01", src: alert01 }, + { id: "alert-02", label: "sound.option.alert02", src: alert02 }, + { id: "alert-03", label: "sound.option.alert03", src: alert03 }, + { id: "alert-04", label: "sound.option.alert04", src: alert04 }, + { id: "alert-05", label: "sound.option.alert05", src: alert05 }, + { id: "alert-06", label: "sound.option.alert06", src: alert06 }, + { id: "alert-07", label: "sound.option.alert07", src: alert07 }, + { id: "alert-08", label: "sound.option.alert08", src: alert08 }, + { id: "alert-09", label: "sound.option.alert09", src: alert09 }, + { id: "alert-10", label: "sound.option.alert10", src: alert10 }, + { id: "bip-bop-01", label: "sound.option.bipbop01", src: bipbop01 }, + { id: "bip-bop-02", label: "sound.option.bipbop02", src: bipbop02 }, + { id: "bip-bop-03", label: "sound.option.bipbop03", src: bipbop03 }, + { id: "bip-bop-04", label: "sound.option.bipbop04", src: bipbop04 }, + { id: "bip-bop-05", label: "sound.option.bipbop05", src: bipbop05 }, + { id: "bip-bop-06", label: "sound.option.bipbop06", src: bipbop06 }, + { id: "bip-bop-07", label: "sound.option.bipbop07", src: bipbop07 }, + { id: "bip-bop-08", label: "sound.option.bipbop08", src: bipbop08 }, + { id: "bip-bop-09", label: "sound.option.bipbop09", src: bipbop09 }, + { id: "bip-bop-10", label: "sound.option.bipbop10", src: bipbop10 }, + { id: "staplebops-01", label: "sound.option.staplebops01", src: staplebops01 }, + { id: "staplebops-02", label: "sound.option.staplebops02", src: staplebops02 }, + { id: "staplebops-03", label: "sound.option.staplebops03", src: staplebops03 }, + { id: "staplebops-04", label: "sound.option.staplebops04", src: staplebops04 }, + { id: "staplebops-05", label: "sound.option.staplebops05", src: staplebops05 }, + { id: "staplebops-06", label: "sound.option.staplebops06", src: staplebops06 }, + { id: "staplebops-07", label: "sound.option.staplebops07", src: staplebops07 }, + { id: "nope-01", label: "sound.option.nope01", src: nope01 }, + { id: "nope-02", label: "sound.option.nope02", src: nope02 }, + { id: "nope-03", label: "sound.option.nope03", src: nope03 }, + { id: "nope-04", label: "sound.option.nope04", src: nope04 }, + { id: "nope-05", label: "sound.option.nope05", src: nope05 }, + { id: "nope-06", label: "sound.option.nope06", src: nope06 }, + { id: "nope-07", label: "sound.option.nope07", src: nope07 }, + { id: "nope-08", label: "sound.option.nope08", src: nope08 }, + { id: "nope-09", label: "sound.option.nope09", src: nope09 }, + { id: "nope-10", label: "sound.option.nope10", src: nope10 }, + { id: "nope-11", label: "sound.option.nope11", src: nope11 }, + { id: "nope-12", label: "sound.option.nope12", src: nope12 }, + { id: "yup-01", label: "sound.option.yup01", src: yup01 }, + { id: "yup-02", label: "sound.option.yup02", src: yup02 }, + { id: "yup-03", label: "sound.option.yup03", src: yup03 }, + { id: "yup-04", label: "sound.option.yup04", src: yup04 }, + { id: "yup-05", label: "sound.option.yup05", src: yup05 }, + { id: "yup-06", label: "sound.option.yup06", src: yup06 }, ] as const export type SoundOption = (typeof SOUND_OPTIONS)[number] export type SoundID = SoundOption["id"] -function getLoads() { - if (loads) return loads - loads = Object.fromEntries( - Object.entries(getFiles()).flatMap(([path, load]) => { - const file = path.split("/").at(-1) - if (!file) return [] - return [[file.replace(/\.aac$/, ""), load] as const] - }), - ) as Record Promise> - return loads -} - -const cache = new Map>() +const soundById = Object.fromEntries(SOUND_OPTIONS.map((s) => [s.id, s.src])) as Record export function soundSrc(id: string | undefined) { - const loads = getLoads() - if (!id || !(id in loads)) return Promise.resolve(undefined) - const key = id as SoundID - const hit = cache.get(key) - if (hit) return hit - const next = loads[key]().catch(() => undefined) - cache.set(key, next) - return next + if (!id) return + if (!(id in soundById)) return + return soundById[id as SoundID] } export function playSound(src: string | undefined) { @@ -91,12 +108,10 @@ export function playSound(src: string | undefined) { if (!src) return const audio = new Audio(src) audio.play().catch(() => undefined) + + // Return a cleanup function to pause the sound. return () => { audio.pause() audio.currentTime = 0 } } - -export function playSoundById(id: string | undefined) { - return soundSrc(id).then((src) => playSound(src)) -} diff --git a/packages/desktop-electron/src/renderer/index.tsx b/packages/desktop-electron/src/renderer/index.tsx index 44f2e6360c..ec2b4d1e7a 100644 --- a/packages/desktop-electron/src/renderer/index.tsx +++ b/packages/desktop-electron/src/renderer/index.tsx @@ -6,9 +6,6 @@ import { AppBaseProviders, AppInterface, handleNotificationClick, - loadLocaleDict, - normalizeLocale, - type Locale, type Platform, PlatformProvider, ServerConnection, @@ -249,17 +246,6 @@ listenForDeepLinks() render(() => { const platform = createPlatform() - const loadLocale = async () => { - const current = await platform.storage?.("opencode.global.dat").getItem("language") - const legacy = current ? undefined : await platform.storage?.().getItem("language.v1") - const raw = current ?? legacy - if (!raw) return - const locale = raw.match(/"locale"\s*:\s*"([^"]+)"/)?.[1] - if (!locale) return - const next = normalizeLocale(locale) - if (next !== "en") await loadLocaleDict(next) - return next satisfies Locale - } const [windowCount] = createResource(() => window.api.getWindowCount()) @@ -271,7 +257,6 @@ render(() => { if (url) return ServerConnection.key({ type: "http", http: { url } }) }), ) - const [locale] = createResource(loadLocale) const servers = () => { const data = sidecar() @@ -324,14 +309,15 @@ render(() => { return ( - - + + {(_) => { return ( 1} > diff --git a/packages/desktop/src/index.tsx b/packages/desktop/src/index.tsx index 5fe88d501b..e677956440 100644 --- a/packages/desktop/src/index.tsx +++ b/packages/desktop/src/index.tsx @@ -6,9 +6,6 @@ import { AppBaseProviders, AppInterface, handleNotificationClick, - loadLocaleDict, - normalizeLocale, - type Locale, type Platform, PlatformProvider, ServerConnection, @@ -417,17 +414,6 @@ void listenForDeepLinks() render(() => { const platform = createPlatform() - const loadLocale = async () => { - const current = await platform.storage?.("opencode.global.dat").getItem("language") - const legacy = current ? undefined : await platform.storage?.().getItem("language.v1") - const raw = current ?? legacy - if (!raw) return - const locale = raw.match(/"locale"\s*:\s*"([^"]+)"/)?.[1] - if (!locale) return - const next = normalizeLocale(locale) - if (next !== "en") await loadLocaleDict(next) - return next satisfies Locale - } // Fetch sidecar credentials from Rust (available immediately, before health check) const [sidecar] = createResource(() => commands.awaitInitialization(new Channel() as any)) @@ -437,7 +423,6 @@ render(() => { if (url) return ServerConnection.key({ type: "http", http: { url } }) }), ) - const [locale] = createResource(loadLocale) // Build the sidecar server connection once credentials arrive const servers = () => { @@ -480,8 +465,8 @@ render(() => { return ( - - + + {(_) => { return ( - - diff --git a/packages/ui/src/assets/icons/provider/alibaba-coding-plan.svg b/packages/ui/src/assets/icons/provider/alibaba-coding-plan.svg deleted file mode 100644 index b3a2edc3c0..0000000000 --- a/packages/ui/src/assets/icons/provider/alibaba-coding-plan.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/ui/src/assets/icons/provider/clarifai.svg b/packages/ui/src/assets/icons/provider/clarifai.svg deleted file mode 100644 index 086e9aa1fc..0000000000 --- a/packages/ui/src/assets/icons/provider/clarifai.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - diff --git a/packages/ui/src/assets/icons/provider/dinference.svg b/packages/ui/src/assets/icons/provider/dinference.svg deleted file mode 100644 index e045c96fb3..0000000000 --- a/packages/ui/src/assets/icons/provider/dinference.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui/src/assets/icons/provider/drun.svg b/packages/ui/src/assets/icons/provider/drun.svg deleted file mode 100644 index 472dee9122..0000000000 --- a/packages/ui/src/assets/icons/provider/drun.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/packages/ui/src/assets/icons/provider/perplexity-agent.svg b/packages/ui/src/assets/icons/provider/perplexity-agent.svg deleted file mode 100644 index a0f38862a4..0000000000 --- a/packages/ui/src/assets/icons/provider/perplexity-agent.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/ui/src/assets/icons/provider/tencent-coding-plan.svg b/packages/ui/src/assets/icons/provider/tencent-coding-plan.svg deleted file mode 100644 index 502e51a5be..0000000000 --- a/packages/ui/src/assets/icons/provider/tencent-coding-plan.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/ui/src/assets/icons/provider/zenmux.svg b/packages/ui/src/assets/icons/provider/zenmux.svg index 9eb8045e45..d8d9ef665f 100644 --- a/packages/ui/src/assets/icons/provider/zenmux.svg +++ b/packages/ui/src/assets/icons/provider/zenmux.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/ui/src/components/font.tsx b/packages/ui/src/components/font.tsx index e1a508f16a..f735747a49 100644 --- a/packages/ui/src/components/font.tsx +++ b/packages/ui/src/components/font.tsx @@ -1,9 +1,121 @@ -import { Link, Style } from "@solidjs/meta" import { Show } from "solid-js" +import { Style, Link } from "@solidjs/meta" import inter from "../assets/fonts/inter.woff2" -import ibmPlexMonoBold from "../assets/fonts/ibm-plex-mono-bold.woff2" -import ibmPlexMonoMedium from "../assets/fonts/ibm-plex-mono-medium.woff2" import ibmPlexMonoRegular from "../assets/fonts/ibm-plex-mono.woff2" +import ibmPlexMonoMedium from "../assets/fonts/ibm-plex-mono-medium.woff2" +import ibmPlexMonoBold from "../assets/fonts/ibm-plex-mono-bold.woff2" + +import cascadiaCode from "../assets/fonts/cascadia-code-nerd-font.woff2" +import cascadiaCodeBold from "../assets/fonts/cascadia-code-nerd-font-bold.woff2" +import firaCode from "../assets/fonts/fira-code-nerd-font.woff2" +import firaCodeBold from "../assets/fonts/fira-code-nerd-font-bold.woff2" +import hack from "../assets/fonts/hack-nerd-font.woff2" +import hackBold from "../assets/fonts/hack-nerd-font-bold.woff2" +import inconsolata from "../assets/fonts/inconsolata-nerd-font.woff2" +import inconsolataBold from "../assets/fonts/inconsolata-nerd-font-bold.woff2" +import intelOneMono from "../assets/fonts/intel-one-mono-nerd-font.woff2" +import intelOneMonoBold from "../assets/fonts/intel-one-mono-nerd-font-bold.woff2" +import jetbrainsMono from "../assets/fonts/jetbrains-mono-nerd-font.woff2" +import jetbrainsMonoBold from "../assets/fonts/jetbrains-mono-nerd-font-bold.woff2" +import mesloLgs from "../assets/fonts/meslo-lgs-nerd-font.woff2" +import mesloLgsBold from "../assets/fonts/meslo-lgs-nerd-font-bold.woff2" +import robotoMono from "../assets/fonts/roboto-mono-nerd-font.woff2" +import robotoMonoBold from "../assets/fonts/roboto-mono-nerd-font-bold.woff2" +import sourceCodePro from "../assets/fonts/source-code-pro-nerd-font.woff2" +import sourceCodeProBold from "../assets/fonts/source-code-pro-nerd-font-bold.woff2" +import ubuntuMono from "../assets/fonts/ubuntu-mono-nerd-font.woff2" +import ubuntuMonoBold from "../assets/fonts/ubuntu-mono-nerd-font-bold.woff2" +import iosevka from "../assets/fonts/iosevka-nerd-font.woff2" +import iosevkaBold from "../assets/fonts/iosevka-nerd-font-bold.woff2" +import geistMono from "../assets/fonts/GeistMonoNerdFontMono-Regular.woff2" +import geistMonoBold from "../assets/fonts/GeistMonoNerdFontMono-Bold.woff2" + +type MonoFont = { + family: string + regular: string + bold: string +} + +export const MONO_NERD_FONTS = [ + { + family: "JetBrains Mono Nerd Font", + regular: jetbrainsMono, + bold: jetbrainsMonoBold, + }, + { + family: "Fira Code Nerd Font", + regular: firaCode, + bold: firaCodeBold, + }, + { + family: "Cascadia Code Nerd Font", + regular: cascadiaCode, + bold: cascadiaCodeBold, + }, + { + family: "Hack Nerd Font", + regular: hack, + bold: hackBold, + }, + { + family: "Source Code Pro Nerd Font", + regular: sourceCodePro, + bold: sourceCodeProBold, + }, + { + family: "Inconsolata Nerd Font", + regular: inconsolata, + bold: inconsolataBold, + }, + { + family: "Roboto Mono Nerd Font", + regular: robotoMono, + bold: robotoMonoBold, + }, + { + family: "Ubuntu Mono Nerd Font", + regular: ubuntuMono, + bold: ubuntuMonoBold, + }, + { + family: "Intel One Mono Nerd Font", + regular: intelOneMono, + bold: intelOneMonoBold, + }, + { + family: "Meslo LGS Nerd Font", + regular: mesloLgs, + bold: mesloLgsBold, + }, + { + family: "Iosevka Nerd Font", + regular: iosevka, + bold: iosevkaBold, + }, + { + family: "GeistMono Nerd Font", + regular: geistMono, + bold: geistMonoBold, + }, +] satisfies MonoFont[] + +const monoNerdCss = MONO_NERD_FONTS.map( + (font) => ` + @font-face { + font-family: "${font.family}"; + src: url("${font.regular}") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 400; + } + @font-face { + font-family: "${font.family}"; + src: url("${font.bold}") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 700; + }`, +).join("") export const Font = () => { return ( @@ -53,6 +165,7 @@ export const Font = () => { descent-override: 25%; line-gap-override: 1%; } +${monoNerdCss} `} diff --git a/packages/ui/src/font-loader.ts b/packages/ui/src/font-loader.ts deleted file mode 100644 index f2b1e6be13..0000000000 --- a/packages/ui/src/font-loader.ts +++ /dev/null @@ -1,133 +0,0 @@ -type MonoFont = { - id: string - family: string - regular: string - bold: string -} - -let files: Record Promise> | undefined - -function getFiles() { - if (files) return files - files = import.meta.glob("./assets/fonts/*.woff2", { import: "default" }) as Record Promise> - return files -} - -export const MONO_NERD_FONTS = [ - { - id: "jetbrains-mono", - family: "JetBrains Mono Nerd Font", - regular: "./assets/fonts/jetbrains-mono-nerd-font.woff2", - bold: "./assets/fonts/jetbrains-mono-nerd-font-bold.woff2", - }, - { - id: "fira-code", - family: "Fira Code Nerd Font", - regular: "./assets/fonts/fira-code-nerd-font.woff2", - bold: "./assets/fonts/fira-code-nerd-font-bold.woff2", - }, - { - id: "cascadia-code", - family: "Cascadia Code Nerd Font", - regular: "./assets/fonts/cascadia-code-nerd-font.woff2", - bold: "./assets/fonts/cascadia-code-nerd-font-bold.woff2", - }, - { - id: "hack", - family: "Hack Nerd Font", - regular: "./assets/fonts/hack-nerd-font.woff2", - bold: "./assets/fonts/hack-nerd-font-bold.woff2", - }, - { - id: "source-code-pro", - family: "Source Code Pro Nerd Font", - regular: "./assets/fonts/source-code-pro-nerd-font.woff2", - bold: "./assets/fonts/source-code-pro-nerd-font-bold.woff2", - }, - { - id: "inconsolata", - family: "Inconsolata Nerd Font", - regular: "./assets/fonts/inconsolata-nerd-font.woff2", - bold: "./assets/fonts/inconsolata-nerd-font-bold.woff2", - }, - { - id: "roboto-mono", - family: "Roboto Mono Nerd Font", - regular: "./assets/fonts/roboto-mono-nerd-font.woff2", - bold: "./assets/fonts/roboto-mono-nerd-font-bold.woff2", - }, - { - id: "ubuntu-mono", - family: "Ubuntu Mono Nerd Font", - regular: "./assets/fonts/ubuntu-mono-nerd-font.woff2", - bold: "./assets/fonts/ubuntu-mono-nerd-font-bold.woff2", - }, - { - id: "intel-one-mono", - family: "Intel One Mono Nerd Font", - regular: "./assets/fonts/intel-one-mono-nerd-font.woff2", - bold: "./assets/fonts/intel-one-mono-nerd-font-bold.woff2", - }, - { - id: "meslo-lgs", - family: "Meslo LGS Nerd Font", - regular: "./assets/fonts/meslo-lgs-nerd-font.woff2", - bold: "./assets/fonts/meslo-lgs-nerd-font-bold.woff2", - }, - { - id: "iosevka", - family: "Iosevka Nerd Font", - regular: "./assets/fonts/iosevka-nerd-font.woff2", - bold: "./assets/fonts/iosevka-nerd-font-bold.woff2", - }, - { - id: "geist-mono", - family: "GeistMono Nerd Font", - regular: "./assets/fonts/GeistMonoNerdFontMono-Regular.woff2", - bold: "./assets/fonts/GeistMonoNerdFontMono-Bold.woff2", - }, -] satisfies MonoFont[] - -const mono = Object.fromEntries(MONO_NERD_FONTS.map((font) => [font.id, font])) as Record -const loads = new Map>() - -function css(font: { family: string; regular: string; bold: string }) { - return ` - @font-face { - font-family: "${font.family}"; - src: url("${font.regular}") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 400; - } - @font-face { - font-family: "${font.family}"; - src: url("${font.bold}") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 700; - } - ` -} - -export function ensureMonoFont(id: string | undefined) { - if (!id || id === "ibm-plex-mono") return Promise.resolve() - if (typeof document !== "object") return Promise.resolve() - const font = mono[id] - if (!font) return Promise.resolve() - const styleId = `oc-font-${font.id}` - if (document.getElementById(styleId)) return Promise.resolve() - const hit = loads.get(font.id) - if (hit) return hit - const files = getFiles() - const load = Promise.all([files[font.regular]?.(), files[font.bold]?.()]).then(([regular, bold]) => { - if (!regular || !bold) return - if (document.getElementById(styleId)) return - const style = document.createElement("style") - style.id = styleId - style.textContent = css({ family: font.family, regular, bold }) - document.head.appendChild(style) - }) - loads.set(font.id, load) - return load -} diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx index 7d25ac3972..9808c8e841 100644 --- a/packages/ui/src/theme/context.tsx +++ b/packages/ui/src/theme/context.tsx @@ -1,7 +1,7 @@ import { createEffect, onCleanup, onMount } from "solid-js" import { createStore } from "solid-js/store" import { createSimpleContext } from "../context/helper" -import oc2ThemeJson from "./themes/oc-2.json" +import { DEFAULT_THEMES } from "./default-themes" import { resolveThemeVariant, themeToCss } from "./resolve" import type { DesktopTheme } from "./types" @@ -15,101 +15,14 @@ const STORAGE_KEYS = { } as const const THEME_STYLE_ID = "oc-theme" -let files: Record Promise<{ default: DesktopTheme }>> | undefined -let ids: string[] | undefined -let known: Set | undefined - -function getFiles() { - if (files) return files - files = import.meta.glob<{ default: DesktopTheme }>("./themes/*.json") - return files -} - -function themeIDs() { - if (ids) return ids - ids = Object.keys(getFiles()) - .map((path) => path.slice("./themes/".length, -".json".length)) - .sort() - return ids -} - -function knownThemes() { - if (known) return known - known = new Set(themeIDs()) - return known -} - -const names: Record = { - "oc-2": "OC-2", - amoled: "AMOLED", - aura: "Aura", - ayu: "Ayu", - carbonfox: "Carbonfox", - catppuccin: "Catppuccin", - "catppuccin-frappe": "Catppuccin Frappe", - "catppuccin-macchiato": "Catppuccin Macchiato", - cobalt2: "Cobalt2", - cursor: "Cursor", - dracula: "Dracula", - everforest: "Everforest", - flexoki: "Flexoki", - github: "GitHub", - gruvbox: "Gruvbox", - kanagawa: "Kanagawa", - "lucent-orng": "Lucent Orng", - material: "Material", - matrix: "Matrix", - mercury: "Mercury", - monokai: "Monokai", - nightowl: "Night Owl", - nord: "Nord", - "one-dark": "One Dark", - onedarkpro: "One Dark Pro", - opencode: "OpenCode", - orng: "Orng", - "osaka-jade": "Osaka Jade", - palenight: "Palenight", - rosepine: "Rose Pine", - shadesofpurple: "Shades of Purple", - solarized: "Solarized", - synthwave84: "Synthwave '84", - tokyonight: "Tokyonight", - vercel: "Vercel", - vesper: "Vesper", - zenburn: "Zenburn", -} -const oc2Theme = oc2ThemeJson as DesktopTheme function normalize(id: string | null | undefined) { return id === "oc-1" ? "oc-2" : id } -function read(key: string) { - if (typeof localStorage !== "object") return null - try { - return localStorage.getItem(key) - } catch { - return null - } -} - -function write(key: string, value: string) { - if (typeof localStorage !== "object") return - try { - localStorage.setItem(key, value) - } catch {} -} - -function drop(key: string) { - if (typeof localStorage !== "object") return - try { - localStorage.removeItem(key) - } catch {} -} - function clear() { - drop(STORAGE_KEYS.THEME_CSS_LIGHT) - drop(STORAGE_KEYS.THEME_CSS_DARK) + localStorage.removeItem(STORAGE_KEYS.THEME_CSS_LIGHT) + localStorage.removeItem(STORAGE_KEYS.THEME_CSS_DARK) } function ensureThemeStyleElement(): HTMLStyleElement { @@ -122,7 +35,6 @@ function ensureThemeStyleElement(): HTMLStyleElement { } function getSystemMode(): "light" | "dark" { - if (typeof window !== "object") return "light" return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" } @@ -133,7 +45,9 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da const css = themeToCss(tokens) if (themeId !== "oc-2") { - write(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css) + try { + localStorage.setItem(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css) + } catch {} } const fullCss = `:root { @@ -155,122 +69,74 @@ function cacheThemeVariants(theme: DesktopTheme, themeId: string) { const variant = isDark ? theme.dark : theme.light const tokens = resolveThemeVariant(variant, isDark) const css = themeToCss(tokens) - write(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css) + try { + localStorage.setItem(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css) + } catch {} } } export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ name: "Theme", init: (props: { defaultTheme?: string; onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark") => void }) => { - const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2" - const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system" - const mode = colorScheme === "system" ? getSystemMode() : colorScheme const [store, setStore] = createStore({ - themes: { - "oc-2": oc2Theme, - } as Record, - themeId, - colorScheme, - mode, + themes: DEFAULT_THEMES as Record, + themeId: normalize(props.defaultTheme) ?? "oc-2", + colorScheme: "system" as ColorScheme, + mode: getSystemMode(), previewThemeId: null as string | null, previewScheme: null as ColorScheme | null, }) - const loads = new Map>() + window.addEventListener("storage", (e) => { + if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) setStore("themeId", e.newValue) + if (e.key === STORAGE_KEYS.COLOR_SCHEME && e.newValue) { + setStore("colorScheme", e.newValue as ColorScheme) + setStore("mode", e.newValue === "system" ? getSystemMode() : (e.newValue as any)) + } + }) - const load = (id: string) => { - const next = normalize(id) - if (!next) return Promise.resolve(undefined) - const hit = store.themes[next] - if (hit) return Promise.resolve(hit) - const pending = loads.get(next) - if (pending) return pending - const file = getFiles()[`./themes/${next}.json`] - if (!file) return Promise.resolve(undefined) - const task = file() - .then((mod) => { - const theme = mod.default - setStore("themes", next, theme) - return theme - }) - .finally(() => { - loads.delete(next) - }) - loads.set(next, task) - return task - } + onMount(() => { + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + const handler = () => { + if (store.colorScheme === "system") { + setStore("mode", getSystemMode()) + } + } + mediaQuery.addEventListener("change", handler) + onCleanup(() => mediaQuery.removeEventListener("change", handler)) + + const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME_ID) + const themeId = normalize(savedTheme) + const savedScheme = localStorage.getItem(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null + if (themeId && store.themes[themeId]) { + setStore("themeId", themeId) + } + if (savedTheme && themeId && savedTheme !== themeId) { + localStorage.setItem(STORAGE_KEYS.THEME_ID, themeId) + clear() + } + if (savedScheme) { + setStore("colorScheme", savedScheme) + if (savedScheme !== "system") { + setStore("mode", savedScheme) + } + } + const currentTheme = store.themes[store.themeId] + if (currentTheme) { + cacheThemeVariants(currentTheme, store.themeId) + } + }) const applyTheme = (theme: DesktopTheme, themeId: string, mode: "light" | "dark") => { applyThemeCss(theme, themeId, mode) props.onThemeApplied?.(theme, mode) } - const ids = () => { - const extra = Object.keys(store.themes) - .filter((id) => !knownThemes().has(id)) - .sort() - const all = themeIDs() - if (extra.length === 0) return all - return [...all, ...extra] - } - - const loadThemes = () => Promise.all(themeIDs().map(load)).then(() => store.themes) - - const onStorage = (e: StorageEvent) => { - if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) { - const next = normalize(e.newValue) - if (!next) return - if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return - setStore("themeId", next) - if (next === "oc-2") { - clear() - return - } - void load(next).then((theme) => { - if (!theme || store.themeId !== next) return - cacheThemeVariants(theme, next) - }) - } - if (e.key === STORAGE_KEYS.COLOR_SCHEME && e.newValue) { - setStore("colorScheme", e.newValue as ColorScheme) - setStore("mode", e.newValue === "system" ? getSystemMode() : (e.newValue as "light" | "dark")) - } - } - - if (typeof window === "object") { - window.addEventListener("storage", onStorage) - onCleanup(() => window.removeEventListener("storage", onStorage)) - } - - onMount(() => { - const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") - const onMedia = () => { - if (store.colorScheme !== "system") return - setStore("mode", getSystemMode()) - } - mediaQuery.addEventListener("change", onMedia) - onCleanup(() => mediaQuery.removeEventListener("change", onMedia)) - - const rawTheme = read(STORAGE_KEYS.THEME_ID) - const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2" - const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system" - if (rawTheme && rawTheme !== savedTheme) { - write(STORAGE_KEYS.THEME_ID, savedTheme) - clear() - } - if (savedTheme !== store.themeId) setStore("themeId", savedTheme) - if (savedScheme !== store.colorScheme) setStore("colorScheme", savedScheme) - setStore("mode", savedScheme === "system" ? getSystemMode() : savedScheme) - void load(savedTheme).then((theme) => { - if (!theme || store.themeId !== savedTheme) return - cacheThemeVariants(theme, savedTheme) - }) - }) - createEffect(() => { const theme = store.themes[store.themeId] - if (!theme) return - applyTheme(theme, store.themeId, store.mode) + if (theme) { + applyTheme(theme, store.themeId, store.mode) + } }) const setTheme = (id: string) => { @@ -279,26 +145,23 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ console.warn(`Theme "${id}" not found`) return } - if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) { + const theme = store.themes[next] + if (!theme) { console.warn(`Theme "${id}" not found`) return } setStore("themeId", next) + localStorage.setItem(STORAGE_KEYS.THEME_ID, next) if (next === "oc-2") { - write(STORAGE_KEYS.THEME_ID, next) clear() return } - void load(next).then((theme) => { - if (!theme || store.themeId !== next) return - cacheThemeVariants(theme, next) - write(STORAGE_KEYS.THEME_ID, next) - }) + cacheThemeVariants(theme, next) } const setColorScheme = (scheme: ColorScheme) => { setStore("colorScheme", scheme) - write(STORAGE_KEYS.COLOR_SCHEME, scheme) + localStorage.setItem(STORAGE_KEYS.COLOR_SCHEME, scheme) setStore("mode", scheme === "system" ? getSystemMode() : scheme) } @@ -306,9 +169,6 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ themeId: () => store.themeId, colorScheme: () => store.colorScheme, mode: () => store.mode, - ids, - name: (id: string) => store.themes[id]?.name ?? names[id] ?? id, - loadThemes, themes: () => store.themes, setTheme, setColorScheme, @@ -316,28 +176,24 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ previewTheme: (id: string) => { const next = normalize(id) if (!next) return - if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return + const theme = store.themes[next] + if (!theme) return setStore("previewThemeId", next) - void load(next).then((theme) => { - if (!theme || store.previewThemeId !== next) return - const mode = store.previewScheme - ? store.previewScheme === "system" - ? getSystemMode() - : store.previewScheme - : store.mode - applyTheme(theme, next, mode) - }) + const previewMode = store.previewScheme + ? store.previewScheme === "system" + ? getSystemMode() + : store.previewScheme + : store.mode + applyTheme(theme, next, previewMode) }, previewColorScheme: (scheme: ColorScheme) => { setStore("previewScheme", scheme) - const mode = scheme === "system" ? getSystemMode() : scheme + const previewMode = scheme === "system" ? getSystemMode() : scheme const id = store.previewThemeId ?? store.themeId - void load(id).then((theme) => { - if (!theme) return - if ((store.previewThemeId ?? store.themeId) !== id) return - if (store.previewScheme !== scheme) return - applyTheme(theme, id, mode) - }) + const theme = store.themes[id] + if (theme) { + applyTheme(theme, id, previewMode) + } }, commitPreview: () => { if (store.previewThemeId) { @@ -352,10 +208,10 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ cancelPreview: () => { setStore("previewThemeId", null) setStore("previewScheme", null) - void load(store.themeId).then((theme) => { - if (!theme) return + const theme = store.themes[store.themeId] + if (theme) { applyTheme(theme, store.themeId, store.mode) - }) + } }, } },