diff --git a/package-lock.json b/package-lock.json index abd2db3..6ef4afb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,6 +50,7 @@ "dexie-react-hooks": "^4.2.0", "flexsearch": "^0.8.212", "framer-motion": "^12.23.26", + "hash-sum": "^2.0.0", "hls-video-element": "^1.5.10", "hls.js": "^1.6.15", "jotai": "^2.15.2", diff --git a/package.json b/package.json index 494749e..4a13e62 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "dexie-react-hooks": "^4.2.0", "flexsearch": "^0.8.212", "framer-motion": "^12.23.26", + "hash-sum": "^2.0.0", "hls-video-element": "^1.5.10", "hls.js": "^1.6.15", "jotai": "^2.15.2", diff --git a/src/components/nostr/kinds/BadgeAwardRenderer.tsx b/src/components/nostr/kinds/BadgeAwardRenderer.tsx index dc48e56..abef1fc 100644 --- a/src/components/nostr/kinds/BadgeAwardRenderer.tsx +++ b/src/components/nostr/kinds/BadgeAwardRenderer.tsx @@ -72,11 +72,11 @@ export function BadgeAwardRenderer({ event }: BaseEventProps) { {displayTitle} ) : ( - + )} {/* Badge Name - linked to badge event */} @@ -96,7 +96,7 @@ export function BadgeAwardRenderer({ event }: BaseEventProps) { {/* Awarded count/name - linked to this award event */} awarded to {recipientCount === 1 ? ( diff --git a/src/components/nostr/kinds/ProfileBadgesDetailRenderer.tsx b/src/components/nostr/kinds/ProfileBadgesDetailRenderer.tsx new file mode 100644 index 0000000..367ca0f --- /dev/null +++ b/src/components/nostr/kinds/ProfileBadgesDetailRenderer.tsx @@ -0,0 +1,169 @@ +import { NostrEvent } from "@/types/nostr"; +import { getProfileBadgePairs } from "@/lib/nip58-helpers"; +import { use$ } from "applesauce-react/hooks"; +import eventStore from "@/services/event-store"; +import { AddressPointer } from "nostr-tools/nip19"; +import { + getBadgeName, + getBadgeIdentifier, + getBadgeDescription, + getBadgeImageUrl, +} from "@/lib/nip58-helpers"; +import { Award } from "lucide-react"; +import { UserName } from "../UserName"; +import { ClickableEventTitle } from "./BaseEventRenderer"; + +interface ProfileBadgesDetailRendererProps { + event: NostrEvent; +} + +/** + * Parse an address pointer from an a tag value + * Format: "kind:pubkey:identifier" + */ +function parseAddress(aTagValue: string): AddressPointer | null { + const parts = aTagValue.split(":"); + if (parts.length !== 3) return null; + + const kind = parseInt(parts[0], 10); + const pubkey = parts[1]; + const identifier = parts[2]; + + if (isNaN(kind) || !pubkey || identifier === undefined) return null; + + return { kind, pubkey, identifier }; +} + +/** + * Single badge card component with image, name, and description + */ +function BadgeCard({ + badgeAddress, + awardEventId, +}: { + badgeAddress: string; + awardEventId: string; +}) { + const coordinate = parseAddress(badgeAddress); + + // Fetch the badge definition event + const badgeEvent = use$( + () => + coordinate + ? eventStore.replaceable( + coordinate.kind, + coordinate.pubkey, + coordinate.identifier, + ) + : undefined, + [coordinate?.kind, coordinate?.pubkey, coordinate?.identifier], + ); + + // Fetch the award event + const awardEvent = use$(() => eventStore.event(awardEventId), [awardEventId]); + + const badgeName = badgeEvent ? getBadgeName(badgeEvent) : null; + const badgeIdentifier = badgeEvent ? getBadgeIdentifier(badgeEvent) : null; + const badgeDescription = badgeEvent ? getBadgeDescription(badgeEvent) : null; + const badgeImageUrl = badgeEvent ? getBadgeImageUrl(badgeEvent) : null; + + const displayTitle = badgeName || badgeIdentifier || "Badge"; + + return ( +
+ {/* Badge Image */} +
+ {badgeImageUrl ? ( + {displayTitle} + ) : ( +
+ +
+ )} +
+ + {/* Badge Info */} +
+ {badgeEvent ? ( + + {displayTitle} + + ) : ( +

+ {displayTitle} +

+ )} + + {badgeDescription && ( +

+ {badgeDescription} +

+ )} +
+ + {/* Award Info */} + {awardEvent && ( +
+

+ Awarded by +

+
+ +
+
+ )} +
+ ); +} + +/** + * Detail renderer for Kind 30008 - Profile Badges (NIP-58) + * Shows all badges in a grid layout + */ +export function ProfileBadgesDetailRenderer({ + event, +}: ProfileBadgesDetailRendererProps) { + const badgePairs = getProfileBadgePairs(event); + + return ( +
+ {/* Header */} +
+

Profile Badges

+
+ + • + + {badgePairs.length} {badgePairs.length === 1 ? "badge" : "badges"} + +
+
+ + {/* Badges Grid */} + {badgePairs.length > 0 ? ( +
+ {badgePairs.map((pair, idx) => ( + + ))} +
+ ) : ( +
+ +

No badges to display

+
+ )} +
+ ); +} diff --git a/src/components/nostr/kinds/ProfileBadgesRenderer.tsx b/src/components/nostr/kinds/ProfileBadgesRenderer.tsx new file mode 100644 index 0000000..c0c777b --- /dev/null +++ b/src/components/nostr/kinds/ProfileBadgesRenderer.tsx @@ -0,0 +1,117 @@ +import { + BaseEventContainer, + BaseEventProps, + ClickableEventTitle, +} from "./BaseEventRenderer"; +import { getProfileBadgePairs } from "@/lib/nip58-helpers"; +import { use$ } from "applesauce-react/hooks"; +import eventStore from "@/services/event-store"; +import { AddressPointer } from "nostr-tools/nip19"; +import { + getBadgeName, + getBadgeIdentifier, + getBadgeImageUrl, +} from "@/lib/nip58-helpers"; +import { Award } from "lucide-react"; + +/** + * Parse an address pointer from an a tag value + * Format: "kind:pubkey:identifier" + */ +function parseAddress(aTagValue: string): AddressPointer | null { + const parts = aTagValue.split(":"); + if (parts.length !== 3) return null; + + const kind = parseInt(parts[0], 10); + const pubkey = parts[1]; + const identifier = parts[2]; + + if (isNaN(kind) || !pubkey || identifier === undefined) return null; + + return { kind, pubkey, identifier }; +} + +/** + * Single badge display component for feed view + */ +function BadgeItem({ badgeAddress }: { badgeAddress: string }) { + const coordinate = parseAddress(badgeAddress); + + // Fetch the badge event + const badgeEvent = use$( + () => + coordinate + ? eventStore.replaceable( + coordinate.kind, + coordinate.pubkey, + coordinate.identifier, + ) + : undefined, + [coordinate?.kind, coordinate?.pubkey, coordinate?.identifier], + ); + + const badgeName = badgeEvent ? getBadgeName(badgeEvent) : null; + const badgeIdentifier = badgeEvent ? getBadgeIdentifier(badgeEvent) : null; + const badgeImageUrl = badgeEvent ? getBadgeImageUrl(badgeEvent) : null; + + const displayTitle = badgeName || badgeIdentifier || "Badge"; + + return ( +
+ {badgeImageUrl ? ( + {displayTitle} + ) : ( + + )} +
+ ); +} + +/** + * Renderer for Kind 30008 - Profile Badges (NIP-58) + * Shows a few badges with "and N others" pattern + */ +export function ProfileBadgesRenderer({ event }: BaseEventProps) { + const badgePairs = getProfileBadgePairs(event); + const MAX_VISIBLE = 4; + const visibleBadges = badgePairs.slice(0, MAX_VISIBLE); + const remainingCount = Math.max(0, badgePairs.length - MAX_VISIBLE); + + if (badgePairs.length === 0) { + return ( + +
+ + No badges +
+ + ); + } + + return ( + +
+ {/* Badge Icons */} +
+ {visibleBadges.map((pair, idx) => ( + + ))} +
+ + {/* Badge Count */} + + {badgePairs.length} {badgePairs.length === 1 ? "badge" : "badges"} + {remainingCount > 0 && ` (${remainingCount} more)`} + +
+ + ); +} diff --git a/src/components/nostr/kinds/index.tsx b/src/components/nostr/kinds/index.tsx index 5fabfc0..1a8396e 100644 --- a/src/components/nostr/kinds/index.tsx +++ b/src/components/nostr/kinds/index.tsx @@ -146,6 +146,8 @@ import { BadgeDefinitionRenderer } from "./BadgeDefinitionRenderer"; import { BadgeDefinitionDetailRenderer } from "./BadgeDefinitionDetailRenderer"; import { BadgeAwardRenderer } from "./BadgeAwardRenderer"; import { BadgeAwardDetailRenderer } from "./BadgeAwardDetailRenderer"; +import { ProfileBadgesRenderer } from "./ProfileBadgesRenderer"; +import { ProfileBadgesDetailRenderer } from "./ProfileBadgesDetailRenderer"; /** * Registry of kind-specific renderers @@ -205,6 +207,7 @@ const kindRenderers: Record> = { 30005: VideoCurationSetRenderer, // Video Curation Sets (NIP-51) 30006: PictureCurationSetRenderer, // Picture Curation Sets (NIP-51) 30007: KindMuteSetRenderer, // Kind Mute Sets (NIP-51) + 30008: ProfileBadgesRenderer, // Profile Badges (NIP-58) 30009: BadgeDefinitionRenderer, // Badge (NIP-58) 30015: InterestSetRenderer, // Interest Sets (NIP-51) 30023: Kind30023Renderer, // Long-form Article @@ -300,6 +303,7 @@ const detailRenderers: Record< 30005: VideoCurationSetDetailRenderer, // Video Curation Sets Detail (NIP-51) 30006: PictureCurationSetDetailRenderer, // Picture Curation Sets Detail (NIP-51) 30007: KindMuteSetDetailRenderer, // Kind Mute Sets Detail (NIP-51) + 30008: ProfileBadgesDetailRenderer, // Profile Badges Detail (NIP-58) 30009: BadgeDefinitionDetailRenderer, // Badge Detail (NIP-58) 30015: InterestSetDetailRenderer, // Interest Sets Detail (NIP-51) 30023: Kind30023DetailRenderer, // Long-form Article Detail diff --git a/src/lib/nip58-helpers.ts b/src/lib/nip58-helpers.ts index 1b36102..e2bc4d5 100644 --- a/src/lib/nip58-helpers.ts +++ b/src/lib/nip58-helpers.ts @@ -93,3 +93,33 @@ export function getAwardBadgeAddress( ): string | undefined { return getTagValue(awardEvent, "a"); } + +/** + * Badge pair from Profile Badges event (kind 30008) + * Contains references to both the badge definition and the award event + */ +export interface BadgePair { + badgeAddress: string; // a tag - references badge definition (30009:pubkey:identifier) + awardEventId: string; // e tag - references award event (kind 8) +} + +/** + * Extract ordered badge pairs from Profile Badges event (kind 30008) + * Returns pairs of (badge definition address, award event id) + */ +export function getProfileBadgePairs(event: NostrEvent): BadgePair[] { + const pairs: BadgePair[] = []; + const aTags = event.tags.filter((tag) => tag[0] === "a" && tag[1]); + const eTags = event.tags.filter((tag) => tag[0] === "e" && tag[1]); + + // Pair them up in order - each a tag should have a corresponding e tag + const minLength = Math.min(aTags.length, eTags.length); + for (let i = 0; i < minLength; i++) { + pairs.push({ + badgeAddress: aTags[i][1], + awardEventId: eTags[i][1], + }); + } + + return pairs; +}