From d2c4d62cf5611083a829165bbe24cde09453c443 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 29 Nov 2022 01:24:39 +0800
Subject: [PATCH] feat: add hover card for user list

---
 components/account/AccountCard.vue         | 7 ++++++-
 components/account/AccountHoverWrapper.vue | 4 +++-
 components/account/AccountInfo.vue         | 5 ++++-
 components/account/AccountPaginator.vue    | 1 +
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/account/AccountCard.vue b/components/account/AccountCard.vue
index d711c03e..e870e984 100644
--- a/components/account/AccountCard.vue
+++ b/components/account/AccountCard.vue
@@ -3,6 +3,7 @@ import type { Account } from 'masto'
 
 const { account } = defineProps<{
   account: Account
+  hoverCard?: boolean
 }>()
 
 cacheAccount(account)
@@ -10,7 +11,11 @@ cacheAccount(account)
 
 <template>
   <div flex justify-between hover:bg-active transition-100>
-    <AccountInfo :account="account" hover p1 as="router-link" :to="getAccountPath(account)" />
+    <AccountInfo
+      :account="account" hover p1 as="router-link"
+      :hover-card="hoverCard"
+      :to="getAccountPath(account)"
+    />
     <div h-full p1>
       <AccountFollowButton :account="account" />
     </div>
diff --git a/components/account/AccountHoverWrapper.vue b/components/account/AccountHoverWrapper.vue
index 3999a174..ee9d6287 100644
--- a/components/account/AccountHoverWrapper.vue
+++ b/components/account/AccountHoverWrapper.vue
@@ -3,14 +3,16 @@ import type { Account } from 'masto'
 
 defineProps<{
   account: Account
+  disabled?: boolean
 }>()
 </script>
 
 <template>
-  <VMenu placement="bottom-start" :delay="{ show: 500, hide: 100 }">
+  <VMenu v-if="!disabled" placement="bottom-start" :delay="{ show: 500, hide: 100 }">
     <slot />
     <template #popper>
       <AccountHoverCard :account="account" />
     </template>
   </VMenu>
+  <slot v-else />
 </template>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 6fdd7f10..39e50c63 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -4,6 +4,7 @@ import type { Account } from 'masto'
 const { account, as = 'div' } = defineProps<{
   account: Account
   as?: string
+  hoverCard?: boolean
 }>()
 
 defineOptions({
@@ -15,7 +16,9 @@ defineOptions({
 <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
 <template>
   <component :is="as" flex gap-3 v-bind="$attrs">
-    <AccountAvatar :account="account" w-12 h-12 />
+    <AccountHoverWrapper :disabled="!hoverCard" :account="account">
+      <AccountAvatar :account="account" w-12 h-12 />
+    </AccountHoverWrapper>
     <div flex="~ col">
       <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" text-sm />
diff --git a/components/account/AccountPaginator.vue b/components/account/AccountPaginator.vue
index faaabde7..bc3bc677 100644
--- a/components/account/AccountPaginator.vue
+++ b/components/account/AccountPaginator.vue
@@ -11,6 +11,7 @@ const { paginator } = defineProps<{
     <template #default="{ item }">
       <AccountCard
         :account="item"
+        hover-card
         border="b base" py2 px4
       />
     </template>