adding the current timecounter widget and the timerset widget to the …

package.json

@@ -17,8 +17,8 @@
     "html-to-image": "^1.11.13",
     "nanoid": "^5.1.6",
     "openmeteo": "^1.2.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "^5.9.2"
   },
   "devDependencies": {

src/WidgetMap.tsx

@@ -6,6 +6,9 @@ import { Search, SearchSettings } from "./widgets/Search";
 import { Shortcut, ShortcutSettings } from "./widgets/Shortcut";
 import { ToDoList } from "./widgets/ToDoList";
 import { Weather } from "./widgets/Weather";
+import { TimerWidget } from "./widgets/TimeCounter";
+import TimerWidgetSet from "./widgets/TimerSet";
+
 
 const WidgetMap = {
   battery: {
@@ -60,6 +63,14 @@ const WidgetMap = {
     component: Weather,
     size: { width: 6, height: 1 },
   },
+  timer: {
+    component: TimerWidget,
+    size: { width: 4, height: 1 },
+  },
+  Countdown: {
+    component: TimerWidgetSet,
+    size: { width: 4, height: 1 },
+  },
 };
 
 export default WidgetMap;

src/widgets/TimeCounter.css

@@ -0,0 +1,22 @@
+.body {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+
+    font-family: Inter, sans-serif;
+    text-align: center;
+
+    container-name: box;
+
+  }
+
+  .box {
+    font-size: 4rem;
+    font-weight: 700;
+  }
+
+

src/widgets/TimeCounter.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { WidgetState } from "../Widget";
+import styles from "./TimeCounter.css";
+
+export function TimerWidget() {
+  const [seconds, setSeconds] = useState(0);
+  const [isRunning, setIsRunning] = useState(false);
+
+  useEffect(() => {
+    let intervalId;
+    if (isRunning) {
+      intervalId = setInterval(() => {
+        setSeconds(prevSeconds => prevSeconds + 1);
+      }, 1000); 
+      // Update every second
+    }
+
+    return () => clearInterval(intervalId); 
+    // Cleanup on unmount or when isRunning changes
+  }, [isRunning]);
+
+  const handleStart = () => {
+    setIsRunning(true);
+  };
+
+  const handleStop = () => {
+    setIsRunning(false);
+  };
+
+  const handleReset = () => {
+    setSeconds(0);
+    setIsRunning(false);
+  };
+
+  return (
+    <div>
+      <h2>Timer: {seconds}s</h2>
+      <button onClick={handleStart} disabled={isRunning}>Start</button>
+      <button onClick={handleStop} disabled={!isRunning}>Stop</button>
+      <button onClick={handleReset}>Reset</button>
+    </div>
+  );
+}
+
+//export default TimerWidget;

src/widgets/TimerSet.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { WidgetState } from "../Widget";
+// it finally worked holy shit
+// after so many iteratiosn i finally got this to work.
+const TimerWidgetSet = () => {
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+  const [isRunning, setIsRunning] = useState(false);
+  const totalMilliseconds = useRef(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const calculateTimeRemaining = useCallback(() => {
+    // Calculate remaining time in H:M:S from totalMilliseconds
+    const totalSeconds = Math.floor(totalMilliseconds.current / 1000);
+    const remainingSeconds = totalSeconds % 60;
+    const remainingMinutes = Math.floor((totalSeconds / 60) % 60);
+    const remainingHours = Math.floor(totalSeconds / 3600);
+
+    setHours(remainingHours);
+    setMinutes(remainingMinutes);
+    setSeconds(remainingSeconds);
+
+    if (totalMilliseconds.current <= 0) {
+      clearInterval(intervalRef.current!);
+      setIsRunning(false);
+      totalMilliseconds.current = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isRunning) {
+      intervalRef.current = setInterval(() => {
+        totalMilliseconds.current -= 1000;
+        calculateTimeRemaining();
+      }, 1000);
+    } else {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    }
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [isRunning, calculateTimeRemaining]);
+
+  const handleStart = () => {
+    // Set total milliseconds based on current input values
+    const initialTimeInMs = (hours * 3600 + minutes * 60 + seconds) * 1000;
+    if (initialTimeInMs > 0) {
+      totalMilliseconds.current = initialTimeInMs;
+      setIsRunning(true);
+    }
+  };
+
+  const handleStop = () => {
+    setIsRunning(false);
+  };
+
+  const handleReset = () => {
+    setIsRunning(false);
+    totalMilliseconds.current = 0;
+    setHours(0);
+    setMinutes(0);
+    setSeconds(0);
+  };
+
+  // Helper to format time with leading zeros
+  const formatTime = (time: number) => time.toString().padStart(2, '0');
+
+  return (
+    <div>
+      <h1>Timer Widget</h1>
+      {isRunning ? (
+        <div style={{ fontSize: '48px', fontWeight: 'bold' }}>
+          <span>{formatTime(hours)}</span>:
+          <span>{formatTime(minutes)}</span>:
+          <span>{formatTime(seconds)}</span>
+        </div>
+      ) : (
+        <div className="time-inputs">
+          <input
+            type="number"
+            value={hours}
+            onChange={(e) => setHours(Number(e.target.value))}
+            min="0"
+            placeholder="HH"
+            style={{ width: '60px', fontSize: '18px' }}
+          />
+          :
+          <input
+            type="number"
+            value={minutes}
+            onChange={(e) => setMinutes(Number(e.target.value))}
+            min="0"
+            max="59"
+            placeholder="MM"
+            style={{ width: '60px', fontSize: '18px' }}
+          />
+          :
+          <input
+            type="number"
+            value={seconds}
+            onChange={(e) => setSeconds(Number(e.target.value))}
+            min="0"
+            max="59"
+            placeholder="SS"
+            style={{ width: '60px', fontSize: '18px' }}
+          />
+        </div>
+      )}
+      <div style={{ marginTop: '20px' }}>
+        <button onClick={handleStart} disabled={isRunning}>Start</button>
+        <button onClick={handleStop} disabled={!isRunning}>Stop</button>
+        <button onClick={handleReset}>Reset</button>
+      </div>
+    </div>
+  );
+};
+
+export default TimerWidgetSet;