-
Something went wrong
-An error occurred while loading the application.
+{language.t("error.page.title")}
+{language.t("error.page.description")}
- Please report this error to the OpenCode team
+ {language.t("error.page.report.prefix")}
Version: {platform.version}
+ {(version) => ( +{language.t("error.page.version", { version: version() })}
+ )}
{ctx().tokens}
- Tokens
+ {language.t("context.usage.tokens")}
{ctx().percentage ?? 0}%
- Usage
+ {language.t("context.usage.usage")}
)}
{cost()}
- Cost
+ {language.t("context.usage.cost")}
Click to view context
+ {language.t("context.usage.clickToView")}
New session
+ {language.t("command.session.new")}
@@ -76,9 +78,11 @@ export function NewSessionView(props: NewSessionViewProps) {
-
-
-
- {props.children}
-
-
-
-
+
+
+
+
+ {props.children}
+
+
+
+
+
)
@@ -85,17 +87,15 @@ export function AppInterface(props: { defaultUrl?: string }) {
(
-
-
-
-
-
- {props.children}
-
-
-
-
-
+
+
+
+
+ {props.children}
+
+
+
+
)}
>
diff --git a/packages/app/src/components/dialog-fork.tsx b/packages/app/src/components/dialog-fork.tsx
index c4c52fc4d71..17782f5ab8d 100644
--- a/packages/app/src/components/dialog-fork.tsx
+++ b/packages/app/src/components/dialog-fork.tsx
@@ -61,7 +61,10 @@ export const DialogFork: Component = () => {
if (!sessionID) return
const parts = sync.data.part[item.id] ?? []
- const restored = extractPromptFromParts(parts, { directory: sdk.directory })
+ const restored = extractPromptFromParts(parts, {
+ directory: sdk.directory,
+ attachmentName: language.t("common.attachment"),
+ })
dialog.close()
diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx
index ba42ffdd6e9..cdb299c79d9 100644
--- a/packages/app/src/components/dialog-select-model.tsx
+++ b/packages/app/src/components/dialog-select-model.tsx
@@ -38,8 +38,6 @@ const ModelList: Component<{
sortBy={(a, b) => a.name.localeCompare(b.name)}
groupBy={(x) => x.provider.name}
sortGroupsBy={(a, b) => {
- if (a.category === "Recent" && b.category !== "Recent") return -1
- if (b.category === "Recent" && a.category !== "Recent") return 1
const aProvider = a.items[0].provider.id
const bProvider = b.items[0].provider.id
if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
diff --git a/packages/app/src/components/session-lsp-indicator.tsx b/packages/app/src/components/session-lsp-indicator.tsx
index ac3a3999798..dab92920ec4 100644
--- a/packages/app/src/components/session-lsp-indicator.tsx
+++ b/packages/app/src/components/session-lsp-indicator.tsx
@@ -1,9 +1,11 @@
import { createMemo, Show } from "solid-js"
import { useSync } from "@/context/sync"
+import { useLanguage } from "@/context/language"
import { Tooltip } from "@opencode-ai/ui/tooltip"
export function SessionLspIndicator() {
const sync = useSync()
+ const language = useLanguage()
const lspStats = createMemo(() => {
const lsp = sync.data.lsp ?? []
@@ -15,7 +17,7 @@ export function SessionLspIndicator() {
const tooltipContent = createMemo(() => {
const lsp = sync.data.lsp ?? []
- if (lsp.length === 0) return "No LSP servers"
+ if (lsp.length === 0) return language.t("lsp.tooltip.none")
return lsp.map((s) => s.name).join(", ")
})
@@ -30,7 +32,9 @@ export function SessionLspIndicator() {
"bg-icon-success-base": !lspStats().hasError && lspStats().connected > 0,
}}
/>
- {lspStats().connected} LSP
+
+ {language.t("lsp.label.connected", { count: lspStats().connected })}
+
diff --git a/packages/app/src/components/session/session-sortable-tab.tsx b/packages/app/src/components/session/session-sortable-tab.tsx
index 595ff9d6f8b..a4a434b05ab 100644
--- a/packages/app/src/components/session/session-sortable-tab.tsx
+++ b/packages/app/src/components/session/session-sortable-tab.tsx
@@ -7,6 +7,7 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
import { Tabs } from "@opencode-ai/ui/tabs"
import { getFilename } from "@opencode-ai/util/path"
import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
return (
@@ -25,6 +26,7 @@ export function FileVisual(props: { path: string; active?: boolean }): JSX.Eleme
export function SortableTab(props: { tab: string; onTabClose: (tab: string) => void }): JSX.Element {
const file = useFile()
+ const language = useLanguage()
const sortable = createSortable(props.tab)
const path = createMemo(() => file.pathFromTab(props.tab))
return (
@@ -34,7 +36,7 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
- Last modified
+ {language.t("session.new.lastModified")}
- {DateTime.fromMillis(project().time.updated ?? project().time.created).toRelative()}
+ {DateTime.fromMillis(project().time.updated ?? project().time.created)
+ .setLocale(language.locale())
+ .toRelative()}
@@ -19,7 +31,7 @@ export function SortableTerminalTab(props: { terminal: LocalPTY }): JSX.Element
)
}
>
- {props.terminal.title}
+ {label()}
- {t().title}
+ {(() => {
+ const number = t().titleNumber
+ if (Number.isFinite(number) && number > 0) {
+ return language.t("terminal.title.numbered", { number })
+ }
+ if (t().title) return t().title
+ return language.t("terminal.title")
+ })()}
)}
{children}
- {scripts}
-
-
- )}
+ document={({ assets, children, scripts }) => {
+ const lang = (() => {
+ const event = getRequestEvent()
+ const header = event?.request.headers.get("accept-language")
+ if (!header) return "en"
+ for (const item of header.split(",")) {
+ const value = item.trim().split(";")[0]?.toLowerCase()
+ if (!value) continue
+ if (value.startsWith("zh")) return "zh"
+ if (value.startsWith("en")) return "en"
+ }
+ return "en"
+ })()
+
+ return (
+
+
+
+
+ {children}
+ {scripts}
+
+
+ )
+ }}
/>
))
diff --git a/packages/ui/src/components/session-review.tsx b/packages/ui/src/components/session-review.tsx
index be5181a985f..c4be87a0ba1 100644
--- a/packages/ui/src/components/session-review.tsx
+++ b/packages/ui/src/components/session-review.tsx
@@ -6,6 +6,7 @@ import { FileIcon } from "./file-icon"
import { Icon } from "./icon"
import { StickyAccordionHeader } from "./sticky-accordion-header"
import { useDiffComponent } from "../context/diff"
+import { useI18n } from "../context/i18n"
import { getDirectory, getFilename } from "@opencode-ai/util/path"
import { For, Match, Show, Switch, type JSX } from "solid-js"
import { createStore } from "solid-js/store"
@@ -32,6 +33,7 @@ export interface SessionReviewProps {
}
export const SessionReview = (props: SessionReviewProps) => {
+ const i18n = useI18n()
const diffComponent = useDiffComponent()
const [store, setStore] = createStore({
open: props.diffs.length > 10 ? [] : props.diffs.map((d) => d.file),
@@ -68,21 +70,23 @@ export const SessionReview = (props: SessionReviewProps) => {
[props.classes?.header ?? ""]: !!props.classes?.header,
}}
>
- Session changes
+ {i18n.t("ui.sessionReview.title")}
-
- Show more changes (
- {(data.store.session_diff?.[props.sessionID]?.length ?? 0) - store.diffLimit})
+ {i18n.t("ui.sessionTurn.diff.showMore", {
+ count: (data.store.session_diff?.[props.sessionID]?.length ?? 0) - store.diffLimit,
+ })}
diff --git a/packages/ui/src/context/i18n.tsx b/packages/ui/src/context/i18n.tsx
index fd8b05d3cf2..a2ff0f37b0f 100644
--- a/packages/ui/src/context/i18n.tsx
+++ b/packages/ui/src/context/i18n.tsx
@@ -3,7 +3,7 @@ import { dict as en } from "../i18n/en"
export type UiI18nKey = keyof typeof en
-export type UiI18nParams = RecordResponse
+{i18n.t("ui.sessionTurn.summary.response")}
@@ -15,7 +17,7 @@ export function ImagePreview(props: ImagePreviewProps) {
- 
+
- {grouped.loading ? props.loadingMessage ?? "Loading" : props.emptyMessage ?? "No results"}
-
- {" "}for "{filter()}"
-
+ {emptyMessage()}
- Error
+ {i18n.t("ui.messagePart.diagnostic.error")}
[{diagnostic.range.start.line + 1}:{diagnostic.range.start.character + 1}]
@@ -179,81 +181,84 @@ export type ToolInfo = {
}
export function getToolInfo(tool: string, input: any = {}): ToolInfo {
+ const i18n = useI18n()
switch (tool) {
case "read":
return {
icon: "glasses",
- title: "Read",
+ title: i18n.t("ui.tool.read"),
subtitle: input.filePath ? getFilename(input.filePath) : undefined,
}
case "list":
return {
icon: "bullet-list",
- title: "List",
+ title: i18n.t("ui.tool.list"),
subtitle: input.path ? getFilename(input.path) : undefined,
}
case "glob":
return {
icon: "magnifying-glass-menu",
- title: "Glob",
+ title: i18n.t("ui.tool.glob"),
subtitle: input.pattern,
}
case "grep":
return {
icon: "magnifying-glass-menu",
- title: "Grep",
+ title: i18n.t("ui.tool.grep"),
subtitle: input.pattern,
}
case "webfetch":
return {
icon: "window-cursor",
- title: "Webfetch",
+ title: i18n.t("ui.tool.webfetch"),
subtitle: input.url,
}
case "task":
return {
icon: "task",
- title: `${input.subagent_type || "task"} Agent`,
+ title: i18n.t("ui.tool.agent", { type: input.subagent_type || "task" }),
subtitle: input.description,
}
case "bash":
return {
icon: "console",
- title: "Shell",
+ title: i18n.t("ui.tool.shell"),
subtitle: input.description,
}
case "edit":
return {
icon: "code-lines",
- title: "Edit",
+ title: i18n.t("ui.messagePart.title.edit"),
subtitle: input.filePath ? getFilename(input.filePath) : undefined,
}
case "write":
return {
icon: "code-lines",
- title: "Write",
+ title: i18n.t("ui.messagePart.title.write"),
subtitle: input.filePath ? getFilename(input.filePath) : undefined,
}
case "apply_patch":
return {
icon: "code-lines",
- title: "Patch",
- subtitle: input.files?.length ? `${input.files.length} file${input.files.length > 1 ? "s" : ""}` : undefined,
+ title: i18n.t("ui.tool.patch"),
+ subtitle: input.files?.length
+ ? `${input.files.length} ${i18n.t(input.files.length > 1 ? "ui.common.file.other" : "ui.common.file.one")}`
+ : undefined,
}
case "todowrite":
return {
icon: "checklist",
- title: "To-dos",
+ title: i18n.t("ui.tool.todos"),
}
case "todoread":
return {
icon: "checklist",
- title: "Read to-dos",
+ title: i18n.t("ui.tool.todos.read"),
}
case "question":
return {
icon: "bubble-5",
- title: "Questions",
+ title: i18n.t("ui.tool.questions"),
}
default:
return {
@@ -297,6 +302,7 @@ export function AssistantMessageDisplay(props: { message: AssistantMessage; part
export function UserMessageDisplay(props: { message: UserMessage; parts: PartType[] }) {
const dialog = useDialog()
+ const i18n = useI18n()
const [copied, setCopied] = createSignal(false)
const [expanded, setExpanded] = createSignal(false)
const [canExpand, setCanExpand] = createSignal(false)
@@ -385,7 +391,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
}
>
-
-
+
{
@@ -639,13 +650,13 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
@@ -687,6 +698,7 @@ PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props) {
ToolRegistry.register({
name: "read",
render(props) {
+ const i18n = useI18n()
const args: string[] = []
if (props.input.offset) args.push("offset=" + props.input.offset)
if (props.input.limit) args.push("limit=" + props.input.limit)
@@ -695,7 +707,7 @@ ToolRegistry.register({
{...props}
icon="glasses"
trigger={{
- title: "Read",
+ title: i18n.t("ui.tool.read"),
subtitle: props.input.filePath ? getFilename(props.input.filePath) : "",
args,
}}
@@ -707,11 +719,12 @@ ToolRegistry.register({
ToolRegistry.register({
name: "list",
render(props) {
+ const i18n = useI18n()
return (
{(output) => (
@@ -728,12 +741,13 @@ ToolRegistry.register({
ToolRegistry.register({
name: "glob",
render(props) {
+ const i18n = useI18n()
return (
(props.metadata.summary ?? []) as { id: string; tool: string; state: { status: string; title?: string } }[]
@@ -899,7 +916,7 @@ ToolRegistry.register({
icon="task"
defaultOpen={true}
trigger={{
- title: `${props.input.subagent_type || props.tool} Agent`,
+ title: i18n.t("ui.tool.agent", { type: props.input.subagent_type || props.tool }),
titleClass: "capitalize",
subtitle: props.input.description,
}}
@@ -912,13 +929,13 @@ ToolRegistry.register({
@@ -929,7 +946,7 @@ ToolRegistry.register({
icon="task"
defaultOpen={true}
trigger={{
- title: `${props.input.subagent_type || props.tool} Agent`,
+ title: i18n.t("ui.tool.agent", { type: props.input.subagent_type || props.tool }),
titleClass: "capitalize",
subtitle: props.input.description,
}}
@@ -969,12 +986,13 @@ ToolRegistry.register({
ToolRegistry.register({
name: "bash",
render(props) {
+ const i18n = useI18n()
return (
@@ -991,6 +1009,7 @@ ToolRegistry.register({
ToolRegistry.register({
name: "edit",
render(props) {
+ const i18n = useI18n()
const diffComponent = useDiffComponent()
const diagnostics = createMemo(() => getDiagnostics(props.metadata.diagnostics, props.input.filePath))
const filename = () => getFilename(props.input.filePath ?? "")
@@ -1001,7 +1020,9 @@ ToolRegistry.register({
trigger={
-
Edit {filename()}
+
+ {i18n.t("ui.messagePart.title.edit")} {filename()}
+
{getDirectory(props.input.filePath!)}
@@ -1040,6 +1061,7 @@ ToolRegistry.register({
ToolRegistry.register({
name: "write",
render(props) {
+ const i18n = useI18n()
const codeComponent = useCodeComponent()
const diagnostics = createMemo(() => getDiagnostics(props.metadata.diagnostics, props.input.filePath))
const filename = () => getFilename(props.input.filePath ?? "")
@@ -1050,7 +1072,9 @@ ToolRegistry.register({
trigger={
-
@@ -1396,7 +1424,7 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
@@ -1420,7 +1448,7 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
data-picked={customPicked()}
onClick={() => selectOption(options().length)}
>
- Type your own answer
+ {i18n.t("ui.messagePart.option.typeOwnAnswer")}
{input()}
@@ -1434,7 +1462,7 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
ref={(el) => setTimeout(() => el.focus(), 0)}
type="text"
data-slot="custom-input"
- placeholder="Type your answer..."
+ placeholder={i18n.t("ui.question.custom.placeholder")}
value={input()}
onInput={(e) => {
const inputs = [...store.custom]
@@ -1443,10 +1471,10 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
}}
/>
@@ -1456,7 +1484,7 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
Write {filename()}
+
+ {i18n.t("ui.messagePart.title.write")} {filename()}
+
{getDirectory(props.input.filePath!)}
@@ -1095,13 +1119,14 @@ interface ApplyPatchFile {
ToolRegistry.register({
name: "apply_patch",
render(props) {
+ const i18n = useI18n()
const diffComponent = useDiffComponent()
const files = createMemo(() => (props.metadata.files ?? []) as ApplyPatchFile[])
const subtitle = createMemo(() => {
const count = files().length
if (count === 0) return ""
- return `${count} file${count > 1 ? "s" : ""}`
+ return `${count} ${i18n.t(count > 1 ? "ui.common.file.other" : "ui.common.file.one")}`
})
return (
@@ -1109,7 +1134,7 @@ ToolRegistry.register({
{...props}
icon="code-lines"
trigger={{
- title: "Patch",
+ title: i18n.t("ui.tool.patch"),
subtitle: subtitle(),
}}
>
@@ -1122,22 +1147,22 @@ ToolRegistry.register({
- Deleted
+ {i18n.t("ui.patch.action.deleted")}
- Created
+ {i18n.t("ui.patch.action.created")}
- Moved
+ {i18n.t("ui.patch.action.moved")}
- Patched
+ {i18n.t("ui.patch.action.patched")}
@@ -1171,6 +1196,7 @@ ToolRegistry.register({
ToolRegistry.register({
name: "todowrite",
render(props) {
+ const i18n = useI18n()
const todos = createMemo(() => {
const meta = props.metadata?.todos
if (Array.isArray(meta)) return meta
@@ -1193,7 +1219,7 @@ ToolRegistry.register({
defaultOpen
icon="checklist"
trigger={{
- title: "To-dos",
+ title: i18n.t("ui.tool.todos"),
subtitle: subtitle(),
}}
>
@@ -1218,6 +1244,7 @@ ToolRegistry.register({
ToolRegistry.register({
name: "question",
render(props) {
+ const i18n = useI18n()
const questions = createMemo(() => (props.input.questions ?? []) as QuestionInfo[])
const answers = createMemo(() => (props.metadata.answers ?? []) as QuestionAnswer[])
const completed = createMemo(() => answers().length > 0)
@@ -1225,8 +1252,8 @@ ToolRegistry.register({
const subtitle = createMemo(() => {
const count = questions().length
if (count === 0) return ""
- if (completed()) return `${count} answered`
- return `${count} question${count > 1 ? "s" : ""}`
+ if (completed()) return i18n.t("ui.question.subtitle.answered", { count })
+ return `${count} ${i18n.t(count > 1 ? "ui.common.question.other" : "ui.common.question.one")}`
})
return (
@@ -1235,7 +1262,7 @@ ToolRegistry.register({
defaultOpen={completed()}
icon="bubble-5"
trigger={{
- title: "Questions",
+ title: i18n.t("ui.tool.questions"),
subtitle: subtitle(),
}}
>
@@ -1247,7 +1274,7 @@ ToolRegistry.register({
return (
)
}}
@@ -1261,6 +1288,7 @@ ToolRegistry.register({
function QuestionPrompt(props: { request: QuestionRequest }) {
const data = useData()
+ const i18n = useI18n()
const questions = createMemo(() => props.request.questions)
const single = createMemo(() => questions().length === 1 && questions()[0]?.multiple !== true)
@@ -1387,7 +1415,7 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
}}
{q.question}
- {answer().join(", ") || "(no answer)"}
+ {answer().join(", ") || i18n.t("ui.question.answer.none")}
{question()?.question}
- {multi() ? " (select all that apply)" : ""}
+ {multi() ? " " + i18n.t("ui.question.multiHint") : ""}
-
{(q, index) => {
const value = () => store.answers[index()]?.join(", ") ?? ""
@@ -1465,7 +1493,7 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
@@ -1491,7 +1519,7 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
onClick={() => selectTab(store.tab + 1)}
disabled={(store.answers[store.tab]?.length ?? 0) === 0}
>
- Next
+ {i18n.t("ui.common.next")}
diff --git a/packages/ui/src/components/text-field.tsx b/packages/ui/src/components/text-field.tsx
index ed3d13fe355..a4eafa561c7 100644
--- a/packages/ui/src/components/text-field.tsx
+++ b/packages/ui/src/components/text-field.tsx
@@ -1,6 +1,7 @@
import { TextField as Kobalte } from "@kobalte/core/text-field"
import { createSignal, Show, splitProps } from "solid-js"
import type { ComponentProps } from "solid-js"
+import { useI18n } from "../context/i18n"
import { IconButton } from "./icon-button"
import { Tooltip } from "./tooltip"
@@ -30,6 +31,7 @@ export interface TextFieldProps
}
export function TextField(props: TextFieldProps) {
+ const i18n = useI18n()
const [local, others] = splitProps(props, [
"name",
"defaultValue",
@@ -90,7 +92,11 @@ export function TextField(props: TextFieldProps) {
-
+
>
diff --git a/specs/07-ui-i18n-audit.md b/specs/07-ui-i18n-audit.md
index f6f67db7385..26bc552bb43 100644
--- a/specs/07-ui-i18n-audit.md
+++ b/specs/07-ui-i18n-audit.md
@@ -120,6 +120,22 @@ Examples (non-exhaustive):
- `Type your own answer`
- `Review your answers`
+### 4) Additional Hardcoded Strings (Full Audit)
+
+Found during a full `packages/ui/src/components` + `packages/ui/src/context` sweep:
+
+- `packages/ui/src/components/list.tsx`
+ - `Loading`
+ - `No results`
+ - `No results for "{{filter}}"`
+- `packages/ui/src/components/message-nav.tsx`
+ - `New message`
+- `packages/ui/src/components/text-field.tsx`
+ - `Copied`
+ - `Copy to clipboard`
+- `packages/ui/src/components/image-preview.tsx`
+ - `Image preview` (alt text)
+
## Prioritized Implementation Plan
1. Completed (2026-01-20): Add `@opencode-ai/ui` i18n context (`packages/ui/src/context/i18n.tsx`) + export it.
@@ -128,8 +144,8 @@ Examples (non-exhaustive):
- `packages/app/src/app.tsx`
- `packages/enterprise/src/app.tsx`
4. Completed (2026-01-20): Convert `packages/ui/src/components/session-review.tsx` and `packages/ui/src/components/session-turn.tsx` to use `useI18n().t(...)`.
-5. Convert `packages/ui/src/components/message-part.tsx`.
-6. Do a full `packages/ui/src/components` + `packages/ui/src/context` audit for additional hardcoded copy.
+5. Completed (2026-01-20): Convert `packages/ui/src/components/message-part.tsx`.
+6. Completed (2026-01-20): Do a full `packages/ui/src/components` + `packages/ui/src/context` audit for additional hardcoded copy.
## Notes / Risks
From 233d003b4926ec615ff15c1ddd54a1719a62ef13 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Tue, 20 Jan 2026 17:56:53 -0600
Subject: [PATCH 023/120] wip(app): i18n
---
.../app/src/components/dialog-settings.tsx | 9 +-
.../app/src/components/settings-agents.tsx | 7 +-
.../app/src/components/settings-commands.tsx | 7 +-
.../app/src/components/settings-general.tsx | 94 +++++++++---
.../app/src/components/settings-keybinds.tsx | 49 +++++--
packages/app/src/components/settings-mcp.tsx | 7 +-
.../app/src/components/settings-models.tsx | 7 +-
.../src/components/settings-permissions.tsx | 136 ++++++++++++++----
.../app/src/components/settings-providers.tsx | 7 +-
packages/app/src/i18n/en.ts | 103 +++++++++++++
packages/app/src/i18n/zh.ts | 103 +++++++++++++
11 files changed, 452 insertions(+), 77 deletions(-)
diff --git a/packages/app/src/components/dialog-settings.tsx b/packages/app/src/components/dialog-settings.tsx
index 5ef89b8bfc7..1e9575cb23e 100644
--- a/packages/app/src/components/dialog-settings.tsx
+++ b/packages/app/src/components/dialog-settings.tsx
@@ -2,6 +2,7 @@ import { Component } from "solid-js"
import { Dialog } from "@opencode-ai/ui/dialog"
import { Tabs } from "@opencode-ai/ui/tabs"
import { Icon } from "@opencode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
import { SettingsGeneral } from "./settings-general"
import { SettingsKeybinds } from "./settings-keybinds"
import { SettingsPermissions } from "./settings-permissions"
@@ -12,6 +13,8 @@ import { SettingsCommands } from "./settings-commands"
import { SettingsMcp } from "./settings-mcp"
export const DialogSettings: Component = () => {
+ const language = useLanguage()
+
return (
diff --git a/packages/app/src/components/settings-agents.tsx b/packages/app/src/components/settings-agents.tsx
index 892be152b32..e68f1e59c53 100644
--- a/packages/app/src/components/settings-agents.tsx
+++ b/packages/app/src/components/settings-agents.tsx
@@ -1,11 +1,14 @@
import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"
export const SettingsAgents: Component = () => {
+ const language = useLanguage()
+
return (
)
diff --git a/packages/app/src/components/settings-commands.tsx b/packages/app/src/components/settings-commands.tsx
index e98c0eeb032..cf796d0aa7a 100644
--- a/packages/app/src/components/settings-commands.tsx
+++ b/packages/app/src/components/settings-commands.tsx
@@ -1,11 +1,14 @@
import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"
export const SettingsCommands: Component = () => {
+ const language = useLanguage()
+
return (
)
diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index e8749cbdeaf..5f3519a7469 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -2,22 +2,33 @@ import { Component, createMemo, type JSX } from "solid-js"
import { Select } from "@opencode-ai/ui/select"
import { Switch } from "@opencode-ai/ui/switch"
import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
+import { useLanguage } from "@/context/language"
import { useSettings, monoFontFamily } from "@/context/settings"
import { playSound, SOUND_OPTIONS } from "@/utils/sound"
export const SettingsGeneral: Component = () => {
const theme = useTheme()
+ const language = useLanguage()
const settings = useSettings()
const themeOptions = createMemo(() =>
Object.entries(theme.themes()).map(([id, def]) => ({ id, name: def.name ?? id })),
)
- const colorSchemeOptions: { value: ColorScheme; label: string }[] = [
- { value: "system", label: "System setting" },
- { value: "light", label: "Light" },
- { value: "dark", label: "Dark" },
- ]
+ const colorSchemeOptions = createMemo(
+ (): { value: ColorScheme; label: string }[] => [
+ { value: "system", label: language.t("theme.scheme.system") },
+ { value: "light", label: language.t("theme.scheme.light") },
+ { value: "dark", label: language.t("theme.scheme.dark") },
+ ],
+ )
+
+ const languageOptions = createMemo(() =>
+ language.locales.map((locale) => ({
+ value: locale,
+ label: language.label(locale),
+ })),
+ )
const fontOptions = [
{ value: "ibm-plex-mono", label: "IBM Plex Mono" },
@@ -45,20 +56,39 @@ export const SettingsGeneral: Component = () => {
}}
>
Review your answers
+ {i18n.t("ui.messagePart.review.title")}
{q.question}
- {answered() ? value() : "(not answered)"}
+ {answered() ? value() : i18n.t("ui.question.review.notAnswered")}
)
@@ -1476,12 +1504,12 @@ function QuestionPrompt(props: { request: QuestionRequest }) {
-
Agents
-Agent settings will be configurable here.
+{language.t("settings.agents.title")}
+{language.t("settings.agents.description")}
-
Commands
-Command settings will be configurable here.
+{language.t("settings.commands.title")}
+{language.t("settings.commands.description")}
-
General
+{language.t("settings.tab.general")}
{/* Appearance Section */}
-
Appearance
+{language.t("settings.general.section.appearance")}
-
+
+
+
+
- Customise how OpenCode is themed.{" "}
+ {language.t("settings.general.row.theme.description")} {" "}
- Learn more
+ {language.t("common.learnMore")}
}
@@ -104,7 +134,10 @@ export const SettingsGeneral: Component = () => {
/>
-
+