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>