feat(stats): add i18n support (#33693)

packages/stats/app/src/context/i18n.tsx

@@ -0,0 +1,27 @@
+import { createMemo } from "solid-js"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { dict, type Key } from "../i18n"
+import { useLanguage } from "./language"
+
+function resolve(text: string, params?: Record<string, string | number>) {
+  if (!params) return text
+  return text.replace(/\{\{(\w+)\}\}/g, (raw, key) => {
+    const value = params[key]
+    if (value === undefined || value === null) return raw
+    return String(value)
+  })
+}
+
+export const { use: useI18n, provider: I18nProvider } = createSimpleContext({
+  name: "StatsI18n",
+  init: () => {
+    const language = useLanguage()
+    const dictionary = createMemo(() => dict(language.locale()))
+
+    return {
+      t(key: Key, params?: Record<string, string | number>) {
+        return resolve(dictionary()[key], params)
+      },
+    }
+  },
+})

packages/stats/app/src/context/language.tsx

@@ -0,0 +1,61 @@
+import { createEffect } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import {
+  LOCALES,
+  detectFromLanguages,
+  dir,
+  label,
+  localeFromCookieHeader,
+  localeFromRequest,
+  parseLocale,
+  route,
+  tag,
+  type Locale,
+} from "../lib/language"
+
+function initial() {
+  const event = getRequestEvent()
+  if (event) return localeFromRequest(event.request)
+
+  if (typeof document === "object") {
+    const fromDom = parseLocale(document.documentElement.dataset.locale)
+    if (fromDom) return fromDom
+    const fromCookie = localeFromCookieHeader(document.cookie)
+    if (fromCookie) return fromCookie
+  }
+
+  if (typeof navigator !== "object") return "en" satisfies Locale
+  const languages = navigator.languages?.length ? navigator.languages : [navigator.language]
+  return detectFromLanguages(languages)
+}
+
+export const { use: useLanguage, provider: LanguageProvider } = createSimpleContext({
+  name: "StatsLanguage",
+  init: () => {
+    const [store, setStore] = createStore({
+      locale: initial(),
+    })
+
+    createEffect(() => {
+      document.documentElement.lang = tag(store.locale)
+      document.documentElement.dir = dir(store.locale)
+      document.documentElement.dataset.locale = store.locale
+    })
+
+    return {
+      locale: () => store.locale,
+      locales: LOCALES,
+      label,
+      tag,
+      dir,
+      route(pathname: string) {
+        return route(store.locale, pathname)
+      },
+      setLocale(next: Locale) {
+        setStore("locale", next)
+      },
+    }
+  },
+})