frontend/pages/preferences/emojis.vue

<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">
            {{ m.suave_smart_mantis_climb() }}
        </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>{{ m.actual_steep_llama_rest() }}</CardTitle>
                <CardDescription>
                    {{ m.lucky_suave_myna_adore() }}
                </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 {
    Card,
    CardDescription,
    CardHeader,
    CardTitle,
} from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import * as m from "~/paraglide/messages.js";

useHead({
    title: m.mild_many_dolphin_mend(),
});

definePageMeta({
    layout: "app",
    breadcrumbs: () => [
        {
            text: m.broad_whole_herring_reside(),
        },
    ],
    requiresAuth: true,
});

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(m.lucky_ago_rat_pinch())) {
                categories.set(m.lucky_ago_rat_pinch(), []);
            }

            categories.get(m.lucky_ago_rat_pinch())?.push(emoji);
            continue;
        }

        if (!categories.has(emoji.category)) {
            categories.set(emoji.category, []);
        }

        categories.get(emoji.category)?.push(emoji);
    }
    return categories;
});
</script>