style: make minor adjustments to styling

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

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 &&
-      {nip05Name !== '_' ? (
+    nip05Domain && (
-        <div className="text-sm text-muted-foreground truncate">@{nip05Name}</div>
+      <div className="flex items-center space-x-1">
-      ) : null}
+        {nip05Name !== '_' ? (
-      <a
+          <div className="text-sm text-muted-foreground truncate">@{nip05Name}</div>
-        href={`https://${nip05Domain}`}
+        ) : null}
-        target="_blank"
+        <a
-        className={`flex items-center space-x-1 hover:underline ${nip05IsVerified ? 'text-highlight' : 'text-muted-foreground'}`}
+          href={`https://${nip05Domain}`}
-        rel="noreferrer"
+          target="_blank"
-      >
+          className={`flex items-center space-x-1 hover:underline ${nip05IsVerified ? 'text-highlight' : 'text-muted-foreground'}`}
-        {nip05IsVerified ? <BadgeCheck size={16} /> : <BadgeAlert size={16} />}
+          rel="noreferrer"
-        <div className="text-sm">{nip05Domain}</div>
+        >
-      </a>
+          {nip05IsVerified ? <BadgeCheck size={16} /> : <BadgeAlert size={16} />}
-    </div>
+          <div className="text-sm">{nip05Domain}</div>
+        </a>
+      </div>
+    )
   )
 }

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}

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

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>

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>

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')}