refactor: ♻️ Rewrite settings backend

components/settings/renderer.vue

@@ -36,14 +36,14 @@
 
 <script lang="ts" setup>
 import { Switch } from "@ark-ui/vue";
-import { type Setting, type SettingIds, SettingType } from "~/settings";
+import { type SettingIds, SettingType } from "~/settings";
 
 const props = defineProps<{
-    setting: Setting;
+    id: SettingIds;
 }>();
-const checked = ref(!!props.setting.value);
 
-const setting = useSetting(props.setting.id as SettingIds);
+const setting = useSetting(props.id);
+const checked = ref(setting.value.value as boolean);
 
 watch(checked, (c) => {
     setting.value.value = c;

components/social-elements/users/UserCard.vue

@@ -1,6 +1,7 @@
 <template>
     <HoverCard.Root :positioning="{
         placement: 'bottom',
+        strategy: 'fixed',
     }" v-if="isEnabled.value">
         <HoverCard.Trigger :as-child="true">
             <slot />

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;
-};

pages/settings/index.vue

@@ -1,22 +1,19 @@
 <template>
     <SettingsSidebar>
         <template #behaviour>
-            <Renderer :setting="setting" v-for="setting of getSettingsForPath(
-                settings,
+            <Renderer :id="id" v-for="id of (Object.keys(getSettingsForPage(
                 SettingPages.Behaviour,
-            )" :key="setting.id" />
+            )) as SettingIds[])" :key="id" />
         </template>
         <template #appearance>
-            <Renderer :setting="setting" v-for="setting of getSettingsForPath(
-                settings,
+            <Renderer :id="id" v-for="id of (Object.keys(getSettingsForPage(
                 SettingPages.Appearance,
-            )" :key="setting.id" />
+            )) as SettingIds[])" :key="id" />
         </template>
         <template #advanced>
-            <Renderer :setting="setting" v-for="setting of getSettingsForPath(
-                settings,
+            <Renderer :id="id" v-for="id of (Object.keys(getSettingsForPage(
                 SettingPages.Advanced,
-            )" :key="setting.id" />
+            )) as SettingIds[])" :key="id" />
         </template>
         <template #account>
             <ProfileEditor />
@@ -28,7 +25,7 @@
 import ProfileEditor from "~/components/settings/profile-editor.vue";
 import Renderer from "~/components/settings/renderer.vue";
 import SettingsSidebar from "~/components/sidebars/settings-sidebar.vue";
-import { SettingPages, getSettingsForPath } from "~/settings";
+import { SettingIds, SettingPages, getSettingsForPage } from "~/settings";
 
 definePageMeta({
     layout: "app",