From fcde653efe10fdf789c3080bb06e7498c046773d Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 12:45:26 +0800
Subject: [PATCH] ui: improve hover hint

---
 components/account/AccountHeader.vue | 7 ++++++-
 components/nav/NavSideItem.vue       | 2 +-
 components/status/StatusDetails.vue  | 8 ++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 2a3ed393..752a99f7 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -30,6 +30,7 @@ const fieldNameIcons: Record<string, string> = {
   instagram: 'i-ri:instagram-line',
   website: 'i-ri:link',
   site: 'i-ri:link',
+  portfolio: 'i-ri:link',
   blog: 'i-ri:newspaper-line',
   home: 'i-ri:home-2-line',
   sponsors: 'i-ri:heart-3-line',
@@ -37,6 +38,10 @@ const fieldNameIcons: Record<string, string> = {
   city: 'i-ri:map-pin-2-line',
   joined: 'i-ri:user-add-line',
   birth: 'i-ri:calendar-line',
+  tumblr: 'i-ri:tumblr-fill',
+  linkedin: 'i-ri:linkedin-box-fill',
+  facebook: 'i-ri:facebook-fill',
+  patreon: 'i-ri:patreon-fill',
 }
 
 function getFieldNameIcon(fieldName: string) {
@@ -84,7 +89,7 @@ function previewAvatar() {
         <ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
       </div>
       <div flex flex-wrap gap-4>
-        <div v-for="field in fields" :key="field.name" flex="~ gap-1" items-center >
+        <div v-for="field in fields" :key="field.name" flex="~ gap-1" items-center>
           <div v-if="getFieldNameIcon(field.name)" text-secondary :class="getFieldNameIcon(field.name)" :title="field.name" />
           <div v-else text-secondary uppercase text-xs font-bold>
             {{ field.name }} |
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 8b0a63bd..3cd74785 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <NuxtLink :to="to" active-class="text-primary" group focus:outline-none>
-    <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
+    <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
       <slot name="icon">
         <div :class="icon" />
       </slot>
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 4dfd326a..ae0d854a 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -17,8 +17,12 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
 </script>
 
 <template>
-  <div flex flex-col gap-2 py3 px-4 :id="`status-${status.id}`">
-    <AccountInfo :account="status.account" :hover="true" />
+  <div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4>
+    <NuxtLink :to="getAccountPath(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
+      <AccountHoverWrapper :account="status.account">
+        <AccountInfo :account="status.account" />
+      </AccountHoverWrapper>
+    </NuxtLink>
     <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
     <StatusSpoiler :enabled="status.sensitive">
       <template #spoiler>