feat(i18n): enhance localization support with new languages(zh-tw/ja)

app/components/layout/floating-language-switcher.tsx

@@ -1,8 +1,7 @@
 "use client"
 
-import { useLocale, useTranslations } from "next-intl"
-import { usePathname, useRouter } from "next/navigation"
-import { i18n } from "@/i18n/config"
+import { useLocaleSwitcher } from "@/hooks/use-locale-switcher"
+import { LOCALE_LABELS } from "@/i18n/config"
 import { Button } from "@/components/ui/button"
 import { Languages } from "lucide-react"
 import {
@@ -13,38 +12,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 
 export function FloatingLanguageSwitcher() {
-  const t = useTranslations("common")
-  const locale = useLocale()
-  const router = useRouter()
-  const pathname = usePathname()
-
-  const switchLocale = (newLocale: string) => {
-    if (newLocale === locale) return
-
-    document.cookie = `NEXT_LOCALE=${newLocale}; path=/; max-age=31536000`
-
-    const segments = pathname.split("/")
-    if (i18n.locales.includes(segments[1] as any)) {
-      segments[1] = newLocale
-    } else {
-      segments.splice(1, 0, newLocale)
-    }
-    const newPath = segments.join("/")
-
-    router.push(newPath)
-    router.refresh()
-  }
-
-  const getLanguageName = (loc: string) => {
-    switch (loc) {
-      case "en":
-        return "English"
-      case "zh-CN":
-        return "简体中文"
-      default:
-        return loc
-    }
-  }
+  const { locale, locales, switchLocale } = useLocaleSwitcher()
 
   return (
     <div className="fixed bottom-6 right-6 z-50">
@@ -54,19 +22,19 @@ export function FloatingLanguageSwitcher() {
             variant="outline"
             size="icon"
             className="bg-white dark:bg-background rounded-full shadow-lg group relative border-primary/20 hover:border-primary/40 transition-all"
+            aria-label="Switch language"
           >
             <Languages className="h-5 w-5 text-primary group-hover:scale-110 transition-transform" />
-            <span className="sr-only">{t("lang.switch")}</span>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" side="top" className="mb-2">
-          {i18n.locales.map((loc) => (
+          {locales.map((loc) => (
             <DropdownMenuItem
               key={loc}
               onClick={() => switchLocale(loc)}
               className={locale === loc ? "bg-accent" : ""}
             >
-              {getLanguageName(loc)}
+              {LOCALE_LABELS[loc]}
             </DropdownMenuItem>
           ))}
         </DropdownMenuContent>

app/components/layout/language-switcher.tsx

@@ -1,8 +1,7 @@
 "use client"
 
-import { useLocale, useTranslations } from "next-intl"
-import { usePathname, useRouter } from "next/navigation"
-import { i18n } from "@/i18n/config"
+import { useLocaleSwitcher } from "@/hooks/use-locale-switcher"
+import { LOCALE_LABELS } from "@/i18n/config"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,49 +12,25 @@ import { Button } from "@/components/ui/button"
 import { Languages } from "lucide-react"
 
 export function LanguageSwitcher() {
-  const t = useTranslations("common")
-  const locale = useLocale()
-  const router = useRouter()
-  const pathname = usePathname()
-
-  const switchLocale = (newLocale: string) => {
-    if (newLocale === locale) return
-
-    document.cookie = `NEXT_LOCALE=${newLocale}; path=/; max-age=31536000`
-
-    const segments = pathname.split("/")
-    if (i18n.locales.includes(segments[1] as any)) {
-      segments[1] = newLocale
-    } else {
-      segments.splice(1, 0, newLocale)
-    }
-    const newPath = segments.join("/")
-
-    router.push(newPath)
-    router.refresh()
-  }
+  const { locale, locales, switchLocale } = useLocaleSwitcher()
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" aria-label="Switch language">
           <Languages className="h-5 w-5" />
-          <span className="sr-only">{t("lang.switch")}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem
-          onClick={() => switchLocale("en")}
-          className={locale === "en" ? "bg-accent" : ""}
-        >
-          {t("lang.en")}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={() => switchLocale("zh-CN")}
-          className={locale === "zh-CN" ? "bg-accent" : ""}
-        >
-          {t("lang.zhCN")}
-        </DropdownMenuItem>
+        {locales.map((loc) => (
+          <DropdownMenuItem
+            key={loc}
+            onClick={() => switchLocale(loc)}
+            className={locale === loc ? "bg-accent" : ""}
+          >
+            {LOCALE_LABELS[loc]}
+          </DropdownMenuItem>
+        ))}
       </DropdownMenuContent>
     </DropdownMenu>
   )