feat(webui): add i18n support and locale switcher

2026-04-19 06:39:06 +00:00
parent be10ba1f0d
commit 4650b23d75
34 changed files with 6654 additions and 65 deletions
@@ -0,0 +1,67 @@
+import { Globe } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { setAppLanguage } from "@/i18n";
+import {
+  currentLocale,
+} from "@/i18n";
+import {
+  localeOption,
+  supportedLocales,
+  type SupportedLocale,
+} from "@/i18n/config";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function LanguageSwitcher() {
+  const { t } = useTranslation();
+  const locale = currentLocale();
+  const selected = localeOption(locale);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          aria-label={t("sidebar.language.ariaLabel")}
+          className="h-7 gap-1.5 rounded-md px-2 text-[11px] text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground"
+        >
+          <Globe className="h-3.5 w-3.5" />
+          <span className="max-w-[7rem] truncate">{selected.nativeLabel}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>{t("sidebar.language.label")}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup
+          value={locale}
+          onValueChange={(value) => {
+            void setAppLanguage(value as SupportedLocale);
+          }}
+        >
+          {supportedLocales.map((option) => (
+            <DropdownMenuRadioItem key={option.code} value={option.code}>
+              <span className="flex min-w-0 items-center gap-2">
+                <span>{option.nativeLabel}</span>
+                {option.nativeLabel !== option.label ? (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {option.label}
+                  </span>
+                ) : null}
+              </span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}