refactor: ♻️ Finish rewrite and delete old settings backend

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,