elk/components/list/Account.vue

52 lines
1.3 KiB
Vue

<script setup lang="ts">
import type { mastodon } from 'masto'
const { account, list } = defineProps<{
account: mastodon.v1.Account
hoverCard?: boolean
list: string
}>()
cacheAccount(account)
const client = useMastoClient()
const isRemoved = ref(false)
async function edit() {
try {
isRemoved.value
? await client.v1.lists.addAccount(list, { accountIds: [account.id] })
: await client.v1.lists.removeAccount(list, { accountIds: [account.id] })
isRemoved.value = !isRemoved.value
}
catch (err) {
console.error(err)
}
}
</script>
<template>
<div flex justify-between hover:bg-active transition-100 items-center>
<AccountInfo
:account="account" hover p1 as="router-link"
:hover-card="hoverCard"
shrink
overflow-hidden
:to="getAccountRoute(account)"
/>
<div>
<CommonTooltip :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')" :hover="isRemoved ? 'text-green' : 'text-red'">
<button
text-sm p2 border-1 transition-colors
border-dark
btn-action-icon
@click="edit"
>
<span :class="isRemoved ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
</button>
</CommonTooltip>
</div>
</div>
</template>