ui: improve account hover

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>

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>

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>

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