feat: Add NIP-58 Badge Award renderers (kind 8)

Implement feed and detail renderers for Badge Award events that:
- Fetch and display badge metadata (thumbnail, name)
- Show recipient count in feed view ("Awarded to n people")
- Display full recipient list with usernames in detail view
- Link badge thumbnail and name to the badge event (kind 30009)
- Support award comments in detail view

Technical details:
- Parse badge address from "a" tag (30009:pubkey:identifier format)
- Fetch badge event reactively using eventStore.replaceable
- Use AddressPointer from nostr-tools/nip19 for type safety
- Register kind 8 in both feed and detail renderer registries

Also updates all "badge definition" terminology to just "badge"
in code comments for consistency with user-facing strings.

src/components/nostr/kinds/BadgeAwardDetailRenderer.tsx

@@ -0,0 +1,139 @@
+import { NostrEvent } from "@/types/nostr";
+import { getAwardBadgeAddress, getAwardedPubkeys } 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 { UserName } from "../UserName";
+import { Award } from "lucide-react";
+import { ClickableEventTitle } from "./BaseEventRenderer";
+
+interface BadgeAwardDetailRendererProps {
+  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 };
+}
+
+/**
+ * Detail renderer for Kind 8 - Badge Award (NIP-58)
+ * Shows badge information and list of recipients
+ */
+export function BadgeAwardDetailRenderer({
+  event,
+}: BadgeAwardDetailRendererProps) {
+  const badgeAddress = getAwardBadgeAddress(event);
+  const awardedPubkeys = getAwardedPubkeys(event);
+
+  // Parse the badge address (30009:pubkey:identifier)
+  const coordinate = badgeAddress ? parseAddress(badgeAddress) : null;
+
+  // Fetch the badge event
+  const badgeEvent = use$(
+    () =>
+      coordinate
+        ? eventStore.replaceable(
+            coordinate.kind,
+            coordinate.pubkey,
+            coordinate.identifier,
+          )
+        : undefined,
+    [coordinate?.kind, coordinate?.pubkey, coordinate?.identifier],
+  );
+
+  // Get badge metadata
+  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 flex-col gap-6 p-6 max-w-4xl mx-auto">
+      {/* Badge Header */}
+      <div className="flex gap-4 items-start">
+        {/* Badge Image */}
+        {badgeImageUrl ? (
+          <img
+            src={badgeImageUrl}
+            alt={displayTitle}
+            className="size-24 rounded-lg object-cover flex-shrink-0"
+            loading="lazy"
+          />
+        ) : (
+          <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 Title */}
+        <div className="flex flex-col gap-2 flex-1 min-w-0">
+          {badgeEvent ? (
+            <ClickableEventTitle
+              event={badgeEvent}
+              className="text-2xl font-bold text-foreground"
+            >
+              {displayTitle}
+            </ClickableEventTitle>
+          ) : (
+            <h1 className="text-2xl font-bold">{displayTitle}</h1>
+          )}
+          <p className="text-sm text-muted-foreground">Badge Award</p>
+        </div>
+      </div>
+
+      {/* Metadata */}
+      <div className="flex flex-col gap-1">
+        <h3 className="text-sm text-muted-foreground">Issued By</h3>
+        <UserName pubkey={event.pubkey} />
+      </div>
+
+      {/* Recipients List */}
+      {awardedPubkeys.length > 0 && (
+        <div className="flex flex-col gap-3">
+          <h2 className="text-xl font-semibold">
+            Awarded to {awardedPubkeys.length}{" "}
+            {awardedPubkeys.length === 1 ? "Person" : "People"}
+          </h2>
+          <div className="flex flex-col gap-2">
+            {awardedPubkeys.map((pubkey) => (
+              <div
+                key={pubkey}
+                className="flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 transition-colors"
+              >
+                <Award className="size-4 text-muted-foreground flex-shrink-0" />
+                <UserName pubkey={pubkey} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Award Comment */}
+      {event.content && (
+        <div className="flex flex-col gap-2">
+          <h3 className="text-sm text-muted-foreground">Comment</h3>
+          <p className="text-sm">{event.content}</p>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/nostr/kinds/BadgeAwardRenderer.tsx

@@ -0,0 +1,106 @@
+import {
+  BaseEventContainer,
+  BaseEventProps,
+  ClickableEventTitle,
+} from "./BaseEventRenderer";
+import { getAwardBadgeAddress, getAwardedPubkeys } 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 };
+}
+
+/**
+ * Renderer for Kind 8 - Badge Award (NIP-58)
+ * Shows badge thumbnail, name, and number of recipients
+ */
+export function BadgeAwardRenderer({ event }: BaseEventProps) {
+  const badgeAddress = getAwardBadgeAddress(event);
+  const awardedPubkeys = getAwardedPubkeys(event);
+
+  // Parse the badge address (30009:pubkey:identifier)
+  const coordinate = badgeAddress ? parseAddress(badgeAddress) : null;
+
+  // Fetch the badge event
+  const badgeEvent = use$(
+    () =>
+      coordinate
+        ? eventStore.replaceable(
+            coordinate.kind,
+            coordinate.pubkey,
+            coordinate.identifier,
+          )
+        : undefined,
+    [coordinate?.kind, coordinate?.pubkey, coordinate?.identifier],
+  );
+
+  // Get badge metadata
+  const badgeName = badgeEvent ? getBadgeName(badgeEvent) : null;
+  const badgeIdentifier = badgeEvent ? getBadgeIdentifier(badgeEvent) : null;
+  const badgeImageUrl = badgeEvent ? getBadgeImageUrl(badgeEvent) : null;
+
+  const displayTitle = badgeName || badgeIdentifier || "Badge";
+  const recipientCount = awardedPubkeys.length;
+
+  return (
+    <BaseEventContainer event={event}>
+      <div className="flex gap-3 items-start">
+        {/* Badge Thumbnail */}
+        {badgeImageUrl ? (
+          <img
+            src={badgeImageUrl}
+            alt={displayTitle}
+            className="size-12 rounded-lg object-cover flex-shrink-0"
+            loading="lazy"
+          />
+        ) : (
+          <div className="size-12 rounded-lg bg-muted flex items-center justify-center flex-shrink-0">
+            <Award className="size-6 text-muted-foreground" />
+          </div>
+        )}
+
+        {/* Badge Info */}
+        <div className="flex flex-col gap-1 flex-1 min-w-0">
+          {badgeEvent ? (
+            <ClickableEventTitle
+              event={badgeEvent}
+              className="text-sm font-semibold text-foreground"
+            >
+              {displayTitle}
+            </ClickableEventTitle>
+          ) : (
+            <span className="text-sm font-semibold text-foreground">
+              {displayTitle}
+            </span>
+          )}
+
+          <p className="text-xs text-muted-foreground">
+            Awarded to {recipientCount}{" "}
+            {recipientCount === 1 ? "person" : "people"}
+          </p>
+        </div>
+      </div>
+    </BaseEventContainer>
+  );
+}

src/components/nostr/kinds/index.tsx

@@ -144,6 +144,8 @@ import { P2pOrderRenderer } from "./P2pOrderRenderer";
 import { P2pOrderDetailRenderer } from "./P2pOrderDetailRenderer";
 import { BadgeDefinitionRenderer } from "./BadgeDefinitionRenderer";
 import { BadgeDefinitionDetailRenderer } from "./BadgeDefinitionDetailRenderer";
+import { BadgeAwardRenderer } from "./BadgeAwardRenderer";
+import { BadgeAwardDetailRenderer } from "./BadgeAwardDetailRenderer";
 
 /**
  * Registry of kind-specific renderers
@@ -155,6 +157,7 @@ const kindRenderers: Record<number, React.ComponentType<BaseEventProps>> = {
   3: Kind3Renderer, // Contact List
   6: RepostRenderer, // Repost
   7: Kind7Renderer, // Reaction
+  8: BadgeAwardRenderer, // Badge Award (NIP-58)
   9: Kind9Renderer, // Chat Message (NIP-C7)
   11: Kind1Renderer, // Public Thread Reply (NIP-10)
   16: RepostRenderer, // Generic Repost
@@ -268,6 +271,7 @@ const detailRenderers: Record<
 > = {
   0: Kind0DetailRenderer, // Profile Metadata Detail
   3: Kind3DetailView, // Contact List Detail
+  8: BadgeAwardDetailRenderer, // Badge Award Detail (NIP-58)
   777: SpellDetailRenderer, // Spell Detail
   1337: Kind1337DetailRenderer, // Code Snippet Detail (NIP-C0)
   1617: PatchDetailRenderer, // Patch Detail (NIP-34)

src/lib/nip58-helpers.ts

@@ -9,7 +9,7 @@ import type { NostrEvent } from "nostr-tools";
  */
 
 /**
- * Get the unique identifier for a badge definition (d tag)
+ * Get the unique identifier for a badge (d tag)
  */
 export function getBadgeIdentifier(event: NostrEvent): string | undefined {
   return getTagValue(event, "d");
@@ -78,14 +78,14 @@ export function getBadgeImageUrl(event: NostrEvent): string | null {
 
 /**
  * Get all pubkeys awarded this badge (from kind 8 award events)
- * Note: This should be called on award events (kind 8), not badge definitions
+ * Note: This should be called on award events (kind 8), not badges (kind 30009)
  */
 export function getAwardedPubkeys(awardEvent: NostrEvent): string[] {
   return getTagValues(awardEvent, "p");
 }
 
 /**
- * Get the badge definition address referenced by an award event (kind 8)
+ * Get the badge address referenced by an award event (kind 8)
  * @returns The "a" tag value (e.g., "30009:pubkey:identifier")
  */
 export function getAwardBadgeAddress(