Views in live runs page

src/app/runs/components/LiveRunRow.tsx

@@ -16,7 +16,7 @@ export default function LiveRunRow({
   run: LiveRun;
 }) {
   const now = new Date().getTime() + 1000;
-  const isTop = false;
+  const isTop = run.views > 5;
 
   return (
     <TableRow
@@ -48,17 +48,7 @@ export default function LiveRunRow({
         {formatTime(now - run.start, false)}
       </TableCell>
 
-      <TableCell>
+      <TableCell>{isTop ? <Badge>{run.views}</Badge> : run.views}</TableCell>
-        <Badge
-          className={
-            false
-              ? "bg-red-500/10 text-red-400"
-              : "bg-green-500/10 text-green-400"
-          }
-        >
-          0
-        </Badge>
-      </TableCell>
 
       <TableCell>
         <div className="flex items-center gap-2 text-sm">

src/app/runs/page.tsx

@@ -4,7 +4,6 @@ import { Zap, Users, Timer, TrendingUp, Eye } from "lucide-react";
 
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
@@ -13,9 +12,7 @@ import {
   TableRow,
   TableCell,
 } from "@/components/ui/table";
-import { cn } from "@/lib/utils";
 import LiveRunRow from "./components/LiveRunRow";
-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";
@@ -33,23 +30,10 @@ export default function LiveRuns() {
         <div>
           <h1 className="text-4xl font-bold">Live Runs</h1>
           <p className="text-muted-foreground">
-            Watch runners compete in real time. Every second counts.
+            42 live runs · Streaming in real time
           </p>
         </div>
 
-        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Zap} label="Live Runs" value="42" index={0} />
-          <StatCard icon={Users} label="Active Runners" value="39" index={1} />
-          <StatCard icon={Timer} label="Avg Runtime" value="1:47" index={2} />
-          <StatCard
-            icon={TrendingUp}
-            label="PB Pace Runs"
-            value="7"
-            index={3}
-          />
-        </div>
-
         {/* Filters */}
         <div className="flex flex-wrap gap-2">
           <ToggleGroup variant="outline" type="single" defaultValue="any">
@@ -70,7 +54,7 @@ export default function LiveRuns() {
                 <TableHead className="pl-5">Runner</TableHead>
                 <TableHead>Problem</TableHead>
                 <TableHead>Time</TableHead>
-                <TableHead>Pace</TableHead>
+                <TableHead>Views</TableHead>
                 <TableHead>Status</TableHead>
                 <TableHead className="pr-5" />
               </TableRow>

src/modules/live-run/actions.ts

@@ -16,12 +16,14 @@ export async function getLiveRuns(): Promise<LiveRun[]> {
       username: "speedmaster_x",
       problem: "Two Sum Dash",
       category: "any%",
+      views: 670,
       runsCount: 1,
       start: new Date().getTime(),
     },
     {
       id: "2",
       username: "algo_ninja",
+      views: 3,
       problem: "Binary Sprint",
       category: "any%",
       runsCount: 1,
@@ -30,6 +32,7 @@ export async function getLiveRuns(): Promise<LiveRun[]> {
     {
       id: "3",
       username: "stackattack",
+      views: 3,
       problem: "String Scramble",
       category: "any%",
       runsCount: 1,
@@ -38,6 +41,7 @@ export async function getLiveRuns(): Promise<LiveRun[]> {
     {
       id: "4",
       username: "reset_king",
+      views: 3,
       problem: "Linked List Rush",
       category: "any%",
       runsCount: 1,
@@ -51,6 +55,7 @@ export async function getLiveRun(): Promise<LiveRun> {
     id: "0",
     username: "selimaj",
     start: new Date().getTime(),
+    views: 230,
     problem: "solve",
     category: "any%",
     runsCount: 0,

src/modules/live-run/types.ts

@@ -1,6 +1,7 @@
 export interface LiveRun {
   id: string;
   username: string;
+  views: number;
   start: number;
   runsCount: number;
   problem: string;