feat: improve account links feedback

components/account/AccountHoverCard.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card">
+  <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)}/`">

components/account/AccountHoverWrapper.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <VMenu placement="bottom-start">
+  <VMenu placement="bottom-start" :delay="{ show: 500, hide: 100 }">
     <slot />
     <template #popper>
       <AccountHoverCard :account="account" />

components/account/AccountInfo.vue

@@ -12,7 +12,7 @@ const { account } = defineProps<{
   <div flex gap-3>
     <AccountAvatar :account="account" w-12 h-12 />
     <div flex="~ col">
-      <ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+      <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" text-sm />
     </div>
   </div>

components/account/AccountInlineInfo.vue

@@ -8,8 +8,12 @@ const { link = true } = defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
+  <NuxtLink
+    :to="link ? getAccountPath(account) : undefined"
+    :class="link ? 'text-link-rounded' : ''"
+    min-w-0 flex gap-1 items-center
+  >
     <AccountAvatar :account="account" w-5 h-5 />
-    <ContentRich hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+    <ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
   </NuxtLink>
 </template>

components/status/StatusAccountDetails.vue

@@ -12,8 +12,9 @@ const { account, link = true } = defineProps<{
     <NuxtLink
       :to="link ? getAccountPath(account) : undefined"
       flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
+      text-link-rounded
     >
-      <ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+      <ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" />
     </NuxtLink>
   </AccountHoverWrapper>

components/status/StatusCard.vue

@@ -48,7 +48,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
     </div>
     <div flex gap-4>
       <div>
-        <NuxtLink :to="getAccountPath(status.account)">
+        <NuxtLink :to="getAccountPath(status.account)" rounded-full>
           <AccountAvatar w-12 h-12 :account="status.account" />
         </NuxtLink>
       </div>

components/status/StatusReplyingTo.vue

@@ -18,6 +18,5 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
     <div i-ri:reply-fill rotate-180 text-secondary-light class="mr-1.5" />
     <AccountInlineInfo v-if="account" :account="account" :link="false" />
     <span v-else>Someone</span>
-    's post
   </NuxtLink>
 </template>

unocss.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
       'bg-active': 'bg-$c-bg-active',
       'bg-code': 'bg-$c-bg-code',
 
-      // text
+      // text colors
       'text-base': 'text-$c-text-base',
       'text-secondary': 'text-$c-text-secondary',
       'text-secondary-light': 'text-$c-text-secondary-light',
@@ -31,6 +31,9 @@ export default defineConfig({
       'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
       'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',
 
+      // link
+      'text-link-rounded': 'focus:outline-none focus:ring-(2 primary inset) hover:bg-active rounded md:rounded-full px2 mx--2',
+
       // utils
       'flex-center': 'items-center justify-center',
       'flex-v-center': 'items-center',