refactor: ♻️ Rewrite settings backend

composables/ParsedContent.ts

@@ -1,6 +1,6 @@
 import type { Account, Emoji } from "@lysand-org/client/types";
 import { renderToString } from "vue/server-renderer";
-import { SettingIds, type Settings, getSettingById } from "~/settings";
+import { SettingIds, type Settings } from "~/settings";
 import MentionComponent from "../components/social-elements/notes/mention.vue";
 
 /**
@@ -13,7 +13,7 @@ export const useParsedContent = (
     content: MaybeRef<string>,
     emojis: MaybeRef<Emoji[]>,
     mentions: MaybeRef<Account[]> = ref([]),
-    settings: MaybeRef<Settings> = ref([]),
+    settings: MaybeRef<Settings | null> = ref(null),
 ): Ref<string | null> => {
     const result = ref(null as string | null);
 
@@ -27,10 +27,8 @@ export const useParsedContent = (
             const contentHtml = document.createElement("div");
             contentHtml.innerHTML = toValue(content);
 
-            const shouldRenderEmoji = getSettingById(
-                toValue(settings),
-                SettingIds.CustomEmojis,
-            )?.value;
+            const shouldRenderEmoji =
+                toValue(settings)?.[SettingIds.CustomEmojis].value;
 
             // Replace emoji shortcodes with images
             if (shouldRenderEmoji) {

composables/Settings.ts

@@ -3,7 +3,7 @@ import {
     type Setting,
     type SettingIds,
     type Settings,
-    parseFromJson,
+    mergeSettings,
     settings as settingsJson,
 } from "~/settings";
 
@@ -13,18 +13,17 @@ const useSettings = () => {
             read(raw) {
                 const json = StorageSerializers.object.read(raw);
 
-                return parseFromJson(json);
+                return mergeSettings(json);
             },
             write(value) {
-                // key/value, with key being id and value being the value
-                const json = value.reduce(
-                    (acc, setting) => {
-                        acc[setting.id] = setting.value;
-                        return acc;
-                    },
-                    {} as Record<string, unknown>,
+                const json = Object.fromEntries(
+                    Object.entries(value).map(([key, value]) => [
+                        key,
+                        value.value,
+                    ]),
                 );
 
+                // flatMap object values to .value
                 return StorageSerializers.object.write(json);
             },
         },
@@ -33,24 +32,21 @@ const useSettings = () => {
 
 export const settings = useSettings();
 
-export const useSetting = <T extends Setting = Setting>(id: SettingIds) => {
-    const setting: Ref<T> = ref<T>(
-        settings.value.find((s) => s.id === id) as T,
-    ) as unknown as Ref<T>;
+export const useSetting = <Id extends SettingIds>(
+    id: Id,
+): Ref<Settings[Id]> => {
+    const setting = ref(settings.value[id]) as Ref<Settings[Id]>;
 
     watch(settings, (newSettings) => {
-        setting.value = newSettings.find((s) => s.id === id) as T;
+        setting.value = newSettings[id];
     });
 
     watch(setting, (newSetting) => {
-        settings.value = settings.value.map((s) =>
-            s.id === id ? newSetting : s,
-        ) as Settings;
+        settings.value = {
+            ...settings.value,
+            [id]: newSetting,
+        };
     });
 
     return setting;
 };
-
-export const getSetting = <T extends Setting = Setting>(id: SettingIds) => {
-    return settingsJson.find((s) => s.id === id) as T;
-};