leaflet.pub / leaflet
a tool for shared writing and social publishing
fork atom

make the reply line emcompass it's replies as well

cozylittle.house df623f2f 8f68be58

+56 -74
+5 -26
app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
··· 52 52 const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`; 53 53 54 54 return ( 55 - <div className="bskyPost relative flex flex-col w-full"> 55 + // pointer events non so that is there is a replyLine, it can be clicked even though its underneath the postContent (buttons here have pointer-events-auto applied to make them clickable) 56 + <div className="bskyPost relative flex flex-col w-full pointer-events-none"> 56 57 <div className={`flex gap-2 text-left w-full ${props.className}`}> 57 - <div className="flex flex-col items-start shrink-0 w-fit "> 58 - {replyLine && ( 59 - <button 60 - onClick={(e) => { 61 - replyLine.onToggle(e); 62 - }} 63 - className="w-full h-2 shrink-0 flex place" 64 - aria-label="Toggle replies" 65 - > 66 - <div className="w-0.5 h-full bg-border-light mx-auto" /> 67 - </button> 68 - )} 58 + <div className="flex flex-col items-start shrink-0 w-fit"> 69 59 <Avatar 70 60 src={post.author.avatar} 71 61 displayName={post.author.displayName} 72 62 size={avatarSize ? avatarSize : "medium"} 73 63 /> 74 - {replyLine && ( 75 - <button 76 - onClick={(e) => { 77 - replyLine.onToggle(e); 78 - }} 79 - className="relative w-full grow flex " 80 - aria-label="Toggle replies" 81 - > 82 - <div className="w-0.5 h-full bg-border-light mx-auto" /> 83 - </button> 84 - )} 85 64 </div> 86 65 <div 87 66 className={`flex flex-col min-w-0 w-full z-0 ${props.replyLine ? "mt-2" : ""}`} 88 67 > 89 68 <button 90 - className={`bskyPostTextContent flex flex-col grow text-left ${props.avatarSize === "small" ? "mt-0.5" : props.avatarSize === "large" ? "mt-2" : "mt-1"}`} 69 + className={`bskyPostTextContent flex flex-col grow text-left w-full pointer-events-auto ${props.avatarSize === "small" ? "mt-0.5" : props.avatarSize === "large" ? "mt-2" : "mt-1"}`} 91 70 onClick={() => { 92 71 openPage(parent, { type: "thread", uri: post.uri }); 93 72 }} ··· 118 97 (props.post.quoteCount && props.post.quoteCount > 0) || 119 98 (props.post.replyCount && props.post.replyCount > 0) ? ( 120 99 <div 121 - className={`postCountsAndLink flex gap-2 items-center justify-between mt-2`} 100 + className={`postCountsAndLink flex gap-2 items-center justify-between mt-2 pointer-events-auto`} 122 101 > 123 102 <PostCounts 124 103 post={post}
+51 -48
app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
··· 130 130 131 131 {/* Replies */} 132 132 {post.replies && post.replies.length > 0 && ( 133 - <div className="threadReplies flex flex-col mt-4 pt-3 border-t border-border-light w-full"> 133 + <div className="threadReplies flex flex-col mt-4 pt-1 border-t border-border-light w-full"> 134 134 <Replies 135 135 replies={post.replies as any[]} 136 136 pageUri={post.post.uri} ··· 155 155 156 156 if (isMainPost) { 157 157 return ( 158 - <div className="threadPost flex gap-2 relative w-full"> 158 + <div className="threadMainPost flex gap-2 relative w-full"> 159 159 <BskyPostContent 160 160 post={postView} 161 161 parent={page} ··· 170 170 } 171 171 172 172 return ( 173 - <div className="threadPost flex gap-2 relative w-full pl-1"> 173 + <div className="threadGrandparentPost flex gap-2 relative w-full pl-1"> 174 + <div className="absolute top-0 bottom-0 left-1 w-5 "> 175 + <div className="bg-border-light w-[2px] h-full mx-auto" /> 176 + </div> 174 177 <CompactBskyPostContent 175 178 post={postView} 176 179 parent={page} 177 180 quoteEnabled 178 181 replyEnabled 179 - replyLine={{ 180 - onToggle: () => {}, 181 - }} 182 182 /> 183 183 </div> 184 184 ); ··· 211 211 : replies; 212 212 213 213 return ( 214 - <div className="threadPageReplies flex flex-col gap-0 pt-1 pb-2"> 214 + <div className="replies flex flex-col gap-0 pt-2 pb-1 pointer-events-none"> 215 215 {sortedReplies.map((reply, index) => { 216 216 if (AppBskyFeedDefs.isNotFoundPost(reply)) { 217 217 return ( ··· 285 285 const hasReplies = props.post.replies && props.post.replies.length > 0; 286 286 287 287 return ( 288 - <div 289 - className={`threadReply relative flex flex-col ${props.depth === 0 && "mb-2"}`} 290 - > 291 - <BskyPostContent 292 - post={postView} 293 - parent={{ type: "thread", uri: pageUri }} 294 - showEmbed={false} 295 - showBlueskyLink={false} 296 - replyLine={ 297 - props.depth > 0 298 - ? { 299 - onToggle: () => { 300 - props.toggleCollapsed(parentPostUri); 301 - }, 302 - } 303 - : undefined 304 - } 305 - quoteEnabled 306 - replyEnabled 307 - replyOnClick={(e) => { 308 - e.preventDefault(); 309 - props.toggleCollapsed(post.post.uri); 310 - console.log(post.post.uri); 311 - }} 312 - onEmbedClick={(e) => e.stopPropagation()} 313 - className="text-sm z-10" 314 - /> 315 - {hasReplies && props.depth < 3 && ( 316 - <div className="ml-[28px] flex"> 317 - {!props.isCollapsed && ( 318 - <div className="grow"> 319 - <Replies 320 - pageUri={pageUri} 321 - parentPostUri={post.post.uri} 322 - replies={props.post.replies as any[]} 323 - depth={props.depth + 1} 324 - parentAuthorDid={props.post.post.author.did} 325 - /> 326 - </div> 327 - )} 328 - </div> 288 + <div className="flex h-fit"> 289 + {props.depth > 0 && ( 290 + <button 291 + className="replyLine relative w-6 h-auto -mr-6 pointer-events-auto" 292 + onClick={() => { 293 + props.toggleCollapsed(parentPostUri); 294 + }} 295 + > 296 + <div className="bg-border-light w-[2px] h-full mx-auto" /> 297 + </button> 329 298 )} 299 + <div 300 + className={`reply relative flex flex-col w-full ${props.depth === 0 && "mb-2"} ${props.depth > 0 && "pointer-events-none"}`} 301 + > 302 + <BskyPostContent 303 + post={postView} 304 + parent={{ type: "thread", uri: pageUri }} 305 + showEmbed={false} 306 + showBlueskyLink={false} 307 + quoteEnabled 308 + replyEnabled 309 + replyOnClick={(e) => { 310 + e.preventDefault(); 311 + props.toggleCollapsed(post.post.uri); 312 + console.log(post.post.uri); 313 + }} 314 + onEmbedClick={(e) => e.stopPropagation()} 315 + className="text-sm" 316 + /> 317 + {hasReplies && props.depth < 3 && ( 318 + <div className="ml-[28px] flex pointer-events-none"> 319 + {!props.isCollapsed && ( 320 + <div className="grow pointer-events-none"> 321 + <Replies 322 + pageUri={pageUri} 323 + parentPostUri={post.post.uri} 324 + replies={props.post.replies as any[]} 325 + depth={props.depth + 1} 326 + parentAuthorDid={props.post.post.author.did} 327 + /> 328 + </div> 329 + )} 330 + </div> 331 + )} 332 + </div> 330 333 </div> 331 334 ); 332 335 };