Add customizable time format

src/components/Apps/Settings/Settings.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../app/hooks.ts";
-import { setAppBarWidth, setInfoBarHeight } from "../../../features/personalisation/PersonalisationSlice.ts";
+import { setAppBarWidth, setInfoBarHeight, setInfoBarTimeFormat } from "../../../features/personalisation/PersonalisationSlice.ts";
 
 
 function Settings() {
@@ -24,6 +24,12 @@ function Settings() {
         value={useAppSelector((state) => state.personalisation.infoBarHeight)}
         onChange={(e) => dispatch(setInfoBarHeight(e.target.valueAsNumber))}
       />
+      <p>InfoBarTimeFormat (use <a target={"_blank"} href="https://day.js.org/docs/en/display/format">this format</a>)</p>
+      <input
+        type="text"
+        value={useAppSelector((state) => state.personalisation.infoBarTimeFormat)}
+        onChange={(e) => dispatch(setInfoBarTimeFormat(e.target.value))}
+      />
     </>
   );
 }

src/components/InfoBar/InfoBar.tsx

@@ -1,18 +1,25 @@
 import "./InfoBar.css";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import { useAppSelector } from "../../app/hooks.ts";
 
 function InfoBar() {
   const infoBarHeight = useAppSelector(
     (state) => state.personalisation.infoBarHeight
   );
+  const infoBarTimeFormat = useAppSelector(
+    (state) => state.personalisation.infoBarTimeFormat
+  );
+  const intervalId = useRef<null | number>(null)
 
   const [time, setTime] = useState(dayjs().format("DD MMM HH:mm"));
 
   useEffect(() => {
-    setInterval(() => setTime(dayjs().format("DD MMM HH:mm")), 3000);
-  }, []);
+    if (intervalId.current){
+      clearInterval(intervalId.current)
+    }
+    intervalId.current = setInterval(() => setTime(dayjs().format(infoBarTimeFormat)), 1000);
+  }, [infoBarTimeFormat]);
 
   return (
     <header id={"infoBar"} style={{ height: infoBarHeight }}>

src/features/personalisation/PersonalisationSlice.ts

@@ -4,12 +4,14 @@ import ThemeType from "./ThemeType.ts";
 interface PersonalisationState {
   appBarWidth: number;
   infoBarHeight: number;
+  infoBarTimeFormat: string;
   theme: ThemeType;
 }
 
 const initialState: PersonalisationState = {
   appBarWidth: 70,
   infoBarHeight: 23,
+  infoBarTimeFormat: "DD MMM HH:mm",
   theme: {
     fontColor: "#FFF",
     firstColor: "#2c2c2c",
@@ -28,12 +30,15 @@ const personalisationSlice = createSlice({
     setInfoBarHeight: (state, action: PayloadAction<number>) => {
       state.infoBarHeight = action.payload;
     },
+    setInfoBarTimeFormat: (state, action: PayloadAction<string>) => {
+      state.infoBarTimeFormat = action.payload;
+    },
     setTheme: (state, action: PayloadAction<ThemeType>) => {
       state.theme = action.payload;
     },
   },
 });
-export const { setAppBarWidth, setInfoBarHeight, setTheme } =
+export const { setAppBarWidth, setInfoBarHeight, setTheme, setInfoBarTimeFormat } =
   personalisationSlice.actions;
 
 export default personalisationSlice.reducer;