From 18325b9f81eec5bc77ac077c1b16aa75c0179090 Mon Sep 17 00:00:00 2001
From: psmyrdek <przemek.smyrdek@gmail.com>
Date: Thu, 21 Aug 2025 19:14:44 +0200
Subject: [PATCH 1/2] feat: clock

---
 src/components/ChatInterface.tsx |   4 +
 src/components/Clock.tsx         | 123 +++++++++++++++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 src/components/Clock.tsx

diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx
index 639797c..ae7c01b 100644
--- a/src/components/ChatInterface.tsx
+++ b/src/components/ChatInterface.tsx
@@ -6,6 +6,7 @@ import ChatSidebar from "./ChatSidebar";
 import MobileHeader from "./MobileHeader";
 import { useChatStore } from "../stores/chatStore";
 import { useChatMigration } from "../hooks/useChatMigration";
+import Clock from "./Clock";
 
 export default function ChatInterface() {
   const [isLoading, setIsLoading] = useState(false);
@@ -146,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..ccef490
--- /dev/null
+++ b/src/components/Clock.tsx
@@ -0,0 +1,123 @@
+import { Clock as ClockIcon } from "lucide-react";
+
+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 polishMonths: any = [
+    "stycznia",
+    "lutego",
+    "marca",
+    "kwietnia",
+    "maja",
+    "czerwca",
+    "lipca",
+    "sierpnia",
+    "września",
+    "października",
+    "listopada",
+    "grudnia",
+  ];
+  let polishDays: any = ["niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota"];
+
+  let dateStr: any =
+    polishDays[now.getDay()] + ", " + now.getDate() + " " + polishMonths[now.getMonth()] + " " + now.getFullYear();
+
+  let timeElement: any;
+  let dateElement: any;
+
+  setTimeout(() => {
+    if (timeElement) {
+      let newNow: any = new Date();
+      timeElement.innerHTML =
+        newNow.getHours().toString().padStart(2, "0") +
+        ":" +
+        newNow.getMinutes().toString().padStart(2, "0") +
+        ":" +
+        newNow.getSeconds().toString().padStart(2, "0");
+    }
+    if (dateElement) {
+      let newNow: any = new Date();
+      dateElement.innerHTML =
+        polishDays[newNow.getDay()] +
+        ", " +
+        newNow.getDate() +
+        " " +
+        polishMonths[newNow.getMonth()] +
+        " " +
+        newNow.getFullYear();
+    }
+  }, 1000);
+
+  setInterval(() => {
+    if (timeElement) {
+      let newNow: any = new Date();
+      timeElement.innerHTML =
+        newNow.getHours().toString().padStart(2, "0") +
+        ":" +
+        newNow.getMinutes().toString().padStart(2, "0") +
+        ":" +
+        newNow.getSeconds().toString().padStart(2, "0");
+    }
+    if (dateElement) {
+      let newNow: any = new Date();
+      dateElement.innerHTML =
+        polishDays[newNow.getDay()] +
+        ", " +
+        newNow.getDate() +
+        " " +
+        polishMonths[newNow.getMonth()] +
+        " " +
+        newNow.getFullYear();
+    }
+  }, 1000);
+
+  return (
+    <div
+      style={{
+        color: "black",
+        fontSize: "18px",
+        fontWeight: "bold",
+        minWidth: "70px",
+        textAlign: "center",
+        fontFamily: "monospace",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "4px",
+      }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+        }}>
+        <ClockIcon size={18} />
+        <span
+          ref={(el: any) => {
+            timeElement = el;
+          }}>
+          {time}
+        </span>
+      </div>
+      <div
+        ref={(el: any) => {
+          dateElement = el;
+        }}
+        style={{
+          fontSize: "12px",
+          color: "#666",
+          fontWeight: "normal",
+        }}>
+        {dateStr}
+      </div>
+    </div>
+  );
+}
+
+export default Clock;

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

---
 src/components/Clock.tsx | 157 +++++++++++++--------------------------
 1 file changed, 51 insertions(+), 106 deletions(-)

diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
index ccef490..f980e5d 100644
--- a/src/components/Clock.tsx
+++ b/src/components/Clock.tsx
@@ -1,120 +1,65 @@
+import { useState, useEffect } from "react";
 import { Clock as ClockIcon } from "lucide-react";
 
-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");
+interface TimeData {
+  time: string;
+  date: string;
+}
+
+const POLISH_MONTHS = [
+  "stycznia", "lutego", "marca", "kwietnia", "maja", "czerwca",
+  "lipca", "sierpnia", "września", "października", "listopada", "grudnia"
+] as const;
+
+const POLISH_DAYS = [
+  "niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota"
+] as const;
 
-  let polishMonths: any = [
-    "stycznia",
-    "lutego",
-    "marca",
-    "kwietnia",
-    "maja",
-    "czerwca",
-    "lipca",
-    "sierpnia",
-    "września",
-    "października",
-    "listopada",
-    "grudnia",
-  ];
-  let polishDays: any = ["niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota"];
+const useClock = (): TimeData => {
+  const [currentTime, setCurrentTime] = useState<Date>(() => new Date());
 
-  let dateStr: any =
-    polishDays[now.getDay()] + ", " + now.getDate() + " " + polishMonths[now.getMonth()] + " " + now.getFullYear();
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
 
-  let timeElement: any;
-  let dateElement: any;
+    return () => clearInterval(interval);
+  }, []);
 
-  setTimeout(() => {
-    if (timeElement) {
-      let newNow: any = new Date();
-      timeElement.innerHTML =
-        newNow.getHours().toString().padStart(2, "0") +
-        ":" +
-        newNow.getMinutes().toString().padStart(2, "0") +
-        ":" +
-        newNow.getSeconds().toString().padStart(2, "0");
-    }
-    if (dateElement) {
-      let newNow: any = new Date();
-      dateElement.innerHTML =
-        polishDays[newNow.getDay()] +
-        ", " +
-        newNow.getDate() +
-        " " +
-        polishMonths[newNow.getMonth()] +
-        " " +
-        newNow.getFullYear();
-    }
-  }, 1000);
+  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(":");
+  };
 
-  setInterval(() => {
-    if (timeElement) {
-      let newNow: any = new Date();
-      timeElement.innerHTML =
-        newNow.getHours().toString().padStart(2, "0") +
-        ":" +
-        newNow.getMinutes().toString().padStart(2, "0") +
-        ":" +
-        newNow.getSeconds().toString().padStart(2, "0");
-    }
-    if (dateElement) {
-      let newNow: any = new Date();
-      dateElement.innerHTML =
-        polishDays[newNow.getDay()] +
-        ", " +
-        newNow.getDate() +
-        " " +
-        polishMonths[newNow.getMonth()] +
-        " " +
-        newNow.getFullYear();
-    }
-  }, 1000);
+  const formatDate = (date: Date): string => {
+    const dayName = POLISH_DAYS[date.getDay()];
+    const day = date.getDate();
+    const monthName = POLISH_MONTHS[date.getMonth()];
+    const year = date.getFullYear();
+    
+    return `${dayName}, ${day} ${monthName} ${year}`;
+  };
+
+  return {
+    time: formatTime(currentTime),
+    date: formatDate(currentTime)
+  };
+};
+
+function Clock() {
+  const { time, date } = useClock();
 
   return (
-    <div
-      style={{
-        color: "black",
-        fontSize: "18px",
-        fontWeight: "bold",
-        minWidth: "70px",
-        textAlign: "center",
-        fontFamily: "monospace",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "4px",
-      }}>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-        }}>
+    <div className="text-black text-lg font-bold min-w-[70px] text-center font-mono flex flex-col items-center gap-1">
+      <div className="flex items-center gap-2">
         <ClockIcon size={18} />
-        <span
-          ref={(el: any) => {
-            timeElement = el;
-          }}>
-          {time}
-        </span>
+        <span>{time}</span>
       </div>
-      <div
-        ref={(el: any) => {
-          dateElement = el;
-        }}
-        style={{
-          fontSize: "12px",
-          color: "#666",
-          fontWeight: "normal",
-        }}>
-        {dateStr}
+      <div className="text-xs text-gray-600 font-normal">
+        {date}
       </div>
     </div>
   );