feat: un/follow tags (#188)

zio/stable
Shinigami 2022-11-28 21:46:04 +01:00 committed by GitHub
parent 09e071f6bf
commit aac8a12091
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 11 deletions

View File

@ -0,0 +1,36 @@
<script setup lang="ts">
import type { Tag } from 'masto'
const { tag } = defineProps<{
tag: Tag
}>()
const emit = defineEmits<{
(event: 'change'): void
}>()
const { tags } = useMasto()
const toggleFollowTag = async () => {
if (tag.following)
await tags.unfollow(tag.name)
else
await tags.follow(tag.name)
emit('change')
}
</script>
<template>
<button
rounded group focus:outline-none
hover:text-primary focus-visible:text-primary
@click="toggleFollowTag()"
>
<CommonTooltip placement="bottom" :content="tag.following ? 'Unfollow' : 'Follow'">
<div rounded-full p2 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>

View File

@ -53,7 +53,7 @@
"js-yaml": "^4.1.0",
"lint-staged": "^13.0.4",
"lru-cache": "^7.14.1",
"masto": "^4.6.10",
"masto": "^4.7.0-rc1",
"nuxt": "^3.0.0",
"parse5": "^7.1.2",
"pinia": "^2.0.26",

View File

@ -1,20 +1,34 @@
<script setup lang="ts">
const params = useRoute().params
const tag = $(computedEager(() => params.tag as string))
const tagName = $(computedEager(() => params.tag as string))
const paginator = useMasto().timelines.getHashtagIterable(tag)
const stream = await useMasto().stream.streamTagTimeline(tag)
const { data: tag, refresh } = $(await useAsyncData(() => useMasto().tags.fetch(tagName)))
const paginator = useMasto().timelines.getHashtagIterable(tagName)
const stream = await useMasto().stream.streamTagTimeline(tagName)
onBeforeUnmount(() => stream.disconnect())
useHead({
title: `#${tag}`,
if (tag) {
useHead({
title: () => `#${tag.name}`,
})
}
onReactivated(() => {
// Silently update data when reentering the page
// The user will see the previous content first, and any changes will be updated to the UI when the request is completed
refresh()
})
</script>
<template>
<MainContent back>
<template #title>
<span text-lg font-bold>#{{ tag }}</span>
<span text-lg font-bold>#{{ tagName }}</span>
</template>
<template v-if="typeof tag?.following === 'boolean'" #actions>
<TagActionButton :tag="tag" @change="refresh()" />
</template>
<slot>

View File

@ -38,7 +38,7 @@ specifiers:
js-yaml: ^4.1.0
lint-staged: ^13.0.4
lru-cache: ^7.14.1
masto: ^4.6.10
masto: ^4.7.0-rc1
nuxt: ^3.0.0
parse5: ^7.1.2
pinia: ^2.0.26
@ -96,7 +96,7 @@ devDependencies:
js-yaml: 4.1.0
lint-staged: 13.0.4
lru-cache: 7.14.1
masto: 4.6.10
masto: 4.7.0-rc1
nuxt: 3.0.0_hsf322ms6xhhd4b5ne6lb74y4a
parse5: 7.1.2
pinia: 2.0.26_typescript@4.9.3
@ -5497,8 +5497,8 @@ packages:
semver: 6.3.0
dev: true
/masto/4.6.10:
resolution: {integrity: sha512-CNc2kmKPxUk+C/kq9qPZQh+zyrfVzoSFjadRHkqALN133/RxkHuF4cizxS7yXncfU4c9vtvCOnmYkmnr1lKM5A==}
/masto/4.7.0-rc1:
resolution: {integrity: sha512-aGd5Q0DNuWcRfvfweV10cwZx7o3VSnEv2J3q3ou1GfX+bZp2KPprenjMowFpbD+Mn2EiUPoqOZUWjB/CKWdB5w==}
dependencies:
axios: 1.1.3
change-case: 4.1.2