ui: hover card ui

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"
   >

components/account/AccountHeader.vue

@@ -115,17 +115,7 @@ watchEffect(() => {
           <ContentRich text-sm filter-saturate-0 :content="field.value" />
         </div>
       </div>
-      <div flex gap-5>
+      <AccountPostsFollowers :account="account" />
-        <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>
     </div>
   </div>
 </template>

components/account/AccountHoverCard.vue

@@ -7,21 +7,14 @@ defineProps<{
 </script>
 
 <template>
-  <div rounded w-80 z-900 overflow-hidden p-4>
+  <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" />
-    <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
       </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>

components/account/AccountLink.vue

@@ -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>

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>