diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue index 4e2458aa..8358b7a2 100644 --- a/components/account/AccountFollowButton.vue +++ b/components/account/AccountFollowButton.vue @@ -23,6 +23,18 @@ async function toggleFollow() { } } +async function unblock() { + relationship!.blocking = false + try { + const newRel = await useMasto().accounts.unblock(account.id) + Object.assign(relationship!, newRel) + } + catch { + // TODO error handling + relationship!.blocking = true + } +} + const { t } = useI18n() useCommand({ @@ -39,6 +51,9 @@ const buttonStyle = $computed(() => { if (!relationship) return 'text-inverted' + if (relationship.blocking) + return 'text-inverted bg-red border-red' + // If following, use a label style with a strong border for Mutuals if (relationship.following) return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}` @@ -54,9 +69,16 @@ const buttonStyle = $computed(() => { gap-1 items-center group :disabled="relationship?.requested" border-1 - rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="buttonStyle" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @click="toggleFollow" + rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 + :class="buttonStyle" + :hover="!relationship?.blocking && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" + @click="relationship?.blocking ? unblock() : toggleFollow()" > -