feat: ✨ Wire up new preferences and remove old settings

components/preferences2/types/base.vue

@@ -13,17 +13,23 @@
 </template>
 
 <script lang="ts" setup>
+import type { preferences as prefs } from "../preferences";
 import type { Preference } from "../types";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: Preference<any>;
+    name: keyof typeof prefs;
 }>();
 
-const value = ref<any>(pref.options.defaultValue);
+const value = ref<any>(preferences[name].value);
 const setValue = (newValue: MaybeRef<any>) => {
     value.value = toValue(newValue);
 };
 
+watch(value, (newVal) => {
+    preferences[name].value = newVal;
+});
+
 defineSlots<{
     default(props: {
         value: any;

components/preferences2/types/boolean.vue

@@ -1,15 +1,17 @@
 <template>
-    <Base :pref="pref" v-slot="{ setValue, value }">
+    <Base :pref="pref" :name="name" v-slot="{ setValue, value }">
         <Switch @update:model-value="setValue" :model-value="value" />
     </Base>
 </template>
 
 <script lang="ts" setup>
 import { Switch } from "~/components/ui/switch";
+import type { preferences as prefs } from "../preferences";
 import type { BooleanPreference } from "../types";
 import Base from "./base.vue";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: BooleanPreference;
+    name: keyof typeof prefs;
 }>();
 </script>

components/preferences2/types/code.vue

@@ -1,6 +1,6 @@
 <template>
     <Collapsible as-child>
-        <Base :pref="pref">
+        <Base :name="name" :pref="pref">
         <template #default>
             <CollapsibleTrigger as-child>
                 <Button variant="outline">
@@ -25,10 +25,12 @@ import {
     CollapsibleTrigger,
 } from "~/components/ui/collapsible";
 import { Textarea } from "~/components/ui/textarea";
+import type { preferences as prefs } from "../preferences";
 import type { CodePreference } from "../types";
 import Base from "./base.vue";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: CodePreference;
+    name: keyof typeof prefs;
 }>();
 </script>

components/preferences2/types/multiselect.vue

@@ -1,5 +1,5 @@
 <template>
-    <Base :pref="pref" v-slot="{ setValue, value }">
+    <Base :pref="pref" :name="name" v-slot="{ setValue, value }">
     <DropdownMenu>
         <DropdownMenuTrigger as-child>
             <Button variant="outline">
@@ -30,10 +30,12 @@ import {
     DropdownMenuContent,
     DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
+import type { preferences as prefs } from "../preferences";
 import type { MultiSelectPreference } from "../types";
 import Base from "./base.vue";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: MultiSelectPreference<string>;
+    name: keyof typeof prefs;
 }>();
 </script>

components/preferences2/types/number.vue

@@ -1,5 +1,5 @@
 <template>
-    <Base :pref="pref" v-slot="{ setValue, value }">
+    <Base :pref="pref" :name="name" v-slot="{ setValue, value }">
         <NumberField :model-value="value" @update:model-value="setValue" :min="pref.options.min" :max="pref.options.max" :step="pref.options.integer ? 1 : pref.options.step">
             <NumberFieldContent>
                 <NumberFieldDecrement />
@@ -18,10 +18,12 @@ import {
     NumberFieldIncrement,
     NumberFieldInput,
 } from "~/components/ui/number-field";
+import type { preferences as prefs } from "../preferences";
 import type { NumberPreference } from "../types";
 import Base from "./base.vue";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: NumberPreference;
+    name: keyof typeof prefs;
 }>();
 </script>

components/preferences2/types/select.vue

@@ -1,5 +1,5 @@
 <template>
-    <Base :pref="pref" v-slot="{ setValue, value }">
+    <Base :pref="pref" :name="name" v-slot="{ setValue, value }">
         <Select :model-value="value" @update:model-value="setValue">
             <SelectTrigger>
                 <SelectValue placeholder="Select an option" />
@@ -24,10 +24,12 @@ import {
     SelectTrigger,
     SelectValue,
 } from "~/components/ui/select";
+import type { preferences as prefs } from "../preferences";
 import type { SelectPreference } from "../types";
 import Base from "./base.vue";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: SelectPreference<string>;
+    name: keyof typeof prefs;
 }>();
 </script>

components/preferences2/types/text.vue

@@ -1,15 +1,17 @@
 <template>
-    <Base :pref="pref" v-slot="{ setValue, value }">
+    <Base :pref="pref" :name="name" v-slot="{ setValue, value }">
         <Input placeholder="Content here..." :model-value="value" @update:model-value="setValue" />
     </Base>
 </template>
 
 <script lang="ts" setup>
 import { Input } from "~/components/ui/input";
+import type { preferences as prefs } from "../preferences";
 import type { TextPreference } from "../types";
 import Base from "./base.vue";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: TextPreference;
+    name: keyof typeof prefs;
 }>();
 </script>

components/preferences2/types/url.vue

@@ -1,6 +1,6 @@
 <template>
     <Collapsible as-child>
-        <Base :pref="pref">
+        <Base :pref="pref" :name="name">
         <template #default>
             <CollapsibleTrigger as-child>
                 <Button variant="outline">
@@ -25,10 +25,12 @@ import {
     CollapsibleTrigger,
 } from "~/components/ui/collapsible";
 import { Input, UrlInput } from "~/components/ui/input";
+import type { preferences as prefs } from "../preferences";
 import type { TextPreference } from "../types";
 import Base from "./base.vue";
 
-const { pref } = defineProps<{
+const { pref, name } = defineProps<{
     pref: TextPreference;
+    name: keyof typeof prefs;
 }>();
 </script>