From aa643fb8d73be4c99ea91d4697540eb278f554b1 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Mon, 2 Mar 2026 18:18:00 -0600
Subject: [PATCH] fix(media): kind-1 comment button navigates to post instead
 of opening sheet

Eliminates the stale-replies problem entirely for kind-1 events by linking
to the post detail page rather than showing an inline comments overlay.
---
 src/components/CommentsSheet.tsx  |  7 ++++--
 src/components/PhotoBottomBar.tsx | 41 ++++++++++++++++++++++---------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/CommentsSheet.tsx b/src/components/CommentsSheet.tsx
index 51cf3b16..01400428 100644
--- a/src/components/CommentsSheet.tsx
+++ b/src/components/CommentsSheet.tsx
@@ -117,12 +117,15 @@ interface CommentsModalProps {
 }
 
 export function CommentsSheet({ event, open, onClose }: CommentsModalProps) {
-  const { data: rawComments = [], isLoading } = useEventComments(event);
+  const { data: rawComments = [], isLoading, dataUpdatedAt } = useEventComments(event);
 
+  // Only show comments once the query has actually fetched for this event.
+  // `dataUpdatedAt === 0` means the query has never resolved — show nothing.
   const comments = useMemo(() => {
+    if (dataUpdatedAt === 0) return [];
     const seen = new Set<string>();
     return rawComments.filter((e) => seen.has(e.id) ? false : (seen.add(e.id), true));
-  }, [rawComments]);
+  }, [rawComments, dataUpdatedAt]);
 
   if (!open) return null;
 
diff --git a/src/components/PhotoBottomBar.tsx b/src/components/PhotoBottomBar.tsx
index e5c8b275..f75def39 100644
--- a/src/components/PhotoBottomBar.tsx
+++ b/src/components/PhotoBottomBar.tsx
@@ -7,6 +7,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { MessageCircle, Zap, MoreHorizontal } from 'lucide-react';
+import { nip19 } from 'nostr-tools';
 import type { NostrEvent } from '@nostrify/nostrify';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { ReactionButton } from '@/components/ReactionButton';
@@ -44,6 +45,10 @@ export function PhotoBottomBar({ event }: PhotoBottomBarProps) {
   const [moreMenuOpen, setMoreMenuOpen] = useState(false);
   const [commentsOpen, setCommentsOpen] = useState(false);
   const canZapAuthor = user && canZap(metadata);
+  const isKind1 = event.kind === 1;
+  const eventUrl = isKind1
+    ? `/${nip19.neventEncode({ id: event.id, author: event.pubkey })}`
+    : null;
 
   return (
     <>
@@ -81,13 +86,23 @@ export function PhotoBottomBar({ event }: PhotoBottomBarProps) {
               className="text-white hover:text-pink-400 hover:bg-white/10 p-2.5 [&_svg]:size-5"
             />
 
-            <button
-              className="flex items-center gap-1 p-2.5 text-white hover:text-blue-400 transition-colors"
-              onClick={() => setCommentsOpen(true)}
-            >
-              <MessageCircle className="size-5" />
-              {!!stats?.replies && <span className="text-sm tabular-nums drop-shadow">{stats.replies}</span>}
-            </button>
+            {isKind1 ? (
+              <Link
+                to={eventUrl!}
+                className="flex items-center gap-1 p-2.5 text-white hover:text-blue-400 transition-colors"
+              >
+                <MessageCircle className="size-5" />
+                {!!stats?.replies && <span className="text-sm tabular-nums drop-shadow">{stats.replies}</span>}
+              </Link>
+            ) : (
+              <button
+                className="flex items-center gap-1 p-2.5 text-white hover:text-blue-400 transition-colors"
+                onClick={() => setCommentsOpen(true)}
+              >
+                <MessageCircle className="size-5" />
+                {!!stats?.replies && <span className="text-sm tabular-nums drop-shadow">{stats.replies}</span>}
+              </button>
+            )}
 
             <RepostMenu event={event}>
               {(isReposted: boolean) => (
@@ -121,11 +136,13 @@ export function PhotoBottomBar({ event }: PhotoBottomBarProps) {
 
       <NoteMoreMenu event={event} open={moreMenuOpen} onOpenChange={setMoreMenuOpen} />
 
-      <CommentsSheet key={event.id}
-        event={event}
-        open={commentsOpen}
-        onClose={() => setCommentsOpen(false)}
-      />
+      {!isKind1 && (
+        <CommentsSheet
+          event={event}
+          open={commentsOpen}
+          onClose={() => setCommentsOpen(false)}
+        />
+      )}
     </>
   );
 }