feat: add account hover card (#80)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

components/account/AccountHoverCard.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card">
+    <AccountInfo :account="account" />
+    <div text-sm flex flex-row text-gray mt-4>
+      <NuxtLink :to="`/${getAccountHandle(account)}/`">
+        {{ account.statusesCount }} Posts
+      </NuxtLink>
+      <span flex-1 text-center> • </span>
+      <NuxtLink :to="`/${getAccountHandle(account)}/following`">
+        {{ account.followingCount }} Following
+      </NuxtLink>
+      <span flex-1 text-center> • </span>
+      <NuxtLink :to="`/${getAccountHandle(account)}/followers`">
+        {{ account.followersCount }} Followers
+      </NuxtLink>
+    </div>
+    <ContentRichSetup text-4 text-gray :content="account.note" :emojis="account.emojis" />
+  </div>
+</template>
+
+<style>
+.account-hover-card {
+  transform-origin: 3em 3em;
+}
+</style>

components/status/StatusCard.vue

@@ -79,7 +79,12 @@ const timeago = useTimeAgo(() => status.createdAt, {
       </div>
     </div>
     <div flex gap-4>
+      <div relative flex-shrink-0>
+        <div group>
+          <AccountHoverCard top="-3.2" left="-4.4" absolute :account="status.account" op0 pointer-events-none group-hover="pointer-events-auto op100 scale-100" delay-250 transition transform scale-20 class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]" />
           <AccountAvatar mt1 w-12 h-12 :account="status.account" />
+        </div>
+      </div>
       <div flex="~ col 1">
         <div flex>
           <StatusAccountDetails :account="status.account" />