elk/components/tag/TagActionButton.vue
2024-01-09 08:56:15 +00:00

50 lines
1.4 KiB
Vue

<script setup lang="ts">
import type { mastodon } from 'masto'
const { tag } = defineProps<{
tag: mastodon.v1.Tag
}>()
const emit = defineEmits<{
(event: 'change'): void
}>()
const { client } = $(useMasto())
async function toggleFollowTag() {
// We save the state so be can do an optimistic UI update, but fallback to the previous state if the API call fails
const previousFollowingState = tag.following
// eslint-disable-next-line vue/no-mutating-props
tag.following = !tag.following
try {
if (previousFollowingState)
await client.v1.tags.$select(tag.name).unfollow()
else
await client.v1.tags.$select(tag.name).follow()
emit('change')
}
catch (error) {
// eslint-disable-next-line vue/no-mutating-props
tag.following = previousFollowingState
}
}
</script>
<template>
<button
rounded group focus:outline-none
hover:text-primary focus-visible:text-primary
:aria-label="tag.following ? $t('tag.unfollow_label', [tag.name]) : $t('tag.follow_label', [tag.name])"
@click="toggleFollowTag()"
>
<CommonTooltip placement="bottom" :content="tag.following ? $t('tag.unfollow') : $t('tag.follow')">
<div rounded-full p2 elk-group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
<div :class="[tag.following ? 'i-ri:star-fill' : 'i-ri:star-line']" />
</div>
</CommonTooltip>
</button>
</template>