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
This commit is contained in:
Claude
2026-01-20 15:01:31 +00:00
parent f8b35483ef
commit 6cea36c361
2 changed files with 23 additions and 27 deletions

View File

@@ -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>
)}

View File

@@ -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>