From d883220c93a72ec29d70e05388c3c7f47e8472be Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Thu, 7 Nov 2024 22:30:32 +0800
Subject: [PATCH] style: make minor adjustments to styling

---
 .../components/Embedded/EmbeddedMention.tsx   |  2 +-
 src/renderer/src/components/Nip05/index.tsx   | 31 ++++++++++---------
 .../components/NoteCard/ShortTextNoteCard.tsx |  6 ++--
 .../src/components/NoteStats/LikeButton.tsx   |  8 +++--
 .../src/components/NoteStats/RepostButton.tsx |  4 +--
 .../src/components/ReplyNote/index.tsx        |  6 ++--
 .../src/components/Username/index.tsx         |  2 +-
 7 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/components/Embedded/EmbeddedMention.tsx b/src/renderer/src/components/Embedded/EmbeddedMention.tsx
index e1049bf3..1af0b227 100644
--- a/src/renderer/src/components/Embedded/EmbeddedMention.tsx
+++ b/src/renderer/src/components/Embedded/EmbeddedMention.tsx
@@ -1,5 +1,5 @@
 import Username from '../Username'
 
 export function EmbeddedMention({ userId }: { userId: string }) {
-  return <Username userId={userId} showAt className="text-highlight font-normal" />
+  return <Username userId={userId} showAt className="text-highlight font-normal inline-block" />
 }
diff --git a/src/renderer/src/components/Nip05/index.tsx b/src/renderer/src/components/Nip05/index.tsx
index 39f6b936..887a5560 100644
--- a/src/renderer/src/components/Nip05/index.tsx
+++ b/src/renderer/src/components/Nip05/index.tsx
@@ -4,19 +4,22 @@ import { BadgeAlert, BadgeCheck } from 'lucide-react'
 export default function Nip05({ nip05, pubkey }: { nip05: string; pubkey: string }) {
   const { nip05IsVerified, nip05Name, nip05Domain } = useFetchNip05(nip05, pubkey)
   return (
-    <div className="flex items-center space-x-1">
-      {nip05Name !== '_' ? (
-        <div className="text-sm text-muted-foreground truncate">@{nip05Name}</div>
-      ) : null}
-      <a
-        href={`https://${nip05Domain}`}
-        target="_blank"
-        className={`flex items-center space-x-1 hover:underline ${nip05IsVerified ? 'text-highlight' : 'text-muted-foreground'}`}
-        rel="noreferrer"
-      >
-        {nip05IsVerified ? <BadgeCheck size={16} /> : <BadgeAlert size={16} />}
-        <div className="text-sm">{nip05Domain}</div>
-      </a>
-    </div>
+    nip05Name &&
+    nip05Domain && (
+      <div className="flex items-center space-x-1">
+        {nip05Name !== '_' ? (
+          <div className="text-sm text-muted-foreground truncate">@{nip05Name}</div>
+        ) : null}
+        <a
+          href={`https://${nip05Domain}`}
+          target="_blank"
+          className={`flex items-center space-x-1 hover:underline ${nip05IsVerified ? 'text-highlight' : 'text-muted-foreground'}`}
+          rel="noreferrer"
+        >
+          {nip05IsVerified ? <BadgeCheck size={16} /> : <BadgeAlert size={16} />}
+          <div className="text-sm">{nip05Domain}</div>
+        </a>
+      </div>
+    )
   )
 }
diff --git a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
index 61899fd0..ddbce121 100644
--- a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
+++ b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
@@ -9,7 +9,7 @@ import { getParentEventId, getRootEventId } from '@renderer/lib/event'
 export default function ShortTextNoteCard({
   event,
   className,
-  size,
+  size = 'normal',
   hideStats = false
 }: {
   event: Event
@@ -29,7 +29,9 @@ export default function ShortTextNoteCard({
         push(toNote(rootEvent ?? event))
       }}
     >
-      <Card className="p-4 hover:bg-muted/50 text-left cursor-pointer">
+      <Card
+        className={`hover:bg-muted/50 text-left cursor-pointer ${size === 'normal' ? 'p-4' : 'p-2'}`}
+      >
         <Note
           size={size}
           event={event}
diff --git a/src/renderer/src/components/NoteStats/LikeButton.tsx b/src/renderer/src/components/NoteStats/LikeButton.tsx
index 5eec347c..d4ef0b56 100644
--- a/src/renderer/src/components/NoteStats/LikeButton.tsx
+++ b/src/renderer/src/components/NoteStats/LikeButton.tsx
@@ -3,7 +3,7 @@ import { cn } from '@renderer/lib/utils'
 import { useNostr } from '@renderer/providers/NostrProvider'
 import { useNoteStats } from '@renderer/providers/NoteStatsProvider'
 import client from '@renderer/services/client.service'
-import { Heart } from 'lucide-react'
+import { Heart, Loader } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useEffect, useMemo, useState } from 'react'
 import { formatCount } from './utils'
@@ -74,7 +74,11 @@ export default function LikeButton({
       disabled={!canLike}
       title="like"
     >
-      <Heart size={16} className={hasLiked ? 'fill-red-400' : ''} />
+      {liking ? (
+        <Loader className="animate-spin" size={16} />
+      ) : (
+        <Heart size={16} className={hasLiked ? 'fill-red-400' : ''} />
+      )}
       <div className="text-xs">{formatCount(likeCount)}</div>
     </button>
   )
diff --git a/src/renderer/src/components/NoteStats/RepostButton.tsx b/src/renderer/src/components/NoteStats/RepostButton.tsx
index 88b3578c..42de65e3 100644
--- a/src/renderer/src/components/NoteStats/RepostButton.tsx
+++ b/src/renderer/src/components/NoteStats/RepostButton.tsx
@@ -14,7 +14,7 @@ import { cn } from '@renderer/lib/utils'
 import { useNostr } from '@renderer/providers/NostrProvider'
 import { useNoteStats } from '@renderer/providers/NoteStatsProvider'
 import client from '@renderer/services/client.service'
-import { Repeat } from 'lucide-react'
+import { Loader, Repeat } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useEffect, useMemo, useState } from 'react'
 import { formatCount } from './utils'
@@ -85,7 +85,7 @@ export default function RepostButton({
           disabled={!canRepost}
           title="repost"
         >
-          <Repeat size={16} />
+          {reposting ? <Loader className="animate-spin" size={16} /> : <Repeat size={16} />}
           <div className="text-xs">{formatCount(repostCount)}</div>
         </button>
       </AlertDialogTrigger>
diff --git a/src/renderer/src/components/ReplyNote/index.tsx b/src/renderer/src/components/ReplyNote/index.tsx
index 215a54c6..ff403ca6 100644
--- a/src/renderer/src/components/ReplyNote/index.tsx
+++ b/src/renderer/src/components/ReplyNote/index.tsx
@@ -22,12 +22,12 @@ export default function ReplyNote({
     >
       <UserAvatar userId={event.pubkey} size="small" className="shrink-0" />
       <div className="w-full overflow-hidden">
-        <div className="flex gap-1 items-end">
+        <div className="flex items-end gap-2">
           <Username
             userId={event.pubkey}
-            className="text-xs font-semibold text-muted-foreground hover:text-foreground truncate"
+            className="text-sm font-semibold text-muted-foreground hover:text-foreground truncate"
           />
-          <div className="text-xs text-muted-foreground shrink-0">
+          <div className="text-xs text-muted-foreground shrink-0 -top-[1px] relative">
             {formatTimestamp(event.created_at)}
           </div>
         </div>
diff --git a/src/renderer/src/components/Username/index.tsx b/src/renderer/src/components/Username/index.tsx
index 59343f74..99d362a4 100644
--- a/src/renderer/src/components/Username/index.tsx
+++ b/src/renderer/src/components/Username/index.tsx
@@ -20,7 +20,7 @@ export default function Username({
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <div className={cn('inline-block', className)}>
+        <div className={className}>
           <SecondaryPageLink
             to={toProfile(pubkey)}
             className={cn('truncate hover:underline')}