feat: show tag hover card when hovering cursor on hashtag links

components/account/AccountHoverWrapper.vue

@@ -57,7 +57,7 @@ const userSettings = useUserSettings()
 
 <template>
   <span ref="hoverCard">
-    <VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
+    <VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountAndTagHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
       <slot />
       <template #popper>
         <AccountHoverCard v-if="account" :account="account" />

components/account/TagHoverWrapper.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+import { fetchTag } from '~/composables/cache'
+
+type WatcherType = [tag?: mastodon.v1.Tag, tagName?: string, v?: boolean]
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  tag?: mastodon.v1.Tag
+  tagName?: string
+  disabled?: boolean
+}>()
+
+const hoverCard = ref()
+const targetIsVisible = ref(false)
+const tag = ref<mastodon.v1.Tag | null | undefined>(props.tag)
+
+useIntersectionObserver(
+  hoverCard,
+  ([{ intersectionRatio }]) => {
+    targetIsVisible.value = intersectionRatio > 0.1
+  },
+)
+
+watch(
+  () => [props.tag, props.tagName, targetIsVisible.value] satisfies WatcherType,
+  ([newTag, newTagName, newVisible], oldProps) => {
+    if (newTag) {
+      tag.value = newTag
+      return
+    }
+
+    if (!newVisible || process.test)
+      return
+
+    if (newTagName) {
+      const [_oldTag, oldTagName, _oldVisible] = oldProps ?? [undefined, undefined, false]
+      if (!oldTagName || newTagName !== oldTagName || !tag.value) {
+        fetchTag(newTagName).then((t) => {
+          if (newTagName === props.tagName)
+            tag.value = t
+        })
+      }
+
+      return
+    }
+
+    tag.value = undefined
+  }, { immediate: true, flush: 'post' },
+)
+
+const userSettings = useUserSettings()
+</script>
+
+<template>
+  <span ref="hoverCard">
+    <VMenu v-if="!disabled && tag && !getPreferences(userSettings, 'hideAccountAndTagHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
+      <slot />
+      <template #popper>
+        <TagCard v-if="tag" :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" />

composables/cache.ts

@@ -91,6 +91,23 @@ export async function fetchAccountByHandle(acct: string): Promise<mastodon.v1.Ac
   return account
 }
 
+export function fetchTag(tagName: string, force = false): Promise<mastodon.v1.Tag> {
+  const server = currentServer.value
+  const userId = currentUser.value?.account.id
+  const key = `${server}:${userId}:tag:${tagName}`
+  const cached = cache.get(key)
+  if (cached && !force)
+    return Promise.resolve(cached)
+
+  const promise = useMastoClient().v1.tags.$select(tagName).fetch()
+    .then((tag) => {
+      cacheTag(tag)
+      return tag
+    })
+  cache.set(key, promise)
+  return promise
+}
+
 export function useAccountById(id?: string | null) {
   return useAsyncState(() => fetchAccountById(id), null).state
 }
@@ -111,3 +128,8 @@ export function cacheAccount(account: mastodon.v1.Account, server = currentServe
   setCached(`${server}:${userId}:account:${account.id}`, account, override)
   setCached(`${server}:${userId}:account:${userAcct}`, account, override)
 }
+
+export function cacheTag(tag: mastodon.v1.Tag, server = currentServer.value, override?: boolean) {
+  const userId = currentUser.value?.account.id
+  setCached(`${server}:${userId}:tag:${tag.name}`, tag, override)
+}

composables/content-render.ts

@@ -10,6 +10,7 @@ import Emoji from '~/components/emoji/Emoji.vue'
 import ContentCode from '~/components/content/ContentCode.vue'
 import ContentMentionGroup from '~/components/content/ContentMentionGroup.vue'
 import AccountHoverWrapper from '~/components/account/AccountHoverWrapper.vue'
+import TagHoverWrapper from '~/components/account/TagHoverWrapper.vue'
 
 function getTextualAstComponents(astChildren: Node[]): string {
   return astChildren
@@ -128,11 +129,13 @@ function handleMention(el: Node) {
         addBdiNode(el)
         return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
       }
+
       const matchTag = href.match(TagLinkRE)
       if (matchTag) {
-        const [, , name] = matchTag
+        const [, , tagName] = matchTag
         addBdiNode(el)
-        el.attributes.href = `/${currentServer.value}/tags/${name}`
+        el.attributes.href = `/${currentServer.value}/tags/${tagName}`
+        return h(TagHoverWrapper, { tagName, class: 'inline-block' }, () => nodeToVNode(el))
       }
     }
   }

composables/settings/definition.ts

@@ -15,7 +15,7 @@ export interface PreferencesSettings {
   hideFollowerCount: boolean
   hideTranslation: boolean
   hideUsernameEmojis: boolean
-  hideAccountHoverCard: boolean
+  hideAccountAndTagHoverCard: boolean
   hideNews: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
@@ -69,7 +69,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideFollowerCount: false,
   hideTranslation: false,
   hideUsernameEmojis: false,
-  hideAccountHoverCard: false,
+  hideAccountAndTagHoverCard: false,
   hideNews: false,
   grayscaleMode: false,
   enableAutoplay: true,

locales/en.json

@@ -529,7 +529,7 @@
       "github_cards": "GitHub Cards",
       "github_cards_description": "When a GitHub link is posted, an accessible HTML card using the social graph meta is displayed instead of the social image.",
       "grayscale_mode": "Grayscale mode",
-      "hide_account_hover_card": "Hide account hover card",
+      "hide_account_and_tag_hover_card": "Hide account and tag hover card",
       "hide_alt_indi_on_posts": "Hide alt indicator on posts",
       "hide_boost_count": "Hide boost count",
       "hide_favorite_count": "Hide favorite count",

locales/es.json

@@ -519,7 +519,7 @@
       "github_cards": "Tarjetas GitHub",
       "github_cards_description": "Cuando se publica un enlace de GitHub, se muestra una tarjeta HTML accesible que usa el meta del gráfico social en lugar de la imagen social.",
       "grayscale_mode": "Modo escala de grises",
-      "hide_account_hover_card": "Ocultar tarjeta flotante de cuenta",
+      "hide_account_and_tag_hover_card": "Ocultar tarjetas flotantes de cuenta y etiqueta",
       "hide_alt_indi_on_posts": "Ocultar indicador ALT en publicaciones",
       "hide_boost_count": "Ocultar contador de retoots",
       "hide_favorite_count": "Ocultar número de publicaciones favoritas",

pages/settings/preferences/index.vue

@@ -22,10 +22,10 @@ const userSettings = useUserSettings()
       {{ $t('settings.preferences.hide_alt_indi_on_posts') }}
     </SettingsToggleItem>
     <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
-      @click="togglePreferences('hideAccountHoverCard')"
+      :checked="getPreferences(userSettings, 'hideAccountAndTagHoverCard')"
+      @click="togglePreferences('hideAccountAndTagHoverCard')"
     >
-      {{ $t('settings.preferences.hide_account_hover_card') }}
+      {{ $t('settings.preferences.hide_account_and_tag_hover_card') }}
     </SettingsToggleItem>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'enableAutoplay')"

tests/nuxt/__snapshots__/content-rich.test.ts.snap

@@ -180,11 +180,13 @@ exports[`content-rich > handles html within code blocks 1`] = `
 exports[`content-rich > hashtag adds bdi 1`] = `
 "<p>
   Testing bdi is added
-  <a
-    class="mention hashtag"
-    rel="nofollow noopener noreferrer"
-    to="/m.webtoo.ls/tags/turkey"
-    ><bdi>#<span>turkey</span></bdi></a
+  <span
+    ><a
+      class="mention hashtag"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/tags/turkey"
+      ><bdi>#<span>turkey</span></bdi></a
+    ></span
   >
 </p>
 <p></p>
@@ -194,12 +196,13 @@ exports[`content-rich > hashtag adds bdi 1`] = `
 exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
 "<p>
   Testing bdi not added
-  <a
-    class="mention hashtag"
-    rel="nofollow noopener noreferrer"
-    to="/m.webtoo.ls/tags/turkey"
-    ><bdi></bdi
-  ></a>
+  <span
+    ><a
+      class="mention hashtag"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/tags/turkey"
+      ><bdi></bdi></a
+  ></span>
 </p>
 <p></p>
 "