From 4d3d05ae5c8972b0c7a801efbb68310e52a1d77d Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 12:30:21 +0800
Subject: [PATCH] ui: move hover card

---
 components/account/AccountInlineInfo.vue   | 18 ++++++++++--------
 components/status/StatusAccountDetails.vue | 18 ++++++++----------
 components/status/StatusCard.vue           | 12 ++++++++----
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index d9bfa9fc..1cfecb5d 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -8,12 +8,14 @@ const { link = true } = defineProps<{
 </script>
 
 <template>
-  <NuxtLink
-    :to="link ? getAccountPath(account) : undefined"
-    :class="link ? 'text-link-rounded' : ''"
-    min-w-0 flex gap-1 items-center
-  >
-    <AccountAvatar :account="account" w-5 h-5 />
-    <ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
-  </NuxtLink>
+  <AccountHoverWrapper :account="account">
+    <NuxtLink
+      :to="link ? getAccountPath(account) : undefined"
+      :class="link ? 'text-link-rounded' : ''"
+      min-w-0 flex gap-1 items-center
+    >
+      <AccountAvatar :account="account" w-5 h-5 />
+      <ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+    </NuxtLink>
+  </AccountHoverWrapper>
 </template>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index 3763a20e..58dba05f 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -8,14 +8,12 @@ const { account, link = true } = defineProps<{
 </script>
 
 <template>
-  <AccountHoverWrapper :account="account">
-    <NuxtLink
-      :to="link ? getAccountPath(account) : undefined"
-      flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
-      text-link-rounded
-    >
-      <ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
-      <AccountHandle :account="account" />
-    </NuxtLink>
-  </AccountHoverWrapper>
+  <NuxtLink
+    :to="link ? getAccountPath(account) : undefined"
+    flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
+    text-link-rounded
+  >
+    <ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+    <AccountHandle :account="account" />
+  </NuxtLink>
 </template>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 1c4317c2..c6fabb94 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -48,13 +48,17 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
     </div>
     <div flex gap-4>
       <div>
-        <NuxtLink :to="getAccountPath(status.account)" rounded-full>
-          <AccountAvatar w-12 h-12 :account="status.account" />
-        </NuxtLink>
+        <AccountHoverWrapper :account="status.account">
+          <NuxtLink :to="getAccountPath(status.account)" rounded-full>
+            <AccountAvatar w-12 h-12 :account="status.account" />
+          </NuxtLink>
+        </AccountHoverWrapper>
       </div>
       <div flex="~ col 1" min-w-0>
         <div flex>
-          <StatusAccountDetails :account="status.account" />
+          <AccountHoverWrapper :account="status.account">
+            <StatusAccountDetails :account="status.account" />
+          </AccountHoverWrapper>
           <div flex-auto />
           <div text-sm text-secondary flex="~ row nowrap" hover:underline>
             <CommonTooltip :content="createdAt">