PronounsPage/components/CircleMentions.vue

<script setup lang="ts">
const { $translator: translator } = useNuxtApp();

const { data: circleMentions } = useFetch<Record<string, Record<string, string>>>(
    '/api/profile/my-circle-mentions',
    { lazy: true },
);

const dialogue = useDialogue();
const removeSelf = async (username: string) => {
    await dialogue.confirm(translator.translate('profile.circles.removeSelf.confirm', { username }), 'warning');
    await dialogue.postWithAlertOnError(`/api/profile/remove-self-circle/${encodeURIComponent(username)}`);
    window.location.reload();
};
</script>

<template>
    <Loading :value="circleMentions">
        <p class="small text-muted">
            <T>profile.circles.yourMentions.description</T>
        </p>
        <table class="table table-striped table-bordered">
            <tbody>
                <tr v-if="!circleMentions || Object.keys(circleMentions).length === 0">
                    <td class="text-center">
                        <T>table.empty</T>
                    </td>
                </tr>
                <template v-else>
                    <template v-for="(profiles, username) in circleMentions" :key="username">
                        <tr v-if="username !== 'null'">
                            <th>
                                <LocaleLink :link="`/@${username}`" locale="_">
                                    @{{ username }}
                                </LocaleLink>
                            </th>
                            <td>
                                <ul>
                                    <template v-for="(relationship, locale) in profiles" :key="locale">
                                        <li v-if="locale && $locales[locale]">
                                            <LocaleLink :link="`/@${username}`" :locale="locale">
                                                {{ $locales[locale].name }}
                                                <small v-if="$locales[locale].extra" class="text-muted">({{ $locales[locale].extra }})</small>
                                            </LocaleLink><T>quotation.colon</T>
                                            {{ relationship }}
                                        </li>
                                    </template>
                                </ul>
                            </td>
                            <td style="max-width: 4rem">
                                <button
                                    type="button"
                                    class="btn btn-link btn-sm text-danger"
                                    @click="removeSelf(username)"
                                >
                                    <Icon v="trash" />
                                    <T>profile.circles.removeSelf.action</T>
                                </button>
                            </td>
                        </tr>
                    </template>
                </template>
            </tbody>
        </table>
    </Loading>
</template>