feat: ✨ Allow renaming and removing emojis

components/notes/header.vue

@@ -4,7 +4,7 @@
             if (!enableHoverCard.value) {
                 popupOpen = false;
             }
-        }">
+        }" :open-delay="2000">
             <HoverCardTrigger :as-child="true">
                 <NuxtLink :href="urlAsPath" :class="cn('relative size-14', smallLayout && 'size-8')">
                     <Avatar :class="cn('size-14 border border-card', smallLayout && 'size-8')" :src="author.avatar"

components/preferences/emojis/category.vue

@@ -10,7 +10,7 @@
                 </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">
+        <CollapsibleContent class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-3 mt-4">
             <Emoji v-for="emoji in emojis" :key="emoji.id" :emoji="emoji" />
         </CollapsibleContent>
     </Collapsible>

components/preferences/emojis/emoji.vue

@@ -1,25 +1,109 @@
 <template>
-    <Card class="grid grid-cols-[auto,1fr] gap-4 items-center p-4">
+    <DropdownMenu>
-        <Avatar shape="square">
+        <Card
-            <AvatarImage :src="emoji.url" />
+            :class="cn('grid hover:cursor-pointer gap-4 items-center p-4', canEdit ? 'grid-cols-[auto,1fr,auto]' : 'grid-cols-[auto,1fr]')">
-        </Avatar>
+            <Avatar shape="square">
-        <CardHeader class="p-0 gap-0 overflow-hidden">
+                <AvatarImage :src="emoji.url" />
-            <CardTitle as="span" class="text-sm font-mono truncate">
+            </Avatar>
-                {{ emoji.shortcode }}
+            <CardHeader class="p-0 gap-0 overflow-hidden">
-            </CardTitle>
+                <CardTitle as="span" class="text-sm font-mono truncate">
-            <CardDescription>
+                    {{ emoji.shortcode }}
-                {{ emoji.global ? "Global" : "Uploaded by you" }}
+                </CardTitle>
-            </CardDescription>
+                <CardDescription>
-        </CardHeader>
+                    {{ emoji.global ? "Global" : "Uploaded by you" }}
-    </Card>
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="p-0" v-if="canEdit">
+                <DropdownMenuTrigger :as-child="true">
+                    <Button variant="ghost" size="icon">
+                        <Ellipsis />
+                    </Button>
+                </DropdownMenuTrigger>
+            </CardFooter>
+        </Card>
+        <DropdownMenuContent class="min-w-48">
+            <DropdownMenuLabel class="font-mono">{{ emoji.shortcode }}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem @click="editName">
+                <TextCursorInput class="mr-2 h-4 w-4" />
+                <span>Rename</span>
+            </DropdownMenuItem>
+            <!-- <DropdownMenuItem @click="editCaption">
+                <Captions class="mr-2 h-4 w-4" />
+                <span>Add caption</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator /> -->
+            <DropdownMenuItem @click="_delete">
+                <Delete class="mr-2 h-4 w-4" />
+                <span>Delete</span>
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
 </template>
 
 <script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
+import { cn } from "@/lib/utils";
+import { type Emoji, RolePermission } from "@versia/client/types";
+import { Delete, Ellipsis, TextCursorInput } from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import { confirmModalService } from "~/components/modals/composable";
 import { Avatar } from "~/components/ui/avatar";
-import { Card, CardDescription, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardTitle,
+} from "~/components/ui/card";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 
-defineProps<{
+const { emoji } = defineProps<{
     emoji: Emoji;
 }>();
+
+const permissions = usePermissions();
+const canEdit =
+    !emoji.global || permissions.value.includes(RolePermission.ManageEmojis);
+
+const editName = async () => {
+    const result = await confirmModalService.confirm({
+        title: "Enter a new shortcode",
+        defaultValue: emoji.shortcode,
+        confirmText: "Edit",
+        inputType: "text",
+    });
+
+    if (result.confirmed) {
+        const id = toast.loading("Updating shortcode...");
+        try {
+            await client.value.updateEmoji(emoji.id, {
+                shortcode: result.value,
+            });
+
+            toast.dismiss(id);
+            toast.success("Shortcode updated.");
+        } catch {
+            toast.dismiss(id);
+        }
+    }
+};
+
+const _delete = async () => {
+    const id = toast.loading("Deleting emoji...");
+    try {
+        await client.value.deleteEmoji(emoji.id);
+        toast.dismiss(id);
+        toast.success("Emoji deleted.");
+    } catch {
+        toast.dismiss(id);
+    }
+};
 </script>