From 629a09cb15bbfe51aa154a45fb890406c8646217 Mon Sep 17 00:00:00 2001
From: psmyrdek <przemek.smyrdek@gmail.com>
Date: Thu, 21 Aug 2025 12:30:17 +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 7a27204f52b041dfb819e11bc9fa54c3ca4376ad Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 21 Aug 2025 10:38:55 +0000
Subject: [PATCH 2/2] chore: apply Claude suggestions

---
 src/components/Clock.tsx | 143 +++++++++++----------------------------
 1 file changed, 38 insertions(+), 105 deletions(-)

diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
index ccef490..9160a72 100644
--- a/src/components/Clock.tsx
+++ b/src/components/Clock.tsx
@@ -1,120 +1,53 @@
+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 ClockProps {
+  className?: string;
+}
+
+function Clock({ className }: ClockProps) {
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
 
-  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"];
+    return () => clearInterval(interval);
+  }, []);
 
-  let dateStr: any =
-    polishDays[now.getDay()] + ", " + now.getDate() + " " + polishMonths[now.getMonth()] + " " + now.getFullYear();
+  const polishMonths = [
+    'stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca',
+    'lipca', 'sierpnia', 'września', 'października', 'listopada', 'grudnia'
+  ] as const;
 
-  let timeElement: any;
-  let dateElement: any;
+  const polishDays = [
+    'niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'
+  ] as const;
 
-  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.toLocaleTimeString('pl-PL', { hour12: false });
+  };
 
-  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 day = polishDays[date.getDay()];
+    const dayNum = date.getDate();
+    const month = polishMonths[date.getMonth()];
+    const year = date.getFullYear();
+    
+    return `${day}, ${dayNum} ${month} ${year}`;
+  };
 
   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={`flex flex-col items-center gap-1 text-gray-900 font-mono ${className || ''}`}>
+      <div className="flex items-center gap-2">
         <ClockIcon size={18} />
-        <span
-          ref={(el: any) => {
-            timeElement = el;
-          }}>
-          {time}
+        <span className="text-lg font-bold" aria-label="Aktualny czas">
+          {formatTime(currentTime)}
         </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" aria-label="Aktualna data">
+        {formatDate(currentTime)}
       </div>
     </div>
   );