refactor: streamline navigation and localization handling in ProblemPage

- Replace Link components with onClick handlers for navigation to improve performance and reduce unnecessary re-renders.
- Introduce localStorage support for locale management in I18nContext, allowing users to persist their language preference across sessions.
- Update locale initialization logic to prioritize localStorage values, enhancing user experience by maintaining language settings.

This refactor enhances the usability of the ProblemPage and improves the localization experience for users.

Change-Id: I5cf67f93f25324b5e5b1d2b48cd8c737b2c18e80
Co-developed-by: Cursor <noreply@cursor.com>
Signed-off-by: 张星宇 <neil.zxy@alibaba-inc.com>

Author: 张星宇

pages/problems/[id].tsx

@@ -1,30 +1,23 @@
 import { useRouter } from 'next/router';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { 
-  Container, 
-  Grid, 
   Title, 
   Paper, 
   Text, 
   Badge, 
   Group, 
   Stack, 
-  Divider,
-  Breadcrumbs,
-  Anchor,
   Code,
   Button,
   Collapse,
   Loader,
   Alert,
   Center,
   AppShell,
-  Box,
   Tabs,
   Select
 } from '@mantine/core';
 import dynamic from 'next/dynamic';
-import Link from 'next/link';
 import { useTranslation, useI18n } from '../../src/contexts/I18nContext';
 import { useTheme } from '../../src/contexts/ThemeContext';
 import { LanguageThemeControls } from '../../src/components/LanguageThemeControls';
@@ -130,23 +123,23 @@ export default function ProblemPage() {
         <AppShell.Header>
           <Stack gap="xs" h="100%" justify="center" px="md">
             <Group justify="space-between" align="flex-start">
-              <Link href="/" style={{ textDecoration: 'none', color: 'inherit' }}>
-                <div style={{ cursor: 'pointer' }}>
-                  <Title order={2} mb={4}>{t('homepage.title')}</Title>
-                  <Text size="sm" c="dimmed">{t('homepage.subtitle')}</Text>
-                </div>
-              </Link>
+              <div 
+                style={{ cursor: 'pointer' }}
+                onClick={() => router.push('/')}
+              >
+                <Title order={2} mb={4}>{t('homepage.title')}</Title>
+                <Text size="sm" c="dimmed">{t('homepage.subtitle')}</Text>
+              </div>
               <Group>
-                <Link href="/add-problem">
-                  <Badge 
-                    size="lg" 
-                    variant="outline" 
-                    color="blue" 
-                    style={{ cursor: 'pointer', padding: '8px 16px' }}
-                  >
-                    + {t('homepage.addProblem')}
-                  </Badge>
-                </Link>
+                <Badge 
+                  size="lg" 
+                  variant="outline" 
+                  color="blue" 
+                  style={{ cursor: 'pointer', padding: '8px 16px' }}
+                  onClick={() => router.push('/add-problem')}
+                >
+                  + {t('homepage.addProblem')}
+                </Badge>
                 <LanguageThemeControls />
               </Group>
             </Group>
@@ -174,23 +167,32 @@ export default function ProblemPage() {
         <AppShell.Header>
           <Stack gap="xs" h="100%" justify="center" px="md">
             <Group justify="space-between" align="flex-start">
-              <Link href="/" style={{ textDecoration: 'none', color: 'inherit' }}>
-                <div style={{ cursor: 'pointer' }}>
-                  <Title order={2} mb={4}>{t('homepage.title')}</Title>
-                  <Text size="sm" c="dimmed">{t('homepage.subtitle')}</Text>
-                </div>
-              </Link>
+              <div 
+                style={{ cursor: 'pointer' }}
+                onClick={() => router.push('/')}
+              >
+                <Title order={2} mb={4}>{t('homepage.title')}</Title>
+                <Text size="sm" c="dimmed">{t('homepage.subtitle')}</Text>
+              </div>
               <Group>
-                <Link href="/add-problem">
-                  <Badge 
-                    size="lg" 
-                    variant="outline" 
-                    color="blue" 
-                    style={{ cursor: 'pointer', padding: '8px 16px' }}
-                  >
-                    + {t('homepage.addProblem')}
-                  </Badge>
-                </Link>
+                <Badge 
+                  size="lg" 
+                  variant="outline" 
+                  color="gray" 
+                  style={{ cursor: 'pointer', padding: '8px 16px' }}
+                  onClick={() => router.push('/')}
+                >
+                  ← {t('common.home')}
+                </Badge>
+                <Badge 
+                  size="lg" 
+                  variant="outline" 
+                  color="blue" 
+                  style={{ cursor: 'pointer', padding: '8px 16px' }}
+                  onClick={() => router.push('/add-problem')}
+                >
+                  + {t('homepage.addProblem')}
+                </Badge>
                 <LanguageThemeControls />
               </Group>
             </Group>
@@ -361,19 +363,6 @@ export default function ProblemPage() {
     );
   };
 
-  const breadcrumbItems = [
-    { title: t('common.home'), href: '/' },
-    { title: problem.title[locale as keyof typeof problem.title] || problem.title.zh, href: '#' }
-  ].map((item, index) => (
-    item.href === '#' ? (
-      <Text key={index}>{item.title}</Text>
-    ) : (
-      <Anchor component={Link} href={item.href} key={index}>
-        {item.title}
-      </Anchor>
-    )
-  ));
-
   return (
     <AppShell
       header={{ height: 80 }}
@@ -383,33 +372,32 @@ export default function ProblemPage() {
       <AppShell.Header>
         <Stack gap="xs" h="100%" justify="center" px="md">
           <Group justify="space-between" align="flex-start">
-            <Link href="/" style={{ textDecoration: 'none', color: 'inherit' }}>
-              <div style={{ cursor: 'pointer' }}>
-                <Title order={2} mb={4}>{t('homepage.title')}</Title>
-                <Text size="sm" c="dimmed">{t('homepage.subtitle')}</Text>
-              </div>
-            </Link>
+            <div 
+              style={{ cursor: 'pointer' }}
+              onClick={() => router.push('/')}
+            >
+              <Title order={2} mb={4}>{t('homepage.title')}</Title>
+              <Text size="sm" c="dimmed">{t('homepage.subtitle')}</Text>
+            </div>
             <Group>
-              <Link href="/">
-                <Badge 
-                  size="lg" 
-                  variant="outline" 
-                  color="gray" 
-                  style={{ cursor: 'pointer', padding: '8px 16px' }}
-                >
-                  ← {t('common.home')}
-                </Badge>
-              </Link>
-              <Link href="/add-problem">
-                <Badge 
-                  size="lg" 
-                  variant="outline" 
-                  color="blue" 
-                  style={{ cursor: 'pointer', padding: '8px 16px' }}
-                >
-                  + {t('homepage.addProblem')}
-                </Badge>
-              </Link>
+              <Badge 
+                size="lg" 
+                variant="outline" 
+                color="gray" 
+                style={{ cursor: 'pointer', padding: '8px 16px' }}
+                onClick={() => router.push('/')}
+              >
+                ← {t('common.home')}
+              </Badge>
+              <Badge 
+                size="lg" 
+                variant="outline" 
+                color="blue" 
+                style={{ cursor: 'pointer', padding: '8px 16px' }}
+                onClick={() => router.push('/add-problem')}
+              >
+                + {t('homepage.addProblem')}
+              </Badge>
               <LanguageThemeControls />
             </Group>
           </Group>

src/contexts/I18nContext.tsx

@@ -1,9 +1,12 @@
-import React, { createContext, useContext, ReactNode } from 'react';
+import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 // Dynamically import locale files
 import en from '../../locales/en.json';
 import zh from '../../locales/zh.json';
 
+// Key for localStorage
+const LOCALE_STORAGE_KEY = 'app-locale';
+
 type Translations = {
   common: {
     language: string;
@@ -199,12 +202,29 @@ const translations: Record<string, Translations> = {
 
 export function I18nProvider({ children }: { children: ReactNode }) {
   const router = useRouter();
-  const { locale = 'zh' } = router;
+  
+  // Initialize locale from localStorage or router, defaulting to 'zh'
+  const [locale, setLocale] = useState<string>('zh');
+  const [mounted, setMounted] = useState(false);
+
+  // Load locale from localStorage on mount
+  useEffect(() => {
+    setMounted(true);
+    if (typeof window !== 'undefined') {
+      const savedLocale = localStorage.getItem(LOCALE_STORAGE_KEY);
+      if (savedLocale && (savedLocale === 'zh' || savedLocale === 'en')) {
+        setLocale(savedLocale);
+      } else if (router.locale) {
+        setLocale(router.locale);
+      }
+    }
+  }, [router.locale]);
 
   const t = (key: string, params?: Record<string, string | number>): string => {
     try {
       const keys = key.split('.');
-      let value: any = translations[locale];
+      const currentLocale = mounted ? locale : 'zh';
+      let value: any = translations[currentLocale];
 
       for (const k of keys) {
         if (value && typeof value === 'object') {
@@ -227,7 +247,7 @@ export function I18nProvider({ children }: { children: ReactNode }) {
       }
 
       // 如果找不到翻译，返回key或者使用中文作为fallback
-      if (locale !== 'zh') {
+      if (currentLocale !== 'zh') {
         let fallbackValue: any = translations.zh;
         for (const k of keys) {
           if (fallbackValue && typeof fallbackValue === 'object') {
@@ -249,8 +269,20 @@ export function I18nProvider({ children }: { children: ReactNode }) {
   };
 
   const switchLocale = (newLocale: string) => {
-    const { pathname, asPath, query } = router;
-    router.push({ pathname, query }, asPath, { locale: newLocale });
+    // Save to localStorage
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
+    }
+    // Update state (this will trigger re-render)
+    setLocale(newLocale);
+    
+    // Also try to update router locale for consistency
+    try {
+      const { pathname, asPath, query } = router;
+      router.push({ pathname, query }, asPath, { locale: newLocale, shallow: true });
+    } catch (e) {
+      // Ignore router errors, state update will handle the UI
+    }
   };
 
   return (