From 6cea36c361bfbd6e1b193da3f7c00a199bc38938 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 20 Jan 2026 15:01:31 +0000
Subject: [PATCH] refactor(nip-66): improve feed UI with clickable titles and
 simplified layout

- Add ClickableEventTitle to relay discovery feed items for opening detail view
- Remove "Monitoring" label from relay monitor feed items for cleaner layout
- Remove unused imports (RelayLink, Label, Activity) from feed renderers
- Maintain existing Label and NIPBadge usage in detail renderers
---
 .../kinds/MonitorAnnouncementRenderer.tsx     | 29 +++++++------------
 .../nostr/kinds/RelayDiscoveryRenderer.tsx    | 21 ++++++++------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/nostr/kinds/MonitorAnnouncementRenderer.tsx b/src/components/nostr/kinds/MonitorAnnouncementRenderer.tsx
index 40a16ec..965c680 100644
--- a/src/components/nostr/kinds/MonitorAnnouncementRenderer.tsx
+++ b/src/components/nostr/kinds/MonitorAnnouncementRenderer.tsx
@@ -4,14 +4,13 @@ import {
   ClickableEventTitle,
 } from "./BaseEventRenderer";
 import { Badge } from "@/components/ui/badge";
-import { Label } from "@/components/ui/label";
 import {
   getMonitorFrequency,
   getMonitorChecks,
   formatFrequency,
   getCheckTypeName,
 } from "@/lib/nip66-helpers";
-import { Activity, Clock } from "lucide-react";
+import { Clock } from "lucide-react";
 
 /**
  * Kind 10166 Renderer - NIP-66 Relay Monitor Announcement (Feed View)
@@ -42,22 +41,16 @@ export function Kind10166Renderer({ event }: BaseEventProps) {
 
         {/* Check Types */}
         {checks.length > 0 && (
-          <div className="flex flex-col gap-1.5">
-            <Label className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Activity className="size-3" />
-              Monitoring
-            </Label>
-            <div className="flex flex-wrap gap-1.5">
-              {checks.map((check) => (
-                <Badge
-                  key={check}
-                  variant="secondary"
-                  className="h-5 px-2 text-xs"
-                >
-                  {getCheckTypeName(check)}
-                </Badge>
-              ))}
-            </div>
+          <div className="flex flex-wrap gap-1.5">
+            {checks.map((check) => (
+              <Badge
+                key={check}
+                variant="secondary"
+                className="h-5 px-2 text-xs"
+              >
+                {getCheckTypeName(check)}
+              </Badge>
+            ))}
           </div>
         )}
 
diff --git a/src/components/nostr/kinds/RelayDiscoveryRenderer.tsx b/src/components/nostr/kinds/RelayDiscoveryRenderer.tsx
index 35971e3..ce68f00 100644
--- a/src/components/nostr/kinds/RelayDiscoveryRenderer.tsx
+++ b/src/components/nostr/kinds/RelayDiscoveryRenderer.tsx
@@ -1,5 +1,8 @@
-import { BaseEventProps, BaseEventContainer } from "./BaseEventRenderer";
-import { RelayLink } from "../RelayLink";
+import {
+  BaseEventProps,
+  BaseEventContainer,
+  ClickableEventTitle,
+} from "./BaseEventRenderer";
 import { Badge } from "@/components/ui/badge";
 import {
   getRelayUrl,
@@ -57,14 +60,14 @@ export function Kind30166Renderer({ event }: BaseEventProps) {
   return (
     <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
-        {/* Relay URL and Health Score */}
+        {/* Clickable Title and Health Score */}
         <div className="flex items-center justify-between gap-2">
-          <RelayLink
-            url={relayUrl}
-            className="py-0.5 hover:bg-none flex-1 min-w-0"
-            iconClassname="size-4"
-            urlClassname="underline decoration-dotted"
-          />
+          <ClickableEventTitle
+            event={event}
+            className="text-base font-semibold truncate flex-1 min-w-0"
+          >
+            {relayUrl}
+          </ClickableEventTitle>
           <div className="flex items-center gap-1 text-xs shrink-0">
             <Activity className={cn("size-3", healthColor)} />
             <span className={cn("font-medium", healthColor)}>{health}%</span>