From 410d41a0a818ba67d1ea8aff415fe55d0752f6ac Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Fri, 25 Nov 2022 03:21:53 -0500
Subject: [PATCH] feat: add account hover card (#80)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---
 components/account/AccountHoverCard.vue | 33 +++++++++++++++++++++++++
 components/status/StatusCard.vue        |  7 +++++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 components/account/AccountHoverCard.vue

diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
new file mode 100644
index 00000000..aefcd703
--- /dev/null
+++ b/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>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 28a95bb9..c93cd1fd 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -79,7 +79,12 @@ const timeago = useTimeAgo(() => status.createdAt, {
       </div>
     </div>
     <div flex gap-4>
-      <AccountAvatar mt1 w-12 h-12 :account="status.account" />
+      <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" />