refactor: Improve Profile Badges layout and hierarchy

Feed view:
- Badge count now appears as clickable title
- Thumbnails displayed below title in separate row
- Better visual hierarchy and clearer affordance

Detail view:
- Increase badge images from size-16 to size-24
- Remove "Awarded by" label, show issuer directly
- Cleaner, more prominent badge presentation

src/components/nostr/kinds/ProfileBadgesDetailRenderer.tsx

@@ -76,22 +76,23 @@ function BadgeRow({
         <img
           src={badgeImageUrl}
           alt={displayTitle}
-          className="size-16 rounded-lg object-cover flex-shrink-0"
+          className="size-24 rounded-lg object-cover flex-shrink-0"
           loading="lazy"
         />
       ) : (
-        <div className="size-16 rounded-lg bg-muted flex items-center justify-center flex-shrink-0">
-          <Award className="size-8 text-muted-foreground" />
+        <div className="size-24 rounded-lg bg-muted flex items-center justify-center flex-shrink-0">
+          <Award className="size-12 text-muted-foreground" />
         </div>
       )}
 
       {/* Badge Info */}
       <div className="flex flex-col gap-2 flex-1 min-w-0">
-        {/* Awarded by */}
-        <div className="flex items-center gap-2">
-          <span className="text-xs text-muted-foreground">Awarded by</span>
-          {awardEvent && <UserName pubkey={awardEvent.pubkey} />}
-        </div>
+        {/* Issuer */}
+        {awardEvent && (
+          <div className="text-xs">
+            <UserName pubkey={awardEvent.pubkey} />
+          </div>
+        )}
 
         {/* Badge Name */}
         {badgeEvent ? (

src/components/nostr/kinds/ProfileBadgesRenderer.tsx

@@ -92,20 +92,22 @@ export function ProfileBadgesRenderer({ event }: BaseEventProps) {
 
   return (
     <BaseEventContainer event={event}>
-      <ClickableEventTitle
-        event={event}
-        className="flex items-center gap-2 flex-wrap hover:opacity-80 transition-opacity"
-      >
-        {/* All Badge Thumbnails */}
-        {badgePairs.map((pair, idx) => (
-          <BadgeItem key={idx} badgeAddress={pair.badgeAddress} />
-        ))}
-
-        {/* Badge Count */}
-        <span className="text-sm text-muted-foreground ml-1">
+      <div className="flex flex-col gap-2">
+        {/* Badge Count - Clickable Title */}
+        <ClickableEventTitle
+          event={event}
+          className="text-sm font-semibold text-foreground hover:text-foreground/80"
+        >
           {badgePairs.length} {badgePairs.length === 1 ? "badge" : "badges"}
-        </span>
-      </ClickableEventTitle>
+        </ClickableEventTitle>
+
+        {/* All Badge Thumbnails */}
+        <div className="flex items-center gap-2 flex-wrap">
+          {badgePairs.map((pair, idx) => (
+            <BadgeItem key={idx} badgeAddress={pair.badgeAddress} />
+          ))}
+        </div>
+      </div>
     </BaseEventContainer>
   );
 }