show quotes on bsky posts

app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx

···
+"use client";
+import { AppBskyFeedDefs } from "@atproto/api";
+import useSWR from "swr";
+import { PageWrapper } from "components/Pages/Page";
+import { useDrawerOpen } from "./Interactions/InteractionDrawer";
+import { DotLoader } from "components/utils/DotLoader";
+import { QuoteTiny } from "components/Icons/QuoteTiny";
+import { openPage } from "./PostPages";
+import { BskyPostContent } from "./BskyPostContent";
+import { QuotesLink, getQuotesKey, fetchQuotes, prefetchQuotes } from "./PostLinks";
+
+// Re-export for backwards compatibility
+export { QuotesLink, getQuotesKey, fetchQuotes, prefetchQuotes };
+
+type PostView = AppBskyFeedDefs.PostView;
+
+export function BlueskyQuotesPage(props: {
+  postUri: string;
+  pageId: string;
+  pageOptions?: React.ReactNode;
+  hasPageBackground: boolean;
+}) {
+  const { postUri, pageId, pageOptions } = props;
+  const drawer = useDrawerOpen(postUri);
+
+  const {
+    data: quotesData,
+    isLoading,
+    error,
+  } = useSWR(postUri ? getQuotesKey(postUri) : null, () => fetchQuotes(postUri));
+
+  return (
+    <PageWrapper
+      pageType="doc"
+      fullPageScroll={false}
+      id={`post-page-${pageId}`}
+      drawerOpen={!!drawer}
+      pageOptions={pageOptions}
+    >
+      <div className="flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4">
+        <div className="text-secondary font-bold mb-3 flex items-center gap-2">
+          <QuoteTiny />
+          Bluesky Quotes
+        </div>
+        {isLoading ? (
+          <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm py-8">
+            <span>loading quotes</span>
+            <DotLoader />
+          </div>
+        ) : error ? (
+          <div className="text-tertiary italic text-sm text-center py-8">
+            Failed to load quotes
+          </div>
+        ) : quotesData && quotesData.posts.length > 0 ? (
+          <QuotesContent posts={quotesData.posts} postUri={postUri} />
+        ) : (
+          <div className="text-tertiary italic text-sm text-center py-8">
+            No quotes yet
+          </div>
+        )}
+      </div>
+    </PageWrapper>
+  );
+}
+
+function QuotesContent(props: { posts: PostView[]; postUri: string }) {
+  const { posts, postUri } = props;
+
+  return (
+    <div className="flex flex-col gap-0">
+      {posts.map((post) => (
+        <QuotePost
+          key={post.uri}
+          post={post}
+          quotesUri={postUri}
+        />
+      ))}
+    </div>
+  );
+}
+
+function QuotePost(props: {
+  post: PostView;
+  quotesUri: string;
+}) {
+  const { post, quotesUri } = props;
+  const parent = { type: "quotes" as const, uri: quotesUri };
+
+  return (
+    <div
+      className="flex gap-2 relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer"
+      onClick={() => openPage(parent, { type: "thread", uri: post.uri })}
+    >
+      <BskyPostContent
+        post={post}
+        parent={parent}
+        linksEnabled={true}
+        showEmbed={true}
+        showBlueskyLink={true}
+        onLinkClick={(e) => e.stopPropagation()}
+        onEmbedClick={(e) => e.stopPropagation()}
+      />
+    </div>
+  );
+}

app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx

···
+"use client";
+import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api";
+import {
+  BlueskyEmbed,
+} from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
+import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText";
+import { BlueskyTiny } from "components/Icons/BlueskyTiny";
+import { CommentTiny } from "components/Icons/CommentTiny";
+import { QuoteTiny } from "components/Icons/QuoteTiny";
+import { Separator } from "components/Layout";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+import { useHasPageLoaded } from "components/InitialPageLoadProvider";
+import { OpenPage } from "./PostPages";
+import { ThreadLink, QuotesLink } from "./PostLinks";
+
+type PostView = AppBskyFeedDefs.PostView;
+
+export function BskyPostContent(props: {
+  post: PostView;
+  parent?: OpenPage;
+  linksEnabled?: boolean;
+  avatarSize?: "sm" | "md";
+  showEmbed?: boolean;
+  showBlueskyLink?: boolean;
+  onEmbedClick?: (e: React.MouseEvent) => void;
+  onLinkClick?: (e: React.MouseEvent) => void;
+}) {
+  const {
+    post,
+    parent,
+    linksEnabled = true,
+    avatarSize = "md",
+    showEmbed = true,
+    showBlueskyLink = true,
+    onEmbedClick,
+    onLinkClick,
+  } = props;
+
+  const record = post.record as AppBskyFeedPost.Record;
+  const postId = post.uri.split("/")[4];
+  const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
+
+  const avatarClass = avatarSize === "sm" ? "w-8 h-8" : "w-10 h-10";
+
+  return (
+    <>
+      <div className="flex flex-col items-center shrink-0">
+        {post.author.avatar ? (
+          <img
+            src={post.author.avatar}
+            alt={`${post.author.displayName}'s avatar`}
+            className={`${avatarClass} rounded-full border border-border-light`}
+          />
+        ) : (
+          <div className={`${avatarClass} rounded-full border border-border-light bg-border`} />
+        )}
+      </div>
+
+      <div className="flex flex-col grow min-w-0">
+        <div className={`flex items-center gap-2 leading-tight ${avatarSize === "sm" ? "text-sm" : ""}`}>
+          <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={onLinkClick}
+          >
+            @{post.author.handle}
+          </a>
+        </div>
+
+        <div className={`flex flex-col gap-2 ${avatarSize === "sm" ? "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} />
+            </div>
+          )}
+        </div>
+
+        <div className={`flex gap-2 items-center ${avatarSize === "sm" ? "mt-1" : "mt-2"}`}>
+          <ClientDate date={record.createdAt} />
+          <PostCounts
+            post={post}
+            parent={parent}
+            linksEnabled={linksEnabled}
+            showBlueskyLink={showBlueskyLink}
+            url={url}
+            onLinkClick={onLinkClick}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function PostCounts(props: {
+  post: PostView;
+  parent?: OpenPage;
+  linksEnabled: boolean;
+  showBlueskyLink: boolean;
+  url: string;
+  onLinkClick?: (e: React.MouseEvent) => void;
+}) {
+  const { post, parent, linksEnabled, showBlueskyLink, url, onLinkClick } = props;
+
+  return (
+    <div className="flex gap-2 items-center">
+      {post.replyCount != null && post.replyCount > 0 && (
+        <>
+          <Separator classname="h-3" />
+          {linksEnabled ? (
+            <ThreadLink
+              threadUri={post.uri}
+              parent={parent}
+              className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast"
+              onClick={onLinkClick}
+            >
+              {post.replyCount}
+              <CommentTiny />
+            </ThreadLink>
+          ) : (
+            <div className="flex items-center gap-1 text-tertiary text-xs">
+              {post.replyCount}
+              <CommentTiny />
+            </div>
+          )}
+        </>
+      )}
+      {post.quoteCount != null && post.quoteCount > 0 && (
+        <>
+          <Separator classname="h-3" />
+          <QuotesLink
+            postUri={post.uri}
+            parent={parent}
+            className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast"
+            onClick={onLinkClick}
+          >
+            {post.quoteCount}
+            <QuoteTiny />
+          </QuotesLink>
+        </>
+      )}
+      {showBlueskyLink && (
+        <>
+          <Separator classname="h-3" />
+          <a
+            className="text-tertiary"
+            target="_blank"
+            href={url}
+            onClick={onLinkClick}
+          >
+            <BlueskyTiny />
+          </a>
+        </>
+      )}
+    </div>
+  );
+}
+
+export const ClientDate = (props: { date?: string }) => {
+  const 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>;
+};

app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx

···
 import useSWR, { mutate } from "swr";
 import { DotLoader } from "components/utils/DotLoader";
 import { CommentTiny } from "components/Icons/CommentTiny";
-import { ThreadLink } from "../ThreadPage";
+import { QuoteTiny } from "components/Icons/QuoteTiny";
+import { ThreadLink, QuotesLink } from "../PostLinks";
 
 // Helper to get SWR key for quotes
 export function getQuotesSWRKey(uris: string[]) {
···
                   profile={pv.author}
                   handle={pv.author.handle}
                   replyCount={pv.replyCount}
+                  quoteCount={pv.quoteCount}
                 />
               </div>
             );
···
                       profile={pv.author}
                       handle={pv.author.handle}
                       replyCount={pv.replyCount}
+                      quoteCount={pv.quoteCount}
                     />
                   );
                 })}
···
   handle: string;
   profile: ProfileViewBasic;
   replyCount?: number;
+  quoteCount?: number;
 }) => {
   const handleOpenThread = () => {
     openPage(undefined, { type: "thread", uri: props.uri });
···
           </a>
         </div>
         <div className="text-primary">{props.content}</div>
-        {props.replyCount != null && props.replyCount > 0 && (
-          <ThreadLink
-            threadUri={props.uri}
-            onClick={(e) => e.stopPropagation()}
-            className="flex items-center gap-1 text-tertiary text-xs mt-1 hover:text-accent-contrast"
-          >
-            <CommentTiny />
-            {props.replyCount} {props.replyCount === 1 ? "reply" : "replies"}
-          </ThreadLink>
-        )}
+        <div className="flex gap-2 items-center mt-1">
+          {props.replyCount != null && props.replyCount > 0 && (
+            <ThreadLink
+              threadUri={props.uri}
+              onClick={(e) => e.stopPropagation()}
+              className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast"
+            >
+              <CommentTiny />
+              {props.replyCount} {props.replyCount === 1 ? "reply" : "replies"}
+            </ThreadLink>
+          )}
+          {props.quoteCount != null && props.quoteCount > 0 && (
+            <QuotesLink
+              postUri={props.uri}
+              onClick={(e) => e.stopPropagation()}
+              className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast"
+            >
+              <QuoteTiny />
+              {props.quoteCount} {props.quoteCount === 1 ? "quote" : "quotes"}
+            </QuotesLink>
+          )}
+        </div>
       </div>
     </div>
   );

app/lish/[did]/[publication]/[rkey]/PostLinks.tsx

···
+"use client";
+import { AppBskyFeedDefs } from "@atproto/api";
+import { preload } from "swr";
+import { openPage, OpenPage } from "./PostPages";
+
+type ThreadViewPost = AppBskyFeedDefs.ThreadViewPost;
+type NotFoundPost = AppBskyFeedDefs.NotFoundPost;
+type BlockedPost = AppBskyFeedDefs.BlockedPost;
+type ThreadType = ThreadViewPost | NotFoundPost | BlockedPost;
+
+type PostView = AppBskyFeedDefs.PostView;
+
+export interface QuotesResponse {
+  uri: string;
+  cid?: string;
+  cursor?: string;
+  posts: PostView[];
+}
+
+// Thread fetching
+export const getThreadKey = (uri: string) => `thread:${uri}`;
+
+export async function fetchThread(uri: string): Promise<ThreadType> {
+  const params = new URLSearchParams({ uri });
+  const response = await fetch(`/api/bsky/thread?${params.toString()}`);
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch thread");
+  }
+
+  return response.json();
+}
+
+export const prefetchThread = (uri: string) => {
+  preload(getThreadKey(uri), () => fetchThread(uri));
+};
+
+// Quotes fetching
+export const getQuotesKey = (uri: string) => `quotes:${uri}`;
+
+export async function fetchQuotes(uri: string): Promise<QuotesResponse> {
+  const params = new URLSearchParams({ uri });
+  const response = await fetch(`/api/bsky/quotes?${params.toString()}`);
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch quotes");
+  }
+
+  return response.json();
+}
+
+export const prefetchQuotes = (uri: string) => {
+  preload(getQuotesKey(uri), () => fetchQuotes(uri));
+};
+
+// Link component for opening thread pages with prefetching
+export function ThreadLink(props: {
+  threadUri: string;
+  parent?: OpenPage;
+  children: React.ReactNode;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}) {
+  const { threadUri, parent, children, className, onClick } = props;
+
+  const handleClick = (e: React.MouseEvent) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    openPage(parent, { type: "thread", uri: threadUri });
+  };
+
+  const handlePrefetch = () => {
+    prefetchThread(threadUri);
+  };
+
+  return (
+    <button
+      className={className}
+      onClick={handleClick}
+      onMouseEnter={handlePrefetch}
+      onPointerDown={handlePrefetch}
+    >
+      {children}
+    </button>
+  );
+}
+
+// Link component for opening quotes pages with prefetching
+export function QuotesLink(props: {
+  postUri: string;
+  parent?: OpenPage;
+  children: React.ReactNode;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}) {
+  const { postUri, parent, children, className, onClick } = props;
+
+  const handleClick = (e: React.MouseEvent) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    openPage(parent, { type: "quotes", uri: postUri });
+  };
+
+  const handlePrefetch = () => {
+    prefetchQuotes(postUri);
+  };
+
+  return (
+    <button
+      className={className}
+      onClick={handleClick}
+      onMouseEnter={handlePrefetch}
+      onPointerDown={handlePrefetch}
+    >
+      {children}
+    </button>
+  );
+}

app/lish/[did]/[publication]/[rkey]/PostPages.tsx

···
 import { LinearDocumentPage } from "./LinearDocumentPage";
 import { CanvasPage } from "./CanvasPage";
 import { ThreadPage as ThreadPageComponent } from "./ThreadPage";
+import { BlueskyQuotesPage } from "./BlueskyQuotesPage";
 
 // Page types
 export type DocPage = { type: "doc"; id: string };
 export type ThreadPage = { type: "thread"; uri: string };
-export type OpenPage = DocPage | ThreadPage;
+export type QuotesPage = { type: "quotes"; uri: string };
+export type OpenPage = DocPage | ThreadPage | QuotesPage;
 
 // Get a stable key for a page
 const getPageKey = (page: OpenPage): string => {
   if (page.type === "doc") return page.id;
+  if (page.type === "quotes") return `quotes:${page.uri}`;
   return `thread:${page.uri}`;
 };
 
···
               <SandwichSpacer />
               <ThreadPageComponent
                 threadUri={openPage.uri}
+                pageId={pageKey}
+                hasPageBackground={hasPageBackground}
+                pageOptions={
+                  <PageOptions
+                    onClick={() => closePage(openPage)}
+                    hasPageBackground={hasPageBackground}
+                  />
+                }
+              />
+            </Fragment>
+          );
+        }
+
+        // Handle quotes pages
+        if (openPage.type === "quotes") {
+          return (
+            <Fragment key={pageKey}>
+              <SandwichSpacer />
+              <BlueskyQuotesPage
+                postUri={openPage.uri}
                 pageId={pageKey}
                 hasPageBackground={hasPageBackground}
                 pageOptions={

app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx

···
 import { useHasPageLoaded } from "components/InitialPageLoadProvider";
 import { BlueskyTiny } from "components/Icons/BlueskyTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
+import { QuoteTiny } from "components/Icons/QuoteTiny";
+import { ThreadLink, QuotesLink } from "./PostLinks";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import {
   BlueskyEmbed,
···
 } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
 import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText";
 import { openPage } from "./PostPages";
-import { ThreadLink } from "./ThreadPage";
 
 export const PubBlueskyPostBlock = (props: {
   post: PostView;
···
                     {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" />
                 </>
               )}

app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx

···
 "use client";
 import { useEffect, useRef } from "react";
-import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api";
-import useSWR, { preload } from "swr";
+import { AppBskyFeedDefs } from "@atproto/api";
+import useSWR from "swr";
 import { PageWrapper } from "components/Pages/Page";
 import { useDrawerOpen } from "./Interactions/InteractionDrawer";
 import { DotLoader } from "components/utils/DotLoader";
-import {
-  BlueskyEmbed,
-  PostNotAvailable,
-} from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
-import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText";
-import { BlueskyTiny } from "components/Icons/BlueskyTiny";
-import { CommentTiny } from "components/Icons/CommentTiny";
-import { Separator } from "components/Layout";
-import { useLocalizedDate } from "src/hooks/useLocalizedDate";
-import { useHasPageLoaded } from "components/InitialPageLoadProvider";
-import { openPage, OpenPage } from "./PostPages";
-import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
+import { openPage } from "./PostPages";
 import { useThreadState } from "src/useThreadState";
-import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded";
+import { BskyPostContent, ClientDate } from "./BskyPostContent";
+import {
+  ThreadLink,
+  getThreadKey,
+  fetchThread,
+  prefetchThread,
+} from "./PostLinks";
+
+// Re-export for backwards compatibility
+export { ThreadLink, getThreadKey, fetchThread, prefetchThread, ClientDate };
 
 type ThreadViewPost = AppBskyFeedDefs.ThreadViewPost;
 type NotFoundPost = AppBskyFeedDefs.NotFoundPost;
 type BlockedPost = AppBskyFeedDefs.BlockedPost;
 type ThreadType = ThreadViewPost | NotFoundPost | BlockedPost;
 
-// SWR key for thread data
-export const getThreadKey = (uri: string) => `thread:${uri}`;
-
-// Fetch thread from API route
-export async function fetchThread(uri: string): Promise<ThreadType> {
-  const params = new URLSearchParams({ uri });
-  const response = await fetch(`/api/bsky/thread?${params.toString()}`);
-
-  if (!response.ok) {
-    throw new Error("Failed to fetch thread");
-  }
-
-  return response.json();
-}
-
-// Prefetch thread data
-export const prefetchThread = (uri: string) => {
-  preload(getThreadKey(uri), () => fetchThread(uri));
-};
-
-// Link component for opening thread pages with prefetching
-export function ThreadLink(props: {
-  threadUri: string;
-  parent?: OpenPage;
-  children: React.ReactNode;
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-}) {
-  const { threadUri, parent, children, className, onClick } = props;
-
-  const handleClick = (e: React.MouseEvent) => {
-    onClick?.(e);
-    if (e.defaultPrevented) return;
-    openPage(parent, { type: "thread", uri: threadUri });
-  };
-
-  const handlePrefetch = () => {
-    prefetchThread(threadUri);
-  };
-
-  return (
-    <button
-      className={className}
-      onClick={handleClick}
-      onMouseEnter={handlePrefetch}
-      onPointerDown={handlePrefetch}
-    >
-      {children}
-    </button>
-  );
-}
-
 export function ThreadPage(props: {
   threadUri: string;
   pageId: string;
···
   } = useSWR(threadUri ? getThreadKey(threadUri) : null, () =>
     fetchThread(threadUri),
   );
-  let cardBorderHidden = useCardBorderHidden(null);
 
   return (
     <PageWrapper
···
             replies={thread.replies as any[]}
             threadUri={threadUri}
             depth={0}
+            parentAuthorDid={thread.post.author.did}
           />
         </div>
       )}
···
 }) {
   const { post, isMainPost, showReplyLine, threadUri } = props;
   const postView = post.post;
-  const record = postView.record as AppBskyFeedPost.Record;
-
-  const postId = postView.uri.split("/")[4];
-  const url = `https://bsky.app/profile/${postView.author.handle}/post/${postId}`;
+  const parent = { type: "thread" as const, uri: threadUri };
 
   return (
     <div className="flex gap-2 relative">
···
         <div className="absolute left-[19px] top-10 bottom-0 w-0.5 bg-border-light" />
       )}
 
-      <div className="flex flex-col items-center shrink-0">
-        {postView.author.avatar ? (
-          <img
-            src={postView.author.avatar}
-            alt={`${postView.author.displayName}'s avatar`}
-            className="w-10 h-10 rounded-full border border-border-light"
-          />
-        ) : (
-          <div className="w-10 h-10 rounded-full border border-border-light bg-border" />
-        )}
-      </div>
-
-      <div
-        className={`flex flex-col grow min-w-0 pb-3 ${isMainPost ? "pb-0" : ""}`}
-      >
-        <div className="flex items-center gap-2 leading-tight">
-          <div className="font-bold text-secondary">
-            {postView.author.displayName}
-          </div>
-          <a
-            className="text-xs text-tertiary hover:underline"
-            target="_blank"
-            href={`https://bsky.app/profile/${postView.author.handle}`}
-          >
-            @{postView.author.handle}
-          </a>
-        </div>
-
-        <div className="flex flex-col gap-2 mt-1">
-          <div className="text-sm text-secondary">
-            <BlueskyRichText record={record} />
-          </div>
-          {postView.embed && (
-            <BlueskyEmbed embed={postView.embed} postUrl={url} />
-          )}
-        </div>
-
-        <div className="flex gap-2 items-center justify-between mt-2">
-          <ClientDate date={record.createdAt} />
-          <div className="flex gap-2 items-center">
-            {postView.replyCount != null && postView.replyCount > 0 && (
-              <>
-                {isMainPost ? (
-                  <div className="flex items-center gap-1 hover:no-underline text-tertiary text-xs">
-                    {postView.replyCount}
-                    <CommentTiny />
-                  </div>
-                ) : (
-                  <ThreadLink
-                    threadUri={postView.uri}
-                    parent={{ type: "thread", uri: threadUri }}
-                    className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast"
-                  >
-                    {postView.replyCount}
-                    <CommentTiny />
-                  </ThreadLink>
-                )}
-                <Separator classname="h-4" />
-              </>
-            )}
-            <a className="text-tertiary" target="_blank" href={url}>
-              <BlueskyTiny />
-            </a>
-          </div>
-        </div>
-      </div>
+      <BskyPostContent
+        post={postView}
+        parent={parent}
+        linksEnabled={!isMainPost}
+        showBlueskyLink={true}
+        showEmbed={true}
+      />
     </div>
   );
 }
···
   replies: (ThreadViewPost | NotFoundPost | BlockedPost)[];
   threadUri: string;
   depth: number;
+  parentAuthorDid?: string;
 }) {
-  const { replies, threadUri, depth } = props;
+  const { replies, threadUri, depth, parentAuthorDid } = props;
   const collapsedThreads = useThreadState((s) => s.collapsedThreads);
   const toggleCollapsed = useThreadState((s) => s.toggleCollapsed);
 
+  // Sort replies so that replies from the parent author come first
+  const sortedReplies = parentAuthorDid
+    ? [...replies].sort((a, b) => {
+        const aIsAuthor =
+          AppBskyFeedDefs.isThreadViewPost(a) &&
+          a.post.author.did === parentAuthorDid;
+        const bIsAuthor =
+          AppBskyFeedDefs.isThreadViewPost(b) &&
+          b.post.author.did === parentAuthorDid;
+        if (aIsAuthor && !bIsAuthor) return -1;
+        if (!aIsAuthor && bIsAuthor) return 1;
+        return 0;
+      })
+    : replies;
+
   return (
     <div className="flex flex-col gap-0">
-      {replies.map((reply, index) => {
+      {sortedReplies.map((reply, index) => {
         if (AppBskyFeedDefs.isNotFoundPost(reply)) {
           return (
             <div
···
                       replies={reply.replies as any[]}
                       threadUri={threadUri}
                       depth={depth + 1}
+                      parentAuthorDid={reply.post.author.did}
                     />
                   </div>
                 )}
···
   isLast: boolean;
   threadUri: string;
 }) {
-  const { post, showReplyLine, isLast, threadUri } = props;
+  const { post, threadUri } = props;
   const postView = post.post;
-  const record = postView.record as AppBskyFeedPost.Record;
-
-  const postId = postView.uri.split("/")[4];
-  const url = `https://bsky.app/profile/${postView.author.handle}/post/${postId}`;
-
   const parent = { type: "thread" as const, uri: threadUri };
 
   return (
···
       className="flex gap-2 relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer"
       onClick={() => openPage(parent, { type: "thread", uri: postView.uri })}
     >
-      <div className="flex flex-col items-center shrink-0">
-        {postView.author.avatar ? (
-          <img
-            src={postView.author.avatar}
-            alt={`${postView.author.displayName}'s avatar`}
-            className="w-8 h-8 rounded-full border border-border-light"
-          />
-        ) : (
-          <div className="w-8 h-8 rounded-full border border-border-light bg-border" />
-        )}
-      </div>
-
-      <div className="flex flex-col grow min-w-0">
-        <div className="flex items-center gap-2 leading-tight text-sm">
-          <div className="font-bold text-secondary">
-            {postView.author.displayName}
-          </div>
-          <a
-            className="text-xs text-tertiary hover:underline"
-            target="_blank"
-            href={`https://bsky.app/profile/${postView.author.handle}`}
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{postView.author.handle}
-          </a>
-        </div>
-
-        <div className="text-sm text-secondary mt-0.5">
-          <BlueskyRichText record={record} />
-        </div>
-
-        <div className="flex gap-2 items-center mt-1">
-          <ClientDate date={record.createdAt} />
-          {postView.replyCount != null && postView.replyCount > 0 && (
-            <>
-              <Separator classname="h-3" />
-              <ThreadLink
-                threadUri={postView.uri}
-                parent={parent}
-                className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast"
-                onClick={(e) => e.stopPropagation()}
-              >
-                {postView.replyCount}
-                <CommentTiny />
-              </ThreadLink>
-            </>
-          )}
-        </div>
-      </div>
+      <BskyPostContent
+        post={postView}
+        parent={parent}
+        linksEnabled={true}
+        avatarSize="sm"
+        showEmbed={false}
+        showBlueskyLink={false}
+        onLinkClick={(e) => e.stopPropagation()}
+        onEmbedClick={(e) => e.stopPropagation()}
+      />
     </div>
   );
 }
-
-const ClientDate = (props: { date?: string }) => {
-  const 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>;
-};