1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-28 21:48:00 +09:00
elk/components/account/AccountFollowButton.vue

60 lines
2.0 KiB
Vue
Raw Normal View History

2022-11-23 07:40:20 +09:00
<script setup lang="ts">
2022-11-23 08:08:36 +09:00
import type { Account } from 'masto'
2022-11-23 07:40:20 +09:00
const { account, command } = defineProps<{
2022-11-23 07:40:20 +09:00
account: Account
command?: boolean
2022-11-23 07:40:20 +09:00
}>()
2022-11-25 00:48:52 +09:00
const isSelf = $computed(() => currentUser.value?.account.id === account.id)
const enable = $computed(() => !isSelf && currentUser.value)
2022-11-26 21:58:10 +09:00
let relationship = $(useRelationship(account))
2022-11-23 07:40:20 +09:00
async function toggleFollow() {
relationship!.following = !relationship!.following
2022-11-26 21:58:10 +09:00
try {
relationship = await useMasto().accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
2022-11-26 21:58:10 +09:00
}
catch {
// TODO error handling
relationship!.following = !relationship!.following
}
2022-11-23 07:40:20 +09:00
}
2022-11-30 11:16:15 +09:00
const { t } = useI18n()
useCommand({
scope: 'Actions',
order: -2,
visible: () => command && enable,
2022-11-30 11:16:15 +09:00
name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
icon: 'i-ri:star-line',
onActivate: () => toggleFollow(),
})
2022-11-23 07:40:20 +09:00
</script>
<template>
<button
v-if="enable"
2022-11-30 05:04:23 +09:00
gap-1 items-center group
:disabled="relationship?.requested"
2022-11-30 05:04:23 +09:00
border-1
rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="relationship?.following ? 'text-base border-text-base' : 'text-inverted bg-primary border-primary'" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @click="toggleFollow"
>
2022-11-30 05:04:23 +09:00
<template v-if="relationship?.following">
2022-11-30 11:16:15 +09:00
<span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
2022-11-30 05:04:23 +09:00
<span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
</template>
<template v-else-if="relationship?.requested">
<span>{{ $t('account.follow_requested') }}</span>
</template>
<template v-else-if="relationship?.followedBy">
<span group-hover="hidden">{{ $t('account.follows_you') }}</span>
<span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
</template>
<template v-else>
<span>{{ $t('account.follow') }}</span>
</template>
2022-11-23 07:40:20 +09:00
</button>
</template>