feat: add 12 hour time as an option for timetable

src/interface/hooks/settingsState.ts

@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill'
 import { useEffect, useMemo } from "react";
 import { SettingsProps } from "../types/SettingsProps";
 import { MainConfig, SettingsState } from "../types/AppProps";
+import { SettingsState as StorageSettingsState } from '../../types/storage';
 
 let RanOnce = false;
 let previousSettingsState: SettingsState
@@ -12,7 +13,7 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     RanOnce = true;
 
     // @ts-expect-error - TODO: Fix this
-    browser.storage.local.get().then((result: MainConfig) => {
+    browser.storage.local.get().then((result: StorageSettingsState) => {
       setSettingsState({
         notificationCollector: result.notificationcollector,
         lessonAlerts: result.lessonalert,
@@ -23,7 +24,8 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
         shortcuts: result.shortcuts,
         customshortcuts: result.customshortcuts,
         transparencyEffects: result.transparencyEffects,
-        selectedTheme: result.selectedTheme
+        selectedTheme: result.selectedTheme,
+        timeFormat: result.timeFormat
       });
     });
   });
@@ -38,7 +40,8 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     "shortcuts": "shortcuts",
     "customshortcuts": "customshortcuts",
     "transparencyEffects": "transparencyEffects",
-    "selectedTheme": "selectedTheme"
+    "selectedTheme": "selectedTheme",
+    "timeFormat": "timeFormat"
   }), []);
   
   const storageChangeListener = (changes: browser.Storage.StorageChange) => {

src/interface/pages/SettingsPage/Settings.tsx

@@ -11,10 +11,10 @@ import { memo } from 'react';
 const Settings: React.FC = () => {
   const { settingsState, setSettingsState } = useSettingsContext();
 
-  const switchChange = (key: string, isOn: boolean) => {
+  const switchChange = (key: string, value: boolean | string) => {
     setSettingsState({
       ...settingsState,
-      [key]: isOn,
+      [key]: value,
     });
   };
 
@@ -61,6 +61,11 @@ const Settings: React.FC = () => {
       description: "Sends a native browser notification ~5 minutes prior to lessons.",
       modifyElement: <Switch state={settingsState.lessonAlerts} onChange={(isOn: boolean) => switchChange('lessonAlerts', isOn)} />
     },
+    {
+      title: "12 Hour Time",
+      description: "Prefer 12 hour time format for SEQTA",
+      modifyElement: <Switch state={settingsState.timeFormat == "12"} onChange={(isOn: boolean) => switchChange('timeFormat', isOn ? "12" : "24")} />
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",

src/interface/types/AppProps.ts

@@ -9,6 +9,7 @@ export interface SettingsState {
   shortcuts: Shortcut[];
   customshortcuts: CustomShortcut[];
   transparencyEffects: boolean;
+  timeFormat?: string;
 }
 
 interface ToggleItem {