add first layer of pds view (will clean up soon)

src/components/json/appBskyEmbedImages.tsx

···
 import { X } from "lucide-react";
 import { useState } from "preact/hooks";
 
-export const getBlueskyCdnLink = (did: string, cid: string, ext: string) => {
-  return `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${cid}@${ext}`;
+export const getBlueskyCdnLink = (
+  did: string,
+  cid: string,
+  ext: string,
+  type: string = "feed_fullsize",
+) => {
+  return `https://cdn.bsky.app/img/${type}/plain/${did}/${cid}@${ext}`;
 };
 
 export const AppBskyEmbedImagesLayout = ({

src/components/smartSearchBar.tsx

···
     e.preventDefault();
     if (input.trim()) {
       // replace at:// with / to match the route correctly
-      navigate({ to: `/at:/${input.replace("at:/", "")}` });
+      if (input.startsWith("pds/") || input.startsWith("https:/")) {
+        navigate({
+          to: "/pds/$url",
+          params: {
+            url: input.replace("https:/", "").replace("pds/", ""),
+          },
+        });
+      } else {
+        navigate({
+          to: `/at:/${input.replace("at:/", "")}`,
+        });
+      }
       setOpen(false);
     }
   };
···
       </DialogTrigger>
 
       <DialogContent className="sm:max-w-[800px] p-0 border-0 rounded-full bg-transparent">
-        <form onSubmit={handleSubmit} className="relative backdrop-blur-3xl rounded-full">
+        <form
+          onSubmit={handleSubmit}
+          className="relative backdrop-blur-3xl rounded-full"
+        >
           <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             type="text"

src/components/views/app-bsky/actorProfile.tsx

···
                 repoData?.did!,
                 profile?.banner?.ref.$link,
                 "jpeg",
+                "banner",
               )}
               className="w-full rounded-lg -z-10 border object-cover -mb-16"
             />

src/routeTree.gen.ts

···
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as FirehoseIndexImport } from './routes/firehose/index'
+import { Route as PdsUrlIndexImport } from './routes/pds/$url.index'
 import { Route as AtHandleIndexImport } from './routes/at:/$handle.index'
 
 // Create Virtual Routes
···
 const FirehoseIndexRoute = FirehoseIndexImport.update({
   id: '/firehose/',
   path: '/firehose/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const PdsUrlIndexRoute = PdsUrlIndexImport.update({
+  id: '/pds/$url/',
+  path: '/pds/$url/',
   getParentRoute: () => rootRoute,
 } as any)
 
···
       preLoaderRoute: typeof AtHandleIndexImport
       parentRoute: typeof rootRoute
     }
+    '/pds/$url/': {
+      id: '/pds/$url/'
+      path: '/pds/$url'
+      fullPath: '/pds/$url'
+      preLoaderRoute: typeof PdsUrlIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/at:/$handle/$collection/$rkey': {
       id: '/at:/$handle/$collection/$rkey'
       path: '/at:/$handle/$collection/$rkey'
···
   '/counter': typeof CounterLazyRoute
   '/firehose': typeof FirehoseIndexRoute
   '/at:/$handle': typeof AtHandleIndexRoute
+  '/pds/$url': typeof PdsUrlIndexRoute
   '/at:/$handle/$collection/$rkey': typeof AtHandleCollectionRkeyLazyRoute
   '/at:/$handle/$collection': typeof AtHandleCollectionIndexLazyRoute
 }
···
   '/counter': typeof CounterLazyRoute
   '/firehose': typeof FirehoseIndexRoute
   '/at:/$handle': typeof AtHandleIndexRoute
+  '/pds/$url': typeof PdsUrlIndexRoute
   '/at:/$handle/$collection/$rkey': typeof AtHandleCollectionRkeyLazyRoute
   '/at:/$handle/$collection': typeof AtHandleCollectionIndexLazyRoute
 }
···
   '/counter': typeof CounterLazyRoute
   '/firehose/': typeof FirehoseIndexRoute
   '/at:/$handle/': typeof AtHandleIndexRoute
+  '/pds/$url/': typeof PdsUrlIndexRoute
   '/at:/$handle/$collection/$rkey': typeof AtHandleCollectionRkeyLazyRoute
   '/at:/$handle/$collection/': typeof AtHandleCollectionIndexLazyRoute
 }
···
     | '/counter'
     | '/firehose'
     | '/at:/$handle'
+    | '/pds/$url'
     | '/at:/$handle/$collection/$rkey'
     | '/at:/$handle/$collection'
   fileRoutesByTo: FileRoutesByTo
···
     | '/counter'
     | '/firehose'
     | '/at:/$handle'
+    | '/pds/$url'
     | '/at:/$handle/$collection/$rkey'
     | '/at:/$handle/$collection'
   id:
···
     | '/counter'
     | '/firehose/'
     | '/at:/$handle/'
+    | '/pds/$url/'
     | '/at:/$handle/$collection/$rkey'
     | '/at:/$handle/$collection/'
   fileRoutesById: FileRoutesById
···
   CounterLazyRoute: typeof CounterLazyRoute
   FirehoseIndexRoute: typeof FirehoseIndexRoute
   AtHandleIndexRoute: typeof AtHandleIndexRoute
+  PdsUrlIndexRoute: typeof PdsUrlIndexRoute
   AtHandleCollectionRkeyLazyRoute: typeof AtHandleCollectionRkeyLazyRoute
   AtHandleCollectionIndexLazyRoute: typeof AtHandleCollectionIndexLazyRoute
 }
···
   CounterLazyRoute: CounterLazyRoute,
   FirehoseIndexRoute: FirehoseIndexRoute,
   AtHandleIndexRoute: AtHandleIndexRoute,
+  PdsUrlIndexRoute: PdsUrlIndexRoute,
   AtHandleCollectionRkeyLazyRoute: AtHandleCollectionRkeyLazyRoute,
   AtHandleCollectionIndexLazyRoute: AtHandleCollectionIndexLazyRoute,
 }
···
         "/counter",
         "/firehose/",
         "/at:/$handle/",
+        "/pds/$url/",
         "/at:/$handle/$collection/$rkey",
         "/at:/$handle/$collection/"
       ]
···
     },
     "/at:/$handle/": {
       "filePath": "at:/$handle.index.tsx"
+    },
+    "/pds/$url/": {
+      "filePath": "pds/$url.index.tsx"
     },
     "/at:/$handle/$collection/$rkey": {
       "filePath": "at:/$handle/$collection.$rkey.lazy.tsx"

src/routes/at:/$handle/$collection.index.lazy.tsx

···
     fetchMore: async () => {},
   });
 
-  const fetchRepoData = async (cursor?: string) => {
+  async function fetchRepoData(cursor?: string) {
     try {
       if (state.isLoading) return;
 
···
         error: err instanceof Error ? err : new Error("An error occurred"),
       }));
     }
-  };
+  }
 
   const fetchMore = async (cursor: string) => {
     if (cursor && !state.isLoading) {
···
               </div>
             )}
             {!isLoading && !cursor && (
-              <div className="text-center text-sm text-muted-foreground mx-10">
+              <div className="text-center text-sm text-muted-foreground mx-10 mt-2">
                 that's all, folks!
               </div>
             )}

src/routes/index.lazy.tsx

···
   <Link
     key="jay"
     to="/at:/$handle"
-    params={{ handle: "jay.bsky.social" }}
+    params={{ handle: "jay.bsky.team" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://jay.bsky.team
+    </div>
+  </Link>,
+  <Link
+    key="apenwarr"
+    to="/at:/$handle"
+    params={{ handle: "apenwarr.ca" }}
     className="text-blue-500"
   >
     <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
-      at://jay.bsky.social
+      at://apenwarr.ca
+    </div>
+  </Link>,
+  <Link
+    key="mraow-pds"
+    to="/pds/$url"
+    params={{ url: "mraow.party" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      pds/mraow.party
+    </div>
+  </Link>,
+  <Link
+    key="millipds-test"
+    to="/at:/$handle"
+    params={{ handle: "david.dev.retr0.id" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://david.dev.retr0.id
     </div>
   </Link>,
   <Link

src/routes/pds/$url.index.tsx

···
+import ShowError from "@/components/error";
+import { Loader } from "@/components/ui/loader";
+import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import { QtClient, useXrpc } from "@/providers/qtprovider";
+import { ComAtprotoSyncListRepos } from "@atcute/client/lexicons";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { ShieldX } from "lucide-react";
+import { useState, useEffect, useRef } from "preact/compat";
+
+interface PdsData {
+  records?: ComAtprotoSyncListRepos.Output["repos"];
+  cursor?: string;
+  health?: PdsHealth;
+  isLoading: boolean;
+  error: Error | null;
+  fetchMore: (cursor: string) => Promise<void>;
+}
+
+interface PdsHealth {
+  version: string;
+}
+
+function useRepoData(baseUrl: string): PdsData {
+  const xrpc = useXrpc();
+  const [state, setState] = useState<PdsData>({
+    isLoading: true,
+    error: null,
+    fetchMore: async () => {},
+  });
+
+  useDocumentTitle(baseUrl ? `${baseUrl} | atp.tools` : "atp.tools");
+  const abortController = new AbortController();
+
+  async function fetchRepoData(cursor?: string) {
+    try {
+      setState((prev) => ({ ...prev, isLoading: true }));
+
+      // we dont use the main authenticated client here
+      const rpc = new QtClient(new URL("https://" + baseUrl));
+      // get the PDS
+      const response = await rpc
+        .getXrpcClient()
+        .get("com.atproto.sync.listRepos", {
+          params: { limit: 1000, cursor },
+          signal: abortController.signal,
+        });
+
+      const health = await rpc
+        .getXrpcClient()
+        .request({ nsid: "_health", type: "get" });
+
+      setState((prev) => ({
+        ...prev,
+        records: cursor
+          ? [...(prev.records || []), ...response.data.repos]
+          : response.data.repos,
+        cursor: response.data.cursor,
+        health: health.data,
+        isLoading: false,
+        error: null,
+      }));
+
+      // todo: actual errors
+    } catch (err: any) {
+      if (err.name === "AbortError") return;
+
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: err instanceof Error ? err : new Error("An error occurred"),
+      }));
+    }
+  }
+
+  useEffect(() => {
+    fetchRepoData();
+
+    return () => {
+      abortController.abort();
+    };
+  }, [baseUrl, xrpc]);
+
+  const fetchMore = async (cursor: string) => {
+    if (cursor && !state.isLoading) {
+      await fetchRepoData(cursor);
+    }
+  };
+
+  return { ...state, fetchMore };
+}
+
+export const Route = createFileRoute("/pds/$url/")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { url } = Route.useParams();
+  const { cursor, records, fetchMore, isLoading, error } = useRepoData(url);
+
+  useDocumentTitle(records ? `${url} (PDS) | atp.tools` : "atp.tools");
+
+  const loaderRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!loaderRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const target = entries[0];
+        if (target.isIntersecting && !isLoading && cursor) {
+          fetchMore(cursor);
+        }
+      },
+      { threshold: 0.1, rootMargin: "50px" },
+    );
+
+    observer.observe(loaderRef.current);
+    return () => observer.disconnect();
+  }, [cursor, isLoading, fetchMore]);
+
+  if (error) {
+    return <ShowError error={error} />;
+  }
+
+  if ((isLoading && !cursor) || !records) {
+    return <Loader className="max-h-[calc(100vh-5rem)] h-screen" />;
+  }
+
+  return (
+    <div className="flex flex-row justify-center w-full">
+      <div className="max-w-2xl w-screen p-4 md:mt-16 space-y-2">
+        <div>
+          PDS: {url.includes("bsky.network") && "🍄"} {url}
+        </div>
+
+        <div>
+          <h2 className="text-xl font-bold">Repositories (accounts)</h2>
+          <ul>
+            {records?.map((c) => (
+              <li key={c.did} className="text-blue-500">
+                <Link
+                  to="/at:/$handle"
+                  params={{
+                    handle: c.did,
+                  }}
+                >
+                  {c.did}{" "}
+                  {!c.active && <ShieldX className="inline text-red-500" />}
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <div
+            ref={loaderRef}
+            className="flex flex-row justify-center h-10 -pt-16"
+          >
+            {isLoading && <Loader className="max-h-16 h-screen" />}
+            {!isLoading && !cursor && (
+              <div className="text-center text-sm text-muted-foreground mx-10 mt-2">
+                that's all, folks!
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}