feat: make settings typed and store "12" and "24" over "12-hour" and "24-hour" internally

app.vue

@@ -8,7 +8,6 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/ContextMenu.vue';
 import { render } from 'vue';
-import settingLoad from './utils/settingLoad';
 
 const banner = useState("banner", () => false);
 
@@ -44,7 +43,7 @@ function contextMenuHandler(e: MouseEvent) {
 	//]);
 }
 
-const currentTheme = settingLoad("selectedThemeUrl") ?? "dark"
+const currentTheme = settingsLoad().selectedThemeId ?? "dark"
 const baseURL = useRuntimeConfig().app.baseURL;
 
 useHead({

components/Settings/AppSettings/Appearance.vue

@@ -24,14 +24,14 @@
     <p class="subtitle">TIME FORMAT</p>
     <div class="icons">
       <RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
-          :default-button-index="settingLoad('timeFormat')?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
+          :default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { TimeFormat } from '~/types/settings';
 import settingSave from '~/utils/settingSave';
 
 const runtimeConfig = useRuntimeConfig()
@@ -79,7 +79,18 @@ async function fetchThemes() {
 await fetchThemes()
 
 async function onTimeFormatClicked(index: number) {
-  settingSave("timeFormat", {index, timeFormat: timeFormatTextStrings[index].toLowerCase()})
+  let format: "auto" | "12" | "24" = "auto"
+
+  if (index == 0) {
+    format = "auto"
+  } else if (index == 1) {
+    format = "12"
+  } else if (index == 2) {
+    format = "24"
+  }
+
+  const timeFormat: TimeFormat = {index, format}
+  settingSave("timeFormat", timeFormat)
 }
 </script>
 

types/settings.ts

@@ -0,0 +1,9 @@
+export interface ClientSettings {
+	selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark"
+	timeFormat?: TimeFormat
+}
+
+export interface TimeFormat {
+	index: number,
+	format: "auto" | "12" | "24"
+}

utils/getPreferredTimeFormat.ts

@@ -1,9 +1,9 @@
 export default (): "12" | "24" => {
-	const format = settingLoad("timeFormat").timeFormat ?? "auto"
+	const format = settingsLoad().timeFormat?.format ?? "auto"
 
-	if (format == "12-hour") {
+	if (format == "12") {
 		return "12"
-	} else if (format == "24-hour") {
+	} else if (format == "24") {
 		return "24"
 	}
 

utils/settingsLoad.ts

@@ -1,10 +1,12 @@
-export default (key: string): any => {
+import type { ClientSettings } from "~/types/settings"
+
+export default (): ClientSettings => {
 	let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
 	if (typeof clientSettingsItem != "string") {
 		clientSettingsItem = "{}"
 	}
 
-	let clientSettings: { [key: string]: any } = {}
+	let clientSettings: ClientSettings = {}
 	try {
 		clientSettings = JSON.parse(clientSettingsItem)
 	} catch {
@@ -15,5 +17,5 @@ export default (key: string): any => {
 		clientSettings = {}
 	}
 
-	return clientSettings[key]
+	return clientSettings
 }