From 412e49dfe2dd74b143aa6f19d832d6dba3ff588e Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Wed, 30 Apr 2025 16:44:31 +0200
Subject: [PATCH] refactor: :recycle: Refine emoji uploader and table UI

---
 components/form/switch.vue                  | 28 +++++++++++++++++
 components/preferences2/emojis/table.vue    | 18 +++++++++--
 components/preferences2/emojis/uploader.vue | 35 +++++++--------------
 3 files changed, 55 insertions(+), 26 deletions(-)
 create mode 100644 components/form/switch.vue

diff --git a/components/form/switch.vue b/components/form/switch.vue
new file mode 100644
index 0000000..019307c
--- /dev/null
+++ b/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>
diff --git a/components/preferences2/emojis/table.vue b/components/preferences2/emojis/table.vue
index 132f204..0d1ff83 100644
--- a/components/preferences2/emojis/table.vue
+++ b/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
-                    <ArrowUpDown class="ml-2 size-4" />
+                    {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
-                    <ArrowUpDown class="ml-2 size-4" />
+                    {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>
             );
         },
diff --git a/components/preferences2/emojis/uploader.vue b/components/preferences2/emojis/uploader.vue
index f2eb68d..18404ad 100644
--- a/components/preferences2/emojis/uploader.vue
+++ b/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
-                        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,