Merge pull request #246 from hyperlink-academy/feature/thread-viewer

Feature/thread viewer

app/api/bsky/thread/route.ts

···
+import { Agent, lexToJson } from "@atproto/api";
+import { ThreadViewPost } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+import { cookies } from "next/headers";
+import { NextRequest } from "next/server";
+import { createOauthClient } from "src/atproto-oauth";
+import { supabaseServerClient } from "supabase/serverClient";
+
+export const runtime = "nodejs";
+
+async function getAuthenticatedAgent(): Promise<Agent | null> {
+  try {
+    const cookieStore = await cookies();
+    const authToken =
+      cookieStore.get("auth_token")?.value ||
+      cookieStore.get("external_auth_token")?.value;
+
+    if (!authToken || authToken === "null") return null;
+
+    const { data } = await supabaseServerClient
+      .from("email_auth_tokens")
+      .select("identities(atp_did)")
+      .eq("id", authToken)
+      .eq("confirmed", true)
+      .single();
+
+    const did = data?.identities?.atp_did;
+    if (!did) return null;
+
+    const oauthClient = await createOauthClient();
+    const session = await oauthClient.restore(did);
+    return new Agent(session);
+  } catch (error) {
+    console.error("Failed to get authenticated agent:", error);
+    return null;
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const searchParams = req.nextUrl.searchParams;
+    const uri = searchParams.get("uri");
+    const depth = searchParams.get("depth");
+    const parentHeight = searchParams.get("parentHeight");
+
+    if (!uri) {
+      return Response.json(
+        { error: "uri parameter is required" },
+        { status: 400 },
+      );
+    }
+
+    // Try to use authenticated agent if user is logged in, otherwise fall back to public API
+    let agent = await getAuthenticatedAgent();
+    if (!agent) {
+      agent = new Agent({
+        service: "https://public.api.bsky.app",
+      });
+    }
+
+    const response = await agent.getPostThread({
+      uri,
+      depth: depth ? parseInt(depth, 10) : 6,
+      parentHeight: parentHeight ? parseInt(parentHeight, 10) : 80,
+    });
+
+    const thread = lexToJson(response.data.thread);
+
+    return Response.json(thread, {
+      headers: {
+        // Cache for 5 minutes on CDN, allow stale content for 1 hour while revalidating
+        "Cache-Control": "public, s-maxage=300, stale-while-revalidate=3600",
+      },
+    });
+  } catch (error) {
+    console.error("Error fetching Bluesky thread:", error);
+    return Response.json({ error: "Failed to fetch thread" }, { status: 500 });
+  }
+}

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

···
 import { useIsMobile } from "src/hooks/isMobile";
 import { setInteractionState } from "./Interactions";
 import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
-import { AtUri } from "@atproto/api";
+import { AtUri, AppBskyFeedPost } from "@atproto/api";
 import { PostPageContext } from "../PostPageContext";
 import {
   PubLeafletBlocksText,
···
 import { openPage } from "../PostPages";
 import useSWR, { mutate } from "swr";
 import { DotLoader } from "components/utils/DotLoader";
+import { CommentTiny } from "components/Icons/CommentTiny";
+import { ThreadLink } from "../ThreadPage";
 
 // Helper to get SWR key for quotes
 export function getQuotesSWRKey(uris: string[]) {
···
 
                 <div className="h-5 w-1 ml-5 border-l border-border-light" />
                 <BskyPost
+                  uri={pv.uri}
                   rkey={new AtUri(pv.uri).rkey}
                   content={pv.record.text as string}
                   user={pv.author.displayName || pv.author.handle}
                   profile={pv.author}
                   handle={pv.author.handle}
+                  replyCount={pv.replyCount}
                 />
               </div>
             );
···
                   return (
                     <BskyPost
                       key={`mention-${index}`}
+                      uri={pv.uri}
                       rkey={new AtUri(pv.uri).rkey}
                       content={pv.record.text as string}
                       user={pv.author.displayName || pv.author.handle}
                       profile={pv.author}
                       handle={pv.author.handle}
+                      replyCount={pv.replyCount}
                     />
                   );
                 })}
···
         className="quoteSectionQuote text-secondary text-sm text-left hover:cursor-pointer"
         onClick={(e) => {
           if (props.position.pageId)
-            flushSync(() => openPage(undefined, props.position.pageId!));
+            flushSync(() => openPage(undefined, { type: "doc", id: props.position.pageId! }));
           let scrollMargin = isMobile
             ? 16
             : e.currentTarget.getBoundingClientRect().top;
···
 };
 
 export const BskyPost = (props: {
+  uri: string;
   rkey: string;
   content: string;
   user: string;
   handle: string;
   profile: ProfileViewBasic;
+  replyCount?: number;
 }) => {
+  const handleOpenThread = () => {
+    openPage(undefined, { type: "thread", uri: props.uri });
+  };
+
   return (
-    <a
-      target="_blank"
-      href={`https://bsky.app/profile/${props.handle}/post/${props.rkey}`}
-      className="quoteSectionBskyItem px-2  flex gap-[6px] hover:no-underline font-normal"
+    <div
+      onClick={handleOpenThread}
+      className="quoteSectionBskyItem px-2 flex gap-[6px] hover:no-underline font-normal cursor-pointer hover:bg-bg-page rounded"
     >
       {props.profile.avatar && (
         <img
-          className="rounded-full w-6 h-6"
+          className="rounded-full w-6 h-6 shrink-0"
           src={props.profile.avatar}
           alt={props.profile.displayName}
         />
       )}
-      <div className="flex flex-col">
-        <div className="flex items-center gap-2">
+      <div className="flex flex-col min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
           <div className="font-bold">{props.user}</div>
-          <div className="text-tertiary">@{props.handle}</div>
+          <a
+            className="text-tertiary hover:underline"
+            href={`https://bsky.app/profile/${props.handle}`}
+            target="_blank"
+            onClick={(e) => e.stopPropagation()}
+          >
+            @{props.handle}
+          </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>
-    </a>
+    </div>
   );
 };
 

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

···
       let uri = b.block.postRef.uri;
       let post = bskyPostData.find((p) => p.uri === uri);
       if (!post) return <div>no prefetched post rip</div>;
-      return <PubBlueskyPostBlock post={post} className={className} />;
+      return <PubBlueskyPostBlock post={post} className={className} pageId={pageId} />;
     }
     case PubLeafletBlocksIframe.isMain(b.block): {
       return (

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

···
 import { Fragment, useEffect } from "react";
 import { flushSync } from "react-dom";
 import { scrollIntoView } from "src/utils/scrollIntoView";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { decodeQuotePosition } from "./quotePosition";
 import { PollData } from "./fetchPollData";
 import { LinearDocumentPage } from "./LinearDocumentPage";
 import { CanvasPage } from "./CanvasPage";
+import { ThreadPage as ThreadPageComponent } from "./ThreadPage";
+
+// Page types
+export type DocPage = { type: "doc"; id: string };
+export type ThreadPage = { type: "thread"; uri: string };
+export type OpenPage = DocPage | ThreadPage;
+
+// Get a stable key for a page
+const getPageKey = (page: OpenPage): string => {
+  if (page.type === "doc") return page.id;
+  return `thread:${page.uri}`;
+};
 
 const usePostPageUIState = create(() => ({
-  pages: [] as string[],
+  pages: [] as OpenPage[],
   initialized: false,
 }));
 
-export const useOpenPages = () => {
+export const useOpenPages = (): OpenPage[] => {
   const { quote } = useParams();
   const state = usePostPageUIState((s) => s);
+  const searchParams = useSearchParams();
+  const pageParam = searchParams.get("page");
 
-  if (!state.initialized && quote) {
-    const decodedQuote = decodeQuotePosition(quote as string);
-    if (decodedQuote?.pageId) {
-      return [decodedQuote.pageId];
+  if (!state.initialized) {
+    // Check for page search param first (for comment links)
+    if (pageParam) {
+      return [{ type: "doc", id: pageParam }];
+    }
+    // Then check for quote param
+    if (quote) {
+      const decodedQuote = decodeQuotePosition(quote as string);
+      if (decodedQuote?.pageId) {
+        return [{ type: "doc", id: decodedQuote.pageId }];
+      }
     }
   }
 
···
 
 export const useInitializeOpenPages = () => {
   const { quote } = useParams();
+  const searchParams = useSearchParams();
+  const pageParam = searchParams.get("page");
 
   useEffect(() => {
     const state = usePostPageUIState.getState();
     if (!state.initialized) {
+      // Check for page search param first (for comment links)
+      if (pageParam) {
+        usePostPageUIState.setState({
+          pages: [{ type: "doc", id: pageParam }],
+          initialized: true,
+        });
+        return;
+      }
+
+      // Then check for quote param
       if (quote) {
         const decodedQuote = decodeQuotePosition(quote as string);
         if (decodedQuote?.pageId) {
           usePostPageUIState.setState({
-            pages: [decodedQuote.pageId],
+            pages: [{ type: "doc", id: decodedQuote.pageId }],
             initialized: true,
           });
           return;
···
 };
 
 export const openPage = (
-  parent: string | undefined,
-  page: string,
+  parent: OpenPage | undefined,
+  page: OpenPage,
   options?: { scrollIntoView?: boolean },
 ) => {
+  const pageKey = getPageKey(page);
+  const parentKey = parent ? getPageKey(parent) : undefined;
+
   flushSync(() => {
     usePostPageUIState.setState((state) => {
-      let parentPosition = state.pages.findIndex((s) => s == parent);
+      let parentPosition = state.pages.findIndex(
+        (s) => getPageKey(s) === parentKey,
+      );
       return {
         pages:
           parentPosition === -1
···
   });
 
   if (options?.scrollIntoView !== false) {
-    scrollIntoView(`post-page-${page}`);
+    scrollIntoView(`post-page-${pageKey}`);
   }
 };
 
-export const closePage = (page: string) =>
+export const closePage = (page: OpenPage) => {
+  const pageKey = getPageKey(page);
   usePostPageUIState.setState((state) => {
-    let parentPosition = state.pages.findIndex((s) => s == page);
+    let parentPosition = state.pages.findIndex(
+      (s) => getPageKey(s) === pageKey,
+    );
     return {
       pages: state.pages.slice(0, parentPosition),
       initialized: true,
     };
   });
+};
 
 // Shared props type for both page components
 export type SharedPageProps = {
···
         />
       )}
 
-      {openPageIds.map((pageId) => {
+      {openPageIds.map((openPage) => {
+        const pageKey = getPageKey(openPage);
+
+        // Handle thread pages
+        if (openPage.type === "thread") {
+          return (
+            <Fragment key={pageKey}>
+              <SandwichSpacer />
+              <ThreadPageComponent
+                threadUri={openPage.uri}
+                pageId={pageKey}
+                hasPageBackground={hasPageBackground}
+                pageOptions={
+                  <PageOptions
+                    onClick={() => closePage(openPage)}
+                    hasPageBackground={hasPageBackground}
+                  />
+                }
+              />
+            </Fragment>
+          );
+        }
+
+        // Handle document pages
         let page = record.pages.find(
           (p) =>
             (
               p as
                 | PubLeafletPagesLinearDocument.Main
                 | PubLeafletPagesCanvas.Main
-            ).id === pageId,
+            ).id === openPage.id,
         ) as
           | PubLeafletPagesLinearDocument.Main
           | PubLeafletPagesCanvas.Main
···
         if (!page) return null;
 
         return (
-          <Fragment key={pageId}>
+          <Fragment key={pageKey}>
             <SandwichSpacer />
             <PageRenderer
               page={page}
···
               pageId={page.id}
               pageOptions={
                 <PageOptions
-                  onClick={() => closePage(page.id!)}
+                  onClick={() => closePage(openPage)}
                   hasPageBackground={hasPageBackground}
                 />
               }

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

···
 import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
-import { useEntitySetContext } from "components/EntitySetProvider";
-import { useEffect, useState } from "react";
-import { useEntity } from "src/replicache";
-import { useUIState } from "src/useUIState";
-import { elementId } from "src/utils/elementId";
-import { focusBlock } from "src/utils/focusBlock";
-import { AppBskyFeedDefs, AppBskyFeedPost, RichText } from "@atproto/api";
+import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api";
 import { Separator } from "components/Layout";
 import { useHasPageLoaded } from "components/InitialPageLoadProvider";
 import { BlueskyTiny } from "components/Icons/BlueskyTiny";
···
   PostNotAvailable,
 } 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;
   className: string;
+  pageId?: string;
 }) => {
   let post = props.post;
+
+  const handleOpenThread = () => {
+    openPage(
+      props.pageId ? { type: "doc", id: props.pageId } : undefined,
+      { type: "thread", uri: post.uri },
+    );
+  };
+
   switch (true) {
     case AppBskyFeedDefs.isBlockedPost(post) ||
       AppBskyFeedDefs.isBlockedAuthor(post) ||
···
 
     case AppBskyFeedDefs.validatePostView(post).success:
       let record = post.record as AppBskyFeedDefs.PostView["record"];
-      let facets = record.facets;
 
       // silliness to get the text and timestamp from the record with proper types
-      let text: string | null = null;
       let timestamp: string | undefined = undefined;
       if (AppBskyFeedPost.isRecord(record)) {
-        text = (record as AppBskyFeedPost.Record).text;
         timestamp = (record as AppBskyFeedPost.Record).createdAt;
       }
 
···
       let postId = post.uri.split("/")[4];
       let url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
 
+      const parent = props.pageId ? { type: "doc" as const, id: props.pageId } : 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 && (
···
                     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>
···
                   </pre>
                 </div>
                 {post.embed && (
-                  <BlueskyEmbed embed={post.embed} postUrl={url} />
+                  <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 && post.replyCount > 0 && (
+              {post.replyCount != null && post.replyCount > 0 && (
                 <>
-                  <a
-                    className="flex items-center gap-1 hover:no-underline"
-                    target="_blank"
-                    href={url}
+                  <ThreadLink
+                    threadUri={post.uri}
+                    parent={parent}
+                    className="flex items-center gap-1 hover:text-accent-contrast"
+                    onClick={(e) => e.stopPropagation()}
                   >
                     {post.replyCount}
                     <CommentTiny />
-                  </a>
+                  </ThreadLink>
                   <Separator classname="h-4" />
                 </>
               )}
 
-              <a className="" target="_blank" href={url}>
+              <a
+                className=""
+                target="_blank"
+                href={url}
+                onClick={(e) => e.stopPropagation()}
+              >
                 <BlueskyTiny />
               </a>
             </div>

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

···
 }) {
   //switch to use actually state
   let openPages = useOpenPages();
-  let isOpen = openPages.includes(props.pageId);
+  let isOpen = openPages.some(
+    (p) => p.type === "doc" && p.id === props.pageId,
+  );
   return (
     <div
       className={`w-full cursor-pointer
···
         e.preventDefault();
         e.stopPropagation();
 
-        openPage(props.parentPageId, props.pageId);
+        openPage(
+          props.parentPageId ? { type: "doc", id: props.parentPageId } : undefined,
+          { type: "doc", id: props.pageId },
+        );
       }}
     >
       {props.isCanvas ? (
···
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            openPage(props.parentPageId, props.pageId, {
-              scrollIntoView: false,
-            });
+            openPage(
+              props.parentPageId ? { type: "doc", id: props.parentPageId } : undefined,
+              { type: "doc", id: props.pageId },
+              { scrollIntoView: false },
+            );
             if (!drawerOpen || drawer !== "quotes")
               openInteractionDrawer("quotes", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
···
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            openPage(props.parentPageId, props.pageId, {
-              scrollIntoView: false,
-            });
+            openPage(
+              props.parentPageId ? { type: "doc", id: props.parentPageId } : undefined,
+              { type: "doc", id: props.pageId },
+              { scrollIntoView: false },
+            );
             if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
               openInteractionDrawer("comments", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });

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

···
+"use client";
+import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api";
+import useSWR, { preload } 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";
+
+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;
+  pageOptions?: React.ReactNode;
+  hasPageBackground: boolean;
+}) {
+  const { threadUri, pageId, pageOptions } = props;
+  const drawer = useDrawerOpen(threadUri);
+
+  const {
+    data: thread,
+    isLoading,
+    error,
+  } = useSWR(threadUri ? getThreadKey(threadUri) : null, () =>
+    fetchThread(threadUri),
+  );
+  let cardBorderHidden = useCardBorderHidden(null);
+
+  return (
+    <PageWrapper
+      cardBorderHidden={!!cardBorderHidden}
+      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">
+        {isLoading ? (
+          <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm py-8">
+            <span>loading thread</span>
+            <DotLoader />
+          </div>
+        ) : error ? (
+          <div className="text-tertiary italic text-sm text-center py-8">
+            Failed to load thread
+          </div>
+        ) : thread ? (
+          <ThreadContent thread={thread} threadUri={threadUri} />
+        ) : null}
+      </div>
+    </PageWrapper>
+  );
+}
+
+function ThreadContent(props: { thread: ThreadType; threadUri: string }) {
+  const { thread, threadUri } = props;
+
+  if (AppBskyFeedDefs.isNotFoundPost(thread)) {
+    return <PostNotAvailable />;
+  }
+
+  if (AppBskyFeedDefs.isBlockedPost(thread)) {
+    return (
+      <div className="text-tertiary italic text-sm text-center py-8">
+        This post is blocked
+      </div>
+    );
+  }
+
+  if (!AppBskyFeedDefs.isThreadViewPost(thread)) {
+    return <PostNotAvailable />;
+  }
+
+  // Collect all parent posts in order (oldest first)
+  const parents: ThreadViewPost[] = [];
+  let currentParent = thread.parent;
+  while (currentParent && AppBskyFeedDefs.isThreadViewPost(currentParent)) {
+    parents.unshift(currentParent);
+    currentParent = currentParent.parent;
+  }
+
+  return (
+    <div className="flex flex-col gap-0">
+      {/* Parent posts */}
+      {parents.map((parent, index) => (
+        <div key={parent.post.uri} className="flex flex-col">
+          <ThreadPost
+            post={parent}
+            isMainPost={false}
+            showReplyLine={index < parents.length - 1 || true}
+            threadUri={threadUri}
+          />
+        </div>
+      ))}
+
+      {/* Main post */}
+      <ThreadPost
+        post={thread}
+        isMainPost={true}
+        showReplyLine={false}
+        threadUri={threadUri}
+      />
+
+      {/* Replies */}
+      {thread.replies && thread.replies.length > 0 && (
+        <div className="flex flex-col mt-2 pt-2 border-t border-border-light">
+          <div className="text-tertiary text-xs font-bold mb-2 px-2">
+            Replies
+          </div>
+          <Replies
+            replies={thread.replies as any[]}
+            threadUri={threadUri}
+            depth={0}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ThreadPost(props: {
+  post: ThreadViewPost;
+  isMainPost: boolean;
+  showReplyLine: boolean;
+  threadUri: string;
+}) {
+  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}`;
+
+  return (
+    <div className="flex gap-2 relative">
+      {/* Reply line connector */}
+      {showReplyLine && (
+        <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>
+    </div>
+  );
+}
+
+function Replies(props: {
+  replies: (ThreadViewPost | NotFoundPost | BlockedPost)[];
+  threadUri: string;
+  depth: number;
+}) {
+  const { replies, threadUri, depth } = props;
+
+  return (
+    <div className="flex flex-col gap-0">
+      {replies.map((reply, index) => {
+        if (AppBskyFeedDefs.isNotFoundPost(reply)) {
+          return (
+            <div
+              key={`not-found-${index}`}
+              className="text-tertiary italic text-xs py-2 px-2"
+            >
+              Post not found
+            </div>
+          );
+        }
+
+        if (AppBskyFeedDefs.isBlockedPost(reply)) {
+          return (
+            <div
+              key={`blocked-${index}`}
+              className="text-tertiary italic text-xs py-2 px-2"
+            >
+              Post blocked
+            </div>
+          );
+        }
+
+        if (!AppBskyFeedDefs.isThreadViewPost(reply)) {
+          return null;
+        }
+
+        const hasReplies = reply.replies && reply.replies.length > 0;
+
+        return (
+          <div key={reply.post.uri} className="flex flex-col">
+            <ReplyPost
+              post={reply}
+              showReplyLine={hasReplies || index < replies.length - 1}
+              isLast={index === replies.length - 1 && !hasReplies}
+              threadUri={threadUri}
+            />
+            {hasReplies && depth < 3 && (
+              <div className="ml-5 pl-5 border-l border-border-light">
+                <Replies
+                  replies={reply.replies as any[]}
+                  threadUri={threadUri}
+                  depth={depth + 1}
+                />
+              </div>
+            )}
+            {hasReplies && depth >= 3 && (
+              <ThreadLink
+                threadUri={reply.post.uri}
+                parent={{ type: "thread", uri: threadUri }}
+                className="ml-12 text-xs text-accent-contrast hover:underline py-1"
+              >
+                View more replies
+              </ThreadLink>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ReplyPost(props: {
+  post: ThreadViewPost;
+  showReplyLine: boolean;
+  isLast: boolean;
+  threadUri: string;
+}) {
+  const { post, showReplyLine, isLast, 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 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>
+    </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>;
+};

components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx

···
       return (
         <div className="flex flex-wrap rounded-md w-full overflow-hidden">
           {imageEmbed.images.map(
-            (image: { fullsize: string; alt?: string }, i: number) => (
-              <img
-                key={i}
-                src={image.fullsize}
-                alt={image.alt || "Post image"}
-                className={`
-                  overflow-hidden w-full object-cover
-                  ${imageEmbed.images.length === 1 && "h-auto max-h-[800px]"}
-                  ${imageEmbed.images.length === 2 && "basis-1/2 aspect-square"}
-                  ${imageEmbed.images.length === 3 && "basis-1/3 aspect-2/3"}
+            (
+              image: {
+                fullsize: string;
+                alt?: string;
+                aspectRatio?: { width: number; height: number };
+              },
+              i: number,
+            ) => {
+              const isSingle = imageEmbed.images.length === 1;
+              const aspectRatio = image.aspectRatio
+                ? image.aspectRatio.width / image.aspectRatio.height
+                : undefined;
+
+              return (
+                <img
+                  key={i}
+                  src={image.fullsize}
+                  alt={image.alt || "Post image"}
+                  style={
+                    isSingle && aspectRatio
+                      ? { aspectRatio: String(aspectRatio) }
+                      : undefined
+                  }
+                  className={`
+                    overflow-hidden w-full object-cover
+                    ${isSingle && "max-h-[800px]"}
+                    ${imageEmbed.images.length === 2 && "basis-1/2 aspect-square"}
+                    ${imageEmbed.images.length === 3 && "basis-1/3 aspect-2/3"}
                     ${
                       imageEmbed.images.length === 4
                         ? "basis-1/2 aspect-3/2"
-                        : `basis-1/${imageEmbed.images.length} `
+                        : `basis-1/${imageEmbed.images.length}`
                     }
-                `}
-              />
-            ),
+                  `}
+                />
+              );
+            },
           )}
         </div>
       );
···
       let isGif = externalEmbed.external.uri.includes(".gif");
       if (isGif) {
         return (
-          <div className="flex flex-col border border-border-light rounded-md overflow-hidden">
+          <div className="flex flex-col border border-border-light rounded-md overflow-hidden aspect-video">
             <img
               src={externalEmbed.external.uri}
               alt={externalEmbed.external.title}
-              className="object-cover"
+              className="w-full h-full object-cover"
             />
           </div>
         );
···
         >
           {externalEmbed.external.thumb === undefined ? null : (
             <>
-              <img
-                src={externalEmbed.external.thumb}
-                alt={externalEmbed.external.title}
-                className="object-cover"
-              />
-
-              <hr className="border-border-light " />
+              <div className="w-full aspect-[1.91/1] overflow-hidden">
+                <img
+                  src={externalEmbed.external.thumb}
+                  alt={externalEmbed.external.title}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <hr className="border-border-light" />
             </>
           )}
           <div className="p-2 flex flex-col gap-1">
···
       );
     case AppBskyEmbedVideo.isView(props.embed):
       let videoEmbed = props.embed;
+      const videoAspectRatio = videoEmbed.aspectRatio
+        ? videoEmbed.aspectRatio.width / videoEmbed.aspectRatio.height
+        : 16 / 9;
       return (
-        <div className="rounded-md overflow-hidden relative">
+        <div
+          className="rounded-md overflow-hidden relative w-full"
+          style={{ aspectRatio: String(videoAspectRatio) }}
+        >
           <img
             src={videoEmbed.thumbnail}
             alt={
               "Thumbnail from embedded video. Go to Bluesky to see the full post."
             }
-            className={`overflow-hidden w-full object-cover`}
+            className="absolute inset-0 w-full h-full object-cover"
           />
-          <div className="overlay absolute top-0 right-0 left-0 bottom-0 bg-primary opacity-65" />
+          <div className="overlay absolute inset-0 bg-primary opacity-65" />
           <div className="absolute w-max top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-border-light rounded-md">
             <SeePostOnBluesky postUrl={props.postUrl} />
           </div>

components/Blocks/BlueskyPostBlock/index.tsx

···
           <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 && post.post.replyCount > 0 && (
+              {post.post.replyCount != null && post.post.replyCount > 0 && (
                 <>
                   <a
                     className="flex items-center gap-1 hover:no-underline"