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,13 +30,14 @@ 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 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>
-        <TagActionButton :tag="tag" />
           <bdi>
             <span>#</span>
             <span hover:underline>{{ tag.name }}</span>
@@ -46,6 +45,7 @@ function go(evt: MouseEvent | KeyboardEvent) {
         </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" />
     </div>

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 />

composables/cache.ts

@@ -93,6 +93,23 @@ export async function fetchAccountByHandle(acct: string): Promise<mastodon.v1.Ac
   return promise
 }
 
+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
 }
@@ -113,3 +130,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

@@ -16,6 +16,7 @@ export interface PreferencesSettings {
   hideTranslation: boolean
   hideUsernameEmojis: boolean
   hideAccountHoverCard: boolean
+  hideTagHoverCard: boolean
   hideNews: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
@@ -70,6 +71,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideTranslation: false,
   hideUsernameEmojis: false,
   hideAccountHoverCard: false,
+  hideTagHoverCard: false,
   hideNews: false,
   grayscaleMode: false,
   enableAutoplay: true,

locales/en.json

@@ -536,6 +536,7 @@
       "hide_follower_count": "Hide following/follower count",
       "hide_news": "Hide news",
       "hide_reply_count": "Hide reply count",
+      "hide_tag_hover_card": "Hide tag hover card",
       "hide_translation": "Hide translation",
       "hide_username_emojis": "Hide username emojis",
       "hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",

locales/es.json

@@ -536,6 +536,7 @@
       "hide_follower_count": "Ocultar número de seguidores",
       "hide_news": "Ocultar noticias",
       "hide_reply_count": "Ocultar número de respuestas",
+      "hide_tag_hover_card": "Ocultar tarjeta flotante de etiqueta",
       "hide_translation": "Ocultar traducción",
       "hide_username_emojis": "Ocultar emojis en el nombre de usuario",
       "hide_username_emojis_description": "Oculta los emojis de los nombres de usuarios en la línea de tiempo. Los emojis permanecerán visibles en sus perfiles.",

pages/settings/preferences/index.vue

@@ -27,6 +27,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.hide_account_hover_card') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'hideTagHoverCard')"
+      @click="togglePreferences('hideTagHoverCard')"
+    >
+      {{ $t('settings.preferences.hide_tag_hover_card') }}
+    </SettingsToggleItem>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'enableAutoplay')"
       :disabled="getPreferences(userSettings, 'enableDataSaving')"

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

@@ -180,11 +180,18 @@ exports[`content-rich > handles html within code blocks 1`] = `
 exports[`content-rich > hashtag adds bdi 1`] = `
 "<p>
   Testing bdi is added
-  <a
+  <span
+    ><VMenu
+      placement="bottom-start"
+      class="inline-block"
+      close-on-content-click="false"
+      ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"
         to="/m.webtoo.ls/tags/turkey"
         ><bdi>#<span>turkey</span></bdi></a
+      ></VMenu
+    ></span
   >
 </p>
 <p></p>
@@ -194,12 +201,17 @@ exports[`content-rich > hashtag adds bdi 1`] = `
 exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
 "<p>
   Testing bdi not added
-  <a
+  <span
+    ><VMenu
+      placement="bottom-start"
+      class="inline-block"
+      close-on-content-click="false"
+      ><a
         class="mention hashtag"
         rel="nofollow noopener noreferrer"
         to="/m.webtoo.ls/tags/turkey"
-    ><bdi></bdi
-  ></a>
+        ><bdi></bdi></a></VMenu
+  ></span>
 </p>
 <p></p>
 "