Merge pull request #6 from eWloYW8/master

feat: dark mode and better trend chart

Author: eWloYW8

app/(main)/contests/page.tsx

@@ -14,15 +14,15 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useToast } from "@/hooks/use-toast";
 import MarkdownViewer from '@/components/shared/markdown-viewer';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { ResponsiveContainer, LineChart as RechartsLineChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line } from 'recharts';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import { UserProfileCard } from '@/components/shared/user-profile-card';
 import { getInitials } from '@/lib/utils';
+import EchartsTrendChart from '@/components/charts/echarts-trend-chart';
 
 const fetcher = (url: string) => api.get(url).then(res => res.data.data);
 
-// --- ContestList (no changes) ---
+// --- ContestList ---
 function ContestList() {
     const { data: contests, error, isLoading } = useSWR<Record<string, Contest>>('/contests', fetcher);
 
@@ -125,52 +125,21 @@ function ContestProblems({ contestId }: { contestId: string }) {
     );
 }
 
-const COLORS = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
-
 function ContestTrend({ contestId }: { contestId: string }) {
     const { data: trendData, error, isLoading } = useSWR<TrendEntry[]>(`/contests/${contestId}/trend`, fetcher, { refreshInterval: 30000 });
 
     if (isLoading) return <Skeleton className="h-96 w-full" />;
     if (error) return <div>Failed to load trend data.</div>;
     if (!trendData || trendData.length === 0) return <div>No trend data available yet.</div>;
 
-    const allTimePoints = new Set<number>();
-    trendData.forEach(user => {
-        user.history.forEach(point => {
-            allTimePoints.add(new Date(point.time).getTime());
-        });
-    });
-
-    const sortedTimePoints = Array.from(allTimePoints).sort();
-
-    const chartData = sortedTimePoints.map(time => {
-        const dataPoint: { [key: string]: any } = { time: format(new Date(time), 'HH:mm:ss') };
-        trendData.forEach(user => {
-            const lastPoint = [...user.history].reverse().find(p => new Date(p.time).getTime() <= time);
-            dataPoint[user.nickname] = lastPoint ? lastPoint.score : 0;
-        });
-        return dataPoint;
-    });
-
     return (
         <Card>
             <CardHeader>
                 <CardTitle>Score Trend</CardTitle>
                 <CardDescription>Score progression of top users over time.</CardDescription>
             </CardHeader>
             <CardContent className="h-96 w-full">
-                <ResponsiveContainer>
-                    <RechartsLineChart data={chartData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
-                        <CartesianGrid strokeDasharray="3 3" />
-                        <XAxis dataKey="time" />
-                        <YAxis />
-                        <Tooltip />
-                        <Legend />
-                        {trendData.map((user, index) => (
-                            <Line key={user.user_id} type="stepAfter" dataKey={user.nickname} stroke={COLORS[index % COLORS.length]} strokeWidth={2} dot={false} />
-                        ))}
-                    </RechartsLineChart>
-                </ResponsiveContainer>
+                <EchartsTrendChart trendData={trendData} />
             </CardContent>
         </Card>
     );
@@ -220,7 +189,7 @@ function LeaderboardRow({ entry, rank, problemIds }: { entry: LeaderboardEntry,
 }
 
 
-// --- UPDATED ContestLeaderboard component ---
+// --- ContestLeaderboard component ---
 function ContestLeaderboard({ contestId }: { contestId: string }) {
     // Fetch contest details to get the problem IDs in order
     const { data: contest, error: contestError, isLoading: isContestLoading } = useSWR<Contest>(`/contests/${contestId}`, fetcher);
@@ -292,7 +261,7 @@ function ContestDetailView({ contestId, view }: { contestId: string, view: strin
             toast({ variant: "destructive", title: "Registration Failed", description: error.response?.data?.message || "An unexpected error occurred." });
         }
     };
-    
+   
     const now = new Date();
     const canRegister = contest && now >= new Date(contest.starttime) && now <= new Date(contest.endtime);
 
@@ -313,20 +282,24 @@ function ContestDetailView({ contestId, view }: { contestId: string, view: strin
                 )}
             </div>
             <Tabs value={view} className="w-full">
-                <TabsList className="grid w-full grid-cols-3">
+                <TabsList className="grid w-full grid-cols-2">
                     <TabsTrigger value="problems" asChild>
                         <Link href={`/contests?id=${contestId}&view=problems`}>Problems</Link>
                     </TabsTrigger>
                     <TabsTrigger value="leaderboard" asChild>
                         <Link href={`/contests?id=${contestId}&view=leaderboard`}>Leaderboard</Link>
                     </TabsTrigger>
-                    <TabsTrigger value="trend" asChild>
-                        <Link href={`/contests?id=${contestId}&view=trend`}>Trend</Link>
-                    </TabsTrigger>
                 </TabsList>
             </Tabs>
             <div className="mt-6">
-                {view === 'leaderboard' ? <ContestLeaderboard contestId={contestId} /> : view === 'trend' ? <ContestTrend contestId={contestId} /> : <ContestProblems contestId={contestId} />}
+                {view === 'leaderboard' ? (
+                  <div className="space-y-6">
+                    <ContestTrend contestId={contestId} />
+                    <ContestLeaderboard contestId={contestId} />
+                  </div>
+                ) : (
+                  <ContestProblems contestId={contestId} />
+                )}
             </div>
         </div>
     );

app/(main)/layout.tsx

@@ -2,6 +2,7 @@
 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";
 
 function MainLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -11,6 +12,7 @@ function MainLayout({ children }: { children: React.ReactNode }) {
         <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
           <div className="ml-auto flex-1 sm:flex-initial">
           </div>
+          <ThemeToggle />
           <UserNav />
         </div>
       </header>

app/globals.css

@@ -46,34 +46,25 @@
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
+    --background: 240 4% 12%;
+    --foreground: 0 0% 83%;
+    --card: 240 4% 15%;
+    --card-foreground: 0 0% 83%;
+    --popover: 240 4% 12%;
+    --popover-foreground: 0 0% 83%;
+    --primary: 205 92% 35%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 240 3% 20%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 240 3% 20%;
+    --muted-foreground: 240 2% 50%;
+    --accent: 240 3% 20%;
+    --accent-foreground: 210 20% 98%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 240 3% 24%;
+    --input: 240 3% 24%;
+    --ring: 205 92% 35%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;

app/layout.tsx

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

components/auth/login-form.tsx

@@ -36,7 +36,7 @@ export function LoginForm() {
   const { login } = useAuth();
   const router = useRouter();
   const { toast } = useToast();
-  const gitlabLoginUrl = `${process.env.NEXT_PUBLIC_API_URL || ""}/api/v1/auth/gitlab/login`;
+  const gitlabLoginUrl = `/api/v1/auth/gitlab/login`;
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),

components/charts/echarts-trend-chart.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import ReactECharts from 'echarts-for-react';
+import type { EChartsOption, LineSeriesOption } from 'echarts';
+import { useTheme } from 'next-themes';
+import { format } from 'date-fns';
+import { TrendEntry } from '@/lib/types';
+
+interface EchartsTrendChartProps {
+    trendData: TrendEntry[];
+}
+
+const EchartsTrendChart: React.FC<EchartsTrendChartProps> = ({ trendData }) => {
+    const { theme } = useTheme();
+
+    const truncateToMinute = (timestamp: number): number => {
+        const date = new Date(timestamp);
+        date.setSeconds(0, 0);
+        return date.getTime();
+    };
+
+    const allTimePoints = new Set<number>();
+    trendData.forEach(user => {
+        user.history.forEach(point => {
+            allTimePoints.add(truncateToMinute(new Date(point.time).getTime()));
+        });
+    });
+
+    allTimePoints.add(truncateToMinute(new Date().getTime()));
+
+    const sortedTimePoints = Array.from(allTimePoints).sort((a, b) => a - b);
+
+
+    const seriesData: LineSeriesOption[] = trendData.map(user => {
+        const data = sortedTimePoints.map(time => {
+            const lastPoint = [...user.history]
+                .filter(p => new Date(p.time).getTime() <= time)
+                .pop();
+            const score = lastPoint ? lastPoint.score : 0;
+            return [time, score];
+        });
+        return {
+            name: user.nickname,
+            type: 'line',
+            step: 'end',
+            symbol: 'none',
+            data: data,
+        };
+    });
+
+    const option: EChartsOption = {
+        backgroundColor: 'transparent',
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            },
+            formatter: (params: any) => {
+                const time = format(new Date(params[0].axisValue), 'yyyy-MM-dd HH:mm:ss');
+                let tooltipHtml = `${time}<br/>`;
+                params.forEach((param: any) => {
+                    tooltipHtml += `${param.marker} ${param.seriesName}: <strong>${param.value[1]}</strong><br/>`;
+                });
+                return tooltipHtml;
+            }
+        },
+        legend: {
+            data: trendData.map(user => user.nickname),
+            textStyle: {
+                color: theme === 'dark' ? '#ccc' : '#333',
+            },
+            bottom: 45,
+            type: 'scroll',
+        },
+        grid: {
+            left: '3%',
+            right: '50px',
+            bottom: 80,
+            containLabel: true
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {
+                    title: 'Download',
+                    name: 'contest-trend',
+                    backgroundColor: theme === 'dark' ? '#1f2937' : '#fff'
+                }
+            }
+        },
+        xAxis: [
+            {
+                type: 'time',
+                axisLabel: {
+                    color: theme === 'dark' ? '#ccc' : '#333',
+                    formatter: (value: number) => {
+                        return format(new Date(value), 'yyyy-MM-dd HH:mm');
+                    }
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLabel: {
+                    color: theme === 'dark' ? '#ccc' : '#333'
+                }
+            }
+        ],
+        dataZoom: [
+            {
+                type: 'slider',
+                xAxisIndex: 0,
+                start: 0,
+                end: 100,
+                bottom: 10,
+                height: 20,
+            },
+            {
+                type: 'slider',
+                yAxisIndex: 0,
+                start: 0,
+                end: 100,
+                right: 10,
+                width: 20,
+            },
+            {
+                type: 'inside',
+                xAxisIndex: 0,
+                start: 0,
+                end: 100,
+            },
+        ],
+        series: seriesData,
+    };
+
+    return (
+        <ReactECharts
+            option={option}
+            theme={theme === 'dark' ? 'dark' : 'light'}
+            style={{ height: '100%', width: '100%' }}
+            notMerge={true}
+            lazyUpdate={true}
+        />
+    );
+};
+
+export default EchartsTrendChart;