feat: ✨ Add emoji preferences

components/preferences/emojis/category.vue

@@ -0,0 +1,34 @@
+<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 xl:grid-cols-3 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/emoji.vue

@@ -0,0 +1,25 @@
+<template>
+    <Card class="grid grid-cols-[auto,1fr] gap-4 items-center p-4">
+        <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 ? "Global" : "Uploaded by you" }}
+            </CardDescription>
+        </CardHeader>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import type { Emoji } from "@versia/client/types";
+import { Avatar } from "~/components/ui/avatar";
+import { Card, CardDescription, CardTitle } from "~/components/ui/card";
+
+defineProps<{
+    emoji: Emoji;
+}>();
+</script>