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>