From dad2b37a613871de1ab292e592f293eeb5c4f0de Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sat, 24 Jan 2026 03:23:08 -0500
Subject: [PATCH] use BskyPostContent in the leaflet as well

---
 .../[rkey]/Blocks/PublishBskyPostBlock.tsx    | 126 ++----------------
 .../[publication]/[rkey]/BskyPostContent.tsx  |  18 ++-
 .../[rkey]/Interactions/Quotes.tsx            |   1 +
 .../[did]/[publication]/[rkey]/ThreadPage.tsx |  10 --
 components/Blocks/BlueskyPostBlock/index.tsx  |  76 ++---------
 5 files changed, 38 insertions(+), 193 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx b/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx
index 3343af46..703dc5a6 100644
--- a/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx
@@ -13,6 +13,7 @@ import {
 } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
 import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText";
 import { openPage } from "../PostPages";
+import { BskyPostContent } from "../BskyPostContent";
 
 export const PubBlueskyPostBlock = (props: {
   post: PostView;
@@ -49,6 +50,8 @@ export const PubBlueskyPostBlock = (props: {
 
       //getting the url to the post
       let postId = post.uri.split("/")[4];
+      let postView = post as PostView;
+
       let url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
 
       const parent = props.pageId
@@ -56,119 +59,16 @@ export const PubBlueskyPostBlock = (props: {
         : undefined;
 
       return (
-        <div
-          onClick={handleOpenThread}
-          className={`
-            ${props.className}
-            block-border
-            mb-2
-      flex flex-col gap-2 relative w-full overflow-hidden group/blueskyPostBlock sm:p-3 p-2 text-sm text-secondary bg-bg-page
-      cursor-pointer hover:border-accent-contrast
-      `}
-        >
-          {post.author && record && (
-            <>
-              <div className="bskyAuthor w-full flex items-center gap-2">
-                {post.author.avatar && (
-                  <img
-                    src={post.author?.avatar}
-                    alt={`${post.author?.displayName}'s avatar`}
-                    className="shink-0 w-8 h-8 rounded-full border border-border-light"
-                  />
-                )}
-                <div className="grow flex flex-col gap-0.5 leading-tight">
-                  <div className=" font-bold text-secondary">
-                    {post.author?.displayName}
-                  </div>
-                  <a
-                    className="text-xs text-tertiary hover:underline"
-                    target="_blank"
-                    href={`https://bsky.app/profile/${post.author?.handle}`}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    @{post.author?.handle}
-                  </a>
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-2 ">
-                <div>
-                  <pre className="whitespace-pre-wrap">
-                    {BlueskyRichText({
-                      record: record as AppBskyFeedPost.Record | null,
-                    })}
-                  </pre>
-                </div>
-                {post.embed && (
-                  <div onClick={(e) => e.stopPropagation()}>
-                    <BlueskyEmbed embed={post.embed} postUrl={url} />
-                  </div>
-                )}
-              </div>
-            </>
-          )}
-          <div className="w-full flex gap-2 items-center justify-between">
-            <ClientDate date={timestamp} />
-            <div className="flex gap-2 items-center">
-              {post.replyCount != null && post.replyCount > 0 && (
-                <>
-                  <ThreadLink
-                    postUri={post.uri}
-                    parent={parent}
-                    className="flex items-center gap-1 hover:text-accent-contrast"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {post.replyCount}
-                    <CommentTiny />
-                  </ThreadLink>
-                  <Separator classname="h-4" />
-                </>
-              )}
-              {post.quoteCount != null && post.quoteCount > 0 && (
-                <>
-                  <QuotesLink
-                    postUri={post.uri}
-                    parent={parent}
-                    className="flex items-center gap-1 hover:text-accent-contrast"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {post.quoteCount}
-                    <QuoteTiny />
-                  </QuotesLink>
-                  <Separator classname="h-4" />
-                </>
-              )}
-
-              <a
-                className=""
-                target="_blank"
-                href={url}
-                onClick={(e) => e.stopPropagation()}
-              >
-                <BlueskyTiny />
-              </a>
-            </div>
-          </div>
-        </div>
+        <BskyPostContent
+          post={postView}
+          parent={undefined}
+          showBlueskyLink={true}
+          showEmbed={true}
+          avatarSize="large"
+          quoteEnabled
+          replyEnabled
+          className="text-sm text-secondary block-border sm:px-3 sm:py-2 px-2 py-1 bg-bg-page mb-2 hover:border-accent-contrast!"
+        />
       );
   }
 };
-
-const ClientDate = (props: { date?: string }) => {
-  let pageLoaded = useHasPageLoaded();
-  const formattedDate = useLocalizedDate(
-    props.date || new Date().toISOString(),
-    {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "numeric",
-      hour12: true,
-    },
-  );
-
-  if (!pageLoaded) return null;
-
-  return <div className="text-xs text-tertiary">{formattedDate}</div>;
-};
diff --git a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
index 6305dfeb..571cddef 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 | undefined;
   avatarSize?: "tiny" | "small" | "medium" | "large" | "giant";
   className?: string;
   showEmbed?: boolean;
@@ -87,7 +87,7 @@ export function BskyPostContent(props: {
           className={`flex flex-col min-w-0 w-full z-0 ${props.replyLine ? "mt-2" : ""}`}
         >
           <button
-            className="bskyPostTextContent flex flex-col grow mt-1 text-left"
+            className={`bskyPostTextContent flex flex-col grow text-left ${props.avatarSize === "small" ? "mt-0.5" : props.avatarSize === "large" ? "mt-2" : "mt-1"}`}
             onClick={() => {
               openPage(parent, { type: "thread", uri: post.uri });
             }}
@@ -99,7 +99,7 @@ export function BskyPostContent(props: {
             />
 
             <div className={`postContent flex flex-col gap-2 mt-0.5`}>
-              <div className="text-secondary text-sm">
+              <div className="text-secondary">
                 <BlueskyRichText record={record} />
               </div>
               {showEmbed && post.embed && (
@@ -133,7 +133,11 @@ export function BskyPostContent(props: {
               <div className="flex gap-3 items-center">
                 {showBlueskyLink && (
                   <>
-                    <a className="text-tertiary" target="_blank" href={url}>
+                    <a
+                      className="text-tertiary hover:text-accent-contrast"
+                      target="_blank"
+                      href={url}
+                    >
                       <BlueskyLinkTiny />
                     </a>
                   </>
@@ -276,7 +280,7 @@ function PostCounts(props: {
 }) {
   const replyContent = props.post.replyCount != null &&
     props.post.replyCount > 0 && (
-      <div className="postRepliesCount flex items-center gap-1 text-tertiary text-xs">
+      <div className="postRepliesCount flex items-center gap-1 text-xs">
         <CommentTiny />
         {props.post.replyCount}
       </div>
@@ -284,14 +288,14 @@ function PostCounts(props: {
 
   const quoteContent = props.post.quoteCount != null &&
     props.post.quoteCount > 0 && (
-      <div className="postQuoteCount flex items-center gap-1 text-tertiary text-xs">
+      <div className="postQuoteCount flex items-center gap-1  text-xs">
         <QuoteTiny />
         {props.post.quoteCount}
       </div>
     );
 
   return (
-    <div className="postCounts flex gap-2 items-center w-full">
+    <div className="postCounts flex gap-2 items-center w-full text-tertiary">
       {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 d71e16e2..a1190b32 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
@@ -113,6 +113,7 @@ export const MentionsDrawerContent = (props: {
                 return (
                   <>
                     <Quote
+                      key={q.uri}
                       q={q}
                       index={index}
                       did={props.did}
diff --git a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
index ce2bcff3..d6ba347f 100644
--- a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
@@ -326,16 +326,6 @@ const ReplyPost = (props: {
           )}
         </div>
       )}
-
-      {hasReplies && props.depth >= 3 && (
-        <ThreadLink
-          postUri={props.post.post.uri}
-          parent={{ type: "thread", uri: pageUri }}
-          className="text-left ml-10 text-sm text-accent-contrast hover:underline"
-        >
-          View more replies
-        </ThreadLink>
-      )}
     </div>
   );
 };
diff --git a/components/Blocks/BlueskyPostBlock/index.tsx b/components/Blocks/BlueskyPostBlock/index.tsx
index 01cdbd86..4c3639bf 100644
--- a/components/Blocks/BlueskyPostBlock/index.tsx
+++ b/components/Blocks/BlueskyPostBlock/index.tsx
@@ -13,6 +13,8 @@ import { Separator } from "components/Layout";
 import { BlueskyTiny } from "components/Icons/BlueskyTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+import { BskyPostContent } from "app/lish/[did]/[publication]/[rkey]/BskyPostContent";
+import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
 
 export const BlueskyPostBlock = (props: BlockProps & { preview?: boolean }) => {
   let { permissions } = useEntitySetContext();
@@ -76,76 +78,24 @@ export const BlueskyPostBlock = (props: BlockProps & { preview?: boolean }) => {
 
       //getting the url to the post
       let postId = post.post.uri.split("/")[4];
+      let postView = post.post as PostView;
       let url = `https://bsky.app/profile/${post.post.author.handle}/post/${postId}`;
 
       return (
         <BlockLayout
           isSelected={!!isSelected}
           hasBackground="page"
-          className="flex flex-col gap-2 relative overflow-hidden group/blueskyPostBlock text-sm text-secondary"
+          borderOnHover
+          className="blueskyPostBlock sm:px-3! sm:py-2! px-2! py-1!"
         >
-          {post.post.author && record && (
-            <>
-              <div className="bskyAuthor w-full flex items-center gap-2">
-                {post.post.author?.avatar ? (
-                  <img
-                    src={post.post.author?.avatar}
-                    alt={`${post.post.author?.displayName}'s avatar`}
-                    className="shrink-0 w-8 h-8 rounded-full border border-border-light"
-                  />
-                ) : (
-                  <div className="shrink-0 w-8 h-8 rounded-full border border-border-light bg-border"></div>
-                )}
-                <div className="grow flex flex-col gap-0.5 leading-tight">
-                  <div className=" font-bold text-secondary">
-                    {post.post.author?.displayName}
-                  </div>
-                  <a
-                    className="text-xs text-tertiary hover:underline"
-                    target="_blank"
-                    href={`https://bsky.app/profile/${post.post.author?.handle}`}
-                  >
-                    @{post.post.author?.handle}
-                  </a>
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-2 ">
-                <div>
-                  <pre className="whitespace-pre-wrap">
-                    {BlueskyRichText({
-                      record: record as AppBskyFeedPost.Record | null,
-                    })}
-                  </pre>
-                </div>
-                {post.post.embed && (
-                  <BlueskyEmbed embed={post.post.embed} postUrl={url} />
-                )}
-              </div>
-            </>
-          )}
-          <div className="w-full flex gap-2 items-center justify-between">
-            {timestamp && <PostDate timestamp={timestamp} />}
-            <div className="flex gap-2 items-center">
-              {post.post.replyCount != null && post.post.replyCount > 0 && (
-                <>
-                  <a
-                    className="flex items-center gap-1 hover:no-underline"
-                    target="_blank"
-                    href={url}
-                  >
-                    {post.post.replyCount}
-                    <CommentTiny />
-                  </a>
-                  <Separator classname="h-4" />
-                </>
-              )}
-
-              <a className="" target="_blank" href={url}>
-                <BlueskyTiny />
-              </a>
-            </div>
-          </div>
+          <BskyPostContent
+            post={postView}
+            parent={undefined}
+            showBlueskyLink={true}
+            showEmbed={true}
+            avatarSize="large"
+            className="text-sm text-secondary  "
+          />
         </BlockLayout>
       );
   }
-- 
2.51.2