From 0d5a3292d4e94246457c6cc5306045ab85ed4e08 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 16:30:04 +0100
Subject: [PATCH] Live run layout

---
 src/app/run/page.tsx | 261 ++++++++++++++-----------------------------
 1 file changed, 81 insertions(+), 180 deletions(-)

diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index db633a3..5df6132 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -2,7 +2,21 @@ import { Play, Pause, RotateCcw, Flag, ChevronRight } from "lucide-react";
 import SplitRow from "@/components/app/SplitRow";
 import { Button } from "@/components/ui/button";
 
-const Run = () => {
+type RunInfo = {
+  category: "any%" | "100%";
+  problems: number;
+  currentAttempt: number;
+  pbTime: string;
+  worldRecord: string;
+};
+
+type ChatMessage = {
+  user: string;
+  message: string;
+  time: string;
+};
+
+export default function Run() {
   const splits = [
     {
       problemName: "Two Sum Dash",
@@ -42,194 +56,81 @@ const Run = () => {
     },
   ];
 
-  const runInfo = {
-    category: "Any% Easy",
+  const runInfo: RunInfo = {
+    category: "any%",
     problems: 5,
     pbTime: "4:35",
     worldRecord: "3:58",
     currentAttempt: 47,
   };
 
+  const chatMessages = [
+    { user: "Alice", message: "Nice split!", time: "1:53" },
+    { user: "Bob", message: "Watch out for the string problem!", time: "1:54" },
+    { user: "Charlie", message: "PB incoming? 👀", time: "1:55" },
+  ];
+
   return (
-    <div className="min-h-screen pt-24 pb-16">
-      <div className="container mx-auto px-6">
-        <div className="grid lg:grid-cols-3 gap-8">
-          {/* Main Timer Area */}
-          <div className="lg:col-span-2">
-            {/* Category Header */}
-            <div className="flex items-center justify-between mb-6">
-              <div>
-                <div className="flex items-center gap-2 text-muted-foreground text-sm mb-1">
-                  <span>Category</span>
-                  <ChevronRight className="h-4 w-4" />
-                  <span className="text-primary">{runInfo.category}</span>
-                </div>
-                <h1 className="text-3xl font-bold text-foreground">
-                  Current Run
-                </h1>
-              </div>
-              <div className="text-right">
-                <p className="text-sm text-muted-foreground">
-                  Attempt #{runInfo.currentAttempt}
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  WR:{" "}
-                  <span className="text-primary font-mono">
-                    {runInfo.worldRecord}
-                  </span>
-                </p>
-              </div>
-            </div>
+    <div className="h-svh px-20 pt-24 pb-12 flex">
+      {/* Editor */}
+      <div className="h-full w-full"></div>
 
-            {/* Timer Display */}
-            <div className="bg-card border border-border rounded-2xl p-8 mb-6 text-center relative overflow-hidden">
-              {/* Background glow */}
-              <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
-
-              <div className="relative">
-                {/* Timer */}
-                <div className="mb-6">
-                  <p className="timer-display text-primary">1:52.34</p>
-                  <p className="text-muted-foreground mt-2 font-mono text-sm">
-                    PB: {runInfo.pbTime} | Diff:{" "}
-                    <span className="text-red-400">+0:12</span>
-                  </p>
-                </div>
-
-                {/* Progress bar */}
-                <div className="w-full bg-secondary rounded-full h-2 mb-6">
-                  <div
-                    className="bg-primary h-2 rounded-full transition-all duration-300 glow-purple"
-                    style={{ width: "40%" }}
-                  />
-                </div>
-
-                {/* Controls */}
-                <div className="flex items-center justify-center gap-4">
-                  <Button variant="outline" size="lg" className="gap-2">
-                    <RotateCcw className="h-5 w-5" />
-                    Reset
-                  </Button>
-                  <Button variant="hero" size="xl" className="gap-2">
-                    <Pause className="h-6 w-6" />
-                    Pause
-                  </Button>
-                  <Button variant="destructive" size="lg" className="gap-2">
-                    <Flag className="h-5 w-5" />
-                    End Run
-                  </Button>
-                </div>
-              </div>
-            </div>
-
-            {/* Current Problem */}
-            <div className="bg-card border border-primary/30 rounded-xl p-6 glow-purple">
-              <div className="flex items-center justify-between mb-4">
-                <div>
-                  <p className="text-sm text-primary font-medium">
-                    Problem 3 of 5
-                  </p>
-                  <h2 className="text-2xl font-bold text-foreground">
-                    String Scramble
-                  </h2>
-                </div>
-                <span className="px-3 py-1 rounded-lg diff-easy text-sm font-medium">
-                  Easy
-                </span>
-              </div>
-
-              <div className="flex flex-wrap gap-2 mb-4">
-                <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
-                  strings
-                </span>
-                <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
-                  manipulation
-                </span>
-              </div>
-
-              <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                <span>
-                  PB Split: <span className="text-primary font-mono">0:55</span>
-                </span>
-                <span>|</span>
-                <span>
-                  Best: <span className="text-emerald-400 font-mono">0:38</span>
-                </span>
-              </div>
-
-              <Button className="w-full mt-6 gap-2" variant="default">
-                <Play className="h-5 w-5" />
-                Complete Split
-              </Button>
-            </div>
-          </div>
-
-          {/* Splits Sidebar */}
-          <div className="lg:col-span-1">
-            <div className="bg-card border border-border rounded-xl p-4">
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="font-semibold text-foreground">Splits</h3>
-                <span className="text-xs text-muted-foreground">
-                  2/5 Complete
-                </span>
-              </div>
-
-              <div className="space-y-2">
-                {splits.map((split) => (
-                  <SplitRow key={split.problemName} {...split} />
-                ))}
-              </div>
-
-              {/* Sum of Best */}
-              <div className="mt-6 pt-4 border-t border-border">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">Sum of Best</span>
-                  <span className="font-mono text-emerald-400">3:51</span>
-                </div>
-                <div className="flex items-center justify-between text-sm mt-2">
-                  <span className="text-muted-foreground">Personal Best</span>
-                  <span className="font-mono text-primary">
-                    {runInfo.pbTime}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Quick Stats */}
-            <div className="bg-card border border-border rounded-xl p-4 mt-4">
-              <h3 className="font-semibold text-foreground mb-4">
-                Session Stats
-              </h3>
-              <div className="space-y-3">
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground text-sm">
-                    Runs Today
-                  </span>
-                  <span className="font-mono text-foreground">12</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground text-sm">
-                    Clean Runs
-                  </span>
-                  <span className="font-mono text-emerald-400">3</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground text-sm">Resets</span>
-                  <span className="font-mono text-red-400">9</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground text-sm">
-                    Time Played
-                  </span>
-                  <span className="font-mono text-foreground">1:42:31</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+      {/* Timer & Chat */}
+      <div className="flex flex-col gap-6 h-full">
+        <Timer runInfo={runInfo} />
+        <Chat chatMessages={chatMessages} />
       </div>
     </div>
   );
-};
+}
 
-export default Run;
+function Timer({ runInfo }: { runInfo: RunInfo }) {
+  return (
+    <div className="bg-card border border-border rounded-2xl p-6 text-center relative">
+      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
+      <div className="relative">
+        <p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
+        <p className="text-muted-foreground mt-2 font-mono text-sm">
+          PB: {runInfo.pbTime} | Diff:{" "}
+          <span className="text-red-400">+0:12</span>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Chat({ chatMessages }: { chatMessages: ChatMessage[] }) {
+  return (
+    <div className="h-full flex flex-col flex-1 w-sm bg-card border border-border rounded-xl p-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-semibold text-foreground">Chat</h3>
+        <span className="text-xs text-muted-foreground">
+          {chatMessages.length} messages
+        </span>
+      </div>
+
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto space-y-2">
+        {chatMessages.map((msg, idx) => (
+          <div key={idx} className="bg-secondary/50 rounded-lg p-2">
+            <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
+            <span className="text-muted-foreground">{msg.message}</span>
+            <span className="text-xs text-muted-foreground ml-2">
+              {msg.time}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Input */}
+      <div className="mt-4">
+        <input
+          type="text"
+          placeholder="Type a message..."
+          className="w-full rounded-lg border border-border p-2 text-sm bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+    </div>
+  );
+}