Single liverun type

src/app/run/components/RunTimer.tsx

@@ -1,4 +1,5 @@
 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";
 
@@ -7,21 +8,7 @@ export default function RunTimer({ runInfo }: { runInfo: LiveRun }) {
 
   useEffect(() => {
     // Update function calculates elapsed time
-    const updateTime = () => {
-      const elapsedMs = Date.now() - runInfo.start;
-
-      const totalSeconds = 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 = (totalSeconds % 60).toFixed(2);
-
-      setTime(
-        `${totalSeconds / 3600 >= 1 ? hours + ":" : ""}${minutes}:${seconds}`,
-      );
-    };
+    const updateTime = () => setTime(formatTime(Date.now() - runInfo.start));
 
     // Update immediately and then every second
     updateTime();

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,
-  problem,
-  category,
-  time,
-  pace,
-  status,
-}: any) {
-  const pacePositive = pace.startsWith("+");
-  const isTop = status === "pb";
+  run,
+}: {
+  index: number;
+  run: LiveRun;
+}) {
+  const now = new Date().getTime() + 1000;
+  const isTop = false;
 
   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

@@ -24,11 +24,7 @@ export default function LiveRuns() {
   const [liveRuns, liveRunsLoaded, liveRunsError] = useAction(getLiveRuns);
 
   // Sort top runners (status === 'pb') to the top
-  const sortedRuns = [...(liveRuns || [])].sort((a, b) => {
-    if (a.status === "pb" && b.status !== "pb") return -1;
-    if (a.status !== "pb" && b.status === "pb") return 1;
-    return 0;
-  });
+  const sortedRuns = [...(liveRuns || [])];
 
   return (
     <div className="min-h-screen pt-24 pb-16">
@@ -82,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>