refactor: ♻️ Refine emoji uploader and table UI

components/form/switch.vue

@@ -0,0 +1,28 @@
+<template>
+    <Card class="p-4">
+        <FormItem class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+            <CardHeader class="flex flex-col gap-1.5 p-0">
+                <FormLabel class="font-semibold tracking-tight" :as="CardTitle">
+                    {{ title }}
+                </FormLabel>
+                <CardDescription class="text-xs leading-none" v-if="description">
+                    {{ description }}
+                </CardDescription>
+            </CardHeader>
+            <FormControl>
+                <slot />
+            </FormControl>
+            <FormMessage />
+        </FormItem>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import { FormControl, FormItem, FormLabel, FormMessage } from "../ui/form";
+
+const { title, description } = defineProps<{
+    title: string;
+    description?: string;
+}>();
+</script>

components/preferences2/emojis/table.vue

@@ -35,6 +35,8 @@ import {
 } from "@tanstack/vue-table";
 import type { Emoji } from "@versia/client/types";
 import {
+    ArrowDownAZ,
+    ArrowUpAz,
     ArrowUpDown,
     ChevronDown,
     Ellipsis,
@@ -112,7 +114,13 @@ const columns: ColumnDef<Emoji>[] = [
                     }
                 >
                     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>
             );
         },
@@ -133,7 +141,13 @@ const columns: ColumnDef<Emoji>[] = [
                     }
                 >
                     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>
             );
         },

components/preferences2/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
+                    <FormSwitch :title="m.pink_sharp_carp_work()" :description="m.dark_pretty_hyena_link()">
-                        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"
+                            :model-value="value"
-                                @update:checked="handleChange"
+                            @update:model-value="handleChange"
-                                v-bind="componentField"
                             :disabled="isSubmitting"
                         />
-                        </FormControl>
+                    </FormSwitch>
-                        <FormMessage />
-                    </FormItem>
                 </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,