Merge pull request #9 from orus-dev/ui-and-structure

UI and structure

package-lock.json

@@ -8,6 +8,13 @@
       "name": "dev-run",
       "version": "0.1.0",
       "dependencies": {
+        "@codemirror/lang-go": "^6.0.1",
+        "@codemirror/lang-java": "^6.0.2",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-python": "^6.2.1",
+        "@codemirror/lang-rust": "^6.0.2",
+        "@lezer/highlight": "^1.2.3",
         "@radix-ui/react-accordion": "^1.2.11",
         "@radix-ui/react-alert-dialog": "^1.1.14",
         "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -56,7 +63,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
-        "@types/node": "^20.19.30",
+        "@types/node": "^20.19.32",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "tailwindcss": "^4",
@@ -110,6 +117,77 @@
         "@lezer/common": "^1.1.0"
       }
     },
+    "node_modules/@codemirror/lang-go": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-go/-/lang-go-6.0.1.tgz",
+      "integrity": "sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/go": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-java": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.2.tgz",
+      "integrity": "sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/java": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
+      "integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-python": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
+      "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.3.2",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/python": "^1.1.4"
+      }
+    },
+    "node_modules/@codemirror/lang-rust": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.2.tgz",
+      "integrity": "sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/rust": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/language": {
       "version": "6.12.1",
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.1.tgz",
@@ -755,6 +833,17 @@
       "integrity": "sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==",
       "license": "MIT"
     },
+    "node_modules/@lezer/go": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@lezer/go/-/go-1.0.1.tgz",
+      "integrity": "sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
     "node_modules/@lezer/highlight": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
@@ -764,6 +853,39 @@
         "@lezer/common": "^1.3.0"
       }
     },
+    "node_modules/@lezer/java": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.3.tgz",
+      "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
+      "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@lezer/lr": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
@@ -773,6 +895,28 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@lezer/python": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.18.tgz",
+      "integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/rust": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
+      "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@marijn/find-cluster-break": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
@@ -3182,9 +3326,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.30",
+      "version": "20.19.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.32.tgz",
-      "integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==",
+      "integrity": "sha512-Ez8QE4DMfhjjTsES9K2dwfV258qBui7qxUsoaixZDiTzbde4U12e1pXGNu/ECsUIOi5/zoCxAQxIhQnaUQ2VvA==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"

package.json

@@ -8,6 +8,13 @@
     "start": "next start"
   },
   "dependencies": {
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@lezer/highlight": "^1.2.3",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -56,7 +63,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
-    "@types/node": "^20.19.30",
+    "@types/node": "^20.19.32",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "tailwindcss": "^4",

src/app/globals.css

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

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

@@ -30,13 +30,13 @@ 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 [weekly, weeklyLoaded, weeklyError] = useAction(getWeeklyLeaderboard);
 
   const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
-  const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
   const data = (activeTab === "global" ? global : weekly) || [];
 
   return (
@@ -86,26 +86,34 @@ export default function Leaderboards() {
           >
             <TabsList>
               <TabsTrigger value="global">
-                <Globe className="mr-2 h-4 w-4" />
+                <Globe className="h-4 w-4" />
                 Global
               </TabsTrigger>
               <TabsTrigger value="weekly">
-                <Calendar className="mr-2 h-4 w-4" />
+                <Calendar className="h-4 w-4" />
-                Weekly
+                This week
               </TabsTrigger>
             </TabsList>
           </Tabs>
 
           <div className="flex flex-wrap gap-2">
-            {categories.map((cat, i) => (
+            <ToggleGroup variant="outline" type="single" defaultValue="any">
-              <Badge
+              <ToggleGroupItem value="any" aria-label="any%">
-                key={cat}
+                any%
-                variant={i === 0 ? "default" : "outline"}
+              </ToggleGroupItem>
-                className="cursor-pointer"
+              <ToggleGroupItem value="100" aria-label="100%">
-              >
+                100%
-                {cat}
+              </ToggleGroupItem>
-              </Badge>
+            </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>
 
@@ -114,16 +122,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/app/problems/components/ProblemCard.tsx

@@ -32,16 +32,17 @@ const ProblemCard = ({
 
   return (
     <div
-      className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`}
+      className="group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0 h-full flex flex-col justify-between"
       style={{
         animationDelay: `${index * 0.1}s`,
         animationFillMode: "forwards",
       }}
     >
       {/* Glow effect on hover */}
-      <div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      <div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
 
-      <div className="relative">
+      {/* Content */}
+      <div className="relative flex flex-col h-full">
         {/* Header */}
         <div className="flex items-start justify-between mb-3">
           <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
@@ -66,8 +67,12 @@ const ProblemCard = ({
           ))}
         </div>
 
-        {/* Stats */}
+        {/* Spacer */}
-        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+        <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">
                 <Clock className="h-4 w-4 text-primary" />
@@ -80,14 +85,15 @@ const ProblemCard = ({
             </div>
           </div>
 
-        {/* Quick run button - appears on hover */}
+          {/* Quick run button */}
-        <div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
+          <div className="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

@@ -16,7 +16,6 @@ export default function Problems() {
 
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
 
-  const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
   const difficulties = ["All", "Easy", "Medium", "Hard"];
 
   return (
@@ -40,28 +39,24 @@ export default function Problems() {
 
           {/* Category Filter */}
           <div className="flex flex-wrap gap-2">
-            {categories.map((cat, i) => (
+            <ToggleGroup variant="outline" type="multiple">
-              <Badge
+              {["Arrays", "Trees", "Graphs", "DP", "Strings"].map((f) => (
-                key={cat}
+                <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
-                variant={i === 0 ? "default" : "secondary"}
+                  {f}
-                className="cursor-pointer"
+                </ToggleGroupItem>
-              >
-                {cat}
-              </Badge>
               ))}
+            </ToggleGroup>
           </div>
 
           {/* Difficulty Filter */}
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
-            {difficulties.map((diff, i) => (
+            <ToggleGroup variant="outline" type="multiple">
-              <Button
+              {["Easy", "Medium", "Hard"].map((f) => (
-                key={diff}
+                <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
-                variant={i === 0 ? "outline" : "ghost"}
+                  {f}
-                size="sm"
+                </ToggleGroupItem>
-              >
-                {diff}
-              </Button>
               ))}
+            </ToggleGroup>
           </div>
 
           {/* View Toggle */}

src/app/run/components/Editor.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import CodeMirror, { EditorState, EditorView } from "@uiw/react-codemirror";
+import { devRun } from "./theme";
+import { javascript } from "@codemirror/lang-javascript";
+import { rust } from "@codemirror/lang-rust";
+import { go } from "@codemirror/lang-go";
+import { json } from "@codemirror/lang-json";
+import { python } from "@codemirror/lang-python";
+import { java } from "@codemirror/lang-java";
+import { useEffect, useState } from "react";
+import useAction from "@/hook/use-action";
+import { getLiveRunMoves } from "@/modules/live-run/actions";
+
+type Language =
+  | "javascript"
+  | "typescript"
+  | "rust"
+  | "go"
+  | "python"
+  | "java"
+  | "json";
+
+function getLanguageExtension(lang: Language) {
+  switch (lang) {
+    case "javascript":
+      return javascript();
+    case "rust":
+      return rust();
+    case "go":
+      return go();
+    case "python":
+      return python();
+    case "java":
+      return java();
+    case "json":
+      return json();
+    default:
+      return javascript();
+  }
+}
+
+type Move = {
+  latency: number;
+  cursor: number;
+  changes: {
+    from: number;
+    to: number;
+    insert: string;
+  };
+};
+
+export default function Editor() {
+  const [editorView, setEditorView] = useState<EditorView>();
+  const [moves] = useAction<Move[]>(getLiveRunMoves);
+
+  useEffect(() => {
+    if (!editorView || !moves) return;
+
+    let cancelled = false;
+
+    const executeMove = async (move: Move) => {
+      return new Promise<void>((resolve) => {
+        const timeout = setTimeout(() => {
+          if (!editorView || cancelled) return resolve();
+
+          editorView.dispatch({
+            selection: { anchor: move.cursor },
+            scrollIntoView: true,
+            changes: move.changes,
+          });
+
+          resolve();
+        }, move.latency);
+
+        return () => clearTimeout(timeout);
+      });
+    };
+
+    (async () => {
+      if (!moves) return;
+      for (const move of moves) {
+        if (cancelled) break;
+        await executeMove(move);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [editorView, moves]);
+
+  return (
+    <CodeMirror
+      readOnly
+      className="h-full w-full"
+      value={``}
+      extensions={[
+        getLanguageExtension("javascript"),
+        EditorState.transactionFilter.of((tr) => {
+          if (tr.selection && tr.isUserEvent("select")) {
+            return [];
+          }
+          return tr;
+        }),
+      ]}
+      theme={devRun}
+      onCreateEditor={(view) => {
+        view.focus();
+        setEditorView(view);
+      }}
+    />
+  );
+}

src/app/run/components/RunTimer.tsx

@@ -1,23 +1,27 @@
 import { Card, CardContent } from "@/components/ui/card";
+import formatTime from "@/lib/time-format";
+import { LiveRun } from "@/modules/live-run/types";
+import { useEffect, useState } from "react";
 
-export type RunInfo = {
+export default function RunTimer({ runInfo }: { runInfo: LiveRun }) {
-  category: "any%" | "100%";
+  const [time, setTime] = useState("00:00:00");
-  problems: number;
+
-  currentAttempt: number;
+  useEffect(() => {
-  pbTime: string;
+    // Update function calculates elapsed time
-  worldRecord: string;
+    const updateTime = () => setTime(formatTime(Date.now() - runInfo.start));
-};
+
+    // Update immediately and then every second
+    updateTime();
+    const interval = setInterval(updateTime, 50);
+
+    return () => clearInterval(interval); // cleanup on unmount
+  }, [runInfo.start]);
 
-export default function RunTimer({ runInfo }: { runInfo: RunInfo }) {
   return (
-    <Card className="relative text-center overflow-hidden">
+    <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">
+      <CardContent className="relative flex justify-center items-center h-full">
-        <p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
+        <p className="timer-display text-primary text-4xl font-bold">{time}</p>
-        <p className="mt-2 font-mono text-sm text-muted-foreground">
-          PB: {runInfo.pbTime} | Diff:{" "}
-          <span className="text-red-400">+0:12</span>
-        </p>
       </CardContent>
     </Card>
   );

src/app/run/components/theme.ts

@@ -0,0 +1,119 @@
+import { EditorView } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+
+/**
+ * devRun — direct CodeMirror 6 theme
+ * Based on thememirror (dracula), app-integrated
+ */
+export const devRun = [
+  EditorView.theme(
+    {
+      "&": {
+        backgroundColor: "var(--card)",
+        color: "#e6e6eb",
+      },
+
+      ".cm-content": {
+        caretColor: "var(--primary)",
+      },
+
+      ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: "var(--primary)",
+      },
+
+      "&.cm-focused .cm-selectionBackground, .cm-content ::selection": {
+        backgroundColor: "rgba(120, 120, 150, 0.25)",
+      },
+
+      ".cm-activeLine": {
+        backgroundColor: "rgba(255, 255, 255, 0.03)",
+      },
+
+      ".cm-gutters": {
+        backgroundColor: "var(--card)",
+        color: "rgb(120, 122, 128)",
+        border: "none",
+      },
+
+      ".cm-activeLineGutter": {
+        backgroundColor: "rgba(255, 255, 255, 0.03)",
+      },
+
+      // - Scrollbar -
+      ".cm-scroller": {
+        scrollbarWidth: "thin",
+        scrollbarColor: "rgba(201, 133, 255, 0.3) transparent",
+      },
+    },
+    { dark: true },
+  ),
+
+  syntaxHighlighting(
+    HighlightStyle.define([
+      // Comments — low priority, low contrast
+      {
+        tag: t.comment,
+        color: "#5f6a8a",
+        fontStyle: "italic",
+      },
+
+      // Strings & literals — data, not logic
+      {
+        tag: [t.string, t.special(t.brace)],
+        color: "#f4e58c",
+      },
+
+      // Numbers / booleans — benchmarks & truth
+      {
+        tag: [t.number, t.bool, t.null],
+        color: "#c792ea",
+        fontWeight: "500",
+      },
+
+      // Keywords & operators — decisions & flow
+      {
+        tag: [t.keyword, t.operator],
+        color: "#ff5fa2",
+        fontWeight: "600",
+      },
+
+      // Types & definitions — structure
+      {
+        tag: [t.definitionKeyword, t.typeName],
+        color: "#6be6ff",
+      },
+
+      // Type definitions — neutral, readable
+      {
+        tag: t.definition(t.typeName),
+        color: "#e6e6eb",
+      },
+
+      // Functions, classes, props — execution paths
+      {
+        tag: [
+          t.className,
+          t.definition(t.propertyName),
+          t.function(t.variableName),
+          t.attributeName,
+        ],
+        color: "#4dff9f",
+        fontWeight: "500",
+      },
+
+      // Variables — slightly muted, context-aware
+      {
+        tag: t.variableName,
+        color: "#cfd3dc",
+      },
+
+      // Invalid / errors — instant attention
+      {
+        tag: t.invalid,
+        color: "#ff5555",
+        fontWeight: "700",
+      },
+    ]),
+  ),
+];

src/app/run/page.tsx

@@ -1,23 +1,18 @@
 "use client";
 
-import CodeMirror, { EditorState } from "@uiw/react-codemirror";
-import { vscodeDark } from "@uiw/codemirror-theme-vscode";
-
 import { Card, CardContent } from "@/components/ui/card";
-import RunTimer, { RunInfo } from "./components/RunTimer";
+import RunTimer from "./components/RunTimer";
 import RunChat, { ChatMessage } from "./components/RunChat";
-import { useState } from "react";
 import { FileTree } from "./components/FileTree";
 import { File } from "lucide-react";
+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";
 
 export default function Run() {
-  const runInfo: RunInfo = {
+  const [runInfo] = useAction(getLiveRun);
-    category: "any%",
-    problems: 5,
-    pbTime: "4:35",
-    worldRecord: "3:58",
-    currentAttempt: 47,
-  };
 
   const chatMessages: ChatMessage[] = [
     { user: "Alice", message: "Nice split!", time: "1:53" },
@@ -27,6 +22,21 @@ export default function Run() {
 
   return (
     <div className="h-svh px-20 pt-24 pb-12 flex gap-8">
+      <div className="h-full w-full flex flex-col gap-4">
+        <div className="w-full flex gap-5">
+          <div className="flex-1 animate-fade-in opacity-0 duration-1000">
+            <ProfileCard user={{ username: "selimaj", rank: 1 }} />
+          </div>
+
+          <div className="flex-1 animate-fade-in opacity-0 duration-1000">
+            {runInfo && <RunTimer runInfo={runInfo} />}
+          </div>
+
+          <div className="flex-1">
+            <ProblemCard name="Idk" difficulty="hard" tags={[]} attempts={0} />
+          </div>
+        </div>
+
         {/* Editor */}
         <Card className="flex-1 overflow-hidden">
           <CardContent className="flex h-full">
@@ -53,37 +63,16 @@ export default function Run() {
               <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-5">
+                <Editor />
-              <CodeMirror
-                readOnly
-                className="h-full w-full"
-                value="yo"
-                extensions={[
-                  EditorState.transactionFilter.of((tr) => {
-                    if (tr.selection && tr.isUserEvent("select")) {
-                      return [];
-                    }
-                    return tr;
-                  }),
-                ]}
-                theme={vscodeDark}
-                onCreateEditor={(view) => {
-                  view.focus();
-                  view.dispatch({
-                    selection: { anchor: 1 },
-                    scrollIntoView: true,
-                  });
-                }}
-              />
               </div>
             </div>
           </CardContent>
         </Card>
+      </div>
 
       {/* Timer & Chat */}
-      <div className="flex flex-col gap-6 h-full w-sm">
+      <div className="h-full w-lg flex">
-        <RunTimer runInfo={runInfo} />
         <RunChat chatMessages={chatMessages} />
       </div>
     </div>

src/app/runs/components/LiveRunNow.tsx

@@ -5,18 +5,18 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { TableRow, TableCell } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
+import { LiveRun } from "@/modules/live-run/types";
+import formatTime from "@/lib/time-format";
 
 export default function LiveRunRow({
   index,
-  username,
+  run,
-  problem,
+}: {
-  category,
+  index: number;
-  time,
+  run: LiveRun;
-  pace,
+}) {
-  status,
+  const now = new Date().getTime() + 1000;
-}: any) {
+  const isTop = false;
-  const pacePositive = pace.startsWith("+");
-  const isTop = status === "pb";
 
   return (
     <TableRow
@@ -30,14 +30,14 @@ export default function LiveRunRow({
       }}
     >
       <TableCell className="font-medium pl-5">
-        {isTop ? `🔥 ${username}` : username}
+        {isTop ? `🔥 ${run.username}` : run.username}
       </TableCell>
 
       <TableCell>
         <div className="flex flex-col gap-1">
-          <span>{problem}</span>
+          <span>{run.problem}</span>
           <Badge variant="outline" className="w-fit text-xs">
-            {category}
+            {run.category}
           </Badge>
         </div>
       </TableCell>
@@ -45,18 +45,18 @@ export default function LiveRunRow({
       <TableCell
         className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
       >
-        {time}
+        {formatTime(now - run.start, false)}
       </TableCell>
 
       <TableCell>
         <Badge
           className={
-            pacePositive
+            false
               ? "bg-red-500/10 text-red-400"
               : "bg-green-500/10 text-green-400"
           }
         >
-          {pace}
+          0
         </Badge>
       </TableCell>
 

src/app/runs/page.tsx

@@ -18,16 +18,13 @@ import LiveRunRow from "./components/LiveRunNow";
 import StatCard from "@/components/app/StatCard";
 import useAction from "@/hook/use-action";
 import { getLiveRuns } from "@/modules/live-run/actions";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 export default function LiveRuns() {
   const [liveRuns, liveRunsLoaded, liveRunsError] = useAction(getLiveRuns);
 
   // Sort top runners (status === 'pb') to the top
-  const sortedRuns = [...(liveRuns || [])].sort((a, b) => {
+  const sortedRuns = [...(liveRuns || [])];
-    if (a.status === "pb" && b.status !== "pb") return -1;
-    if (a.status !== "pb" && b.status === "pb") return 1;
-    return 0;
-  });
 
   return (
     <div className="min-h-screen pt-24 pb-16">
@@ -55,13 +52,14 @@ export default function LiveRuns() {
 
         {/* Filters */}
         <div className="flex flex-wrap gap-2">
-          {["Any%", "100%", "Easy", "Hard"].map((cat) => (
+          <ToggleGroup variant="outline" type="single" defaultValue="any">
-            <Badge key={cat} variant="outline" className="cursor-pointer">
+            <ToggleGroupItem value="any" aria-label="any%">
-              {cat}
+              any%
-            </Badge>
+            </ToggleGroupItem>
-          ))}
+            <ToggleGroupItem value="100" aria-label="100%">
-
+              100%
-          <Badge className="bg-primary/10 text-primary">🔥 PB Pace</Badge>
+            </ToggleGroupItem>
+          </ToggleGroup>
         </div>
 
         {/* Table */}
@@ -80,7 +78,7 @@ export default function LiveRuns() {
 
             <TableBody>
               {sortedRuns.map((run, index) => (
-                <LiveRunRow key={run.id} {...run} index={index} />
+                <LiveRunRow key={run.id} index={index} run={run} />
               ))}
             </TableBody>
           </Table>

src/components/app/ProfileCard.tsx

@@ -0,0 +1,37 @@
+import { Badge } from "../ui/badge";
+import { Card, CardContent } from "../ui/card";
+
+export default function ProfileCard({
+  user,
+}: {
+  user: { username: string; rank: number };
+}) {
+  return (
+    <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">
+        {/* Avatar */}
+        <div className="relative shrink-0 w-full md:w-1/4 h-1/3 md: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">
+            #{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">
+            {user.username}
+          </h1>
+          <Badge>World Record Holder</Badge>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/lib/time-format.ts

@@ -0,0 +1,15 @@
+export default function formatTime(elapsedMs: number, formatMs = true) {
+  const totalSeconds = formatMs
+    ? elapsedMs / 1000
+    : Math.floor(elapsedMs / 1000);
+  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, "0");
+  const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(
+    2,
+    "0",
+  );
+  const seconds = formatMs
+    ? (totalSeconds % 60).toFixed(2).padStart(2, "0")
+    : (totalSeconds % 60).toString().padStart(2, "0");
+
+  return `${totalSeconds / 3600 >= 1 ? hours + ":" : ""}${minutes}:${seconds}`;
+}

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;
 }

src/modules/live-run/actions.ts

@@ -3,50 +3,92 @@
 import { createClient } from "@/lib/supabase/server";
 import { getSession, getSessionRedirect } from "../account/core";
 import * as Core from "./core";
-import { Run } from "./types";
+import { LiveRun } from "./types";
-import { redirect } from "next/navigation";
 
-export async function getLiveRuns(): Promise<Run[]> {
+export async function getLiveRuns(): Promise<LiveRun[]> {
   const supabase = await createClient();
 
   const _ = await getSession(supabase);
 
   return [
     {
-      id: 1,
+      id: "1",
       username: "speedmaster_x",
       problem: "Two Sum Dash",
-      category: "Any%",
+      category: "any%",
-      time: "1:52.34",
+      runsCount: 1,
-      pace: "-0:03",
+      start: new Date().getTime(),
-      status: "pb",
     },
     {
-      id: 2,
+      id: "2",
       username: "algo_ninja",
       problem: "Binary Sprint",
-      category: "Any%",
+      category: "any%",
-      time: "2:04.11",
+      runsCount: 1,
-      pace: "+0:05",
+      start: new Date().getTime(),
-      status: "normal",
     },
     {
-      id: 3,
+      id: "3",
       username: "stackattack",
       problem: "String Scramble",
-      category: "Easy",
+      category: "any%",
-      time: "0:48.92",
+      runsCount: 1,
-      pace: "-0:01",
+      start: new Date().getTime(),
-      status: "pb",
     },
     {
-      id: 4,
+      id: "4",
       username: "reset_king",
       problem: "Linked List Rush",
-      category: "Any%",
+      category: "any%",
-      time: "1:31.77",
+      runsCount: 1,
-      pace: "+0:12",
+      start: new Date().getTime(),
-      status: "danger",
     },
   ];
 }
+
+export async function getLiveRun(): Promise<LiveRun> {
+  return {
+    id: "0",
+    username: "selimaj",
+    start: new Date().getTime(),
+    problem: "solve",
+    category: "any%",
+    runsCount: 0,
+  };
+}
+
+export async function getLiveRunMoves() {
+  const code = `// Import the necessary React library features
+import { createRoot } from 'react-dom/client';
+
+// Define a functional component named "App"
+// Component names must start with a capital letter
+function App() {
+  // Components return JSX markup
+  return (
+    <h1>Hello, world!</h1>
+  );
+}
+
+// Target a DOM element in your HTML (e.g., <div id="root"></div>)
+const domNode = document.getElementById('root');
+
+// Create a root and render your component into the DOM
+const root = createRoot(domNode);
+root.render(<App />);`.repeat(3);
+
+  const chunks = [];
+  for (let i = 0; i < code.length; i += 4) {
+    chunks.push(code.slice(i, i + 4));
+  }
+
+  return chunks.map((chunk, index) => ({
+    latency: 120, // 100ms per chunk
+    cursor: index * 4, // approximate cursor position
+    changes: {
+      from: index * 4,
+      to: index * 4,
+      insert: chunk,
+    },
+  }));
+}

src/modules/live-run/types.ts

@@ -1,9 +1,8 @@
-export interface Run {
+export interface LiveRun {
-  id: number;
+  id: string;
   username: string;
+  start: number;
+  runsCount: number;
   problem: string;
-  category: string;
+  category: "any%" | "100%";
-  time: string;
-  pace: string;
-  status: string;
 }