From 0ffae158b0345a6b860f13528db5ac275d44c0e8 Mon Sep 17 00:00:00 2001
From: Ali Ihsan Nergiz <aihsannergiz@gmail.com>
Date: Sun, 18 Jan 2026 01:03:57 +0000
Subject: [PATCH] feat(post-detail): Add click support for like/bookmark icons

Click the heart or flag icons in the stats bar to toggle like/bookmark states. Icons display in the appropriate color (liked/bookmarked/muted) and flash success color briefly after toggling. Implements the same click pattern used for mentions navigation.

Fixes #212
---
 src/screens/PostDetailScreen.tsx | 40 +++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/screens/PostDetailScreen.tsx b/src/screens/PostDetailScreen.tsx
index 2d89b93..e2820d4 100644
--- a/src/screens/PostDetailScreen.tsx
+++ b/src/screens/PostDetailScreen.tsx
@@ -413,6 +413,25 @@ export function PostDetailScreen({
     }
   }, [currentLink]);
 
+  // Click handlers for like/bookmark icons
+  const handleLikeClick = useCallback(
+    (event: MouseEvent) => {
+      if (event.type === "up" && event.button === 0) {
+        onLike?.();
+      }
+    },
+    [onLike]
+  );
+
+  const handleBookmarkClick = useCallback(
+    (event: MouseEvent) => {
+      if (event.type === "up" && event.button === 0) {
+        onBookmark?.();
+      }
+    },
+    [onBookmark]
+  );
+
   useKeyboard((key) => {
     if (!focused) return;
 
@@ -730,7 +749,18 @@ export function PostDetailScreen({
     </box>
   ) : null;
 
-  // Stats bar
+  // Stats bar with clickable like/bookmark icons
+  const likeColor = isJustLiked
+    ? colors.success
+    : isLiked
+      ? colors.liked
+      : colors.muted;
+  const bookmarkColor = isJustBookmarked
+    ? colors.success
+    : isBookmarked
+      ? colors.bookmarked
+      : colors.muted;
+
   const statsContent = (
     <box style={{ marginTop: 1, paddingLeft: 1, paddingRight: 1 }}>
       <box style={{ flexDirection: "row" }}>
@@ -739,6 +769,14 @@ export function PostDetailScreen({
           {formatCount(tweet.retweetCount)} reposts {"  "}
           {formatCount(tweet.likeCount)} likes
         </text>
+        <text>{"  "}</text>
+        <text fg={likeColor} onMouse={handleLikeClick}>
+          {isLiked ? HEART_FILLED : HEART_EMPTY}
+        </text>
+        <text>{"  "}</text>
+        <text fg={bookmarkColor} onMouse={handleBookmarkClick}>
+          {isBookmarked ? FLAG_FILLED : FLAG_EMPTY}
+        </text>
       </box>
     </box>
   );