feat: add runtime i18n with English, Vietnamese, and Simplified Chinese support

- Implement runtime i18n using MutationObserver for automatic DOM translation
- Add language switcher dropdown in dashboard header (EN/VI/ZH)
- Support 3 languages: English (default), Tiếng Việt, 简体中文
- Add translation files: vi.json (197 entries), zh-CN.json (513 entries, cleaned)
- Translate dashboard UI: sidebar menu, header, settings, MITM page
- Use cookie-based locale persistence with /api/locale endpoint
- Zero component changes required - translations applied at runtime
- Fix Header flicker on route change with key={pathname}

Co-authored-by: eachann <each1024@qq.com>
Based on PR #247 from decolua/9router with runtime approach

Made-with: Cursor

src/shared/components/Header.js

@@ -1,11 +1,13 @@
 "use client";
 
 import { usePathname, useRouter } from "next/navigation";
+import { useMemo } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import PropTypes from "prop-types";
-import { ThemeToggle } from "@/shared/components";
+import { ThemeToggle, LanguageSwitcher } from "@/shared/components";
 import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
+import { translate } from "@/i18n/runtime";
 
 const getPageInfo = (pathname) => {
   if (!pathname) return { title: "", description: "", breadcrumbs: [] };
@@ -43,7 +45,10 @@ const getPageInfo = (pathname) => {
 export default function Header({ onMenuClick, showMenuButton = true }) {
   const pathname = usePathname();
   const router = useRouter();
-  const { title, description, breadcrumbs } = getPageInfo(pathname);
+  
+  // Memoize page info to prevent unnecessary recalculations
+  const pageInfo = useMemo(() => getPageInfo(pathname), [pathname]);
+  const { title, description, breadcrumbs } = pageInfo;
 
   const handleLogout = async () => {
     try {
@@ -103,7 +108,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
                       />
                     )}
                     <h1 className="text-2xl font-semibold text-text-main tracking-tight">
-                      {crumb.label}
+                      {translate(crumb.label)}
                     </h1>
                   </div>
                 )}
@@ -112,9 +117,9 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
           </div>
         ) : title ? (
           <div>
-            <h1 className="text-2xl font-semibold text-text-main tracking-tight">{title}</h1>
+            <h1 className="text-2xl font-semibold text-text-main tracking-tight">{translate(title)}</h1>
             {description && (
-              <p className="text-sm text-text-muted">{description}</p>
+              <p className="text-sm text-text-muted">{translate(description)}</p>
             )}
           </div>
         ) : null}
@@ -122,6 +127,9 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
 
       {/* Right actions */}
       <div className="flex items-center gap-3 ml-auto">
+        {/* Language switcher */}
+        <LanguageSwitcher />
+
         {/* Theme toggle */}
         <ThemeToggle />