linear threadded replies

src/components/UniversalPostRenderer.tsx

···
   useQueryIdentity,
   useQueryPost,
   useQueryProfile,
+  yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks,
 } from "~/utils/useQuery";
 
 function asTyped<T extends { $type: string }>(obj: T): $Typed<T> {
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
-  lightboxCallback?: (d:LightboxProps) => void;
+  lightboxCallback?: (d: LightboxProps) => void;
+  maxReplies?: number;
 }
 
 // export async function cachedGetRecord({
···
   dataIndexPropPass,
   nopics,
   lightboxCallback,
+  maxReplies,
 }: UniversalPostRendererATURILoaderProps) {
   // /*mass comment*/ console.log("atUri", atUri);
   //const { get, set } = usePersistentStore();
···
     );
   }, [links]);
 
+  // const { data: repliesData } = useQueryConstellation({
+  //   method: "/links",
+  //   target: atUri,
+  //   collection: "app.bsky.feed.post",
+  //   path: ".reply.parent.uri",
+  // });
+
+  const infinitequeryresults = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        method: "/links",
+        target: atUri,
+        collection: "app.bsky.feed.post",
+        path: ".reply.parent.uri",
+      }
+    ),
+    enabled: !!atUri && !!maxReplies,
+  });
+
+  const {
+    data: repliesData,
+    // fetchNextPage,
+    // hasNextPage,
+    // isFetchingNextPage,
+  } = infinitequeryresults;
+
+  // auto-fetch all pages
+  useEffect(() => {
+    if (!maxReplies) return;
+    if (
+      infinitequeryresults.hasNextPage &&
+      !infinitequeryresults.isFetchingNextPage
+    ) {
+      console.log("Fetching the next page...");
+      infinitequeryresults.fetchNextPage();
+    }
+  }, [infinitequeryresults]);
+
+  const replyAturis = repliesData
+    ? repliesData.pages.flatMap((page) =>
+        page
+          ? page.linking_records.map((record) => {
+              const aturi = `at://${record.did}/${record.collection}/${record.rkey}`;
+              return aturi;
+            })
+          : []
+      )
+    : [];
+
+  //const [oldestOpsReply, setOldestOpsReply] = useState<string | undefined>(undefined);
+
+  const { oldestOpsReply, oldestOpsReplyElseNewestNonOpsReply } = (() => {
+    if (!replyAturis || replyAturis.length === 0 || !maxReplies)
+      return {
+        oldestOpsReply: undefined,
+        oldestOpsReplyElseNewestNonOpsReply: undefined,
+      };
+
+    const opdid = new AtUri(
+      //postQuery?.value.reply?.root.uri ?? postQuery?.uri ?? atUri
+      atUri
+    ).host;
+
+    const opReplies = replyAturis.filter(
+      (aturi) => new AtUri(aturi).host === opdid
+    );
+
+    if (opReplies.length > 0) {
+      const opreply = opReplies[opReplies.length - 1];
+      //setOldestOpsReply(opreply);
+      return {
+        oldestOpsReply: opreply,
+        oldestOpsReplyElseNewestNonOpsReply: opreply,
+      };
+    } else {
+      return {
+        oldestOpsReply: undefined,
+        oldestOpsReplyElseNewestNonOpsReply: replyAturis[0],
+      };
+    }
+  })();
+
   // const navigateToProfile = (e: React.MouseEvent) => {
   //   e.stopPropagation();
   //   if (resolved?.did) {
···
   }
 
   return (
-    <UniversalPostRendererRawRecordShim
-      detailed={detailed}
-      postRecord={postQuery}
-      profileRecord={opProfile}
-      aturi={atUri}
-      resolved={resolved}
-      likesCount={likes}
-      repostsCount={reposts}
-      repliesCount={replies}
-      bottomReplyLine={bottomReplyLine}
-      topReplyLine={topReplyLine}
-      bottomBorder={bottomBorder}
-      feedviewpost={feedviewpost}
-      repostedby={repostedby}
-      style={style}
-      ref={ref}
-      dataIndexPropPass={dataIndexPropPass}
-      nopics={nopics}
-      lightboxCallback={lightboxCallback}
-    />
+    <>
+      {/* <span>uprrs {maxReplies} {!!maxReplies&&!!oldestOpsReplyElseNewestNonOpsReply ? "true" : "false"}</span> */}
+      <UniversalPostRendererRawRecordShim
+        detailed={detailed}
+        postRecord={postQuery}
+        profileRecord={opProfile}
+        aturi={atUri}
+        resolved={resolved}
+        likesCount={likes}
+        repostsCount={reposts}
+        repliesCount={replies}
+        bottomReplyLine={
+          maxReplies && oldestOpsReplyElseNewestNonOpsReply
+            ? true
+            : maxReplies && !oldestOpsReplyElseNewestNonOpsReply
+              ? false
+              : bottomReplyLine
+        }
+        topReplyLine={topReplyLine}
+        //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder}
+        bottomBorder={
+          maxReplies && oldestOpsReplyElseNewestNonOpsReply
+            ? false
+            : maxReplies === 0
+              ? false
+              : bottomBorder
+        }
+        feedviewpost={feedviewpost}
+        repostedby={repostedby}
+        //style={{...style, background: oldestOpsReply === atUri ? "Red" : undefined}}
+        style={style}
+        ref={ref}
+        dataIndexPropPass={dataIndexPropPass}
+        nopics={nopics}
+        lightboxCallback={lightboxCallback}
+        maxReplies={maxReplies}
+      />
+      {oldestOpsReplyElseNewestNonOpsReply && (
+        <>
+          {/* <span>hello {maxReplies}</span> */}
+          <UniversalPostRendererATURILoader
+            //detailed={detailed}
+            atUri={oldestOpsReplyElseNewestNonOpsReply}
+            bottomReplyLine={(maxReplies ?? 0) > 0}
+            topReplyLine={(maxReplies ?? 0) > 1}
+            bottomBorder={bottomBorder}
+            feedviewpost={feedviewpost}
+            repostedby={repostedby}
+            style={style}
+            ref={ref}
+            dataIndexPropPass={dataIndexPropPass}
+            nopics={nopics}
+            lightboxCallback={lightboxCallback}
+            maxReplies={
+              maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined
+            }
+          />
+      {maxReplies && maxReplies - 1 === 0 && (
+        <MoreReplies atUri={oldestOpsReplyElseNewestNonOpsReply} />
+      )}
+        </>
+      )}
+    </>
+  );
+}
+
+function MoreReplies({ atUri }: { atUri: string }) {
+  const navigate = useNavigate();
+  const aturio = new AtUri(atUri);
+  return (
+    <div
+      onClick={() =>
+        navigate({
+          to: "/profile/$did/post/$rkey",
+          params: { did: aturio.host, rkey: aturio.rkey },
+        })
+      }
+      className="border-b border-gray-300 dark:border-gray-800 flex flex-row px-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 transition-colors"
+    >
+      <div className="w-[42px] h-12 flex flex-col items-center justify-center">
+        <div
+          style={{
+            width: 2,
+            height: "100%",
+            backgroundImage:
+              "repeating-linear-gradient(to bottom, var(--color-gray-500) 0, var(--color-gray-500) 4px, transparent 4px, transparent 8px)",
+            opacity: 0.5,
+          }}
+          className="dark:bg-[repeating-linear-gradient(to_bottom,var(--color-gray-500)_0,var(--color-gray-400)_4px,transparent_4px,transparent_8px)]"
+          //className="border-gray-400 dark:border-gray-500"
+        />
+      </div>
+
+      <div className="flex items-center pl-3 text-sm text-gray-500 dark:text-gray-400 select-none">
+        More Replies
+      </div>
+    </div>
   );
 }
 
···
   dataIndexPropPass,
   nopics,
   lightboxCallback,
+  maxReplies,
 }: {
   postRecord: any;
   profileRecord: any;
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
-  lightboxCallback?: (d:LightboxProps) => void;
+  lightboxCallback?: (d: LightboxProps) => void;
+  maxReplies?: number;
 }) {
   // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`);
   const navigate = useNavigate();
···
         dataIndexPropPass={dataIndexPropPass}
         nopics={nopics}
         lightboxCallback={lightboxCallback}
+        maxReplies={maxReplies}
       />
     </>
   );
···
   PostView,
   //ThreadViewPost,
 } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import ReactPlayer from "react-player";
 
···
   ref,
   dataIndexPropPass,
   nopics,
-  lightboxCallback
+  lightboxCallback,
+  maxReplies,
 }: {
   post: PostView;
   // optional for now because i havent ported every use to this yet
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
-  lightboxCallback?: (d:LightboxProps) => void;
+  lightboxCallback?: (d: LightboxProps) => void;
+  maxReplies?: number;
 }) {
   const parsed = new AtUri(post.uri);
   const navigate = useNavigate();
···
             >
               {fedi ? (
                 <>
-                  <span className="dangerousFediContent"
+                  <span
+                    className="dangerousFediContent"
                     dangerouslySetInnerHTML={{
                       __html: DOMPurify.sanitize(fedi),
                     }}
···
   navigate,
   postid,
   nopics,
-  lightboxCallback
+  lightboxCallback,
 }: {
   embed?: Embed;
   moderation?: ModerationDecision;
···
   navigate: (_: any) => void;
   postid?: { did: string; rkey: string };
   nopics?: boolean;
-  lightboxCallback?: (d:LightboxProps) => void;
+  lightboxCallback?: (d: LightboxProps) => void;
 }) {
   //const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
-  function setLightboxIndex(number:number) {
+  function setLightboxIndex(number: number) {
     navigate({
-    to: "/profile/$did/post/$rkey/image/$i",
-    params: {
-      did: postid?.did,
-      rkey: postid?.rkey,
-      i: number.toString(),
-    },
-  });
+      to: "/profile/$did/post/$rkey/image/$i",
+      params: {
+        did: postid?.did,
+        rkey: postid?.rkey,
+        i: number.toString(),
+      },
+    });
   }
   if (
     AppBskyEmbedRecordWithMedia.isView(embed) &&
···
       src: img.fullsize,
       alt: img.alt,
     }));
-    console.log("rendering images")
+    console.log("rendering images");
     if (lightboxCallback) {
-      lightboxCallback({images: lightboxImages})
-      console.log("rendering images")
-    };
+      lightboxCallback({ images: lightboxImages });
+      console.log("rendering images");
+    }
 
     if (nopics) return;
 

src/routes/profile.$did/post.$rkey.tsx

···
-import { useQueryClient } from "@tanstack/react-query";
+import { AtUri } from "@atproto/api";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
-import React, { useLayoutEffect } from "react";
+import React, { useEffect, useLayoutEffect } from "react";
 
 import { Header } from "~/components/Header";
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 //import { usePersistentStore } from '~/providers/PersistentStoreProvider';
 import {
   constructPostQuery,
-  useQueryConstellation,
   useQueryIdentity,
   useQueryPost,
+  yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks,
 } from "~/utils/useQuery";
 
 import type { LightboxProps } from "./post.$rkey.image.$i";
···
 
   const { data: mainPost } = useQueryPost(atUri);
 
-  const { data: repliesData } = useQueryConstellation({
-    method: "/links",
-    target: atUri,
-    collection: "app.bsky.feed.post",
-    path: ".reply.parent.uri",
+  // const { data: repliesData } = useQueryConstellation({
+  //   method: "/links",
+  //   target: atUri,
+  //   collection: "app.bsky.feed.post",
+  //   path: ".reply.parent.uri",
+  // });
+  // const replies = repliesData?.linking_records.slice(0, 50) ?? [];
+  const infinitequeryresults = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        method: "/links",
+        target: atUri,
+        collection: "app.bsky.feed.post",
+        path: ".reply.parent.uri",
+      }
+    ),
+    enabled: !!atUri,
   });
-  const replies = repliesData?.linking_records.slice(0, 50) ?? [];
+
+  const {
+    data: repliesData,
+    // fetchNextPage,
+    // hasNextPage,
+    // isFetchingNextPage,
+  } = infinitequeryresults;
+
+  // auto-fetch all pages
+  useEffect(() => {
+    if (
+      infinitequeryresults.hasNextPage &&
+      !infinitequeryresults.isFetchingNextPage
+    ) {
+      console.log("Fetching the next page...");
+      infinitequeryresults.fetchNextPage();
+    }
+  }, [infinitequeryresults]);
+
+  const replyAturis = repliesData
+    ? repliesData.pages.flatMap((page) =>
+        page
+          ? page.linking_records.map((record) => {
+              const aturi = `at://${record.did}/${record.collection}/${record.rkey}`;
+              return aturi;
+            })
+          : []
+      )
+    : [];
+
+  const opdid = new AtUri(atUri).host;
+
+  // Find oldest OP reply
+  const oldestOpsIndex = replyAturis.findIndex(
+    (aturi) => new AtUri(aturi).host === opdid
+  );
+
+  // Reorder: move oldest OP reply to the front
+  if (oldestOpsIndex > 0) {
+    const [oldestOpsReply] = replyAturis.splice(oldestOpsIndex, 1);
+    replyAturis.unshift(oldestOpsReply);
+  }
+
 
   const [parents, setParents] = React.useState<any[]>([]);
   const [parentsLoading, setParentsLoading] = React.useState(false);
···
           maxWidth: 600,
           //margin: "0px auto 0",
           padding: 0,
-          minHeight: "100dvh",
+          minHeight: "80dvh",
+          paddingBottom: "20dvh"
         }}
       >
         <div
···
           Replies
         </div>
         <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
-          {replies.length > 0 &&
-            replies.map((reply) => {
-              const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`;
+          {replyAturis.length > 0 &&
+            replyAturis.map((reply) => {
+              //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`;
               return (
                 <UniversalPostRendererATURILoader
-                  key={replyAtUri}
-                  atUri={replyAtUri}
+                  key={reply}
+                  atUri={reply}
+                  maxReplies={4}
                 />
               );
             })}

src/utils/useQuery.ts

···
 import * as ATPAPI from "@atproto/api";
 import {
+  infiniteQueryOptions,
   type QueryFunctionContext,
   queryOptions,
   useInfiniteQuery,
···
     refetchOnWindowFocus: false,
     enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true),
   });
+}
+
+
+export function yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(query?: {
+  method: '/links'
+  target?: string
+  collection: string
+  path: string
+}) {
+  const constellationHost = 'constellation.microcosm.blue'
+  console.log(
+    'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks',
+    query,
+  )
+
+  return infiniteQueryOptions({
+    enabled: !!query?.target,
+    queryKey: [
+      'reddwarf_constellation',
+      query?.method,
+      query?.target,
+      query?.collection,
+      query?.path,
+    ] as const,
+
+    queryFn: async ({pageParam}: {pageParam?: string}) => {
+      if (!query || !query?.target) return undefined
+
+      const method = query.method
+      const target = query.target
+      const collection = query.collection
+      const path = query.path
+      const cursor = pageParam
+
+      const res = await fetch(
+        `https://${constellationHost}${method}?target=${encodeURIComponent(target)}${
+          collection ? `&collection=${encodeURIComponent(collection)}` : ''
+        }${path ? `&path=${encodeURIComponent(path)}` : ''}${
+          cursor ? `&cursor=${encodeURIComponent(cursor)}` : ''
+        }`,
+      )
+
+      if (!res.ok) throw new Error('Failed to fetch')
+
+      return (await res.json()) as linksRecordsResponse
+    },
+
+    getNextPageParam: lastPage => {
+      return (lastPage as any)?.cursor ?? undefined
+    },
+    initialPageParam: undefined,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 5 * 60 * 1000,
+  })
 }