From 5ea19d106c1c29f9e52c3727fc72307602579690 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:08:25 +0100
Subject: [PATCH] Run components

---
 src/app/problems/components/RunChat.tsx  | 48 +++++++++++++++
 src/app/problems/components/RunTimer.tsx | 24 ++++++++
 src/app/run/page.tsx                     | 74 +-----------------------
 3 files changed, 75 insertions(+), 71 deletions(-)
 create mode 100644 src/app/problems/components/RunChat.tsx
 create mode 100644 src/app/problems/components/RunTimer.tsx

diff --git a/src/app/problems/components/RunChat.tsx b/src/app/problems/components/RunChat.tsx
new file mode 100644
index 0000000..9516d3b
--- /dev/null
+++ b/src/app/problems/components/RunChat.tsx
@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+
+export type ChatMessage = {
+  user: string;
+  message: string;
+  time: string;
+};
+
+export default function RunChat({
+  chatMessages,
+}: {
+  chatMessages: ChatMessage[];
+}) {
+  return (
+    <Card className="flex flex-col flex-1">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Chat</CardTitle>
+          <span className="text-xs text-muted-foreground">
+            {chatMessages.length} messages
+          </span>
+        </div>
+      </CardHeader>
+
+      <Separator />
+
+      <CardContent className="flex flex-col flex-1 gap-3">
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto space-y-2">
+          {chatMessages.map((msg, i) => (
+            <div key={i} className="rounded-lg bg-secondary/50 p-2 text-sm">
+              <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
+              <span className="text-muted-foreground">{msg.message}</span>
+              <span className="ml-2 text-xs text-muted-foreground">
+                {msg.time}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* Input */}
+        <Input placeholder="Type a message…" />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/app/problems/components/RunTimer.tsx b/src/app/problems/components/RunTimer.tsx
new file mode 100644
index 0000000..8a5c5d1
--- /dev/null
+++ b/src/app/problems/components/RunTimer.tsx
@@ -0,0 +1,24 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export type RunInfo = {
+  category: "any%" | "100%";
+  problems: number;
+  currentAttempt: number;
+  pbTime: string;
+  worldRecord: string;
+};
+
+export default function RunTimer({ runInfo }: { runInfo: RunInfo }) {
+  return (
+    <Card className="relative text-center overflow-hidden">
+      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
+      <CardContent className="relative">
+        <p className="timer-display text-primary text-4xl font-bold">1:52.34</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>
+  );
+}
diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index d7fe3df..5bf9146 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -4,23 +4,9 @@ import { FileTree } from "@sinm/react-file-tree";
 import CodeMirror, { EditorState } from "@uiw/react-codemirror";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-
-type RunInfo = {
-  category: "any%" | "100%";
-  problems: number;
-  currentAttempt: number;
-  pbTime: string;
-  worldRecord: string;
-};
-
-type ChatMessage = {
-  user: string;
-  message: string;
-  time: string;
-};
+import { Card, CardContent } from "@/components/ui/card";
+import RunTimer, { RunInfo } from "../problems/components/RunTimer";
+import RunChat, { ChatMessage } from "../problems/components/RunChat";
 
 export default function Run() {
   const runInfo: RunInfo = {
@@ -95,57 +81,3 @@ export default function Run() {
     </div>
   );
 }
-
-/* ---------------- Timer ---------------- */
-
-function RunTimer({ runInfo }: { runInfo: RunInfo }) {
-  return (
-    <Card className="relative text-center overflow-hidden">
-      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
-      <CardContent className="relative">
-        <p className="timer-display text-primary text-4xl font-bold">1:52.34</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>
-  );
-}
-
-/* ---------------- Chat ---------------- */
-
-function RunChat({ chatMessages }: { chatMessages: ChatMessage[] }) {
-  return (
-    <Card className="flex flex-col flex-1">
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-base">Chat</CardTitle>
-          <span className="text-xs text-muted-foreground">
-            {chatMessages.length} messages
-          </span>
-        </div>
-      </CardHeader>
-
-      <Separator />
-
-      <CardContent className="flex flex-col flex-1 gap-3">
-        {/* Messages */}
-        <div className="flex-1 overflow-y-auto space-y-2">
-          {chatMessages.map((msg, i) => (
-            <div key={i} className="rounded-lg bg-secondary/50 p-2 text-sm">
-              <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
-              <span className="text-muted-foreground">{msg.message}</span>
-              <span className="ml-2 text-xs text-muted-foreground">
-                {msg.time}
-              </span>
-            </div>
-          ))}
-        </div>
-
-        {/* Input */}
-        <Input placeholder="Type a message…" />
-      </CardContent>
-    </Card>
-  );
-}