diff --git a/src/components/nostr/kinds/BadgeDefinitionRenderer.tsx b/src/components/nostr/kinds/BadgeDefinitionRenderer.tsx index 7b29420..ec08050 100644 --- a/src/components/nostr/kinds/BadgeDefinitionRenderer.tsx +++ b/src/components/nostr/kinds/BadgeDefinitionRenderer.tsx @@ -7,35 +7,55 @@ import { getBadgeIdentifier, getBadgeName, getBadgeDescription, + getBadgeImageUrl, } from "@/lib/nip58-helpers"; +import { Award } from "lucide-react"; /** * Renderer for Kind 30009 - Badge (NIP-58) - * Simple feed view with name and description + * Feed view with image, name and description */ export function BadgeDefinitionRenderer({ event }: BaseEventProps) { const identifier = getBadgeIdentifier(event); const name = getBadgeName(event); const description = getBadgeDescription(event); + const imageUrl = getBadgeImageUrl(event); // Use name if available, fallback to identifier const displayTitle = name || identifier || "Badge"; return ( -
- - {displayTitle} - - - {description && ( -

- {description} -

+
+ {/* Badge Image */} + {imageUrl ? ( + {displayTitle} + ) : ( +
+ +
)} + + {/* Badge Info */} +
+ + {displayTitle} + + + {description && ( +

+ {description} +

+ )} +
); diff --git a/src/components/nostr/kinds/ProfileBadgesRenderer.tsx b/src/components/nostr/kinds/ProfileBadgesRenderer.tsx index f1ff6cf..5d09a65 100644 --- a/src/components/nostr/kinds/ProfileBadgesRenderer.tsx +++ b/src/components/nostr/kinds/ProfileBadgesRenderer.tsx @@ -74,10 +74,13 @@ function BadgeItem({ badgeAddress }: { badgeAddress: string }) { /** * Renderer for Kind 30008 - Profile Badges (NIP-58) - * Shows all badge thumbnails, clickable to open detail view + * Shows limited badge thumbnails with "& n more" pattern, clickable to open detail view */ export function ProfileBadgesRenderer({ event }: BaseEventProps) { const badgePairs = getProfileBadgePairs(event); + const MAX_VISIBLE_BADGES = 5; + const visibleBadges = badgePairs.slice(0, MAX_VISIBLE_BADGES); + const remainingCount = Math.max(0, badgePairs.length - MAX_VISIBLE_BADGES); if (badgePairs.length === 0) { return ( @@ -101,11 +104,16 @@ export function ProfileBadgesRenderer({ event }: BaseEventProps) { {badgePairs.length} {badgePairs.length === 1 ? "badge" : "badges"} - {/* All Badge Thumbnails */} + {/* Limited Badge Thumbnails */}
- {badgePairs.map((pair, idx) => ( + {visibleBadges.map((pair, idx) => ( ))} + {remainingCount > 0 && ( + + & {remainingCount} more + + )}
diff --git a/src/constants/kinds.ts b/src/constants/kinds.ts index cfbec7c..1d7480f 100644 --- a/src/constants/kinds.ts +++ b/src/constants/kinds.ts @@ -1096,8 +1096,8 @@ export const EVENT_KINDS: Record = { }, 30009: { kind: 30009, - name: "Badge Definition", - description: "Badge Definition", + name: "Badge", + description: "Badge", nip: "58", icon: Award, }, diff --git a/src/data/nostr-kinds-schema.yaml b/src/data/nostr-kinds-schema.yaml index 23672a9..710c530 100644 --- a/src/data/nostr-kinds-schema.yaml +++ b/src/data/nostr-kinds-schema.yaml @@ -1402,7 +1402,7 @@ kinds: - *etag 30009: - description: Badge Definition + description: Badge in_use: true content: type: free