elk/components/account/AccountMoreButton.vue
2023-01-09 22:27:03 +02:00

161 lines
5.4 KiB
Vue

<script setup lang="ts">
import type { mastodon } from 'masto'
const { account } = defineProps<{
account: mastodon.v1.Account
command?: boolean
}>()
let relationship = $(useRelationship(account))
const isSelf = $computed(() => currentUser.value?.account.id === account.id)
const masto = useMasto()
const toggleMute = async () => {
// TODO: Add confirmation
relationship!.muting = !relationship!.muting
relationship = relationship!.muting
? await masto.v1.accounts.mute(account.id, {
// TODO support more options
})
: await masto.v1.accounts.unmute(account.id)
}
const toggleBlockUser = async () => {
// TODO: Add confirmation
relationship!.blocking = !relationship!.blocking
relationship = await masto.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
}
const toggleBlockDomain = async () => {
// TODO: Add confirmation
relationship!.domainBlocking = !relationship!.domainBlocking
await masto.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
}
const toggleReblogs = async () => {
// TODO: Add confirmation
const showingReblogs = !relationship?.showingReblogs
relationship = await masto.v1.accounts.follow(account.id, { reblogs: showingReblogs })
}
</script>
<template>
<CommonDropdown :eager-mount="command">
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
<div rounded-5 p2 group-hover="bg-purple/10">
<div i-ri:more-2-fill />
</div>
</button>
<template #popper>
<NuxtLink :to="account.url" external target="_blank">
<CommonDropdownItem
:text="$t('menu_open_in_original_site')"
icon="i-ri:arrow-right-up-line"
:command="command"
/>
</NuxtLink>
<template v-if="currentUser">
<template v-if="!isSelf">
<CommonDropdownItem
:text="$t('menu_mention_account', { username: `@${account.acct}` })"
icon="i-ri:at-line"
:command="command"
@click="mentionUser(account)"
/>
<CommonDropdownItem
:text="$t('menu_direct_message_account', { username: `@${account.acct}` })"
icon="i-ri:message-3-line"
:command="command"
@click="directMessageUser(account)"
/>
<CommonDropdownItem
v-if="!relationship?.showingReblogs"
icon="i-ri:repeat-line"
:text="$t('menu_show_reblogs', { username: `@${account.acct}` })"
:command="command"
@click="toggleReblogs"
/>
<CommonDropdownItem
v-else
:text="$t('menu_hide_reblogs', { username: `@${account.acct}` })"
icon="i-ri:repeat-line"
:command="command"
@click="toggleReblogs"
/>
<CommonDropdownItem
v-if="!relationship?.muting"
:text="$t('menu_mute_account', { username: `@${account.acct}` })"
icon="i-ri:volume-up-fill"
:command="command"
@click="toggleMute"
/>
<CommonDropdownItem
v-else
:text="$t('menu_unmute_account', { username: `@${account.acct}` })"
icon="i-ri:volume-mute-line"
:command="command"
@click="toggleMute"
/>
<CommonDropdownItem
v-if="!relationship?.blocking"
:text="$t('menu_block_account', { username: `@${account.acct}` })"
icon="i-ri:forbid-2-line"
:command="command"
@click="toggleBlockUser"
/>
<CommonDropdownItem
v-else
:text="$t('menu_unblock_account', { username: `@${account.acct}` })"
icon="i-ri:checkbox-circle-line"
:command="command"
@click="toggleBlockUser"
/>
<template v-if="getServerName(account) !== currentServer">
<CommonDropdownItem
v-if="!relationship?.domainBlocking"
:text="$t('menu_block_domain', { domain: getServerName(account) })"
icon="i-ri:shut-down-line"
:command="command"
@click="toggleBlockDomain"
/>
<CommonDropdownItem
v-else
:text="$t('menu_unblock_domain', { domain: getServerName(account) })"
icon="i-ri:restart-line"
:command="command"
@click="toggleBlockDomain"
/>
</template>
</template>
<template v-else>
<NuxtLink to="/pinned">
<CommonDropdownItem :text="$t('account_pinned')" icon="i-ri:pushpin-line" :command="command" />
</NuxtLink>
<NuxtLink to="/favourites">
<CommonDropdownItem :text="$t('account_favourites')" icon="i-ri:heart-3-line" :command="command" />
</NuxtLink>
<NuxtLink to="/mutes">
<CommonDropdownItem :text="$t('account_muted_users')" icon="i-ri:volume-mute-line" :command="command" />
</NuxtLink>
<NuxtLink to="/blocks">
<CommonDropdownItem :text="$t('account_blocked_users')" icon="i-ri:forbid-2-line" :command="command" />
</NuxtLink>
<NuxtLink to="/domain_blocks">
<CommonDropdownItem :text="$t('account_blocked_domains')" icon="i-ri:shut-down-line" :command="command" />
</NuxtLink>
</template>
</template>
</template>
</CommonDropdown>
</template>