Proper leaderboards layout

src/app/leaderboards/components/LeaderboardRow.tsx

@@ -1,71 +1,88 @@
-import { Trophy } from "lucide-react";
+import { LeaderboardRank } from "@/modules/leaderboard/types";
+import { LinkIcon, Trophy } from "lucide-react";
+import Link from "next/link";
 
-interface LeaderboardRowProps {
+const LeaderboardRow = ({
-  rank: number;
+  index = 0,
-  username: string;
+  run,
-  pb: string;
+}: {
-  runsCount: number;
-  category: string;
   index?: number;
-}
+  run: LeaderboardRank;
-
+}) => {
-const LeaderboardRow = ({ rank, username, pb, runsCount, category, index = 0 }: LeaderboardRowProps) => {
   const getRankStyle = (rank: number) => {
-    if (rank === 1) return "rank-gold";
+    if (run.rank === 1) return "rank-gold";
-    if (rank === 2) return "rank-silver";
+    if (run.rank === 2) return "rank-silver";
-    if (rank === 3) return "rank-bronze";
+    if (run.rank === 3) return "rank-bronze";
     return "bg-secondary text-muted-foreground";
   };
 
   const getRankGlow = (rank: number) => {
-    if (rank === 1) return "glow-gold";
+    if (run.rank === 1) return "glow-gold";
-    if (rank === 2) return "glow-silver";
+    if (run.rank === 2) return "glow-silver";
-    if (rank === 3) return "glow-bronze";
+    if (run.rank === 3) return "glow-bronze";
     return "";
   };
 
-  const isTopThree = rank <= 3;
+  const isTopThree = run.rank <= 3;
 
   return (
     <tr
-      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? 'bg-secondary/30' : ''}`}
+      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? "bg-secondary/30" : ""}`}
-      style={{ animationDelay: `${index * 0.05}s`, animationFillMode: 'forwards' }}
+      style={{
+        animationDelay: `${index * 0.05}s`,
+        animationFillMode: "forwards",
+      }}
     >
       {/* Rank */}
-      <td className="py-4 px-4">
+      <td className="py-4 px-5 w-16">
-        <div className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(rank)} ${getRankGlow(rank)}`}>
+        <div
-          {rank <= 3 ? <Trophy className="h-4 w-4" /> : rank}
+          className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(run.rank)} ${getRankGlow(run.rank)}`}
+        >
+          {isTopThree ? <Trophy className="h-4 w-4" /> : run.rank}
         </div>
       </td>
 
       {/* Username */}
-      <td className="py-4 px-4">
+      <td>
         <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded-full bg-linear-to-br from-primary/50 to-primary/20 flex items-center justify-center text-xs font-bold text-primary">
+          <span
-            {username.charAt(0).toUpperCase()}
+            className={`font-medium ${isTopThree ? "text-foreground" : "text-secondary-foreground"} group-hover:text-primary transition-colors`}
-          </div>
+          >
-          <span className={`font-medium ${isTopThree ? 'text-foreground' : 'text-secondary-foreground'} group-hover:text-primary transition-colors`}>
+            {run.username}
-            {username}
           </span>
         </div>
       </td>
 
-      {/* PB */}
+      {/* Time */}
-      <td className="py-4 px-4">
+      <td>
-        <span className="font-mono text-primary font-semibold">{pb}</span>
+        <span className="font-mono text-primary font-semibold flex justify-center">
-      </td>
+          {run.pb}
-
+        </span>
-      {/* Runs */}
-      <td className="py-4 px-4 text-muted-foreground">
-        {runsCount}
       </td>
 
       {/* Category */}
       <td className="py-4 px-4">
         <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
-          {category}
+          {run.category}
         </span>
       </td>
+
+      {/* Assisted */}
+      <td className="py-4 px-4">
+        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
+          {run.assisted ? "Assisted" : "Unassisted"}
+        </span>
+      </td>
+
+      {/* Runs */}
+      <td className="py-4 px-4 w-16 text-muted-foreground">{run.runsCount}</td>
+
+      {/* Problem */}
+      <td className="py-4 px-4">
+        <Link href="/" className="hover:text-primary flex items-center gap-1">
+          <LinkIcon className="w-3 h-3" /> {run.problem}
+        </Link>
+      </td>
     </tr>
   );
 };

src/app/leaderboards/page.tsx

@@ -114,16 +114,28 @@ export default function Leaderboards() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="pl-5">Rank</TableHead>
+                <TableHead className="w-16">
-                <TableHead>Runner</TableHead>
+                  <p className="flex justify-center">Rank</p>
-                <TableHead>PB</TableHead>
+                </TableHead>
-                <TableHead>Runs</TableHead>
+                <TableHead className="w-52">
-                <TableHead className="pr-5">Category</TableHead>
+                  <p className="flex justify-center">Runner</p>
+                </TableHead>
+                <TableHead className="w-24">
+                  <p className="flex justify-center">Time</p>
+                </TableHead>
+                <TableHead className="w-16">
+                  <p className="flex justify-center">Category</p>
+                </TableHead>
+                <TableHead className="w-24">
+                  <p className="flex justify-center">Assisted</p>
+                </TableHead>
+                <TableHead className="w-16">Runs</TableHead>
+                <TableHead>Problem</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {data.map((entry, i) => (
-                <LeaderboardRow key={entry.username} {...entry} index={i} />
+                <LeaderboardRow key={entry.username} index={i} run={entry} />
               ))}
             </TableBody>
           </Table>

src/modules/leaderboard/actions.ts

@@ -1,154 +1,194 @@
 "use server";
 
 import * as Core from "./core";
-import { Leaderboard } from "./types";
+import { LeaderboardRank } from "./types"; // updated interface
 
-export async function getGlobalLeaderboard(): Promise<Leaderboard> {
+export async function getGlobalLeaderboard(): Promise<LeaderboardRank[]> {
   return [
     {
       rank: 1,
       username: "speedmaster_x",
       pb: "2:34.21",
       runsCount: 2341,
-      category: "Any%",
+      problem: "Fix broken login flow",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 2,
       username: "algo_ninja",
       pb: "2:38.54",
       runsCount: 1876,
-      category: "Any%",
+      problem: "Refactor legacy API endpoints",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 3,
       username: "clockwork",
       pb: "2:41.02",
       runsCount: 3102,
-      category: "Any%",
+      problem: "Optimize image upload pipeline",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 4,
       username: "fastfingers99",
       pb: "2:45.33",
       runsCount: 987,
-      category: "Any%",
+      problem: "Build a mini chat server",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 5,
       username: "recursion_queen",
       pb: "2:47.89",
       runsCount: 1543,
-      category: "Any%",
+      problem: "Fix CSS layout bug in dashboard",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 6,
       username: "bitshifter",
       pb: "2:52.11",
       runsCount: 2109,
-      category: "Any%",
+      problem: "Implement JWT authentication",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 7,
       username: "nullpointer",
       pb: "2:54.67",
       runsCount: 876,
-      category: "Any%",
+      problem: "Create REST endpoint for user data",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 8,
       username: "stackattack",
       pb: "2:58.23",
       runsCount: 1234,
-      category: "Any%",
+      problem: "Fix off-by-one bug in sorting function",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 9,
       username: "looplegend",
       pb: "3:01.45",
       runsCount: 654,
-      category: "Any%",
+      problem: "Optimize SQL query for reports",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 10,
       username: "coderunner",
       pb: "3:05.78",
       runsCount: 1098,
-      category: "Any%",
+      problem: "Add file upload validation",
+      category: "any%",
+      assisted: false,
     },
   ];
 }
 
-export async function getWeeklyLeaderboard(): Promise<Leaderboard> {
+export async function getWeeklyLeaderboard(): Promise<LeaderboardRank[]> {
   return [
     {
       rank: 1,
       username: "weekly_warrior",
       pb: "2:51.33",
       runsCount: 156,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 2,
       username: "speedmaster_x",
       pb: "2:53.12",
       runsCount: 89,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 3,
       username: "newbie_grinder",
       pb: "2:58.67",
       runsCount: 234,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 4,
       username: "algo_ninja",
       pb: "3:02.45",
       runsCount: 67,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 5,
       username: "fresh_runner",
       pb: "3:05.89",
       runsCount: 45,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 6,
       username: "practice_makes",
       pb: "3:08.12",
       runsCount: 112,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 7,
       username: "splitmaster",
       pb: "3:12.34",
       runsCount: 78,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 8,
       username: "grindtime",
       pb: "3:15.56",
       runsCount: 92,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 9,
       username: "pb_hunter",
       pb: "3:18.90",
       runsCount: 56,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
     {
       rank: 10,
       username: "reset_king",
       pb: "3:22.11",
       runsCount: 187,
-      category: "Any%",
+      problem: "Build notifications API",
+      category: "any%",
+      assisted: false,
     },
   ];
 }

src/modules/leaderboard/types.ts

@@ -5,5 +5,7 @@ export interface LeaderboardRank {
   username: string;
   pb: string;
   runsCount: number;
-  category: string;
+  problem: string;
+  category: "any%" | "100%";
+  assisted: boolean;
 }