frontend/app/components/preferences/emojis/dropdown.vue

<template>
    <DropdownMenu>
        <DropdownMenuTrigger as-child>
            <Button variant="ghost" size="icon" title="Open menu" class="size-8 p-0">
                <MoreHorizontal class="size-4" />
            </Button>
        </DropdownMenuTrigger>
         <DropdownMenuContent class="min-w-48">
            <DropdownMenuItem @click="editName">
                <TextCursorInput />
                {{ m.cuddly_such_swallow_hush() }}
            </DropdownMenuItem>
            <!-- <DropdownMenuItem @click="editCaption">
                <Captions />
                <span>Add caption</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator /> -->
            <DropdownMenuItem @click="_delete">
                <Delete />
                {{ m.tense_quick_cod_favor() }}
            </DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</template>

<script lang="ts" setup>
import { type CustomEmoji, RolePermission } from "@versia/client/schemas";
import { Delete, MoreHorizontal, TextCursorInput } from "lucide-vue-next";
import { toast } from "vue-sonner";
import type { z } from "zod";
import { confirmModalService } from "~/components/modals/composable";
import { Button } from "~/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import * as m from "~~/paraglide/messages.js";

const { emoji } = defineProps<{
    emoji: z.infer<typeof CustomEmoji>;
}>();

const permissions = usePermissions();
const canEdit =
    (!emoji.global &&
        permissions.value.includes(RolePermission.ManageOwnEmojis)) ||
    permissions.value.includes(RolePermission.ManageEmojis);

const editName = async () => {
    if (!identity.value) {
        return;
    }

    const result = await confirmModalService.confirm({
        title: m.slimy_awful_florian_sail(),
        defaultValue: emoji.shortcode,
        confirmText: m.teary_antsy_panda_aid(),
        inputType: "text",
    });

    if (result.confirmed) {
        const id = toast.loading(m.teary_tame_gull_bless());
        try {
            const { data } = await client.value.updateEmoji(emoji.id, {
                shortcode: result.value,
            });

            toast.dismiss(id);
            toast.success(m.gaudy_lime_bison_adore());

            identity.value.emojis = identity.value.emojis.map((e) =>
                e.id === emoji.id ? data : e,
            );
        } catch {
            toast.dismiss(id);
        }
    }
};

const _delete = async () => {
    if (!identity.value) {
        return;
    }

    const { confirmed } = await confirmModalService.confirm({
        title: m.tense_quick_cod_favor(),
        message: m.honest_factual_carp_aspire(),
        confirmText: m.tense_quick_cod_favor(),
    });

    if (confirmed) {
        const id = toast.loading(m.weary_away_liger_zip());
        try {
            await client.value.deleteEmoji(emoji.id);
            toast.dismiss(id);
            toast.success(m.crisp_whole_canary_tear());

            identity.value.emojis = identity.value.emojis.filter(
                (e) => e.id !== emoji.id,
            );
        } catch {
            toast.dismiss(id);
        }
    }
};
</script>