refactor: load and save settings from a single object

app.vue

@@ -8,6 +8,7 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/ContextMenu.vue';
 import { render } from 'vue';
+import settingLoad from './utils/settingLoad';
 
 const banner = useState("banner", () => false);
 
@@ -43,21 +44,14 @@ function contextMenuHandler(e: MouseEvent) {
 	//]);
 }
 
-let currentTheme = "dark" // default theme
+const currentTheme = settingLoad("selectedThemeUrl") ?? "dark"
-const savedTheme = localStorage.getItem("selectedTheme");
-if (savedTheme) {
-	currentTheme = savedTheme;
-}
-
 const baseURL = useRuntimeConfig().app.baseURL;
 
 useHead({
-  link: [
+  link: [{
-    {
+		rel: "stylesheet",
-      rel: "stylesheet",
+		href: `${baseURL}themes/${currentTheme}.css`
-      href: `${baseURL}themes/${currentTheme}.css`
+	}]
-    }
-  ]
 })
 </script>
 

components/Settings/AppSettings/Appearance.vue

@@ -26,6 +26,8 @@
 </template>
 
 <script lang="ts" setup>
+import settingSave from '~/utils/settingSave';
+
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
@@ -46,7 +48,7 @@ function changeTheme(id: string, url: string) {
     return;
   }
 
-  localStorage.setItem("selectedTheme", id);
+  settingSave("selectedThemeUrl", id)
 
   // if the theme didn't originally load for some reason, create it
   if (!themeLinkElement) {

utils/settingLoad.ts

@@ -0,0 +1,19 @@
+export default (key: string): any => {
+	let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
+	if (typeof clientSettingsItem != "string") {
+		clientSettingsItem = "{}"
+	}
+
+	let clientSettings: { [key: string]: any } = {}
+	try {
+		clientSettings = JSON.parse(clientSettingsItem)
+	} catch {
+		clientSettings = {}
+	}
+
+	if (typeof clientSettings !== "object") {
+		clientSettings = {}
+	}
+
+	return clientSettings[key]
+}

utils/settingSave.ts

@@ -0,0 +1,21 @@
+export default (key: string, value: any): void => {
+	let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
+	if (typeof clientSettingsItem != "string") {
+		clientSettingsItem = "{}"
+	}
+
+	let clientSettings: { [key: string]: any } = {}
+	try {
+		clientSettings = JSON.parse(clientSettingsItem)
+	} catch {
+		clientSettings = {}
+	}
+
+	if (typeof clientSettings !== "object") {
+		clientSettings = {}
+	}
+
+	clientSettings[key] = value
+
+	localStorage.setItem("clientSettings", JSON.stringify(clientSettings))
+}