From 560761968b79f4c270248b1e9ee7985422a6a6a9 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 24 May 2026 08:01:56 +0530
Subject: [PATCH] feat: collapsible post cards in circle feed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Posts start collapsed showing author, timestamp, a thumbnail (if image)
and truncated text preview with ▼ chevron. Tap the author row to expand
the full post (body, full image, reactions, comments). Tap again to
collapse. Lets users scan many posts quickly and expand only what
interests them.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/circle/[id]/page.tsx | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/app/circle/[id]/page.tsx b/src/app/circle/[id]/page.tsx
index ea934d0..bd99201 100644
--- a/src/app/circle/[id]/page.tsx
+++ b/src/app/circle/[id]/page.tsx
@@ -29,6 +29,7 @@ function PostCard({
   onDeleted: (id: string) => void;
   onReact: (postId: string, emoji: string) => void;
 }) {
+  const [collapsed, setCollapsed]       = useState(true);
   const [showComments, setShowComments] = useState(false);
   const [comments, setComments]         = useState<CircleComment[]>([]);
   const [commentText, setCommentText]   = useState("");
@@ -112,15 +113,31 @@ function PostCard({
     )}
 
     <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm">
-      {/* Author row */}
+      {/* Author row — tap to collapse/expand */}
       <div className="flex items-center justify-between px-4 pt-3 pb-2">
-        <div className="flex items-center gap-2">
-          <div className="w-8 h-8 bg-rose-100 dark:bg-rose-900/40 rounded-full flex items-center justify-center text-sm">👨‍👩‍👧</div>
-          <div>
+        <button
+          onClick={() => setCollapsed(v => !v)}
+          className="flex items-center gap-2 flex-1 min-w-0 text-left"
+        >
+          <div className="w-8 h-8 bg-rose-100 dark:bg-rose-900/40 rounded-full flex items-center justify-center text-sm flex-shrink-0">👨‍👩‍👧</div>
+          <div className="flex-1 min-w-0">
             <p className="text-sm font-medium">{post.authorFamilyName}</p>
             <p className="text-xs text-gray-400">{timeAgo(post.createdAt)}{post.sourceKind ? ` · shared a ${post.sourceKind}` : ""}</p>
           </div>
-        </div>
+          {/* Collapsed preview */}
+          {collapsed && (
+            <div className="flex items-center gap-2 flex-shrink-0 max-w-[45%]">
+              {post.imageUrl && (
+                <img src={post.imageUrl} alt="" className="w-10 h-10 rounded-lg object-cover flex-shrink-0" />
+              )}
+              {post.body && (
+                <span className="text-xs text-gray-400 truncate">{post.body}</span>
+              )}
+              <span className="text-gray-300 text-xs flex-shrink-0">▼</span>
+            </div>
+          )}
+          {!collapsed && <span className="text-gray-300 text-xs flex-shrink-0 ml-2">▲</span>}
+        </button>
         {/* ⋯ menu — rendered outside overflow:hidden so it doesn't get clipped */}
         <div className="relative">
           <button onClick={() => setShowMenu(v => !v)} className="p-2 text-gray-400 text-lg">⋯</button>
@@ -153,6 +170,12 @@ function PostCard({
         </div>
       </div>
 
+      {/* Collapsed divider */}
+      {collapsed && <div className="border-t border-gray-50 dark:border-gray-700 rounded-b-2xl" />}
+
+      {/* Expanded content */}
+      {!collapsed && <>
+
       {/* Delete confirmation */}
       {deleteConfirm && (
         <div className="mx-4 mb-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-xl space-y-2">
@@ -257,6 +280,7 @@ function PostCard({
           </div>
         </div>
       )}
+      </>} {/* end !collapsed */}
     </div>
     </>
   );