Clock customization (#74) (#76)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Paul Saubusse <146203570+Daihecyy@users.noreply.github.com>

apps/new-tab/public/_locales/en/messages.json

@@ -382,5 +382,8 @@
   },
   "search": {
     "message": "Search"
+  },
+  "clock_format": {
+    "message": "Clock format"
   }
 }

apps/new-tab/src/App.tsx

@@ -47,6 +47,7 @@ import { createStoredSignal } from "./hooks/localStorage";
 import { TextField, TextFieldRoot } from "./components/ui/textfield";
 import { CommandPalette } from "./components/ui/cmd";
 import { number } from "mathjs";
+import { formattedClock } from "./hooks/clockFormatter";
 
 type MessageKeys = keyof typeof data;
 
@@ -128,17 +129,6 @@ type Bookmark = {
 };
 
 const App: Component = () => {
-  function createTime(date: Date) {
-    const hours = date.getHours();
-    const minutes = date.getMinutes();
-    const amPm = hours >= 12 ? "PM" : "AM";
-    const formattedHours = hours % 12 || 12;
-    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
-    return {
-      time: `${formattedHours}:${formattedMinutes}`,
-      amPm: amPm,
-    };
-  }
   const [needsOnboarding, setNeedsOnboarding] = createSignal(
     localStorage.getItem("onboarding") !== "true"
   );
@@ -163,7 +153,6 @@ const App: Component = () => {
   const [background, setBackground] = createStoredSignal("background", "image");
   const [name, setName] = createStoredSignal("name", "");
   const [mode, setMode] = createStoredSignal("mode", "widgets");
-  const [time, setTime] = createSignal(`${createTime(new Date()).time}`);
   const [bookmarks, setBookmarks] = createSignal<any[]>([]);
   const [pageTitle, setPageTitle] = createStoredSignal("pageTitle", "");
   const [textStyle, setTextStyle] = createStoredSignal("textStyle", "normal");
@@ -174,6 +163,7 @@ const App: Component = () => {
   );
   const [wallpaperChangeTime, setWallpaperChangeTime] =
     createStoredSignal<number>("wallpaperChangeTime", 1000 * 60 * 60 * 24 * 7);
+  const clock = formattedClock();
   function getInitialSelectedImage() {
     try {
       const storedItem = localStorage.getItem("selectedImage");
@@ -467,10 +457,6 @@ const App: Component = () => {
         );
       }
     }
-
-    setInterval(() => {
-      setTime(createTime(new Date()).time);
-    }, 1000);
   });
 
   function getKeyForValue(obj: any, value: any) {
@@ -697,7 +683,7 @@ const App: Component = () => {
             <div class="flex items-center justify-center">
               <div class="w-full max-w-lg select-none">
                 <h1 class="m-0 p-0 text-[200px] font-bold [line-height:1.2]">
-                  {time()}
+                  {clock().time + clock().amPm}
                 </h1>
                 <p class="mt-3 pl-2 text-3xl font-medium">
                   {

apps/new-tab/src/Settings.tsx

@@ -77,6 +77,10 @@ function SettingsTrigger({
   const [theme, setTheme] = createStoredSignal("kb-color-mode", "system");
   const [background, setBackground] = createStoredSignal("background", "image");
   const [layout, setLayout] = createStoredSignal("layout", "center");
+  const [clockFormat, setClockFormat] = createStoredSignal(
+    "clockFormat",
+    "12h"
+  );
   const [name, setName] = createStoredSignal("name", "");
   const [mode, setMode] = createStoredSignal("mode", "widgets");
   const [greetingNameValue, setGreetingNameValue] = createSignal(name());
@@ -426,6 +430,31 @@ function SettingsTrigger({
                   icon={<span class="!text-5xl font-bold !lowercase">aa</span>}
                 />
               </div>
+              <br />
+              <br />
+              <h3 class="text-2xl font-[500]">
+                {chrome.i18n.getMessage("clock_format")}
+              </h3>
+              <div class="card-group grid-cols-2 grid-rows-1">
+                <BigButton
+                  {...(clockFormat() === "12h"
+                    ? { "data-selected": true }
+                    : {})}
+                  onClick={() => {
+                    setClockFormat("12h");
+                  }}
+                  icon={<span class="!text-5xl font-bold">12h</span>}
+                />
+                <BigButton
+                  {...(clockFormat() === "24h"
+                    ? { "data-selected": true }
+                    : {})}
+                  onClick={() => {
+                    setClockFormat("24h");
+                  }}
+                  icon={<span class="!text-5xl font-bold">24h</span>}
+                />
+              </div>
             </>
           )}
           {settingsMenu() === "background" && (

apps/new-tab/src/Widgets.tsx

@@ -13,39 +13,18 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./components/ui/dialog";
+import { formattedClock } from "./hooks/clockFormatter";
 
 function ClockWidget() {
-  function createTime(date: Date) {
-    const hours = date.getHours();
-    const minutes = date.getMinutes();
-    const amPm = hours >= 12 ? "PM" : "AM";
-    const formattedHours = hours % 12 || 12;
-    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
-    return {
-      time: `${formattedHours}:${formattedMinutes}`,
-      amPm: amPm,
-    };
-  }
-  onMount(() => {
-    let interval: any;
-    interval = setInterval(() => {
-      try {
-        document.getElementById("currentTime")!.textContent = createTime(
-          new Date()
-        ).time;
-      } catch (e) {
-        clearInterval(interval);
-      }
-    }, 1000);
-  });
+  const clock = formattedClock();
   return (
     <div class="absolute inset-0 !select-none rounded-[20px] bg-black/30 p-[10px] shadow-inner shadow-white/10 backdrop-blur-3xl">
       <div class="relative flex h-full w-full items-center justify-center rounded-[10px]">
         <div class="absolute flex w-full justify-between self-start px-3.5 py-2.5 text-xs font-semibold text-gray-400">
-          <div id="amPm">{createTime(new Date()).amPm}</div>
+          <div id="amPm">{clock().amPm}</div>
         </div>
         <div class="text-center text-5xl font-bold text-white" id="currentTime">
-          {createTime(new Date()).time}
+          {clock().time}
         </div>
       </div>
     </div>

apps/new-tab/src/hooks/clockFormatter.ts

@@ -0,0 +1,40 @@
+import { createSignal, onMount } from "solid-js";
+import { createStoredSignal } from "./localStorage";
+import { onCleanup } from "solid-js";
+
+function formattedClock() {
+  const [clockFormat, setClockFormat] = createStoredSignal("clockFormat", "");
+  const [currentClock, setCurrentClock] = createSignal(createClock(new Date()));
+  function createClock(date: Date) {
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+    const formattedHours = hours % 12 || 12;
+    if (clockFormat() == "12h") {
+      return {
+        time: `${formattedHours}:${formattedMinutes}`,
+        amPm: "",
+      };
+    } else if (clockFormat() == "24h") {
+      return {
+        time: `${hours}:${formattedMinutes}`,
+        amPm: "",
+      };
+    } else {
+      return {
+        time: `${formattedHours}:${formattedMinutes}`,
+        amPm: hours >= 12 ? "PM" : "AM",
+      };
+    }
+  }
+  onMount(() => {
+    const intervalId = setInterval(() => {
+      setCurrentClock(createClock(new Date()));
+    }, 1000);
+    onCleanup(() => clearInterval(intervalId));
+  });
+
+  return currentClock;
+}
+
+export { formattedClock };