feat: un/follow tags (#188)

components/tag/TagActionButton.vue

@@ -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>

package.json

@@ -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",

pages/tags/[tag].vue

@@ -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 { data: tag, refresh } = $(await useAsyncData(() => useMasto().tags.fetch(tagName)))
-const stream = await useMasto().stream.streamTagTimeline(tag)
+
+const paginator = useMasto().timelines.getHashtagIterable(tagName)
+const stream = await useMasto().stream.streamTagTimeline(tagName)
 onBeforeUnmount(() => stream.disconnect())
 
-useHead({
+if (tag) {
-  title: `#${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>

pnpm-lock.yaml

@@ -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:
+  /masto/4.7.0-rc1:
-    resolution: {integrity: sha512-CNc2kmKPxUk+C/kq9qPZQh+zyrfVzoSFjadRHkqALN133/RxkHuF4cizxS7yXncfU4c9vtvCOnmYkmnr1lKM5A==}
+    resolution: {integrity: sha512-aGd5Q0DNuWcRfvfweV10cwZx7o3VSnEv2J3q3ou1GfX+bZp2KPprenjMowFpbD+Mn2EiUPoqOZUWjB/CKWdB5w==}
     dependencies:
       axios: 1.1.3
       change-case: 4.1.2