frontend/components/profiles/profile-badges.vue

<template>
    <div
        class="flex flex-row flex-wrap gap-2 -mx-2"
        v-if="isDeveloper || account.bot || roles.length > 0"
    >
        <ProfileBadge
            v-if="isDeveloper"
            :name="m.nice_bad_grizzly_coax()"
            :description="m.honest_jolly_shell_blend()"
            :verified="true"
        />
        <ProfileBadge
            v-if="account.bot"
            :name="m.merry_red_shrimp_bump()"
            :description="m.sweet_mad_jannes_create()"
        />
        <ProfileBadge
            v-for="role in roles"
            :key="role.id"
            :name="role.name"
            :description="role.description"
            :icon="role.icon"
        />
    </div>
</template>

<script lang="ts" setup>
import type { Account } from "@versia/client/schemas";
import type { z } from "zod";
import * as m from "~/paraglide/messages.js";
import ProfileBadge from "./profile-badge.vue";

const { account } = defineProps<{
    account: z.infer<typeof Account>;
}>();

const config = useConfig();
const roles = account.roles.filter((r) => r.visible);
// Get user handle in username@instance format
const handle = account.acct.includes("@")
    ? account.acct
    : `${account.acct}@${
          identity.value?.instance.domain ?? window.location.host
      }`;
const isDeveloper = config.DEVELOPER_HANDLES.includes(handle);
</script>

<style></style>