From d05a13d7fccd01be90e035be6ed397a020d01a44 Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Mon, 27 Apr 2026 18:19:37 +0800
Subject: [PATCH] feat(i18n): integrate LanguageSwitcher into landing nav and
 theme panel

---
 src/app/i18n-demo/page.tsx             | 63 ++++++++++++++++++++++++++
 src/components/landing/landing-nav.tsx |  2 +
 src/components/room/ThemeSwitcher.tsx  |  4 ++
 3 files changed, 69 insertions(+)
 create mode 100644 src/app/i18n-demo/page.tsx

diff --git a/src/app/i18n-demo/page.tsx b/src/app/i18n-demo/page.tsx
new file mode 100644
index 0000000..1558b4b
--- /dev/null
+++ b/src/app/i18n-demo/page.tsx
@@ -0,0 +1,63 @@
+import {useTranslation} from 'react-i18next';
+import {LanguageSwitcher} from '@/components/shared/LanguageSwitcher';
+
+export default function I18nDemo() {
+  const {t} = useTranslation();
+
+  return (
+    <div className="container mx-auto py-10 space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">i18n Demo</h1>
+        <LanguageSwitcher />
+      </div>
+
+      {/* Basic usage */}
+      <section className="space-y-2">
+        <h2 className="text-xl font-semibold">Basic Translation</h2>
+        <div className="rounded-lg border p-4 space-y-2">
+          <p>{t('shared.loading')}</p>
+          <p>{t('shared.error')}</p>
+          <p>{t('shared.success')}</p>
+        </div>
+      </section>
+
+      {/* Interpolation */}
+      <section className="space-y-2">
+        <h2 className="text-xl font-semibold">Interpolation</h2>
+        <div className="rounded-lg border p-4 space-y-2">
+          <p>{t('project.issueDetail.openedBy', {user: 'Alice'})}</p>
+          <p>{t('notification.unreadTotal', {unread: 5, total: 23})}</p>
+          <p>{t('repository.list.showing', {start: 1, end: 10, total: 100})}</p>
+        </div>
+      </section>
+
+      {/* Pluralization */}
+      <section className="space-y-2">
+        <h2 className="text-xl font-semibold">Plural (count: 0)</h2>
+        <div className="rounded-lg border p-4 space-y-2">
+          <p>{t('workspace.members.totalMembers', {count: 0})}</p>
+          <p>{t('workspace.members.totalMembers', {count: 1})}</p>
+          <p>{t('workspace.members.totalMembers', {count: 5})}</p>
+        </div>
+      </section>
+
+      {/* Nested keys */}
+      <section className="space-y-2">
+        <h2 className="text-xl font-semibold">Nested Keys</h2>
+        <div className="rounded-lg border p-4 space-y-2">
+          <p>{t('landing.hero.heading')}</p>
+          <p>{t('auth.login.heading')}</p>
+          <p>{t('project.issues.new')}</p>
+        </div>
+      </section>
+
+      {/* Arrays */}
+      <section className="space-y-2">
+        <h2 className="text-xl font-semibold">Array Values</h2>
+        <div className="rounded-lg border p-4 space-y-2">
+          <p>{t('landing.features.sectionTitle')}</p>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/landing/landing-nav.tsx b/src/components/landing/landing-nav.tsx
index 17bcf48..3200188 100644
--- a/src/components/landing/landing-nav.tsx
+++ b/src/components/landing/landing-nav.tsx
@@ -1,5 +1,6 @@
 import {useEffect, useRef, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
+import {LanguageSwitcher} from '@/components/shared/LanguageSwitcher';
 
 const POP_ITEMS = {
     Platform: [
@@ -94,6 +95,7 @@ export function LandingNav() {
 
                 {/* Actions */}
                 <div className="flex items-center gap-2">
+                    <LanguageSwitcher />
                     <button onClick={() => navigate('/auth/login')}
                             className="h-8 px-4 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors rounded-full">
                         Sign in
diff --git a/src/components/room/ThemeSwitcher.tsx b/src/components/room/ThemeSwitcher.tsx
index 5b6f55e..476afad 100644
--- a/src/components/room/ThemeSwitcher.tsx
+++ b/src/components/room/ThemeSwitcher.tsx
@@ -25,6 +25,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sh
 import { cn } from '@/lib/utils';
 import { useTheme } from '@/contexts';
 import { Check, RotateCcw, Sliders } from 'lucide-react';
+import {LanguageSwitcher} from '@/components/shared/LanguageSwitcher';
 
 // ─── Token definitions ───────────────────────────────────────────────────────
 
@@ -304,6 +305,9 @@ export function ThemeSwitcher({ open, onOpenChange }: ThemeSwitcherProps) {
             <Sliders className="h-4 w-4" />
             Theme Settings
           </SheetTitle>
+          <div className="flex items-center gap-2 pt-1">
+            <LanguageSwitcher />
+          </div>
         </SheetHeader>
 
         {/* ── Scrollable content with padding ─────────────────────────────── */}