feat: ✨ Wire up new preferences and remove old settings

composables/Language.ts

@@ -1,7 +1,3 @@
-import { SettingIds } from "~/settings";
-
 export const useLanguage = () => {
-    const lang = useSetting(SettingIds.Language);
-
-    return computed(() => lang.value.value as "en" | "fr" | "en-pt");
+    return computed(() => preferences.language.value);
 };

composables/Preference.ts

@@ -0,0 +1,56 @@
+import { StorageSerializers } from "@vueuse/core";
+import { preferences as prefs } from "~/components/preferences2/preferences.ts";
+
+type SerializedPreferences = {
+    [K in keyof typeof prefs]: (typeof prefs)[K]["options"]["defaultValue"];
+};
+
+const usePreferences = (): {
+    [K in keyof typeof prefs]: WritableComputedRef<
+        (typeof prefs)[K]["options"]["defaultValue"]
+    >;
+} => {
+    const localStorage = useLocalStorage<SerializedPreferences>(
+        "versia:preferences",
+        Object.fromEntries(
+            Object.entries(prefs).map(([key, value]) => [
+                key,
+                value.options.defaultValue,
+            ]),
+        ) as SerializedPreferences,
+        {
+            serializer: {
+                read(raw) {
+                    return StorageSerializers.object.read(raw);
+                },
+                write(value) {
+                    return StorageSerializers.object.write(value);
+                },
+            },
+        },
+    );
+
+    return Object.fromEntries(
+        Object.entries(prefs).map(([key, value]) => [
+            key,
+            computed({
+                get() {
+                    return (
+                        localStorage.value[key as keyof typeof prefs] ??
+                        value.options.defaultValue
+                    );
+                },
+                set(newValue) {
+                    // @ts-expect-error Key is marked as readonly in the type
+                    localStorage.value[key] = newValue;
+                },
+            }),
+        ]),
+    ) as {
+        [K in keyof typeof prefs]: WritableComputedRef<
+            (typeof prefs)[K]["options"]["defaultValue"]
+        >;
+    };
+};
+
+export const preferences = usePreferences();

composables/Settings.ts

@@ -1,51 +0,0 @@
-import { StorageSerializers } from "@vueuse/core";
-import {
-    type SettingIds,
-    type Settings,
-    mergeSettings,
-    settings as settingsJson,
-} from "~/settings";
-
-const useSettings = () => {
-    return useLocalStorage<Settings>("versia:settings", settingsJson(), {
-        serializer: {
-            read(raw) {
-                const json = StorageSerializers.object.read(raw);
-
-                return mergeSettings(json);
-            },
-            write(value) {
-                const json = Object.fromEntries(
-                    Object.entries(value).map(([key, value]) => [
-                        key,
-                        value.value,
-                    ]),
-                );
-
-                // flatMap object values to .value
-                return StorageSerializers.object.write(json);
-            },
-        },
-    });
-};
-
-export const settings = useSettings();
-
-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[id];
-    });
-
-    watch(setting, (newSetting) => {
-        settings.value = {
-            ...settings.value,
-            [id]: newSetting,
-        };
-    });
-
-    return setting;
-};