From 8a249f75396c86e1d3a5965ffa16633b214d94ca Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 16:43:33 +0000
Subject: [PATCH] refactor(nip-66): use nicer NIP rendering from RelayViewer in
 shared component

Update RelaySupportedNips component to match RelayViewer's nicer styling:
- Show NIP names alongside numbers (showName=true) for better readability
- Use gap-2 for better spacing
- Use h3 title styling instead of Label with icon
- Make component reusable with optional title customization
- Use in both RelayViewer and RelayDiscoveryDetailRenderer
---
 src/components/RelayViewer.tsx                | 17 +++---------
 src/components/nostr/RelaySupportedNips.tsx   | 26 +++++++++----------
 .../kinds/RelayDiscoveryDetailRenderer.tsx    |  7 ++++-
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/RelayViewer.tsx b/src/components/RelayViewer.tsx
index 6e50325..44f1ce6 100644
--- a/src/components/RelayViewer.tsx
+++ b/src/components/RelayViewer.tsx
@@ -3,7 +3,7 @@ import { useRelayInfo } from "../hooks/useRelayInfo";
 import { useCopy } from "../hooks/useCopy";
 import { Button } from "./ui/button";
 import { UserName } from "./nostr/UserName";
-import { NIPBadge } from "./NIPBadge";
+import { RelaySupportedNips } from "./nostr/RelaySupportedNips";
 
 export interface RelayViewerProps {
   url: string;
@@ -68,19 +68,8 @@ export function RelayViewer({ url }: RelayViewerProps) {
       )}
 
       {/* Supported NIPs */}
-      {info?.supported_nips && info.supported_nips.length > 0 && (
-        <div>
-          <h3 className="mb-3 font-semibold text-sm">Supported NIPs</h3>
-          <div className="flex flex-wrap gap-2">
-            {info.supported_nips.map((num: number) => (
-              <NIPBadge
-                key={num}
-                nipNumber={String(num).padStart(2, "0")}
-                showName={true}
-              />
-            ))}
-          </div>
-        </div>
+      {info?.supported_nips && (
+        <RelaySupportedNips nips={info.supported_nips} />
       )}
     </div>
   );
diff --git a/src/components/nostr/RelaySupportedNips.tsx b/src/components/nostr/RelaySupportedNips.tsx
index c12aa7b..c0cfe8d 100644
--- a/src/components/nostr/RelaySupportedNips.tsx
+++ b/src/components/nostr/RelaySupportedNips.tsx
@@ -1,35 +1,35 @@
-import { Label } from "@/components/ui/label";
 import { NIPBadge } from "@/components/NIPBadge";
-import { FileText } from "lucide-react";
 
 interface RelaySupportedNipsProps {
   nips: number[];
+  title?: string;
+  showTitle?: boolean;
 }
 
 /**
  * Relay Supported NIPs Display Component
  * Shows supported Nostr Implementation Possibilities (NIPs) for a relay
- * Used in both Relay Discovery and Monitor Announcement detail views
+ * Used in RelayViewer and Relay Discovery detail views
+ * Renders NIP badges with names for better readability
  */
-export function RelaySupportedNips({ nips }: RelaySupportedNipsProps) {
+export function RelaySupportedNips({
+  nips,
+  title = "Supported NIPs",
+  showTitle = true,
+}: RelaySupportedNipsProps) {
   if (nips.length === 0) {
     return null;
   }
 
   return (
-    <div className="space-y-2">
-      <Label className="flex items-center gap-2 text-muted-foreground">
-        <FileText className="size-4" />
-        Supported NIPs ({nips.length})
-      </Label>
-      <div className="flex flex-wrap gap-1.5">
+    <div>
+      {showTitle && <h3 className="mb-3 font-semibold text-sm">{title}</h3>}
+      <div className="flex flex-wrap gap-2">
         {nips.map((nip) => (
           <NIPBadge
             key={nip}
             nipNumber={nip.toString().padStart(2, "0")}
-            showName={false}
-            showNIPPrefix={false}
-            className="text-xs"
+            showName={true}
           />
         ))}
       </div>
diff --git a/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx b/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
index b215a29..6e1eadd 100644
--- a/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
+++ b/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
@@ -221,7 +221,12 @@ export function RelayDiscoveryDetailRenderer({ event }: { event: NostrEvent }) {
       )}
 
       {/* Supported NIPs */}
-      <RelaySupportedNips nips={nips} />
+      {nips.length > 0 && (
+        <RelaySupportedNips
+          nips={nips}
+          title={`Supported NIPs (${nips.length})`}
+        />
+      )}
 
       {/* Relay Kinds */}
       <RelayKindsDisplay accepted={kinds.accepted} rejected={kinds.rejected} />