feat(webui): add i18n support and locale switcher

webui/src/components/ConnectionBadge.tsx

@@ -1,34 +1,31 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
 import { useClient } from "@/providers/ClientProvider";
 import type { ConnectionStatus } from "@/lib/types";
 
-const COPY: Record<ConnectionStatus, { label: string; color: string }> = {
-  idle: { label: "Idle", color: "bg-card/40 text-muted-foreground" },
+const COPY: Record<ConnectionStatus, { color: string }> = {
+  idle: { color: "bg-card/40 text-muted-foreground" },
   connecting: {
-    label: "Connecting…",
     color: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
   },
   open: {
-    label: "Connected",
     color: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
   },
   reconnecting: {
-    label: "Reconnecting…",
     color: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
   },
   closed: {
-    label: "Disconnected",
     color: "bg-card/40 text-muted-foreground",
   },
   error: {
-    label: "Connection error",
     color: "bg-destructive/10 text-destructive",
   },
 };
 
 export function ConnectionBadge() {
+  const { t } = useTranslation();
   const { client } = useClient();
   const [status, setStatus] = useState<ConnectionStatus>(client.status);
 
@@ -53,7 +50,7 @@ export function ConnectionBadge() {
         )}
         <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
       </span>
-      {meta.label}
+      {t(`connection.${status}`)}
     </span>
   );
 }