From 54cff0af9baabe560debf3d0c8b690e9f0940679 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Fri, 12 Dec 2025 22:31:47 +0100
Subject: [PATCH] feat: simplify kind viewer

---
 src/components/KindRenderer.tsx | 32 +++-----------------------------
 src/components/NIPBadge.tsx     | 14 ++++++++++----
 src/components/RelayViewer.tsx  |  2 +-
 3 files changed, 14 insertions(+), 34 deletions(-)

diff --git a/src/components/KindRenderer.tsx b/src/components/KindRenderer.tsx
index 6acad94..6ea2481 100644
--- a/src/components/KindRenderer.tsx
+++ b/src/components/KindRenderer.tsx
@@ -1,7 +1,6 @@
 import { getKindInfo } from "@/constants/kinds";
-import Command from "./Command";
-import { ExternalLink } from "lucide-react";
 import { kinds } from "nostr-tools";
+import { NIPBadge } from "./NIPBadge";
 
 // NIP-01 Kind ranges
 const REPLACEABLE_START = 10000;
@@ -46,7 +45,7 @@ export default function KindRenderer({ kind }: { kind: number }) {
       </div>
 
       {/* Details Grid */}
-      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm items-center">
         <div className="text-muted-foreground">Kind Number</div>
         <code className="font-mono">{kind}</code>
 
@@ -74,35 +73,10 @@ export default function KindRenderer({ kind }: { kind: number }) {
         {kindInfo.nip && (
           <>
             <div className="text-muted-foreground">Defined in</div>
-            <div>
-              <Command
-                name={`NIP-${kindInfo.nip}`}
-                description={`View NIP-${kindInfo.nip} specification`}
-                appId="nip"
-                props={{ number: kindInfo.nip }}
-              />
-            </div>
+            <NIPBadge nipNumber={kindInfo.nip} />
           </>
         )}
       </div>
-
-      {/* GitHub Link */}
-      {kindInfo.nip && (
-        <div className="pt-4 border-t border-border">
-          <a
-            href={`https://github.com/nostr-protocol/nips/blob/master/${kindInfo.nip.padStart(
-              2,
-              "0",
-            )}.md`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <ExternalLink className="w-4 h-4" />
-            View on GitHub
-          </a>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/components/NIPBadge.tsx b/src/components/NIPBadge.tsx
index a32cc39..cb9c439 100644
--- a/src/components/NIPBadge.tsx
+++ b/src/components/NIPBadge.tsx
@@ -2,9 +2,10 @@ import { getNIPInfo } from "../lib/nip-icons";
 import { useGrimoire } from "@/core/state";
 
 export interface NIPBadgeProps {
-  nipNumber: number;
+  nipNumber: string;
   className?: string;
   showName?: boolean;
+  showNIPPrefix?: boolean;
 }
 
 /**
@@ -15,6 +16,7 @@ export function NIPBadge({
   nipNumber,
   className = "",
   showName = true,
+  showNIPPrefix = true,
 }: NIPBadgeProps) {
   const { addWindow } = useGrimoire();
   const nipInfo = getNIPInfo(nipNumber);
@@ -34,12 +36,16 @@ export function NIPBadge({
   return (
     <button
       onClick={openNIP}
-      className={`flex items-center gap-1.5 rounded-md border bg-card px-2.5 py-1.5 text-sm hover:bg-muted/20 cursor-crosshair ${className}`}
+      className={`flex items-center gap-2 border bg-card px-2.5 py-1.5 text-sm hover:underline hover:decoration-dotted cursor-crosshair ${className}`}
       title={description}
     >
-      <span className="font-mono font-medium">{nipNumber}</span>
+      <span className="text-muted-foreground">
+        {`${showNIPPrefix ? "NIP-" : ""}${nipNumber}`}
+      </span>
       {showName && nipInfo && (
-        <span className="text-muted-foreground">· {name}</span>
+        <>
+          <span>{name}</span>
+        </>
       )}
     </button>
   );
diff --git a/src/components/RelayViewer.tsx b/src/components/RelayViewer.tsx
index eddf0f8..17a496b 100644
--- a/src/components/RelayViewer.tsx
+++ b/src/components/RelayViewer.tsx
@@ -73,7 +73,7 @@ export function RelayViewer({ url }: RelayViewerProps) {
           <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={num} showName={true} />
+              <NIPBadge key={num} nipNumber={String(num)} showName={true} />
             ))}
           </div>
         </div>