elk/components/tag/TagActionButton.vue

50 lines
1.4 KiB
Vue
Raw Normal View History

2022-11-28 20:46:04 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-11-28 20:46:04 +00:00
const { tag } = defineProps<{
2023-01-08 06:21:09 +00:00
tag: mastodon.v1.Tag
2022-11-28 20:46:04 +00:00
}>()
const emit = defineEmits<{
(event: 'change'): void
}>()
2023-01-15 08:38:02 +00:00
const { client } = $(useMasto())
2022-11-28 20:46:04 +00:00
const toggleFollowTag = async () => {
// 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
2022-11-28 20:46:04 +00:00
// eslint-disable-next-line vue/no-mutating-props
tag.following = !tag.following
try {
2023-01-24 21:57:24 +00:00
if (previousFollowingState)
await client.v1.tags.unfollow(tag.name)
else
await client.v1.tags.follow(tag.name)
emit('change')
}
catch (error) {
// eslint-disable-next-line vue/no-mutating-props
tag.following = previousFollowingState
}
2022-11-28 20:46:04 +00:00
}
</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])"
2022-11-28 20:46:04 +00:00
@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">
2022-11-28 20:46:04 +00:00
<div :class="[tag.following ? 'i-ri:star-fill' : 'i-ri:star-line']" />
</div>
</CommonTooltip>
</button>
</template>