feat: show tag hover card when hovering cursor on hashtag links (#2621)

Co-authored-by: userquin <userquin@gmail.com>

components/account/TagHoverWrapper.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { tagName, disabled } = defineProps<{
+  tagName?: string
+  disabled?: boolean
+}>()
+
+const tag = ref<mastodon.v1.Tag>()
+const tagHover = ref()
+const hovered = useElementHover(tagHover)
+
+watch(hovered, (newHovered) => {
+  if (newHovered && tagName) {
+    fetchTag(tagName).then((t) => {
+      tag.value = t
+    })
+  }
+})
+
+const userSettings = useUserSettings()
+</script>
+
+<template>
+  <span ref="tagHover">
+    <VMenu
+      v-if="!disabled && !getPreferences(userSettings, 'hideTagHoverCard')"
+      placement="bottom-start"
+      :delay="{ show: 500, hide: 100 }"
+      v-bind="$attrs"
+      :close-on-content-click="false"
+    >
+      <slot />
+      <template #popper>
+        <TagCardSkeleton v-if="!tag" />
+        <TagCard v-else :tag="tag" />
+      </template>
+    </VMenu>
+    <slot v-else />
+  </span>
+</template>

components/tag/TagCard.vue

@@ -1,9 +1,7 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const {
-  tag,
-} = defineProps<{
+const { tag } = defineProps<{
   tag: mastodon.v1.Tag
 }>()
 
@@ -32,19 +30,21 @@ function go(evt: MouseEvent | KeyboardEvent) {
 
 <template>
   <div
-    block p4 hover:bg-active flex justify-between cursor-pointer
+    block p4 hover:bg-active flex justify-between cursor-pointer flex-gap-2
     @click="onclick"
     @keydown.enter="onclick"
   >
-    <div>
-      <h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
-        <TagActionButton :tag="tag" />
-        <bdi>
-          <span>#</span>
-          <span hover:underline>{{ tag.name }}</span>
-        </bdi>
-      </h4>
-      <CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
+    <div flex flex-gap-2>
+      <TagActionButton :tag="tag" />
+      <div>
+        <h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
+          <bdi>
+            <span>#</span>
+            <span hover:underline>{{ tag.name }}</span>
+          </bdi>
+        </h4>
+        <CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
+      </div>
     </div>
     <div v-if="tag.history" flex items-center>
       <CommonTrendingCharts :history="tag.history" />

components/tag/TagCardSkeleton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div p4 flex justify-between>
+  <div p4 flex justify-between gap-4>
     <div flex="~ col 1 gap-2">
       <div flex class="skeleton-loading-bg" h-5 w-30 rounded />
       <div flex class="skeleton-loading-bg" h-4 w-45 rounded />