post interactions

src/auto-imports.d.ts

···
   const IconMaterialSymbolsTag: typeof import('~icons/material-symbols/tag.jsx').default
   const IconMdiAccountCircle: typeof import('~icons/mdi/account-circle.jsx').default
   const IconMdiAccountPlus: typeof import('~icons/mdi/account-plus.jsx').default
+  const IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default
   const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default
 }

src/components/UniversalPostRenderer.tsx

···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
+  concise?: boolean;
   lightboxCallback?: (d: LightboxProps) => void;
   maxReplies?: number;
   isQuote?: boolean;
···
   ref,
   dataIndexPropPass,
   nopics,
+  concise,
   lightboxCallback,
   maxReplies,
   isQuote,
···
         ref={ref}
         dataIndexPropPass={dataIndexPropPass}
         nopics={nopics}
+        concise={concise}
         lightboxCallback={lightboxCallback}
         maxReplies={maxReplies}
         isQuote={isQuote}
···
             ref={ref}
             dataIndexPropPass={dataIndexPropPass}
             nopics={nopics}
+            concise={concise}
             lightboxCallback={lightboxCallback}
             maxReplies={
               maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined
···
   ref,
   dataIndexPropPass,
   nopics,
+  concise,
   lightboxCallback,
   maxReplies,
   isQuote,
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
+  concise?: boolean;
   lightboxCallback?: (d: LightboxProps) => void;
   maxReplies?: number;
   isQuote?: boolean;
···
         ref={ref}
         dataIndexPropPass={dataIndexPropPass}
         nopics={nopics}
+        concise={concise}
         lightboxCallback={lightboxCallback}
         maxReplies={maxReplies}
         isQuote={isQuote}
···
   ref,
   dataIndexPropPass,
   nopics,
+  concise,
   lightboxCallback,
   maxReplies,
 }: {
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
+  concise?: boolean;
   lightboxCallback?: (d: LightboxProps) => void;
   maxReplies?: number;
 }) {
···
             <div
               style={{
                 fontSize: 16,
-                marginBottom: !post.embed /*|| depth > 0*/ ? 0 : 8,
+                marginBottom: !post.embed || concise ? 0 : 8,
                 whiteSpace: "pre-wrap",
                 textAlign: "left",
                 overflowWrap: "anywhere",
                 wordBreak: "break-word",
-                //color: theme.text,
+                ...(concise && {
+                  display: "-webkit-box",
+                  WebkitBoxOrient: "vertical",
+                  WebkitLineClamp: 2,
+                  overflow: "hidden",
+                }),
               }}
               className="text-gray-900 dark:text-gray-100"
             >
···
                 </>
               )}
             </div>
-            {post.embed && depth < 1 ? (
+            {post.embed && depth < 1 && !concise ? (
               <PostEmbeds
                 embed={post.embed}
                 //moderation={moderation}
···
                 </div>
               </>
             )}
-            <div style={{ paddingTop: post.embed && depth < 1 ? 4 : 0 }}>
+            <div style={{ paddingTop: post.embed && !concise && depth < 1 ? 4 : 0 }}>
               <>
                 {expanded && (
                   <div

src/routeTree.gen.ts

···
 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b'
 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a'
 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey'
+import { Route as ProfileDidPostRkeyRepostedByRouteImport } from './routes/profile.$did/post.$rkey.reposted-by'
+import { Route as ProfileDidPostRkeyQuotesRouteImport } from './routes/profile.$did/post.$rkey.quotes'
+import { Route as ProfileDidPostRkeyLikedByRouteImport } from './routes/profile.$did/post.$rkey.liked-by'
 import { Route as ProfileDidPostRkeyImageIRouteImport } from './routes/profile.$did/post.$rkey.image.$i'
 
 const SettingsRoute = SettingsRouteImport.update({
···
   path: '/profile/$did/post/$rkey',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ProfileDidPostRkeyRepostedByRoute =
+  ProfileDidPostRkeyRepostedByRouteImport.update({
+    id: '/reposted-by',
+    path: '/reposted-by',
+    getParentRoute: () => ProfileDidPostRkeyRoute,
+  } as any)
+const ProfileDidPostRkeyQuotesRoute =
+  ProfileDidPostRkeyQuotesRouteImport.update({
+    id: '/quotes',
+    path: '/quotes',
+    getParentRoute: () => ProfileDidPostRkeyRoute,
+  } as any)
+const ProfileDidPostRkeyLikedByRoute =
+  ProfileDidPostRkeyLikedByRouteImport.update({
+    id: '/liked-by',
+    path: '/liked-by',
+    getParentRoute: () => ProfileDidPostRkeyRoute,
+  } as any)
 const ProfileDidPostRkeyImageIRoute =
   ProfileDidPostRkeyImageIRouteImport.update({
     id: '/image/$i',
···
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did': typeof ProfileDidIndexRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
+  '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute
+  '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute
+  '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute
   '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute
 }
 export interface FileRoutesByTo {
···
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did': typeof ProfileDidIndexRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
+  '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute
+  '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute
+  '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute
   '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute
 }
 export interface FileRoutesById {
···
   '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did/': typeof ProfileDidIndexRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
+  '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute
+  '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute
+  '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute
   '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute
 }
 export interface FileRouteTypes {
···
     | '/route-b'
     | '/profile/$did'
     | '/profile/$did/post/$rkey'
+    | '/profile/$did/post/$rkey/liked-by'
+    | '/profile/$did/post/$rkey/quotes'
+    | '/profile/$did/post/$rkey/reposted-by'
     | '/profile/$did/post/$rkey/image/$i'
   fileRoutesByTo: FileRoutesByTo
   to:
···
     | '/route-b'
     | '/profile/$did'
     | '/profile/$did/post/$rkey'
+    | '/profile/$did/post/$rkey/liked-by'
+    | '/profile/$did/post/$rkey/quotes'
+    | '/profile/$did/post/$rkey/reposted-by'
     | '/profile/$did/post/$rkey/image/$i'
   id:
     | '__root__'
···
     | '/_pathlessLayout/_nested-layout/route-b'
     | '/profile/$did/'
     | '/profile/$did/post/$rkey'
+    | '/profile/$did/post/$rkey/liked-by'
+    | '/profile/$did/post/$rkey/quotes'
+    | '/profile/$did/post/$rkey/reposted-by'
     | '/profile/$did/post/$rkey/image/$i'
   fileRoutesById: FileRoutesById
 }
···
       preLoaderRoute: typeof ProfileDidPostRkeyRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/profile/$did/post/$rkey/reposted-by': {
+      id: '/profile/$did/post/$rkey/reposted-by'
+      path: '/reposted-by'
+      fullPath: '/profile/$did/post/$rkey/reposted-by'
+      preLoaderRoute: typeof ProfileDidPostRkeyRepostedByRouteImport
+      parentRoute: typeof ProfileDidPostRkeyRoute
+    }
+    '/profile/$did/post/$rkey/quotes': {
+      id: '/profile/$did/post/$rkey/quotes'
+      path: '/quotes'
+      fullPath: '/profile/$did/post/$rkey/quotes'
+      preLoaderRoute: typeof ProfileDidPostRkeyQuotesRouteImport
+      parentRoute: typeof ProfileDidPostRkeyRoute
+    }
+    '/profile/$did/post/$rkey/liked-by': {
+      id: '/profile/$did/post/$rkey/liked-by'
+      path: '/liked-by'
+      fullPath: '/profile/$did/post/$rkey/liked-by'
+      preLoaderRoute: typeof ProfileDidPostRkeyLikedByRouteImport
+      parentRoute: typeof ProfileDidPostRkeyRoute
+    }
     '/profile/$did/post/$rkey/image/$i': {
       id: '/profile/$did/post/$rkey/image/$i'
       path: '/image/$i'
···
 )
 
 interface ProfileDidPostRkeyRouteChildren {
+  ProfileDidPostRkeyLikedByRoute: typeof ProfileDidPostRkeyLikedByRoute
+  ProfileDidPostRkeyQuotesRoute: typeof ProfileDidPostRkeyQuotesRoute
+  ProfileDidPostRkeyRepostedByRoute: typeof ProfileDidPostRkeyRepostedByRoute
   ProfileDidPostRkeyImageIRoute: typeof ProfileDidPostRkeyImageIRoute
 }
 
 const ProfileDidPostRkeyRouteChildren: ProfileDidPostRkeyRouteChildren = {
+  ProfileDidPostRkeyLikedByRoute: ProfileDidPostRkeyLikedByRoute,
+  ProfileDidPostRkeyQuotesRoute: ProfileDidPostRkeyQuotesRoute,
+  ProfileDidPostRkeyRepostedByRoute: ProfileDidPostRkeyRepostedByRoute,
   ProfileDidPostRkeyImageIRoute: ProfileDidPostRkeyImageIRoute,
 }
 

src/routes/notifications.tsx

···
 import { AtUri } from "@atproto/api";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useAtom } from "jotai";
 import * as React from "react";
 
···
 export const Route = createFileRoute("/notifications")({
   component: NotificationsComponent,
 });
-
 
 export default function NotificationsTabs() {
   const [activeTab, setActiveTab] = React.useState("mentions");
···
   );
 }
 
-
 function PostInteractionsTab() {
   const { agent } = useAuth();
   const { data: identity } = useQueryIdentity(agent?.did);
···
   );
 }
 
+const ORDER: ("like" | "repost" | "reply" | "quote")[] = [
+  "like",
+  "repost",
+  "reply",
+  "quote",
+];
+
 function PostInteractionsItem({ uri }: { uri: string }) {
   const { data: links } = useQueryConstellation({
     method: "/links/all",
     target: uri,
   });
 
-  const interactions = React.useMemo(() => {
-    const likes =
-      links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0;
-    const replies =
-      links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"]?.records || 0;
-    const reposts =
-      links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0;
-    const quotes1 =
-      links?.links?.["app.bsky.feed.post"]?.[".embed.record.uri"]?.records || 0;
-    const quotes2 =
-      links?.links?.["app.bsky.feed.post"]?.[".embed.record.record.uri"]
-        ?.records || 0;
+  const likes =
+    links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0;
+  const replies =
+    links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"]?.records || 0;
+  const reposts =
+    links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0;
+  const quotes1 =
+    links?.links?.["app.bsky.feed.post"]?.[".embed.record.uri"]?.records || 0;
+  const quotes2 =
+    links?.links?.["app.bsky.feed.post"]?.[".embed.record.record.uri"]
+      ?.records || 0;
+  const quotes = quotes1 + quotes2;
 
-    const totals = {
-      likes,
-      replies,
-      reposts,
-      quotes: quotes1 + quotes2,
-    };
-
-    const list = (
-      [
-        ["reply", totals.replies],
-        ["repost", totals.reposts],
-        ["like", totals.likes],
-        ["quote", totals.quotes],
-      ] as const
-    ).filter(([, count]) => count > 0);
-
-    return { totals, list };
-  }, [links]);
+  const all = likes + replies + reposts + quotes;
 
   return (
-    <div className="flex flex-col border-b pb-8">
-      <div className="border rounded-xl mx-4 mt-4 ">
+    <div className="flex flex-col">
+      <div className="border rounded-xl mx-4 mt-4 overflow-hidden">
         <UniversalPostRendererATURILoader
           isQuote
           key={uri}
           atUri={uri}
-          nopics
+          nopics={true}
+          concise={true}
         />
-      </div>
-      <div className="flex flex-col">
-        {interactions.list.map(([type, count]) => (
-          <InteractionsButton key={type} type={type} uri={uri} count={count} />
-        ))}
+        <div className="flex flex-col divide-x">
+          <InteractionsButton
+            key={likes}
+            type={"like"}
+            uri={uri}
+            count={likes}
+          />
+          <InteractionsButton
+            key={reposts}
+            type={"repost"}
+            uri={uri}
+            count={reposts}
+          />
+          <InteractionsButton
+            key={replies}
+            type={"reply"}
+            uri={uri}
+            count={replies}
+          />
+          <InteractionsButton
+            key={quotes}
+            type={"quote"}
+            uri={uri}
+            count={quotes}
+          />
+          {!all && (
+            <div className="text-center text-gray-500 dark:text-gray-400 pb-3 pt-2 border-t">
+              No interactions yet.
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
···
   uri: string;
   count: number;
 }) {
+  if (!count) return <></>;
+  const aturi = new AtUri(uri);
   return (
-    <div className="flex-1 border-t py-2 px-4 flex flex-row items-center gap-2">
+    <Link
+      to={
+        `/profile/$did/post/$rkey` +
+        (type === "like"
+          ? "/liked-by"
+          : type === "repost"
+            ? "/reposted-by"
+            : type === "quote"
+              ? "/quotes"
+              : "")
+      }
+      params={{
+        did: aturi.host,
+        rkey: aturi.rkey,
+      }}
+      className="flex-1 border-t py-2 px-4 flex flex-row items-center gap-2 transition-colors hover:bg-gray-100 hover:dark:bg-gray-800"
+    >
       {type === "like" ? (
         <MdiCardsHeartOutline height={22} width={22} />
       ) : type === "repost" ? (
         <MdiRepeat height={22} width={22} />
       ) : type === "reply" ? (
         <MdiCommentOutline height={22} width={22} />
+      ) : type === "quote" ? (
+        <IconMdiMessageReplyTextOutline
+          height={22}
+          width={22}
+          className=" text-gray-400"
+        />
       ) : (
         <></>
       )}
       {type}
       {/* bad grammar replys */}
       {count > 1 ? "s" : ""} <div className="flex-1" /> {count}
-    </div>
+    </Link>
   );
 }
 
-function NotificationItem({ notification }: { notification: string }) {
+export function NotificationItem({ notification }: { notification: string }) {
   const aturi = new AtUri(notification);
   const navigate = useNavigate();
   const { data: identity } = useQueryIdentity(aturi.host);
···
 
   return (
     <div
-      className="flex items-center gap-3 p-4 cursor-pointer border-b flex-row"
+      className="flex items-center p-4 cursor-pointer gap-3 justify-around border-b flex-row"
       onClick={() =>
         aturi &&
         navigate({
···
         })
       }
     >
-      <div>
+      {/* <div>
         {aturi.collection === "app.bsky.graph.follow" ? (
           <IconMdiAccountPlus />
+        ) : aturi.collection === "app.bsky.feed.like" ? (
+          <MdiCardsHeart />
         ) : (
           <></>
         )}
-      </div>
+      </div> */}
       {profile ? (
         <img
           src={avatar || defaultpfp}
···
       ) : (
         <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700" />
       )}
-      <div className="flex flex-col">
-        <div className="flex flex-row gap-2">
-          <span className="font-medium text-gray-900 dark:text-gray-100">
+      <div className="flex flex-col min-w-0">
+        <div className="flex flex-row gap-2 overflow-hidden text-ellipsis whitespace-nowrap min-w-0">
+          <span className="font-medium text-gray-900 dark:text-gray-100 truncate">
             {profile?.displayName || identity?.handle || "Someone"}
           </span>
-          <span className="text-gray-700 dark:text-gray-400">
+          <span className="text-gray-700 dark:text-gray-400 truncate">
             @{identity?.handle}
           </span>
         </div>
···
   );
 }
 
-
-const EmptyState = ({ text }: { text: string }) => (
+export const EmptyState = ({ text }: { text: string }) => (
   <div className="py-10 text-center text-gray-500 dark:text-gray-400">
     {text}
   </div>
 );
 
-const LoadingState = ({ text }: { text: string }) => (
+export const LoadingState = ({ text }: { text: string }) => (
   <div className="py-10 text-center text-gray-500 dark:text-gray-400 italic">
     {text}
   </div>
 );
 
-const ErrorState = ({ error }: { error: unknown }) => (
+export const ErrorState = ({ error }: { error: unknown }) => (
   <div className="py-10 text-center text-red-600 dark:text-red-400">
     Error: {(error as Error)?.message || "Something went wrong."}
   </div>
-);
+);

src/routes/profile.$did/post.$rkey.liked-by.tsx

···
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
+import React from "react";
+
+import { Header } from "~/components/Header";
+import { constellationURLAtom } from "~/utils/atoms";
+import { useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery";
+
+import {
+  EmptyState,
+  ErrorState,
+  LoadingState,
+  NotificationItem,
+} from "../notifications";
+
+export const Route = createFileRoute("/profile/$did/post/$rkey/liked-by")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { did, rkey } = Route.useParams();
+  const { data: identity } = useQueryIdentity(did);
+  const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : '';
+
+  const [constellationurl] = useAtom(constellationURLAtom);
+  const infinitequeryresults = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        constellation: constellationurl,
+        method: "/links",
+        target: atUri,
+        collection: "app.bsky.feed.like",
+        path: ".subject.uri",
+      }
+    ),
+    enabled: !!atUri,
+  });
+
+  const {
+    data: infiniteLikesData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    error,
+  } = infinitequeryresults;
+
+  const likesAturis = React.useMemo(() => {
+    // Get all replies from the standard infinite query
+    return (
+      infiniteLikesData?.pages.flatMap(
+        (page) =>
+          page?.linking_records.map(
+            (r) => `at://${r.did}/${r.collection}/${r.rkey}`
+          ) ?? []
+      ) ?? []
+    );
+  }, [infiniteLikesData]);
+
+  return (
+    <>
+      <Header
+        title={`Liked By`}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+
+      <>
+        {(() => {
+          if (isLoading) return <LoadingState text="Loading likes..." />;
+          if (isError) return <ErrorState error={error} />;
+
+          if (!likesAturis?.length)
+            return <EmptyState text="No likes yet." />;
+        })()}
+      </>
+
+      {likesAturis.map((m) => (
+        <NotificationItem key={m} notification={m} />
+      ))}
+
+      {hasNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={isFetchingNextPage}
+          className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50"
+        >
+          {isFetchingNextPage ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </>
+  );
+}

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

···
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
+import React from "react";
+
+import { Header } from "~/components/Header";
+import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
+import { constellationURLAtom } from "~/utils/atoms";
+import { type linksRecord,useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery";
+
+import {
+  EmptyState,
+  ErrorState,
+  LoadingState,
+} from "../notifications";
+
+export const Route = createFileRoute("/profile/$did/post/$rkey/quotes")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { did, rkey } = Route.useParams();
+  const { data: identity } = useQueryIdentity(did);
+  const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : '';
+
+  const [constellationurl] = useAtom(constellationURLAtom);
+  const infinitequeryresultsWithoutMedia = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        constellation: constellationurl,
+        method: "/links",
+        target: atUri,
+        collection: "app.bsky.feed.post",
+        path: ".embed.record.uri", // embed.record.record.uri and embed.record.uri
+      }
+    ),
+    enabled: !!atUri,
+  });
+  const infinitequeryresultsWithMedia = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        constellation: constellationurl,
+        method: "/links",
+        target: atUri,
+        collection: "app.bsky.feed.post",
+        path: ".embed.record.record.uri", // embed.record.record.uri and embed.record.uri
+      }
+    ),
+    enabled: !!atUri,
+  });
+
+  const {
+    data: infiniteQuotesDataWithoutMedia,
+    fetchNextPage: fetchNextPageWithoutMedia,
+    hasNextPage: hasNextPageWithoutMedia,
+    isFetchingNextPage: isFetchingNextPageWithoutMedia,
+    isLoading: isLoadingWithoutMedia,
+    isError: isErrorWithoutMedia,
+    error: errorWithoutMedia,
+  } = infinitequeryresultsWithoutMedia;
+  const {
+    data: infiniteQuotesDataWithMedia,
+    fetchNextPage: fetchNextPageWithMedia,
+    hasNextPage: hasNextPageWithMedia,
+    isFetchingNextPage: isFetchingNextPageWithMedia,
+    isLoading: isLoadingWithMedia,
+    isError: isErrorWithMedia,
+    error: errorWithMedia,
+  } = infinitequeryresultsWithMedia;
+
+  const fetchNextPage = async () => {
+    await Promise.all([
+      hasNextPageWithMedia && fetchNextPageWithMedia(),
+      hasNextPageWithoutMedia && fetchNextPageWithoutMedia(),
+    ]);
+  };
+
+  const hasNextPage = hasNextPageWithMedia || hasNextPageWithoutMedia;
+  const isFetchingNextPage = isFetchingNextPageWithMedia || isFetchingNextPageWithoutMedia;
+  const isLoading = isLoadingWithMedia || isLoadingWithoutMedia;
+
+  const allQuotes = React.useMemo(() => {
+    const withPages = infiniteQuotesDataWithMedia?.pages ?? [];
+    const withoutPages = infiniteQuotesDataWithoutMedia?.pages ?? [];
+    const maxLen = Math.max(withPages.length, withoutPages.length);
+    const merged: linksRecord[] = [];
+
+    for (let i = 0; i < maxLen; i++) {
+      const a = withPages[i]?.linking_records ?? [];
+      const b = withoutPages[i]?.linking_records ?? [];
+      const mergedPage = [...a, ...b].sort((b, a) => a.rkey.localeCompare(b.rkey));
+      merged.push(...mergedPage);
+    }
+
+    return merged;
+  }, [infiniteQuotesDataWithMedia?.pages, infiniteQuotesDataWithoutMedia?.pages]);
+
+  const quotesAturis = React.useMemo(() => {
+    return allQuotes.flatMap((r) => `at://${r.did}/${r.collection}/${r.rkey}`);
+  }, [allQuotes]);
+
+  return (
+    <>
+      <Header
+        title={`Quotes`}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+
+      <>
+        {(() => {
+          if (isLoading) return <LoadingState text="Loading quotes..." />;
+          if (isErrorWithMedia) return <ErrorState error={errorWithMedia} />;
+          if (isErrorWithoutMedia) return <ErrorState error={errorWithoutMedia} />;
+
+          if (!quotesAturis?.length)
+            return <EmptyState text="No quotes yet." />;
+        })()}
+      </>
+
+      {quotesAturis.map((m) => (
+        <UniversalPostRendererATURILoader key={m} atUri={m} />
+      ))}
+
+      {hasNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={isFetchingNextPage}
+          className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50"
+        >
+          {isFetchingNextPage ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </>
+  );
+}

src/routes/profile.$did/post.$rkey.reposted-by.tsx

···
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
+import React from "react";
+
+import { Header } from "~/components/Header";
+import { constellationURLAtom } from "~/utils/atoms";
+import { useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery";
+
+import {
+  EmptyState,
+  ErrorState,
+  LoadingState,
+  NotificationItem,
+} from "../notifications";
+
+export const Route = createFileRoute("/profile/$did/post/$rkey/reposted-by")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { did, rkey } = Route.useParams();
+  const { data: identity } = useQueryIdentity(did);
+  const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : '';
+
+  const [constellationurl] = useAtom(constellationURLAtom);
+  const infinitequeryresults = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        constellation: constellationurl,
+        method: "/links",
+        target: atUri,
+        collection: "app.bsky.feed.repost",
+        path: ".subject.uri",
+      }
+    ),
+    enabled: !!atUri,
+  });
+
+  const {
+    data: infiniteRepostsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    error,
+  } = infinitequeryresults;
+
+  const repostsAturis = React.useMemo(() => {
+    // Get all replies from the standard infinite query
+    return (
+      infiniteRepostsData?.pages.flatMap(
+        (page) =>
+          page?.linking_records.map(
+            (r) => `at://${r.did}/${r.collection}/${r.rkey}`
+          ) ?? []
+      ) ?? []
+    );
+  }, [infiniteRepostsData]);
+
+  return (
+    <>
+      <Header
+        title={`Reposted By`}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+
+      <>
+        {(() => {
+          if (isLoading) return <LoadingState text="Loading reposts..." />;
+          if (isError) return <ErrorState error={error} />;
+
+          if (!repostsAturis?.length)
+            return <EmptyState text="No reposts yet." />;
+        })()}
+      </>
+
+      {repostsAturis.map((m) => (
+        <NotificationItem key={m} notification={m} />
+      ))}
+
+      {hasNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={isFetchingNextPage}
+          className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50"
+        >
+          {isFetchingNextPage ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </>
+  );
+}

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

···
 import { AtUri } from "@atproto/api";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { createFileRoute, Outlet, useMatchRoute } from "@tanstack/react-router";
 import { useAtom } from "jotai";
 import React, { useLayoutEffect } from "react";
 
···
   nopics?: boolean;
   lightboxCallback?: (d: LightboxProps) => void;
 }) {
+  const matchRoute = useMatchRoute()
+  const showMainPostRoute = !!matchRoute({ to: '/profile/$did/post/$rkey' }) || !!matchRoute({ to: '/profile/$did/post/$rkey/image/$i' })
+
   //const { get, set } = usePersistentStore();
   const queryClient = useQueryClient();
   // const [resolvedDid, setResolvedDid] = React.useState<string | null>(null);
···
     data: identity,
     isLoading: isIdentityLoading,
     error: identityError,
-  } = useQueryIdentity(did);
+  } = useQueryIdentity(showMainPostRoute ? did : undefined);
 
   const resolvedDid = did.startsWith("did:") ? did : identity?.did;
 
   const atUri = React.useMemo(
     () =>
-      resolvedDid
+      resolvedDid && showMainPostRoute
         ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}`
         : undefined,
-    [resolvedDid, rkey]
+    [resolvedDid, rkey, showMainPostRoute]
   );
 
-  const { data: mainPost } = useQueryPost(atUri);
+  const { data: mainPost } = useQueryPost(showMainPostRoute ? atUri : undefined);
 
   console.log("atUri",atUri)
   
···
   );
 
   // @ts-expect-error i hate overloads
-  const { data: links } = useQueryConstellation(atUri?{
+  const { data: links } = useQueryConstellation(atUri&&showMainPostRoute?{
     method: "/links/all",
     target: atUri,
   } : {
···
   }, [links]);
 
   const { data: opreplies } = useQueryConstellation(
-    !!opdid && replyCount && replyCount >= 25
+    showMainPostRoute && !!opdid && replyCount && replyCount >= 25
       ? {
           method: "/links",
           target: atUri,
···
         path: ".reply.parent.uri",
       }
     ),
-    enabled: !!atUri,
+    enabled: !!atUri && showMainPostRoute,
   });
 
   const {
···
   const [layoutReady, setLayoutReady] = React.useState(false);
 
   useLayoutEffect(() => {
+    if (!showMainPostRoute) return
     if (parents.length > 0 && !layoutReady && mainPostRef.current) {
       const mainPostElement = mainPostRef.current;
 
···
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setLayoutReady(true);
     }
-  }, [parents, layoutReady]);
+  }, [parents, layoutReady, showMainPostRoute]);
 
 
   const [slingshoturl] = useAtom(slingshotURLAtom)
       
   React.useEffect(() => {
-    if (parentsLoading) {
+    if (parentsLoading || !showMainPostRoute) {
       setLayoutReady(false);
     }
 
···
       setLayoutReady(true);
       hasPerformedInitialLayout.current = true;
     }
-  }, [parentsLoading, mainPost]);
+  }, [parentsLoading, mainPost, showMainPostRoute]);
 
   React.useEffect(() => {
     if (!mainPost?.value?.reply?.parent?.uri) {
···
     return () => {
       ignore = true;
     };
-  }, [mainPost, queryClient]);
+  }, [mainPost, queryClient, slingshoturl]);
 
-  if (!did || !rkey) return <div>Invalid post URI</div>;
-  if (isIdentityLoading) return <div>Resolving handle...</div>;
-  if (identityError)
+  if ((!did || !rkey) && showMainPostRoute) return <div>Invalid post URI</div>;
+  if (isIdentityLoading && showMainPostRoute) return <div>Resolving handle...</div>;
+  if (identityError && showMainPostRoute)
     return <div style={{ color: "red" }}>{identityError.message}</div>;
-  if (!atUri) return <div>Could not construct post URI.</div>;
+  if (!atUri && showMainPostRoute) return <div>Could not construct post URI.</div>;
 
   return (
     <>
       <Outlet />
-      <Header
-        title={`Post`}
-        backButtonCallback={() => {
-          if (window.history.length > 1) {
-            window.history.back();
-          } else {
-            window.location.assign("/");
-          }
-        }}
-      />
+      {showMainPostRoute && (<>
+        <Header
+          title={`Post`}
+          backButtonCallback={() => {
+            if (window.history.length > 1) {
+              window.history.back();
+            } else {
+              window.location.assign("/");
+            }
+          }}
+        />
 
-      {parentsLoading && (
-        <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row">
-          <div className="ml-4 w-[42px] flex justify-center">
-            <div
-              style={{ width: 2, height: "100%", opacity: 0.5 }}
-              className="bg-gray-500 dark:bg-gray-400"
-            ></div>
+        {parentsLoading && (
+          <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row">
+            <div className="ml-4 w-[42px] flex justify-center">
+              <div
+                style={{ width: 2, height: "100%", opacity: 0.5 }}
+                className="bg-gray-500 dark:bg-gray-400"
+              ></div>
+            </div>
+            Loading conversation...
           </div>
-          Loading conversation...
+        )}
+
+        {/* we should use the reply lines here thats provided by UPR*/}
+        <div style={{ maxWidth: 600, padding: 0 }}>
+          {parents.map((parent, index) => (
+            <UniversalPostRendererATURILoader
+              key={parent.uri}
+              atUri={parent.uri}
+              topReplyLine={index > 0}
+              bottomReplyLine={true}
+              bottomBorder={false}
+            />
+          ))}
         </div>
-      )}
-
-      {/* we should use the reply lines here thats provided by UPR*/}
-      <div style={{ maxWidth: 600, padding: 0 }}>
-        {parents.map((parent, index) => (
+        <div ref={mainPostRef}>
           <UniversalPostRendererATURILoader
-            key={parent.uri}
-            atUri={parent.uri}
-            topReplyLine={index > 0}
-            bottomReplyLine={true}
-            bottomBorder={false}
+            atUri={atUri!}
+            detailed={true}
+            topReplyLine={parentsLoading || parents.length > 0}
+            nopics={!!nopics}
+            lightboxCallback={lightboxCallback}
           />
-        ))}
-      </div>
-      <div ref={mainPostRef}>
-        <UniversalPostRendererATURILoader
-          atUri={atUri}
-          detailed={true}
-          topReplyLine={parentsLoading || parents.length > 0}
-          nopics={!!nopics}
-          lightboxCallback={lightboxCallback}
-        />
-      </div>
-      <div
-        style={{
-          maxWidth: 600,
-          //margin: "0px auto 0",
-          padding: 0,
-          minHeight: "80dvh",
-          paddingBottom: "20dvh",
-        }}
-      >
+        </div>
         <div
-          className="text-gray-500 dark:text-gray-400 text-sm font-bold"
           style={{
-            fontSize: 18,
-            margin: "12px 16px 12px 16px",
-            fontWeight: 600,
+            maxWidth: 600,
+            //margin: "0px auto 0",
+            padding: 0,
+            minHeight: "80dvh",
+            paddingBottom: "20dvh",
           }}
         >
-          Replies
+          <div
+            className="text-gray-500 dark:text-gray-400 text-sm font-bold"
+            style={{
+              fontSize: 18,
+              margin: "12px 16px 12px 16px",
+              fontWeight: 600,
+            }}
+          >
+            Replies
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            {replyAturis.length > 0 &&
+              replyAturis.map((reply) => {
+                //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`;
+                return (
+                  <UniversalPostRendererATURILoader
+                    key={reply}
+                    atUri={reply}
+                    maxReplies={4}
+                  />
+                );
+              })}
+              {hasNextPage && (
+              <button
+                onClick={() => fetchNextPage()}
+                disabled={isFetchingNextPage}
+                className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50"
+              >
+                {isFetchingNextPage ? "Loading..." : "Load More"}
+              </button>
+            )}
+          </div>
         </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
-          {replyAturis.length > 0 &&
-            replyAturis.map((reply) => {
-              //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`;
-              return (
-                <UniversalPostRendererATURILoader
-                  key={reply}
-                  atUri={reply}
-                  maxReplies={4}
-                />
-              );
-            })}
-            {hasNextPage && (
-            <button
-              onClick={() => fetchNextPage()}
-              disabled={isFetchingNextPage}
-              className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50"
-            >
-              {isFetchingNextPage ? "Loading..." : "Load More"}
-            </button>
-          )}
-        </div>
-      </div>
+      </>)}
     </>
   );
 }

src/utils/useQuery.ts

···
   );
 }
 
-type linksRecord = {
+export type linksRecord = {
   did: string;
   collection: string;
   rkey: string;
···
   collection: string
   path: string
 }) {
-  console.log(
-    'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks',
-    query,
-  )
+  // console.log(
+  //   'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks',
+  //   query,
+  // )
 
   return infiniteQueryOptions({
     enabled: !!query?.target,