Add language switcher dropdown and persist manual locale choice.

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

app/about/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { LanguageSwitcher } from "~/components/language-switcher";
 import { useLocale } from "~/components/locale-provider";
 
 export default function AboutPage() {
@@ -8,12 +9,18 @@ export default function AboutPage() {
 
   return (
     <div
-      className="flex min-h-dvh flex-col bg-[#f8f7fc] px-5 py-10"
+      className="relative flex min-h-dvh flex-col bg-[#f8f7fc] px-5 py-10"
       style={{
         paddingTop: "max(2.5rem, calc(1.5rem + var(--safe-top)))",
         paddingBottom: "max(2.5rem, calc(1.5rem + var(--safe-bottom)))",
       }}
     >
+      <div
+        className="absolute right-4 z-10"
+        style={{ top: "max(1rem, calc(0.75rem + var(--safe-top)))" }}
+      >
+        <LanguageSwitcher />
+      </div>
       <div className="mx-auto w-full max-w-md">
         <h1 className="text-xl font-bold text-neutral-900">{t.about.title}</h1>
         <p className="mt-4 text-sm leading-relaxed text-neutral-600">

app/contact/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { LanguageSwitcher } from "~/components/language-switcher";
 import { useLocale } from "~/components/locale-provider";
 
 export default function ContactPage() {
@@ -8,12 +9,18 @@ export default function ContactPage() {
 
   return (
     <div
-      className="flex min-h-dvh flex-col bg-[#f8f7fc] px-5 py-10"
+      className="relative flex min-h-dvh flex-col bg-[#f8f7fc] px-5 py-10"
       style={{
         paddingTop: "max(2.5rem, calc(1.5rem + var(--safe-top)))",
         paddingBottom: "max(2.5rem, calc(1.5rem + var(--safe-bottom)))",
       }}
     >
+      <div
+        className="absolute right-4 z-10"
+        style={{ top: "max(1rem, calc(0.75rem + var(--safe-top)))" }}
+      >
+        <LanguageSwitcher />
+      </div>
       <div className="mx-auto w-full max-w-md">
         <h1 className="text-xl font-bold text-neutral-900">{t.contact.title}</h1>
         <p className="mt-4 text-sm leading-relaxed text-neutral-600">

app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Hero } from "~/components/sections/hero";
+import { LanguageSwitcher } from "~/components/language-switcher";
 import { useLocale } from "~/components/locale-provider";
 
 export default function HomePage() {
@@ -12,6 +13,12 @@ export default function HomePage() {
       className="flex min-h-dvh flex-col"
       style={{ minHeight: "100dvh" }}
     >
+      <div
+        className="absolute right-4 z-10"
+        style={{ top: "max(1rem, calc(0.75rem + var(--safe-top)))" }}
+      >
+        <LanguageSwitcher />
+      </div>
       <main className="flex flex-1 flex-col">
         <Hero />
       </main>

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>
+  );
+}

components/locale-provider.tsx

@@ -2,6 +2,7 @@
 
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -11,32 +12,47 @@ import {
 import { isChinaUser } from "is-china-user";
 import { dictionaries, type Dictionary, type Locale } from "~/lib/i18n";
 
+const STORAGE_KEY = "nomadro-locale";
+
 type LocaleContextValue = {
   locale: Locale;
   isChina: boolean;
   ready: boolean;
   t: Dictionary;
+  setLocale: (locale: Locale) => void;
 };
 
 const LocaleContext = createContext<LocaleContextValue | null>(null);
 
+function isLocale(value: string | null): value is Locale {
+  return value === "zh" || value === "en";
+}
+
 export function LocaleProvider({ children }: { children: ReactNode }) {
-  // Default zh to match primary audience; switch after client detection.
+  const [locale, setLocaleState] = useState<Locale>("zh");
-  const [locale, setLocale] = useState<Locale>("zh");
   const [ready, setReady] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
 
     try {
+      const saved = window.localStorage.getItem(STORAGE_KEY);
+      if (isLocale(saved)) {
+        if (!cancelled) {
+          setLocaleState(saved);
+          setReady(true);
+        }
+        return;
+      }
+
       const china = Boolean(isChinaUser());
       if (!cancelled) {
-        setLocale(china ? "zh" : "en");
+        setLocaleState(china ? "zh" : "en");
         setReady(true);
       }
     } catch {
       if (!cancelled) {
-        setLocale("zh");
+        setLocaleState("zh");
         setReady(true);
       }
     }
@@ -51,14 +67,24 @@ export function LocaleProvider({ children }: { children: ReactNode }) {
     document.documentElement.lang = dictionaries[locale].htmlLang;
   }, [locale, ready]);
 
+  const setLocale = useCallback((next: Locale) => {
+    setLocaleState(next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+      // ignore storage failures
+    }
+  }, []);
+
   const value = useMemo<LocaleContextValue>(
     () => ({
       locale,
       isChina: locale === "zh",
       ready,
       t: dictionaries[locale],
+      setLocale,
     }),
-    [locale, ready],
+    [locale, ready, setLocale],
   );
 
   return (

lib/i18n.ts

@@ -12,6 +12,7 @@ export type Dictionary = {
   heroTagline: string;
   heroTaglineLine2: string;
   copyright: string;
+  languageLabel: string;
   liveBadge: string;
   entryCards: Record<string, EntryCardCopy>;
   about: {
@@ -35,6 +36,7 @@ export const dictionaries: Record<Locale, Dictionary> = {
     heroTagline: "游民导航 · 地理套利 · 直播工具箱",
     heroTaglineLine2: "一站开启自由生活",
     copyright: "© {year} Nomadro",
+    languageLabel: "语言",
     liveBadge: "LIVE",
     entryCards: {
       nav: {
@@ -72,6 +74,7 @@ export const dictionaries: Record<Locale, Dictionary> = {
     heroTagline: "Nomad Nav · Geo Arbitrage · Live Toolkit",
     heroTaglineLine2: "Your freedom lifestyle, in one place",
     copyright: "© {year} Nomadro",
+    languageLabel: "Language",
     liveBadge: "LIVE",
     entryCards: {
       nav: {