From 37729c715d75e3b6b9eb34495b5ec63380922cee Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 23 Jan 2026 23:41:13 -0500
Subject: [PATCH] refactor the bskypostcontent to use booleans for reply and
 quote rather than functions, include its own reply line, some renaming of
 variables to be more consistant

---
 .../[rkey]/BlueskyQuotesPage.tsx              |   2 +
 .../[publication]/[rkey]/BskyPostContent.tsx  | 180 ++++++++++--------
 .../[rkey]/Interactions/Quotes.tsx            |   3 +-
 .../[did]/[publication]/[rkey]/ThreadPage.tsx |  33 ++--
 4 files changed, 118 insertions(+), 100 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx b/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
index 1cfe3139..f335211d 100644
--- a/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
@@ -92,6 +92,8 @@ function QuotePost(props: { post: PostView; quotesUri: string }) {
       parent={parent}
       showEmbed={true}
       showBlueskyLink={true}
+      quoteEnabled
+      replyEnabled
       onEmbedClick={(e) => e.stopPropagation()}
       className="relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer"
     />
diff --git a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
index e9512897..a0178390 100644
--- a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
@@ -19,7 +19,7 @@ type PostView = AppBskyFeedDefs.PostView;
 
 export function BskyPostContent(props: {
   post: PostView;
-  parent?: OpenPage;
+  parent: OpenPage;
   avatarSize?: "tiny" | "medium" | "large" | "giant";
   className?: string;
   showEmbed?: boolean;
@@ -50,97 +50,111 @@ export function BskyPostContent(props: {
   const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
 
   return (
-    <div className="bskyPost relative flex flex-col">
-      {replyLine && (
-        <div className="replyLine absolute top-0 bottom-0 shrink-0 w-6 bg-test">
+    <div className="bskyPost relative flex flex-col w-full">
+      <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>
+          )}
+          <Avatar
+            src={post.author.avatar}
+            displayName={post.author.displayName}
+            size={props.avatarSize ? props.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 w-full z-0 ${props.replyLine ? "mt-2" : ""}`}
+        >
           <button
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              replyLine.onToggle(e);
-              console.log("clicked");
+            className={`bskyPostTextContent flex flex-col grow min-w-0 mt-1 text-left`}
+            onClick={() => {
+              openPage(parent, { type: "thread", uri: post.uri });
             }}
-            className="w-full h-full flex justify-center"
-            aria-label="Toggle replies"
-          >
-            <div className="w-0.5 h-full bg-border-light" />
-          </button>
-        </div>
-      )}
-      <button
-        className={`flex gap-2 text-left ${props.className}`}
-        onClick={() => {
-          openPage(parent, { type: "thread", uri: post.uri });
-          console.log("do this");
-        }}
-      >
-        <Avatar
-          src={post.author.avatar}
-          displayName={post.author.displayName}
-          size={props.avatarSize ? props.avatarSize : "medium"}
-        />
-
-        <div className={`bskyPostTextContent flex flex-col grow min-w-0 mt-1 `}>
-          <div
-            className={`flex justify-between items-center gap-2 leading-tight `}
           >
-            <div className="flex gap-2 items-center">
-              <div className="font-bold text-secondary">
-                {post.author.displayName}
+            <div
+              className={`postInfo flex justify-between items-center gap-2 leading-tight `}
+            >
+              <div className="flex gap-2 items-center">
+                <div className="font-bold text-secondary">
+                  {post.author.displayName}
+                </div>
+                <ProfilePopover
+                  trigger={
+                    <div className="text-sm text-tertiary hover:underline">
+                      @{post.author.handle}
+                    </div>
+                  }
+                  didOrHandle={post.author.handle}
+                />
+              </div>
+              <div className="text-sm text-tertiary">
+                {timeAgo(record.createdAt, { compact: true })}
               </div>
-              <ProfilePopover
-                trigger={
-                  <div className="text-sm text-tertiary hover:underline">
-                    @{post.author.handle}
-                  </div>
-                }
-                didOrHandle={post.author.handle}
-              />
-            </div>
-            <div className="text-sm text-tertiary">
-              {timeAgo(record.createdAt, { compact: true })}
             </div>
-          </div>
 
-          <div
-            className={`flex flex-col gap-2 ${avatarSize === "large" ? "mt-0.5" : "mt-1"}`}
-          >
-            <div className="text-sm text-secondary">
-              <BlueskyRichText record={record} />
-            </div>
-            {showEmbed && post.embed && (
-              <div onClick={onEmbedClick}>
-                <BlueskyEmbed
-                  embed={post.embed}
-                  postUrl={url}
-                  className="text-sm"
-                />
+            <div className={`postContent flex flex-col gap-2 mt-0.5`}>
+              <div className="text-sm text-secondary">
+                <BlueskyRichText record={record} />
               </div>
-            )}
-          </div>
-
-          <div className={`flex gap-2 items-center justify-between mt-2`}>
-            <PostCounts
-              post={post}
-              parent={parent}
-              replyEnabled={replyEnabled}
-              replyOnClick={replyOnClick}
-              quoteEnabled={quoteEnabled}
-              showBlueskyLink={showBlueskyLink}
-              url={url}
-            />
-            <div className="flex gap-3 items-center">
-              {showBlueskyLink && (
-                <>
-                  <a className="text-tertiary" target="_blank" href={url}>
-                    <BlueskyLinkTiny />
-                  </a>
-                </>
+              {showEmbed && post.embed && (
+                <div onClick={onEmbedClick}>
+                  <BlueskyEmbed
+                    embed={post.embed}
+                    postUrl={url}
+                    className="text-sm"
+                  />
+                </div>
               )}
             </div>
-          </div>
+          </button>
+          {props.showBlueskyLink ||
+          (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`}
+            >
+              <PostCounts
+                post={post}
+                parent={parent}
+                replyEnabled={replyEnabled}
+                replyOnClick={replyOnClick}
+                quoteEnabled={quoteEnabled}
+                showBlueskyLink={showBlueskyLink}
+                url={url}
+              />
+
+              <div className="flex gap-3 items-center">
+                {showBlueskyLink && (
+                  <>
+                    <a className="text-tertiary" target="_blank" href={url}>
+                      <BlueskyLinkTiny />
+                    </a>
+                  </>
+                )}
+              </div>
+            </div>
+          ) : null}
         </div>
-      </button>
+      </div>
     </div>
   );
 }
@@ -171,7 +185,7 @@ function PostCounts(props: {
     );
 
   return (
-    <div className="postCounts flex gap-2 items-center">
+    <div className="postCounts flex gap-2 items-center w-full">
       {replyContent &&
         (props.replyEnabled ? (
           <ThreadLink
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
index 980b6149..e54179f3 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
@@ -143,7 +143,8 @@ export const MentionsDrawerContent = (props: {
                       showBlueskyLink={true}
                       showEmbed={true}
                       avatarSize="large"
-                      quoteEnabled={true}
+                      quoteEnabled
+                      replyEnabled
                     />
                   );
                 })}
diff --git a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
index 8efc880e..55774899 100644
--- a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
@@ -60,15 +60,15 @@ export function ThreadPage(props: {
             Failed to load thread
           </div>
         ) : thread ? (
-          <ThreadContent thread={thread} parentUri={parentUri} />
+          <ThreadContent post={thread} parentUri={parentUri} />
         ) : null}
       </div>
     </PageWrapper>
   );
 }
 
-function ThreadContent(props: { thread: ThreadType; parentUri: string }) {
-  const { thread, parentUri: parentUri } = props;
+function ThreadContent(props: { post: ThreadType; parentUri: string }) {
+  const { post, parentUri } = props;
   const mainPostRef = useRef<HTMLDivElement>(null);
 
   // Scroll the main post into view when the thread loads
@@ -81,11 +81,11 @@ function ThreadContent(props: { thread: ThreadType; parentUri: string }) {
     }
   }, []);
 
-  if (AppBskyFeedDefs.isNotFoundPost(thread)) {
+  if (AppBskyFeedDefs.isNotFoundPost(post)) {
     return <PostNotAvailable />;
   }
 
-  if (AppBskyFeedDefs.isBlockedPost(thread)) {
+  if (AppBskyFeedDefs.isBlockedPost(post)) {
     return (
       <div className="text-tertiary italic text-sm text-center py-8">
         This post is blocked
@@ -93,13 +93,13 @@ function ThreadContent(props: { thread: ThreadType; parentUri: string }) {
     );
   }
 
-  if (!AppBskyFeedDefs.isThreadViewPost(thread)) {
+  if (!AppBskyFeedDefs.isThreadViewPost(post)) {
     return <PostNotAvailable />;
   }
 
   // Collect all parent posts in order (oldest first)
   const parents: ThreadViewPost[] = [];
-  let currentParent = thread.parent;
+  let currentParent = post.parent;
   while (currentParent && AppBskyFeedDefs.isThreadViewPost(currentParent)) {
     parents.unshift(currentParent);
     currentParent = currentParent.parent;
@@ -122,7 +122,7 @@ function ThreadContent(props: { thread: ThreadType; parentUri: string }) {
       {/* Main post */}
       <div ref={mainPostRef}>
         <ThreadPost
-          post={thread}
+          post={post}
           isMainPost={true}
           showReplyLine={false}
           parentUri={parentUri}
@@ -130,13 +130,13 @@ function ThreadContent(props: { thread: ThreadType; parentUri: string }) {
       </div>
 
       {/* Replies */}
-      {thread.replies && thread.replies.length > 0 && (
+      {post.replies && post.replies.length > 0 && (
         <div className="threadReplies flex flex-col mt-2 pt-2 border-t border-border-light">
           <Replies
-            replies={thread.replies as any[]}
-            parentUri={parentUri}
+            replies={post.replies as any[]}
+            parentUri={post.post.uri}
             depth={0}
-            parentAuthorDid={thread.post.author.did}
+            parentAuthorDid={post.post.author.did}
           />
         </div>
       )}
@@ -166,7 +166,7 @@ function ThreadPost(props: {
         showBlueskyLink={true}
         showEmbed={true}
         quoteEnabled
-        replyEnabled
+        replyEnabled={!isMainPost}
       />
     </div>
   );
@@ -269,7 +269,9 @@ const ReplyPost = (props: {
   const hasReplies = props.post.replies && props.post.replies.length > 0;
 
   return (
-    <div className="threadReply relative flex flex-col">
+    <div
+      className={`threadReply relative flex flex-col ${props.depth === 0 && "mb-2"}`}
+    >
       <BskyPostContent
         post={postView}
         parent={{ type: "thread", uri: parentUri }}
@@ -280,7 +282,6 @@ const ReplyPost = (props: {
             ? {
                 onToggle: () => {
                   props.toggleCollapsed(props.parentUri);
-                  console.log("click click");
                 },
               }
             : undefined
@@ -299,7 +300,7 @@ const ReplyPost = (props: {
           {!props.isCollapsed && (
             <div className="grow">
               <Replies
-                parentUri={postView.uri}
+                parentUri={parentUri}
                 replies={props.post.replies as any[]}
                 depth={props.depth + 1}
                 parentAuthorDid={props.post.post.author.did}
-- 
2.51.2