chore: ⬆️ Upgrade to Nuxt 4

app/composables/Preference.ts

@@ -0,0 +1,56 @@
+import { StorageSerializers } from "@vueuse/core";
+import { preferences as prefs } from "~/components/preferences/preferences";
+
+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();