feat: ✨ Add emoji preferences

pages/preferences/emojis.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full space-y-6">
+        <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
+            Emojis
+        </h1>
+        <div v-if="emojis.length > 0" class="max-w-sm w-full relative">
+            <Input v-model="search" placeholder="Search" class="pl-8" />
+            <Search class="absolute size-4 top-1/2 left-2.5 transform -translate-y-1/2" />
+        </div>
+        <Category v-if="emojis.length > 0" v-for="([name, emojis]) in categories" :key="name" :emojis="emojis"
+            :name="name" />
+        <Card v-else class="shadow-none bg-transparent border-none p-4">
+            <CardHeader class="text-center gap-y-4">
+                <CardTitle class="text-">No emojis found.</CardTitle>
+                <CardDescription>
+                    Ask your administrator to add some emojis.
+                </CardDescription>
+            </CardHeader>
+        </Card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Emoji } from "@versia/client/types";
+import { Search } from "lucide-vue-next";
+import Category from "~/components/preferences/emojis/category.vue";
+import { Input } from "~/components/ui/input";
+
+definePageMeta({
+    layout: "app",
+});
+
+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("Uncategorized")) {
+                categories.set("Uncategorized", []);
+            }
+
+            categories.get("Uncategorized")?.push(emoji);
+            continue;
+        }
+
+        if (!categories.has(emoji.category)) {
+            categories.set(emoji.category, []);
+        }
+
+        categories.get(emoji.category)?.push(emoji);
+    }
+    return categories;
+});
+</script>