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>
-        <Badge
-          className={
-            false
-              ? "bg-red-500/10 text-red-400"
-              : "bg-green-500/10 text-green-400"
-          }
-        >
-          0
-        </Badge>
-      </TableCell>
+      <TableCell>{isTop ? <Badge>{run.views}</Badge> : run.views}</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>