From 0843878a42c8aa1b949d81615835d4b4006b9e8a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 28 Nov 2022 17:51:15 +0800
Subject: [PATCH] ui: hover card ui

---
 components/account/AccountFollowButton.vue   |  2 +-
 components/account/AccountHeader.vue         | 12 +----------
 components/account/AccountHoverCard.vue      | 19 ++++++------------
 components/account/AccountLink.vue           | 13 ------------
 components/account/AccountPostsFollowers.vue | 21 ++++++++++++++++++++
 5 files changed, 29 insertions(+), 38 deletions(-)
 delete mode 100644 components/account/AccountLink.vue
 create mode 100644 components/account/AccountPostsFollowers.vue

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index e53b6aa0..d8ac2558 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -22,7 +22,7 @@ async function toggleFollow() {
 
 <template>
   <button
-    v-if="!isSelf && relationship"
+    v-if="!isSelf"
     flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group
     @click="toggleFollow"
   >
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 68a5d8ec..77f0b835 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -115,17 +115,7 @@ watchEffect(() => {
           <ContentRich text-sm filter-saturate-0 :content="field.value" />
         </div>
       </div>
-      <div flex gap-5>
-        <NuxtLink :to="getAccountPath(account)" exact-active-class="text-primary">
-          <span font-bold>{{ formattedNumber(account.statusesCount) }}</span> <span text-secondary>Posts</span>
-        </NuxtLink>
-        <NuxtLink :to="`${getAccountPath(account)}/following`" exact-active-class="text-primary">
-          <span font-bold>{{ humanReadableNumber(account.followingCount) }}</span> <span text-secondary>Following</span>
-        </NuxtLink>
-        <NuxtLink :to="`${getAccountPath(account)}/followers`" exact-active-class="text-primary">
-          <span font-bold>{{ humanReadableNumber(account.followersCount) }}</span> <span text-secondary>Followers</span>
-        </NuxtLink>
-      </div>
+      <AccountPostsFollowers :account="account" />
     </div>
   </div>
 </template>
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index d1099948..2aeab081 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -7,21 +7,14 @@ defineProps<{
 </script>
 
 <template>
-  <div rounded w-80 z-900 overflow-hidden p-4>
-    <AccountInfo :account="account" />
-    <div text-sm flex flex-row text-secondary mt-4>
-      <NuxtLink :to="`/${getFullHandle(account)}/`">
-        {{ formattedNumber(account.statusesCount) }} Posts
-      </NuxtLink>
-      <span flex-1 text-center> • </span>
-      <NuxtLink :to="`/${getFullHandle(account)}/following`">
-        {{ humanReadableNumber(account.followingCount) }} Following
-      </NuxtLink>
-      <span flex-1 text-center> • </span>
-      <NuxtLink :to="`/${getFullHandle(account)}/followers`">
-        {{ humanReadableNumber(account.followersCount) }} Followers
+  <div flex="~ col gap2" rounded w-100 z-900 overflow-hidden p-4>
+    <div flex="~ gap2" items-center>
+      <NuxtLink :to="getAccountPath(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
+        <AccountInfo :account="account" />
       </NuxtLink>
+      <AccountFollowButton text-sm :account="account" />
     </div>
     <ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
+    <AccountPostsFollowers text-sm :account="account" />
   </div>
 </template>
diff --git a/components/account/AccountLink.vue b/components/account/AccountLink.vue
deleted file mode 100644
index 8333d368..00000000
--- a/components/account/AccountLink.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import type { Account } from 'masto'
-
-defineProps<{
-  account: Account
-}>()
-</script>
-
-<template>
-  <NuxtLink :to="getAccountPath(account)">
-    <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
-  </NuxtLink>
-</template>
diff --git a/components/account/AccountPostsFollowers.vue b/components/account/AccountPostsFollowers.vue
new file mode 100644
index 00000000..555301bf
--- /dev/null
+++ b/components/account/AccountPostsFollowers.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <div flex gap-5>
+    <NuxtLink :to="getAccountPath(account)" exact-active-class="text-primary">
+      <span font-bold>{{ formattedNumber(account.statusesCount) }}</span> <span text-secondary>Posts</span>
+    </NuxtLink>
+    <NuxtLink :to="`${getAccountPath(account)}/following`" exact-active-class="text-primary">
+      <span font-bold>{{ humanReadableNumber(account.followingCount) }}</span> <span text-secondary>Following</span>
+    </NuxtLink>
+    <NuxtLink :to="`${getAccountPath(account)}/followers`" exact-active-class="text-primary">
+      <span font-bold>{{ humanReadableNumber(account.followersCount) }}</span> <span text-secondary>Followers</span>
+    </NuxtLink>
+  </div>
+</template>