feat: select whether to show times or not

Author: debater-coder

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.5.5-beta",
+  "version": "1.5.6-beta",
   "scripts": {
     "dev": "npm-run-all --parallel dev:*",
     "dev:run": "FORCE_COLOR=1 vite",

apps/client/src/routes/Main/Home/Period.tsx

@@ -46,24 +46,28 @@ export default function Period({
     none: "transparent",
   }[periodColours];
 
+  const showTimes = useSettingsStore((state) => state.showTimes);
+
   return (
     <Skeleton
       display="flex"
       fontFamily={"Poppins, sans-serifs"}
       isLoaded={isLoaded}
       mb={!isBreak || !isLoaded ? 1 : undefined}
     >
-      <Text
-        fontSize={"xs"}
-        minW="fit-content"
-        w="9ch"
-        mr={2}
-        textAlign={"right"}
-        color={fadedOut}
-        alignSelf={"center"}
-      >
-        {DateTime.fromISO(startTime).toFormat("h:mm a")}
-      </Text>
+      {showTimes && (
+        <Text
+          fontSize={"xs"}
+          minW="fit-content"
+          w="9ch"
+          mr={2}
+          textAlign={"right"}
+          color={fadedOut}
+          alignSelf={"center"}
+        >
+          {DateTime.fromISO(startTime).toFormat("h:mm a")}
+        </Text>
+      )}
       <Flex
         bg={!isBreak ? bgColor : undefined}
         rounded={"lg"}

apps/client/src/routes/Main/Settings/General.tsx

@@ -102,6 +102,8 @@ export default function General() {
     setBgImage,
     darkenBlur,
     setDarkenBlur,
+    setShowTimes,
+    showTimes,
   } = useSettingsStore();
 
   const [deleting, setDeleting] = useState(false);
@@ -130,6 +132,14 @@ export default function General() {
         </RadioGroup>
       </FormControl>
 
+      <FormControl display="flex" alignItems="center">
+        <FormLabel mb="0">Show Times</FormLabel>
+        <Switch
+          onChange={() => setShowTimes(!showTimes)}
+          isChecked={showTimes}
+        />
+      </FormControl>
+
       <FormControl display="flex" alignItems="center">
         <FormLabel mb="0">Background Image</FormLabel>
         <Input

apps/client/src/stores/settings/settings.ts

@@ -8,20 +8,23 @@ export type Actions = {
   reset: () => void;
   setBgImage: (bgImage: string) => void;
   setDarkenBlur: (darkenBlur: boolean) => void;
+  setShowTimes: (showTimes: boolean) => void;
 };
 
 export type SettingsState = {
   primary: ColourScheme;
   periodColours: "default" | "primary" | "none";
   bgImage: string;
   darkenBlur: boolean;
+  showTimes: boolean;
 };
 
 export const initialState: SettingsState = {
   primary: "blue",
   periodColours: "default",
   bgImage: "",
   darkenBlur: true,
+  showTimes: true,
 };
 
 export const useSettingsStore = create<SettingsState & Actions>()(
@@ -33,6 +36,7 @@ export const useSettingsStore = create<SettingsState & Actions>()(
         setPeriodColours: (periodColours) => set({ periodColours }),
         setBgImage: (bgImage) => set({ bgImage }),
         setDarkenBlur: (darkenBlur) => set({ darkenBlur }),
+        setShowTimes: (showTimes) => set({ showTimes }),
         reset: () => set(initialState),
       }),
       {