feat(Settings): add missing settings

src/svelte-interface/components/Select.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  let { state, onChange, options } = $props<{
+    state: string,
+    onChange: (newState: string) => void,
+    options: Array<{ value: string, label: string }>
+  }>();
+
+  let select: HTMLSelectElement;
+</script>
+
+<select
+  bind:this={select}
+  value={state}
+  onchange={() => onChange(select.value)}
+  class="px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md w-full"
+>
+  {#each options as option}
+    <option value={option.value}>
+      {option.label}
+    </option>
+  {/each}
+</select>

src/svelte-interface/pages/settings/general.svelte

@@ -2,6 +2,7 @@
   import Switch from "../../components/Switch.svelte"
   import Button from "../../components/Button.svelte"
   import Slider from "../../components/Slider.svelte"
+  import Select from "@/svelte-interface/components/Select.svelte"
 
   import browser from "webextension-polyfill"
   
@@ -40,7 +41,7 @@
       title: "Animated Background",
       description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
       id: 2,
-      Component: Switch as any,
+      Component: Switch,
       props: {
         state: $settingsState.animatedbk,
         onChange: (isOn: boolean) => settingsState.animatedbk = isOn
@@ -68,13 +69,23 @@
     {
       title: "Edit Sidebar Layout",
       description: "Customise the sidebar layout.",
-      id: 6,
+      id: 5,
       Component: Button,
       props: {
         onClick: () => browser.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' }),
         text: "Edit"
       }
     },
+    {
+      title: "Animations",
+      description: "Enables animations on certain pages.",
+      id: 6,
+      Component: Switch,
+      props: {
+        state: $settingsState.animations,
+        onChange: (isOn: boolean) => settingsState.animations = isOn
+      }
+    },
     {
       title: "Notification Collector",
       description: "Uncaps the 9+ limit for notifications, showing the real number.",
@@ -95,10 +106,39 @@
         onChange: (isOn: boolean) => settingsState.lessonalert = isOn
       }
     },
+    {
+      title: "12 Hour Time",
+      description: "Prefer 12 hour time format for SEQTA",
+      id: 9,
+      Component: Switch,
+      props: {
+        state: $settingsState.timeFormat === "12",
+        onChange: (isOn: boolean) => settingsState.timeFormat = isOn ? "12" : "24"
+      }
+    },
+    {
+      title: "Default Page",
+      description: "The page to load when SEQTA Learn is opened.",
+      id: 10,
+      Component: Select,
+      props: {
+        state: $settingsState.defaultPage,
+        onChange: (value: string) => settingsState.defaultPage = value,
+        options: [
+          { value: 'home', label: 'Home' },
+          { value: 'dashboard', label: 'Dashboard' },
+          { value: 'timetable', label: 'Timetable' },
+          { value: 'welcome', label: 'Welcome' },
+          { value: 'messages', label: 'Messages' },
+          { value: 'documents', label: 'Documents' },
+          { value: 'reports', label: 'Reports' },
+        ]
+      }
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",
-      id: 10,
+      id: 11,
       Component: Switch,
       props: {
         state: $settingsState.onoff,