diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue index 8358b7a2..1822a197 100644 --- a/components/account/AccountFollowButton.vue +++ b/components/account/AccountFollowButton.vue @@ -35,6 +35,18 @@ async function unblock() { } } +async function unmute() { + relationship!.muting = false + try { + const newRel = await useMasto().accounts.unmute(account.id) + Object.assign(relationship!, newRel) + } + catch { + // TODO error handling + relationship!.muting = true + } +} + const { t } = useI18n() useCommand({ @@ -54,6 +66,9 @@ const buttonStyle = $computed(() => { if (relationship.blocking) return 'text-inverted bg-red border-red' + if (relationship.muting) + return 'text-base bg-code border-base' + // If following, use a label style with a strong border for Mutuals if (relationship.following) return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}` @@ -71,13 +86,17 @@ const buttonStyle = $computed(() => { border-1 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()" + :hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" + @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()" > +