i18n: initial translation support

Author: YooLc

app/(main)/contests/page.tsx

@@ -3,8 +3,11 @@ import withAuth from "@/components/layout/with-auth";
 import { MainNav } from "@/components/layout/main-nav";
 import { UserNav } from "@/components/layout/user-nav";
 import { ThemeToggle } from "@/components/layout/theme-toggle";
+import {useTranslations} from 'next-intl';
 
 function MainLayout({ children }: { children: React.ReactNode }) {
+  const t = useTranslations('home');
+
   return (
     <div className="flex min-h-screen w-full flex-col">
       <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6 z-50">
@@ -21,24 +24,28 @@ function MainLayout({ children }: { children: React.ReactNode }) {
       </main>
       <footer className="mt-auto border-t py-4">
         <div className="container mx-auto text-center text-sm text-muted-foreground">
-          Powered by{" "}
-          <a
-            href="https://github.com/ZJUSCT/CSOJ"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="font-medium text-primary underline-offset-4 hover:underline"
-          >
-            ZJUSCT/CSOJ
-          </a>{" "}
-          &{" "}
-          <a
-            href="https://github.com/ZJUSCT/CSOJ-WebUI"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="font-medium text-primary underline-offset-4 hover:underline"
-          >
-            ZJUSCT/CSOJ-WebUI
-          </a>
+          {t.rich('power_by', {
+            github1: (chunks) => (
+              <a
+                href="https://github.com/ZJUSCT/CSOJ"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium text-primary underline-offset-4 hover:underline"
+              >
+                {chunks}
+              </a>
+            ),
+            github2: (chunks) => (
+              <a
+                href="https://github.com/ZJUSCT/CSOJ-WebUI"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium text-primary underline-offset-4 hover:underline"
+              >
+                {chunks}
+              </a>
+            ),
+          })}
         </div>
       </footer>
     </div>

app/(main)/layout.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
+import { useTranslations } from 'next-intl'; // Import useTranslations
 import api from '@/lib/api';
 import { Problem, Submission } from '@/lib/types';
 import MarkdownViewer from '@/components/shared/markdown-viewer';
@@ -16,24 +17,25 @@ import { Suspense } from 'react';
 const fetcher = (url: string) => api.get(url).then(res => res.data.data);
 
 function UserSubmissionsForProblem({ problemId }: { problemId: string }) {
+    const t = useTranslations('ProblemDetails');
     const { data: allSubmissions, isLoading } = useSWR<Submission[]>('/submissions', fetcher);
 
     if (isLoading) return <Skeleton className="h-40 w-full" />;
 
     const problemSubmissions = allSubmissions?.filter(sub => sub.problem_id === problemId) || [];
 
     if (problemSubmissions.length === 0) {
-        return <p className="text-sm text-muted-foreground">You have not made any submissions for this problem yet.</p>;
+        return <p className="text-sm text-muted-foreground">{t('submissions.none')}</p>;
     }
 
     return (
         <Table>
             <TableHeader>
                 <TableRow>
-                    <TableHead>Submission ID</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Score</TableHead>
-                    <TableHead>Date</TableHead>
+                    <TableHead>{t('submissions.id')}</TableHead>
+                    <TableHead>{t('submissions.status')}</TableHead>
+                    <TableHead>{t('submissions.score')}</TableHead>
+                    <TableHead>{t('submissions.date')}</TableHead>
                 </TableRow>
             </TableHeader>
             <TableBody>
@@ -55,25 +57,33 @@ function UserSubmissionsForProblem({ problemId }: { problemId: string }) {
 }
 
 function ProblemDetails() {
+    const t = useTranslations('ProblemDetails');
     const searchParams = useSearchParams();
     const problemId = searchParams.get('id');
     const { data: problem, error, isLoading } = useSWR<Problem>(problemId ? `/problems/${problemId}` : null, fetcher);
 
     if (!problemId) {
-        return <Card><CardHeader><CardTitle>No Problem Selected</CardTitle><CardDescription>Please select a problem to view its details.</CardDescription></CardHeader></Card>;
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('noProblem.title')}</CardTitle>
+                    <CardDescription>{t('noProblem.description')}</CardDescription>
+                </CardHeader>
+            </Card>
+        );
     }
 
     if (isLoading) return <div><Skeleton className="h-screen w-full" /></div>;
-    if (error) return <div>Failed to load problem. You may not have access to it yet.</div>;
-    if (!problem) return <div>Problem not found.</div>;
+    if (error) return <div>{t('details.loadFail')}</div>;
+    if (!problem) return <div>{t('details.notFound')}</div>;
 
     return (
         <div className="grid gap-8 lg:grid-cols-2">
             <div className="space-y-6">
                 <Card>
                     <CardHeader>
                         <CardTitle className="text-2xl">{problem.name}</CardTitle>
-                        <CardDescription>Problem ID: {problem.id}</CardDescription>
+                        <CardDescription>{t('details.id')}: {problem.id}</CardDescription>
                     </CardHeader>
                     <CardContent>
                         <MarkdownViewer 
@@ -87,15 +97,15 @@ function ProblemDetails() {
             <div className="space-y-6">
                 <Card>
                     <CardHeader>
-                        <CardTitle>Submit Solution</CardTitle>
+                        <CardTitle>{t('submitForm.title')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                         <SubmissionUploadForm problemId={problem.id} uploadLimits={problem.upload} />
                     </CardContent>
                 </Card>
                 <Card>
                     <CardHeader>
-                        <CardTitle>Your Submissions</CardTitle>
+                        <CardTitle>{t('submissions.title')}</CardTitle>
                     </CardHeader>
                     <CardContent>
                         <UserSubmissionsForProblem problemId={problem.id} />

app/(main)/problems/page.tsx

@@ -15,18 +15,22 @@ import { getInitials } from '@/lib/utils';
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { TokenInfoCard } from '@/components/profile/token-info-card';
-
-const profileSchema = z.object({
-  nickname: z.string().min(1, 'Nickname is required').max(50),
-  signature: z.string().max(100).optional(),
-});
+import { useTranslations } from 'next-intl'; // Import useTranslations
 
 export default function ProfilePage() {
+    const t = useTranslations('Profile'); // Initialize translations
     const { user, isLoading, logout } = useAuth();
     const { toast } = useToast();
     const router = useRouter();
     const [isUploading, setIsUploading] = useState(false);
 
+    // Schema definition must be inside the component or outside, but using t() inside requires it to be inside 
+    // or passed as a function argument, let's redefine it here to use t() for error messages.
+    const profileSchema = z.object({
+        nickname: z.string().min(1, t('form.nicknameRequired')).max(50),
+        signature: z.string().max(100).optional(),
+    });
+
     const form = useForm<z.infer<typeof profileSchema>>({
         resolver: zodResolver(profileSchema),
         values: {
@@ -47,14 +51,14 @@ export default function ProfilePage() {
             await api.post('/user/avatar', formData, {
                 headers: { 'Content-Type': 'multipart/form-data' },
             });
-            toast({ title: 'Avatar updated successfully!' });
+            toast({ title: t('avatar.uploadSuccess') });
             // Forcing a reload to get the new user profile with updated avatar URL
             window.location.reload(); 
         } catch (error: any) {
             toast({
                 variant: 'destructive',
-                title: 'Upload failed',
-                description: error.response?.data?.message || 'Could not upload avatar.',
+                title: t('avatar.uploadFailTitle'),
+                description: error.response?.data?.message || t('avatar.uploadFailDescription'),
             });
         } finally {
             setIsUploading(false);
@@ -64,14 +68,14 @@ export default function ProfilePage() {
     const onSubmit = async (values: z.infer<typeof profileSchema>) => {
         try {
             await api.patch('/user/profile', values);
-            toast({ title: 'Profile updated successfully!' });
+            toast({ title: t('form.updateSuccess') });
             // Forcing a reload to get the new user profile
             window.location.reload();
         } catch (error: any) {
              toast({
                 variant: 'destructive',
-                title: 'Update failed',
-                description: error.response?.data?.message || 'Could not update profile.',
+                title: t('form.updateFailTitle'),
+                description: error.response?.data?.message || t('form.updateFailDescription'),
             });
         }
     };
@@ -85,12 +89,14 @@ export default function ProfilePage() {
         return <Skeleton className="w-full h-96" />;
     }
 
+    const isSubmitting = form.formState.isSubmitting;
+
     return (
         <div className="grid auto-rows-min gap-6 lg:grid-cols-3">
             <Card>
                 <CardHeader>
-                    <CardTitle>Avatar</CardTitle>
-                    <CardDescription>Update your profile picture.</CardDescription>
+                    <CardTitle>{t('avatar.title')}</CardTitle>
+                    <CardDescription>{t('avatar.description')}</CardDescription>
                 </CardHeader>
                 <CardContent className="flex flex-col items-center gap-4">
                     <Avatar className="h-32 w-32">
@@ -99,31 +105,31 @@ export default function ProfilePage() {
                     </Avatar>
                     <Input id="avatar-upload" type="file" accept="image/*" onChange={handleAvatarUpload} className="hidden" />
                     <Button asChild variant="outline">
-                        <label htmlFor="avatar-upload">{isUploading ? "Uploading..." : "Change Avatar"}</label>
+                        <label htmlFor="avatar-upload">{isUploading ? t('avatar.uploading') : t('avatar.change')}</label>
                     </Button>
                 </CardContent>
             </Card>
 
             <Card className="lg:col-span-2 lg:row-span-2 flex flex-col">
                 <CardHeader>
-                    <CardTitle>Profile Information</CardTitle>
-                    <CardDescription>Update your account details. Username cannot be changed.</CardDescription>
+                    <CardTitle>{t('form.title')}</CardTitle>
+                    <CardDescription>{t('form.description')}</CardDescription>
                 </CardHeader>
                 <CardContent className="flex flex-1 flex-col justify-between">
                     <Form {...form}>
                         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                             <FormItem>
-                                <FormLabel>Username</FormLabel>
+                                <FormLabel>{t('form.username')}</FormLabel>
                                 <Input disabled value={user.username} />
                             </FormItem>
                             <FormField
                                 control={form.control}
                                 name="nickname"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>Nickname</FormLabel>
+                                        <FormLabel>{t('form.nickname')}</FormLabel>
                                         <FormControl>
-                                            <Input placeholder="Your display name" {...field} />
+                                            <Input placeholder={t('form.nicknamePlaceholder')} {...field} />
                                         </FormControl>
                                         <FormMessage />
                                     </FormItem>
@@ -134,21 +140,21 @@ export default function ProfilePage() {
                                 name="signature"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>Signature</FormLabel>
+                                        <FormLabel>{t('form.signature')}</FormLabel>
                                         <FormControl>
-                                            <Input placeholder="A short bio" {...field} />
+                                            <Input placeholder={t('form.signaturePlaceholder')} {...field} />
                                         </FormControl>
                                         <FormMessage />
                                     </FormItem>
                                 )}
                             />
-                            <Button type="submit" disabled={form.formState.isSubmitting}>
-                                {form.formState.isSubmitting ? 'Saving...' : 'Save Changes'}
+                            <Button type="submit" disabled={isSubmitting}>
+                                {isSubmitting ? t('form.saving') : t('form.saveChanges')}
                             </Button>
                         </form>
                     </Form>
                     <div className="border-t pt-6 mt-6">
-                        <Button variant="destructive" onClick={handleLogout}>Log Out</Button>
+                        <Button variant="destructive" onClick={handleLogout}>{t('logout')}</Button>
                     </div>
                 </CardContent>
             </Card>

app/(main)/profile/page.tsx

@@ -6,6 +6,7 @@ import { SWRProvider } from "@/providers/swr-provider";
 import { AuthProvider } from "@/providers/auth-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { ThemeProvider } from "@/providers/theme-provider";
+import {NextIntlClientProvider} from 'next-intl';
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
@@ -27,16 +28,18 @@ export default function RootLayout({
           inter.variable
         )}
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-        >
-          <AuthProvider>
-            <SWRProvider>{children}</SWRProvider>
-          </AuthProvider>
-          <Toaster />
-        </ThemeProvider>
+        <NextIntlClientProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+          >
+            <AuthProvider>
+              <SWRProvider>{children}</SWRProvider>
+            </AuthProvider>
+            <Toaster />
+          </ThemeProvider>
+        </NextIntlClientProvider>
       </body>
     </html>
   );