From 3cd8fb54dd7573f35223bad290b75a04b1b74d7f Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 10:13:18 +0800
Subject: [PATCH] ui: improve account hover

---
 components/account/AccountAvatar.vue       | 18 +-----------------
 components/account/AccountHoverWrapper.vue | 16 ++++++++++++++++
 components/status/StatusAccountDetails.vue | 16 +++++++++-------
 components/status/StatusCard.vue           |  6 +++++-
 4 files changed, 31 insertions(+), 25 deletions(-)
 create mode 100644 components/account/AccountHoverWrapper.vue

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index cb7d1ba9..8b9f576a 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -3,7 +3,6 @@ import type { Account } from 'masto'
 
 defineProps<{
   account: Account
-  hover?: boolean
 }>()
 
 defineOptions({
@@ -12,20 +11,5 @@ defineOptions({
 </script>
 
 <template>
-  <div v-if="hover" relative flex-shrink-0>
-    <div group>
-      <AccountHoverCard
-        :account="account"
-        absolute top-0 left-0 z-10
-        op0 pointer-events-none mt--100vh
-        font-normal delay-300 duration-400 transition transform invisible
-        group-hover="visible pointer-events-auto op100 mt-0"
-        translate="x-[calc(-1rem-1px)] y-[calc(-1rem-1px)]"
-        class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]"
-        style="transform-origin: calc(1rem + 1px) calc(0.75rem + 1px);"
-      />
-      <AccountAvatarImage :account="account" v-bind="$attrs" />
-    </div>
-  </div>
-  <AccountAvatarImage v-else :account="account" v-bind="$attrs" />
+  <AccountAvatarImage :account="account" v-bind="$attrs" />
 </template>
diff --git a/components/account/AccountHoverWrapper.vue b/components/account/AccountHoverWrapper.vue
new file mode 100644
index 00000000..06561a94
--- /dev/null
+++ b/components/account/AccountHoverWrapper.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <VMenu placement="bottom-start">
+    <slot />
+    <template #popper>
+      <AccountHoverCard :account="account" />
+    </template>
+  </VMenu>
+</template>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index f8751db8..a79f01af 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -8,11 +8,13 @@ const { account, link = true } = defineProps<{
 </script>
 
 <template>
-  <NuxtLink
-    :to="link ? getAccountPath(account) : undefined"
-    flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
-  >
-    <ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
-    <AccountHandle :account="account" />
-  </NuxtLink>
+  <AccountHoverWrapper :account="account">
+    <NuxtLink
+      :to="link ? getAccountPath(account) : undefined"
+      flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
+    >
+      <ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+      <AccountHandle :account="account" />
+    </NuxtLink>
+  </AccountHoverWrapper>
 </template>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 2aa1b1a7..a3275fda 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -47,7 +47,11 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
       </div>
     </div>
     <div flex gap-4>
-      <AccountAvatar w-12 h-12 :account="status.account" hover />
+      <div>
+        <NuxtLink :to="getAccountPath(status.account)">
+          <AccountAvatar w-12 h-12 :account="status.account" />
+        </NuxtLink>
+      </div>
       <div flex="~ col 1" min-w-0>
         <div flex>
           <StatusAccountDetails :account="status.account" />