manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: collapsed post preview centered + auto-expand on edit/delete

Browse source 
- Collapsed preview (thumbnail + text) moved to its own row centered
  below the author line instead of being pushed to the right
- Chevron ▼/▲ stays on the author row right side as the only element
- Edit post and Delete post now call setCollapsed(false) first so the
  edit textarea / delete confirmation is always visible when triggered
  from a collapsed card

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-24 08:13:54 +05:30
parent 560761968b
commit ab25b7531d
1 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/app/circle/[id]/page.tsx
View file

@ -124,19 +124,7 @@ function PostCard({
<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>
{/* 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>}
<span className="text-gray-300 text-xs flex-shrink-0 ml-2">{collapsed ? "▼" : "▲"}</span>
</button>
{/* ⋯ menu — rendered outside overflow:hidden so it doesn't get clipped */}
<div className="relative">
@ -147,13 +135,13 @@ function PostCard({
<div className="absolute right-0 top-9 z-50 bg-white dark:bg-gray-900 rounded-xl shadow-xl border border-gray-100 dark:border-gray-700 min-w-[170px] py-1">
{isOwn && (
<button
onClick={() => { setShowMenu(false); setEditMode(true); setEditBody(post.body ?? ""); }}
onClick={() => { setShowMenu(false); setCollapsed(false); setEditMode(true); setEditBody(post.body ?? ""); }}
className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-700"
>✏️ Edit post</button>
)}
{(isOwn || isAdmin) && (
<button
onClick={() => { setShowMenu(false); setDeleteConfirm(true); }}
onClick={() => { setShowMenu(false); setCollapsed(false); setDeleteConfirm(true); }}
className="w-full text-left px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
>🗑️ Delete post</button>
)}
@ -170,8 +158,24 @@ function PostCard({
</div>
</div>
{/* Collapsed divider */}
{collapsed && <div className="border-t border-gray-50 dark:border-gray-700 rounded-b-2xl" />}
{/* Collapsed preview row — centered under author line */}
{collapsed && (post.body || post.imageUrl) && (
<button
onClick={() => setCollapsed(false)}
className="w-full flex items-center justify-center gap-2 px-4 pb-3 border-t border-gray-50 dark:border-gray-700 pt-2"
>
{post.imageUrl && (
<img src={post.imageUrl} alt="" className="w-9 h-9 rounded-lg object-cover flex-shrink-0" />
)}
{post.body && (
<span className="text-xs text-gray-400 truncate max-w-[70%]">{post.body}</span>
)}
</button>
)}
{/* Collapsed divider when no preview content */}
{collapsed && !post.body && !post.imageUrl && (
<div className="border-t border-gray-50 dark:border-gray-700 rounded-b-2xl" />
)}
{/* Expanded content */}
{!collapsed && <>