wip(app): i18n

2026-01-20 17:56:53 -06:00
parent 6037e88ddf
commit 233d003b49
11 changed files with 451 additions and 76 deletions
--- 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 (
    <Dialog size="x-large">
      <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
@@ -26,15 +29,15 @@ export const DialogSettings: Component = () => {
              "padding-bottom": "12px",
            }}
          >
-            <Tabs.SectionTitle>Desktop</Tabs.SectionTitle>
+            <Tabs.SectionTitle>{language.t("settings.section.desktop")}</Tabs.SectionTitle>
            <div style={{ display: "flex", "flex-direction": "column", gap: "6px", width: "100%" }}>
              <Tabs.Trigger value="general">
                <Icon name="sliders" />
-                General
+                {language.t("settings.tab.general")}
              </Tabs.Trigger>
              <Tabs.Trigger value="shortcuts">
                <Icon name="keyboard" />
-                Shortcuts
+                {language.t("settings.tab.shortcuts")}
              </Tabs.Trigger>
            </div>
          </div>
--- 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 (
    <div class="flex flex-col h-full overflow-y-auto">
      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
-        <h2 class="text-16-medium text-text-strong">Agents</h2>
-        <p class="text-14-regular text-text-weak">Agent settings will be configurable here.</p>
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.agents.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.agents.description")}</p>
      </div>
    </div>
  )
--- 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 (
    <div class="flex flex-col h-full overflow-y-auto">
      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
-        <h2 class="text-16-medium text-text-strong">Commands</h2>
-        <p class="text-14-regular text-text-weak">Command settings will be configurable here.</p>
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.commands.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.commands.description")}</p>
      </div>
    </div>
  )
--- 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 = () => {
        }}
      >
        <div class="flex flex-col gap-1 pt-6 pb-8">
-          <h2 class="text-16-medium text-text-strong">General</h2>
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
        </div>
      </div>

      <div class="flex flex-col gap-8 w-full">
        {/* Appearance Section */}
        <div class="flex flex-col gap-1">
-          <h3 class="text-14-medium text-text-strong pb-2">Appearance</h3>
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>

          <div class="bg-surface-raised-base px-4 rounded-lg">
-            <SettingsRow title="Appearance" description="Customise how OpenCode looks on your device">
+            <SettingsRow
+              title={language.t("settings.general.row.language.title")}
+              description={language.t("settings.general.row.language.description")}
+            >
              <Select
-                options={colorSchemeOptions}
-                current={colorSchemeOptions.find((o) => o.value === theme.colorScheme())}
+                options={languageOptions()}
+                current={languageOptions().find((o) => o.value === language.locale())}
+                value={(o) => o.value}
+                label={(o) => o.label}
+                onSelect={(option) => option && language.setLocale(option.value)}
+                variant="secondary"
+                size="small"
+                triggerVariant="settings"
+              />
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.row.appearance.title")}
+              description={language.t("settings.general.row.appearance.description")}
+            >
+              <Select
+                options={colorSchemeOptions()}
+                current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
                value={(o) => o.value}
                label={(o) => o.label}
                onSelect={(option) => option && theme.setColorScheme(option.value)}
@@ -74,12 +104,12 @@ export const SettingsGeneral: Component = () => {
            </SettingsRow>

            <SettingsRow
-              title="Theme"
+              title={language.t("settings.general.row.theme.title")}
              description={
                <>
-                  Customise how OpenCode is themed.{" "}
+                  {language.t("settings.general.row.theme.description")} {" "}
                  <a href="#" class="text-text-interactive-base">
-                    Learn more
+                    {language.t("common.learnMore")}
                  </a>
                </>
              }
@@ -104,7 +134,10 @@ export const SettingsGeneral: Component = () => {
              />
            </SettingsRow>

-            <SettingsRow title="Font" description="Customise the mono font used in code blocks">
+            <SettingsRow
+              title={language.t("settings.general.row.font.title")}
+              description={language.t("settings.general.row.font.description")}
+            >
              <Select
                options={fontOptions}
                current={fontOptions.find((o) => o.value === settings.appearance.font())}
@@ -124,12 +157,12 @@ export const SettingsGeneral: Component = () => {

        {/* System notifications Section */}
        <div class="flex flex-col gap-1">
-          <h3 class="text-14-medium text-text-strong pb-2">System notifications</h3>
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>

          <div class="bg-surface-raised-base px-4 rounded-lg">
            <SettingsRow
-              title="Agent"
-              description="Show system notification when the agent is complete or needs attention"
+              title={language.t("settings.general.notifications.agent.title")}
+              description={language.t("settings.general.notifications.agent.description")}
            >
              <Switch
                checked={settings.notifications.agent()}
@@ -137,14 +170,20 @@ export const SettingsGeneral: Component = () => {
              />
            </SettingsRow>

-            <SettingsRow title="Permissions" description="Show system notification when a permission is required">
+            <SettingsRow
+              title={language.t("settings.general.notifications.permissions.title")}
+              description={language.t("settings.general.notifications.permissions.description")}
+            >
              <Switch
                checked={settings.notifications.permissions()}
                onChange={(checked) => settings.notifications.setPermissions(checked)}
              />
            </SettingsRow>

-            <SettingsRow title="Errors" description="Show system notification when an error occurs">
+            <SettingsRow
+              title={language.t("settings.general.notifications.errors.title")}
+              description={language.t("settings.general.notifications.errors.description")}
+            >
              <Switch
                checked={settings.notifications.errors()}
                onChange={(checked) => settings.notifications.setErrors(checked)}
@@ -155,10 +194,13 @@ export const SettingsGeneral: Component = () => {

        {/* Sound effects Section */}
        <div class="flex flex-col gap-1">
-          <h3 class="text-14-medium text-text-strong pb-2">Sound effects</h3>
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>

          <div class="bg-surface-raised-base px-4 rounded-lg">
-            <SettingsRow title="Agent" description="Play sound when the agent is complete or needs attention">
+            <SettingsRow
+              title={language.t("settings.general.sounds.agent.title")}
+              description={language.t("settings.general.sounds.agent.description")}
+            >
              <Select
                options={soundOptions}
                current={soundOptions.find((o) => o.id === settings.sounds.agent())}
@@ -179,7 +221,10 @@ export const SettingsGeneral: Component = () => {
              />
            </SettingsRow>

-            <SettingsRow title="Permissions" description="Play sound when a permission is required">
+            <SettingsRow
+              title={language.t("settings.general.sounds.permissions.title")}
+              description={language.t("settings.general.sounds.permissions.description")}
+            >
              <Select
                options={soundOptions}
                current={soundOptions.find((o) => o.id === settings.sounds.permissions())}
@@ -200,7 +245,10 @@ export const SettingsGeneral: Component = () => {
              />
            </SettingsRow>

-            <SettingsRow title="Errors" description="Play sound when an error occurs">
+            <SettingsRow
+              title={language.t("settings.general.sounds.errors.title")}
+              description={language.t("settings.general.sounds.errors.description")}
+            >
              <Select
                options={soundOptions}
                current={soundOptions.find((o) => o.id === settings.sounds.errors())}
--- a/packages/app/src/components/settings-keybinds.tsx
+++ b/packages/app/src/components/settings-keybinds.tsx
@@ -2,6 +2,7 @@ import { Component, For, Show, createMemo, createSignal, onCleanup, onMount } fr
 import { Button } from "@opencode-ai/ui/button"
 import { showToast } from "@opencode-ai/ui/toast"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"

 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
@@ -17,6 +18,23 @@ type KeybindMeta = {

 const GROUPS: KeybindGroup[] = ["General", "Session", "Navigation", "Model and agent", "Terminal", "Prompt"]

+type GroupKey =
+  | "settings.shortcuts.group.general"
+  | "settings.shortcuts.group.session"
+  | "settings.shortcuts.group.navigation"
+  | "settings.shortcuts.group.modelAndAgent"
+  | "settings.shortcuts.group.terminal"
+  | "settings.shortcuts.group.prompt"
+
+const groupKey: Record<KeybindGroup, GroupKey> = {
+  General: "settings.shortcuts.group.general",
+  Session: "settings.shortcuts.group.session",
+  Navigation: "settings.shortcuts.group.navigation",
+  "Model and agent": "settings.shortcuts.group.modelAndAgent",
+  Terminal: "settings.shortcuts.group.terminal",
+  Prompt: "settings.shortcuts.group.prompt",
+}
+
 function groupFor(id: string): KeybindGroup {
  if (id === PALETTE_ID) return "General"
  if (id.startsWith("terminal.")) return "Terminal"
@@ -86,6 +104,7 @@ function signatures(config: string | undefined) {

 export const SettingsKeybinds: Component = () => {
  const command = useCommand()
+  const language = useLanguage()
  const settings = useSettings()

  const [active, setActive] = createSignal<string | null>(null)
@@ -117,12 +136,16 @@ export const SettingsKeybinds: Component = () => {
  const resetAll = () => {
    stop()
    settings.keybinds.resetAll()
-    showToast({ title: "Shortcuts reset", description: "Keyboard shortcuts have been reset to defaults." })
+    showToast({
+      title: language.t("settings.shortcuts.reset.toast.title"),
+      description: language.t("settings.shortcuts.reset.toast.description"),
+    })
  }

  const list = createMemo(() => {
+    language.locale()
    const out = new Map<string, KeybindMeta>()
-    out.set(PALETTE_ID, { title: "Command palette", group: "General" })
+    out.set(PALETTE_ID, { title: language.t("command.palette"), group: "General" })

    for (const opt of command.catalog) {
      if (opt.id.startsWith("suggested.")) continue
@@ -188,7 +211,7 @@ export const SettingsKeybinds: Component = () => {

    const palette = settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND
    for (const sig of signatures(palette)) {
-      add(sig, { id: PALETTE_ID, title: "Command palette" })
+      add(sig, { id: PALETTE_ID, title: title(PALETTE_ID) })
    }

    const valueFor = (id: string) => {
@@ -258,8 +281,11 @@ export const SettingsKeybinds: Component = () => {

      if (conflicts.size > 0) {
        showToast({
-          title: "Shortcut already in use",
-          description: `${formatKeybind(next)} is already assigned to ${[...conflicts.values()].join(", ")}.`,
+          title: language.t("settings.shortcuts.conflict.title"),
+          description: language.t("settings.shortcuts.conflict.description", {
+            keybind: formatKeybind(next),
+            titles: [...conflicts.values()].join(", "),
+          }),
        })
        return
      }
@@ -288,9 +314,9 @@ export const SettingsKeybinds: Component = () => {
        }}
      >
        <div class="flex items-center justify-between gap-4 pt-6 pb-8 max-w-[720px]">
-          <h2 class="text-16-medium text-text-strong">Keyboard shortcuts</h2>
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
          <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
-            Reset to defaults
+            {language.t("settings.shortcuts.reset.button")}
          </Button>
        </div>
      </div>
@@ -300,7 +326,7 @@ export const SettingsKeybinds: Component = () => {
          {(group) => (
            <Show when={(grouped().get(group) ?? []).length > 0}>
              <div class="flex flex-col gap-1">
-                <h3 class="text-14-medium text-text-strong pb-2">{group}</h3>
+                <h3 class="text-14-medium text-text-strong pb-2">{language.t(groupKey[group])}</h3>
                <div class="bg-surface-raised-base px-4 rounded-lg">
                  <For each={grouped().get(group) ?? []}>
                    {(id) => (
@@ -316,8 +342,11 @@ export const SettingsKeybinds: Component = () => {
                          }}
                          onClick={() => start(id)}
                        >
-                          <Show when={active() === id} fallback={command.keybind(id) || "Unassigned"}>
-                            Press keys
+                          <Show
+                            when={active() === id}
+                            fallback={command.keybind(id) || language.t("settings.shortcuts.unassigned")}
+                          >
+                            {language.t("settings.shortcuts.pressKeys")}
                          </Show>
                        </button>
                      </div>
--- a/packages/app/src/components/settings-mcp.tsx
+++ b/packages/app/src/components/settings-mcp.tsx
@@ -1,11 +1,14 @@
 import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"

 export const SettingsMcp: Component = () => {
+  const language = useLanguage()
+
  return (
    <div class="flex flex-col h-full overflow-y-auto">
      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
-        <h2 class="text-16-medium text-text-strong">MCP</h2>
-        <p class="text-14-regular text-text-weak">MCP settings will be configurable here.</p>
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.mcp.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.mcp.description")}</p>
      </div>
    </div>
  )
--- a/packages/app/src/components/settings-models.tsx
+++ b/packages/app/src/components/settings-models.tsx
@@ -1,11 +1,14 @@
 import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"

 export const SettingsModels: Component = () => {
+  const language = useLanguage()
+
  return (
    <div class="flex flex-col h-full overflow-y-auto">
      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
-        <h2 class="text-16-medium text-text-strong">Models</h2>
-        <p class="text-14-regular text-text-weak">Model settings will be configurable here.</p>
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.models.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.models.description")}</p>
      </div>
    </div>
  )
--- a/packages/app/src/components/settings-permissions.tsx
+++ b/packages/app/src/components/settings-permissions.tsx
@@ -2,6 +2,7 @@ import { Select } from "@opencode-ai/ui/select"
 import { showToast } from "@opencode-ai/ui/toast"
 import { Component, For, createMemo, type JSX } from "solid-js"
 import { useGlobalSync } from "@/context/global-sync"
+import { useLanguage } from "@/context/language"

 type PermissionAction = "allow" | "ask" | "deny"

@@ -15,30 +16,94 @@ type PermissionItem = {
  description: string
 }

-const ACTIONS: Array<{ value: PermissionAction; label: string }> = [
-  { value: "allow", label: "Allow" },
-  { value: "ask", label: "Ask" },
-  { value: "deny", label: "Deny" },
-]
+const ACTIONS = [
+  { value: "allow", label: "settings.permissions.action.allow" },
+  { value: "ask", label: "settings.permissions.action.ask" },
+  { value: "deny", label: "settings.permissions.action.deny" },
+] as const

-const ITEMS: PermissionItem[] = [
-  { id: "read", title: "Read", description: "Reading a file (matches the file path)" },
-  { id: "edit", title: "Edit", description: "Modify files, including edits, writes, patches, and multi-edits" },
-  { id: "glob", title: "Glob", description: "Match files using glob patterns" },
-  { id: "grep", title: "Grep", description: "Search file contents using regular expressions" },
-  { id: "list", title: "List", description: "List files within a directory" },
-  { id: "bash", title: "Bash", description: "Run shell commands" },
-  { id: "task", title: "Task", description: "Launch sub-agents" },
-  { id: "skill", title: "Skill", description: "Load a skill by name" },
-  { id: "lsp", title: "LSP", description: "Run language server queries" },
-  { id: "todoread", title: "Todo Read", description: "Read the todo list" },
-  { id: "todowrite", title: "Todo Write", description: "Update the todo list" },
-  { id: "webfetch", title: "Web Fetch", description: "Fetch content from a URL" },
-  { id: "websearch", title: "Web Search", description: "Search the web" },
-  { id: "codesearch", title: "Code Search", description: "Search code on the web" },
-  { id: "external_directory", title: "External Directory", description: "Access files outside the project directory" },
-  { id: "doom_loop", title: "Doom Loop", description: "Detect repeated tool calls with identical input" },
-]
+const ITEMS = [
+  {
+    id: "read",
+    title: "settings.permissions.tool.read.title",
+    description: "settings.permissions.tool.read.description",
+  },
+  {
+    id: "edit",
+    title: "settings.permissions.tool.edit.title",
+    description: "settings.permissions.tool.edit.description",
+  },
+  {
+    id: "glob",
+    title: "settings.permissions.tool.glob.title",
+    description: "settings.permissions.tool.glob.description",
+  },
+  {
+    id: "grep",
+    title: "settings.permissions.tool.grep.title",
+    description: "settings.permissions.tool.grep.description",
+  },
+  {
+    id: "list",
+    title: "settings.permissions.tool.list.title",
+    description: "settings.permissions.tool.list.description",
+  },
+  {
+    id: "bash",
+    title: "settings.permissions.tool.bash.title",
+    description: "settings.permissions.tool.bash.description",
+  },
+  {
+    id: "task",
+    title: "settings.permissions.tool.task.title",
+    description: "settings.permissions.tool.task.description",
+  },
+  {
+    id: "skill",
+    title: "settings.permissions.tool.skill.title",
+    description: "settings.permissions.tool.skill.description",
+  },
+  {
+    id: "lsp",
+    title: "settings.permissions.tool.lsp.title",
+    description: "settings.permissions.tool.lsp.description",
+  },
+  {
+    id: "todoread",
+    title: "settings.permissions.tool.todoread.title",
+    description: "settings.permissions.tool.todoread.description",
+  },
+  {
+    id: "todowrite",
+    title: "settings.permissions.tool.todowrite.title",
+    description: "settings.permissions.tool.todowrite.description",
+  },
+  {
+    id: "webfetch",
+    title: "settings.permissions.tool.webfetch.title",
+    description: "settings.permissions.tool.webfetch.description",
+  },
+  {
+    id: "websearch",
+    title: "settings.permissions.tool.websearch.title",
+    description: "settings.permissions.tool.websearch.description",
+  },
+  {
+    id: "codesearch",
+    title: "settings.permissions.tool.codesearch.title",
+    description: "settings.permissions.tool.codesearch.description",
+  },
+  {
+    id: "external_directory",
+    title: "settings.permissions.tool.external_directory.title",
+    description: "settings.permissions.tool.external_directory.description",
+  },
+  {
+    id: "doom_loop",
+    title: "settings.permissions.tool.doom_loop.title",
+    description: "settings.permissions.tool.doom_loop.description",
+  },
+] as const

 const VALID_ACTIONS = new Set<PermissionAction>(["allow", "ask", "deny"])

@@ -67,6 +132,15 @@ function getRuleDefault(value: unknown): PermissionAction | undefined {

 export const SettingsPermissions: Component = () => {
  const globalSync = useGlobalSync()
+  const language = useLanguage()
+
+  const actions = createMemo(
+    (): Array<{ value: PermissionAction; label: string }> =>
+      ACTIONS.map((action) => ({
+        value: action.value,
+        label: language.t(action.label),
+      })),
+  )

  const permission = createMemo(() => {
    return toMap(globalSync.data.config.permission)
@@ -95,7 +169,7 @@ export const SettingsPermissions: Component = () => {
    globalSync.updateConfig({ permission: { [id]: nextValue } }).catch((err: unknown) => {
      globalSync.set("config", "permission", before)
      const message = err instanceof Error ? err.message : String(err)
-      showToast({ title: "Failed to update permissions", description: message })
+      showToast({ title: language.t("settings.permissions.toast.updateFailed.title"), description: message })
    })
  }

@@ -109,21 +183,21 @@ export const SettingsPermissions: Component = () => {
        }}
      >
        <div class="flex flex-col gap-1 p-8 max-w-[720px]">
-          <h2 class="text-16-medium text-text-strong">Permissions</h2>
-          <p class="text-14-regular text-text-weak">Control what tools the server can use by default.</p>
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.permissions.title")}</h2>
+          <p class="text-14-regular text-text-weak">{language.t("settings.permissions.description")}</p>
        </div>
      </div>

      <div class="flex flex-col gap-6 p-8 pt-6 max-w-[720px]">
        <div class="flex flex-col gap-2">
-          <h3 class="text-14-medium text-text-strong">Appearance</h3>
+          <h3 class="text-14-medium text-text-strong">{language.t("settings.permissions.section.tools")}</h3>
          <div class="border border-border-weak-base rounded-lg overflow-hidden">
            <For each={ITEMS}>
              {(item) => (
-                <SettingsRow title={item.title} description={item.description}>
+                <SettingsRow title={language.t(item.title)} description={language.t(item.description)}>
                  <Select
-                    options={ACTIONS}
-                    current={ACTIONS.find((o) => o.value === actionFor(item.id))}
+                    options={actions()}
+                    current={actions().find((o) => o.value === actionFor(item.id))}
                    value={(o) => o.value}
                    label={(o) => o.label}
                    onSelect={(option) => option && setPermission(item.id, option.value)}
--- a/packages/app/src/components/settings-providers.tsx
+++ b/packages/app/src/components/settings-providers.tsx
@@ -1,11 +1,14 @@
 import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"

 export const SettingsProviders: Component = () => {
+  const language = useLanguage()
+
  return (
    <div class="flex flex-col h-full overflow-y-auto">
      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
-        <h2 class="text-16-medium text-text-strong">Providers</h2>
-        <p class="text-14-regular text-text-weak">Provider settings will be configurable here.</p>
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.providers.description")}</p>
      </div>
    </div>
  )