dynamic titles

index.html

···
     <meta property="og:description" content="Browse the public data on atproto" />
     <meta property="description" content="Browse the public data on atproto" />
     <link rel="manifest" href="/manifest.json" />
-    <title>PDSls</title>
     <link rel="preconnect" href="https://fonts.bunny.net" />
     <link href="https://fonts.bunny.net/css?family=roboto-mono:400" rel="stylesheet" />
     <link href="https://fonts.cdnfonts.com/css/pecita" rel="stylesheet" />

src/layout.tsx

···
 import { Handle } from "@atcute/lexicons";
-import { Meta, MetaProvider } from "@solidjs/meta";
+import { Meta, MetaProvider, Title } from "@solidjs/meta";
 import { A, RouteSectionProps, useLocation, useNavigate } from "@solidjs/router";
 import { createEffect, ErrorBoundary, onCleanup, onMount, Show, Suspense } from "solid-js";
 import { AccountManager } from "./auth/account.jsx";
···
   });
 
   return (
-    <div id="main" class="mx-auto mb-8 flex max-w-lg flex-col items-center p-3">
-      <MetaProvider>
-        <Show when={location.pathname !== "/"}>
-          <Meta name="robots" content="noindex, nofollow" />
-        </Show>
-      </MetaProvider>
-      <header
-        class={`dark:shadow-dark-700 mb-3 flex w-full items-center justify-between rounded-xl border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 pl-3 shadow-xs [--header-bg:#fafafa] [--trans-blue:#5BCEFA90] [--trans-pink:#F5A9B890] [--trans-white:#FFFFFF90] dark:border-neutral-700 dark:bg-neutral-800 dark:[--header-bg:#262626] dark:[--trans-blue:#5BCEFAa0] dark:[--trans-pink:#F5A9B8a0] dark:[--trans-white:#FFFFFFa0] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,var(--trans-blue)_0%,var(--trans-blue)_20%,var(--trans-pink)_20%,var(--trans-pink)_40%,var(--trans-white)_40%,var(--trans-white)_60%,var(--trans-pink)_60%,var(--trans-pink)_80%,var(--trans-blue)_80%,var(--trans-blue)_100%)]" : ""}`}
-        style={{
-          "background-image":
-            props.params.repo && props.params.repo in headers ?
-              `linear-gradient(to left, transparent 10%, var(--header-bg) 85%), url(/headers/${headers[props.params.repo]})`
-            : undefined,
-        }}
-      >
-        <A
-          href="/"
-          style='font-feature-settings: "cv05"'
-          class="relative flex items-center gap-1 text-xl font-semibold"
+    <MetaProvider>
+      <Title>PDSls</Title>
+      <Show when={location.pathname !== "/"}>
+        <Meta name="robots" content="noindex, nofollow" />
+      </Show>
+      <div id="main" class="mx-auto mb-8 flex max-w-lg flex-col items-center p-3">
+        <header
+          class={`dark:shadow-dark-700 mb-3 flex w-full items-center justify-between rounded-xl border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 pl-3 shadow-xs [--header-bg:#fafafa] [--trans-blue:#5BCEFA90] [--trans-pink:#F5A9B890] [--trans-white:#FFFFFF90] dark:border-neutral-700 dark:bg-neutral-800 dark:[--header-bg:#262626] dark:[--trans-blue:#5BCEFAa0] dark:[--trans-pink:#F5A9B8a0] dark:[--trans-white:#FFFFFFa0] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,var(--trans-blue)_0%,var(--trans-blue)_20%,var(--trans-pink)_20%,var(--trans-pink)_40%,var(--trans-white)_40%,var(--trans-white)_60%,var(--trans-pink)_60%,var(--trans-pink)_80%,var(--trans-blue)_80%,var(--trans-blue)_100%)]" : ""}`}
+          style={{
+            "background-image":
+              props.params.repo && props.params.repo in headers ?
+                `linear-gradient(to left, transparent 10%, var(--header-bg) 85%), url(/headers/${headers[props.params.repo]})`
+              : undefined,
+          }}
         >
-          <span class="iconify tabler--binary-tree-filled text-[#76c4e5]"></span>
-          <span>PDSls</span>
-          <Show when={localStorage.getItem("hrt") === "true"}>
-            <img
-              src="/ribbon.webp"
-              alt=""
-              class="pointer-events-none absolute -top-3 -right-4 w-8 rotate-15"
-            />
+          <A
+            href="/"
+            style='font-feature-settings: "cv05"'
+            class="relative flex items-center gap-1 text-xl font-semibold"
+          >
+            <span class="iconify tabler--binary-tree-filled text-[#76c4e5]"></span>
+            <span>PDSls</span>
+            <Show when={localStorage.getItem("hrt") === "true"}>
+              <img
+                src="/ribbon.webp"
+                alt=""
+                class="pointer-events-none absolute -top-3 -right-4 w-8 rotate-15"
+              />
+            </Show>
+          </A>
+          <div class="relative flex items-center gap-0.5 rounded-lg bg-neutral-50/60 px-1 py-0.5 dark:bg-neutral-800/60">
+            <SearchButton />
+            <Show when={hasUserScope("create")}>
+              <RecordEditor create={true} />
+            </Show>
+            <AccountManager />
+            <MenuProvider>
+              <DropdownMenu icon="lucide--menu text-lg" buttonClass="rounded-lg p-1.5">
+                <NavMenu href="/jetstream" label="Jetstream" icon="lucide--radio-tower" />
+                <NavMenu href="/firehose" label="Firehose" icon="lucide--antenna" />
+                <NavMenu href="/labels" label="Labels" icon="lucide--tag" />
+                <NavMenu href="/settings" label="Settings" icon="lucide--settings" />
+                <MenuSeparator />
+                <NavMenu
+                  href="https://bsky.app/profile/did:plc:6q5daed5gutiyerimlrnojnz"
+                  label="Bluesky"
+                  icon="simple-icons--bluesky text-[#0085ff]"
+                  newTab
+                />
+                <NavMenu
+                  href="https://tangled.org/@pdsls.dev/pdsls/"
+                  label="Source"
+                  icon="lucide--code"
+                  newTab
+                />
+              </DropdownMenu>
+            </MenuProvider>
+          </div>
+        </header>
+        <div class="flex w-full flex-col items-center gap-3 text-pretty">
+          <Show when={showSearch() || location.pathname === "/"}>
+            <Search />
+          </Show>
+          <Show when={props.params.pds}>
+            <NavBar params={props.params} />
           </Show>
-        </A>
-        <div class="relative flex items-center gap-0.5 rounded-lg bg-neutral-50/60 px-1 py-0.5 dark:bg-neutral-800/60">
-          <SearchButton />
-          <Show when={hasUserScope("create")}>
-            <RecordEditor create={true} />
+          <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>
-          <AccountManager />
-          <MenuProvider>
-            <DropdownMenu icon="lucide--menu text-lg" buttonClass="rounded-lg p-1.5">
-              <NavMenu href="/jetstream" label="Jetstream" icon="lucide--radio-tower" />
-              <NavMenu href="/firehose" label="Firehose" icon="lucide--antenna" />
-              <NavMenu href="/labels" label="Labels" icon="lucide--tag" />
-              <NavMenu href="/settings" label="Settings" icon="lucide--settings" />
-              <MenuSeparator />
-              <NavMenu
-                href="https://bsky.app/profile/did:plc:6q5daed5gutiyerimlrnojnz"
-                label="Bluesky"
-                icon="simple-icons--bluesky text-[#0085ff]"
-                newTab
-              />
-              <NavMenu
-                href="https://tangled.org/@pdsls.dev/pdsls/"
-                label="Source"
-                icon="lucide--code"
-                newTab
-              />
-            </DropdownMenu>
-          </MenuProvider>
         </div>
-      </header>
-      <div class="flex w-full flex-col items-center gap-3 text-pretty">
-        <Show when={showSearch() || location.pathname === "/"}>
-          <Search />
-        </Show>
-        <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>
+        <NotificationContainer />
+        <Show
+          when={localStorage.plcDirectory && localStorage.plcDirectory !== "https://plc.directory"}
+        >
+          <div class="dark:bg-dark-500 fixed right-0 bottom-0 left-0 z-10 flex items-center justify-center bg-neutral-100 px-3 py-1 text-xs">
+            <span>
+              PLC directory: <span class="font-medium">{localStorage.plcDirectory}</span>
+            </span>
+          </div>
         </Show>
       </div>
-      <NotificationContainer />
-      <Show
-        when={localStorage.plcDirectory && localStorage.plcDirectory !== "https://plc.directory"}
-      >
-        <div class="dark:bg-dark-500 fixed right-0 bottom-0 left-0 z-10 flex items-center justify-center bg-neutral-100 px-3 py-1 text-xs">
-          <span>
-            PLC directory: <span class="font-medium">{localStorage.plcDirectory}</span>
-          </span>
-        </div>
-      </Show>
-    </div>
+    </MetaProvider>
   );
 };
 

src/views/collection.tsx

···
 import { Client, simpleFetchHandler } from "@atcute/client";
 import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";
 import * as TID from "@atcute/tid";
+import { Title } from "@solidjs/meta";
 import { A, useBeforeLeave, useParams } from "@solidjs/router";
 import {
   createEffect,
···
     );
 
   return (
-    <Show when={records.length || response()}>
-      <div class="-mt-2 flex w-full flex-col items-center">
-        <StickyOverlay>
-          <div class="flex w-full flex-col gap-2">
-            <div class="flex items-center gap-1.5">
-              <Show when={agent() && agent()?.sub === did && hasUserScope("delete")}>
-                <div class="flex items-center">
-                  <Tooltip
-                    text={batchDelete() ? "Cancel" : "Delete"}
-                    children={
-                      <button
-                        onclick={() => {
-                          setRecords({ from: 0, to: records.length - 1 }, "toDelete", false);
-                          setLastSelected(undefined);
-                          setBatchDelete(!batchDelete());
-                        }}
-                        class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
-                      >
-                        <span
-                          class={`iconify ${batchDelete() ? "lucide--circle-x" : "lucide--trash-2"} `}
-                        ></span>
-                      </button>
-                    }
-                  />
-                  <Show when={batchDelete()}>
+    <>
+      <Title>{params.collection} - PDSls</Title>
+      <Show when={records.length || response()}>
+        <div class="-mt-2 flex w-full flex-col items-center">
+          <StickyOverlay>
+            <div class="flex w-full flex-col gap-2">
+              <div class="flex items-center gap-1.5">
+                <Show when={agent() && agent()?.sub === did && hasUserScope("delete")}>
+                  <div class="flex items-center">
                     <Tooltip
-                      text="Select all"
+                      text={batchDelete() ? "Cancel" : "Delete"}
                       children={
                         <button
-                          onclick={() => selectAll()}
+                          onclick={() => {
+                            setRecords({ from: 0, to: records.length - 1 }, "toDelete", false);
+                            setLastSelected(undefined);
+                            setBatchDelete(!batchDelete());
+                          }}
                           class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
                         >
-                          <span class="iconify lucide--copy-check"></span>
+                          <span
+                            class={`iconify ${batchDelete() ? "lucide--circle-x" : "lucide--trash-2"} `}
+                          ></span>
                         </button>
                       }
                     />
-                    <Show when={hasUserScope("create")}>
+                    <Show when={batchDelete()}>
+                      <Tooltip
+                        text="Select all"
+                        children={
+                          <button
+                            onclick={() => selectAll()}
+                            class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                          >
+                            <span class="iconify lucide--copy-check"></span>
+                          </button>
+                        }
+                      />
+                      <Show when={hasUserScope("create")}>
+                        <Tooltip
+                          text="Recreate"
+                          children={
+                            <button
+                              onclick={() => {
+                                setRecreate(true);
+                                setOpenDelete(true);
+                              }}
+                              class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                            >
+                              <span class="iconify lucide--recycle text-green-500 dark:text-green-400"></span>
+                            </button>
+                          }
+                        />
+                      </Show>
                       <Tooltip
-                        text="Recreate"
+                        text="Delete"
                         children={
                           <button
                             onclick={() => {
-                              setRecreate(true);
+                              setRecreate(false);
                               setOpenDelete(true);
                             }}
                             class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
                           >
-                            <span class="iconify lucide--recycle text-green-500 dark:text-green-400"></span>
+                            <span class="iconify lucide--trash-2 text-red-500 dark:text-red-400"></span>
                           </button>
                         }
                       />
                     </Show>
-                    <Tooltip
-                      text="Delete"
-                      children={
-                        <button
-                          onclick={() => {
-                            setRecreate(false);
-                            setOpenDelete(true);
-                          }}
-                          class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                  </div>
+                  <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
+                    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+                      <h2 class="mb-2 font-semibold">
+                        {recreate() ? "Recreate" : "Delete"}{" "}
+                        {records.filter((r) => r.toDelete).length} records?
+                      </h2>
+                      <div class="flex justify-end gap-2">
+                        <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
+                        <Button
+                          onClick={deleteRecords}
+                          class={`dark:shadow-dark-700 rounded-lg px-2 py-1.5 text-xs text-white shadow-xs select-none ${recreate() ? "bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500" : "bg-red-500 hover:bg-red-400 active:bg-red-400"}`}
                         >
-                          <span class="iconify lucide--trash-2 text-red-500 dark:text-red-400"></span>
-                        </button>
-                      }
-                    />
-                  </Show>
-                </div>
-                <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
-                  <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
-                    <h2 class="mb-2 font-semibold">
-                      {recreate() ? "Recreate" : "Delete"}{" "}
-                      {records.filter((r) => r.toDelete).length} records?
-                    </h2>
-                    <div class="flex justify-end gap-2">
-                      <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
-                      <Button
-                        onClick={deleteRecords}
-                        class={`dark:shadow-dark-700 rounded-lg px-2 py-1.5 text-xs text-white shadow-xs select-none ${recreate() ? "bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500" : "bg-red-500 hover:bg-red-400 active:bg-red-400"}`}
-                      >
-                        {recreate() ? "Recreate" : "Delete"}
-                      </Button>
+                          {recreate() ? "Recreate" : "Delete"}
+                        </Button>
+                      </div>
                     </div>
+                  </Modal>
+                </Show>
+                <TextInput
+                  name="Filter"
+                  placeholder="Filter by substring"
+                  onInput={(e) => setFilter(e.currentTarget.value)}
+                  class="grow"
+                />
+                <Tooltip text="Jetstream">
+                  <A
+                    href={`/jetstream?collections=${params.collection}&dids=${params.repo}`}
+                    class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                  >
+                    <span class="iconify lucide--radio-tower"></span>
+                  </A>
+                </Tooltip>
+              </div>
+              <Show when={records.length > 1}>
+                <div class="flex items-center justify-between gap-x-2">
+                  <Button
+                    onClick={() => {
+                      setReverse(!reverse());
+                      setCursor(undefined);
+                      clearCollectionCache(cacheKey());
+                      refetch();
+                    }}
+                    classList={{
+                      "text-blue-500! dark:text-blue-400! border-blue-500! dark:border-blue-400!":
+                        reverse(),
+                    }}
+                  >
+                    <span
+                      class={`iconify ${reverse() ? "lucide--arrow-down-wide-narrow" : "lucide--arrow-up-narrow-wide"}`}
+                    ></span>
+                    Reverse
+                  </Button>
+                  <div>
+                    <Show when={batchDelete()}>
+                      <span>{records.filter((rec) => rec.toDelete).length}</span>
+                      <span>/</span>
+                    </Show>
+                    <span>{filter() ? filteredRecords().length : records.length} records</span>
                   </div>
-                </Modal>
+                  <div class="flex w-20 items-center justify-end">
+                    <Show when={cursor()}>
+                      <Show when={!response.loading}>
+                        <Button onClick={() => refetch()}>Load More</Button>
+                      </Show>
+                      <Show when={response.loading}>
+                        <div class="iconify lucide--loader-circle w-20 animate-spin text-xl" />
+                      </Show>
+                    </Show>
+                  </div>
+                </div>
               </Show>
-              <TextInput
-                name="Filter"
-                placeholder="Filter by substring"
-                onInput={(e) => setFilter(e.currentTarget.value)}
-                class="grow"
-              />
-              <Tooltip text="Jetstream">
-                <A
-                  href={`/jetstream?collections=${params.collection}&dids=${params.repo}`}
-                  class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
-                >
-                  <span class="iconify lucide--radio-tower"></span>
-                </A>
-              </Tooltip>
             </div>
-            <Show when={records.length > 1}>
-              <div class="flex items-center justify-between gap-x-2">
-                <Button
-                  onClick={() => {
-                    setReverse(!reverse());
-                    setCursor(undefined);
-                    clearCollectionCache(cacheKey());
-                    refetch();
-                  }}
-                  classList={{
-                    "text-blue-500! dark:text-blue-400! border-blue-500! dark:border-blue-400!":
-                      reverse(),
-                  }}
-                >
-                  <span
-                    class={`iconify ${reverse() ? "lucide--arrow-down-wide-narrow" : "lucide--arrow-up-narrow-wide"}`}
-                  ></span>
-                  Reverse
-                </Button>
-                <div>
-                  <Show when={batchDelete()}>
-                    <span>{records.filter((rec) => rec.toDelete).length}</span>
-                    <span>/</span>
-                  </Show>
-                  <span>{filter() ? filteredRecords().length : records.length} records</span>
-                </div>
-                <div class="flex w-20 items-center justify-end">
-                  <Show when={cursor()}>
-                    <Show when={!response.loading}>
-                      <Button onClick={() => refetch()}>Load More</Button>
+          </StickyOverlay>
+          <div class="flex max-w-full flex-col px-2 font-mono">
+            <For each={filteredRecords()}>
+              {(record, index) => {
+                const rounding = () => {
+                  const recs = filteredRecords();
+                  const prevSelected = recs[index() - 1]?.toDelete;
+                  const nextSelected = recs[index() + 1]?.toDelete;
+                  return `${!prevSelected ? "rounded-t" : ""} ${!nextSelected ? "rounded-b" : ""}`;
+                };
+                return (
+                  <>
+                    <Show when={batchDelete()}>
+                      <div
+                        class={`select-none ${
+                          record.toDelete ?
+                            `bg-blue-200 hover:bg-blue-300/80 active:bg-blue-300 dark:bg-blue-700/30 dark:hover:bg-blue-700/50 dark:active:bg-blue-700/70 ${rounding()}`
+                          : "rounded hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                        }`}
+                        onclick={(e) => {
+                          handleSelectionClick(e, index());
+                          setRecords(index(), "toDelete", !record.toDelete);
+                        }}
+                      >
+                        <RecordLink record={record} />
+                      </div>
                     </Show>
-                    <Show when={response.loading}>
-                      <div class="iconify lucide--loader-circle w-20 animate-spin text-xl" />
+                    <Show when={!batchDelete()}>
+                      <A
+                        href={`/at://${did}/${params.collection}/${record.rkey}`}
+                        class="rounded select-none hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                      >
+                        <RecordLink record={record} />
+                      </A>
                     </Show>
-                  </Show>
-                </div>
-              </div>
-            </Show>
+                  </>
+                );
+              }}
+            </For>
           </div>
-        </StickyOverlay>
-        <div class="flex max-w-full flex-col px-2 font-mono">
-          <For each={filteredRecords()}>
-            {(record, index) => {
-              const rounding = () => {
-                const recs = filteredRecords();
-                const prevSelected = recs[index() - 1]?.toDelete;
-                const nextSelected = recs[index() + 1]?.toDelete;
-                return `${!prevSelected ? "rounded-t" : ""} ${!nextSelected ? "rounded-b" : ""}`;
-              };
-              return (
-                <>
-                  <Show when={batchDelete()}>
-                    <div
-                      class={`select-none ${
-                        record.toDelete ?
-                          `bg-blue-200 hover:bg-blue-300/80 active:bg-blue-300 dark:bg-blue-700/30 dark:hover:bg-blue-700/50 dark:active:bg-blue-700/70 ${rounding()}`
-                        : "rounded hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
-                      }`}
-                      onclick={(e) => {
-                        handleSelectionClick(e, index());
-                        setRecords(index(), "toDelete", !record.toDelete);
-                      }}
-                    >
-                      <RecordLink record={record} />
-                    </div>
-                  </Show>
-                  <Show when={!batchDelete()}>
-                    <A
-                      href={`/at://${did}/${params.collection}/${record.rkey}`}
-                      class="rounded select-none hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
-                    >
-                      <RecordLink record={record} />
-                    </A>
-                  </Show>
-                </>
-              );
-            }}
-          </For>
         </div>
-      </div>
-    </Show>
+      </Show>
+    </>
   );
 };
 

src/views/labels.tsx

···
 import { Client, simpleFetchHandler } from "@atcute/client";
 import { isAtprotoDid } from "@atcute/identity";
 import { Handle } from "@atcute/lexicons";
+import { Title } from "@solidjs/meta";
 import { A, useSearchParams } from "@solidjs/router";
 import { createMemo, createSignal, For, onMount, Show } from "solid-js";
 import { Button } from "../components/button.jsx";
···
   };
 
   return (
-    <div class="flex w-full flex-col items-center">
-      <form
-        ref={formRef}
-        class="flex w-full max-w-3xl flex-col gap-y-2 px-3 pb-2"
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleSearch();
-        }}
-      >
-        <div class="flex flex-col gap-y-1.5">
-          <label class="flex w-full flex-col gap-y-1">
-            <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-              Labeler DID/Handle
-            </span>
-            <TextInput
-              name="did"
-              value={didInput()}
-              onInput={(e) => setDidInput(e.currentTarget.value)}
-              placeholder="did:plc:..."
-              class="w-full"
-            />
-          </label>
-
-          <label class="flex w-full flex-col gap-y-1">
-            <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-              URI Patterns (comma-separated)
-            </span>
-            <textarea
-              id="uriPatterns"
-              name="uriPatterns"
-              spellcheck={false}
-              rows={2}
-              value={searchParams.uriPatterns ?? "*"}
-              placeholder="at://did:web:example.com/app.bsky.feed.post/*"
-              class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1.5 text-sm outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
-            />
-          </label>
-        </div>
-
-        <Button
-          type="submit"
-          disabled={loading()}
-          class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 w-fit items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
+    <>
+      <Title>Labels - PDSls</Title>
+      <div class="flex w-full flex-col items-center">
+        <form
+          ref={formRef}
+          class="flex w-full max-w-3xl flex-col gap-y-2 px-3 pb-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSearch();
+          }}
         >
-          <span class="iconify lucide--search" />
-          <span>Search Labels</span>
-        </Button>
+          <div class="flex flex-col gap-y-1.5">
+            <label class="flex w-full flex-col gap-y-1">
+              <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+                Labeler DID/Handle
+              </span>
+              <TextInput
+                name="did"
+                value={didInput()}
+                onInput={(e) => setDidInput(e.currentTarget.value)}
+                placeholder="did:plc:..."
+                class="w-full"
+              />
+            </label>
 
-        <Show when={error()}>
-          <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
-            {error()}
+            <label class="flex w-full flex-col gap-y-1">
+              <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+                URI Patterns (comma-separated)
+              </span>
+              <textarea
+                id="uriPatterns"
+                name="uriPatterns"
+                spellcheck={false}
+                rows={2}
+                value={searchParams.uriPatterns ?? "*"}
+                placeholder="at://did:web:example.com/app.bsky.feed.post/*"
+                class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1.5 text-sm outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
+              />
+            </label>
           </div>
-        </Show>
-      </form>
 
-      <Show when={hasSearched()}>
-        <StickyOverlay>
-          <div class="flex w-full items-center gap-x-2">
-            <TextInput
-              placeholder="Filter labels (* for partial, -exclude)"
-              name="filter"
-              value={filter()}
-              onInput={(e) => setFilter(e.currentTarget.value)}
-              class="min-w-0 grow text-sm placeholder:text-xs"
-            />
-            <div class="flex shrink-0 items-center gap-x-2 text-sm">
-              <Show when={labels().length > 0}>
-                <span class="whitespace-nowrap text-neutral-600 dark:text-neutral-400">
-                  {filteredLabels().length}/{labels().length}
-                </span>
-              </Show>
+          <Button
+            type="submit"
+            disabled={loading()}
+            class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 w-fit items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
+          >
+            <span class="iconify lucide--search" />
+            <span>Search Labels</span>
+          </Button>
 
-              <Show when={cursor()}>
-                <Button
-                  onClick={handleLoadMore}
-                  disabled={loading()}
-                  class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 w-20 items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
-                >
-                  <Show
-                    when={!loading()}
-                    fallback={<span class="iconify lucide--loader-circle animate-spin" />}
-                  >
-                    Load More
-                  </Show>
-                </Button>
-              </Show>
+          <Show when={error()}>
+            <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
+              {error()}
             </div>
-          </div>
-        </StickyOverlay>
+          </Show>
+        </form>
 
-        <div class="w-full max-w-3xl px-3 py-2">
-          <Show when={loading() && labels().length === 0}>
-            <div class="flex flex-col items-center justify-center py-12 text-center">
-              <span class="iconify lucide--loader-circle mb-3 animate-spin text-4xl text-neutral-400" />
-              <p class="text-sm text-neutral-600 dark:text-neutral-400">Loading labels...</p>
+        <Show when={hasSearched()}>
+          <StickyOverlay>
+            <div class="flex w-full items-center gap-x-2">
+              <TextInput
+                placeholder="Filter labels (* for partial, -exclude)"
+                name="filter"
+                value={filter()}
+                onInput={(e) => setFilter(e.currentTarget.value)}
+                class="min-w-0 grow text-sm placeholder:text-xs"
+              />
+              <div class="flex shrink-0 items-center gap-x-2 text-sm">
+                <Show when={labels().length > 0}>
+                  <span class="whitespace-nowrap text-neutral-600 dark:text-neutral-400">
+                    {filteredLabels().length}/{labels().length}
+                  </span>
+                </Show>
+
+                <Show when={cursor()}>
+                  <Button
+                    onClick={handleLoadMore}
+                    disabled={loading()}
+                    class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 w-20 items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
+                  >
+                    <Show
+                      when={!loading()}
+                      fallback={<span class="iconify lucide--loader-circle animate-spin" />}
+                    >
+                      Load More
+                    </Show>
+                  </Button>
+                </Show>
+              </div>
             </div>
-          </Show>
+          </StickyOverlay>
 
-          <Show when={!loading() || labels().length > 0}>
-            <Show when={filteredLabels().length > 0}>
-              <div class="grid gap-2">
-                <For each={filteredLabels()}>{(label) => <LabelCard label={label} />}</For>
+          <div class="w-full max-w-3xl px-3 py-2">
+            <Show when={loading() && labels().length === 0}>
+              <div class="flex flex-col items-center justify-center py-12 text-center">
+                <span class="iconify lucide--loader-circle mb-3 animate-spin text-4xl text-neutral-400" />
+                <p class="text-sm text-neutral-600 dark:text-neutral-400">Loading labels...</p>
               </div>
             </Show>
 
-            <Show when={labels().length > 0 && filteredLabels().length === 0}>
-              <div class="flex flex-col items-center justify-center py-8 text-center">
-                <span class="iconify lucide--search-x mb-2 text-3xl text-neutral-400" />
-                <p class="text-sm text-neutral-600 dark:text-neutral-400">
-                  No labels match your filter
-                </p>
-              </div>
-            </Show>
+            <Show when={!loading() || labels().length > 0}>
+              <Show when={filteredLabels().length > 0}>
+                <div class="grid gap-2">
+                  <For each={filteredLabels()}>{(label) => <LabelCard label={label} />}</For>
+                </div>
+              </Show>
+
+              <Show when={labels().length > 0 && filteredLabels().length === 0}>
+                <div class="flex flex-col items-center justify-center py-8 text-center">
+                  <span class="iconify lucide--search-x mb-2 text-3xl text-neutral-400" />
+                  <p class="text-sm text-neutral-600 dark:text-neutral-400">
+                    No labels match your filter
+                  </p>
+                </div>
+              </Show>
 
-            <Show when={labels().length === 0 && !loading()}>
-              <div class="flex flex-col items-center justify-center py-8 text-center">
-                <span class="iconify lucide--tags mb-2 text-3xl text-neutral-400" />
-                <p class="text-sm text-neutral-600 dark:text-neutral-400">No labels found</p>
-              </div>
+              <Show when={labels().length === 0 && !loading()}>
+                <div class="flex flex-col items-center justify-center py-8 text-center">
+                  <span class="iconify lucide--tags mb-2 text-3xl text-neutral-400" />
+                  <p class="text-sm text-neutral-600 dark:text-neutral-400">No labels found</p>
+                </div>
+              </Show>
             </Show>
-          </Show>
-        </div>
-      </Show>
-    </div>
+          </div>
+        </Show>
+      </div>
+    </>
   );
 };

src/views/pds.tsx

···
 import { Client, simpleFetchHandler } from "@atcute/client";
 import { InferXRPCBodyOutput } from "@atcute/lexicons";
 import * as TID from "@atcute/tid";
+import { Title } from "@solidjs/meta";
 import { A, useLocation, useParams } from "@solidjs/router";
 import { createResource, createSignal, For, Show } from "solid-js";
 import { Button } from "../components/button";
···
   );
 
   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="flex flex-col divide-y-[0.5px] divide-neutral-300 pb-20 dark:divide-neutral-700">
-            <For each={repos()}>{(repo) => <RepoCard {...repo} />}</For>
+    <>
+      <Title>{params.pds} - PDSls</Title>
+      <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>
-        <div class="flex flex-col gap-2">
-          <Show when={location.hash === "#info"}>
-            <Show when={version()}>
-              {(version) => (
-                <div class="flex flex-col">
-                  <span class="font-semibold">Version</span>
-                  <span class="text-sm text-neutral-700 dark:text-neutral-300">{version()}</span>
-                </div>
-              )}
-            </Show>
-            <Show when={serverInfos()}>
-              {(server) => (
-                <>
+          <Show when={!location.hash || location.hash === "#repos"}>
+            <div class="flex flex-col divide-y-[0.5px] divide-neutral-300 pb-20 dark:divide-neutral-700">
+              <For each={repos()}>{(repo) => <RepoCard {...repo} />}</For>
+            </div>
+          </Show>
+          <div class="flex flex-col gap-2">
+            <Show when={location.hash === "#info"}>
+              <Show when={version()}>
+                {(version) => (
                   <div class="flex flex-col">
-                    <span class="font-semibold">DID</span>
-                    <span class="text-sm">{server().did}</span>
+                    <span class="font-semibold">Version</span>
+                    <span class="text-sm text-neutral-700 dark:text-neutral-300">{version()}</span>
                   </div>
-                  <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">Phone Verification Required</span>
-                      <span class="iconify lucide--check text-green-500 dark:text-green-400"></span>
-                    </div>
-                  </Show>
-                  <Show when={server().availableUserDomains.length}>
-                    <div class="flex flex-col">
-                      <span class="font-semibold">Available User Domains</span>
-                      <For each={server().availableUserDomains}>
-                        {(domain) => <span class="text-sm wrap-anywhere">{domain}</span>}
-                      </For>
-                    </div>
-                  </Show>
-                  <Show when={server().links?.privacyPolicy}>
+                )}
+              </Show>
+              <Show when={serverInfos()}>
+                {(server) => (
+                  <>
                     <div class="flex flex-col">
-                      <span class="font-semibold">Privacy Policy</span>
-                      <a
-                        href={server().links?.privacyPolicy}
-                        class="text-sm hover:underline"
-                        target="_blank"
-                        rel="noopener"
-                      >
-                        {server().links?.privacyPolicy}
-                      </a>
+                      <span class="font-semibold">DID</span>
+                      <span class="text-sm">{server().did}</span>
                     </div>
-                  </Show>
-                  <Show when={server().links?.termsOfService}>
-                    <div class="flex flex-col">
-                      <span class="font-semibold">Terms of Service</span>
-                      <a
-                        href={server().links?.termsOfService}
-                        class="text-sm hover:underline"
-                        target="_blank"
-                        rel="noopener"
-                      >
-                        {server().links?.termsOfService}
-                      </a>
-                    </div>
-                  </Show>
-                  <Show when={server().contact?.email}>
-                    <div class="flex flex-col">
-                      <span class="font-semibold">Contact</span>
-                      <a href={`mailto:${server().contact?.email}`} class="text-sm hover:underline">
-                        {server().contact?.email}
-                      </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>
-                </>
-              )}
-            </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 bg-neutral-100 pt-2 pb-4">
-          <div class="flex flex-col items-center gap-1 pb-2">
-            <p>{repos()?.length} loaded</p>
-            <Show when={!response.loading && cursor()}>
-              <Button onClick={() => refetch()}>Load More</Button>
-            </Show>
-            <Show when={response.loading}>
-              <span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
+                    <Show when={server().phoneVerificationRequired}>
+                      <div class="flex items-center gap-1">
+                        <span class="font-semibold">Phone Verification Required</span>
+                        <span class="iconify lucide--check text-green-500 dark:text-green-400"></span>
+                      </div>
+                    </Show>
+                    <Show when={server().availableUserDomains.length}>
+                      <div class="flex flex-col">
+                        <span class="font-semibold">Available User Domains</span>
+                        <For each={server().availableUserDomains}>
+                          {(domain) => <span class="text-sm wrap-anywhere">{domain}</span>}
+                        </For>
+                      </div>
+                    </Show>
+                    <Show when={server().links?.privacyPolicy}>
+                      <div class="flex flex-col">
+                        <span class="font-semibold">Privacy Policy</span>
+                        <a
+                          href={server().links?.privacyPolicy}
+                          class="text-sm hover:underline"
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          {server().links?.privacyPolicy}
+                        </a>
+                      </div>
+                    </Show>
+                    <Show when={server().links?.termsOfService}>
+                      <div class="flex flex-col">
+                        <span class="font-semibold">Terms of Service</span>
+                        <a
+                          href={server().links?.termsOfService}
+                          class="text-sm hover:underline"
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          {server().links?.termsOfService}
+                        </a>
+                      </div>
+                    </Show>
+                    <Show when={server().contact?.email}>
+                      <div class="flex flex-col">
+                        <span class="font-semibold">Contact</span>
+                        <a
+                          href={`mailto:${server().contact?.email}`}
+                          class="text-sm hover:underline"
+                        >
+                          {server().contact?.email}
+                        </a>
+                      </div>
+                    </Show>
+                  </>
+                )}
+              </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 bg-neutral-100 pt-2 pb-4">
+            <div class="flex flex-col items-center gap-1 pb-2">
+              <p>{repos()?.length} loaded</p>
+              <Show when={!response.loading && cursor()}>
+                <Button onClick={() => refetch()}>Load More</Button>
+              </Show>
+              <Show when={response.loading}>
+                <span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
+              </Show>
+            </div>
+          </div>
+        </Show>
       </Show>
-    </Show>
+    </>
   );
 };
 

src/views/record.tsx

···
 import { ActorIdentifier, is, Nsid } from "@atcute/lexicons";
 import { AtprotoDid, Did, isNsid } from "@atcute/lexicons/syntax";
 import { verifyRecord } from "@atcute/repo";
+import { Title } from "@solidjs/meta";
 import { A, useLocation, useNavigate, useParams } from "@solidjs/router";
 import { createResource, createSignal, ErrorBoundary, Show, Suspense } from "solid-js";
 import { hasUserScope } from "../auth/scope-utils";
···
   };
 
   return (
-    <Show when={record()} keyed>
-      <div class="flex w-full flex-col items-center">
-        <div class="mb-3 flex w-full justify-between px-2 text-sm sm:text-base">
-          <div class="flex items-center gap-4">
-            <RecordTab tab="record" label="Record" />
-            <RecordTab tab="schema" label="Schema" />
-            <RecordTab tab="backlinks" label="Backlinks" />
-            <RecordTab tab="info" label="Info" error />
-          </div>
-          <div class="flex gap-0.5">
-            <Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}>
-              <Show when={hasUserScope("update")}>
-                <RecordEditor create={false} record={record()?.value} refetch={refetch} />
-              </Show>
-              <Show when={hasUserScope("delete")}>
-                <Tooltip text="Delete">
-                  <button
-                    class="flex items-center rounded-sm p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
-                    onclick={() => setOpenDelete(true)}
-                  >
-                    <span class="iconify lucide--trash-2"></span>
-                  </button>
-                </Tooltip>
-                <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
-                  <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
-                    <h2 class="mb-2 font-semibold">Delete this record?</h2>
-                    <div class="flex justify-end gap-2">
-                      <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
-                      <Button
-                        onClick={deleteRecord}
-                        class="dark:shadow-dark-700 rounded-lg bg-red-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-red-400 active:bg-red-400"
-                      >
-                        Delete
-                      </Button>
+    <>
+      <Title>
+        {params.collection}/{params.rkey} - PDSls
+      </Title>
+      <Show when={record()} keyed>
+        <div class="flex w-full flex-col items-center">
+          <div class="mb-3 flex w-full justify-between px-2 text-sm sm:text-base">
+            <div class="flex items-center gap-4">
+              <RecordTab tab="record" label="Record" />
+              <RecordTab tab="schema" label="Schema" />
+              <RecordTab tab="backlinks" label="Backlinks" />
+              <RecordTab tab="info" label="Info" error />
+            </div>
+            <div class="flex gap-0.5">
+              <Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}>
+                <Show when={hasUserScope("update")}>
+                  <RecordEditor create={false} record={record()?.value} refetch={refetch} />
+                </Show>
+                <Show when={hasUserScope("delete")}>
+                  <Tooltip text="Delete">
+                    <button
+                      class="flex items-center rounded-sm p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+                      onclick={() => setOpenDelete(true)}
+                    >
+                      <span class="iconify lucide--trash-2"></span>
+                    </button>
+                  </Tooltip>
+                  <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
+                    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+                      <h2 class="mb-2 font-semibold">Delete this record?</h2>
+                      <div class="flex justify-end gap-2">
+                        <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
+                        <Button
+                          onClick={deleteRecord}
+                          class="dark:shadow-dark-700 rounded-lg bg-red-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-red-400 active:bg-red-400"
+                        >
+                          Delete
+                        </Button>
+                      </div>
                     </div>
-                  </div>
-                </Modal>
+                  </Modal>
+                </Show>
               </Show>
-            </Show>
-            <MenuProvider>
-              <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
-                <CopyMenu
-                  content={JSON.stringify(record()?.value, null, 2)}
-                  label="Copy record"
-                  icon="lucide--copy"
-                />
-                <CopyMenu
-                  content={`at://${params.repo}/${params.collection}/${params.rkey}`}
-                  label="Copy AT URI"
-                  icon="lucide--copy"
-                />
-                <Show when={record()?.cid}>
-                  {(cid) => <CopyMenu content={cid()} label="Copy CID" icon="lucide--copy" />}
-                </Show>
-                <MenuSeparator />
-                <Show when={externalLink()}>
-                  {(externalLink) => (
-                    <NavMenu
-                      href={externalLink()?.link}
-                      icon={`${externalLink().icon ?? "lucide--app-window"}`}
-                      label={`Open on ${externalLink().label}`}
-                      newTab
-                    />
-                  )}
-                </Show>
-                <NavMenu
-                  href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}
-                  icon="lucide--external-link"
-                  label="Record on PDS"
-                  newTab
-                />
-              </DropdownMenu>
-            </MenuProvider>
-          </div>
-        </div>
-        <Show when={!location.hash || location.hash === "#record"}>
-          <div class="w-max max-w-screen min-w-full px-4 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:px-2 sm:text-sm md:max-w-3xl">
-            <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />
+              <MenuProvider>
+                <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
+                  <CopyMenu
+                    content={JSON.stringify(record()?.value, null, 2)}
+                    label="Copy record"
+                    icon="lucide--copy"
+                  />
+                  <CopyMenu
+                    content={`at://${params.repo}/${params.collection}/${params.rkey}`}
+                    label="Copy AT URI"
+                    icon="lucide--copy"
+                  />
+                  <Show when={record()?.cid}>
+                    {(cid) => <CopyMenu content={cid()} label="Copy CID" icon="lucide--copy" />}
+                  </Show>
+                  <MenuSeparator />
+                  <Show when={externalLink()}>
+                    {(externalLink) => (
+                      <NavMenu
+                        href={externalLink()?.link}
+                        icon={`${externalLink().icon ?? "lucide--app-window"}`}
+                        label={`Open on ${externalLink().label}`}
+                        newTab
+                      />
+                    )}
+                  </Show>
+                  <NavMenu
+                    href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}
+                    icon="lucide--external-link"
+                    label="Record on PDS"
+                    newTab
+                  />
+                </DropdownMenu>
+              </MenuProvider>
+            </div>
           </div>
-        </Show>
-        <Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}>
-          <Show when={lexiconNotFound() === true}>
-            <span class="w-full px-2 text-sm">Lexicon schema could not be resolved.</span>
+          <Show when={!location.hash || location.hash === "#record"}>
+            <div class="w-max max-w-screen min-w-full px-4 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:px-2 sm:text-sm md:max-w-3xl">
+              <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />
+            </div>
           </Show>
-          <Show when={lexiconNotFound() === undefined}>
-            <span class="w-full px-2 text-sm">Resolving lexicon schema...</span>
+          <Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}>
+            <Show when={lexiconNotFound() === true}>
+              <span class="w-full px-2 text-sm">Lexicon schema could not be resolved.</span>
+            </Show>
+            <Show when={lexiconNotFound() === undefined}>
+              <span class="w-full px-2 text-sm">Resolving lexicon schema...</span>
+            </Show>
+            <Show when={schema() || params.collection === "com.atproto.lexicon.schema"}>
+              <ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
+                <LexiconSchemaView schema={schema()?.rawSchema ?? (record()?.value as any)} />
+              </ErrorBoundary>
+            </Show>
           </Show>
-          <Show when={schema() || params.collection === "com.atproto.lexicon.schema"}>
-            <ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
-              <LexiconSchemaView schema={schema()?.rawSchema ?? (record()?.value as any)} />
+          <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 animate-spin self-center text-xl" />
+                }
+              >
+                <div class="w-full px-2">
+                  <Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} />
+                </div>
+              </Suspense>
             </ErrorBoundary>
           </Show>
-        </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 animate-spin self-center text-xl" />
-              }
-            >
-              <div class="w-full px-2">
-                <Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} />
-              </div>
-            </Suspense>
-          </ErrorBoundary>
-        </Show>
-        <Show when={location.hash === "#info"}>
-          <div class="flex w-full flex-col gap-2 px-2 text-sm">
-            <div>
-              <p class="font-semibold">AT URI</p>
-              <div class="truncate text-xs">{record()?.uri}</div>
-            </div>
-            <Show when={record()?.cid}>
+          <Show when={location.hash === "#info"}>
+            <div class="flex w-full flex-col gap-2 px-2 text-sm">
               <div>
-                <p class="font-semibold">CID</p>
-                <div class="truncate text-left text-xs" dir="rtl">
-                  {record()?.cid}
-                </div>
+                <p class="font-semibold">AT URI</p>
+                <div class="truncate text-xs">{record()?.uri}</div>
               </div>
-            </Show>
-            <div>
-              <div class="flex items-center gap-1">
-                <p class="font-semibold">Record verification</p>
-                <span
-                  classList={{
-                    "iconify lucide--check text-green-500 dark:text-green-400":
-                      validRecord() === true,
-                    "iconify lucide--x text-red-500 dark:text-red-400": validRecord() === false,
-                    "iconify lucide--loader-circle animate-spin": validRecord() === undefined,
-                  }}
-                ></span>
-              </div>
-              <Show when={validRecord() === false}>
-                <div class="text-xs wrap-break-word">{verifyError()}</div>
+              <Show when={record()?.cid}>
+                <div>
+                  <p class="font-semibold">CID</p>
+                  <div class="truncate text-left text-xs" dir="rtl">
+                    {record()?.cid}
+                  </div>
+                </div>
               </Show>
-            </div>
-            <div>
-              <div class="flex items-center gap-1">
-                <p class="font-semibold">Schema validation</p>
-                <span
-                  classList={{
-                    "iconify lucide--check text-green-500 dark:text-green-400":
-                      validSchema() === true,
-                    "iconify lucide--x text-red-500 dark:text-red-400": validSchema() === false,
-                    "iconify lucide--loader-circle animate-spin":
-                      validSchema() === undefined && remoteValidation(),
-                  }}
-                ></span>
+              <div>
+                <div class="flex items-center gap-1">
+                  <p class="font-semibold">Record verification</p>
+                  <span
+                    classList={{
+                      "iconify lucide--check text-green-500 dark:text-green-400":
+                        validRecord() === true,
+                      "iconify lucide--x text-red-500 dark:text-red-400": validRecord() === false,
+                      "iconify lucide--loader-circle animate-spin": validRecord() === undefined,
+                    }}
+                  ></span>
+                </div>
+                <Show when={validRecord() === false}>
+                  <div class="text-xs wrap-break-word">{verifyError()}</div>
+                </Show>
               </div>
-              <Show when={validSchema() === false}>
-                <div class="text-xs wrap-break-word">{validationError()}</div>
-              </Show>
-              <Show
-                when={
-                  !remoteValidation() &&
-                  validSchema() === undefined &&
-                  params.collection &&
-                  !(params.collection in lexicons)
-                }
-              >
-                <Button onClick={() => validateRemoteSchema(record()!.value)}>
-                  Validate via resolution
-                </Button>
-              </Show>
-            </div>
-            <Show when={lexiconUri()}>
               <div>
-                <p class="font-semibold">Lexicon schema</p>
-                <div class="truncate text-xs">
-                  <A
-                    href={`/${lexiconUri()}`}
-                    class="text-blue-400 hover:underline active:underline"
-                  >
-                    {lexiconUri()}
-                  </A>
+                <div class="flex items-center gap-1">
+                  <p class="font-semibold">Schema validation</p>
+                  <span
+                    classList={{
+                      "iconify lucide--check text-green-500 dark:text-green-400":
+                        validSchema() === true,
+                      "iconify lucide--x text-red-500 dark:text-red-400": validSchema() === false,
+                      "iconify lucide--loader-circle animate-spin":
+                        validSchema() === undefined && remoteValidation(),
+                    }}
+                  ></span>
                 </div>
+                <Show when={validSchema() === false}>
+                  <div class="text-xs wrap-break-word">{validationError()}</div>
+                </Show>
+                <Show
+                  when={
+                    !remoteValidation() &&
+                    validSchema() === undefined &&
+                    params.collection &&
+                    !(params.collection in lexicons)
+                  }
+                >
+                  <Button onClick={() => validateRemoteSchema(record()!.value)}>
+                    Validate via resolution
+                  </Button>
+                </Show>
               </div>
-            </Show>
-          </div>
-        </Show>
-      </div>
-    </Show>
+              <Show when={lexiconUri()}>
+                <div>
+                  <p class="font-semibold">Lexicon schema</p>
+                  <div class="truncate text-xs">
+                    <A
+                      href={`/${lexiconUri()}`}
+                      class="text-blue-400 hover:underline active:underline"
+                    >
+                      {lexiconUri()}
+                    </A>
+                  </div>
+                </div>
+              </Show>
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </>
   );
 };

src/views/repo.tsx

···
 import { Client, simpleFetchHandler } from "@atcute/client";
 import { DidDocument } from "@atcute/identity";
 import { ActorIdentifier, Did, Handle, Nsid } from "@atcute/lexicons";
+import { Title } from "@solidjs/meta";
 import { A, useLocation, useNavigate, useParams } from "@solidjs/router";
 import {
   createEffect,
···
     setDownloading(false);
   };
 
+  const getTitle = () => {
+    const doc = didDoc();
+    const handle = doc?.alsoKnownAs
+      ?.find((alias) => alias.startsWith("at://"))
+      ?.replace("at://", "");
+    return `${handle || params.repo} - 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 text-red-500 dark:text-red-400">
-                <span class="iconify lucide--alert-triangle"></span>
-                <span>{error()}</span>
-              </div>
-            </Show>
-            <MenuProvider>
-              <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
-                <Show
-                  when={!error() && (!location.hash || location.hash.startsWith("#collections"))}
-                >
-                  <ActionMenu
-                    label="Filter collections"
-                    icon="lucide--filter"
-                    onClick={() => setShowFilter(!showFilter())}
-                  />
-                </Show>
-                <CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" />
-                <NavMenu
-                  href={`/jetstream?dids=${params.repo}`}
-                  label="Jetstream"
-                  icon="lucide--radio-tower"
-                />
-                <Show when={params.repo && params.repo in labelerCache}>
+    <>
+      <Title>{getTitle()}</Title>
+      <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 text-red-500 dark:text-red-400">
+                  <span class="iconify lucide--alert-triangle"></span>
+                  <span>{error()}</span>
+                </div>
+              </Show>
+              <MenuProvider>
+                <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
+                  <Show
+                    when={!error() && (!location.hash || location.hash.startsWith("#collections"))}
+                  >
+                    <ActionMenu
+                      label="Filter collections"
+                      icon="lucide--filter"
+                      onClick={() => setShowFilter(!showFilter())}
+                    />
+                  </Show>
+                  <CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" />
                   <NavMenu
-                    href={`/labels?did=${params.repo}&uriPatterns=*`}
-                    label="Labels"
-                    icon="lucide--tag"
+                    href={`/jetstream?dids=${params.repo}`}
+                    label="Jetstream"
+                    icon="lucide--radio-tower"
                   />
-                </Show>
-                <Show when={error()?.length === 0 || error() === undefined}>
-                  <ActionMenu
-                    label="Export repo"
-                    icon={downloading() ? "lucide--loader-circle animate-spin" : "lucide--download"}
-                    onClick={() => downloadRepo()}
-                  />
-                </Show>
-                <MenuSeparator />
-                <NavMenu
-                  href={
-                    did.startsWith("did:plc") ?
-                      `${localStorage.plcDirectory ?? "https://plc.directory"}/${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")}>
+                  <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="Export repo"
+                      icon={
+                        downloading() ? "lucide--loader-circle animate-spin" : "lucide--download"
+                      }
+                      onClick={() => downloadRepo()}
+                    />
+                  </Show>
+                  <MenuSeparator />
                   <NavMenu
-                    href={`${localStorage.plcDirectory ?? "https://plc.directory"}/${did}/log/audit`}
+                    href={
+                      did.startsWith("did:plc") ?
+                        `${localStorage.plcDirectory ?? "https://plc.directory"}/${did}`
+                      : `https://${did.split("did:web:")[1]}/.well-known/did.json`
+                    }
                     newTab
-                    label="Audit log"
+                    label="DID document"
                     icon="lucide--external-link"
                   />
-                </Show>
-              </DropdownMenu>
-            </MenuProvider>
+                  <Show when={did.startsWith("did:plc")}>
+                    <NavMenu
+                      href={`${localStorage.plcDirectory ?? "https://plc.directory"}/${did}/log/audit`}
+                      newTab
+                      label="Audit log"
+                      icon="lucide--external-link"
+                    />
+                  </Show>
+                </DropdownMenu>
+              </MenuProvider>
+            </div>
           </div>
-        </div>
-        <div class="flex w-full flex-col gap-1 px-2">
-          <Show when={location.hash === "#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" />
-                }
+          <div class="flex w-full flex-col gap-1 px-2">
+            <Show when={location.hash === "#logs"}>
+              <ErrorBoundary
+                fallback={(err) => <div class="wrap-break-word">Error: {err.message}</div>}
               >
-                <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" />
-                }
+                <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>}
               >
-                <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" />
-                }
+                <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>}
               >
-                <BlobView pds={pds!} repo={did} />
-              </Suspense>
-            </ErrorBoundary>
-          </Show>
-          <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
-            <Show when={showFilter()}>
-              <TextInput
-                name="filter"
-                placeholder="Filter collections"
-                onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
-                class="grow"
-                ref={(node) => {
-                  onMount(() => node.focus());
-                }}
-              />
+                <Suspense
+                  fallback={
+                    <div class="iconify lucide--loader-circle mt-2 animate-spin self-center text-xl" />
+                  }
+                >
+                  <BlobView pds={pds!} repo={did} />
+                </Suspense>
+              </ErrorBoundary>
             </Show>
-            <div class="flex flex-col text-sm wrap-anywhere" classList={{ "-mt-1": !showFilter() }}>
-              <Show
-                when={Object.keys(nsids() ?? {}).length != 0}
-                fallback={<span class="mt-3 text-center text-base">No collections found.</span>}
+            <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
+              <Show when={showFilter()}>
+                <TextInput
+                  name="filter"
+                  placeholder="Filter collections"
+                  onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
+                  class="grow"
+                  ref={(node) => {
+                    onMount(() => node.focus());
+                  }}
+                />
+              </Show>
+              <div
+                class="flex flex-col text-sm wrap-anywhere"
+                classList={{ "-mt-1": !showFilter() }}
               >
-                <For
-                  each={Object.keys(nsids() ?? {}).filter((authority) =>
-                    filter() ?
-                      authority.includes(filter()!) ||
-                      nsids()?.[authority].nsids.some((nsid) =>
-                        `${authority}.${nsid}`.includes(filter()!),
-                      )
-                    : true,
-                  )}
+                <Show
+                  when={Object.keys(nsids() ?? {}).length != 0}
+                  fallback={<span class="mt-3 text-center text-base">No collections found.</span>}
                 >
-                  {(authority) => {
-                    const reversedDomain = authority.split(".").reverse().join(".");
-                    const [faviconLoaded, setFaviconLoaded] = createSignal(false);
+                  <For
+                    each={Object.keys(nsids() ?? {}).filter((authority) =>
+                      filter() ?
+                        authority.includes(filter()!) ||
+                        nsids()?.[authority].nsids.some((nsid) =>
+                          `${authority}.${nsid}`.includes(filter()!),
+                        )
+                      : true,
+                    )}
+                  >
+                    {(authority) => {
+                      const reversedDomain = authority.split(".").reverse().join(".");
+                      const [faviconLoaded, setFaviconLoaded] = createSignal(false);
 
-                    const isHighlighted = () => location.hash === `#collections:${authority}`;
+                      const isHighlighted = () => location.hash === `#collections:${authority}`;
 
-                    return (
-                      <div
-                        id={`collection-${authority}`}
-                        class="group flex items-start gap-2 rounded-lg p-1 transition-colors"
-                        classList={{
-                          "dark:hover:bg-dark-200 hover:bg-neutral-200": !isHighlighted(),
-                          "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),
-                        }}
-                      >
-                        <a
-                          href={`#collections:${authority}`}
-                          class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
+                      return (
+                        <div
+                          id={`collection-${authority}`}
+                          class="group flex items-start gap-2 rounded-lg p-1 transition-colors"
+                          classList={{
+                            "dark:hover:bg-dark-200 hover:bg-neutral-200": !isHighlighted(),
+                            "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),
+                          }}
                         >
-                          <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>
-                          <Show when={!faviconLoaded()}>
-                            <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
-                          </Show>
-                          <img
-                            src={
-                              ["bsky.app", "bsky.chat"].includes(reversedDomain) ?
-                                "https://web-cdn.bsky.app/static/apple-touch-icon.png"
-                              : `https://${reversedDomain}/favicon.ico`
-                            }
-                            alt={`${reversedDomain} favicon`}
-                            class="h-4 w-4"
-                            classList={{ hidden: !faviconLoaded() }}
-                            onLoad={() => setFaviconLoaded(true)}
-                            onError={() => setFaviconLoaded(false)}
-                          />
-                        </a>
-                        <div class="flex flex-1 flex-col">
-                          <For
-                            each={nsids()?.[authority].nsids.filter((nsid) =>
-                              filter() ? `${authority}.${nsid}`.includes(filter()!) : true,
-                            )}
+                          <a
+                            href={`#collections:${authority}`}
+                            class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
                           >
-                            {(nsid) => (
-                              <A
-                                href={`/at://${did}/${authority}.${nsid}`}
-                                class="hover:underline active:underline"
-                              >
-                                <span>{authority}</span>
-                                <span class="text-neutral-500 dark:text-neutral-400">.{nsid}</span>
-                              </A>
-                            )}
-                          </For>
+                            <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>
+                            <Show when={!faviconLoaded()}>
+                              <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
+                            </Show>
+                            <img
+                              src={
+                                ["bsky.app", "bsky.chat"].includes(reversedDomain) ?
+                                  "https://web-cdn.bsky.app/static/apple-touch-icon.png"
+                                : `https://${reversedDomain}/favicon.ico`
+                              }
+                              alt={`${reversedDomain} favicon`}
+                              class="h-4 w-4"
+                              classList={{ hidden: !faviconLoaded() }}
+                              onLoad={() => setFaviconLoaded(true)}
+                              onError={() => setFaviconLoaded(false)}
+                            />
+                          </a>
+                          <div class="flex flex-1 flex-col">
+                            <For
+                              each={nsids()?.[authority].nsids.filter((nsid) =>
+                                filter() ? `${authority}.${nsid}`.includes(filter()!) : true,
+                              )}
+                            >
+                              {(nsid) => (
+                                <A
+                                  href={`/at://${did}/${authority}.${nsid}`}
+                                  class="hover:underline active:underline"
+                                >
+                                  <span>{authority}</span>
+                                  <span class="text-neutral-500 dark:text-neutral-400">
+                                    .{nsid}
+                                  </span>
+                                </A>
+                              )}
+                            </For>
+                          </div>
                         </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>
+                      <div class="text-sm text-neutral-700 dark:text-neutral-300">
+                        {didDocument().id}
                       </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>
-                    <div class="text-sm text-neutral-700 dark:text-neutral-300">
-                      {didDocument().id}
                     </div>
-                  </div>
 
-                  {/* Aliases Section */}
-                  <div>
-                    <p class="font-semibold">Aliases</p>
-                    <For each={didDocument().alsoKnownAs}>
-                      {(alias) => (
-                        <div class="flex items-center gap-1 text-sm text-neutral-700 dark:text-neutral-300">
-                          <span>{alias}</span>
-                          <Show when={alias.startsWith("at://")}>
-                            <Tooltip
-                              text={
-                                validHandles[alias] === true ? "Valid handle"
-                                : validHandles[alias] === undefined ?
-                                  "Validating"
-                                : "Invalid handle"
-                              }
-                            >
-                              <span
-                                classList={{
-                                  "iconify 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>
-                            </Tooltip>
-                          </Show>
-                        </div>
-                      )}
-                    </For>
-                  </div>
-
-                  {/* Services Section */}
-                  <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>
-                            <span>{service.id.split("#")[1]}</span>
-                            <span></span>
-                            <a
-                              class="w-fit underline hover:text-blue-400"
-                              href={service.serviceEndpoint.toString()}
-                              target="_blank"
-                              rel="noopener"
-                            >
-                              {service.serviceEndpoint.toString()}
-                            </a>
+                    {/* Aliases Section */}
+                    <div>
+                      <p class="font-semibold">Aliases</p>
+                      <For each={didDocument().alsoKnownAs}>
+                        {(alias) => (
+                          <div class="flex items-center gap-1 text-sm text-neutral-700 dark:text-neutral-300">
+                            <span>{alias}</span>
+                            <Show when={alias.startsWith("at://")}>
+                              <Tooltip
+                                text={
+                                  validHandles[alias] === true ? "Valid handle"
+                                  : validHandles[alias] === undefined ?
+                                    "Validating"
+                                  : "Invalid handle"
+                                }
+                              >
+                                <span
+                                  classList={{
+                                    "iconify 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>
+                              </Tooltip>
+                            </Show>
                           </div>
                         )}
                       </For>
                     </div>
-                  </div>
 
-                  {/* Verification Methods Section */}
-                  <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"></span>
-                                    <span>{detectKeyType(key())}</span>
-                                  </div>
-                                </div>
-                                <span></span>
-                                <div class="font-mono break-all">{key()}</div>
-                              </div>
-                            )}
-                          </Show>
-                        )}
-                      </For>
-                    </div>
-                  </div>
-
-                  {/* Rotation Keys Section */}
-                  <Show when={rotationKeys().length > 0}>
+                    {/* Services Section */}
                     <div>
-                      <p class="font-semibold">Rotation Keys</p>
+                      <p class="font-semibold">Services</p>
                       <div class="flex flex-col gap-1">
-                        <For each={rotationKeys()}>
-                          {(key) => (
+                        <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--key-round text-neutral-500 dark:text-neutral-400"></span>
-                              <span class="text-neutral-500 dark:text-neutral-400">
-                                {detectDidKeyType(key)}
-                              </span>
+                              <span class="iconify lucide--hash"></span>
+                              <span>{service.id.split("#")[1]}</span>
                               <span></span>
-                              <div class="font-mono break-all">{key.replace("did:key:", "")}</div>
+                              <a
+                                class="w-fit underline hover:text-blue-400"
+                                href={service.serviceEndpoint.toString()}
+                                target="_blank"
+                                rel="noopener"
+                              >
+                                {service.serviceEndpoint.toString()}
+                              </a>
                             </div>
                           )}
                         </For>
                       </div>
                     </div>
-                  </Show>
-                </div>
-              )}
+
+                    {/* Verification Methods Section */}
+                    <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"></span>
+                                      <span>{detectKeyType(key())}</span>
+                                    </div>
+                                  </div>
+                                  <span></span>
+                                  <div class="font-mono break-all">{key()}</div>
+                                </div>
+                              )}
+                            </Show>
+                          )}
+                        </For>
+                      </div>
+                    </div>
+
+                    {/* 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 text-neutral-500 dark:text-neutral-400"></span>
+                                <span class="text-neutral-500 dark:text-neutral-400">
+                                  {detectDidKeyType(key)}
+                                </span>
+                                <span></span>
+                                <div class="font-mono break-all">{key.replace("did:key:", "")}</div>
+                              </div>
+                            )}
+                          </For>
+                        </div>
+                      </div>
+                    </Show>
+                  </div>
+                )}
+              </Show>
             </Show>
-          </Show>
+          </div>
         </div>
-      </div>
-    </Show>
+      </Show>
+    </>
   );
 };

src/views/settings.tsx

···
+import { Title } from "@solidjs/meta";
 import { createSignal } from "solid-js";
 import { TextInput } from "../components/text-input.jsx";
 import { ThemeSelection } from "../components/theme.jsx";
···
 const Settings = () => {
   return (
     <div class="flex w-full flex-col gap-2 px-2">
+      <Title>Settings - PDSls</Title>
       <div class="text-lg font-semibold">Settings</div>
       <div class="flex flex-col gap-3">
         <div class="flex flex-col gap-1">

src/views/stream.tsx

···
 import { Firehose } from "@skyware/firehose";
+import { Title } from "@solidjs/meta";
 import { A, useLocation, useSearchParams } from "@solidjs/router";
 import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { Button } from "../components/button";
···
   });
 
   return (
-    <div class="flex w-full flex-col items-center">
-      <div class="mb-1 flex gap-4 font-medium">
-        <A
-          class="flex items-center gap-1 border-b-2"
-          inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600"
-          href="/jetstream"
-        >
-          Jetstream
-        </A>
-        <A
-          class="flex items-center gap-1 border-b-2"
-          inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600"
-          href="/firehose"
-        >
-          Firehose
-        </A>
-      </div>
-      <StickyOverlay>
-        <form ref={formRef} class="flex w-full flex-col gap-1.5 text-sm">
-          <Show when={!connected()}>
-            <label class="flex items-center justify-end gap-x-1">
-              <span class="min-w-20">Instance</span>
-              <TextInput
-                name="instance"
-                value={
-                  searchParams.instance ??
-                  (streamType === "jetstream" ?
-                    "wss://jetstream1.us-east.bsky.network/subscribe"
-                  : "wss://bsky.network")
-                }
-                class="grow"
-              />
-            </label>
-            <Show when={streamType === "jetstream"}>
+    <>
+      <Title>{streamType === "firehose" ? "Firehose" : "Jetstream"} - PDSls</Title>
+      <div class="flex w-full flex-col items-center">
+        <div class="mb-1 flex gap-4 font-medium">
+          <A
+            class="flex items-center gap-1 border-b-2"
+            inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600"
+            href="/jetstream"
+          >
+            Jetstream
+          </A>
+          <A
+            class="flex items-center gap-1 border-b-2"
+            inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600"
+            href="/firehose"
+          >
+            Firehose
+          </A>
+        </div>
+        <StickyOverlay>
+          <form ref={formRef} class="flex w-full flex-col gap-1.5 text-sm">
+            <Show when={!connected()}>
               <label class="flex items-center justify-end gap-x-1">
-                <span class="min-w-20">Collections</span>
-                <textarea
-                  name="collections"
-                  spellcheck={false}
-                  placeholder="Comma-separated list of collections"
-                  value={searchParams.collections ?? ""}
-                  class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
+                <span class="min-w-20">Instance</span>
+                <TextInput
+                  name="instance"
+                  value={
+                    searchParams.instance ??
+                    (streamType === "jetstream" ?
+                      "wss://jetstream1.us-east.bsky.network/subscribe"
+                    : "wss://bsky.network")
+                  }
+                  class="grow"
                 />
               </label>
-            </Show>
-            <Show when={streamType === "jetstream"}>
+              <Show when={streamType === "jetstream"}>
+                <label class="flex items-center justify-end gap-x-1">
+                  <span class="min-w-20">Collections</span>
+                  <textarea
+                    name="collections"
+                    spellcheck={false}
+                    placeholder="Comma-separated list of collections"
+                    value={searchParams.collections ?? ""}
+                    class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
+                  />
+                </label>
+              </Show>
+              <Show when={streamType === "jetstream"}>
+                <label class="flex items-center justify-end gap-x-1">
+                  <span class="min-w-20">DIDs</span>
+                  <textarea
+                    name="dids"
+                    spellcheck={false}
+                    placeholder="Comma-separated list of DIDs"
+                    value={searchParams.dids ?? ""}
+                    class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
+                  />
+                </label>
+              </Show>
               <label class="flex items-center justify-end gap-x-1">
-                <span class="min-w-20">DIDs</span>
-                <textarea
-                  name="dids"
-                  spellcheck={false}
-                  placeholder="Comma-separated list of DIDs"
-                  value={searchParams.dids ?? ""}
-                  class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
+                <span class="min-w-20">Cursor</span>
+                <TextInput
+                  name="cursor"
+                  placeholder="Leave empty for live-tail"
+                  value={searchParams.cursor ?? ""}
+                  class="grow"
                 />
               </label>
-            </Show>
-            <label class="flex items-center justify-end gap-x-1">
-              <span class="min-w-20">Cursor</span>
-              <TextInput
-                name="cursor"
-                placeholder="Leave empty for live-tail"
-                value={searchParams.cursor ?? ""}
-                class="grow"
-              />
-            </label>
-            <Show when={streamType === "jetstream"}>
-              <div class="flex items-center justify-end gap-x-1">
-                <input
-                  type="checkbox"
-                  name="allEvents"
-                  id="allEvents"
-                  checked={searchParams.allEvents === "on" ? true : false}
-                />
-                <label for="allEvents" class="select-none">
-                  Show account and identity events
-                </label>
-              </div>
+              <Show when={streamType === "jetstream"}>
+                <div class="flex items-center justify-end gap-x-1">
+                  <input
+                    type="checkbox"
+                    name="allEvents"
+                    id="allEvents"
+                    checked={searchParams.allEvents === "on" ? true : false}
+                  />
+                  <label for="allEvents" class="select-none">
+                    Show account and identity events
+                  </label>
+                </div>
+              </Show>
             </Show>
-          </Show>
-          <Show when={connected()}>
-            <div class="flex flex-col gap-1 wrap-anywhere">
-              <For each={parameters()}>
-                {(param) => (
-                  <Show when={param.param}>
-                    <div class="flex">
-                      <div class="min-w-24 font-semibold">{param.name}</div>
-                      {param.param}
-                    </div>
-                  </Show>
-                )}
-              </For>
-            </div>
-          </Show>
-          <div class="flex justify-end">
             <Show when={connected()}>
-              <button
-                type="button"
-                onmousedown={(e) => {
-                  e.preventDefault();
-                  disconnect();
-                }}
-                ontouchstart={(e) => {
-                  e.preventDefault();
-                  disconnect();
-                }}
-                class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
-              >
-                Disconnect
-              </button>
-            </Show>
-            <Show when={!connected()}>
-              <Button onClick={() => connectSocket(new FormData(formRef))}>Connect</Button>
+              <div class="flex flex-col gap-1 wrap-anywhere">
+                <For each={parameters()}>
+                  {(param) => (
+                    <Show when={param.param}>
+                      <div class="flex">
+                        <div class="min-w-24 font-semibold">{param.name}</div>
+                        {param.param}
+                      </div>
+                    </Show>
+                  )}
+                </For>
+              </div>
             </Show>
-          </div>
-        </form>
-      </StickyOverlay>
-      <Show when={notice().length}>
-        <div class="text-red-500 dark:text-red-400">{notice()}</div>
-      </Show>
-      <div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 font-mono text-sm wrap-anywhere whitespace-pre-wrap md:w-3xl">
-        <For each={records().toReversed()}>
-          {(rec) => (
-            <div class="pb-2">
-              <JSONValue data={rec} repo={rec.did ?? rec.repo} />
+            <div class="flex justify-end">
+              <Show when={connected()}>
+                <button
+                  type="button"
+                  onmousedown={(e) => {
+                    e.preventDefault();
+                    disconnect();
+                  }}
+                  ontouchstart={(e) => {
+                    e.preventDefault();
+                    disconnect();
+                  }}
+                  class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
+                >
+                  Disconnect
+                </button>
+              </Show>
+              <Show when={!connected()}>
+                <Button onClick={() => connectSocket(new FormData(formRef))}>Connect</Button>
+              </Show>
             </div>
-          )}
-        </For>
+          </form>
+        </StickyOverlay>
+        <Show when={notice().length}>
+          <div class="text-red-500 dark:text-red-400">{notice()}</div>
+        </Show>
+        <div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 font-mono text-sm wrap-anywhere whitespace-pre-wrap md:w-3xl">
+          <For each={records().toReversed()}>
+            {(rec) => (
+              <div class="pb-2">
+                <JSONValue data={rec} repo={rec.did ?? rec.repo} />
+              </div>
+            )}
+          </For>
+        </div>
       </div>
-    </div>
+    </>
   );
 };