From 9f49510ceb947fd8189c161f3550c0d03becb0b9 Mon Sep 17 00:00:00 2001
From: psmyrdek <przemek.smyrdek@gmail.com>
Date: Thu, 21 Aug 2025 11:15:35 +0200
Subject: [PATCH 1/2] feat: clock component

---
 src/components/ChatInterface.tsx |  3 ++
 src/components/Clock.tsx         | 53 ++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/components/Clock.tsx

diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx
index 461535d..ae7c01b 100644
--- a/src/components/ChatInterface.tsx
+++ b/src/components/ChatInterface.tsx
@@ -147,6 +147,9 @@ export default function ChatInterface() {
             <div className="flex-1">
               <h1 className="text-xl font-semibold text-gray-900">{activeThread?.title}</h1>
             </div>
+            <div className="flex justify-end">
+              <Clock />
+            </div>
           </div>
         </div>
 
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
new file mode 100644
index 0000000..6215ae6
--- /dev/null
+++ b/src/components/Clock.tsx
@@ -0,0 +1,53 @@
+function Clock() {
+  let now: any = new Date();
+  let time: any =
+    now.getHours().toString().padStart(2, "0") +
+    ":" +
+    now.getMinutes().toString().padStart(2, "0") +
+    ":" +
+    now.getSeconds().toString().padStart(2, "0");
+  let element: any;
+
+  setTimeout(() => {
+    if (element) {
+      let newNow: any = new Date();
+      element.innerHTML =
+        newNow.getHours().toString().padStart(2, "0") +
+        ":" +
+        newNow.getMinutes().toString().padStart(2, "0") +
+        ":" +
+        newNow.getSeconds().toString().padStart(2, "0");
+    }
+  }, 1000);
+
+  setInterval(() => {
+    if (element) {
+      let newNow: any = new Date();
+      element.innerHTML =
+        newNow.getHours().toString().padStart(2, "0") +
+        ":" +
+        newNow.getMinutes().toString().padStart(2, "0") +
+        ":" +
+        newNow.getSeconds().toString().padStart(2, "0");
+    }
+  }, 1000);
+
+  return (
+    <div
+      ref={(el: any) => {
+        element = el;
+      }}
+      style={{
+        color: "black",
+        fontSize: "18px",
+        fontWeight: "bold",
+        minWidth: "70px",
+        textAlign: "center",
+        fontFamily: "monospace",
+      }}>
+      {time}
+    </div>
+  );
+}
+
+export default Clock;

From a88d63ef85625c1f70d403ef97b63d586b279230 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 21 Aug 2025 09:19:04 +0000
Subject: [PATCH 2/2] chore: apply Claude suggestions

---
 src/components/Clock.tsx | 80 ++++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 45 deletions(-)

diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
index 6215ae6..8b96ee0 100644
--- a/src/components/Clock.tsx
+++ b/src/components/Clock.tsx
@@ -1,50 +1,40 @@
-function Clock() {
-  let now: any = new Date();
-  let time: any =
-    now.getHours().toString().padStart(2, "0") +
-    ":" +
-    now.getMinutes().toString().padStart(2, "0") +
-    ":" +
-    now.getSeconds().toString().padStart(2, "0");
-  let element: any;
-
-  setTimeout(() => {
-    if (element) {
-      let newNow: any = new Date();
-      element.innerHTML =
-        newNow.getHours().toString().padStart(2, "0") +
-        ":" +
-        newNow.getMinutes().toString().padStart(2, "0") +
-        ":" +
-        newNow.getSeconds().toString().padStart(2, "0");
-    }
-  }, 1000);
-
-  setInterval(() => {
-    if (element) {
-      let newNow: any = new Date();
-      element.innerHTML =
-        newNow.getHours().toString().padStart(2, "0") +
-        ":" +
-        newNow.getMinutes().toString().padStart(2, "0") +
-        ":" +
-        newNow.getSeconds().toString().padStart(2, "0");
-    }
-  }, 1000);
+import { useState, useEffect, useRef } from 'react';
+
+interface ClockProps {}
+
+function Clock({}: ClockProps) {
+  const [time, setTime] = useState<string>('');
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const formatTime = (date: Date): string => {
+    return [
+      date.getHours().toString().padStart(2, '0'),
+      date.getMinutes().toString().padStart(2, '0'),
+      date.getSeconds().toString().padStart(2, '0')
+    ].join(':');
+  };
+
+  useEffect(() => {
+    const updateTime = () => {
+      setTime(formatTime(new Date()));
+    };
+
+    updateTime();
+
+    intervalRef.current = setInterval(updateTime, 1000);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
 
   return (
-    <div
-      ref={(el: any) => {
-        element = el;
-      }}
-      style={{
-        color: "black",
-        fontSize: "18px",
-        fontWeight: "bold",
-        minWidth: "70px",
-        textAlign: "center",
-        fontFamily: "monospace",
-      }}>
+    <div 
+      className="text-black text-lg font-bold min-w-[70px] text-center font-mono"
+      aria-label="Current time"
+    >
       {time}
     </div>
   );