From b93168feec9ea553d02baf6abc9bc16b8e07399c Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sat, 24 Jan 2026 02:53:16 -0500
Subject: [PATCH] adjustments to make everything more consistent

---
 .../[rkey]/BlueskyQuotesPage.tsx              | 10 ++--
 .../[publication]/[rkey]/BskyPostContent.tsx  |  5 +-
 .../[rkey]/Interactions/Comments/index.tsx    | 22 ++++---
 .../[rkey]/Interactions/Quotes.tsx            | 59 +++++++++++--------
 4 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx b/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
index 8dba71fb..bf1eede2 100644
--- a/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
@@ -41,13 +41,11 @@ export function BlueskyQuotesPage(props: {
       pageType="doc"
       fullPageScroll={false}
       id={`post-page-${pageId}`}
-      drawerOpen={!!drawer}
+      drawerOpen={false}
       pageOptions={pageOptions}
     >
       <div className="flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4">
-        <h3 className="text-secondary font-bold flex items-center gap-2">
-          Bluesky Quotes
-        </h3>
+        <h4 className="text-secondary font-bold mb-2">Bluesky Quotes</h4>
         {isLoading ? (
           <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm py-8">
             <span>loading quotes</span>
@@ -78,7 +76,7 @@ function QuotesContent(props: { posts: PostView[]; postUri: string }) {
         <>
           <QuotePost key={post.uri} post={post} quotesUri={postUri} />
           {posts.length !== index + 1 && (
-            <hr className="border-border-light my-2" />
+            <hr className="border-border-light my-4" />
           )}
         </>
       ))}
@@ -100,7 +98,7 @@ function QuotePost(props: { post: PostView; quotesUri: string }) {
       quoteEnabled
       replyEnabled
       onEmbedClick={(e) => e.stopPropagation()}
-      className="relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer text-sm"
+      className="relative rounded cursor-pointer text-sm"
     />
   );
 }
diff --git a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
index 6e0079d9..6305dfeb 100644
--- a/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
@@ -237,8 +237,8 @@ function PostInfo(props: {
   const { displayName, handle, createdAt, compact = false } = props;
 
   return (
-    <div className="postInfo flex justify-between items-center gap-4 leading-tight w-full">
-      <div className="flex gap-2 items-center grow min-w-0">
+    <div className="postInfo flex items-center gap-2 leading-tight w-full">
+      <div className="flex gap-2 items-center min-w-0">
         <div className={`font-bold text-secondary  truncate`}>
           {displayName}
         </div>
@@ -255,6 +255,7 @@ function PostInfo(props: {
           />
         </div>
       </div>
+      <div className="w-1 h-1 rounded-full bg-border shrink-0" />
       <div
         className={`${compact ? "text-xs" : "text-sm"} text-tertiary shrink-0`}
       >
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
index fde12e67..34608196 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
@@ -55,8 +55,8 @@ export function CommentsDrawerContent(props: {
       id={"commentsDrawer"}
       className="flex flex-col gap-2 relative text-sm text-secondary"
     >
-      <div className="w-full flex justify-between text-secondary font-bold">
-        Comments
+      <div className="w-full flex justify-between">
+        <h4> Comments</h4>
         <button
           className="text-tertiary"
           onClick={() =>
@@ -75,7 +75,7 @@ export function CommentsDrawerContent(props: {
         </div>
       )}
       <hr className="border-border-light" />
-      <div className="flex flex-col gap-6 py-2">
+      <div className="flex flex-col gap-4 py-2">
         {comments
           .sort((a, b) => {
             let aRecord = a.record as PubLeafletComment.Record;
@@ -119,26 +119,23 @@ const Comment = (props: {
 }) => {
   const did = props.comment.bsky_profiles?.did;
 
-  let timeAgoDate = timeAgo(props.record.createdAt);
-  const formattedDate = useLocalizedDate(props.record.createdAt, {
-    year: "numeric",
-    month: "long",
-    day: "2-digit",
-  });
+  let timeAgoDate = timeAgo(props.record.createdAt, { compact: true });
 
   return (
     <div id={props.comment.uri} className="comment">
-      <div className="flex gap-2">
+      <div className="flex gap-2 items-center">
         {did ? (
           <ProfilePopover
             didOrHandle={did}
             trigger={
-              <div className="text-sm text-tertiary font-bold hover:underline">
+              <div className="text-sm text-secondary font-bold hover:underline">
                 {props.profile.displayName}
               </div>
             }
           />
         ) : null}
+
+        <div className="w-1 h-1 rounded-full bg-border shrink-0" />
         <div className="text-sm text-tertiary">{timeAgoDate}</div>
       </div>
       {props.record.attachment &&
@@ -210,7 +207,8 @@ const Replies = (props: {
             setReplyBoxOpen(false);
           }}
         >
-          <CommentTiny className="text-border" /> {replies.length}
+          <CommentTiny className="text-border" />{" "}
+          {replies.length !== 0 && replies.length}
         </button>
         {identity?.atp_did && (
           <>
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
index e54179f3..d71e16e2 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
@@ -104,51 +104,57 @@ export const MentionsDrawerContent = (props: {
           <DotLoader />
         </div>
       ) : (
-        <div className="flex flex-col gap-8">
+        <div className="flex flex-col gap-8 w-full">
           {quotesWithLinks.length > 0 && (
-            <div className="flex flex-col gap-4">
-              Quotes
+            <div className="flex flex-col  w-full">
+              <h4 className="mb-2">Quotes on Bluesky</h4>
               {/* Quotes with links (quoted content) */}
               {quotesWithLinks.map((q, index) => {
                 return (
-                  <div className="flex gap-2">
+                  <>
                     <Quote
                       q={q}
                       index={index}
                       did={props.did}
                       postViewMap={postViewMap}
                     />
-                  </div>
+                    {quotesWithLinks.length !== index + 1 && (
+                      <hr className="border-border-light my-4" />
+                    )}
+                  </>
                 );
               })}
             </div>
           )}
           {/* Direct post mentions (without quoted content) */}
           {directMentions.length > 0 && (
-            <div className="flex flex-col gap-4">
-              <div className="text-secondary font-bold">
-                Mentions on Bluesky
-              </div>
-              <div className="flex flex-col gap-8">
-                {directMentions.map((q, index) => {
-                  const post = postViewMap.get(q.uri);
-                  if (!post) return null;
-
-                  const parent = { type: "thread" as const, uri: q.uri };
-                  return (
+            <div className="flex flex-col">
+              <h4 className="mb-2">Mentions on Bluesky</h4>
+              {directMentions.map((q, index) => {
+                const post = postViewMap.get(q.uri);
+                if (!post) return null;
+
+                const parent = { type: "thread" as const, uri: q.uri };
+                return (
+                  <>
                     <BskyPostContent
                       key={`mention-${index}`}
                       post={post}
                       parent={parent}
                       showBlueskyLink={true}
                       showEmbed={true}
-                      avatarSize="large"
+                      avatarSize="medium"
                       quoteEnabled
                       replyEnabled
+                      className="text-sm"
+                      compactEmbed
                     />
-                  );
-                })}
-              </div>
+                    {directMentions.length !== index + 1 && (
+                      <hr className="border-border-light my-4" />
+                    )}
+                  </>
+                );
+              })}
             </div>
           )}
         </div>
@@ -176,20 +182,23 @@ const Quote = (props: {
   if (!quotePosition) return null;
 
   return (
-    <div key={`quote-${props.index}`} className="flex flex-col ">
+    <div key={`quote-${props.index}`} className="flex flex-col w-full">
       <QuoteContent
         index={props.index}
         did={props.did}
         position={quotePosition}
       />
 
-      <div className="h-5 w-1 ml-5 border-l border-border-light" />
+      <div className="h-3 w-1 ml-[11px] border-l border-border-light" />
       <BskyPostContent
         post={post}
         parent={parent}
         showBlueskyLink={true}
-        showEmbed={true}
-        avatarSize="large"
+        showEmbed={false}
+        avatarSize="medium"
+        quoteEnabled
+        replyEnabled
+        className="text-sm"
       />
     </div>
   );
@@ -262,7 +271,7 @@ export const QuoteContent = (props: {
             blocks={content}
             did={props.did}
             preview
-            className="py-0!"
+            className="py-0! px-0! text-tertiary"
           />
         </div>
       </div>
-- 
2.51.2