wip(app): i18n

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>