From dac751b0a96ce5dfe12d5d1fb4ac622cc47d5c8a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 23 Mar 2026 21:46:14 -0500
Subject: [PATCH] Show Bluesky like counts and open comment compose dialog
 inline

Pass post.likeCount to ExternalReactionButton via new count prop so like
counts display from the Bluesky API. Comment button now opens the
ReplyComposeModal with the post URL instead of navigating away.
---
 src/components/ExternalReactionButton.tsx |  8 +++++---
 src/pages/BlueskyPage.tsx                 | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/ExternalReactionButton.tsx b/src/components/ExternalReactionButton.tsx
index 12b7764f..6f6d0352 100644
--- a/src/components/ExternalReactionButton.tsx
+++ b/src/components/ExternalReactionButton.tsx
@@ -38,6 +38,8 @@ interface ExternalReactionButtonProps {
   content: ExternalContent;
   /** Icon size class (default "size-5"). */
   iconSize?: string;
+  /** Display count from an external source (e.g. Bluesky like count). Falls back to the Nostr reaction count. */
+  count?: number;
   /** Extra class names on the trigger button. */
   className?: string;
 }
@@ -48,7 +50,7 @@ interface ExternalReactionButtonProps {
  * Includes hover-to-open emoji picker via `QuickReactMenu`, optimistic UI,
  * and displays the user's existing reaction & total count.
  */
-export function ExternalReactionButton({ content, iconSize = 'size-5', className }: ExternalReactionButtonProps) {
+export function ExternalReactionButton({ content, iconSize = 'size-5', count, className }: ExternalReactionButtonProps) {
   const { user } = useCurrentUser();
   const { mutate: publishEvent } = useNostrPublish();
   const queryClient = useQueryClient();
@@ -151,8 +153,8 @@ export function ExternalReactionButton({ content, iconSize = 'size-5', className
           ) : (
             <Heart className={iconSize} />
           )}
-          {reactionCount > 0 && (
-            <span className="text-sm tabular-nums">{formatNumber(reactionCount)}</span>
+          {(count ?? reactionCount) > 0 && (
+            <span className="text-sm tabular-nums">{formatNumber(count ?? reactionCount)}</span>
           )}
         </button>
       </PopoverTrigger>
diff --git a/src/pages/BlueskyPage.tsx b/src/pages/BlueskyPage.tsx
index 607103e1..b1cdcfe0 100644
--- a/src/pages/BlueskyPage.tsx
+++ b/src/pages/BlueskyPage.tsx
@@ -139,11 +139,12 @@ function BlueskyFeedPost({ post }: { post: BlueskyPost }) {
   const externalContent = useMemo(() => parseExternalUri(webUrl), [webUrl]);
 
   const [shareOpen, setShareOpen] = useState(false);
+  const [commentOpen, setCommentOpen] = useState(false);
 
   const handleComment = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
-    navigate(internalUrl);
-  }, [navigate, internalUrl]);
+    setCommentOpen(true);
+  }, []);
 
   const handleRepost = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
@@ -288,7 +289,7 @@ function BlueskyFeedPost({ post }: { post: BlueskyPost }) {
                 <Repeat2 className="size-[18px]" />
                 {post.repostCount > 0 && <span className="text-sm tabular-nums">{formatCount(post.repostCount)}</span>}
               </button>
-              <ExternalReactionButton content={externalContent} iconSize="size-[18px]" />
+              <ExternalReactionButton content={externalContent} iconSize="size-[18px]" count={post.likeCount} />
               <button
                 type="button"
                 onClick={handleShare}
@@ -302,6 +303,15 @@ function BlueskyFeedPost({ post }: { post: BlueskyPost }) {
         </div>
       </article>
 
+      {/* Comment compose modal */}
+      {commentOpen && (
+        <ReplyComposeModal
+          open={commentOpen}
+          onOpenChange={setCommentOpen}
+          event={new URL(webUrl)}
+        />
+      )}
+
       {/* Share compose modal */}
       {shareOpen && (
         <ReplyComposeModal