From aac8a12091f83363853a6ef390acc0f5bef83887 Mon Sep 17 00:00:00 2001
From: Shinigami <chrissi92@hotmail.de>
Date: Mon, 28 Nov 2022 21:46:04 +0100
Subject: [PATCH] feat: un/follow tags (#188)

---
 components/tag/TagActionButton.vue | 36 ++++++++++++++++++++++++++++++
 package.json                       |  2 +-
 pages/tags/[tag].vue               | 26 ++++++++++++++++-----
 pnpm-lock.yaml                     |  8 +++----
 4 files changed, 61 insertions(+), 11 deletions(-)
 create mode 100644 components/tag/TagActionButton.vue

diff --git a/components/tag/TagActionButton.vue b/components/tag/TagActionButton.vue
new file mode 100644
index 00000000..ba23f508
--- /dev/null
+++ b/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>
diff --git a/package.json b/package.json
index e0e7d106..f97cc6f3 100644
--- a/package.json
+++ b/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",
diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
index e228f83e..e58a18de 100644
--- a/pages/tags/[tag].vue
+++ b/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 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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e49aa7b0..546d127f 100644
--- a/pnpm-lock.yaml
+++ b/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:
-    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