From 7f0f25aeb77a4bf33d0417d1a2ea1ce70384ae2f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 19 Mar 2026 14:34:34 -0500
Subject: [PATCH] Make quoted event tombstones clickable with NIP-19
 identifiers

When a quoted event fails to load, the 'this post could not be loaded'
indicator is now clickable, navigating to the event's page. Constructs
nevent1 for regular events and naddr1 for addressable events, including
relay hints and author pubkey when available from the parent event's tags.
---
 src/components/EmbeddedNaddr.tsx | 29 +++++++++++++++++++++++++++--
 src/components/EmbeddedNote.tsx  | 29 +++++++++++++++++++++++++++--
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/components/EmbeddedNaddr.tsx b/src/components/EmbeddedNaddr.tsx
index bfe1731e..52b1e1f8 100644
--- a/src/components/EmbeddedNaddr.tsx
+++ b/src/components/EmbeddedNaddr.tsx
@@ -68,7 +68,7 @@ export function EmbeddedNaddr({ addr, className }: EmbeddedNaddrProps) {
   }
 
   if (isError || !event) {
-    return <EmbeddedNaddrTombstone className={className} />;
+    return <EmbeddedNaddrTombstone addr={addr} className={className} />;
   }
 
   // For follow packs / starter packs, render the same NoteCard used in feeds (without actions)
@@ -201,13 +201,38 @@ function EmbeddedNaddrCard({ event, className }: { event: NostrEvent; className?
 }
 
 /** Tombstone shown when an addressable event could not be loaded. */
-function EmbeddedNaddrTombstone({ className }: { className?: string }) {
+function EmbeddedNaddrTombstone({ addr, className }: { addr: AddrCoords; className?: string }) {
+  const navigate = useNavigate();
+
+  const naddrId = useMemo(
+    () => nip19.naddrEncode({
+      kind: addr.kind,
+      pubkey: addr.pubkey,
+      identifier: addr.identifier,
+    }),
+    [addr],
+  );
+
   return (
     <div
       className={cn(
         'rounded-2xl border border-dashed border-border overflow-hidden',
+        'hover:bg-secondary/40 transition-colors cursor-pointer',
         className,
       )}
+      role="link"
+      tabIndex={0}
+      onClick={(e) => {
+        e.stopPropagation();
+        navigate(`/${naddrId}`);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          navigate(`/${naddrId}`);
+        }
+      }}
     >
       <div className="px-3.5 py-4 flex items-center gap-2 text-muted-foreground">
         <MessageSquareOff className="size-4 shrink-0" />
diff --git a/src/components/EmbeddedNote.tsx b/src/components/EmbeddedNote.tsx
index f64f2124..557e0432 100644
--- a/src/components/EmbeddedNote.tsx
+++ b/src/components/EmbeddedNote.tsx
@@ -88,7 +88,7 @@ export function EmbeddedNote({ eventId, relays, authorHint, className, disableHo
   }
 
   if (isError || !event) {
-    return <EmbeddedNoteTombstone className={className} />;
+    return <EmbeddedNoteTombstone eventId={eventId} relays={relays} authorHint={authorHint} className={className} />;
   }
 
   // For follow packs / lists, render the same rich NoteCard used in feeds
@@ -349,13 +349,38 @@ function MaybeProfileHoverCard({ pubkey, disabled, children }: { pubkey: string;
 }
 
 /** Tombstone shown when a quoted note could not be loaded. */
-function EmbeddedNoteTombstone({ className }: { className?: string }) {
+function EmbeddedNoteTombstone({ eventId, relays, authorHint, className }: { eventId: string; relays?: string[]; authorHint?: string; className?: string }) {
+  const navigate = useNavigate();
+
+  const neventId = useMemo(
+    () => nip19.neventEncode({
+      id: eventId,
+      ...(authorHint ? { author: authorHint } : {}),
+      ...(relays?.length ? { relays } : {}),
+    }),
+    [eventId, authorHint, relays],
+  );
+
   return (
     <div
       className={cn(
         'rounded-2xl border border-dashed border-border overflow-hidden',
+        'hover:bg-secondary/40 transition-colors cursor-pointer',
         className,
       )}
+      role="link"
+      tabIndex={0}
+      onClick={(e) => {
+        e.stopPropagation();
+        navigate(`/${neventId}`);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          navigate(`/${neventId}`);
+        }
+      }}
     >
       <div className="px-3.5 py-4 flex items-center gap-2 text-muted-foreground">
         <MessageSquareOff className="size-4 shrink-0" />