feat: follow tags from trends page (#1391)

components/tag/TagActionButton.vue

@@ -12,12 +12,24 @@ const emit = defineEmits<{
 const { client } = $(useMasto())
 
 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
+
+  // eslint-disable-next-line vue/no-mutating-props
+  tag.following = !tag.following
+
+  try {
     if (tag.following)
       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
+  }
 }
 </script>
 

components/tag/TagCard.vue

@@ -11,12 +11,34 @@ const to = $computed(() => {
   const { hostname, pathname } = new URL(tag.url)
   return `/${hostname}${pathname}`
 })
+
+const router = useRouter()
+
+function onclick(evt: MouseEvent | KeyboardEvent) {
+  const path = evt.composedPath() as HTMLElement[]
+  const el = path.find(el => ['A', 'BUTTON'].includes(el.tagName?.toUpperCase()))
+  const text = window.getSelection()?.toString()
+  if (!el && !text)
+    go(evt)
+}
+
+function go(evt: MouseEvent | KeyboardEvent) {
+  if (evt.metaKey || evt.ctrlKey)
+    window.open(to)
+  else
+    router.push(to)
+}
 </script>
 
 <template>
-  <NuxtLink :to="to" block p4 hover:bg-active flex justify-between>
+  <div
+    block p4 hover:bg-active flex justify-between cursor-pointer
+    @click="onclick"
+    @keydown.enter="onclick"
+  >
     <div>
-      <h4 text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
+      <h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
+        <TagActionButton :tag="tag" />
         <span>#</span>
         <span hover:underline>{{ tag.name }}</span>
       </h4>
@@ -25,5 +47,5 @@ const to = $computed(() => {
     <div flex items-center>
       <CommonTrendingCharts :history="tag.history" />
     </div>
-  </NuxtLink>
+  </div>
 </template>