New routing (#50)

* new

* test

* progress

* remove resolvePDS

* fix routes

* latch utility

* pds context

* move files

* fix pds cache

* reorganize views

* fix loading spin collection

src/auth/oauth-config.ts

···
 import { LocalActorResolver } from "@atcute/identity-resolver";
 import { configureOAuth } from "@atcute/oauth-browser-client";
-import { didDocumentResolver, handleResolver } from "../utils/api";
+import { didDocumentResolver, handleResolver } from "../lib/api";
 
 const reactiveDidDocumentResolver = {
   resolve: async (did: string) => didDocumentResolver().resolve(did as any),

src/auth/session-manager.ts

···
   OAuthUserAgent,
   type Session,
 } from "@atcute/oauth-browser-client";
-import { resolveDidDoc } from "../utils/api";
+import { resolveDidDoc } from "../lib/api";
 import { Sessions, setAgent, setSessions } from "./state";
 
 export const saveSessionToStorage = (sessions: Sessions) => {

src/components/backlinks.tsx

···
 import * as TID from "@atcute/tid";
 import { createResource, createSignal, For, onMount, Show } from "solid-js";
-import { getAllBacklinks, getRecordBacklinks, LinksWithRecords } from "../utils/api.js";
+import { getAllBacklinks, getRecordBacklinks, LinksWithRecords } from "../lib/api.js";
 import { localDateFromTimestamp } from "../utils/date.js";
 import { Button } from "./button.jsx";
 import { Favicon } from "./favicon.jsx";

src/components/create/handle-input.tsx

···
 import { Handle } from "@atcute/lexicons";
 import { createSignal, Show } from "solid-js";
-import { resolveHandle } from "../../utils/api";
+import { resolveHandle } from "../../lib/api";
 import { Button } from "../button.jsx";
 import { TextInput } from "../text-input.jsx";
 import { editorInstance } from "./state";

src/components/hover-card/did.tsx

···
 import { getPdsEndpoint, type DidDocument } from "@atcute/identity";
 import { createSignal, Show } from "solid-js";
-import { resolveDidDoc } from "../../utils/api";
+import { resolveDidDoc } from "../../lib/api";
 import HoverCard from "./base";
 
 interface DidHoverCardProps {

src/components/hover-card/record.tsx

···
 import { Client, simpleFetchHandler } from "@atcute/client";
 import { ActorIdentifier } from "@atcute/lexicons";
 import { createSignal, Show } from "solid-js";
-import { getPDS } from "../../utils/api";
+import { getPDS } from "../../lib/api";
 import { JSONValue } from "../json";
 import HoverCard from "./base";
 

src/components/json.tsx

···
   useContext,
 } from "solid-js";
 import { Portal } from "solid-js/web";
-import { resolveLexiconAuthority } from "../utils/api";
+import { resolveLexiconAuthority } from "../lib/api";
 import { formatFileSize } from "../utils/format";
 import { hideMedia } from "../views/settings";
 import DidHoverCard from "./hover-card/did";
 import RecordHoverCard from "./hover-card/record";
-import { pds } from "./navbar";
 import { addNotification, removeNotification } from "./notification";
 import VideoPlayer from "./video-player";
 
 interface JSONContext {
   repo: string;
+  pds?: string;
   truncate?: boolean;
   parentIsBlob?: boolean;
   newTab?: boolean;
···
                 class="text-blue-500 hover:underline active:underline dark:text-blue-400"
                 rel="noopener"
                 target="_blank"
-                href={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${params.repo}&cid=${part}`}
+                href={`${ctx.pds}/xrpc/com.atproto.sync.getBlob?did=${params.repo}&cid=${part}`}
               >
                 {part}
               </A>
···
 
   const blob: AtBlob = props.data as any;
   const canShowMedia = () =>
-    pds() &&
+    ctx.pds &&
     !ctx.hideBlobs &&
     (blob.mimeType.startsWith("image/") ||
       blob.mimeType === "video/mp4" ||
···
     const [imageUrl] = createResource(
       () => (blob.mimeType.startsWith("image/") ? blob.ref.$link : null),
       async (cid) => {
-        const url = `https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${cid}`;
+        const url = `${ctx.pds}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${cid}`;
 
         await new Promise<void>((resolve) => {
           const img = new Image();
···
             <Show when={blob.mimeType.startsWith("audio/")}>
               <audio class="my-0.5 max-w-96" controls>
                 <source
-                  src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`}
+                  src={`${ctx.pds}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`}
                   type={blob.mimeType === "audio/x-flac" ? "audio/flac" : blob.mimeType}
                 />
               </audio>
···
 export const JSONValue = (props: {
   data: JSONType;
   repo: string;
+  pds?: string;
   truncate?: boolean;
   newTab?: boolean;
   hideBlobs?: boolean;
···
     <JSONCtx.Provider
       value={{
         repo: props.repo,
+        pds: props.pds,
         truncate: props.truncate,
         newTab: props.newTab,
         hideBlobs: props.hideBlobs,

src/components/lazy-tab.tsx

···
+import { ErrorBoundary, JSX, Suspense } from "solid-js";
+
+export const LazyTab = (props: { children: JSX.Element }) => (
+  <ErrorBoundary fallback={(err) => <div class="wrap-break-word">Error: {err.message}</div>}>
+    <Suspense
+      fallback={
+        <div class="iconify lucide--loader-circle mt-2 animate-spin self-center text-xl" />
+      }
+    >
+      {props.children}
+    </Suspense>
+  </ErrorBoundary>
+);

src/components/lexicon-schema.tsx

···
 import { AtprotoDid } from "@atcute/lexicons/syntax";
 import { A, useLocation, useNavigate } from "@solidjs/router";
 import { createEffect, For, Show } from "solid-js";
-import { resolveLexiconAuthority } from "../utils/api.js";
+import { resolveLexiconAuthority } from "../lib/api.js";
 import Tooltip from "./tooltip.jsx";
 
 // Style constants

src/components/navbar.tsx

···
 import { A, Params } from "@solidjs/router";
 import { createEffect, createMemo, createSignal, JSX, Match, Show, Switch } from "solid-js";
 import { canHover } from "../layout";
-import { didDocCache } from "../utils/api";
+import { didDocCache } from "../lib/api";
 import { addToClipboard } from "../utils/copy";
 import { localDateFromTimestamp } from "../utils/date";
 import Tooltip from "./tooltip";

src/components/nested-layout.tsx

···
+import { JSX, Show, Suspense } from "solid-js";
+import { Spinner } from "./spinner.jsx";
+
+export const NestedLayout = (props: {
+  key: string | undefined;
+  hasChild: boolean;
+  view: () => JSX.Element;
+  children: JSX.Element;
+}) => (
+  <Show keyed when={props.key}>
+    {(_) => (
+      <>
+        <Show when={props.hasChild}>
+          <Suspense fallback={<Spinner />}>{props.children}</Suspense>
+        </Show>
+        {props.view()}
+      </>
+    )}
+  </Show>
+);

src/components/search.tsx

···
   Show,
 } from "solid-js";
 import { canHover } from "../layout";
-import { resolveLexiconAuthority, resolveLexiconAuthorityDirect } from "../utils/api";
-import { appHandleLink, appList, AppUrl } from "../utils/app-urls";
-import { createDebouncedValue } from "../utils/hooks/debounced";
+import { resolveLexiconAuthority, resolveLexiconAuthorityDirect } from "../lib/api";
+import { appHandleLink, appList, AppUrl } from "../lib/app-urls";
+import { createDebouncedValue } from "../lib/debounced";
 import { Button } from "./button";
 import { Modal } from "./modal";
 

src/components/spinner.tsx

···
+export const Spinner = () => (
+  <span class="iconify lucide--loader-circle mt-3 animate-spin text-xl"></span>
+);

src/components/video-player.tsx

···
 import { onCleanup, onMount } from "solid-js";
-import { pds } from "./navbar";
+import { useRepo } from "../lib/repo-context.jsx";
 
 export interface VideoPlayerProps {
   did: string;
···
 }
 
 const VideoPlayer = (props: VideoPlayerProps) => {
+  const repo = useRepo();
   let video!: HTMLVideoElement;
   let objectUrl: string | undefined;
 
   onMount(async () => {
     // thanks bf <3
     const res = await fetch(
-      `https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.did}&cid=${props.cid}`,
+      `${repo.pds()}/xrpc/com.atproto.sync.getBlob?did=${props.did}&cid=${props.cid}`,
     );
     if (!res.ok) throw new Error(res.statusText);
     const blob = await res.blob();

src/index.tsx

···
 import { ExploreToolView } from "./views/car/explore.tsx";
 import { CarView } from "./views/car/index.tsx";
 import { UnpackToolView } from "./views/car/unpack.tsx";
-import { CollectionView } from "./views/collection.tsx";
+import { CollectionLayout } from "./views/collection.tsx";
 import { Home } from "./views/home.tsx";
 import { LabelView } from "./views/labels.tsx";
-import { PdsView } from "./views/pds.tsx";
+import { PdsLayout } from "./views/pds.tsx";
 import { RecordView } from "./views/record.tsx";
-import { RepoView } from "./views/repo.tsx";
+import { RepoLayout, repoPreload } from "./views/repo/index.tsx";
 import { Settings } from "./views/settings.tsx";
 import { StreamView } from "./views/stream";
 
···
       <Route path="/car/explore" component={ExploreToolView} />
       <Route path="/car/unpack" component={UnpackToolView} />
       <Route path="/settings" component={Settings} />
-      <Route path="/:pds" component={PdsView} />
-      <Route path="/:pds/:repo" component={RepoView} />
-      <Route path="/:pds/:repo/:collection" component={CollectionView} />
-      <Route path="/:pds/:repo/:collection/:rkey" component={RecordView} />
+      <Route path="/:pds" component={PdsLayout}>
+        <Route path="/" />
+        <Route path="/:repo" component={RepoLayout} preload={repoPreload}>
+          <Route path="/" />
+          <Route path="/:collection" component={CollectionLayout}>
+            <Route path="/" />
+            <Route path="/:rkey" component={RecordView} />
+          </Route>
+        </Route>
+      </Route>
     </Router>
   ),
   document.getElementById("root") as HTMLElement,

src/layout.tsx

···
-import { Handle } from "@atcute/lexicons";
 import { A, RouteSectionProps, useLocation, useNavigate } from "@solidjs/router";
-import { createEffect, ErrorBoundary, onCleanup, onMount, Show, Suspense } from "solid-js";
+import { createEffect, ErrorBoundary, on, onCleanup, onMount, Show, Suspense } from "solid-js";
 import { AccountManager } from "./auth/account.jsx";
 import { agent } from "./auth/state.js";
 import { RecordEditor } from "./components/create";
···
 import { NotificationContainer } from "./components/notification.jsx";
 import { PermissionPromptContainer } from "./components/permission-prompt.jsx";
 import { Search, SearchButton } from "./components/search.jsx";
+import { Spinner } from "./components/spinner.jsx";
 import { themeEvent } from "./components/theme.jsx";
-import { resolveHandle } from "./utils/api.js";
 import { plcDirectory } from "./views/settings.jsx";
 
 export const canHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
···
   else if (location.search.includes("hrt=false")) localStorage.setItem("hrt", "false");
   if (location.search.includes("sailor=true")) localStorage.setItem("sailor", "true");
   else if (location.search.includes("sailor=false")) localStorage.setItem("sailor", "false");
-
-  createEffect(async () => {
-    if (props.params.repo && !props.params.repo.startsWith("did:")) {
-      const did = await resolveHandle(props.params.repo as Handle);
-      navigate(location.pathname.replace(props.params.repo, did), { replace: true });
-    }
-  });
 
   onMount(() => {
     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeEvent);
···
         <Show when={props.params.pds}>
           <NavBar params={props.params} />
         </Show>
-        <Show keyed when={location.pathname}>
-          <ErrorBoundary
-            fallback={(err) => <div class="mt-3 wrap-anywhere">Error: {err.message}</div>}
-          >
-            <Suspense
-              fallback={
-                <span class="iconify lucide--loader-circle mt-3 animate-spin text-xl"></span>
-              }
-            >
-              {props.children}
-            </Suspense>
-          </ErrorBoundary>
-        </Show>
+        <ErrorBoundary
+          fallback={(err, reset) => {
+            createEffect(
+              on(
+                () => location.pathname,
+                () => reset(),
+                { defer: true },
+              ),
+            );
+            return <div class="mt-3 wrap-anywhere">Error: {err.message}</div>;
+          }}
+        >
+          <Suspense fallback={<Spinner />}>{props.children}</Suspense>
+        </ErrorBoundary>
       </div>
       <NotificationContainer />
       <PermissionPromptContainer />

src/lib/create-latch.ts

···
+import { createMemo } from "solid-js";
+
+/** Returns a memo that latches to `true` once `ready()` is true, and never reverts. */
+export const createLatch = (ready: () => boolean) =>
+  createMemo<true | undefined>((prev) => prev || (ready() ? true : undefined));

src/lib/repo-context.tsx

···
+import { Client } from "@atcute/client";
+import { DidDocument } from "@atcute/identity";
+import { Accessor, createContext, useContext } from "solid-js";
+
+export interface RepoContextValue {
+  did: Accessor<string>;
+  pds: Accessor<string | undefined>;
+  rpc: Accessor<Client | undefined>;
+  didDoc: Accessor<DidDocument | undefined>;
+  error: Accessor<string | undefined>;
+}
+
+const RepoContext = createContext<RepoContextValue>();
+
+export const RepoProvider = RepoContext.Provider;
+
+export const useRepo = () => {
+  const ctx = useContext(RepoContext);
+  if (!ctx) throw new Error("useRepo must be used within RepoProvider");
+  return ctx;
+};

src/utils/api.ts src/lib/api.ts

···
 import { AtprotoDid, isHandle, Nsid } from "@atcute/lexicons/syntax";
 import { createMemo } from "solid-js";
 import { createStore } from "solid-js/store";
-import { setPDS } from "../components/navbar";
 import { plcDirectory } from "../views/settings";
 
 const proxyFetch = (rewrite: (url: URL) => string): typeof fetch => {
···
   return true;
 };
 
-const resolvePDS = async (did: string) => {
-  try {
-    setPDS(undefined);
-    const pds = await getPDS(did);
-    if (!pds) throw new Error("No PDS found");
-    setPDS(pds.replace("https://", "").replace("http://", ""));
-    return pds;
-  } catch (err) {
-    setPDS("Missing PDS");
-    throw err;
-  }
-};
-
 const resolveLexiconAuthority = async (nsid: Nsid) => {
   return await authorityResolver.resolve(nsid);
 };
···
   resolveLexiconAuthority,
   resolveLexiconAuthorityDirect,
   resolveLexiconSchema,
-  resolvePDS,
   validateHandle,
   type LinkData,
   type LinksWithRecords,

src/utils/route-cache.ts

···
-import { createStore } from "solid-js/store";
-
-export interface CollectionCacheEntry {
-  records: unknown[];
-  cursor: string | undefined;
-  scrollY: number;
-  reverse: boolean;
-  limit: number;
-}
-
-type RouteCache = Record<string, CollectionCacheEntry>;
-
-const [routeCache, setRouteCache] = createStore<RouteCache>({});
-
-export const getCollectionCache = (key: string): CollectionCacheEntry | undefined => {
-  return routeCache[key];
-};
-
-export const setCollectionCache = (key: string, entry: CollectionCacheEntry): void => {
-  setRouteCache(key, entry);
-};
-
-export const clearCollectionCache = (key: string): void => {
-  setRouteCache(key, undefined!);
-};

src/views/car/explore.tsx

···
 import HoverCard from "../../components/hover-card/base";
 import { JSONValue } from "../../components/json.jsx";
 import { TextInput } from "../../components/text-input.jsx";
-import { didDocCache, resolveDidDoc } from "../../utils/api.js";
+import { didDocCache, resolveDidDoc } from "../../lib/api.js";
+import { createDebouncedValue } from "../../lib/debounced.js";
 import { localDateFromTimestamp } from "../../utils/date.js";
-import { createDebouncedValue } from "../../utils/hooks/debounced.js";
 import { createDropHandler, createFileChangeHandler, handleDragOver } from "./file-handlers.js";
 import {
   type Archive,

src/views/collection.tsx

···
 import { ComAtprotoRepoApplyWrites, ComAtprotoRepoGetRecord } from "@atcute/atproto";
-import { Client, simpleFetchHandler } from "@atcute/client";
+import { Client } from "@atcute/client";
 import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";
 import * as TID from "@atcute/tid";
-import { A, useBeforeLeave, useParams, useSearchParams } from "@solidjs/router";
+import { A, type RouteSectionProps, useParams, useSearchParams } from "@solidjs/router";
 import { createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 import { agent } from "../auth/state";
···
 import HoverCard from "../components/hover-card/base";
 import { JSONType, JSONValue } from "../components/json.jsx";
 import { Modal } from "../components/modal.jsx";
+import { NestedLayout } from "../components/nested-layout.jsx";
 import { addNotification, removeNotification } from "../components/notification.jsx";
 import { PermissionButton } from "../components/permission-button.jsx";
+import { Spinner } from "../components/spinner.jsx";
 import Tooltip from "../components/tooltip.jsx";
 import { canHover } from "../layout.jsx";
-import { resolvePDS } from "../utils/api.js";
+import { useRepo } from "../lib/repo-context.jsx";
+import { createLatch } from "../lib/create-latch.js";
 import { localDateFromTimestamp } from "../utils/date.js";
-import { useFilterShortcut } from "../utils/keyboard.js";
-import {
-  clearCollectionCache,
-  getCollectionCache,
-  setCollectionCache,
-} from "../utils/route-cache.js";
+import { useFilterShortcut } from "../lib/keyboard.js";
 
 interface AtprotoRecord {
   rkey: string;
···
   );
 };
 
+export const CollectionLayout = (props: RouteSectionProps) => {
+  const params = useParams();
+  const hasChild = () => !!params.rkey;
+  return (
+    <NestedLayout
+      key={`${params.repo}/${params.collection}`}
+      hasChild={hasChild()}
+      view={() => <CollectionView />}
+    >
+      {props.children}
+    </NestedLayout>
+  );
+};
+
 const CollectionView = () => {
+  const repo = useRepo();
   const params = useParams();
+  const hidden = () => !!params.rkey;
   const [searchParams, setSearchParams] = useSearchParams();
   const [cursor, setCursor] = createSignal<string>();
   const [records, setRecords] = createStore<AtprotoRecord[]>([]);
···
   };
   const [recreate, setRecreate] = createSignal(false);
   const [openDelete, setOpenDelete] = createSignal(false);
-  const [restoredFromCache, setRestoredFromCache] = createSignal(false);
-  const did = params.repo;
-  let pds: string;
-  let rpc: Client;
+  const [isLoadingMore, setIsLoadingMore] = createSignal(false);
+  const did = repo.did();
   let filterInputRef: HTMLInputElement | undefined;
 
-  const cacheKey = () => `${params.pds}/${params.repo}/${params.collection}`;
-
   onMount(() => {
-    const cached = getCollectionCache(cacheKey());
-    if (cached) {
-      setRecords(cached.records as AtprotoRecord[]);
-      setCursor(cached.cursor);
-      setReverse(cached.reverse);
-      setSearchParams({
-        reverse: cached.reverse ? "true" : undefined,
-        limit: cached.limit !== DEFAULT_LIMIT ? cached.limit.toString() : undefined,
-      });
-      setRestoredFromCache(true);
-      requestAnimationFrame(() => {
-        window.scrollTo(0, cached.scrollY);
-      });
-    }
-
     useFilterShortcut(() => filterInputRef);
   });
 
-  useBeforeLeave((e) => {
-    const recordPathPrefix = `/at://${did}/${params.collection}/`;
-    const isNavigatingToRecord = typeof e.to === "string" && e.to.startsWith(recordPathPrefix);
-
-    if (isNavigatingToRecord && records.length > 0) {
-      setCollectionCache(cacheKey(), {
-        records: [...records],
-        cursor: cursor(),
-        scrollY: window.scrollY,
-        reverse: reverse(),
-        limit: limit(),
-      });
-    } else {
-      clearCollectionCache(cacheKey());
-    }
-  });
-
   const fetchRecords = async () => {
-    if (restoredFromCache() && records.length > 0 && !cursor()) {
-      setRestoredFromCache(false);
-      return records;
-    }
-    if (restoredFromCache()) setRestoredFromCache(false);
-
-    const isLoadMore = cursor() !== undefined;
+    const rpc = repo.rpc()!;
+    const collection = params.collection!;
+    const isLoadMore = isLoadingMore();
+    setIsLoadingMore(false);
 
-    if (!pds) pds = await resolvePDS(did!);
-    if (!rpc) rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });
     const res = await rpc.get("com.atproto.repo.listRecords", {
       params: {
         repo: did as ActorIdentifier,
-        collection: params.collection as `${string}.${string}.${string}`,
+        collection: collection as `${string}.${string}.${string}`,
         limit: limit(),
         cursor: cursor(),
         reverse: reverse(),
···
     return res.data.records;
   };
 
-  const [response, { refetch }] = createResource(fetchRecords);
+  const shouldFetch = createLatch(() => !hidden() && !!repo.rpc());
+
+  const [response, { refetch }] = createResource(shouldFetch, fetchRecords);
 
   const filteredRecords = createMemo(() =>
     records.filter((rec) =>
···
     });
 
     const BATCHSIZE = 200;
-    rpc = new Client({ handler: agent()! });
+    const authRpc = new Client({ handler: agent()! });
     for (let i = 0; i < writes.length; i += BATCHSIZE) {
-      await rpc.post("com.atproto.repo.applyWrites", {
+      await authRpc.post("com.atproto.repo.applyWrites", {
         input: {
           repo: agent()!.sub,
           writes: writes.slice(i, i + BATCHSIZE),
···
     setCursor(undefined);
     setOpenDelete(false);
     setRecreate(false);
-    clearCollectionCache(cacheKey());
     refetch();
   };
 
···
       true,
     );
 
-  document.title = `${params.collection} - PDSls`;
+  if (!hidden()) document.title = `${params.collection} - PDSls`;
 
   return (
     <>
-      <Show when={records.length || response()}>
+      <Show when={!hidden() && !records.length && (response.state === "unresolved" || response.loading)}>
+        <Spinner />
+      </Show>
+      <Show when={!hidden() && (records.length || response.state === "ready")}>
         <div class="flex w-full flex-col items-center">
           {/* Tab bar */}
           <div class="mb-2 flex min-h-7 w-full items-center justify-between px-2 text-sm sm:text-base">
···
                   setReverse(newReverse);
                   setSearchParams({ reverse: newReverse ? "true" : undefined });
                   setCursor(undefined);
-                  setRestoredFromCache(false);
-                  clearCollectionCache(cacheKey());
+                  setRecords([]);
                   refetch();
                 }}
                 classList={{
···
               <div class="flex w-20 items-center justify-end">
                 <Show when={cursor()}>
                   <Button
-                    onClick={() => refetch()}
+                    onClick={() => {
+                      setIsLoadingMore(true);
+                      refetch();
+                    }}
                     disabled={response.loading}
                     classList={{ "w-20 h-7.5 justify-center": true }}
                   >
···
     </>
   );
 };
-
-export { CollectionView };

src/views/labels.tsx

···
 import RecordHoverCard from "../components/hover-card/record.jsx";
 import { TextInput } from "../components/text-input.jsx";
 import { canHover } from "../layout.jsx";
-import { labelerCache, resolveHandle, resolvePDS } from "../utils/api.js";
+import { getPDS, labelerCache, resolveHandle } from "../lib/api.js";
+import { useFilterShortcut } from "../lib/keyboard.js";
 import { localDateFromTimestamp } from "../utils/date.js";
-import { useFilterShortcut } from "../utils/keyboard.js";
 
 const LABELS_PER_PAGE = 50;
 const DEFAULT_LABELER_DID = "did:plc:ar7c4by46qjdydhdevvrndac";
···
       setError(undefined);
 
       if (!isAtprotoDid(did)) did = await resolveHandle(did as Handle);
-      await resolvePDS(did);
+      await getPDS(did);
       if (!labelerCache[did]) throw new Error("Repository is not a labeler");
       rpc = new Client({
         handler: simpleFetchHandler({ service: labelerCache[did] }),

src/views/logs.tsx src/views/repo/logs.tsx

···
 } from "@atcute/did-plc";
 import { useLocation } from "@solidjs/router";
 import { createEffect, createResource, createSignal, For, onCleanup, Show } from "solid-js";
-import Tooltip from "../components/tooltip.jsx";
-import { localDateFromTimestamp } from "../utils/date.js";
-import { createOperationHistory, DiffEntry, groupBy } from "../utils/plc-logs.js";
-import PlcValidateWorker from "../workers/plc-validate.ts?worker";
-import { plcDirectory } from "./settings.jsx";
+import Tooltip from "../../components/tooltip.jsx";
+import { createOperationHistory, DiffEntry, groupBy } from "../../lib/plc-logs.js";
+import { localDateFromTimestamp } from "../../utils/date.js";
+import PlcValidateWorker from "../../workers/plc-validate.ts?worker";
+import { plcDirectory } from "../settings.jsx";
 
 type PlcEvent = "handle" | "rotation_key" | "service" | "verification_method";
 

src/views/pds.tsx

···
 import { Client, simpleFetchHandler } from "@atcute/client";
 import { InferXRPCBodyOutput } from "@atcute/lexicons";
 import * as TID from "@atcute/tid";
-import { A, useLocation, useParams } from "@solidjs/router";
+import { A, type RouteSectionProps, useLocation, useParams } from "@solidjs/router";
 import { createWindowVirtualizer } from "@tanstack/solid-virtual";
 import { createEffect, createResource, createSignal, For, on, onCleanup, Show } from "solid-js";
 import { Button } from "../components/button";
 import { setPDS } from "../components/navbar";
+import { NestedLayout } from "../components/nested-layout.jsx";
+import { Spinner } from "../components/spinner.jsx";
 import { canHover } from "../layout";
-import { didDocCache, resolveDidDoc } from "../utils/api";
+import { didDocCache, resolveDidDoc } from "../lib/api";
+import { createLatch } from "../lib/create-latch.js";
 import { localDateFromTimestamp } from "../utils/date";
 
 const LIMIT = 1000;
+
+let pdsCache:
+  | {
+      pds: string;
+      repos: ComAtprotoSyncListRepos.Repo[];
+      cursor: string | undefined;
+      version?: string;
+      serverInfos?: InferXRPCBodyOutput<ComAtprotoServerDescribeServer.mainSchema["output"]>;
+    }
+  | undefined;
 
 const RepoCard = (props: {
   repo: ComAtprotoSyncListRepos.Repo;
···
   </div>
 );
 
-export const PdsView = () => {
+export const PdsLayout = (props: RouteSectionProps) => {
+  const params = useParams();
+  const hasChild = () => !!params.repo;
+  return (
+    <NestedLayout key={params.pds} hasChild={hasChild()} view={() => <PdsView />}>
+      {props.children}
+    </NestedLayout>
+  );
+};
+
+const PdsView = () => {
   const params = useParams();
+  const hidden = () => !!params.repo;
   const location = useLocation();
-  const [version, setVersion] = createSignal<string>();
-  const [serverInfos, setServerInfos] =
-    createSignal<InferXRPCBodyOutput<ComAtprotoServerDescribeServer.mainSchema["output"]>>();
-  const [cursor, setCursor] = createSignal<string>();
   setPDS(params.pds);
   const pds =
     params.pds!.startsWith("localhost") ? `http://${params.pds}` : `https://${params.pds}`;
   const rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });
+  const cached = pdsCache?.pds === pds ? pdsCache : undefined;
+  const [version, setVersion] = createSignal<string | undefined>(cached?.version);
+  const [serverInfos, setServerInfos] = createSignal<
+    InferXRPCBodyOutput<ComAtprotoServerDescribeServer.mainSchema["output"]> | undefined
+  >(cached?.serverInfos);
+  const [cursor, setCursor] = createSignal<string | undefined>(cached?.cursor);
+  const [isLoadingMore, setIsLoadingMore] = createSignal(false);
 
   const getVersion = async () => {
     try {
       // @ts-expect-error: undocumented endpoint
       const res = await rpc.get("_health", {});
-      setVersion((res.data as any).version);
+      const v = (res.data as any).version as string;
+      setVersion(v);
+      if (pdsCache) pdsCache.version = v;
     } catch (err) {
       console.error("Failed to fetch version:", err);
     }
···
   const describeServer = async () => {
     const res = await rpc.get("com.atproto.server.describeServer");
     if (!res.ok) console.error(res.data.error);
-    else setServerInfos(res.data);
+    else {
+      setServerInfos(res.data);
+      if (pdsCache) pdsCache.serverInfos = res.data;
+    }
   };
 
-  getVersion();
-  describeServer();
+  createEffect(() => {
+    if (hidden() || version() || serverInfos()) return;
+    getVersion();
+    describeServer();
+  });
+
+  const [repos, setRepos] = createSignal<ComAtprotoSyncListRepos.Repo[] | undefined>(cached?.repos);
 
   const fetchRepos = async () => {
+    const loadingMore = isLoadingMore();
+    setIsLoadingMore(false);
+    if (!loadingMore && repos()) return;
     const res = await rpc.get("com.atproto.sync.listRepos", {
       params: { limit: LIMIT, cursor: cursor() },
     });
     if (!res.ok) throw new Error(res.data.error);
-    setCursor(res.data.repos.length < LIMIT ? undefined : res.data.cursor);
-    setRepos(repos()?.concat(res.data.repos) ?? res.data.repos);
+    const newCursor = res.data.repos.length < LIMIT ? undefined : res.data.cursor;
+    const newRepos = repos()?.concat(res.data.repos) ?? res.data.repos;
+    setCursor(newCursor);
+    setRepos(newRepos);
+    pdsCache = { ...pdsCache, pds, repos: newRepos, cursor: newCursor };
     return res.data;
   };
 
-  const [response, { refetch }] = createResource(fetchRepos);
-  const [repos, setRepos] = createSignal<ComAtprotoSyncListRepos.Repo[]>();
+  const shouldFetch = createLatch(() => !hidden());
+
+  const [response, { refetch }] = createResource(shouldFetch, fetchRepos);
 
   const [expandedIndex, setExpandedIndex] = createSignal<number | null>(null);
 
···
     </A>
   );
 
-  document.title = `${params.pds} - PDSls`;
+  if (!hidden()) document.title = `${params.pds} - PDSls`;
 
   return (
-    <Show when={repos() || response()}>
-      <div class="flex w-full flex-col px-2">
-        <div class="mb-3 flex gap-4 text-sm sm:text-base">
-          <Tab tab="repos" label="Repositories" />
-          <Tab tab="info" label="Info" />
-          <Tab tab="firehose" label="Firehose" />
-        </div>
-        <Show when={!location.hash || location.hash === "#repos"}>
-          <div
-            class="-mx-2 mb-9"
-            ref={containerRef}
-            style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}
-          >
-            <For each={virtualizer.getVirtualItems()}>
-              {(virtualItem) => {
-                const isExpanded = () => expandedIndex() === virtualItem.index;
-                return (
-                  <div
-                    data-index={virtualItem.index}
-                    ref={virtualizer.measureElement}
-                    style={{
-                      position: "absolute",
-                      top: `${virtualItem.start - virtualizer.options.scrollMargin}px`,
-                      left: 0,
-                      width: "100%",
-                      overflow: "visible",
-                    }}
-                  >
-                    <RepoCard
-                      repo={repos()![virtualItem.index]}
-                      expanded={isExpanded()}
-                      onToggle={() => setExpandedIndex(isExpanded() ? null : virtualItem.index)}
-                    />
-                  </div>
-                );
-              }}
-            </For>
+    <>
+      <Show when={!hidden() && !repos() && (response.state === "unresolved" || response.loading)}>
+        <Spinner />
+      </Show>
+      <Show when={!hidden() && (repos() || response.state === "ready")}>
+        <div class="flex w-full flex-col px-2">
+          <div class="mb-3 flex gap-4 text-sm sm:text-base">
+            <Tab tab="repos" label="Repositories" />
+            <Tab tab="info" label="Info" />
+            <Tab tab="firehose" label="Firehose" />
           </div>
-        </Show>
-        <div class="flex flex-col gap-3">
-          <Show when={location.hash === "#info"}>
-            <Show when={version()}>
-              {(version) => (
-                <InfoField label="Version">
-                  <span class="text-sm text-neutral-700 dark:text-neutral-300">{version()}</span>
-                </InfoField>
-              )}
-            </Show>
-            <Show when={serverInfos()}>
-              {(server) => (
-                <>
-                  <InfoField label="DID">
-                    <span class="text-sm text-neutral-700 dark:text-neutral-300">
-                      {server().did}
-                    </span>
-                  </InfoField>
-                  <div class="flex items-center gap-1">
-                    <span class="font-semibold">Invite Code Required</span>
-                    <span
-                      classList={{
-                        "iconify lucide--check text-green-500 dark:text-green-400":
-                          server().inviteCodeRequired === true,
-                        "iconify lucide--x text-red-500 dark:text-red-400":
-                          !server().inviteCodeRequired,
+          <Show when={!location.hash || location.hash === "#repos"}>
+            <div
+              class="-mx-2 mb-9"
+              ref={containerRef}
+              style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}
+            >
+              <For each={virtualizer.getVirtualItems()}>
+                {(virtualItem) => {
+                  const isExpanded = () => expandedIndex() === virtualItem.index;
+                  return (
+                    <div
+                      data-index={virtualItem.index}
+                      ref={virtualizer.measureElement}
+                      style={{
+                        position: "absolute",
+                        top: `${virtualItem.start - virtualizer.options.scrollMargin}px`,
+                        left: 0,
+                        width: "100%",
+                        overflow: "visible",
                       }}
-                    ></span>
-                  </div>
-                  <Show when={server().phoneVerificationRequired}>
-                    <div class="flex items-center gap-1">
-                      <span class="font-semibold">Captcha Verification Required</span>
-                      <span class="iconify lucide--check text-green-500 dark:text-green-400"></span>
+                    >
+                      <RepoCard
+                        repo={repos()![virtualItem.index]}
+                        expanded={isExpanded()}
+                        onToggle={() => setExpandedIndex(isExpanded() ? null : virtualItem.index)}
+                      />
                     </div>
-                  </Show>
-                  <Show when={server().availableUserDomains.length}>
-                    <InfoField label="Available User Domains">
-                      <For each={server().availableUserDomains}>
-                        {(domain) => (
-                          <span class="text-sm wrap-anywhere text-neutral-700 dark:text-neutral-300">
-                            {domain}
-                          </span>
-                        )}
-                      </For>
+                  );
+                }}
+              </For>
+            </div>
+          </Show>
+          <div class="flex flex-col gap-3">
+            <Show when={location.hash === "#info"}>
+              <Show when={version()}>
+                {(version) => (
+                  <InfoField label="Version">
+                    <span class="text-sm text-neutral-700 dark:text-neutral-300">{version()}</span>
+                  </InfoField>
+                )}
+              </Show>
+              <Show when={serverInfos()}>
+                {(server) => (
+                  <>
+                    <InfoField label="DID">
+                      <span class="text-sm text-neutral-700 dark:text-neutral-300">
+                        {server().did}
+                      </span>
                     </InfoField>
-                  </Show>
-                  <For
-                    each={[
-                      { label: "Privacy Policy", url: server().links?.privacyPolicy },
-                      { label: "Terms of Service", url: server().links?.termsOfService },
-                      {
-                        label: "Contact",
-                        url:
-                          server().contact?.email ? `mailto:${server().contact?.email}` : undefined,
-                        display: server().contact?.email,
-                      },
-                    ].filter((l) => l.url)}
-                  >
-                    {(link) => (
-                      <InfoField label={link.label}>
-                        <a
-                          href={link.url}
-                          class="text-sm text-neutral-700 hover:underline dark:text-neutral-300"
-                          target="_blank"
-                          rel="noopener"
-                        >
-                          {link.display ?? link.url}
-                        </a>
+                    <div class="flex items-center gap-1">
+                      <span class="font-semibold">Invite Code Required</span>
+                      <span
+                        classList={{
+                          "iconify lucide--check text-green-500 dark:text-green-400":
+                            server().inviteCodeRequired === true,
+                          "iconify lucide--x text-red-500 dark:text-red-400":
+                            !server().inviteCodeRequired,
+                        }}
+                      ></span>
+                    </div>
+                    <Show when={server().phoneVerificationRequired}>
+                      <div class="flex items-center gap-1">
+                        <span class="font-semibold">Captcha Verification Required</span>
+                        <span class="iconify lucide--check text-green-500 dark:text-green-400"></span>
+                      </div>
+                    </Show>
+                    <Show when={server().availableUserDomains.length}>
+                      <InfoField label="Available User Domains">
+                        <For each={server().availableUserDomains}>
+                          {(domain) => (
+                            <span class="text-sm wrap-anywhere text-neutral-700 dark:text-neutral-300">
+                              {domain}
+                            </span>
+                          )}
+                        </For>
                       </InfoField>
-                    )}
-                  </For>
-                </>
-              )}
-            </Show>
-          </Show>
-        </div>
-      </div>
-      <Show when={!location.hash || location.hash === "#repos"}>
-        <div class="dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center border-t border-neutral-200 bg-neutral-100 pt-3 pb-6 dark:border-neutral-700">
-          <div class="flex items-center gap-3">
-            <p>
-              {repos()?.length} loaded
-              <Show when={repos()?.some((r) => !r.active)}>
-                {" · "}
-                <span class="text-neutral-500 dark:text-neutral-400">
-                  {repos()?.filter((r) => !r.active).length} inactive
-                </span>
+                    </Show>
+                    <For
+                      each={[
+                        { label: "Privacy Policy", url: server().links?.privacyPolicy },
+                        { label: "Terms of Service", url: server().links?.termsOfService },
+                        {
+                          label: "Contact",
+                          url:
+                            server().contact?.email ?
+                              `mailto:${server().contact?.email}`
+                            : undefined,
+                          display: server().contact?.email,
+                        },
+                      ].filter((l) => l.url)}
+                    >
+                      {(link) => (
+                        <InfoField label={link.label}>
+                          <a
+                            href={link.url}
+                            class="text-sm text-neutral-700 hover:underline dark:text-neutral-300"
+                            target="_blank"
+                            rel="noopener"
+                          >
+                            {link.display ?? link.url}
+                          </a>
+                        </InfoField>
+                      )}
+                    </For>
+                  </>
+                )}
               </Show>
-            </p>
-            <Show when={cursor()}>
-              <Button
-                onClick={() => {
-                  setExpandedIndex(null);
-                  refetch();
-                }}
-                disabled={response.loading}
-                classList={{ "w-20 h-7.5 justify-center": true }}
-              >
-                <Show
-                  when={!response.loading}
-                  fallback={<span class="iconify lucide--loader-circle animate-spin text-base" />}
-                >
-                  Load more
-                </Show>
-              </Button>
             </Show>
           </div>
         </div>
+        <Show when={!location.hash || location.hash === "#repos"}>
+          <div class="dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center border-t border-neutral-200 bg-neutral-100 pt-3 pb-6 dark:border-neutral-700">
+            <div class="flex items-center gap-3">
+              <p>
+                {repos()?.length} loaded
+                <Show when={repos()?.some((r) => !r.active)}>
+                  {" · "}
+                  <span class="text-neutral-500 dark:text-neutral-400">
+                    {repos()?.filter((r) => !r.active).length} inactive
+                  </span>
+                </Show>
+              </p>
+              <Show when={cursor()}>
+                <Button
+                  onClick={() => {
+                    setIsLoadingMore(true);
+                    setExpandedIndex(null);
+                    refetch();
+                  }}
+                  disabled={response.loading}
+                  classList={{ "w-20 h-7.5 justify-center": true }}
+                >
+                  <Show
+                    when={!response.loading}
+                    fallback={<span class="iconify lucide--loader-circle animate-spin text-base" />}
+                  >
+                    Load more
+                  </Show>
+                </Button>
+              </Show>
+            </div>
+          </div>
+        </Show>
       </Show>
-    </Show>
+    </>
   );
 };

src/views/record.tsx

···
 import { JSONValue } from "../components/json.jsx";
 import { LexiconSchemaView } from "../components/lexicon-schema.jsx";
 import { Modal } from "../components/modal.jsx";
-import { pds } from "../components/navbar.jsx";
 import { addNotification, removeNotification } from "../components/notification.jsx";
 import { PermissionButton } from "../components/permission-button.jsx";
 import { canHover } from "../layout.jsx";
+import { useRepo } from "../lib/repo-context.jsx";
 import {
   didDocumentResolver,
   resolveLexiconAuthority,
   resolveLexiconSchema,
-  resolvePDS,
-} from "../utils/api.js";
+} from "../lib/api.js";
 import { addToClipboard } from "../utils/copy.js";
-import { clearCollectionCache } from "../utils/route-cache.js";
-import { AtUri, uriTemplates } from "../utils/templates.js";
-import { lexicons } from "../utils/types/lexicons.js";
+import { AtUri, uriTemplates } from "../lib/templates.js";
+import { lexicons } from "../lib/types/lexicons.js";
 
 const faviconWrapper = (children: any) => (
   <div class="flex size-4 items-center justify-center">{children}</div>
···
 };
 
 export const RecordView = () => {
+  const repo = useRepo();
   const location = useLocation();
   const navigate = useNavigate();
   const params = useParams();
···
   const [schema, setSchema] = createSignal<ResolvedSchema>();
   const [lexiconNotFound, setLexiconNotFound] = createSignal<boolean>();
   const [remoteValidation, setRemoteValidation] = createSignal<boolean>();
-  const did = params.repo;
-  let rpc: Client;
+  const did = repo.did();
 
   const fetchRecord = async () => {
+    const rpc = repo.rpc()!;
+    const collection = params.collection!;
+    const rkey = params.rkey!;
     setValidRecord(undefined);
     setValidSchema(undefined);
-    const pds = await resolvePDS(did!);
-    rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });
     const res = await rpc.get("com.atproto.repo.getRecord", {
       params: {
         repo: did as ActorIdentifier,
-        collection: params.collection as `${string}.${string}.${string}`,
-        rkey: params.rkey!,
+        collection: collection as `${string}.${string}.${string}`,
+        rkey,
       },
     });
     if (!res.ok) {
···
     }
     setPlaceholder(res.data.value);
     setExternalLink(checkUri(res.data.uri, res.data.value));
-    resolveLexicon(params.collection as Nsid);
-    verifyRecordIntegrity();
-    validateLocalSchema(res.data.value);
+    resolveLexicon(collection as Nsid, collection);
+    verifyRecordIntegrity(rpc, collection, rkey);
+    validateLocalSchema(collection, res.data.value);
 
     return res.data;
   };
 
-  const [record, { refetch }] = createResource(fetchRecord);
+  const [record, { refetch }] = createResource(
+    () => (repo.rpc() ? params.rkey : undefined),
+    fetchRecord,
+  );
 
-  const validateLocalSchema = async (record: Record<string, unknown>) => {
+  const validateLocalSchema = async (collection: string, record: Record<string, unknown>) => {
     try {
-      if (params.collection === "com.atproto.lexicon.schema") {
+      if (collection === "com.atproto.lexicon.schema") {
         setLexiconNotFound(false);
         lexiconDoc.parse(record, { mode: "passthrough" });
         setValidSchema(true);
-      } else if (params.collection && params.collection in lexicons) {
-        if (is(lexicons[params.collection], record)) setValidSchema(true);
+      } else if (collection in lexicons) {
+        if (is(lexicons[collection], record)) setValidSchema(true);
         else setValidSchema(false);
       }
     } catch (err: any) {
···
   };
 
   const validateRemoteSchema = async (record: Record<string, unknown>) => {
+    const collection = params.collection!;
+    const rkey = params.rkey!;
     try {
       setRemoteValidation(true);
-      const { resolved, failed } = await resolveAllLexicons(params.collection as Nsid);
+      const { resolved, failed } = await resolveAllLexicons(collection as Nsid);
 
       if (failed.size > 0) {
         console.error(`Failed to resolve ${failed.size} documents:`, Array.from(failed));
···
 
       const lexiconDocs = Object.fromEntries(resolved);
 
-      const validator = new RecordValidator(lexiconDocs, params.collection as Nsid);
+      const validator = new RecordValidator(lexiconDocs, collection as Nsid);
       validator.parse({
-        key: params.rkey ?? null,
+        key: rkey ?? null,
         object: record,
       });
 
···
     setRemoteValidation(false);
   };
 
-  const verifyRecordIntegrity = async () => {
+  const verifyRecordIntegrity = async (rpc: Client, collection: string, rkey: string) => {
     try {
       const { ok, data } = await rpc.get("com.atproto.sync.getRecord", {
         params: {
           did: did as Did,
-          collection: params.collection as Nsid,
-          rkey: params.rkey!,
+          collection: collection as Nsid,
+          rkey,
         },
         as: "bytes",
       });
···
 
       await verifyRecord({
         did: did as AtprotoDid,
-        collection: params.collection!,
-        rkey: params.rkey!,
+        collection,
+        rkey,
         carBytes: data as Uint8Array<ArrayBufferLike>,
       });
 
···
     }
   };
 
-  const resolveLexicon = async (nsid: Nsid) => {
+  const resolveLexicon = async (nsid: Nsid, collection: string) => {
     try {
       const authority = await resolveLexiconAuthority(nsid);
       setLexiconAuthority(authority);
-      if (params.collection !== "com.atproto.lexicon.schema") {
+      if (collection !== "com.atproto.lexicon.schema") {
         const schema = await resolveLexiconSchema(authority, nsid);
         setSchema(schema);
         setLexiconNotFound(false);
···
   };
 
   const deleteRecord = async () => {
-    rpc = new Client({ handler: agent()! });
-    await rpc.post("com.atproto.repo.deleteRecord", {
+    const collection = params.collection!;
+    const rkey = params.rkey!;
+    const authRpc = new Client({ handler: agent()! });
+    await authRpc.post("com.atproto.repo.deleteRecord", {
       input: {
         repo: params.repo as ActorIdentifier,
-        collection: params.collection as `${string}.${string}.${string}`,
-        rkey: params.rkey!,
+        collection: collection as `${string}.${string}.${string}`,
+        rkey,
       },
     });
     const id = addNotification({
···
       type: "success",
     });
     setTimeout(() => removeNotification(id), 3000);
-    clearCollectionCache(`${params.pds}/${params.repo}/${params.collection}`);
     navigate(`/at://${params.repo}/${params.collection}`);
   };
 
···
                       icon="lucide--copy"
                     />
                     <NavMenu
-                      href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}
+                      href={`${repo.pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}
                       icon="lucide--external-link"
                       label="Record on PDS"
                       newTab
···
                 <JSONValue
                   data={record()?.value as any}
                   repo={record()!.uri.split("/")[2]}
+                  pds={repo.pds()}
                   keyLinks
                 />
               </div>

src/views/repo.tsx

···
-import { Client, simpleFetchHandler } from "@atcute/client";
-import { DidDocument } from "@atcute/identity";
-import { ActorIdentifier, Did, Handle, Nsid } from "@atcute/lexicons";
-import { A, useLocation, useNavigate, useParams } from "@solidjs/router";
-import {
-  createEffect,
-  createResource,
-  createSignal,
-  ErrorBoundary,
-  For,
-  onMount,
-  Show,
-  Suspense,
-} from "solid-js";
-import { createStore } from "solid-js/store";
-import { Backlinks } from "../components/backlinks.jsx";
-import {
-  ActionMenu,
-  DropdownMenu,
-  MenuProvider,
-  MenuSeparator,
-  NavMenu,
-} from "../components/dropdown.jsx";
-import { Favicon } from "../components/favicon.jsx";
-import {
-  addNotification,
-  removeNotification,
-  updateNotification,
-} from "../components/notification.jsx";
-import { canHover } from "../layout.jsx";
-import {
-  didDocCache,
-  type HandleResolveResult,
-  labelerCache,
-  resolveHandle,
-  resolveHandleDetailed,
-  resolveLexiconAuthority,
-  resolvePDS,
-  validateHandle,
-} from "../utils/api.js";
-import { addToClipboard } from "../utils/copy.js";
-import { detectDidKeyType, detectKeyType } from "../utils/key.js";
-import { useFilterShortcut } from "../utils/keyboard.js";
-import { BlobView } from "./blob.jsx";
-import { PlcLogView } from "./logs.jsx";
-import { plcDirectory } from "./settings.jsx";
-
-export const RepoView = () => {
-  const params = useParams();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [error, setError] = createSignal<string>();
-  const [downloading, setDownloading] = createSignal(false);
-  const [didDoc, setDidDoc] = createSignal<DidDocument>();
-  const [nsids, setNsids] = createSignal<Record<string, { hidden: boolean; nsids: string[] }>>();
-  const [filter, setFilter] = createSignal<string>();
-  const [validHandles, setValidHandles] = createStore<Record<string, boolean>>({});
-  const [rotationKeys, setRotationKeys] = createSignal<Array<string>>([]);
-  const [expandedAlias, setExpandedAlias] = createSignal<string | null>(null);
-  const [handleDetailedResult, setHandleDetailedResult] = createSignal<{
-    dns: HandleResolveResult;
-    http: HandleResolveResult;
-  } | null>(null);
-  let rpc: Client;
-  let pds: string;
-  let filterInputRef: HTMLInputElement | undefined;
-  const did = params.repo!;
-
-  // Handle scrolling to a collection group when hash is like #collections:app.bsky
-  createEffect(() => {
-    const hash = location.hash;
-    if (hash.startsWith("#collections:")) {
-      const authority = hash.slice(13);
-      requestAnimationFrame(() => {
-        const element = document.getElementById(`collection-${authority}`);
-        if (element) element.scrollIntoView({ behavior: "instant", block: "start" });
-      });
-    }
-  });
-
-  onMount(() => {
-    useFilterShortcut(() => filterInputRef);
-  });
-
-  const RepoTab = (props: {
-    tab: "collections" | "backlinks" | "identity" | "blobs" | "logs";
-    label: string;
-  }) => {
-    const isActive = () => {
-      if (!location.hash) {
-        if (!error() && props.tab === "collections") return true;
-        if (!!error() && props.tab === "identity") return true;
-        return false;
-      }
-      return location.hash.startsWith(`#${props.tab}`);
-    };
-
-    return (
-      <A
-        classList={{
-          "border-b-2 font-medium transition-colors": true,
-          "border-transparent not-hover:text-neutral-600 not-hover:dark:text-neutral-300/80":
-            !isActive(),
-        }}
-        href={`/at://${params.repo}#${props.tab}`}
-      >
-        {props.label}
-      </A>
-    );
-  };
-
-  const getRotationKeys = async () => {
-    const res = await fetch(`${plcDirectory()}/${did}/log/last`);
-    const json = await res.json();
-    setRotationKeys(json.rotationKeys ?? []);
-  };
-
-  const fetchRepo = async () => {
-    try {
-      pds = await resolvePDS(did);
-      setDidDoc(didDocCache[did] as DidDocument);
-    } catch {
-      // Fallback for feedgens
-      if (did.startsWith("did:web")) {
-        try {
-          const res = await fetch(`https://${did.replace("did:web:", "")}/.well-known/did.json`);
-          const didDoc = await res.json();
-          setDidDoc(didDoc);
-        } catch {}
-      } else if (!did.startsWith("did:")) {
-        try {
-          const did = await resolveHandle(params.repo as Handle);
-          navigate(location.pathname.replace(params.repo!, did), { replace: true });
-          return;
-        } catch {
-          try {
-            const nsid = params.repo as Nsid;
-            const res = await resolveLexiconAuthority(nsid);
-            navigate(`/at://${res}/com.atproto.lexicon.schema/${nsid}`, { replace: true });
-            return;
-          } catch {
-            navigate(`/${did}`, { replace: true });
-            return;
-          }
-        }
-      }
-    }
-
-    if (did.startsWith("did:plc")) getRotationKeys();
-    validateHandles();
-
-    if (!pds) {
-      setError("Missing PDS");
-      return {};
-    }
-
-    rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });
-    try {
-      const res = await rpc.get("com.atproto.repo.describeRepo", {
-        params: { repo: did as ActorIdentifier },
-      });
-      if (res.ok) {
-        const collections: Record<string, { hidden: boolean; nsids: string[] }> = {};
-        res.data.collections.forEach((c) => {
-          const nsid = c.split(".");
-          if (nsid.length > 2) {
-            const authority = `${nsid[0]}.${nsid[1]}`;
-            collections[authority] = {
-              nsids: (collections[authority]?.nsids ?? []).concat(nsid.slice(2).join(".")),
-              hidden: false,
-            };
-          }
-        });
-        setNsids(collections);
-      } else {
-        console.error(res.data.error);
-        switch (res.data.error) {
-          case "RepoDeactivated":
-            setError("Deactivated");
-            break;
-          case "RepoTakendown":
-            setError("Taken down");
-            break;
-          default:
-            setError("Unreachable");
-        }
-      }
-
-      return res.data;
-    } catch {
-      return {};
-    }
-  };
-
-  const [repo] = createResource(fetchRepo);
-
-  const toggleCollapsed = (authority: string) => {
-    setNsids((prev) => ({
-      ...prev!,
-      [authority]: { ...prev![authority], hidden: !prev![authority].hidden },
-    }));
-  };
-
-  const collapseAll = () => {
-    setNsids((prev) =>
-      Object.fromEntries(Object.entries(prev!).map(([k, v]) => [k, { ...v, hidden: true }])),
-    );
-  };
-
-  const expandAll = () => {
-    setNsids((prev) =>
-      Object.fromEntries(Object.entries(prev!).map(([k, v]) => [k, { ...v, hidden: false }])),
-    );
-  };
-
-  const validateHandles = async () => {
-    for (const alias of didDoc()?.alsoKnownAs ?? []) {
-      if (alias.startsWith("at://"))
-        setValidHandles(
-          alias,
-          await validateHandle(alias.replace("at://", "") as Handle, did as Did),
-        );
-    }
-  };
-
-  const downloadRepo = async () => {
-    let notificationId: string | null = null;
-    const abortController = new AbortController();
-
-    try {
-      setDownloading(true);
-      notificationId = addNotification({
-        message: "Downloading repository...",
-        progress: 0,
-        total: 0,
-        type: "info",
-        onCancel: () => {
-          abortController.abort();
-          if (notificationId) {
-            removeNotification(notificationId);
-          }
-        },
-      });
-
-      const response = await fetch(`${pds}/xrpc/com.atproto.sync.getRepo?did=${did}`, {
-        signal: abortController.signal,
-      });
-      if (!response.ok) {
-        throw new Error(`HTTP error status: ${response.status}`);
-      }
-
-      const contentLength = response.headers.get("content-length");
-      const total = contentLength ? parseInt(contentLength, 10) : 0;
-      let loaded = 0;
-
-      const reader = response.body?.getReader();
-      const chunks: BlobPart[] = [];
-
-      if (reader) {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-
-          chunks.push(value);
-          loaded += value.length;
-
-          if (total > 0) {
-            const progress = Math.round((loaded / total) * 100);
-            updateNotification(notificationId, {
-              progress,
-              total,
-            });
-          } else {
-            const progressMB = Math.round((loaded / (1024 * 1024)) * 10) / 10;
-            updateNotification(notificationId, {
-              progress: progressMB,
-              total: 0,
-            });
-          }
-        }
-      }
-
-      const blob = new Blob(chunks);
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${did}-${new Date().toISOString()}.car`;
-      document.body.appendChild(a);
-      a.click();
-
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-
-      updateNotification(notificationId, {
-        message: "Repository downloaded successfully",
-        type: "success",
-        progress: undefined,
-        onCancel: undefined,
-      });
-      setTimeout(() => {
-        if (notificationId) removeNotification(notificationId);
-      }, 3000);
-    } catch (error) {
-      if (!(error instanceof Error && error.name === "AbortError")) {
-        console.error("Download failed:", error);
-        if (notificationId) {
-          updateNotification(notificationId, {
-            message: "Download failed",
-            type: "error",
-            progress: undefined,
-            onCancel: undefined,
-          });
-          setTimeout(() => {
-            if (notificationId) removeNotification(notificationId);
-          }, 5000);
-        }
-      }
-    }
-    setDownloading(false);
-  };
-
-  document.title = `${params.repo} - PDSls`;
-
-  createEffect(() => {
-    const handle = didDoc()
-      ?.alsoKnownAs?.find((alias) => alias.startsWith("at://"))
-      ?.replace("at://", "");
-    if (handle) document.title = `${handle} - PDSls`;
-  });
-
-  return (
-    <>
-      <Show when={repo()}>
-        <div class="flex w-full flex-col gap-3 wrap-break-word">
-          <div class="flex justify-between px-2 text-sm sm:text-base">
-            <div class="flex items-center gap-3 sm:gap-4">
-              <Show when={!error()}>
-                <RepoTab tab="collections" label="Collections" />
-              </Show>
-              <RepoTab tab="identity" label="Identity" />
-              <Show when={did.startsWith("did:plc")}>
-                <RepoTab tab="logs" label="Logs" />
-              </Show>
-              <Show when={!error()}>
-                <RepoTab tab="blobs" label="Blobs" />
-              </Show>
-              <RepoTab tab="backlinks" label="Backlinks" />
-            </div>
-            <div class="flex gap-1">
-              <Show when={error() && error() !== "Missing PDS"}>
-                <div class="flex items-center gap-1 rounded-md border border-red-500 px-1.5 py-0.5 text-xs font-medium text-red-500 sm:text-sm dark:border-red-400 dark:text-red-400">
-                  <span
-                    class={`iconify ${
-                      error() === "Deactivated" ? "lucide--user-round-x"
-                      : error() === "Taken down" ? "lucide--shield-ban"
-                      : "lucide--unplug"
-                    }`}
-                  ></span>
-                  <span>{error()}</span>
-                </div>
-              </Show>
-              <MenuProvider>
-                <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
-                  <NavMenu
-                    href={`/jetstream?dids=${params.repo}`}
-                    label="Jetstream"
-                    icon="lucide--radio-tower"
-                  />
-                  <Show when={params.repo && params.repo in labelerCache}>
-                    <NavMenu
-                      href={`/labels?did=${params.repo}&uriPatterns=*`}
-                      label="Labels"
-                      icon="lucide--tag"
-                    />
-                  </Show>
-                  <Show when={error()?.length === 0 || error() === undefined}>
-                    <ActionMenu
-                      label="Download repo"
-                      icon={
-                        downloading() ? "lucide--loader-circle animate-spin" : "lucide--download"
-                      }
-                      onClick={() => downloadRepo()}
-                    />
-                  </Show>
-                  <MenuSeparator />
-                  <NavMenu
-                    href={
-                      did.startsWith("did:plc") ?
-                        `${plcDirectory()}/${did}`
-                      : `https://${did.split("did:web:")[1]}/.well-known/did.json`
-                    }
-                    newTab
-                    label="DID document"
-                    icon="lucide--external-link"
-                  />
-                  <Show when={did.startsWith("did:plc")}>
-                    <NavMenu
-                      href={`${plcDirectory()}/${did}/log/audit`}
-                      newTab
-                      label="Audit log"
-                      icon="lucide--external-link"
-                    />
-                  </Show>
-                </DropdownMenu>
-              </MenuProvider>
-            </div>
-          </div>
-          <div class="flex w-full flex-col gap-1 px-2">
-            <Show when={location.hash.startsWith("#logs")}>
-              <ErrorBoundary
-                fallback={(err) => <div class="wrap-break-word">Error: {err.message}</div>}
-              >
-                <Suspense
-                  fallback={
-                    <div class="iconify lucide--loader-circle mt-2 animate-spin self-center text-xl" />
-                  }
-                >
-                  <PlcLogView did={did} />
-                </Suspense>
-              </ErrorBoundary>
-            </Show>
-            <Show when={location.hash === "#backlinks"}>
-              <ErrorBoundary
-                fallback={(err) => <div class="wrap-break-word">Error: {err.message}</div>}
-              >
-                <Suspense
-                  fallback={
-                    <div class="iconify lucide--loader-circle mt-2 animate-spin self-center text-xl" />
-                  }
-                >
-                  <Backlinks target={did} />
-                </Suspense>
-              </ErrorBoundary>
-            </Show>
-            <Show when={location.hash === "#blobs"}>
-              <ErrorBoundary
-                fallback={(err) => <div class="wrap-break-word">Error: {err.message}</div>}
-              >
-                <Suspense
-                  fallback={
-                    <div class="iconify lucide--loader-circle mt-2 animate-spin self-center text-xl" />
-                  }
-                >
-                  <BlobView pds={pds!} repo={did} />
-                </Suspense>
-              </ErrorBoundary>
-            </Show>
-            <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
-              <div class="flex flex-col pb-20 text-sm wrap-anywhere">
-                <Show
-                  when={Object.keys(nsids() ?? {}).length != 0}
-                  fallback={<span class="mt-3 text-center text-base">No collections found.</span>}
-                >
-                  <For
-                    each={Object.keys(nsids() ?? {}).filter((authority) =>
-                      filter() ?
-                        authority.includes(filter()!) ||
-                        nsids()?.[authority].nsids.some((nsid) =>
-                          `${authority}.${nsid}`.includes(filter()!),
-                        )
-                      : true,
-                    )}
-                  >
-                    {(authority) => {
-                      const isHighlighted = () => location.hash === `#collections:${authority}`;
-                      const isCollapsed = () => nsids()?.[authority].hidden ?? false;
-
-                      return (
-                        <div
-                          id={`collection-${authority}`}
-                          class="group relative flex scroll-mt-4 items-start gap-2 rounded-lg p-1 transition-colors"
-                          classList={{
-                            "dark:hover:bg-dark-300 hover:bg-neutral-200": !isHighlighted(),
-                            "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),
-                          }}
-                        >
-                          <Favicon
-                            domain={authority}
-                            reverse
-                            wrapper={(children) => (
-                              <a
-                                href={`#collections:${authority}`}
-                                class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
-                              >
-                                <span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">
-                                  <span class="iconify lucide--link absolute -left-2 w-7"></span>
-                                </span>
-                                {children}
-                              </a>
-                            )}
-                          />
-                          <Show
-                            when={!isCollapsed()}
-                            fallback={
-                              <button
-                                class="flex flex-1 items-center text-left"
-                                onClick={() => toggleCollapsed(authority)}
-                              >
-                                <span class="text-neutral-700 dark:text-neutral-300">
-                                  {authority}
-                                </span>
-                                <span class="text-neutral-500 dark:text-neutral-400">.*</span>
-                                <span class="ml-1.5 text-neutral-400 dark:text-neutral-500">
-                                  ({nsids()?.[authority].nsids.length})
-                                </span>
-                              </button>
-                            }
-                          >
-                            <div class="flex min-w-0 flex-1 flex-col">
-                              <For
-                                each={nsids()?.[authority].nsids.filter((nsid) =>
-                                  filter() ? `${authority}.${nsid}`.includes(filter()!) : true,
-                                )}
-                              >
-                                {(nsid, index) => (
-                                  <A
-                                    href={`/at://${did}/${authority}.${nsid}`}
-                                    class="truncate hover:underline active:underline"
-                                    classList={{ "pr-16": canHover && index() === 0 }}
-                                  >
-                                    <span class="text-neutral-800/70 dark:text-neutral-200/70">
-                                      {authority}.
-                                    </span>
-                                    <span>{nsid}</span>
-                                  </A>
-                                )}
-                              </For>
-                            </div>
-                          </Show>
-                          <Show when={canHover}>
-                            <button
-                              class="absolute top-1 right-1 rounded px-2 py-0.5 text-xs text-neutral-500 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-neutral-300 hover:text-neutral-700 active:bg-neutral-400 dark:text-neutral-400 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:active:bg-neutral-500"
-                              onClick={() => toggleCollapsed(authority)}
-                            >
-                              {isCollapsed() ? "expand" : "collapse"}
-                            </button>
-                          </Show>
-                        </div>
-                      );
-                    }}
-                  </For>
-                </Show>
-              </div>
-            </Show>
-            <Show when={location.hash === "#identity" || (error() && !location.hash)}>
-              <Show when={didDoc()}>
-                {(didDocument) => (
-                  <div class="flex flex-col gap-3 wrap-anywhere">
-                    {/* ID Section */}
-                    <div>
-                      <div class="font-semibold">DID</div>
-                      <button
-                        class="group flex w-full items-center gap-1 text-left text-sm text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-neutral-200"
-                        onClick={() => addToClipboard(didDocument().id)}
-                      >
-                        <span class="truncate">{didDocument().id}</span>
-                        <span
-                          classList={{
-                            "iconify lucide--copy shrink-0": true,
-                            "opacity-0 group-hover:opacity-100": canHover,
-                          }}
-                        ></span>
-                      </button>
-                    </div>
-
-                    {/* Aliases Section */}
-                    <Show when={didDocument().alsoKnownAs}>
-                      <div>
-                        <p class="font-semibold">Aliases</p>
-                        <For each={didDocument().alsoKnownAs}>
-                          {(alias) => (
-                            <Show
-                              when={alias.startsWith("at://")}
-                              fallback={
-                                <div class="text-sm text-neutral-700 dark:text-neutral-300">
-                                  {alias}
-                                </div>
-                              }
-                            >
-                              <div class="flex flex-col gap-2">
-                                <button
-                                  class="-ml-1 flex w-fit items-center gap-1 rounded px-1 py-0.5 text-left text-sm text-neutral-700 hover:bg-neutral-200 active:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
-                                  onClick={async () => {
-                                    if (expandedAlias() === alias) {
-                                      setExpandedAlias(null);
-                                    } else {
-                                      setHandleDetailedResult(null);
-                                      setExpandedAlias(alias);
-                                      const handle = alias.replace("at://", "") as Handle;
-                                      const result = await resolveHandleDetailed(handle);
-                                      if (expandedAlias() === alias)
-                                        setHandleDetailedResult(result);
-                                    }
-                                  }}
-                                >
-                                  <span>{alias}</span>
-                                  <span
-                                    classList={{
-                                      "iconify text-base shrink-0 lucide--check text-green-600 dark:text-green-400":
-                                        validHandles[alias] === true,
-                                      "iconify lucide--x text-red-500 dark:text-red-400":
-                                        validHandles[alias] === false,
-                                      "iconify lucide--loader-circle animate-spin":
-                                        validHandles[alias] === undefined,
-                                    }}
-                                  ></span>
-                                </button>
-
-                                {/* Inline expansion */}
-                                <Show when={expandedAlias() === alias}>
-                                  <div class="mb-2 rounded-lg border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/50">
-                                    <Show
-                                      when={handleDetailedResult()}
-                                      fallback={
-                                        <div class="flex items-center gap-2 py-2 text-sm">
-                                          <span class="iconify lucide--loader-circle animate-spin"></span>
-                                          <span>Resolving handle...</span>
-                                        </div>
-                                      }
-                                    >
-                                      {(result) => {
-                                        const expectedDid = didDocument().id;
-                                        const dnsOk = () =>
-                                          result().dns.success && result().dns.did === expectedDid;
-                                        const httpOk = () =>
-                                          result().http.success &&
-                                          result().http.did === expectedDid;
-                                        const dnsMismatch = () =>
-                                          result().dns.success && result().dns.did !== expectedDid;
-                                        const httpMismatch = () =>
-                                          result().http.success &&
-                                          result().http.did !== expectedDid;
-
-                                        return (
-                                          <div class="grid grid-cols-[auto_1fr] items-center gap-x-1.5 text-sm">
-                                            {/* DNS Result */}
-                                            <span
-                                              classList={{
-                                                "iconify lucide--check text-green-600 dark:text-green-400":
-                                                  dnsOk(),
-                                                "iconify lucide--x text-red-500 dark:text-red-400":
-                                                  !dnsOk(),
-                                              }}
-                                            ></span>
-                                            <span class="font-medium">DNS (TXT record)</span>
-                                            <span></span>
-                                            <div class="mb-2 text-sm wrap-anywhere text-neutral-500 dark:text-neutral-400">
-                                              <Show
-                                                when={result().dns.success}
-                                                fallback={
-                                                  <div class="text-red-500 dark:text-red-400">
-                                                    {result().dns.error}
-                                                  </div>
-                                                }
-                                              >
-                                                <div>{result().dns.did}</div>
-                                                <Show when={dnsMismatch()}>
-                                                  <div class="text-red-500 dark:text-red-400">
-                                                    Expected: {expectedDid}
-                                                  </div>
-                                                </Show>
-                                              </Show>
-                                            </div>
-
-                                            {/* HTTP Result */}
-                                            <span
-                                              classList={{
-                                                "iconify lucide--check text-green-600 dark:text-green-400":
-                                                  httpOk(),
-                                                "iconify lucide--x text-red-500 dark:text-red-400":
-                                                  !httpOk(),
-                                              }}
-                                            ></span>
-                                            <span class="font-medium">HTTP (.well-known)</span>
-                                            <span></span>
-                                            <div class="text-sm wrap-anywhere text-neutral-500 dark:text-neutral-400">
-                                              <Show
-                                                when={result().http.success}
-                                                fallback={
-                                                  <div class="text-red-500 dark:text-red-400">
-                                                    {result().http.error}
-                                                  </div>
-                                                }
-                                              >
-                                                <div>{result().http.did}</div>
-                                                <Show when={httpMismatch()}>
-                                                  <div class="text-red-500 dark:text-red-400">
-                                                    Expected: {expectedDid}
-                                                  </div>
-                                                </Show>
-                                              </Show>
-                                            </div>
-                                          </div>
-                                        );
-                                      }}
-                                    </Show>
-                                  </div>
-                                </Show>
-                              </div>
-                            </Show>
-                          )}
-                        </For>
-                      </div>
-                    </Show>
-
-                    {/* Services Section */}
-                    <Show when={didDocument().service}>
-                      <div>
-                        <p class="font-semibold">Services</p>
-                        <div class="flex flex-col gap-1">
-                          <For each={didDocument().service}>
-                            {(service) => (
-                              <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
-                                <span class="iconify lucide--hash"></span>
-                                <div class="flex items-center gap-2">
-                                  <span>{service.id.split("#")[1]}</span>
-                                  <div class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
-                                    <span
-                                      class="iconify text-xs"
-                                      classList={{
-                                        "lucide--hard-drive":
-                                          service.type === "AtprotoPersonalDataServer",
-                                        "lucide--tag": service.type === "AtprotoLabeler",
-                                        "lucide--rss": service.type === "BskyFeedGenerator",
-                                        "lucide--wrench": ![
-                                          "AtprotoPersonalDataServer",
-                                          "AtprotoLabeler",
-                                          "BskyFeedGenerator",
-                                        ].includes(service.type.toString()),
-                                      }}
-                                    ></span>
-                                    <span>{service.type}</span>
-                                  </div>
-                                </div>
-                                <span></span>
-                                <a
-                                  class="w-fit underline hover:text-blue-500 dark:hover:text-blue-400"
-                                  href={service.serviceEndpoint.toString()}
-                                  target="_blank"
-                                  rel="noopener"
-                                >
-                                  {service.serviceEndpoint.toString()}
-                                </a>
-                              </div>
-                            )}
-                          </For>
-                        </div>
-                      </div>
-                    </Show>
-
-                    {/* Verification Methods Section */}
-                    <Show when={didDocument().verificationMethod}>
-                      <div>
-                        <p class="font-semibold">Verification Methods</p>
-                        <div class="flex flex-col gap-1">
-                          <For each={didDocument().verificationMethod}>
-                            {(verif) => (
-                              <Show when={verif.publicKeyMultibase}>
-                                {(key) => (
-                                  <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
-                                    <span class="iconify lucide--hash"></span>
-                                    <div class="flex items-center gap-2">
-                                      <span>{verif.id.split("#")[1]}</span>
-                                      <div class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
-                                        <span class="iconify lucide--key-round text-xs"></span>
-                                        <span>{detectKeyType(key())}</span>
-                                      </div>
-                                    </div>
-                                    <span></span>
-                                    <div class="font-mono break-all">{key()}</div>
-                                  </div>
-                                )}
-                              </Show>
-                            )}
-                          </For>
-                        </div>
-                      </div>
-                    </Show>
-
-                    {/* Rotation Keys Section */}
-                    <Show when={rotationKeys().length > 0}>
-                      <div>
-                        <p class="font-semibold">Rotation Keys</p>
-                        <div class="flex flex-col gap-1">
-                          <For each={rotationKeys()}>
-                            {(key) => (
-                              <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
-                                <span class="iconify lucide--key-round"></span>
-                                <span>{detectDidKeyType(key)}</span>
-                                <span></span>
-                                <div class="font-mono break-all">{key.replace("did:key:", "")}</div>
-                              </div>
-                            )}
-                          </For>
-                        </div>
-                      </div>
-                    </Show>
-                  </div>
-                )}
-              </Show>
-            </Show>
-          </div>
-        </div>
-      </Show>
-
-      <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
-        <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
-          <div
-            class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 dark:border-neutral-700"
-            onClick={(e) => {
-              const input = e.currentTarget.querySelector("input");
-              if (e.target !== input) input?.focus();
-            }}
-          >
-            <span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400"></span>
-            <input
-              ref={filterInputRef}
-              type="text"
-              spellcheck={false}
-              autocapitalize="off"
-              autocomplete="off"
-              class="grow py-2 select-none placeholder:text-sm focus:outline-none"
-              name="filter"
-              placeholder="Filter collections..."
-              value={filter() ?? ""}
-              onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
-            />
-            <Show when={canHover && !filter()}>
-              <kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
-                /
-              </kbd>
-            </Show>
-          </div>
-          <div class="flex w-full max-w-lg justify-end gap-1">
-            <button
-              class="rounded px-2 py-1 text-xs text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 active:bg-neutral-300 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"
-              onClick={expandAll}
-            >
-              Expand all
-            </button>
-            <button
-              class="rounded px-2 py-1 text-xs text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 active:bg-neutral-300 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"
-              onClick={collapseAll}
-            >
-              Collapse all
-            </button>
-          </div>
-        </div>
-      </Show>
-    </>
-  );
-};

src/views/repo/identity.tsx

···
+import { DidDocument } from "@atcute/identity";
+import { Did, Handle } from "@atcute/lexicons";
+import { createSignal, For, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+import { canHover } from "../../layout.jsx";
+import { type HandleResolveResult, resolveHandleDetailed, validateHandle } from "../../lib/api.js";
+import { detectDidKeyType, detectKeyType } from "../../lib/key.js";
+import { addToClipboard } from "../../utils/copy.js";
+
+const HandleResult = (props: {
+  label: string;
+  result: HandleResolveResult;
+  expectedDid: string;
+}) => {
+  const ok = () => props.result.success && props.result.did === props.expectedDid;
+  const mismatch = () => props.result.success && props.result.did !== props.expectedDid;
+
+  return (
+    <>
+      <span
+        classList={{
+          "iconify lucide--check text-green-600 dark:text-green-400": ok(),
+          "iconify lucide--x text-red-500 dark:text-red-400": !ok(),
+        }}
+      ></span>
+      <span class="font-medium">{props.label}</span>
+      <span></span>
+      <div class="mb-2 text-sm wrap-anywhere text-neutral-500 dark:text-neutral-400">
+        <Show
+          when={props.result.success}
+          fallback={<div class="text-red-500 dark:text-red-400">{props.result.error}</div>}
+        >
+          <div>{props.result.did}</div>
+          <Show when={mismatch()}>
+            <div class="text-red-500 dark:text-red-400">Expected: {props.expectedDid}</div>
+          </Show>
+        </Show>
+      </div>
+    </>
+  );
+};
+
+const AliasEntry = (props: { alias: string; did: string; valid: boolean | undefined }) => {
+  const [expanded, setExpanded] = createSignal(false);
+  const [result, setResult] = createSignal<{
+    dns: HandleResolveResult;
+    http: HandleResolveResult;
+  } | null>(null);
+
+  return (
+    <Show
+      when={props.alias.startsWith("at://")}
+      fallback={<div class="text-sm text-neutral-700 dark:text-neutral-300">{props.alias}</div>}
+    >
+      <div class="flex flex-col gap-2">
+        <button
+          class="-ml-1 flex w-fit items-center gap-1 rounded px-1 py-0.5 text-left text-sm text-neutral-700 hover:bg-neutral-200 active:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
+          onClick={async () => {
+            if (expanded()) {
+              setExpanded(false);
+            } else {
+              setResult(null);
+              setExpanded(true);
+              const handle = props.alias.replace("at://", "") as Handle;
+              const r = await resolveHandleDetailed(handle);
+              if (expanded()) setResult(r);
+            }
+          }}
+        >
+          <span>{props.alias}</span>
+          <span
+            classList={{
+              "iconify text-base shrink-0 lucide--check text-green-600 dark:text-green-400":
+                props.valid === true,
+              "iconify lucide--x text-red-500 dark:text-red-400": props.valid === false,
+              "iconify lucide--loader-circle animate-spin": props.valid === undefined,
+            }}
+          ></span>
+        </button>
+
+        <Show when={expanded()}>
+          <div class="mb-2 rounded-lg border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/50">
+            <Show
+              when={result()}
+              fallback={
+                <div class="flex items-center gap-2 py-2 text-sm">
+                  <span class="iconify lucide--loader-circle animate-spin"></span>
+                  <span>Resolving handle...</span>
+                </div>
+              }
+            >
+              {(r) => (
+                <div class="grid grid-cols-[auto_1fr] items-center gap-x-1.5 text-sm">
+                  <HandleResult label="DNS (TXT record)" result={r().dns} expectedDid={props.did} />
+                  <HandleResult
+                    label="HTTP (.well-known)"
+                    result={r().http}
+                    expectedDid={props.did}
+                  />
+                </div>
+              )}
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </Show>
+  );
+};
+
+const handleValidationCache = new Map<string, Record<string, boolean>>();
+
+export const IdentityView = (props: { didDoc: DidDocument; rotationKeys: string[] }) => {
+  const did = props.didDoc.id;
+  const cached = handleValidationCache.get(did);
+  const [validHandles, setValidHandles] = createStore<Record<string, boolean>>(cached ?? {});
+
+  if (!cached) {
+    (async () => {
+      for (const alias of props.didDoc.alsoKnownAs ?? []) {
+        if (alias.startsWith("at://")) {
+          const valid = await validateHandle(alias.replace("at://", "") as Handle, did as Did);
+          setValidHandles(alias, valid);
+        }
+      }
+      handleValidationCache.set(did, { ...validHandles });
+    })();
+  }
+
+  return (
+    <div class="flex flex-col gap-3 wrap-anywhere">
+      {/* DID */}
+      <div>
+        <div class="font-semibold">DID</div>
+        <button
+          class="group flex w-full items-center gap-1 text-left text-sm text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-neutral-200"
+          onClick={() => addToClipboard(did)}
+        >
+          <span class="truncate">{did}</span>
+          <span
+            classList={{
+              "iconify lucide--copy shrink-0": true,
+              "opacity-0 group-hover:opacity-100": canHover,
+            }}
+          ></span>
+        </button>
+      </div>
+
+      {/* Aliases */}
+      <Show when={props.didDoc.alsoKnownAs}>
+        <div>
+          <p class="font-semibold">Aliases</p>
+          <For each={props.didDoc.alsoKnownAs}>
+            {(alias) => <AliasEntry alias={alias} did={did} valid={validHandles[alias]} />}
+          </For>
+        </div>
+      </Show>
+
+      {/* Services */}
+      <Show when={props.didDoc.service}>
+        <div>
+          <p class="font-semibold">Services</p>
+          <div class="flex flex-col gap-1">
+            <For each={props.didDoc.service}>
+              {(service) => (
+                <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
+                  <span class="iconify lucide--hash"></span>
+                  <div class="flex items-center gap-2">
+                    <span>{service.id.split("#")[1]}</span>
+                    <div class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
+                      <span
+                        class="iconify text-xs"
+                        classList={{
+                          "lucide--hard-drive": service.type === "AtprotoPersonalDataServer",
+                          "lucide--tag": service.type === "AtprotoLabeler",
+                          "lucide--rss": service.type === "BskyFeedGenerator",
+                          "lucide--wrench": ![
+                            "AtprotoPersonalDataServer",
+                            "AtprotoLabeler",
+                            "BskyFeedGenerator",
+                          ].includes(service.type.toString()),
+                        }}
+                      ></span>
+                      <span>{service.type}</span>
+                    </div>
+                  </div>
+                  <span></span>
+                  <a
+                    class="w-fit underline hover:text-blue-500 dark:hover:text-blue-400"
+                    href={service.serviceEndpoint.toString()}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    {service.serviceEndpoint.toString()}
+                  </a>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+
+      {/* Verification Methods */}
+      <Show when={props.didDoc.verificationMethod}>
+        <div>
+          <p class="font-semibold">Verification Methods</p>
+          <div class="flex flex-col gap-1">
+            <For each={props.didDoc.verificationMethod}>
+              {(verif) => (
+                <Show when={verif.publicKeyMultibase}>
+                  {(key) => (
+                    <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
+                      <span class="iconify lucide--hash"></span>
+                      <div class="flex items-center gap-2">
+                        <span>{verif.id.split("#")[1]}</span>
+                        <div class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
+                          <span class="iconify lucide--key-round text-xs"></span>
+                          <span>{detectKeyType(key())}</span>
+                        </div>
+                      </div>
+                      <span></span>
+                      <div class="font-mono break-all">{key()}</div>
+                    </div>
+                  )}
+                </Show>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+
+      {/* Rotation Keys */}
+      <Show when={props.rotationKeys.length > 0}>
+        <div>
+          <p class="font-semibold">Rotation Keys</p>
+          <div class="flex flex-col gap-1">
+            <For each={props.rotationKeys}>
+              {(key) => (
+                <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
+                  <span class="iconify lucide--key-round"></span>
+                  <span>{detectDidKeyType(key)}</span>
+                  <span></span>
+                  <div class="font-mono break-all">{key.replace("did:key:", "")}</div>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+};

src/views/repo/index.tsx

···
+import { Client, simpleFetchHandler } from "@atcute/client";
+import { DidDocument } from "@atcute/identity";
+import { ActorIdentifier, Handle, Nsid } from "@atcute/lexicons";
+import {
+  A,
+  type RoutePreloadFunc,
+  type RouteSectionProps,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "@solidjs/router";
+import { createEffect, createResource, createSignal, For, onMount, Show } from "solid-js";
+import { Backlinks } from "../../components/backlinks.jsx";
+import {
+  ActionMenu,
+  DropdownMenu,
+  MenuProvider,
+  MenuSeparator,
+  NavMenu,
+} from "../../components/dropdown.jsx";
+import { Favicon } from "../../components/favicon.jsx";
+import { LazyTab } from "../../components/lazy-tab.jsx";
+import { setPDS } from "../../components/navbar.jsx";
+import { NestedLayout } from "../../components/nested-layout.jsx";
+import {
+  addNotification,
+  removeNotification,
+  updateNotification,
+} from "../../components/notification.jsx";
+import { Spinner } from "../../components/spinner.jsx";
+import { canHover } from "../../layout.jsx";
+import {
+  didDocCache,
+  getPDS,
+  labelerCache,
+  resolveHandle,
+  resolveLexiconAuthority,
+} from "../../lib/api.js";
+import { createLatch } from "../../lib/create-latch.js";
+import { useFilterShortcut } from "../../lib/keyboard.js";
+import { RepoProvider, useRepo } from "../../lib/repo-context.jsx";
+import { BlobView } from "../blob.jsx";
+import { IdentityView } from "./identity.jsx";
+import { PlcLogView } from "./logs.jsx";
+import { plcDirectory } from "../settings.jsx";
+
+export const repoPreload: RoutePreloadFunc = ({ params }) => {
+  if (params.repo?.startsWith("did:")) void getPDS(params.repo);
+};
+
+export const RepoLayout = (props: RouteSectionProps) => {
+  const params = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const hasChild = () => !!params.collection;
+
+  // Redirect non-DID identifiers (handles, NSIDs) via effect — must be separate from
+  // the resource because navigate inside a resource fetcher doesn't reliably re-trigger it
+  createEffect(() => {
+    const identifier = params.repo;
+    if (!identifier || identifier.startsWith("did:")) return;
+    resolveHandle(identifier as Handle)
+      .then((resolvedDid) => {
+        navigate(location.pathname.replace(identifier, resolvedDid), { replace: true });
+      })
+      .catch(() => {
+        resolveLexiconAuthority(identifier as Nsid)
+          .then((authority) => {
+            navigate(`/at://${authority}/com.atproto.lexicon.schema/${identifier}`, {
+              replace: true,
+            });
+          })
+          .catch(() => {
+            navigate(`/${identifier}`, { replace: true });
+          });
+      });
+  });
+
+  // Resource only runs for DIDs — resolves PDS + creates RPC client
+  const [resolution] = createResource(
+    () => {
+      const id = params.repo;
+      return id?.startsWith("did:") ? id : undefined;
+    },
+    async (did) => {
+      try {
+        const pdsUrl = await getPDS(did);
+        const rpc = new Client({ handler: simpleFetchHandler({ service: pdsUrl }) });
+        const didDoc = didDocCache[did] as DidDocument | undefined;
+        setPDS(pdsUrl.replace("https://", "").replace("http://", ""));
+        return { did, pds: pdsUrl, rpc, didDoc };
+      } catch {
+        let didDoc: DidDocument | undefined;
+        if (did.startsWith("did:web")) {
+          try {
+            const res = await fetch(`https://${did.replace("did:web:", "")}/.well-known/did.json`);
+            didDoc = await res.json();
+          } catch {}
+        }
+        setPDS("Missing PDS");
+        return {
+          did,
+          pds: undefined as string | undefined,
+          rpc: undefined as Client | undefined,
+          didDoc,
+          error: "Missing PDS",
+        };
+      }
+    },
+  );
+
+  // Only expose data when resolution matches current params (prevents stale data during transitions)
+  const current = () => {
+    const r = resolution();
+    if (!r || r.did !== params.repo) return null;
+    return r;
+  };
+
+  return (
+    <RepoProvider
+      value={{
+        did: () => params.repo!,
+        pds: () => current()?.pds,
+        rpc: () => current()?.rpc,
+        didDoc: () => current()?.didDoc,
+        error: () => current()?.error,
+      }}
+    >
+      <NestedLayout key={params.repo} hasChild={hasChild()} view={() => <RepoView />}>
+        {props.children}
+      </NestedLayout>
+    </RepoProvider>
+  );
+};
+
+const downloadRepo = async (pdsUrl: string, did: string) => {
+  let notificationId: string | null = null;
+  const abortController = new AbortController();
+
+  try {
+    notificationId = addNotification({
+      message: "Downloading repository...",
+      progress: 0,
+      total: 0,
+      type: "info",
+      onCancel: () => {
+        abortController.abort();
+        if (notificationId) removeNotification(notificationId);
+      },
+    });
+
+    const response = await fetch(`${pdsUrl}/xrpc/com.atproto.sync.getRepo?did=${did}`, {
+      signal: abortController.signal,
+    });
+    if (!response.ok) throw new Error(`HTTP error status: ${response.status}`);
+
+    const contentLength = response.headers.get("content-length");
+    const total = contentLength ? parseInt(contentLength, 10) : 0;
+    let loaded = 0;
+
+    const reader = response.body?.getReader();
+    const chunks: BlobPart[] = [];
+
+    if (reader) {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        chunks.push(value);
+        loaded += value.length;
+
+        if (total > 0) {
+          updateNotification(notificationId, {
+            progress: Math.round((loaded / total) * 100),
+            total,
+          });
+        } else {
+          updateNotification(notificationId, {
+            progress: Math.round((loaded / (1024 * 1024)) * 10) / 10,
+            total: 0,
+          });
+        }
+      }
+    }
+
+    const blob = new Blob(chunks);
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${did}-${new Date().toISOString()}.car`;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+
+    updateNotification(notificationId, {
+      message: "Repository downloaded successfully",
+      type: "success",
+      progress: undefined,
+      onCancel: undefined,
+    });
+    setTimeout(() => {
+      if (notificationId) removeNotification(notificationId);
+    }, 3000);
+  } catch (error) {
+    if (!(error instanceof Error && error.name === "AbortError")) {
+      console.error("Download failed:", error);
+      if (notificationId) {
+        updateNotification(notificationId, {
+          message: "Download failed",
+          type: "error",
+          progress: undefined,
+          onCancel: undefined,
+        });
+        setTimeout(() => {
+          if (notificationId) removeNotification(notificationId);
+        }, 5000);
+      }
+    }
+  }
+};
+
+const RepoView = () => {
+  const repo = useRepo();
+  const params = useParams();
+  const hidden = () => !!params.collection;
+  const location = useLocation();
+  const [error, setError] = createSignal<string>();
+  const [downloading, setDownloading] = createSignal(false);
+  const [nsids, setNsids] = createSignal<Record<string, { hidden: boolean; nsids: string[] }>>();
+  const [filter, setFilter] = createSignal<string>();
+  const [rotationKeys, setRotationKeys] = createSignal<Array<string>>([]);
+  let filterInputRef: HTMLInputElement | undefined;
+  const did = repo.did();
+
+  // Handle scrolling to a collection group when hash is like #collections:app.bsky
+  createEffect(() => {
+    const hash = location.hash;
+    if (hash.startsWith("#collections:")) {
+      const authority = hash.slice(13);
+      requestAnimationFrame(() => {
+        const element = document.getElementById(`collection-${authority}`);
+        if (element) element.scrollIntoView({ behavior: "instant", block: "start" });
+      });
+    }
+  });
+
+  onMount(() => {
+    useFilterShortcut(() => filterInputRef);
+  });
+
+  const RepoTab = (props: {
+    tab: "collections" | "backlinks" | "identity" | "blobs" | "logs";
+    label: string;
+  }) => {
+    const isActive = () => {
+      if (!location.hash) {
+        if (!error() && props.tab === "collections") return true;
+        if (!!error() && props.tab === "identity") return true;
+        return false;
+      }
+      return location.hash.startsWith(`#${props.tab}`);
+    };
+
+    return (
+      <A
+        classList={{
+          "border-b-2 font-medium transition-colors": true,
+          "border-transparent not-hover:text-neutral-600 not-hover:dark:text-neutral-300/80":
+            !isActive(),
+        }}
+        href={`/at://${params.repo}#${props.tab}`}
+      >
+        {props.label}
+      </A>
+    );
+  };
+
+  const getRotationKeys = async () => {
+    const res = await fetch(`${plcDirectory()}/${did}/log/last`);
+    const json = await res.json();
+    setRotationKeys(json.rotationKeys ?? []);
+  };
+
+  const fetchRepo = async () => {
+    if (repo.error()) {
+      setError(repo.error()!);
+    }
+
+    if (did.startsWith("did:plc")) getRotationKeys();
+
+    const rpc = repo.rpc();
+    if (!rpc) return {};
+
+    try {
+      const res = await rpc.get("com.atproto.repo.describeRepo", {
+        params: { repo: did as ActorIdentifier },
+      });
+      if (res.ok) {
+        const collections: Record<string, { hidden: boolean; nsids: string[] }> = {};
+        res.data.collections.forEach((c) => {
+          const nsid = c.split(".");
+          if (nsid.length > 2) {
+            const authority = `${nsid[0]}.${nsid[1]}`;
+            collections[authority] = {
+              nsids: (collections[authority]?.nsids ?? []).concat(nsid.slice(2).join(".")),
+              hidden: false,
+            };
+          }
+        });
+        setNsids(collections);
+      } else {
+        console.error(res.data.error);
+        switch (res.data.error) {
+          case "RepoDeactivated":
+            setError("Deactivated");
+            break;
+          case "RepoTakendown":
+            setError("Taken down");
+            break;
+          default:
+            setError("Unreachable");
+        }
+      }
+
+      return res.data;
+    } catch {
+      return {};
+    }
+  };
+
+  const shouldFetch = createLatch(() => !hidden() && (!!repo.rpc() || !!repo.error()));
+
+  const [repoData] = createResource(shouldFetch, fetchRepo);
+
+  const toggleCollapsed = (authority: string) => {
+    setNsids((prev) => ({
+      ...prev!,
+      [authority]: { ...prev![authority], hidden: !prev![authority].hidden },
+    }));
+  };
+
+  const collapseAll = () => {
+    setNsids((prev) =>
+      Object.fromEntries(Object.entries(prev!).map(([k, v]) => [k, { ...v, hidden: true }])),
+    );
+  };
+
+  const expandAll = () => {
+    setNsids((prev) =>
+      Object.fromEntries(Object.entries(prev!).map(([k, v]) => [k, { ...v, hidden: false }])),
+    );
+  };
+
+  const handleDownload = async () => {
+    const pdsUrl = repo.pds();
+    if (!pdsUrl) return;
+    setDownloading(true);
+    await downloadRepo(pdsUrl, did);
+    setDownloading(false);
+  };
+
+  createEffect(() => {
+    if (hidden()) return;
+    const handle = repo
+      .didDoc()
+      ?.alsoKnownAs?.find((alias) => alias.startsWith("at://"))
+      ?.replace("at://", "");
+    document.title = handle ? `${handle} - PDSls` : `${params.repo} - PDSls`;
+  });
+
+  return (
+    <Show when={!hidden()}>
+      <Show when={repoData.state === "unresolved" || repoData.loading}>
+        <Spinner />
+      </Show>
+      <Show when={repoData.state === "ready" || repo.error()}>
+        <div class="flex w-full flex-col gap-3 wrap-break-word">
+          <div class="flex justify-between px-2 text-sm sm:text-base">
+            <div class="flex items-center gap-3 sm:gap-4">
+              <Show when={!error()}>
+                <RepoTab tab="collections" label="Collections" />
+              </Show>
+              <RepoTab tab="identity" label="Identity" />
+              <Show when={did.startsWith("did:plc")}>
+                <RepoTab tab="logs" label="Logs" />
+              </Show>
+              <Show when={!error()}>
+                <RepoTab tab="blobs" label="Blobs" />
+              </Show>
+              <RepoTab tab="backlinks" label="Backlinks" />
+            </div>
+            <div class="flex gap-1">
+              <Show when={error() && error() !== "Missing PDS"}>
+                <div class="flex items-center gap-1 rounded-md border border-red-500 px-1.5 py-0.5 text-xs font-medium text-red-500 sm:text-sm dark:border-red-400 dark:text-red-400">
+                  <span
+                    class={`iconify ${
+                      error() === "Deactivated" ? "lucide--user-round-x"
+                      : error() === "Taken down" ? "lucide--shield-ban"
+                      : "lucide--unplug"
+                    }`}
+                  ></span>
+                  <span>{error()}</span>
+                </div>
+              </Show>
+              <MenuProvider>
+                <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
+                  <NavMenu
+                    href={`/jetstream?dids=${params.repo}`}
+                    label="Jetstream"
+                    icon="lucide--radio-tower"
+                  />
+                  <Show when={params.repo && params.repo in labelerCache}>
+                    <NavMenu
+                      href={`/labels?did=${params.repo}&uriPatterns=*`}
+                      label="Labels"
+                      icon="lucide--tag"
+                    />
+                  </Show>
+                  <Show when={error()?.length === 0 || error() === undefined}>
+                    <ActionMenu
+                      label="Download repo"
+                      icon={
+                        downloading() ? "lucide--loader-circle animate-spin" : "lucide--download"
+                      }
+                      onClick={handleDownload}
+                    />
+                  </Show>
+                  <MenuSeparator />
+                  <NavMenu
+                    href={
+                      did.startsWith("did:plc") ?
+                        `${plcDirectory()}/${did}`
+                      : `https://${did.split("did:web:")[1]}/.well-known/did.json`
+                    }
+                    newTab
+                    label="DID document"
+                    icon="lucide--external-link"
+                  />
+                  <Show when={did.startsWith("did:plc")}>
+                    <NavMenu
+                      href={`${plcDirectory()}/${did}/log/audit`}
+                      newTab
+                      label="Audit log"
+                      icon="lucide--external-link"
+                    />
+                  </Show>
+                </DropdownMenu>
+              </MenuProvider>
+            </div>
+          </div>
+          <div class="flex w-full flex-col gap-1 px-2">
+            <Show when={location.hash.startsWith("#logs")}>
+              <LazyTab>
+                <PlcLogView did={did} />
+              </LazyTab>
+            </Show>
+            <Show when={location.hash === "#backlinks"}>
+              <LazyTab>
+                <Backlinks target={did} />
+              </LazyTab>
+            </Show>
+            <Show when={location.hash === "#blobs"}>
+              <LazyTab>
+                <BlobView pds={repo.pds()!} repo={did} />
+              </LazyTab>
+            </Show>
+            <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
+              <div class="flex flex-col pb-20 text-sm wrap-anywhere">
+                <Show
+                  when={Object.keys(nsids() ?? {}).length != 0}
+                  fallback={<span class="mt-3 text-center text-base">No collections found.</span>}
+                >
+                  <For
+                    each={Object.keys(nsids() ?? {}).filter((authority) =>
+                      filter() ?
+                        authority.includes(filter()!) ||
+                        nsids()?.[authority].nsids.some((nsid) =>
+                          `${authority}.${nsid}`.includes(filter()!),
+                        )
+                      : true,
+                    )}
+                  >
+                    {(authority) => {
+                      const isHighlighted = () => location.hash === `#collections:${authority}`;
+                      const isCollapsed = () => nsids()?.[authority].hidden ?? false;
+
+                      return (
+                        <div
+                          id={`collection-${authority}`}
+                          class="group relative flex scroll-mt-4 items-start gap-2 rounded-lg p-1 transition-colors"
+                          classList={{
+                            "dark:hover:bg-dark-300 hover:bg-neutral-200": !isHighlighted(),
+                            "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),
+                          }}
+                        >
+                          <Favicon
+                            domain={authority}
+                            reverse
+                            wrapper={(children) => (
+                              <a
+                                href={`#collections:${authority}`}
+                                class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
+                              >
+                                <span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">
+                                  <span class="iconify lucide--link absolute -left-2 w-7"></span>
+                                </span>
+                                {children}
+                              </a>
+                            )}
+                          />
+                          <Show
+                            when={!isCollapsed()}
+                            fallback={
+                              <button
+                                class="flex flex-1 items-center text-left"
+                                onClick={() => toggleCollapsed(authority)}
+                              >
+                                <span class="text-neutral-700 dark:text-neutral-300">
+                                  {authority}
+                                </span>
+                                <span class="text-neutral-500 dark:text-neutral-400">.*</span>
+                                <span class="ml-1.5 text-neutral-400 dark:text-neutral-500">
+                                  ({nsids()?.[authority].nsids.length})
+                                </span>
+                              </button>
+                            }
+                          >
+                            <div class="flex min-w-0 flex-1 flex-col">
+                              <For
+                                each={nsids()?.[authority].nsids.filter((nsid) =>
+                                  filter() ? `${authority}.${nsid}`.includes(filter()!) : true,
+                                )}
+                              >
+                                {(nsid, index) => (
+                                  <A
+                                    href={`/at://${did}/${authority}.${nsid}`}
+                                    class="truncate hover:underline active:underline"
+                                    classList={{ "pr-16": canHover && index() === 0 }}
+                                  >
+                                    <span class="text-neutral-800/70 dark:text-neutral-200/70">
+                                      {authority}.
+                                    </span>
+                                    <span>{nsid}</span>
+                                  </A>
+                                )}
+                              </For>
+                            </div>
+                          </Show>
+                          <Show when={canHover}>
+                            <button
+                              class="absolute top-1 right-1 rounded px-2 py-0.5 text-xs text-neutral-500 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-neutral-300 hover:text-neutral-700 active:bg-neutral-400 dark:text-neutral-400 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:active:bg-neutral-500"
+                              onClick={() => toggleCollapsed(authority)}
+                            >
+                              {isCollapsed() ? "expand" : "collapse"}
+                            </button>
+                          </Show>
+                        </div>
+                      );
+                    }}
+                  </For>
+                </Show>
+              </div>
+            </Show>
+            <Show when={location.hash === "#identity" || (error() && !location.hash)}>
+              <Show when={repo.didDoc()}>
+                {(didDoc) => <IdentityView didDoc={didDoc()} rotationKeys={rotationKeys()} />}
+              </Show>
+            </Show>
+          </div>
+        </div>
+
+        <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
+          <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
+            <div
+              class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 dark:border-neutral-700"
+              onClick={(e) => {
+                const input = e.currentTarget.querySelector("input");
+                if (e.target !== input) input?.focus();
+              }}
+            >
+              <span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400"></span>
+              <input
+                ref={filterInputRef}
+                type="text"
+                spellcheck={false}
+                autocapitalize="off"
+                autocomplete="off"
+                class="grow py-2 select-none placeholder:text-sm focus:outline-none"
+                name="filter"
+                placeholder="Filter collections..."
+                value={filter() ?? ""}
+                onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
+              />
+              <Show when={canHover && !filter()}>
+                <kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
+                  /
+                </kbd>
+              </Show>
+            </div>
+            <div class="flex w-full max-w-lg justify-end gap-1">
+              <button
+                class="rounded px-2 py-1 text-xs text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 active:bg-neutral-300 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"
+                onClick={expandAll}
+              >
+                Expand all
+              </button>
+              <button
+                class="rounded px-2 py-1 text-xs text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 active:bg-neutral-300 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"
+                onClick={collapseAll}
+              >
+                Collapse all
+              </button>
+            </div>
+          </div>
+        </Show>
+      </Show>
+    </Show>
+  );
+};