Add language switcher dropdown and persist manual locale choice.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/language-switcher.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useLocale } from "~/components/locale-provider";
+import type { Locale } from "~/lib/i18n";
+
+const OPTIONS: { value: Locale; label: string }[] = [
+  { value: "zh", label: "中文" },
+  { value: "en", label: "English" },
+];
+
+export function LanguageSwitcher({ className = "" }: { className?: string }) {
+  const { locale, setLocale, t } = useLocale();
+
+  return (
+    <label
+      className={`inline-flex items-center gap-2 text-xs text-neutral-500 ${className}`}
+    >
+      <span className="sr-only">{t.languageLabel}</span>
+      <select
+        value={locale}
+        onChange={(event) => setLocale(event.target.value as Locale)}
+        aria-label={t.languageLabel}
+        className="appearance-none rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 pr-7 text-xs font-medium text-neutral-700 shadow-sm outline-none transition hover:border-neutral-300 focus:border-neutral-400"
+        style={{
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "right 0.55rem center",
+        }}
+      >
+        {OPTIONS.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}