wip(app): i18n

packages/app/src/components/dialog-select-model.tsx

@@ -9,6 +9,7 @@ import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { DialogSelectProvider } from "./dialog-select-provider"
 import { DialogManageModels } from "./dialog-manage-models"
+import { useLanguage } from "@/context/language"
 
 const ModelList: Component<{
   provider?: string
@@ -16,6 +17,7 @@ const ModelList: Component<{
   onSelect: () => void
 }> = (props) => {
   const local = useLocal()
+  const language = useLanguage()
 
   const models = createMemo(() =>
     local.model
@@ -27,8 +29,8 @@ const ModelList: Component<{
   return (
     <List
       class={`flex-1 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
-      search={{ placeholder: "Search models", autofocus: true }}
-      emptyMessage="No model results"
+      search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true }}
+      emptyMessage={language.t("dialog.model.empty")}
       key={(x) => `${x.provider.id}:${x.id}`}
       items={models}
       current={local.model.current()}
@@ -55,10 +57,10 @@ const ModelList: Component<{
         <div class="w-full flex items-center gap-x-2 text-13-regular">
           <span class="truncate">{i.name}</span>
           <Show when={i.provider.id === "opencode" && (!i.cost || i.cost?.input === 0)}>
-            <Tag>Free</Tag>
+            <Tag>{language.t("model.tag.free")}</Tag>
           </Show>
           <Show when={i.latest}>
-            <Tag>Latest</Tag>
+            <Tag>{language.t("model.tag.latest")}</Tag>
           </Show>
         </div>
       )}
@@ -71,13 +73,14 @@ export const ModelSelectorPopover: Component<{
   children: JSX.Element
 }> = (props) => {
   const [open, setOpen] = createSignal(false)
+  const language = useLanguage()
 
   return (
     <Kobalte open={open()} onOpenChange={setOpen} placement="top-start" gutter={8}>
       <Kobalte.Trigger as="div">{props.children}</Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden">
-          <Kobalte.Title class="sr-only">Select model</Kobalte.Title>
+          <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
           <ModelList provider={props.provider} onSelect={() => setOpen(false)} class="p-1" />
         </Kobalte.Content>
       </Kobalte.Portal>
@@ -87,10 +90,11 @@ export const ModelSelectorPopover: Component<{
 
 export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
   const dialog = useDialog()
+  const language = useLanguage()
 
   return (
     <Dialog
-      title="Select model"
+      title={language.t("dialog.model.select.title")}
       action={
         <Button
           class="h-7 -my-1 text-14-medium"
@@ -98,7 +102,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
           tabIndex={-1}
           onClick={() => dialog.show(() => <DialogSelectProvider />)}
         >
-          Connect provider
+          {language.t("command.provider.connect")}
         </Button>
       }
     >
@@ -108,7 +112,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
         class="ml-3 mt-5 mb-6 text-text-base self-start"
         onClick={() => dialog.show(() => <DialogManageModels />)}
       >
-        Manage models
+        {language.t("dialog.model.manage")}
       </Button>
     </Dialog>
   )