refactor: ♻️ Finish rewrite and delete old settings backend

components/preferences/category.vue

@@ -0,0 +1,45 @@
+<template>
+    <section class="space-y-2">
+        <CardTitle class="text-xs">
+            {{ name }}
+        </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)" :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>
+</template>
+
+<script lang="ts" setup>
+import { Card, CardTitle } from "../ui/card/index.ts";
+// biome-ignore lint/style/useImportType: <explanation>
+import { preferences as prefs } from "./preferences.ts";
+import {
+    BooleanPreference,
+    CodePreference,
+    MultiSelectPreference,
+    NumberPreference,
+    SelectPreference,
+    TextPreference,
+    UrlPreference,
+} from "./types.ts";
+import BooleanPreferenceVue from "./types/boolean.vue";
+import CodePreferenceVue from "./types/code.vue";
+import MultiSelectPreferenceVue from "./types/multiselect.vue";
+import NumberPreferenceVue from "./types/number.vue";
+import SelectPreferenceVue from "./types/select.vue";
+import TextPreferenceVue from "./types/text.vue";
+import UrlPreferenceVue from "./types/url.vue";
+
+const { preferences = [], name } = defineProps<{
+    preferences: (keyof typeof prefs)[];
+    name: string;
+}>();
+</script>

components/preferences/code.vue

@@ -1,64 +0,0 @@
-<template>
-    <Collapsible
-        :as="Card"
-        class="grid justify-normal items-center px-6 py-4 gap-4"
-        v-slot="{ open }"
-    >
-        <div class="grid grid-cols-[1fr_auto] items-center gap-4">
-            <CardHeader class="space-y-0.5 p-0">
-                <CardTitle class="text-base">
-                    {{ setting.title() }}
-                </CardTitle>
-                <CardDescription>
-                    {{ setting.description() }}
-                </CardDescription>
-            </CardHeader>
-            <CollapsibleTrigger :as-child="true">
-                <Button
-                    variant="outline"
-                    size="icon"
-                    class="ml-auto [&_svg]:data-[state=open]:-rotate-180"
-                    :title="open ? 'Collapse' : 'Expand'"
-                >
-                    <ChevronDown class="duration-200" />
-                </Button>
-            </CollapsibleTrigger>
-        </div>
-        <CollapsibleContent :as-child="true">
-            <CardFooter class="p-1">
-                <Textarea
-                    :rows="10"
-                    :model-value="setting.value"
-                    @update:model-value="
-                        (v) => {
-                            setting.value = String(v);
-                        }
-                    "
-                />
-            </CardFooter>
-        </CollapsibleContent>
-    </Collapsible>
-</template>
-
-<script lang="ts" setup>
-import { ChevronDown } from "lucide-vue-next";
-import { Button } from "~/components/ui/button";
-import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger,
-} from "~/components/ui/collapsible";
-import { Textarea } from "~/components/ui/textarea";
-import type { CodeSetting } from "~/settings.ts";
-
-defineModel<CodeSetting>("setting", {
-    required: true,
-});
-</script>

components/preferences/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/preferences/dialog.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import {
+    InfoIcon,
+    PaletteIcon,
+    SettingsIcon,
+    ShieldCheckIcon,
+    SmileIcon,
+    TerminalSquareIcon,
+    UserIcon,
+} from "lucide-vue-next";
+import pkg from "~/package.json";
+import Avatar from "../profiles/avatar.vue";
+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";
+import Profile from "./profile.vue";
+import Stats from "./stats.vue";
+
+const pages = Object.values(preferences)
+    .map((p) => p.options.category)
+    .filter((c) => c !== undefined)
+    .map((c) => c.split("/")[0] as string)
+    .concat(["Account", "Emojis", "Developer", "About"])
+    // Remove duplicates
+    .filter((c, i, a) => a.indexOf(c) === i);
+const extraPages = ["Account", "Emojis", "Developer", "About"];
+
+const icons: Record<string, Component> = {
+    Account: UserIcon,
+    Appearance: PaletteIcon,
+    Emojis: SmileIcon,
+    Behaviour: SettingsIcon,
+    Roles: ShieldCheckIcon,
+    Developer: TerminalSquareIcon,
+    About: InfoIcon,
+};
+
+// For each page, map the associated categories
+const categories = Object.fromEntries(
+    pages.map((page) => {
+        const categories = Object.values(preferences)
+            .map((p) => p.options.category)
+            .filter((c) => c !== undefined)
+            .filter((c) => c.split("/")[0] === page)
+            .map((c) => c.split("/")[1] as string)
+            // Remove duplicates
+            .filter((c, i, a) => a.indexOf(c) === i);
+
+        return [page, categories];
+    }),
+);
+
+const { account: author1 } = useAccountFromAcct(
+    client,
+    "jessew@vs.cpluspatch.com",
+);
+
+const { account: author2 } = useAccountFromAcct(
+    client,
+    "aprl@social.lysand.org",
+);
+
+const { account: author3 } = useAccountFromAcct(
+    client,
+    "lina@social.lysand.org",
+);
+
+const open = ref(false);
+
+useListen("preferences:open", () => {
+    open.value = true;
+});
+</script>
+
+<template>
+    <Dialog v-model:open="open" v-if="identity">
+        <DialogContent class="md:max-w-5xl w-full h-full p-0 md:max-h-[70dvh] overflow-hidden">
+            <Tabs class="md:grid-cols-[auto_minmax(0,1fr)] !grid gap-2 *:p-4 overflow-hidden *:overflow-y-auto *:h-full" orientation="vertical"
+                :default-value="pages[0]">
+                <DialogHeader class="gap-6 grid grid-rows-[auto_minmax(0,1fr)] border-b md:border-b-0 md:border-r min-w-60 text-left">
+                    <div class="grid gap-3 items-center grid-cols-[auto_minmax(0,1fr)]">
+                        <Avatar :name="identity.account.display_name || identity.account.username"
+                            :src="identity.account.avatar" />
+                        <DialogTitle>Preferences</DialogTitle>
+                    </div>
+                    <DialogDescription class="sr-only">
+                        Make changes to your preferences here.
+                    </DialogDescription>
+                    <TabsList class="md:grid md:grid-cols-1 w-full h-fit *:justify-start !justify-start">
+                        <TabsTrigger v-for="page in pages" :key="page" :value="page">
+                            <component :is="icons[page]" class="size-4 mr-2" />
+                            {{ page }}
+                        </TabsTrigger>
+                    </TabsList>
+                </DialogHeader>
+                <TabsContent v-for="page in pages.filter(p => !extraPages.includes(p))" :key="page" :value="page"
+                    as-child>
+                    <Page :title="page">
+                        <Category v-for="category in categories[page]" :key="category"
+                            :preferences="Object.entries(preferences).filter(([, p]) => p.options.category === `${page}/${category}`).map(([k,]) => k as keyof typeof preferences)"
+                            :name="category" />
+                    </Page>
+                </TabsContent>
+                <TabsContent value="Emojis" as-child>
+                    <Page title="Emojis">
+                        <Emojis />
+                    </Page>
+                </TabsContent>
+                <TabsContent value="Account" as-child>
+                    <Page title="Account">
+                        <Profile />
+                    </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">
+                            <p class="leading-7 text-sm max-w-xl">
+                                {{ pkg.description }}
+                            </p>
+
+                            <Stats />
+                        </section>
+                        <Separator />
+                        <section class="space-y-2">
+                            <h3 class="text-lg font-semibold tracking-tight">Developers</h3>
+                            <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4">
+                                <TinyCard v-if="author1" :account="author1" domain="vs.cpluspatch.com" />
+                                <TinyCard v-if="author2" :account="author2" domain="social.lysand.org" />
+                                <TinyCard v-if="author3" :account="author3" domain="social.lysand.org" />
+                            </div>
+                        </section>
+                        <Separator />
+                        <section class="space-y-2">
+                            <h3 class="text-lg font-semibold tracking-tight">Dependencies</h3>
+                            <ul class="grid lg:grid-cols-2 gap-2 grid-cols-1 items-center justify-center list-disc ml-6">
+                                <li v-for="[dep, version] in Object.entries(pkg.dependencies)" :key="dep">
+                                    <code
+                                        class="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold">
+                                        {{ dep }}@{{ version }}
+                                    </code>
+                                </li>
+                            </ul>
+                        </section>
+                    </Page>
+                </TabsContent>
+            </Tabs>
+        </DialogContent>
+    </Dialog>
+</template>

components/preferences/emojis/batch-dropdown.vue

@@ -0,0 +1,72 @@
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <slot />
+        </DropdownMenuTrigger>
+         <DropdownMenuContent class="min-w-48">
+            <DropdownMenuItem @click="deleteAll" :disabled="!canEdit">
+                <Delete />
+                {{ m.tense_quick_cod_favor() }}
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+
+<script lang="ts" setup>
+import { type Emoji, RolePermission } from "@versia/client/types";
+import { Delete } from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import { confirmModalService } from "~/components/modals/composable";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import * as m from "~/paraglide/messages.js";
+
+const { emojis } = defineProps<{
+    emojis: Emoji[];
+}>();
+
+const permissions = usePermissions();
+const canEdit =
+    (!emojis.some((e) => e.global) &&
+        permissions.value.includes(RolePermission.ManageOwnEmojis)) ||
+    permissions.value.includes(RolePermission.ManageEmojis);
+
+const deleteAll = async () => {
+    if (!identity.value) {
+        return;
+    }
+
+    const { confirmed } = await confirmModalService.confirm({
+        title: m.tense_quick_cod_favor(),
+        message: m.next_hour_jurgen_sprout({
+            amount: emojis.length,
+        }),
+        confirmText: m.tense_quick_cod_favor(),
+    });
+
+    if (confirmed) {
+        const id = toast.loading(
+            m.equal_only_crow_file({
+                amount: emojis.length,
+            }),
+        );
+        try {
+            await Promise.all(
+                emojis.map((emoji) => client.value.deleteEmoji(emoji.id)),
+            );
+            toast.dismiss(id);
+            toast.success("Emojis deleted");
+
+            identity.value.emojis = identity.value.emojis.filter(
+                (e) => !emojis.some((emoji) => e.id === emoji.id),
+            );
+        } catch {
+            toast.dismiss(id);
+        }
+    }
+};
+</script>

components/preferences/emojis/category.vue

@@ -1,34 +0,0 @@
-<template>
-    <Collapsible :default-open="true">
-        <div class="grid grid-cols-[1fr_auto] gap-4 items-baseline">
-            <h2 class="text-2xl font-semibold tracking-tight">
-                {{ name }}
-            </h2>
-            <CollapsibleTrigger :as-child="true">
-                <Button size="icon" variant="outline" class="[&_svg]:data-[state=open]:-rotate-180">
-                    <ChevronDown class="duration-200" />
-                </Button>
-            </CollapsibleTrigger>
-        </div>
-        <CollapsibleContent class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-3 mt-4">
-            <Emoji v-for="emoji in emojis" :key="emoji.id" :emoji="emoji" />
-        </CollapsibleContent>
-    </Collapsible>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji as EmojiType } from "@versia/client/types";
-import { ChevronDown } from "lucide-vue-next";
-import { Button } from "~/components/ui/button";
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger,
-} from "~/components/ui/collapsible";
-import Emoji from "./emoji.vue";
-
-defineProps<{
-    emojis: EmojiType[];
-    name: string;
-}>();
-</script>

components/preferences/emojis/dropdown.vue

@@ -1,39 +1,11 @@
 <template>
     <DropdownMenu>
-        <Card
-            :class="
-                cn(
-                    'grid hover:cursor-pointer gap-4 items-center p-4',
-                    canEdit
-                        ? 'grid-cols-[auto_1fr_auto]'
-                        : 'grid-cols-[auto_1fr]'
-                )
-            "
-        >
-            <Avatar shape="square">
-                <AvatarImage :src="emoji.url" />
-            </Avatar>
-            <CardHeader class="p-0 gap-0 overflow-hidden">
-                <CardTitle as="span" class="text-sm font-mono truncate">
-                    {{ emoji.shortcode }}
-                </CardTitle>
-                <CardDescription>
-                    {{
-                        emoji.global
-                            ? m.real_tame_moose_greet()
-                            : m.witty_heroic_trout_cry()
-                    }}
-                </CardDescription>
-            </CardHeader>
-            <CardFooter class="p-0" v-if="canEdit">
-                <DropdownMenuTrigger :as-child="true">
-                    <Button variant="ghost" size="icon">
-                        <Ellipsis />
-                    </Button>
-                </DropdownMenuTrigger>
-            </CardFooter>
-        </Card>
-        <DropdownMenuContent class="min-w-48">
+        <DropdownMenuTrigger as-child>
+            <Button variant="ghost" size="icon" title="Open menu" class="size-8 p-0">
+                <MoreHorizontal class="size-4" />
+            </Button>
+        </DropdownMenuTrigger>
+         <DropdownMenuContent class="min-w-48">
             <DropdownMenuItem @click="editName">
                 <TextCursorInput />
                 {{ m.cuddly_such_swallow_hush() }}
@@ -52,20 +24,11 @@
 </template>
 
 <script lang="ts" setup>
-import { cn } from "@/lib/utils";
 import { type Emoji, RolePermission } from "@versia/client/types";
-import { Delete, Ellipsis, TextCursorInput } from "lucide-vue-next";
+import { Delete, MoreHorizontal, TextCursorInput } from "lucide-vue-next";
 import { toast } from "vue-sonner";
 import { confirmModalService } from "~/components/modals/composable";
-import { Avatar, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
-import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
 import {
     DropdownMenu,
     DropdownMenuContent,

components/preferences/emojis/index.vue

@@ -0,0 +1,51 @@
+<template>
+     <div v-if="emojis.length > 0" class="grow">
+        <Table :emojis="emojis" :can-upload="canUpload" />
+     </div>
+</template>
+
+<script lang="ts" setup>
+import { type Emoji, RolePermission } from "@versia/client/types";
+import * as m from "~/paraglide/messages.js";
+import Table from "./table.vue";
+
+const permissions = usePermissions();
+const canUpload = computed(
+    () =>
+        permissions.value.includes(RolePermission.ManageOwnEmojis) ||
+        permissions.value.includes(RolePermission.ManageEmojis),
+);
+
+const emojis = computed(
+    () =>
+        identity.value?.emojis?.filter((emoji) =>
+            emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
+        ) ?? [],
+);
+
+const search = ref("");
+
+/**
+ * Sort emojis by category
+ */
+const categories = computed(() => {
+    const categories = new Map<string, Emoji[]>();
+    for (const emoji of emojis.value) {
+        if (!emoji.category) {
+            if (!categories.has(m.lucky_ago_rat_pinch())) {
+                categories.set(m.lucky_ago_rat_pinch(), []);
+            }
+
+            categories.get(m.lucky_ago_rat_pinch())?.push(emoji);
+            continue;
+        }
+
+        if (!categories.has(emoji.category)) {
+            categories.set(emoji.category, []);
+        }
+
+        categories.get(emoji.category)?.push(emoji);
+    }
+    return categories;
+});
+</script>

components/preferences/emojis/table.vue

@@ -0,0 +1,361 @@
+<script setup lang="tsx">
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import type {
+    ColumnDef,
+    ColumnFiltersState,
+    ExpandedState,
+    SortingState,
+    Updater,
+    VisibilityState,
+} from "@tanstack/vue-table";
+import {
+    FlexRender,
+    getCoreRowModel,
+    getExpandedRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useVueTable,
+} from "@tanstack/vue-table";
+import type { Emoji } from "@versia/client/types";
+import {
+    ArrowDownAZ,
+    ArrowUpAz,
+    ArrowUpDown,
+    ChevronDown,
+    Ellipsis,
+    Globe,
+    Home,
+    Plus,
+} from "lucide-vue-next";
+import { ref } from "vue";
+import BatchDropdown from "./batch-dropdown.vue";
+import Dropdown from "./dropdown.vue";
+import Uploader from "./uploader.vue";
+
+// No destructuring props to avoid reactivity issues
+const props = defineProps<{
+    emojis: Emoji[];
+    canUpload: boolean;
+}>();
+
+const emojisRef = computed(() => props.emojis);
+
+const valueUpdater = <T extends Updater<any>>(updaterOrValue: T, ref: Ref) => {
+    ref.value =
+        typeof updaterOrValue === "function"
+            ? updaterOrValue(ref.value)
+            : updaterOrValue;
+};
+
+const columns: ColumnDef<Emoji>[] = [
+    {
+        id: "select",
+        header: ({ table }) => (
+            <Checkbox
+                modelValue={
+                    table.getIsAllPageRowsSelected() ||
+                    (table.getIsSomePageRowsSelected() && "indeterminate")
+                }
+                onUpdate:modelValue={(value) =>
+                    table.toggleAllPageRowsSelected(!!value)
+                }
+                aria-label="Select all"
+            />
+        ),
+        cell: ({ row }) => (
+            <Checkbox
+                modelValue={row.getIsSelected()}
+                onUpdate:modelValue={(value) => row.toggleSelected(!!value)}
+                aria-label="Select row"
+            />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+    },
+    {
+        accessorKey: "url",
+        header: "Image",
+        cell: ({ row }) => (
+            <img
+                src={row.getValue("url")}
+                alt={`:${row.getValue("shortcode")}:`}
+                title={row.getValue("shortcode")}
+                class="h-[1lh] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out"
+            />
+        ),
+    },
+    {
+        accessorKey: "shortcode",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="link"
+                    class="!p-0 !h-auto"
+                    // @ts-expect-error types don't include onClick
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === "asc")
+                    }
+                >
+                    Shortcode
+                    {column.getIsSorted() === false ? (
+                        <ArrowUpDown class="ml-2 size-4" />
+                    ) : column.getIsSorted() === "asc" ? (
+                        <ArrowDownAZ class="ml-2 size-4" />
+                    ) : (
+                        <ArrowUpAz class="ml-2 size-4" />
+                    )}
+                </Button>
+            );
+        },
+        cell: ({ row }) => (
+            <div class="font-mono">{row.getValue("shortcode")}</div>
+        ),
+    },
+    {
+        accessorKey: "category",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="link"
+                    class="!p-0 !h-auto"
+                    // @ts-expect-error types don't include onClick
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === "asc")
+                    }
+                >
+                    Category
+                    {column.getIsSorted() === false ? (
+                        <ArrowUpDown class="ml-2 size-4" />
+                    ) : column.getIsSorted() === "asc" ? (
+                        <ArrowDownAZ class="ml-2 size-4" />
+                    ) : (
+                        <ArrowUpAz class="ml-2 size-4" />
+                    )}
+                </Button>
+            );
+        },
+        cell: ({ row }) => (
+            <div class="font-mono">
+                {row.getValue("category") ?? "Uncategorized"}
+            </div>
+        ),
+    },
+    {
+        accessorKey: "global",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="link"
+                    class="!p-0 !h-auto"
+                    // @ts-expect-error types don't include onClick
+                    onClick={() => {
+                        const filter = column.getFilterValue();
+
+                        if (filter === undefined) {
+                            column.setFilterValue(false);
+                        } else if (filter === false) {
+                            column.setFilterValue(true);
+                        } else {
+                            column.setFilterValue(undefined);
+                        }
+                    }}
+                >
+                    Uploader
+                    {column.getFilterValue() === undefined ? (
+                        <Ellipsis class="ml-2 size-4" />
+                    ) : column.getFilterValue() ? (
+                        <Globe class="ml-2 size-4" />
+                    ) : (
+                        <Home class="ml-2 size-4" />
+                    )}
+                </Button>
+            );
+        },
+        cell: ({ row }) => (
+            <div class="font-mono">
+                {row.getValue("global") ? "Admin" : "You"}
+            </div>
+        ),
+    },
+    {
+        id: "actions",
+        enableHiding: false,
+        header: ({ table }) => {
+            const selected = table
+                .getFilteredSelectedRowModel()
+                .rows.map((r) => r.original);
+
+            return (
+                <div class="relative">
+                    <BatchDropdown emojis={selected}>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            // @ts-expect-error types don't include title
+                            title="Open menu"
+                            disabled={selected.length === 0}
+                        >
+                            <Ellipsis class="size-4" />
+                        </Button>
+                    </BatchDropdown>
+                </div>
+            );
+        },
+        cell: ({ row }) => {
+            const emoji = row.original;
+
+            return (
+                <div class="relative">
+                    <Dropdown emoji={emoji} />
+                </div>
+            );
+        },
+    },
+];
+
+const sorting = ref<SortingState>([
+    {
+        id: "shortcode",
+        desc: false,
+    },
+]);
+const columnFilters = ref<ColumnFiltersState>([]);
+const columnVisibility = ref<VisibilityState>({});
+const rowSelection = ref({});
+const expanded = ref<ExpandedState>({});
+
+const table = useVueTable({
+    data: emojisRef,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
+    onColumnFiltersChange: (updaterOrValue) =>
+        valueUpdater(updaterOrValue, columnFilters),
+    onColumnVisibilityChange: (updaterOrValue) =>
+        valueUpdater(updaterOrValue, columnVisibility),
+    onRowSelectionChange: (updaterOrValue) =>
+        valueUpdater(updaterOrValue, rowSelection),
+    onExpandedChange: (updaterOrValue) =>
+        valueUpdater(updaterOrValue, expanded),
+    state: {
+        get sorting() {
+            return sorting.value;
+        },
+        get columnFilters() {
+            return columnFilters.value;
+        },
+        get columnVisibility() {
+            return columnVisibility.value;
+        },
+        get rowSelection() {
+            return rowSelection.value;
+        },
+        get expanded() {
+            return expanded.value;
+        },
+    },
+});
+</script>
+
+<template>
+    <div class="w-full">
+        <div class="flex gap-2 items-center py-4">
+            <Input class="max-w-52 mr-auto" placeholder="Filter emojis..."
+                :model-value="(table.getColumn('shortcode')?.getFilterValue() as string)"
+                @update:model-value="table.getColumn('shortcode')?.setFilterValue($event)" />
+            <Uploader v-if="props.canUpload">
+                <Button variant="outline" size="icon" title="Upload emoji">
+                    <Plus class="size-4" />
+                </Button>
+            </Uploader>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <Button variant="outline">
+                        Columns
+                        <ChevronDown class="ml-2 size-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuCheckboxItem
+                        v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
+                        class="capitalize" :model-value="column.getIsVisible()" @update:model-value="(value) => {
+                            column.toggleVisibility(!!value)
+                        }">
+                        {{ column.id }}
+                    </DropdownMenuCheckboxItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+        <div class="rounded-md border">
+            <Table>
+                <TableHeader>
+                    <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+                        <TableHead v-for="header in headerGroup.headers" :key="header.id" class="">
+                            <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
+                                :props="header.getContext()" />
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    <template v-if="table.getRowModel().rows?.length">
+                        <template v-for="row in table.getRowModel().rows" :key="row.id">
+                            <TableRow :data-state="row.getIsSelected() && 'selected'">
+                                <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+                                    <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                                </TableCell>
+                            </TableRow>
+                            <TableRow v-if="row.getIsExpanded()">
+                                <TableCell :colspan="row.getAllCells().length">
+                                    {{ JSON.stringify(row.original) }}
+                                </TableCell>
+                            </TableRow>
+                        </template>
+                    </template>
+
+                    <TableRow v-else>
+                        <TableCell :colspan="columns.length" class="h-24 text-center">
+                            No results.
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </div>
+
+        <div class="flex items-center justify-end space-x-2 py-4">
+            <div class="flex-1 text-sm text-muted-foreground">
+                {{ table.getFilteredSelectedRowModel().rows.length }} of
+                {{ table.getFilteredRowModel().rows.length }} row(s) selected.
+            </div>
+            <div class="space-x-2">
+                <Button variant="outline" size="sm" :disabled="!table.getCanPreviousPage()"
+                    @click="table.previousPage()">
+                    Previous
+                </Button>
+                <Button variant="outline" size="sm" :disabled="!table.getCanNextPage()" @click="table.nextPage()">
+                    Next
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>

components/preferences/emojis/uploader.vue

@@ -10,7 +10,7 @@
             <DialogDescription class="sr-only">
                 {{ m.frail_great_marten_pet() }}
             </DialogDescription>
-            <form class="p-4 grid gap-6" @submit="submit">
+            <form class="grid gap-6" @submit="submit">
                 <div
                     v-if="values.image"
                     class="flex items-center justify-around *:size-20 *:p-2 *:rounded *:border *:shadow"
@@ -125,32 +125,18 @@
                 </FormField>
 
                 <FormField
-                    v-slot="{ componentField, value, handleChange }"
+                    v-slot="{ value, handleChange }"
                     v-if="hasEmojiAdmin"
                     name="global"
-                    :as="Card"
+                    as-child
                 >
-                    <FormItem
-                        class="grid grid-cols-[1fr_auto] items-center gap-2"
-                    >
-                        <CardHeader class="space-y-0.5 p-0">
-                            <FormLabel :as="CardTitle">
-                                {{ m.pink_sharp_carp_work() }}
-                            </FormLabel>
-                            <CardDescription>
-                                {{ m.dark_pretty_hyena_link() }}
-                            </CardDescription>
-                        </CardHeader>
-                        <FormControl>
-                            <Switch
-                                :checked="value"
-                                @update:checked="handleChange"
-                                v-bind="componentField"
-                                :disabled="isSubmitting"
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
+                    <FormSwitch :title="m.pink_sharp_carp_work()" :description="m.dark_pretty_hyena_link()">
+                        <Switch
+                            :model-value="value"
+                            @update:model-value="handleChange"
+                            :disabled="isSubmitting"
+                        />
+                    </FormSwitch>
                 </FormField>
 
                 <DialogFooter>
@@ -178,6 +164,7 @@ import { RolePermission } from "@versia/client/types";
 import { useForm } from "vee-validate";
 import { toast } from "vue-sonner";
 import { z } from "zod";
+import FormSwitch from "~/components/form/switch.vue";
 import { Button } from "~/components/ui/button";
 import {
     Card,

components/preferences/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <Dialog />
+</template>
+
+<script lang="ts" setup>
+import Dialog from "./dialog.vue";
+</script>

components/preferences/page.vue

@@ -0,0 +1,15 @@
+<template>
+    <section class="gap-4 flex flex-col">
+        <h2 class="text-xl font-bold tracking-tight">
+            {{ title }}
+        </h2>
+
+        <slot />
+    </section>
+</template>
+
+<script lang="ts" setup>
+const { title } = defineProps<{
+    title: string;
+}>();
+</script>

components/preferences/preferences.ts

@@ -0,0 +1,150 @@
+import * as m from "~/paraglide/messages.js";
+import {
+    BooleanPreference,
+    CodePreference,
+    MultiSelectPreference,
+    NumberPreference,
+    SelectPreference,
+    UrlPreference,
+} from "./types";
+
+export const preferences = {
+    render_mfm: new BooleanPreference({
+        name: m.quaint_clear_boar_attend(),
+        description: m.aloof_helpful_larva_spur(),
+        defaultValue: true,
+        category: "Behaviour/Notes",
+    }),
+    default_visibility: new SelectPreference<
+        "public" | "unlisted" | "private" | "direct"
+    >({
+        name: m.loud_tense_kitten_exhale(),
+        description: m.vivid_last_crocodile_offer(),
+        defaultValue: "public",
+        options: {
+            public: m.lost_trick_dog_grace(),
+            unlisted: m.funny_slow_jannes_walk(),
+            private: m.grassy_empty_raven_startle(),
+            direct: m.pretty_bold_baboon_wave(),
+        },
+        category: "Behaviour/Posting",
+    }),
+    language: new SelectPreference<"en" | "fr">({
+        name: m.pretty_born_jackal_dial(),
+        description: m.tired_happy_lobster_pet(),
+        defaultValue: "en",
+        options: {
+            en: m.keen_aware_goldfish_thrive(
+                {},
+                {
+                    locale: "en",
+                },
+            ),
+            fr: m.vivid_mellow_sawfish_approve(
+                {},
+                {
+                    locale: "fr",
+                },
+            ),
+        },
+        category: "Behaviour/Globals",
+    }),
+    border_radius: new NumberPreference({
+        name: "Border radius",
+        description:
+            "Global border radius that all elements inheritt from (rem units).",
+        defaultValue: 0.625,
+        step: 0.025,
+        min: 0,
+        max: 2,
+        category: "Appearance/Globals",
+    }),
+    custom_css: new CodePreference({
+        name: m.smart_awake_dachshund_view(),
+        description: m.loved_topical_rat_coax(),
+        defaultValue: "",
+        language: "css",
+        category: "Appearance/Globals",
+    }),
+    color_theme: new SelectPreference<"dark" | "light" | "system">({
+        name: m.hour_elegant_mink_grip(),
+        defaultValue: "system",
+        options: {
+            dark: m.wise_neat_ox_buzz(),
+            light: m.each_strong_snail_aid(),
+            system: m.helpful_raw_seal_nurture(),
+        },
+        category: "Appearance/Globals",
+    }),
+    custom_emojis: new BooleanPreference({
+        name: m.loud_raw_sheep_imagine(),
+        description: m.inclusive_pink_tuna_enjoy(),
+        defaultValue: true,
+        category: "Behaviour/Notes",
+    }),
+    show_content_warning: new BooleanPreference({
+        name: m.fair_swift_elephant_hunt(),
+        description: m.gray_minor_bee_endure(),
+        defaultValue: true,
+        category: "Behaviour/Notes",
+    }),
+    popup_avatar_hover: new BooleanPreference({
+        name: m.north_nimble_turkey_transform(),
+        description: m.bold_moving_fly_savor(),
+        defaultValue: false,
+        category: "Behaviour/Timelines",
+    }),
+    infinite_scroll: new BooleanPreference({
+        name: m.sleek_this_earthworm_hug(),
+        description: m.plane_dark_salmon_pout(),
+        defaultValue: true,
+        category: "Behaviour/Timelines",
+    }),
+    confirm_actions: new MultiSelectPreference<
+        "delete" | "follow" | "like" | "reblog"
+    >({
+        name: "Confirm actions",
+        description: "Confirm actions before performing them.",
+        defaultValue: ["delete"],
+        options: {
+            delete: m.trite_salty_eel_race(),
+            follow: m.jolly_empty_bullock_mend(),
+            like: m.patchy_basic_alligator_inspire(),
+            reblog: m.honest_great_rooster_taste(),
+        },
+        category: "Behaviour/Notes",
+    }),
+    ctrl_enter_send: new BooleanPreference({
+        name: m.equal_blue_zebra_launch(),
+        description: m.heavy_pink_meerkat_affirm(),
+        defaultValue: true,
+        category: "Behaviour/Posting",
+    }),
+    emoji_theme: new SelectPreference<
+        "native" | "twemoji" | "noto" | "fluent" | "fluent-flat"
+    >({
+        name: m.weak_bad_martin_glow(),
+        description: m.warm_round_dove_skip(),
+        defaultValue: "native",
+        options: {
+            native: m.slimy_sound_termite_hug(),
+            twemoji: m.new_brave_maggot_relish(),
+            noto: m.shy_clear_spider_cook(),
+            fluent: m.many_tasty_midge_zoom(),
+            "fluent-flat": m.less_early_lionfish_honor(),
+        },
+        category: "Appearance/Globals",
+    }),
+    background_url: new UrlPreference({
+        name: m.stock_large_marten_comfort(),
+        description: m.mean_weird_donkey_stab(),
+        defaultValue: "",
+        category: "Appearance/Globals",
+    }),
+    display_notifications_sidebar: new BooleanPreference({
+        name: m.tired_jumpy_rook_slurp(),
+        description: m.wide_new_robin_empower(),
+        defaultValue: true,
+        category: "Appearance/Globals",
+    }),
+} as const;

components/preferences/profile.ts

@@ -0,0 +1,63 @@
+import { toTypedSchema } from "@vee-validate/zod";
+import { z } from "zod";
+import * as m from "~/paraglide/messages.js";
+
+const characterRegex = new RegExp(/^[a-z0-9_-]+$/);
+
+export const formSchema = (identity: Identity) =>
+    toTypedSchema(
+        z.strictObject({
+            banner: z
+                .instanceof(File)
+                .refine(
+                    (v) =>
+                        v.size <=
+                        (identity.instance.configuration.accounts
+                            .header_size_limit ?? Number.POSITIVE_INFINITY),
+                    m.civil_icy_ant_mend({
+                        size: identity.instance.configuration.accounts
+                            .header_size_limit,
+                    }),
+                )
+                .optional(),
+            avatar: z
+                .instanceof(File)
+                .refine(
+                    (v) =>
+                        v.size <=
+                        (identity.instance.configuration.accounts
+                            .avatar_size_limit ?? Number.POSITIVE_INFINITY),
+                    m.zippy_caring_raven_edit({
+                        size: identity.instance.configuration.accounts
+                            .avatar_size_limit,
+                    }),
+                )
+                .or(z.string().url())
+                .optional(),
+            name: z
+                .string()
+                .max(
+                    identity.instance.configuration.accounts
+                        .max_displayname_characters,
+                ),
+            username: z
+                .string()
+                .regex(characterRegex, m.still_upper_otter_dine())
+                .max(
+                    identity.instance.configuration.accounts
+                        .max_username_characters,
+                ),
+            bio: z
+                .string()
+                .max(
+                    identity.instance.configuration.accounts
+                        .max_note_characters,
+                ),
+            bot: z.boolean().default(false),
+            locked: z.boolean().default(false),
+            discoverable: z.boolean().default(true),
+            fields: z.array(
+                z.strictObject({ name: z.string(), value: z.string() }),
+            ),
+        }),
+    );

components/preferences/profile.vue

@@ -0,0 +1,185 @@
+<template>
+    <form v-if="identity" class="grid gap-6" @submit="save">
+        <Transition name="slide-up">
+            <Alert v-if="dirty" layout="button" class="absolute bottom-2 z-10 inset-x-2 w-[calc(100%-1rem)]">
+                <SaveOff class="size-4" />
+                <AlertTitle>Unsaved changes</AlertTitle>
+                <AlertDescription>
+                    Click "apply" to save your changes.
+                </AlertDescription>
+                <Button variant="secondary" class="w-full" typ="submit" :disabled="submitting">Apply</Button>
+            </Alert>
+        </Transition>
+
+        <FormField v-slot="{ handleChange, handleBlur }" name="banner">
+            <TextInput :title="m.bright_late_osprey_renew()" :description="m.great_level_lamb_sway()">
+                <Input type="file" accept="image/*" @change="handleChange" @blur="handleBlur" />
+            </TextInput>
+        </FormField>
+
+        <FormField v-slot="{ setValue }" name="avatar">
+            <TextInput :title="m.safe_icy_bulldog_quell()">
+                <ImageUploader v-model:image="identity.account.avatar" @submit-file="(file) => setValue(file)"
+                    @submit-url="(url) => setValue(url)" />
+            </TextInput>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="name">
+            <TextInput :title="m.mild_known_mallard_jolt()" :description="m.lime_dry_skunk_loop()">
+                <Input v-bind="componentField" />
+            </TextInput>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="username">
+            <TextInput :title="m.neat_silly_dog_prosper()" :description="m.petty_plane_tadpole_earn()">
+                <Input v-bind="componentField" />
+            </TextInput>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="bio">
+            <TextInput :title="m.next_caring_ladybug_hack()" :description="m.stale_just_anaconda_earn()">
+                <Textarea rows="10" v-bind="componentField" />
+            </TextInput>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="fields">
+            <Fields :title="m.aqua_mealy_toucan_pride()" :value="value" @update:value="handleChange" />
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="bot" as-child>
+            <SwitchInput :title="m.gaudy_each_opossum_play()" :description="m.grassy_acidic_gadfly_cure()">
+                <Switch :model-value="value" @update:model-value="handleChange" />
+            </SwitchInput>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="locked" as-child>
+            <SwitchInput :title="m.dirty_moving_shark_emerge()" :description="m.bright_fun_mouse_boil()">
+                <Switch :model-value="value" @update:model-value="handleChange" />
+            </SwitchInput>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="discoverable" as-child>
+            <SwitchInput :title="m.red_vivid_cuckoo_spark()" :description="m.plain_zany_donkey_dart()">
+                <Switch :model-value="value" @update:model-value="handleChange" />
+            </SwitchInput>
+        </FormField>
+    </form>
+</template>
+
+<script lang="ts" setup>
+import { SaveOff } from "lucide-vue-next";
+import { useForm } from "vee-validate";
+import { toast } from "vue-sonner";
+import SwitchInput from "~/components/form/switch.vue";
+import TextInput from "~/components/form/text.vue";
+import * as m from "~/paraglide/messages.js";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Button } from "../ui/button";
+import { FormField } from "../ui/form";
+import { Input } from "../ui/input";
+import { Switch } from "../ui/switch";
+import { Textarea } from "../ui/textarea";
+import { formSchema } from "./profile";
+import Fields from "./profile/fields.vue";
+import ImageUploader from "./profile/image-uploader.vue";
+
+const dirty = computed(() => form.meta.value.dirty);
+const submitting = ref(false);
+
+if (!identity.value) {
+    throw new Error("Identity not found.");
+}
+
+const account = computed(() => identity.value?.account as Identity["account"]);
+const schema = formSchema(identity.value);
+
+const form = useForm({
+    validationSchema: schema,
+    initialValues: {
+        bio: account.value.source?.note ?? "",
+        bot: account.value.bot ?? false,
+        locked: account.value.locked ?? false,
+        discoverable: account.value.discoverable ?? true,
+        username: account.value.username,
+        name: account.value.display_name,
+        fields:
+            account.value.source?.fields.map((f) => ({
+                name: f.name,
+                value: f.value,
+            })) ?? [],
+    },
+});
+
+const save = form.handleSubmit(async (values) => {
+    if (submitting.value) {
+        return;
+    }
+
+    submitting.value = true;
+    const id = toast.loading(m.jolly_noble_sloth_breathe());
+
+    const changedData = {
+        display_name:
+            values.name === account.value.display_name
+                ? undefined
+                : values.name,
+        username:
+            values.username === account.value.username
+                ? undefined
+                : values.username,
+        note:
+            values.bio === account.value.source?.note ? undefined : values.bio,
+        bot: values.bot === account.value.bot ? undefined : values.bot,
+        locked:
+            values.locked === account.value.locked ? undefined : values.locked,
+        discoverable:
+            values.discoverable === account.value.discoverable
+                ? undefined
+                : values.discoverable,
+        // Can't compare two arrays directly in JS, so we need to check if all fields are the same
+        fields_attributes: values.fields.every((field) =>
+            account.value.source?.fields?.some(
+                (f) => f.name === field.name && f.value === field.value,
+            ),
+        )
+            ? undefined
+            : values.fields,
+        header: values.banner ? values.banner : undefined,
+        avatar: values.avatar ? values.avatar : undefined,
+    };
+
+    if (
+        Object.values(changedData).filter((v) => v !== undefined).length === 0
+    ) {
+        toast.dismiss(id);
+        toast.error(m.tough_alive_niklas_promise());
+        return;
+    }
+
+    try {
+        const { data } = await client.value.updateCredentials(
+            Object.fromEntries(
+                Object.entries(changedData).filter(([, v]) => v !== undefined),
+            ),
+        );
+
+        toast.dismiss(id);
+        toast.success(m.spry_honest_kestrel_arrive());
+
+        if (identity.value) {
+            identity.value.account = data;
+        }
+
+        form.resetForm({
+            values: {
+                ...form.values,
+                ...values,
+            },
+        });
+    } catch (e) {
+        toast.dismiss(id);
+    }
+
+    submitting.value = false;
+});
+</script>

components/preferences/profile/editor.vue

@@ -1,419 +0,0 @@
-<template>
-    <Card v-if="identity" class="w-full max-h-full block overflow-y-auto">
-        <form class="p-4 grid gap-6" ref="formRef" @submit="handleSubmit">
-            <FormField v-slot="{ handleChange, handleBlur }" name="banner">
-                <FormItem>
-                    <FormLabel>
-                        {{ m.bright_late_osprey_renew() }}
-                    </FormLabel>
-                    <FormControl>
-                        <Input
-                            type="file"
-                            accept="image/*"
-                            @change="handleChange"
-                            @blur="handleBlur"
-                        />
-                    </FormControl>
-                    <FormDescription>
-                        {{ m.great_level_lamb_sway() }}
-                    </FormDescription>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ setValue }" name="avatar">
-                <FormItem class="grid gap-1">
-                    <FormLabel>
-                        {{ m.safe_icy_bulldog_quell() }}
-                    </FormLabel>
-                    <FormControl>
-                        <ImageUploader
-                            v-model:image="identity.account.avatar"
-                            @submit-file="(file) => setValue(file)"
-                            @submit-url="(url) => setValue(url)"
-                        />
-                    </FormControl>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ componentField }" name="name">
-                <FormItem>
-                    <FormLabel>
-                        {{ m.mild_known_mallard_jolt() }}
-                    </FormLabel>
-                    <FormControl>
-                        <Input v-bind="componentField" />
-                    </FormControl>
-                    <FormDescription>
-                        {{ m.lime_dry_skunk_loop() }}
-                    </FormDescription>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ componentField }" name="username">
-                <FormItem>
-                    <FormLabel>
-                        {{ m.neat_silly_dog_prosper() }}
-                    </FormLabel>
-                    <FormControl>
-                        <Input v-bind="componentField" />
-                    </FormControl>
-                    <FormDescription>
-                        {{ m.petty_plane_tadpole_earn() }}
-                    </FormDescription>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ componentField }" name="bio">
-                <FormItem>
-                    <FormLabel>
-                        {{ m.next_caring_ladybug_hack() }}
-                    </FormLabel>
-                    <FormControl>
-                        <Textarea rows="10" v-bind="componentField" />
-                    </FormControl>
-                    <FormDescription>
-                        {{ m.stale_just_anaconda_earn() }}
-                    </FormDescription>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ value, handleChange }" name="fields">
-                <FormItem>
-                    <FormLabel>
-                        {{ m.aqua_mealy_toucan_pride() }}
-                    </FormLabel>
-                    <FormControl>
-                        <div class="grid gap-4">
-                            <div
-                                v-for="(field, index) in value"
-                                :key="index"
-                                class="grid items-center grid-cols-[auto_repeat(3,minmax(0,1fr))] gap-2"
-                            >
-                                <Button
-                                    variant="destructive"
-                                    size="icon"
-                                    @click="
-                                        handleChange([
-                                            ...value.slice(0, index),
-                                            ...value.slice(index + 1),
-                                        ])
-                                    "
-                                >
-                                    <Trash />
-                                </Button>
-                                <Input
-                                    v-model="field.name"
-                                    placeholder="Name"
-                                    @update:model-value="
-                                        (e) => {
-                                            handleChange([
-                                                ...value.slice(0, index),
-                                                { name: e, value: field.value },
-                                                ...value.slice(index + 1),
-                                            ]);
-                                        }
-                                    "
-                                />
-                                <Input
-                                    v-model="field.value"
-                                    placeholder="Value"
-                                    class="col-span-2"
-                                    @update:model-value="
-                                        (e) => {
-                                            handleChange([
-                                                ...value.slice(0, index),
-                                                { name: field.name, value: e },
-                                                ...value.slice(index + 1),
-                                            ]);
-                                        }
-                                    "
-                                />
-                            </div>
-                            <Button
-                                type="button"
-                                variant="secondary"
-                                @click="
-                                    handleChange([
-                                        ...value,
-                                        { name: '', value: '' },
-                                    ])
-                                "
-                            >
-                                {{ m.front_north_eel_gulp() }}
-                            </Button>
-                        </div>
-                    </FormControl>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField
-                v-slot="{ componentField, value, handleChange }"
-                name="bot"
-                :as="Card"
-                class="block"
-            >
-                <FormItem
-                    class="grid grid-cols-[1fr_auto] items-center gap-2"
-                >
-                    <CardHeader class="space-y-0.5 p-0">
-                        <FormLabel :as="CardTitle">
-                            {{ m.gaudy_each_opossum_play() }}
-                        </FormLabel>
-                        <CardDescription>
-                            {{ m.grassy_acidic_gadfly_cure() }}
-                        </CardDescription>
-                    </CardHeader>
-                    <FormControl>
-                        <Switch
-                            :checked="value"
-                            @update:checked="handleChange"
-                            v-bind="componentField"
-                        />
-                    </FormControl>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField
-                v-slot="{ componentField, value, handleChange }"
-                name="locked"
-                :as="Card"
-                class="block"
-            >
-                <FormItem
-                    class="grid grid-cols-[1fr_auto] items-center gap-2"
-                >
-                    <CardHeader class="space-y-0.5 p-0">
-                        <FormLabel :as="CardTitle">
-                            {{ m.dirty_moving_shark_emerge() }}
-                        </FormLabel>
-                        <CardDescription>
-                            {{ m.bright_fun_mouse_boil() }}
-                        </CardDescription>
-                    </CardHeader>
-                    <FormControl>
-                        <Switch
-                            :checked="value"
-                            @update:checked="handleChange"
-                            v-bind="componentField"
-                        />
-                    </FormControl>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-
-            <FormField
-                v-slot="{ componentField, value, handleChange }"
-                name="discoverable"
-                :as="Card"
-                class="block"
-            >
-                <FormItem
-                    class="grid grid-cols-[1fr_auto] items-center gap-2"
-                >
-                    <CardHeader class="space-y-0.5 p-0">
-                        <FormLabel :as="CardTitle">
-                            {{ m.red_vivid_cuckoo_spark() }}
-                        </FormLabel>
-                        <CardDescription>
-                            {{ m.plain_zany_donkey_dart() }}
-                        </CardDescription>
-                    </CardHeader>
-                    <FormControl>
-                        <Switch
-                            :checked="value"
-                            @update:checked="handleChange"
-                            v-bind="componentField"
-                        />
-                    </FormControl>
-                    <FormMessage />
-                </FormItem>
-            </FormField>
-        </form>
-    </Card>
-</template>
-
-<script lang="ts" setup>
-import { toTypedSchema } from "@vee-validate/zod";
-import type { ResponseError } from "@versia/client";
-import { Trash } from "lucide-vue-next";
-import { useForm } from "vee-validate";
-import { toast } from "vue-sonner";
-import { z } from "zod";
-import { Button } from "~/components/ui/button";
-import {
-    Card,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
-import {
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from "~/components/ui/form";
-import { Input } from "~/components/ui/input";
-import { Switch } from "~/components/ui/switch";
-import { Textarea } from "~/components/ui/textarea";
-import * as m from "~/paraglide/messages.js";
-import ImageUploader from "./image-uploader.vue";
-
-if (!identity.value) {
-    throw new Error("Identity not found.");
-}
-
-const account = ref(identity.value.account);
-
-const formSchema = toTypedSchema(
-    z.object({
-        banner: z
-            .instanceof(File)
-            .refine(
-                (v) =>
-                    v.size <=
-                    (identity.value?.instance.configuration.accounts
-                        .header_size_limit ?? Number.POSITIVE_INFINITY),
-                m.civil_icy_ant_mend({
-                    size: identity.value?.instance.configuration.accounts
-                        .header_size_limit,
-                }),
-            )
-            .optional(),
-        avatar: z
-            .instanceof(File)
-            .refine(
-                (v) =>
-                    v.size <=
-                    (identity.value?.instance.configuration.accounts
-                        .avatar_size_limit ?? Number.POSITIVE_INFINITY),
-                m.zippy_caring_raven_edit({
-                    size: identity.value?.instance.configuration.accounts
-                        .avatar_size_limit,
-                }),
-            )
-            .or(z.string().url())
-            .optional(),
-        name: z
-            .string()
-            .max(
-                identity.value.instance.configuration.accounts
-                    .max_displayname_characters,
-            ),
-        username: z
-            .string()
-            .regex(/^[a-z0-9_-]+$/, m.still_upper_otter_dine())
-            .max(
-                identity.value.instance.configuration.accounts
-                    .max_username_characters,
-            ),
-        bio: z
-            .string()
-            .max(
-                identity.value.instance.configuration.accounts
-                    .max_note_characters,
-            ),
-        bot: z.boolean(),
-        locked: z.boolean(),
-        discoverable: z.boolean(),
-        fields: z.array(z.object({ name: z.string(), value: z.string() })),
-    }),
-);
-
-const form = useForm({
-    validationSchema: formSchema,
-    initialValues: {
-        bio: account.value.source?.note ?? "",
-        bot: account.value.bot ?? false,
-        locked: account.value.locked ?? false,
-        discoverable: account.value.discoverable ?? true,
-        username: account.value.username,
-        name: account.value.display_name,
-        fields: account.value.source?.fields ?? [],
-    },
-});
-
-const handleSubmit = form.handleSubmit(async (values) => {
-    const id = toast.loading(m.jolly_noble_sloth_breathe());
-
-    const changedData = {
-        display_name:
-            values.name === account.value.display_name
-                ? undefined
-                : values.name,
-        username:
-            values.username === account.value.username
-                ? undefined
-                : values.username,
-        note:
-            values.bio === account.value.source?.note ? undefined : values.bio,
-        bot: values.bot === account.value.bot ? undefined : values.bot,
-        locked:
-            values.locked === account.value.locked ? undefined : values.locked,
-        discoverable:
-            values.discoverable === account.value.discoverable
-                ? undefined
-                : values.discoverable,
-        // Can't compare two arrays directly in JS, so we need to check if all fields are the same
-        fields_attributes: values.fields.every((field) =>
-            account.value.source?.fields?.some(
-                (f) => f.name === field.name && f.value === field.value,
-            ),
-        )
-            ? undefined
-            : values.fields,
-        header: values.banner ? values.banner : undefined,
-        avatar: values.avatar ? values.avatar : undefined,
-    };
-
-    if (
-        Object.values(changedData).filter((v) => v !== undefined).length === 0
-    ) {
-        toast.dismiss(id);
-        toast.error(m.tough_alive_niklas_promise());
-        return;
-    }
-
-    try {
-        const { data } = await client.value.updateCredentials(
-            Object.fromEntries(
-                Object.entries(changedData).filter(([, v]) => v !== undefined),
-            ),
-        );
-
-        toast.dismiss(id);
-        toast.success(m.spry_honest_kestrel_arrive());
-
-        if (identity.value) {
-            identity.value.account = data;
-        }
-
-        account.value = data;
-        form.resetForm({
-            values: {
-                ...form.values,
-                ...values,
-            },
-        });
-    } catch (e) {
-        const error = e as ResponseError<{ error: string }>;
-
-        toast.dismiss(id);
-    }
-});
-
-const formRef = ref<HTMLFormElement | null>(null);
-
-defineExpose({
-    submitForm: () => handleSubmit(),
-    dirty: computed(() => form.meta.value.dirty),
-});
-</script>

components/preferences/profile/fields.vue

@@ -0,0 +1,104 @@
+<template>
+    <FormItem>
+        <FormLabel>
+            {{ title }}
+            <Button type="button" variant="secondary" size="icon" class="ml-auto" @click="addField()" :title="m.front_north_eel_gulp()">
+                <Plus />
+            </Button>
+        </FormLabel>
+
+        <FormControl>
+            <VueDraggable class="grid gap-4" v-model="list" :animation="200" handle=".drag-handle">
+                <div v-for="(field, index) in list" :key="field.id"
+                    class="grid items-center grid-cols-[auto_repeat(3,minmax(0,1fr))_auto] gap-2">
+                    <Button as="span" variant="ghost" size="icon" class="drag-handle cursor-grab">
+                        <GripVertical />
+                    </Button>
+                    <Input :model-value="field.name" placeholder="Name" @update:model-value="
+                        (e) =>  updateKey(index, String(e))
+                    " />
+                    <Input :model-value="field.value" placeholder="Value" class="col-span-2" @update:model-value="
+                        (e) => updateValue(index, String(e))
+                    " />
+                    <Button type="button" variant="secondary" size="icon" @click="removeField(index)">
+                        <Trash />
+                    </Button>
+                </div>
+            </VueDraggable>
+            <FormMessage />
+        </FormControl>
+    </FormItem>
+</template>
+
+<script lang="ts" setup>
+import { GripVertical, Plus, Trash } from "lucide-vue-next";
+import { VueDraggable } from "vue-draggable-plus";
+import { Button } from "~/components/ui/button";
+import {
+    FormControl,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import * as m from "~/paraglide/messages.js";
+
+const { title } = defineProps<{
+    title: string;
+}>();
+
+const value = defineModel<{ name: string; value: string }[]>("value", {
+    default: [],
+});
+
+const list = ref<
+    {
+        id: string;
+        name: string;
+        value: string;
+    }[]
+>(
+    value.value.map((item, index) => ({
+        id: String(index),
+        name: item.name,
+        value: item.value,
+    })),
+);
+
+watch(
+    list,
+    (newList) => {
+        value.value = newList.map((item) => ({
+            name: item.name,
+            value: item.value,
+        }));
+    },
+    {
+        deep: true,
+    },
+);
+
+const updateKey = (index: number, key: string) => {
+    if (!list.value[index]) {
+        return;
+    }
+
+    list.value[index].name = key;
+};
+
+const updateValue = (index: number, val: string) => {
+    if (!list.value[index]) {
+        return;
+    }
+
+    list.value[index].value = val;
+};
+
+const removeField = (index: number) => {
+    list.value.splice(index, 1);
+};
+
+const addField = () => {
+    list.value.push({ name: "", value: "", id: String(list.value.length) });
+};
+</script>

components/preferences/profile/image-uploader.vue

@@ -21,10 +21,10 @@
             <DialogDescription class="sr-only">
                 {{ m.suave_broad_albatross_drop() }}
             </DialogDescription>
-            <form class="p-4 grid gap-6" @submit="submit">
+            <form class="grid gap-6" @submit="submit">
                 <Tabs
                     default-value="upload"
-                    class="mt-2 data-[component=tabpanel]:*:mt-6"
+                    class="mt-2 *:data-[slot=tabs-content]:mt-2"
                 >
                     <TabsList class="w-full *:w-full">
                         <TabsTrigger value="upload">
@@ -222,7 +222,7 @@ const emailToGravatar = async (email: string) => {
 const open = ref(false);
 const gravatarUrl = ref<string | undefined>(undefined);
 
-const { handleSubmit, isSubmitting, values } = useForm({
+const { handleSubmit, isSubmitting } = useForm({
     validationSchema: schema,
 });
 

components/preferences/select.vue

@@ -1,46 +0,0 @@
-<template>
-    <Card class="grid grid-cols-[1fr_auto] items-center px-6 py-4 gap-2">
-        <CardHeader class="space-y-0.5 p-0">
-            <CardTitle class="text-base">
-                {{ setting.title() }}
-            </CardTitle>
-            <CardDescription>
-                {{ setting.description() }}
-            </CardDescription>
-        </CardHeader>
-        <CardFooter class="p-0">
-            <Select :model-value="setting.value" @update:model-value="v => { setting.value = v }">
-                <SelectTrigger>
-                    <SelectValue placeholder="Select an option" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectItem v-for="option of setting.options" :value="option.value">
-                        {{ option.label() }}
-                    </SelectItem>
-                </SelectContent>
-            </Select>
-        </CardFooter>
-    </Card>
-</template>
-
-<script lang="ts" setup>
-import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
-import type { EnumSetting } from "~/settings.ts";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "../ui/select";
-
-defineModel<EnumSetting>("setting", {
-    required: true,
-});
-</script>

components/preferences/stats.vue

@@ -0,0 +1,37 @@
+<template>
+    <Card class="grid gap-3 text-sm max-w-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 pkg from "~/package.json";
+import { Card } from "../ui/card";
+
+const data: [string, string | VNode][] = [
+    ["Version", pkg.version],
+    ["Licence", pkg.license],
+    ["Author", pkg.author.name],
+    [
+        "Repository",
+        <a
+            href={pkg.repository.url.replace("git+", "")}
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            {pkg.repository.url.replace("git+", "").replace("https://", "")}
+        </a>,
+    ],
+];
+</script>

components/preferences/string.vue

@@ -1,31 +0,0 @@
-<template>
-    <Card class="grid grid-rows-[1fr_auto] xl:grid-rows-none xl:grid-cols-[1fr_auto] items-center px-6 py-4 gap-4">
-        <CardHeader class="space-y-0.5 p-0">
-            <CardTitle class="text-base">
-                {{ setting.title() }}
-            </CardTitle>
-            <CardDescription>
-                {{ setting.description() }}
-            </CardDescription>
-        </CardHeader>
-        <CardFooter class="p-0">
-            <Input :model-value="setting.value" @update:model-value="v => { setting.value = String(v) }" />
-        </CardFooter>
-    </Card>
-</template>
-
-<script lang="ts" setup>
-import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import type { StringSetting } from "~/settings.ts";
-
-defineModel<StringSetting>("setting", {
-    required: true,
-});
-</script>

components/preferences/switch.vue

@@ -1,31 +0,0 @@
-<template>
-    <Card class="grid grid-cols-[1fr_auto] items-center px-6 py-4 gap-2">
-        <CardHeader class="space-y-0.5 p-0">
-            <CardTitle class="text-base">
-                {{ setting.title() }}
-            </CardTitle>
-            <CardDescription>
-                {{ setting.description() }}
-            </CardDescription>
-        </CardHeader>
-        <CardFooter class="p-0">
-            <Switch :disabled="setting.notImplemented" :checked="setting.value" @update:checked="v => { setting.value = v }" />
-        </CardFooter>
-    </Card>
-</template>
-
-<script lang="ts" setup>
-import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
-import { Switch } from "~/components/ui/switch";
-import type { BooleanSetting } from "~/settings.ts";
-
-defineModel<BooleanSetting>("setting", {
-    required: true,
-});
-</script>

components/preferences/types.ts

@@ -0,0 +1,71 @@
+export interface PreferenceOptions<ValueType> {
+    name: string;
+    description?: string;
+    category?: string;
+    defaultValue: ValueType;
+}
+
+export abstract class Preference<ValueType> {
+    public abstract options: PreferenceOptions<ValueType>;
+}
+
+export class TextPreference extends Preference<string> {
+    constructor(public options: PreferenceOptions<string>) {
+        super();
+    }
+}
+
+export class NumberPreference extends Preference<number> {
+    constructor(
+        public options: PreferenceOptions<number> & {
+            integer?: boolean;
+            step?: number;
+            min?: number;
+            max?: number;
+        },
+    ) {
+        super();
+    }
+}
+
+export class BooleanPreference extends Preference<boolean> {
+    constructor(public options: PreferenceOptions<boolean>) {
+        super();
+    }
+}
+
+export class SelectPreference<T extends string> extends Preference<T> {
+    constructor(
+        public options: PreferenceOptions<T> & {
+            options: Record<T, string>;
+        },
+    ) {
+        super();
+    }
+}
+
+export class CodePreference extends Preference<string> {
+    constructor(
+        public options: PreferenceOptions<string> & {
+            language?: "css";
+        },
+    ) {
+        super();
+    }
+}
+
+export class MultiSelectPreference<T extends string> extends Preference<T[]> {
+    constructor(
+        public options: PreferenceOptions<T[]> & {
+            options: Record<T, string>;
+        },
+    ) {
+        super();
+    }
+}
+
+export class UrlPreference extends Preference<string> {
+    constructor(public options: PreferenceOptions<string>) {
+        super();
+    }
+}

components/preferences/types/base.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="grid grid-cols-[minmax(0,1fr)_auto] gap-2 hover:bg-muted/40 duration-75 p-4">
+        <div class="flex flex-col gap-1">
+            <h3 class="text-sm font-semibold tracking-tight">{{ pref.options.name }}</h3>
+            <small v-if="pref.options.description" class="text-xs font-medium leading-none text-muted-foreground">{{
+                pref.options.description }}</small>
+        </div>
+        <div class="flex items-center justify-end">
+            <slot :value="value" :set-value="setValue" />
+        </div>
+        <slot name="extra" :value="value" :set-value="setValue" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { preferences as prefs } from "../preferences";
+import type { Preference } from "../types";
+
+const { pref, name } = defineProps<{
+    pref: Preference<any>;
+    name: keyof typeof prefs;
+}>();
+
+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;
+        setValue: (value: MaybeRef<any>) => void;
+    }): any;
+    extra(props: {
+        value: any;
+        setValue: (value: MaybeRef<any>) => void;
+    }): any;
+}>();
+</script>

components/preferences/types/boolean.vue

@@ -0,0 +1,17 @@
+<template>
+    <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, name } = defineProps<{
+    pref: BooleanPreference;
+    name: keyof typeof prefs;
+}>();
+</script>

components/preferences/types/code.vue

@@ -0,0 +1,36 @@
+<template>
+    <Collapsible as-child>
+        <Base :name="name" :pref="pref">
+        <template #default>
+            <CollapsibleTrigger as-child>
+                <Button variant="outline">
+                    Open code
+                </Button>
+            </CollapsibleTrigger>
+        </template>
+        <template #extra="{ setValue, value }">
+            <CollapsibleContent class="col-span-2 mt-2">
+                <Textarea :rows="10" :model-value="value" @update:model-value="setValue" />
+            </CollapsibleContent>
+        </template>
+        </Base>
+    </Collapsible>
+</template>
+
+<script lang="ts" setup>
+import { Button } from "~/components/ui/button";
+import {
+    Collapsible,
+    CollapsibleContent,
+    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, name } = defineProps<{
+    pref: CodePreference;
+    name: keyof typeof prefs;
+}>();
+</script>

components/preferences/types/multiselect.vue

@@ -0,0 +1,41 @@
+<template>
+    <Base :pref="pref" :name="name" v-slot="{ setValue, value }">
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <Button variant="outline">
+                Pick
+            </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-56">
+            <DropdownMenuCheckboxItem v-for="[option, title] in Object.entries(pref.options.options)" :key="option"
+                :model-value="value.includes(option)" @update:model-value="checked => {
+                    if (checked) {
+                        setValue([...value, option]);
+                    } else {
+                        setValue(value.filter((v: any) => v !== option));
+                    }
+                }">
+                {{ title }}
+            </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+    </Base>
+</template>
+
+<script lang="ts" setup>
+import { Button } from "~/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    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, name } = defineProps<{
+    pref: MultiSelectPreference<string>;
+    name: keyof typeof prefs;
+}>();
+</script>

components/preferences/types/number.vue

@@ -0,0 +1,29 @@
+<template>
+    <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 />
+                <NumberFieldInput />
+                <NumberFieldIncrement />
+            </NumberFieldContent>
+        </NumberField>
+    </Base>
+</template>
+
+<script lang="ts" setup>
+import {
+    NumberField,
+    NumberFieldContent,
+    NumberFieldDecrement,
+    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, name } = defineProps<{
+    pref: NumberPreference;
+    name: keyof typeof prefs;
+}>();
+</script>

components/preferences/types/select.vue

@@ -0,0 +1,35 @@
+<template>
+    <Base :pref="pref" :name="name" v-slot="{ setValue, value }">
+        <Select :model-value="value" @update:model-value="setValue">
+            <SelectTrigger>
+                <SelectValue placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectGroup>
+                    <SelectItem v-for="[val, title] in Object.entries(pref.options.options)" :value="val">
+                        {{ title }}
+                    </SelectItem>
+                </SelectGroup>
+            </SelectContent>
+        </Select>
+    </Base>
+</template>
+
+<script lang="ts" setup>
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    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, name } = defineProps<{
+    pref: SelectPreference<string>;
+    name: keyof typeof prefs;
+}>();
+</script>

components/preferences/types/text.vue

@@ -0,0 +1,17 @@
+<template>
+    <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, name } = defineProps<{
+    pref: TextPreference;
+    name: keyof typeof prefs;
+}>();
+</script>

components/preferences/types/url.vue

@@ -0,0 +1,36 @@
+<template>
+    <Collapsible as-child>
+        <Base :pref="pref" :name="name">
+        <template #default>
+            <CollapsibleTrigger as-child>
+                <Button variant="outline">
+                    Edit URL
+                </Button>
+            </CollapsibleTrigger>
+        </template>
+        <template #extra="{ setValue, value }">
+            <CollapsibleContent class="col-span-2 mt-2">
+                <UrlInput placeholder="Type URL or domain here..." :model-value="value" @update:model-value="setValue" />
+            </CollapsibleContent>
+        </template>
+        </Base>
+    </Collapsible>
+</template>
+
+<script lang="ts" setup>
+import { Button } from "~/components/ui/button";
+import {
+    Collapsible,
+    CollapsibleContent,
+    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, name } = defineProps<{
+    pref: TextPreference;
+    name: keyof typeof prefs;
+}>();
+</script>