fix(i18n): refresh server chrome on locale switch

src/app/[locale]/dashboard/_components/dashboard-header.tsx

@@ -1,4 +1,4 @@
-import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
 import { VersionUpdateNotifier } from "@/components/customs/version-update-notifier";
 import { Button } from "@/components/ui/button";
 import { LanguageSwitcher } from "@/components/ui/language-switcher";
@@ -11,10 +11,11 @@ import { UserMenu } from "./user-menu";
 
 interface DashboardHeaderProps {
   session: AuthSession | null;
+  locale: string;
 }
 
-export function DashboardHeader({ session }: DashboardHeaderProps) {
-  const t = useTranslations("dashboard.nav");
+export async function DashboardHeader({ session, locale }: DashboardHeaderProps) {
+  const t = await getTranslations({ locale, namespace: "dashboard.nav" });
   const isAdmin = session?.user.role === "admin";
 
   const NAV_ITEMS: (DashboardNavItem & { adminOnly?: boolean })[] = [

src/app/[locale]/dashboard/_components/dashboard-sections.tsx

@@ -32,15 +32,21 @@ export async function DashboardStatisticsSection() {
   );
 }
 
-export async function DashboardLeaderboardSection({ isAdmin }: { isAdmin: boolean }) {
+export async function DashboardLeaderboardSection({
+  isAdmin,
+  locale,
+}: {
+  isAdmin: boolean;
+  locale: string;
+}) {
   const systemSettings = await getCachedSystemSettings();
   const canViewLeaderboard = isAdmin || systemSettings.allowGlobalUsageView;
 
   if (!canViewLeaderboard) {
     return null;
   }
 
-  const t = await getTranslations("dashboard");
+  const t = await getTranslations({ locale, namespace: "dashboard" });
 
   return (
     <div className="space-y-4">

src/app/[locale]/dashboard/audit-logs/page.tsx

@@ -17,7 +17,7 @@ export default async function AuditLogsPage({ params }: { params: Promise<{ loca
     return redirect({ href: "/dashboard", locale });
   }
 
-  const t = await getTranslations("auditLogs");
+  const t = await getTranslations({ locale, namespace: "auditLogs" });
 
   return (
     <div className="space-y-6">

src/app/[locale]/dashboard/availability/page.tsx

@@ -10,8 +10,13 @@ import { AvailabilityDashboardSkeleton } from "./_components/availability-skelet
 
 export const dynamic = "force-dynamic";
 
-export default async function AvailabilityPage() {
-  const t = await getTranslations("dashboard");
+export default async function AvailabilityPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "dashboard" });
   const session = await getSession();
 
   // Only admin can access availability monitoring

src/app/[locale]/dashboard/layout.tsx

@@ -28,7 +28,7 @@ export default async function DashboardLayout({
 
   return (
     <div className="min-h-[var(--cch-viewport-height,100vh)] bg-background">
-      <DashboardHeader session={session} />
+      <DashboardHeader session={session} locale={locale} />
       <DashboardMain>{children}</DashboardMain>
       <WebhookMigrationDialog />
     </div>

src/app/[locale]/dashboard/leaderboard/page.tsx

@@ -10,8 +10,9 @@ import { LeaderboardView } from "./_components/leaderboard-view";
 
 export const dynamic = "force-dynamic";
 
-export default async function LeaderboardPage() {
-  const t = await getTranslations("dashboard");
+export default async function LeaderboardPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "dashboard" });
   // 获取用户 session 和系统设置
   const session = await getSession();
   const systemSettings = await getSystemSettings();

src/app/[locale]/dashboard/my-quota/page.tsx

@@ -9,13 +9,13 @@ export const dynamic = "force-dynamic";
 
 export default async function MyQuotaPage({ params }: { params: Promise<{ locale: string }> }) {
   // Await params to ensure locale is available in the async context
-  await params;
+  const { locale } = await params;
 
   const [quotaResult, systemSettings, tNav, tCommon] = await Promise.all([
     getMyQuota(),
     getSystemSettings(),
-    getTranslations("dashboard.nav"),
-    getTranslations("common"),
+    getTranslations({ locale, namespace: "dashboard.nav" }),
+    getTranslations({ locale, namespace: "common" }),
   ]);
 
   // Handle error state

src/app/[locale]/dashboard/providers/page.tsx

@@ -30,7 +30,7 @@ export default async function DashboardProvidersPage({
   // TypeScript: session is guaranteed to be non-null after the redirect check
   const currentUser = session!.user;
 
-  const t = await getTranslations("settings");
+  const t = await getTranslations({ locale, namespace: "settings" });
   const providers = await getProviders();
 
   return (

src/app/[locale]/dashboard/quotas/layout.tsx

@@ -2,8 +2,15 @@ import { getTranslations } from "next-intl/server";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Link } from "@/i18n/routing";
 
-export default async function QuotasLayout({ children }: { children: React.ReactNode }) {
-  const t = await getTranslations("quota.layout");
+export default async function QuotasLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "quota.layout" });
 
   return (
     <div className="space-y-6">

src/app/[locale]/dashboard/quotas/providers/page.tsx

@@ -53,7 +53,7 @@ export default async function ProvidersQuotaPage({
     redirect({ href: session ? "/dashboard/my-quota" : "/login", locale });
   }
 
-  const t = await getTranslations("quota.providers");
+  const t = await getTranslations({ locale, namespace: "quota.providers" });
 
   return (
     <div className="space-y-4">
@@ -64,18 +64,18 @@ export default async function ProvidersQuotaPage({
       </div>
 
       <Suspense fallback={<ProvidersQuotaSkeleton />}>
-        <ProvidersQuotaContent />
+        <ProvidersQuotaContent locale={locale} />
       </Suspense>
     </div>
   );
 }
 
-async function ProvidersQuotaContent() {
+async function ProvidersQuotaContent({ locale }: { locale: string }) {
   const [providers, systemSettings] = await Promise.all([
     getProvidersWithQuotas(),
     getSystemSettings(),
   ]);
-  const t = await getTranslations("quota.providers");
+  const t = await getTranslations({ locale, namespace: "quota.providers" });
 
   return (
     <div className="space-y-3">

src/app/[locale]/dashboard/quotas/users/page.tsx

@@ -129,7 +129,7 @@ export default async function UsersQuotaPage({ params }: { params: Promise<{ loc
     return redirect({ href: session ? "/dashboard/my-quota" : "/login", locale });
   }
 
-  const t = await getTranslations("quota.users");
+  const t = await getTranslations({ locale, namespace: "quota.users" });
 
   return (
     <div className="space-y-4">
@@ -162,15 +162,15 @@ export default async function UsersQuotaPage({ params }: { params: Promise<{ loc
       />
 
       <Suspense fallback={<UsersQuotaSkeleton />}>
-        <UsersQuotaContent />
+        <UsersQuotaContent locale={locale} />
       </Suspense>
     </div>
   );
 }
 
-async function UsersQuotaContent() {
+async function UsersQuotaContent({ locale }: { locale: string }) {
   const [users, systemSettings] = await Promise.all([getUsersWithQuotas(), getSystemSettings()]);
-  const t = await getTranslations("quota.users");
+  const t = await getTranslations({ locale, namespace: "quota.users" });
 
   return (
     <div className="space-y-3">

src/app/[locale]/dashboard/rate-limits/page.tsx

@@ -17,7 +17,7 @@ export default async function RateLimitsPage({ params }: { params: Promise<{ loc
     return redirect({ href: "/dashboard", locale });
   }
 
-  const t = await getTranslations("dashboard.rateLimits");
+  const t = await getTranslations({ locale, namespace: "dashboard.rateLimits" });
 
   return (
     <div className="space-y-6">

src/app/[locale]/settings/_lib/nav-items.ts

@@ -108,8 +108,8 @@ export const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
 ];
 
 // Helper function to get translated nav items
-export async function getTranslatedNavItems(): Promise<SettingsNavItem[]> {
-  const t = await getTranslations("settings");
+export async function getTranslatedNavItems(locale: string): Promise<SettingsNavItem[]> {
+  const t = await getTranslations({ locale, namespace: "settings" });
   return SETTINGS_NAV_ITEMS.map((item) => ({
     ...item,
     label: item.labelKey ? t(item.labelKey) : item.label,

src/app/[locale]/settings/client-versions/page.tsx

@@ -21,7 +21,7 @@ export default async function ClientVersionsPage({
   // Await params to ensure locale is available in the async context
   const { locale } = await params;
 
-  const t = await getTranslations("settings");
+  const t = await getTranslations({ locale, namespace: "settings" });
   const session = await getSession();
 
   if (!session || session.user.role !== "admin") {
@@ -55,7 +55,7 @@ export default async function ClientVersionsPage({
         iconColor="text-[#E25706]"
       >
         <Suspense fallback={<ClientVersionsTableSkeleton />}>
-          <ClientVersionsStatsContent />
+          <ClientVersionsStatsContent locale={locale} />
         </Suspense>
       </SettingsSection>
     </div>
@@ -71,8 +71,8 @@ async function ClientVersionsSettingsContent() {
   return <ClientVersionToggle enabled={enableClientVersionCheck} />;
 }
 
-async function ClientVersionsStatsContent() {
-  const t = await getTranslations("settings");
+async function ClientVersionsStatsContent({ locale }: { locale: string }) {
+  const t = await getTranslations({ locale, namespace: "settings" });
   const statsResult = await fetchClientVersionStats();
   const stats = statsResult.ok ? statsResult.data : [];
 

src/app/[locale]/settings/config/page.tsx

@@ -9,8 +9,13 @@ import { SystemSettingsForm } from "./_components/system-settings-form";
 
 export const dynamic = "force-dynamic";
 
-export default async function SettingsConfigPage() {
-  const t = await getTranslations("settings");
+export default async function SettingsConfigPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "settings" });
 
   return (
     <>
@@ -20,14 +25,14 @@ export default async function SettingsConfigPage() {
         icon="settings"
       />
       <Suspense fallback={<SettingsConfigSkeleton />}>
-        <SettingsConfigContent />
+        <SettingsConfigContent locale={locale} />
       </Suspense>
     </>
   );
 }
 
-async function SettingsConfigContent() {
-  const t = await getTranslations("settings");
+async function SettingsConfigContent({ locale }: { locale: string }) {
+  const t = await getTranslations({ locale, namespace: "settings" });
   const settings = await getSystemSettings();
 
   return (

src/app/[locale]/settings/error-rules/page.tsx

@@ -12,8 +12,9 @@ import { RuleListTable } from "./_components/rule-list-table";
 
 export const dynamic = "force-dynamic";
 
-export default async function ErrorRulesPage() {
-  const t = await getTranslations("settings");
+export default async function ErrorRulesPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "settings" });
 
   return (
     <>

src/app/[locale]/settings/layout.tsx

@@ -28,11 +28,11 @@ export default async function SettingsLayout({
   }
 
   // Get translated navigation items
-  const translatedNavItems = await getTranslatedNavItems();
+  const translatedNavItems = await getTranslatedNavItems(locale);
 
   return (
     <div className="min-h-[var(--cch-viewport-height,100vh)] bg-background">
-      <DashboardHeader session={session} />
+      <DashboardHeader session={session} locale={locale} />
       <main className="mx-auto w-full max-w-7xl px-4 py-6 md:px-6 md:py-8 pb-24 md:pb-8">
         <div className="space-y-6">
           {/* Desktop: Grid layout with sidebar */}

src/app/[locale]/settings/logs/page.tsx

@@ -5,8 +5,13 @@ import { LogLevelForm } from "./_components/log-level-form";
 
 export const dynamic = "force-dynamic";
 
-export default async function SettingsLogsPage() {
-  const t = await getTranslations("settings");
+export default async function SettingsLogsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "settings" });
 
   return (
     <>

src/app/[locale]/settings/prices/page.tsx

@@ -11,20 +11,29 @@ import { UploadPriceDialog } from "./_components/upload-price-dialog";
 
 export const dynamic = "force-dynamic";
 
+type SettingsPricesSearchParams = {
+  required?: string;
+  page?: string;
+  pageSize?: string;
+  size?: string;
+  search?: string;
+  source?: string;
+  litellmProvider?: string;
+};
+
 interface SettingsPricesPageProps {
-  searchParams: Promise<{
-    required?: string;
-    page?: string;
-    pageSize?: string;
-    size?: string;
-    search?: string;
-    source?: string;
-    litellmProvider?: string;
+  params: Promise<{
+    locale: string;
   }>;
+  searchParams: Promise<SettingsPricesSearchParams>;
 }
 
-export default async function SettingsPricesPage({ searchParams }: SettingsPricesPageProps) {
-  const t = await getTranslations("settings");
+export default async function SettingsPricesPage({
+  params,
+  searchParams,
+}: SettingsPricesPageProps) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "settings" });
 
   return (
     <>
@@ -34,14 +43,20 @@ export default async function SettingsPricesPage({ searchParams }: SettingsPrice
         icon="dollar-sign"
       />
       <Suspense fallback={<PricesSkeleton />}>
-        <SettingsPricesContent searchParams={searchParams} />
+        <SettingsPricesContent locale={locale} searchParams={searchParams} />
       </Suspense>
     </>
   );
 }
 
-async function SettingsPricesContent({ searchParams }: SettingsPricesPageProps) {
-  const t = await getTranslations("settings");
+async function SettingsPricesContent({
+  locale,
+  searchParams,
+}: {
+  locale: string;
+  searchParams: Promise<SettingsPricesSearchParams>;
+}) {
+  const t = await getTranslations({ locale, namespace: "settings" });
   const params = await searchParams;
 
   // 解析分页参数

src/app/[locale]/settings/providers/page.tsx

@@ -14,8 +14,13 @@ import { SchedulingRulesDialog } from "./_components/scheduling-rules-dialog";
 
 export const dynamic = "force-dynamic";
 
-export default async function SettingsProvidersPage() {
-  const t = await getTranslations("settings");
+export default async function SettingsProvidersPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "settings" });
   const session = await getSession();
   const providers = await getProviders();