From 6934a5758e15dbb2346a9b7c0c3dc075cf548928 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Wed, 4 Dec 2024 15:04:08 +0100
Subject: [PATCH] feat: :sparkles: Add emoji preferences

---
 components/preferences/emojis/category.vue    | 34 ++++++++++
 components/preferences/emojis/emoji.vue       | 25 +++++++
 components/settings/emojis/category.vue       | 46 -------------
 components/settings/emojis/emojis.vue         | 52 ---------------
 components/settings/emojis/grid-item-menu.vue | 33 ----------
 components/settings/emojis/grid-item.vue      | 17 -----
 composables/CacheRefresh.ts                   |  6 +-
 pages/preferences/emojis.vue                  | 65 +++++++++++++++++++
 8 files changed, 125 insertions(+), 153 deletions(-)
 create mode 100644 components/preferences/emojis/category.vue
 create mode 100644 components/preferences/emojis/emoji.vue
 delete mode 100644 components/settings/emojis/category.vue
 delete mode 100644 components/settings/emojis/emojis.vue
 delete mode 100644 components/settings/emojis/grid-item-menu.vue
 delete mode 100644 components/settings/emojis/grid-item.vue
 create mode 100644 pages/preferences/emojis.vue

diff --git a/components/preferences/emojis/category.vue b/components/preferences/emojis/category.vue
new file mode 100644
index 0000000..3e42273
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/preferences/emojis/emoji.vue b/components/preferences/emojis/emoji.vue
new file mode 100644
index 0000000..ca25bfd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/settings/emojis/category.vue b/components/settings/emojis/category.vue
deleted file mode 100644
index aacc9bd..0000000
--- a/components/settings/emojis/category.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <div class="flex flex-col gap-4">
-        <div class="grid grid-cols-[1fr,auto,auto] gap-4 items-baseline">
-            <h2 class="text-xl font-bold">{{ name }}</h2>
-            <!-- <Button theme="primary">
-                <Icon icon="tabler:upload" />
-                <span class="hidden md:block">New</span>
-            </Button> -->
-            <Button theme="outline">
-                <Icon icon="tabler:chevron-up" class="duration-100" :style="{
-                    transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',
-                }" @click="collapsed = !collapsed" />
-            </Button>
-        </div>
-        <div ref="container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 overflow-hidden duration-200">
-            <GridItem v-for="emoji in emojis" :key="emoji.id" :emoji="emoji" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
-import Button from "~/packages/ui/components/buttons/button.vue";
-import Icon from "~/packages/ui/components/icons/icon.vue";
-import GridItem from "./grid-item.vue";
-
-defineProps<{
-    emojis: Emoji[];
-    name: string;
-}>();
-
-const collapsed = ref(false);
-const container = ref<HTMLDivElement | null>(null);
-
-watch(collapsed, (value) => {
-    // Use requestAnimationFrame to prevent layout thrashing
-    requestAnimationFrame(() => {
-        if (!container.value) {
-            return;
-        }
-        container.value.style.maxHeight = value
-            ? "0px"
-            : `${container.value.scrollHeight}px`;
-    });
-});
-</script>
\ No newline at end of file
diff --git a/components/settings/emojis/emojis.vue b/components/settings/emojis/emojis.vue
deleted file mode 100644
index b692116..0000000
--- a/components/settings/emojis/emojis.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-    <div class="max-w-7xl mx-auto py-12 px-4">
-        <div class="md:max-w-sm w-full relative mb-4">
-            <TextInput v-model="search" placeholder="Search" class="pl-8" />
-            <iconify-icon icon="tabler:search"
-                class="absolute size-4 top-1/2 left-2.5 transform -translate-y-1/2 text-gray-200" aria-hidden="true"
-                width="unset" />
-        </div>
-        <Category v-if="emojis.length > 0" v-for="([name, emojis]) in categories" :key="name" :emojis="emojis"
-            :name="name" />
-        <div v-else class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
-            <span class="text-lg font-semibold">No emojis found.</span>
-            <span class="text-sm">
-                You can ask your administrator to add some emojis.
-            </span>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
-import TextInput from "~/components/inputs/text-input.vue";
-import Category from "./category.vue";
-
-const emojis = computed(() =>
-    ((identity.value?.emojis as Emoji[] | undefined) ?? []).filter((emoji) =>
-        emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
-    ),
-);
-const search = ref("");
-
-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>
\ No newline at end of file
diff --git a/components/settings/emojis/grid-item-menu.vue b/components/settings/emojis/grid-item-menu.vue
deleted file mode 100644
index f1a9859..0000000
--- a/components/settings/emojis/grid-item-menu.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <AdaptiveDropdown>
-        <template #button>
-            <Button theme="outline">
-                <iconify-icon width="none" icon="tabler:dots" class="size-5 text-gray-200"
-                    aria-hidden="true" />
-                <span class="sr-only">Open menu</span>
-            </Button>
-        </template>
-
-        <template #items>
-            <Menu.ItemGroup>
-                <Menu.Item value="">
-                    <ButtonDropdown icon="tabler:trash" class="w-full">
-                        Delete
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-        </template>
-    </AdaptiveDropdown>
-</template>
-
-<script lang="ts" setup>
-import { Menu } from "@ark-ui/vue";
-import type { Emoji } from "@versia/client/types";
-import ButtonDropdown from "~/components/buttons/button-dropdown.vue";
-import AdaptiveDropdown from "~/components/dropdowns/AdaptiveDropdown.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-
-defineProps<{
-    emoji: Emoji;
-}>();
-</script>
\ No newline at end of file
diff --git a/components/settings/emojis/grid-item.vue b/components/settings/emojis/grid-item.vue
deleted file mode 100644
index 73267dd..0000000
--- a/components/settings/emojis/grid-item.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-    <div class="rounded ring-1 m-1 ring-white/10 grid grid-cols-[auto,1fr] gap-x-4 p-3 bg-dark-400 hover:ring-2 hover:ring-primary-600 duration-100 items-center">
-        <Avatar :src="emoji.url" class="size-12 rounded bg-transparent" />
-        <div class="text-ellipsis font-mono text-wrap w-full overflow-hidden">{{ emoji.shortcode }}</div>
-        <!-- <GridItemMenu :emoji="emoji" /> -->
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import GridItemMenu from "./grid-item-menu.vue";
-
-defineProps<{
-    emoji: Emoji;
-}>();
-</script>
\ No newline at end of file
diff --git a/composables/CacheRefresh.ts b/composables/CacheRefresh.ts
index 94d0188..f439596 100644
--- a/composables/CacheRefresh.ts
+++ b/composables/CacheRefresh.ts
@@ -2,10 +2,6 @@ import type { Client } from "@versia/client";
 import type { RolePermission } from "@versia/client/types";
 
 export const useCacheRefresh = (client: MaybeRef<Client | null>) => {
-    if (import.meta.server) {
-        return;
-    }
-
     // Refresh custom emojis and instance data and me on every reload
     watch(
         [identity, client],
@@ -67,6 +63,6 @@ export const useCacheRefresh = (client: MaybeRef<Client | null>) => {
                     }
                 });
         },
-        { flush: "sync" },
+        { flush: "sync", immediate: true },
     );
 };
diff --git a/pages/preferences/emojis.vue b/pages/preferences/emojis.vue
new file mode 100644
index 0000000..532ef8f
--- /dev/null
+++ b/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>
\ No newline at end of file