Merge pull request #10 from orus-dev/more-supabase-and-ui

More supabase and UI

src/app/globals.css

@@ -314,5 +314,6 @@
 }
 
 .cm-editor {
+  width: 100%;
   height: 100%;
 }

src/app/leaderboards/components/LeaderboardRow.tsx

@@ -1,33 +1,30 @@
-import { LeaderboardRank } from "@/modules/leaderboard/types";
+import Rank from "@/components/app/Rank";
 import { LinkIcon, Trophy } from "lucide-react";
 import Link from "next/link";
 
+interface GlobalLeaderboardUser {
+  rank: number;
+  user_id: string;
+  username: string;
+  wins: number;
+  podiums: number;
+  problems_completed: number;
+}
+
 const LeaderboardRow = ({
   index = 0,
   run,
 }: {
   index?: number;
-  run: LeaderboardRank;
+  run: GlobalLeaderboardUser;
 }) => {
-  const getRankStyle = (rank: number) => {
-    if (run.rank === 1) return "rank-gold";
-    if (run.rank === 2) return "rank-silver";
-    if (run.rank === 3) return "rank-bronze";
-    return "bg-secondary text-muted-foreground";
-  };
-
-  const getRankGlow = (rank: number) => {
-    if (run.rank === 1) return "glow-gold";
-    if (run.rank === 2) return "glow-silver";
-    if (run.rank === 3) return "glow-bronze";
-    return "";
-  };
-
   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",
@@ -35,52 +32,44 @@ const LeaderboardRow = ({
     >
       {/* Rank */}
       <td className="py-4 px-5 w-16">
-        <div
+        <Rank rank={run.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>
         <div className="flex items-center gap-3">
           <span
-            className={`font-medium ${isTopThree ? "text-foreground" : "text-secondary-foreground"} group-hover:text-primary transition-colors`}
+            className={`font-medium ${
+              isTopThree ? "text-foreground" : "text-secondary-foreground"
+            } group-hover:text-primary transition-colors`}
           >
             {run.username}
           </span>
         </div>
       </td>
 
-      {/* Time */}
+      {/* Wins */}
-      <td>
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
-        <span className="font-mono text-primary font-semibold flex justify-center">
+        {run.wins}
-          {run.pb}
-        </span>
       </td>
 
-      {/* Category */}
+      {/* Podiums */}
-      <td className="py-4 px-4">
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
+        {run.podiums}
-          {run.category}
-        </span>
       </td>
 
-      {/* Assisted */}
+      {/* Problems Completed */}
-      <td className="py-4 px-4">
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
+        {run.problems_completed}
-          {run.assisted ? "Assisted" : "Unassisted"}
-        </span>
       </td>
 
-      {/* Runs */}
+      {/* Profile Link */}
-      <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">
+        <Link
-          <LinkIcon className="w-3 h-3" /> {run.problem}
+          href={`/profile/${run.user_id}`}
+          className="hover:text-primary flex items-center gap-1"
+        >
+          <LinkIcon className="w-3 h-3" /> View Profile
         </Link>
       </td>
     </tr>

src/app/leaderboards/page.tsx

@@ -3,8 +3,7 @@
 import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
 import { useState } from "react";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Table,
@@ -13,7 +12,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
 import {
   Pagination,
   PaginationContent,
@@ -30,11 +28,10 @@ import {
   getGlobalLeaderboard,
   getWeeklyLeaderboard,
 } from "@/modules/leaderboard/actions";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 export default function Leaderboards() {
-  const [global, globalLoaded, globalError] = useAction(getGlobalLeaderboard);
+  const [global] = useAction(getGlobalLeaderboard);
-  const [weekly, weeklyLoaded, weeklyError] = useAction(getWeeklyLeaderboard);
+  const [weekly] = useAction(getWeeklyLeaderboard);
 
   const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
   const data = (activeTab === "global" ? global : weekly) || [];
@@ -95,26 +92,6 @@ export default function Leaderboards() {
               </TabsTrigger>
             </TabsList>
           </Tabs>
-
-          <div className="flex flex-wrap gap-2">
-            <ToggleGroup variant="outline" type="single" defaultValue="any">
-              <ToggleGroupItem value="any" aria-label="any%">
-                any%
-              </ToggleGroupItem>
-              <ToggleGroupItem value="100" aria-label="100%">
-                100%
-              </ToggleGroupItem>
-            </ToggleGroup>
-
-            <ToggleGroup variant="outline" type="single">
-              <ToggleGroupItem value="true" aria-label="Assisted">
-                Assisted
-              </ToggleGroupItem>
-              <ToggleGroupItem value="false" aria-label="Unassisted">
-                Unassisted
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </div>
         </div>
 
         {/* Table */}
@@ -122,28 +99,38 @@ export default function Leaderboards() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-16">
+                {/* Rank */}
-                  <p className="flex justify-center">Rank</p>
+                <TableHead className="py-4 px-5 w-16 text-center">
+                  Rank
                 </TableHead>
-                <TableHead className="w-52">
+
-                  <p className="flex justify-center">Runner</p>
+                {/* Runner / Username */}
+                <TableHead className="py-4 px-4 text-left">Runner</TableHead>
+
+                {/* Wins */}
+                <TableHead className="py-4 px-4 w-24 text-center">
+                  Wins
                 </TableHead>
-                <TableHead className="w-24">
+
-                  <p className="flex justify-center">Time</p>
+                {/* Podiums */}
+                <TableHead className="py-4 px-4 w-24 text-center">
+                  Podiums
                 </TableHead>
-                <TableHead className="w-16">
+
-                  <p className="flex justify-center">Category</p>
+                {/* Problems Completed */}
+                <TableHead className="py-4 px-4 text-center">
+                  Problems Completed
                 </TableHead>
-                <TableHead className="w-24">
+
-                  <p className="flex justify-center">Assisted</p>
+                {/* User ID (optional) */}
+                <TableHead className="py-4 px-4 hidden md:table-cell text-left text-xs text-muted-foreground">
+                  User ID
                 </TableHead>
-                <TableHead className="w-16">Runs</TableHead>
-                <TableHead>Problem</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {data.map((entry, i) => (
-                <LeaderboardRow key={entry.username} index={i} run={entry} />
+                <LeaderboardRow key={entry.rank} index={i} run={entry} />
               ))}
             </TableBody>
           </Table>

src/app/problems/components/ProblemCard.tsx

@@ -1,23 +1,19 @@
 import { Button } from "@/components/ui/button";
-import { Clock, Zap, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
-
+import { Problem } from "@/modules/problems/types";
-interface ProblemCardProps {
+import { Clock, Zap, Users, Code } from "lucide-react";
-  name: string;
-  difficulty: "easy" | "medium" | "hard";
-  tags: string[];
-  bestTime?: string;
-  attempts: number;
-  index?: number;
-}
 
 const ProblemCard = ({
-  name,
+  problem,
-  difficulty,
-  tags,
-  bestTime,
-  attempts,
   index = 0,
-}: ProblemCardProps) => {
+  bestTime,
+  attempts = 0,
+}: {
+  problem: Problem;
+  index?: number;
+  bestTime?: string;
+  attempts?: number;
+}) => {
   const difficultyStyles = {
     easy: "diff-easy",
     medium: "diff-medium",
@@ -46,32 +42,19 @@ const ProblemCard = ({
         {/* Header */}
         <div className="flex items-start justify-between mb-3">
           <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
-            {name}
+            {problem.title}
           </h3>
           <span
-            className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}
+            className={`px-2 py-1 rounded-md text-xs font-medium ${
+              difficultyStyles[problem.difficulty]
+            }`}
           >
-            {difficultyLabels[difficulty]}
+            {difficultyLabels[problem.difficulty]}
           </span>
         </div>
 
-        {/* Tags */}
+        {/* Tags / Meta */}
-        <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex flex-wrap gap-2 text-xs text-muted-foreground w-f mb-2 w-full">
-          {tags.map((tag) => (
-            <span
-              key={tag}
-              className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-
-        {/* Spacer */}
-        <div className="flex-1" />
-
-        {/* Stats + Action */}
-        <div className="flex items-center justify-between mt-4 text-sm text-muted-foreground">
           <div className="flex items-center gap-4">
             {bestTime && (
               <div className="flex items-center gap-1.5">
@@ -85,15 +68,25 @@ const ProblemCard = ({
             </div>
           </div>
 
-          {/* Quick run button */}
+          {problem.language && (
-          <div className="opacity-0 group-hover:opacity-100 transition-all duration-300">
+            <span className="px-2 py-1 rounded-md bg-secondary">
+              <Code className="w-3 h-3 inline-block mr-1" /> {problem.language}
+            </span>
+          )}
+        </div>
+
+        {/* Description */}
+        <p className="text-sm text-muted-foreground truncate overflow-hidden whitespace-nowrap max-w-full">
+          {problem.description}
+        </p>
+
+        <div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
           <Button size="p2">
             <Zap className="h-4 w-4" />
           </Button>
         </div>
       </div>
     </div>
-    </div>
   );
 };
 

src/app/problems/page.tsx

@@ -14,6 +14,8 @@ import { getProblems } from "@/modules/problems/actions";
 export default function Problems() {
   const [problems, problemsLoaded, problemsError] = useAction(getProblems);
 
+  console.log(problems);
+
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
 
   const difficulties = ["All", "Easy", "Medium", "Hard"];
@@ -84,7 +86,7 @@ export default function Problems() {
         >
           {problems &&
             problems.map((problem, i) => (
-              <ProblemCard key={problem.name} {...problem} index={i} />
+              <ProblemCard key={problem.title} index={i} problem={problem} />
             ))}
         </div>
       </div>

src/app/profile/page.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
 import ProfileStatCard from "@/app/profile/components/ProfileStatCard";
+import Rank from "@/components/app/Rank";
 
 export default function Profile() {
   const user = {
@@ -34,8 +35,8 @@ export default function Profile() {
               <div className="w-24 h-24 rounded-2xl bg-linear-to-br from-primary to-primary/60 flex items-center justify-center text-3xl font-bold text-primary-foreground glow-purple">
                 {user.username[0].toUpperCase()}
               </div>
-              <div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg rank-gold flex items-center justify-center text-sm font-bold glow-gold">
+              <div className="absolute -bottom-2 -right-2 w-8 h-8">
-                #{user.rank}
+                <Rank rank={user.rank} />
               </div>
             </div>
 

src/app/run/components/ProfileCard.tsx

@@ -1,5 +1,6 @@
-import { Badge } from "../ui/badge";
+import Rank from "@/components/app/Rank";
-import { Card, CardContent } from "../ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
 
 export default function ProfileCard({
   user,
@@ -10,26 +11,24 @@ export default function ProfileCard({
     <Card className="relative w-full h-full overflow-hidden">
       <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
 
-      <CardContent className="relative flex flex-col md:flex-row gap-6 w-full h-full">
+      <CardContent className="relative flex flex-row gap-6 w-full h-full">
         {/* Avatar */}
-        <div className="relative shrink-0 w-full md:w-1/4 h-1/3 md:h-full flex items-center justify-center">
+        <div className="relative shrink-0 w-1/3 h-full flex items-center justify-center">
           <img
             src="http://github.com/selimaj-dev.png"
             alt="Img"
             className="rounded-2xl aspect-square max-h-full w-auto object-contain"
           />
 
-          <div className="absolute -bottom-2 -right-2 w-12 h-12 md:w-8 md:h-8 rounded-lg rank-gold flex items-center justify-center text-sm md:text-xs font-bold glow-gold">
+          <div className="absolute -bottom-2 -right-2 w-8 h-8">
-            #{user.rank}
+            <Rank rank={user.rank} />
           </div>
         </div>
 
         {/* User Info */}
         <div className="flex-1 flex flex-col justify-center w-full">
-          <h1 className="text-4xl md:text-3xl font-bold mb-2">
+          <h1 className="text-lg font-bold mb-2">{user.username}</h1>
-            {user.username}
+          <Badge>WR Holder</Badge>
-          </h1>
-          <Badge>World Record Holder</Badge>
         </div>
       </CardContent>
     </Card>

src/app/run/components/RunTimer.tsx

@@ -20,8 +20,9 @@ export default function RunTimer({ runInfo }: { runInfo: LiveRun }) {
   return (
     <Card className="relative text-center overflow-hidden h-full">
       <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
-      <CardContent className="relative flex justify-center items-center h-full">
+      <CardContent className="relative flex flex-col justify-center items-center h-full">
-        <p className="timer-display text-primary text-4xl font-bold">{time}</p>
+        <p className="timer-display text-primary text-3xl font-bold">{time}</p>
+        <p className="text-muted-foreground">{runInfo.category}</p>
       </CardContent>
     </Card>
   );

src/app/run/page.tsx

@@ -9,7 +9,7 @@ import Editor from "./components/Editor";
 import useAction from "@/hook/use-action";
 import { getLiveRun } from "@/modules/live-run/actions";
 import ProblemCard from "../problems/components/ProblemCard";
-import ProfileCard from "@/components/app/ProfileCard";
+import ProfileCard from "./components/ProfileCard";
 
 export default function Run() {
   const [runInfo] = useAction(getLiveRun);
@@ -21,9 +21,20 @@ export default function Run() {
   ];
 
   return (
-    <div className="h-svh px-20 pt-24 pb-12 flex gap-8">
+    <div
+      className="
+        h-svh
+        px-4 sm:px-8 lg:px-20
+        pt-20 sm:pt-24
+        pb-6 sm:pb-12
+        flex flex-col lg:flex-row
+        gap-5
+      "
+    >
+      {/* Main column */}
       <div className="h-full w-full flex flex-col gap-4">
-        <div className="w-full flex gap-5">
+        {/* Top cards */}
+        <div className="w-full flex flex-wrap gap-4 md:gap-5">
           <div className="flex-1 animate-fade-in opacity-0">
             <ProfileCard user={{ username: "selimaj", rank: 1 }} />
           </div>
@@ -32,22 +43,26 @@ export default function Run() {
             {runInfo && <RunTimer runInfo={runInfo} />}
           </div>
 
-          <div className="flex-1">
+          <div className="flex-2">
             <ProblemCard
-              name="Idk"
-              difficulty="hard"
-              tags={[]}
-              attempts={0}
               index={4}
+              problem={{
+                id: "fix-auth-callback",
+                title: "Fix the Broken Auth Callback",
+                description:
+                  "Users can log in with OAuth, but sessions aren't persisted. Fix it.",
+                language: "typescript",
+                difficulty: "easy",
+              }}
             />
           </div>
         </div>
 
         {/* Editor */}
-        <Card className="flex-1 overflow-hidden">
+        <Card className="flex-1 h-svh overflow-hidden">
           <CardContent className="flex h-full">
-            {/* File tree */}
+            {/* File tree – hide on small screens */}
-            <div className="w-2xs border-r border-border">
+            <div className="hidden md:block w-2xs border-r border-border">
               <FileTree
                 tree={{
                   type: "directory",
@@ -65,11 +80,11 @@ export default function Run() {
             </div>
 
             {/* Code */}
-            <div className="flex-1 pl-5 flex flex-col">
+            <div className="flex-1 w-full max-h-svh md:max-h-full h-full pl-0 md:pl-5 flex flex-col">
               <header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
                 <File size={16} /> myfile.js
               </header>
-              <div className="flex-1 pt-3 pb-5 h-full">
+              <div className="flex-1 pt-3 pb-4 md:pb-5 w-full h-full">
                 <Editor />
               </div>
             </div>
@@ -78,7 +93,7 @@ export default function Run() {
       </div>
 
       {/* Timer & Chat */}
-      <div className="h-full w-lg flex">
+      <div className="flex lg:w-lg min-h-[60vh]">
         <RunChat chatMessages={chatMessages} />
       </div>
     </div>

src/app/runs/page.tsx

@@ -14,7 +14,7 @@ import {
   TableCell,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
-import LiveRunRow from "./components/LiveRunNow";
+import LiveRunRow from "./components/LiveRunRow";
 import StatCard from "@/components/app/StatCard";
 import useAction from "@/hook/use-action";
 import { getLiveRuns } from "@/modules/live-run/actions";

src/components/app/Rank.tsx

@@ -0,0 +1,29 @@
+import { Trophy } from "lucide-react";
+
+export default function Rank({ rank }: { rank: number }) {
+  const getRankStyle = (rank: number) => {
+    if (rank === 1) return "rank-gold";
+    if (rank === 2) return "rank-silver";
+    if (rank === 3) return "rank-bronze";
+    return "bg-secondary text-muted-foreground";
+  };
+
+  const getRankGlow = (rank: number) => {
+    if (rank === 1) return "glow-gold";
+    if (rank === 2) return "glow-silver";
+    if (rank === 3) return "glow-bronze";
+    return "";
+  };
+
+  const isTopThree = rank <= 3;
+
+  return (
+    <div
+      className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(
+        rank,
+      )} ${getRankGlow(rank)}`}
+    >
+      {isTopThree ? <Trophy className="h-4 w-4" /> : rank}
+    </div>
+  );
+}

src/modules/leaderboard/actions.ts

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

src/modules/leaderboard/core.ts

@@ -1,3 +1,21 @@
 "use server";
 
+import { SupabaseClient } from "@supabase/supabase-js";
 import "server-only";
+import { LeaderboardUser } from "./types";
+
+export async function getGlobalLeaderboard(
+  supabase: SupabaseClient,
+): Promise<LeaderboardUser[]> {
+  const { data, error } = await supabase.rpc("get_global_leaderboard");
+  if (error) throw error;
+  return data;
+}
+
+export async function getWeeklyLeaderboard(
+  supabase: SupabaseClient,
+): Promise<LeaderboardUser[]> {
+  const { data, error } = await supabase.rpc("get_weekly_leaderboard");
+  if (error) throw error;
+  return data;
+}

src/modules/leaderboard/types.ts

@@ -1,11 +1,8 @@
-export type Leaderboard = LeaderboardRank[];
+export interface LeaderboardUser {
-
-export interface LeaderboardRank {
   rank: number;
+  user_id: string;
   username: string;
-  pb: string;
+  wins: number;
-  runsCount: number;
+  podiums: number;
-  problem: string;
+  problems_completed: number;
-  category: "any%" | "100%";
-  assisted: boolean;
 }

src/modules/problems/actions.ts

@@ -4,90 +4,5 @@ import * as Core from "./core";
 import { Problem } from "./types";
 
 export async function getProblems(): Promise<Problem[]> {
-  return [
+  return await Core.getProblems();
-    {
-      name: "Two Sum Dash",
-      difficulty: "easy" as const,
-      tags: ["arrays", "hash-map"],
-      bestTime: "0:42",
-      attempts: 12453,
-    },
-    {
-      name: "Binary Sprint",
-      difficulty: "easy" as const,
-      tags: ["binary-search"],
-      bestTime: "0:38",
-      attempts: 8921,
-    },
-    {
-      name: "Linked List Rush",
-      difficulty: "medium" as const,
-      tags: ["linked-list", "pointers"],
-      bestTime: "1:24",
-      attempts: 6234,
-    },
-    {
-      name: "Tree Traverse Blitz",
-      difficulty: "medium" as const,
-      tags: ["trees", "recursion"],
-      bestTime: "2:01",
-      attempts: 5102,
-    },
-    {
-      name: "DP Gauntlet",
-      difficulty: "hard" as const,
-      tags: ["dynamic-programming"],
-      bestTime: "4:32",
-      attempts: 2341,
-    },
-    {
-      name: "Graph Navigator",
-      difficulty: "hard" as const,
-      tags: ["graphs", "bfs", "dfs"],
-      bestTime: "3:45",
-      attempts: 3456,
-    },
-    {
-      name: "String Scramble",
-      difficulty: "easy" as const,
-      tags: ["strings", "manipulation"],
-      bestTime: "0:55",
-      attempts: 9876,
-    },
-    {
-      name: "Stack Overflow",
-      difficulty: "medium" as const,
-      tags: ["stacks", "queues"],
-      bestTime: "1:42",
-      attempts: 4567,
-    },
-    {
-      name: "Heap Hero",
-      difficulty: "hard" as const,
-      tags: ["heaps", "priority-queue"],
-      bestTime: "3:21",
-      attempts: 1890,
-    },
-    {
-      name: "Sliding Window Slam",
-      difficulty: "medium" as const,
-      tags: ["sliding-window", "arrays"],
-      bestTime: "1:56",
-      attempts: 5678,
-    },
-    {
-      name: "Trie Triumph",
-      difficulty: "hard" as const,
-      tags: ["trie", "strings"],
-      bestTime: "4:12",
-      attempts: 1234,
-    },
-    {
-      name: "Backtrack Blaster",
-      difficulty: "hard" as const,
-      tags: ["backtracking", "recursion"],
-      bestTime: "5:01",
-      attempts: 987,
-    },
-  ];
 }

src/modules/problems/core.ts

@@ -1,3 +1,46 @@
 "use server";
 
 import "server-only";
+import { ProblemDefinition } from "./types";
+
+const problems: ProblemDefinition[] = [
+  {
+    id: "fix-auth-callback",
+    title: "Fix the Broken Auth Callback",
+    description:
+      "Users can log in with OAuth, but sessions aren't persisted. Fix it.",
+    language: "typescript",
+    difficulty: "easy",
+    validate100: () => true,
+    validateAny: () => true,
+  },
+  {
+    id: "fix-prod-build",
+    title: "Patch a Failing Production Build",
+    description:
+      "Production build fails while development works. Fix the build.",
+    language: "javascript",
+    difficulty: "easy",
+    validate100: () => true,
+    validateAny: () => true,
+  },
+  {
+    id: "add-user-profile-endpoint",
+    title: "Implement Missing API Endpoint",
+    description: "The frontend expects `/api/me`. Implement it correctly.",
+    language: "go",
+    difficulty: "easy",
+    validate100: () => true,
+    validateAny: () => true,
+  },
+];
+
+export async function getProblems() {
+  return problems.map((def) => ({
+    id: def.id,
+    title: def.title,
+    description: def.description,
+    difficulty: def.difficulty,
+    language: def.language,
+  }));
+}

src/modules/problems/types.ts

@@ -1,7 +1,24 @@
+export type ProblemValidator = (submission: any) => boolean;
+
 export interface Problem {
-  name: string;
+  id: string;
+  title: string;
+  description: string;
   difficulty: "easy" | "medium" | "hard";
-  tags: string[];
+  language:
-  bestTime?: string;
+    | "rust"
-  attempts: number;
+    | "go"
+    | "java"
+    | "javascript"
+    | "typescript"
+    | "python"
+    | null;
+}
+
+export interface ProblemDefinition extends Problem {
+  /* Any% validator */
+  validateAny: ProblemValidator;
+  /* 100% validator */
+  validate100: ProblemValidator;
+  metadata?: Record<string, any>; // optional extra info like time limits, refs
 }