feat: ✨ Wire up new preferences and remove old settings

components/preferences2/category.vue

@@ -5,13 +5,13 @@
         </CardTitle>
         <Card class="p-0 gap-0">
             <div v-for="preference of preferences" :key="preference">
-                <TextPreferenceVue v-if="(prefs[preference] instanceof TextPreference)" :pref="(prefs[preference] as TextPreference)" />
-                <BooleanPreferenceVue v-else-if="(prefs[preference] instanceof BooleanPreference)" :pref="(prefs[preference] as BooleanPreference)" />
-                <SelectPreferenceVue v-else-if="(prefs[preference] instanceof SelectPreference)" :pref="(prefs[preference] as SelectPreference<string>)" />
-                <NumberPreferenceVue v-else-if="(prefs[preference] instanceof NumberPreference)" :pref="(prefs[preference] as NumberPreference)" />
-                <MultiSelectPreferenceVue v-else-if="(prefs[preference] instanceof MultiSelectPreference)" :pref="(prefs[preference] as MultiSelectPreference<string>)" />
-                <CodePreferenceVue v-else-if="(prefs[preference] instanceof CodePreference)" :pref="(prefs[preference] as CodePreference)" />
-                <UrlPreferenceVue v-else-if="(prefs[preference] instanceof UrlPreference)" :pref="(prefs[preference] as UrlPreference)" />
+                <TextPreferenceVue v-if="(prefs[preference] instanceof TextPreference)" :pref="(prefs[preference] as TextPreference)" :name="preference" />
+                <BooleanPreferenceVue v-else-if="(prefs[preference] instanceof BooleanPreference)" :pref="(prefs[preference] as BooleanPreference)" :name="preference" />
+                <SelectPreferenceVue v-else-if="(prefs[preference] instanceof SelectPreference)" :pref="(prefs[preference] as SelectPreference<string>)" :name="preference" />
+                <NumberPreferenceVue v-else-if="(prefs[preference] instanceof NumberPreference)" :pref="(prefs[preference] as NumberPreference)" :name="preference" />
+                <MultiSelectPreferenceVue v-else-if="(prefs[preference] instanceof MultiSelectPreference)" :pref="(prefs[preference] as MultiSelectPreference<string>)" :name="preference" />
+                <CodePreferenceVue v-else-if="(prefs[preference] instanceof CodePreference)" :pref="(prefs[preference] as CodePreference)" :name="preference" />
+                <UrlPreferenceVue v-else-if="(prefs[preference] instanceof UrlPreference)" :pref="(prefs[preference] as UrlPreference)" :name="preference" />
             </div>
         </Card>
     </section>

components/preferences2/developer.vue

@@ -0,0 +1,60 @@
+<template>
+    <Card class="grid gap-3 text-sm p-4">
+        <dl class="grid gap-3">
+            <div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
+                <dt class="text-muted-foreground">
+                    {{ key }}
+                </dt>
+                <dd class="font-mono" v-if="typeof value === 'string'">{{ value }}</dd>
+                <dd class="font-mono" v-else>
+                    <component :is="value" />
+                </dd>
+            </div>
+        </dl>
+    </Card>
+</template>
+
+<script lang="tsx" setup>
+import type { VNode } from "vue";
+import { toast } from "vue-sonner";
+import { Button } from "../ui/button";
+import { Card } from "../ui/card";
+
+const copy = (data: string) => {
+    navigator.clipboard.writeText(data);
+    toast.success("Copied to clipboard");
+};
+
+const appData = useAppData();
+
+const data: [string, string | VNode][] = [
+    ["User ID", identity.value?.account.id ?? ""],
+    ["Instance domain", identity.value?.instance.domain ?? ""],
+    ["Instance version", identity.value?.instance.versia_version ?? ""],
+    ["Client ID", appData.value?.client_id ?? ""],
+    [
+        "Client secret",
+        <Button
+            variant="outline"
+            class="font-sans"
+            size="sm"
+            // @ts-expect-error missing onClick types
+            onClick={() => copy(appData.value?.client_secret ?? "")}
+        >
+            Click to copy
+        </Button>,
+    ],
+    [
+        "Access token",
+        <Button
+            variant="outline"
+            class="font-sans"
+            size="sm"
+            // @ts-expect-error missing onClick types
+            onClick={() => copy(identity.value?.tokens.access_token ?? "")}
+        >
+            Click to copy
+        </Button>,
+    ],
+];
+</script>

components/preferences2/dialog.vue

@@ -21,6 +21,7 @@ import TinyCard from "../profiles/tiny-card.vue";
 import { Separator } from "../ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import Category from "./category.vue";
+import Developer from "./developer.vue";
 import Emojis from "./emojis/index.vue";
 import Page from "./page.vue";
 import { preferences } from "./preferences";
@@ -110,6 +111,11 @@ const { account: author3 } = useAccountFromAcct(
                         <Emojis />
                     </Page>
                 </TabsContent>
+                <TabsContent value="Developer" as-child>
+                    <Page title="Developer">
+                        <Developer />
+                    </Page>
+                </TabsContent>
                 <TabsContent value="About" as-child>
                     <Page title="About">
                         <section class="space-y-4">

components/preferences2/stats.vue

@@ -25,7 +25,6 @@ const data: [string, string | VNode][] = [
     ["Author", pkg.author.name],
     [
         "Repository",
-        // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
         <a
             href={pkg.repository.url.replace("git+", "")}
             target="_blank"

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>