From df623f2fd7d03ec135b50ed6c5c41bc8a1b4b719 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sat, 24 Jan 2026 09:08:33 +0000
Subject: [PATCH] make the reply line emcompass it's replies as well

---
 app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx | 31 +++++--------------------------
 app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------
 2 file(s) changed, 56 insertion(s)(+), 74 deletion(s)(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
--- a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
@@ -52,42 +52,21 @@
   const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
 
   return (
-    <div className="bskyPost relative flex flex-col w-full">
+    // 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)
+    <div className="bskyPost relative flex flex-col w-full pointer-events-none">
       <div className={`flex gap-2 text-left w-full ${props.className}`}>
-        <div className="flex flex-col items-start  shrink-0 w-fit ">
-          {replyLine && (
-            <button
-              onClick={(e) => {
-                replyLine.onToggle(e);
-              }}
-              className="w-full h-2 shrink-0 flex place"
-              aria-label="Toggle replies"
-            >
-              <div className="w-0.5 h-full bg-border-light mx-auto" />
-            </button>
-          )}
+        <div className="flex flex-col items-start shrink-0 w-fit">
           <Avatar
             src={post.author.avatar}
             displayName={post.author.displayName}
             size={avatarSize ? avatarSize : "medium"}
           />
-          {replyLine && (
-            <button
-              onClick={(e) => {
-                replyLine.onToggle(e);
-              }}
-              className="relative w-full grow flex "
-              aria-label="Toggle replies"
-            >
-              <div className="w-0.5 h-full bg-border-light mx-auto" />
-            </button>
-          )}
         </div>
         <div
           className={`flex flex-col min-w-0 w-full z-0 ${props.replyLine ? "mt-2" : ""}`}
         >
           <button
-            className={`bskyPostTextContent flex flex-col grow text-left ${props.avatarSize === "small" ? "mt-0.5" : props.avatarSize === "large" ? "mt-2" : "mt-1"}`}
+            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"}`}
             onClick={() => {
               openPage(parent, { type: "thread", uri: post.uri });
             }}
@@ -118,7 +97,7 @@
           (props.post.quoteCount && props.post.quoteCount > 0) ||
           (props.post.replyCount && props.post.replyCount > 0) ? (
             <div
-              className={`postCountsAndLink flex gap-2 items-center justify-between mt-2`}
+              className={`postCountsAndLink flex gap-2 items-center justify-between mt-2 pointer-events-auto`}
             >
               <PostCounts
                 post={post}
diff --git a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
--- a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
@@ -130,7 +130,7 @@
 
       {/* Replies */}
       {post.replies && post.replies.length > 0 && (
-        <div className="threadReplies flex flex-col mt-4 pt-3  border-t border-border-light w-full">
+        <div className="threadReplies flex flex-col mt-4 pt-1  border-t border-border-light w-full">
           <Replies
             replies={post.replies as any[]}
             pageUri={post.post.uri}
@@ -155,7 +155,7 @@
 
   if (isMainPost) {
     return (
-      <div className="threadPost flex gap-2 relative w-full">
+      <div className="threadMainPost flex gap-2 relative w-full">
         <BskyPostContent
           post={postView}
           parent={page}
@@ -170,15 +170,15 @@
   }
 
   return (
-    <div className="threadPost flex gap-2 relative w-full pl-1">
+    <div className="threadGrandparentPost flex gap-2 relative w-full pl-1">
+      <div className="absolute top-0 bottom-0 left-1 w-5 ">
+        <div className="bg-border-light w-[2px] h-full mx-auto" />
+      </div>
       <CompactBskyPostContent
         post={postView}
         parent={page}
         quoteEnabled
         replyEnabled
-        replyLine={{
-          onToggle: () => {},
-        }}
       />
     </div>
   );
@@ -211,7 +211,7 @@
     : replies;
 
   return (
-    <div className="threadPageReplies flex flex-col gap-0 pt-1 pb-2">
+    <div className="replies flex flex-col gap-0 pt-2 pb-1 pointer-events-none">
       {sortedReplies.map((reply, index) => {
         if (AppBskyFeedDefs.isNotFoundPost(reply)) {
           return (
@@ -285,48 +285,51 @@
   const hasReplies = props.post.replies && props.post.replies.length > 0;
 
   return (
-    <div
-      className={`threadReply relative flex flex-col ${props.depth === 0 && "mb-2"}`}
-    >
-      <BskyPostContent
-        post={postView}
-        parent={{ type: "thread", uri: pageUri }}
-        showEmbed={false}
-        showBlueskyLink={false}
-        replyLine={
-          props.depth > 0
-            ? {
-                onToggle: () => {
-                  props.toggleCollapsed(parentPostUri);
-                },
-              }
-            : undefined
-        }
-        quoteEnabled
-        replyEnabled
-        replyOnClick={(e) => {
-          e.preventDefault();
-          props.toggleCollapsed(post.post.uri);
-          console.log(post.post.uri);
-        }}
-        onEmbedClick={(e) => e.stopPropagation()}
-        className="text-sm z-10"
-      />
-      {hasReplies && props.depth < 3 && (
-        <div className="ml-[28px] flex">
-          {!props.isCollapsed && (
-            <div className="grow">
-              <Replies
-                pageUri={pageUri}
-                parentPostUri={post.post.uri}
-                replies={props.post.replies as any[]}
-                depth={props.depth + 1}
-                parentAuthorDid={props.post.post.author.did}
-              />
-            </div>
-          )}
-        </div>
+    <div className="flex h-fit">
+      {props.depth > 0 && (
+        <button
+          className="replyLine relative w-6 h-auto -mr-6 pointer-events-auto"
+          onClick={() => {
+            props.toggleCollapsed(parentPostUri);
+          }}
+        >
+          <div className="bg-border-light w-[2px] h-full mx-auto" />
+        </button>
       )}
+      <div
+        className={`reply relative flex flex-col w-full ${props.depth === 0 && "mb-2"} ${props.depth > 0 && "pointer-events-none"}`}
+      >
+        <BskyPostContent
+          post={postView}
+          parent={{ type: "thread", uri: pageUri }}
+          showEmbed={false}
+          showBlueskyLink={false}
+          quoteEnabled
+          replyEnabled
+          replyOnClick={(e) => {
+            e.preventDefault();
+            props.toggleCollapsed(post.post.uri);
+            console.log(post.post.uri);
+          }}
+          onEmbedClick={(e) => e.stopPropagation()}
+          className="text-sm"
+        />
+        {hasReplies && props.depth < 3 && (
+          <div className="ml-[28px] flex pointer-events-none">
+            {!props.isCollapsed && (
+              <div className="grow pointer-events-none">
+                <Replies
+                  pageUri={pageUri}
+                  parentPostUri={post.post.uri}
+                  replies={props.post.replies as any[]}
+                  depth={props.depth + 1}
+                  parentAuthorDid={props.post.post.author.did}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

--
tangled.sh