feat: Add NIP-58 Profile Badges renderer (kind 30008)

- Add ProfileBadgesRenderer for feed view showing first 4 badges with count
- Add ProfileBadgesDetailRenderer for detail view showing all badges in grid
- Add getProfileBadgePairs helper to extract badge pairs from events
- Adjust BadgeAwardRenderer icon size from 6 to 5 and spacing to gap-1.5
- Register kind 30008 in both feed and detail renderer registries

Completes NIP-58 implementation with all three event types:
- Kind 8: Badge Awards
- Kind 30009: Badge Definitions
- Kind 30008: Profile Badges (this commit)

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",

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",

src/components/nostr/kinds/BadgeAwardRenderer.tsx

@@ -72,11 +72,11 @@ export function BadgeAwardRenderer({ event }: BaseEventProps) {
           <img
             src={badgeImageUrl}
             alt={displayTitle}
-            className="size-6 rounded object-cover flex-shrink-0"
+            className="size-5 rounded object-cover flex-shrink-0"
             loading="lazy"
           />
         ) : (
-          <Award className="size-6 text-muted-foreground flex-shrink-0" />
+          <Award className="size-5 text-muted-foreground flex-shrink-0" />
         )}
 
         {/* Badge Name - linked to badge event */}
@@ -96,7 +96,7 @@ export function BadgeAwardRenderer({ event }: BaseEventProps) {
         {/* Awarded count/name - linked to this award event */}
         <ClickableEventTitle
           event={event}
-          className="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+          className="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5"
         >
           <span>awarded to</span>
           {recipientCount === 1 ? (

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 (
+    <div className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-card hover:bg-muted/50 transition-colors">
+      {/* Badge Image */}
+      <div className="flex items-center justify-center">
+        {badgeImageUrl ? (
+          <img
+            src={badgeImageUrl}
+            alt={displayTitle}
+            className="size-20 rounded-lg object-cover"
+            loading="lazy"
+          />
+        ) : (
+          <div className="size-20 rounded-lg bg-muted flex items-center justify-center">
+            <Award className="size-10 text-muted-foreground" />
+          </div>
+        )}
+      </div>
+
+      {/* Badge Info */}
+      <div className="flex flex-col gap-1">
+        {badgeEvent ? (
+          <ClickableEventTitle
+            event={badgeEvent}
+            className="font-semibold text-foreground text-center line-clamp-2"
+          >
+            {displayTitle}
+          </ClickableEventTitle>
+        ) : (
+          <h3 className="font-semibold text-foreground text-center line-clamp-2">
+            {displayTitle}
+          </h3>
+        )}
+
+        {badgeDescription && (
+          <p className="text-xs text-muted-foreground text-center line-clamp-2">
+            {badgeDescription}
+          </p>
+        )}
+      </div>
+
+      {/* Award Info */}
+      {awardEvent && (
+        <div className="flex flex-col gap-1 pt-2 border-t border-border">
+          <p className="text-xs text-muted-foreground text-center">
+            Awarded by
+          </p>
+          <div className="flex justify-center">
+            <UserName pubkey={awardEvent.pubkey} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 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 (
+    <div className="flex flex-col gap-6 p-6 max-w-6xl mx-auto">
+      {/* Header */}
+      <div className="flex flex-col gap-2">
+        <h1 className="text-3xl font-bold">Profile Badges</h1>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <UserName pubkey={event.pubkey} />
+          <span>•</span>
+          <span>
+            {badgePairs.length} {badgePairs.length === 1 ? "badge" : "badges"}
+          </span>
+        </div>
+      </div>
+
+      {/* Badges Grid */}
+      {badgePairs.length > 0 ? (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {badgePairs.map((pair, idx) => (
+            <BadgeCard
+              key={idx}
+              badgeAddress={pair.badgeAddress}
+              awardEventId={pair.awardEventId}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center gap-4 py-12 text-muted-foreground">
+          <Award className="size-12" />
+          <p className="text-lg">No badges to display</p>
+        </div>
+      )}
+    </div>
+  );
+}

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 (
+    <div className="flex items-center gap-1.5" title={displayTitle}>
+      {badgeImageUrl ? (
+        <img
+          src={badgeImageUrl}
+          alt={displayTitle}
+          className="size-6 rounded object-cover flex-shrink-0"
+          loading="lazy"
+        />
+      ) : (
+        <Award className="size-6 text-muted-foreground flex-shrink-0" />
+      )}
+    </div>
+  );
+}
+
+/**
+ * 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 (
+      <BaseEventContainer event={event}>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Award className="size-5" />
+          <span>No badges</span>
+        </div>
+      </BaseEventContainer>
+    );
+  }
+
+  return (
+    <BaseEventContainer event={event}>
+      <div className="flex items-center gap-3 flex-wrap">
+        {/* Badge Icons */}
+        <div className="flex items-center gap-2">
+          {visibleBadges.map((pair, idx) => (
+            <BadgeItem key={idx} badgeAddress={pair.badgeAddress} />
+          ))}
+        </div>
+
+        {/* Badge Count */}
+        <ClickableEventTitle
+          event={event}
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          {badgePairs.length} {badgePairs.length === 1 ? "badge" : "badges"}
+          {remainingCount > 0 && ` (${remainingCount} more)`}
+        </ClickableEventTitle>
+      </div>
+    </BaseEventContainer>
+  );
+}

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<number, React.ComponentType<BaseEventProps>> = {
   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

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;
+}