increase printWidth to 100

.prettierrc

···
 {
+  "printWidth": 100,
   "experimentalTernaries": true,
   "plugins": ["prettier-plugin-tailwindcss"]
 }

index.html

···
     <meta property="og:title" content="PDSls" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://pdsls.dev" />
-    <meta
-      property="og:description"
-      content="Browse and manage atproto repositories"
-    />
+    <meta property="og:description" content="Browse and manage atproto repositories" />
     <title>PDSls</title>
     <script>
       if (
         localStorage.theme === "dark" ||
-        (!("theme" in localStorage) &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches)
+        (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
       )
         document.documentElement.classList.add("dark");
       else document.documentElement.classList.remove("dark");

src/components/account.tsx

···
-import {
-  createSignal,
-  onMount,
-  Show,
-  onCleanup,
-  createEffect,
-  For,
-} from "solid-js";
+import { createSignal, onMount, Show, onCleanup, createEffect, For } from "solid-js";
 import Tooltip from "./tooltip.jsx";
-import {
-  deleteStoredSession,
-  getSession,
-  OAuthUserAgent,
-} from "@atcute/oauth-browser-client";
+import { deleteStoredSession, getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";
 import { agent, Login, setLoginState } from "./login.jsx";
 import { At } from "@atcute/client/lexicons";
 
···
                       classList={{
                         "basis-full text-left font-mono max-w-[32ch] text-sm truncate group-hover/select:bg-slate-300 dark:group-hover/select:bg-neutral-700":
                           true,
-                        "text-green-500 dark:text-green-400":
-                          session === agent?.sub,
+                        "text-green-500 dark:text-green-400": session === agent?.sub,
                       }}
                       onclick={() => resumeSession(session)}
                     >

src/components/backlinks.tsx

···
         {({ collection, path, matchesFilter, counts }) => (
           <div class="mt-2 font-mono text-sm sm:text-base">
             <p classList={{ "text-stone-400": matchesFilter }}>
-              <span title="Collection containing linking records">
-                {collection}
-              </span>
+              <span title="Collection containing linking records">{collection}</span>
               <span class="text-cyan-500">@</span>
-              <span title="Record path where the link is found">
-                {path.slice(1)}
-              </span>
-              :
+              <span title="Record path where the link is found">{path.slice(1)}</span>:
             </p>
             <div class="pl-2.5 font-sans">
               <p>
···
                   href="#"
                   title="Show linking DIDs"
                   onclick={() =>
-                    (
-                      show()?.collection === collection &&
-                      show()?.path === path &&
-                      show()?.showDids
-                    ) ?
+                    show()?.collection === collection && show()?.path === path && show()?.showDids ?
                       setShow(null)
                     : setShow({ collection, path, showDids: true })
                   }
···
                   {counts.distinct_dids < 2 ? "" : "s"}
                 </a>
               </p>
-              <Show
-                when={
-                  show()?.collection === collection && show()?.path === path
-                }
-              >
+              <Show when={show()?.collection === collection && show()?.path === path}>
                 <Show when={show()?.showDids}>
                   {/* putting this in the `dids` prop directly failed to re-render. idk how to solidjs. */}
                   <p class="w-full font-semibold text-stone-600 dark:text-stone-400">
                     Distinct identities
                   </p>
-                  <BacklinkItems
-                    target={target}
-                    collection={collection}
-                    path={path}
-                    dids={true}
-                  />
+                  <BacklinkItems target={target} collection={collection} path={path} dids={true} />
                 </Show>
                 <Show when={!show()?.showDids}>
-                  <p class="w-full font-semibold text-stone-600 dark:text-stone-400">
-                    Records
-                  </p>
-                  <BacklinkItems
-                    target={target}
-                    collection={collection}
-                    path={path}
-                    dids={false}
-                  />
+                  <p class="w-full font-semibold text-stone-600 dark:text-stone-400">Records</p>
+                  <BacklinkItems target={target} collection={collection} path={path} dids={false} />
                 </Show>
               </Show>
             </div>

src/components/create.tsx

···
               </div>
               <Editor theme={theme().color} model={model!} />
               <div class="flex flex-col gap-x-2">
-                <div class="text-red-500 dark:text-red-400">
-                  {createNotice()}
-                </div>
+                <div class="text-red-500 dark:text-red-400">{createNotice()}</div>
                 <div class="flex items-center justify-end gap-2">
                   <button
                     onclick={() => setOpenCreate(false)}

src/components/json.tsx

···
 }
 
 export const syntaxHighlight = (json: string) => {
-  json = json
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;");
+  json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 
   return json.replace(
     /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
···
               ["http:", "https:", "web+at:"].includes(new URL(part).protocol) &&
               part.split("\n").length === 1
             ) ?
-              <a
-                class="underline"
-                href={part}
-                target="_blank"
-                rel="noopener noreferer"
-              >
+              <a class="underline" href={part} target="_blank" rel="noopener noreferer">
                 {part}
               </a>
             : part}
···
 };
 
 const JSONBoolean = ({ data }: { data: boolean }) => {
-  return (
-    <span class="text-[#f57d26] dark:text-orange-300">
-      {data ? "true" : "false"}
-    </span>
-  );
+  return <span class="text-[#f57d26] dark:text-orange-300">{data ? "true" : "false"}</span>;
 };
 
 const JSONNull = () => {
   return <span class="text-neutral-400 dark:text-neutral-500">null</span>;
 };
 
-const JSONObject = ({
-  data,
-  repo,
-}: {
-  data: { [x: string]: JSONType };
-  repo: string;
-}) => {
+const JSONObject = ({ data, repo }: { data: { [x: string]: JSONType }; repo: string }) => {
   const [clip, setClip] = createSignal(false);
   const rawObj = (
     <For each={Object.entries(data)}>
···
   return <JSONObject data={data} repo={repo} />;
 };
 
-export type JSONType =
-  | string
-  | number
-  | boolean
-  | null
-  | { [x: string]: JSONType }
-  | JSONType[];
+export type JSONType = string | number | boolean | null | { [x: string]: JSONType } | JSONType[];

src/components/navbar.tsx

···
 export const [pds, setPDS] = createSignal<string>();
 export const [cid, setCID] = createSignal<string>();
 export const [isLabeler, setIsLabeler] = createSignal(false);
-export const [validRecord, setValidRecord] = createSignal<boolean | undefined>(
-  undefined,
-);
+export const [validRecord, setValidRecord] = createSignal<boolean | undefined>(undefined);
 
 const NavBar = (props: { params: Params }) => {
   const [openMenu, setOpenMenu] = createSignal(false);
···
             <Tooltip text="PDS">
               <div class="i-tabler-server mr-1 shrink-0" />
             </Tooltip>
-            <A
-              end
-              href={pds()!}
-              inactiveClass="text-lightblue-500 w-full hover:underline"
-            >
+            <A end href={pds()!} inactiveClass="text-lightblue-500 w-full hover:underline">
               {pds()}
             </A>
           </Show>
···
               <Show when={props.params.repo}>
                 <button
                   class="p-0.75 flex items-center rounded hover:bg-neutral-200 dark:hover:bg-neutral-600"
-                  onclick={() =>
-                    navigator.clipboard.writeText(props.params.repo)
-                  }
+                  onclick={() => navigator.clipboard.writeText(props.params.repo)}
                 >
                   Copy DID
                 </button>
···
             </Show>
             <Show
               when={
-                props.params.repo in labelerCache &&
-                !props.params.collection &&
-                !props.params.rkey
+                props.params.repo in labelerCache && !props.params.collection && !props.params.rkey
               }
             >
               <div class="mt-1 flex items-center">

src/components/search.tsx

···
     !input.startsWith("https://main.bsky.dev/") &&
     (input.startsWith("https://") || input.startsWith("http://"))
   )
-    throw redirect(
-      `/${input.replace("https://", "").replace("http://", "").replace("/", "")}`,
-    );
+    throw redirect(`/${input.replace("https://", "").replace("http://", "").replace("/", "")}`);
 
   const uri = input
     .replace("at://", "")
···
   } catch {
     throw redirect(`/${actor}`);
   }
-  throw redirect(
-    `/at://${did}${uriParts.length > 1 ? `/${uriParts.slice(1).join("/")}` : ""}`,
-  );
+  throw redirect(`/at://${did}${uriParts.length > 1 ? `/${uriParts.slice(1).join("/")}` : ""}`);
 });
 
 const Search = () => {
···
           </Show>
         </div>
       </form>
-      <Show when={submission.error}>
-        {(err) => <div class="mt-3">{err().message}</div>}
-      </Show>
+      <Show when={submission.error}>{(err) => <div class="mt-3">{err().message}</div>}</Show>
     </>
   );
 };

src/components/settings.tsx

···
 const getInitialTheme = () => {
   const isDarkMode =
     localStorage.theme === "dark" ||
-    (!("theme" in localStorage) &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches);
+    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
   return {
     color: isDarkMode ? "dark" : "light",
     system: !("theme" in localStorage),
···
 };
 
 export const [theme, setTheme] = createSignal(getInitialTheme());
-const [backlinksEnabled, setBacklinksEnabled] = createSignal(
-  localStorage.backlinks === "true",
-);
+const [backlinksEnabled, setBacklinksEnabled] = createSignal(localStorage.backlinks === "true");
 
 const Settings = () => {
   const [modal, setModal] = createSignal<HTMLDialogElement>();
···
   onMount(() => {
     window.addEventListener("keydown", keyEvent);
     window.addEventListener("click", clickEvent);
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", themeEvent);
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeEvent);
   });
 
   onCleanup(() => {
     window.removeEventListener("keydown", keyEvent);
     window.removeEventListener("click", clickEvent);
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .removeEventListener("change", themeEvent);
+    window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeEvent);
   });
 
   createEffect(() => {
···
 
   const updateTheme = (newTheme: { color: string; system: boolean }) => {
     setTheme(newTheme);
-    document.documentElement.classList.toggle(
-      "dark",
-      newTheme.color === "dark",
-    );
+    document.documentElement.classList.toggle("dark", newTheme.color === "dark");
     if (newTheme.system) {
       localStorage.removeItem("theme");
     } else {
···
           class="backdrop-brightness-60 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent"
         >
           <div class="dark:bg-dark-400 top-10% absolute rounded-md border border-slate-900 bg-slate-100 p-4 text-slate-900 dark:border-slate-100 dark:text-slate-100">
-            <h3 class="mb-2 border-b border-neutral-500 pb-2 text-xl font-bold">
-              Settings
-            </h3>
+            <h3 class="mb-2 border-b border-neutral-500 pb-2 text-xl font-bold">Settings</h3>
             <h4 class="mb-1 font-semibold">Theme</h4>
             <div class="w-xs flex divide-x divide-neutral-500 overflow-hidden rounded-lg border border-neutral-500">
               <button
···
                 onclick={() =>
                   updateTheme({
                     color:
-                      (
-                        window.matchMedia("(prefers-color-scheme: dark)")
-                          .matches
-                      ) ?
-                        "dark"
-                      : "light",
+                      window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
                     system: true,
                   })
                 }
···
                   "basis-1/3 p-2": true,
                   "hover:bg-slate-200 dark:hover:bg-dark-200":
                     theme().color !== "light" || theme().system,
-                  "bg-neutral-500 text-slate-100":
-                    theme().color === "light" && !theme().system,
+                  "bg-neutral-500 text-slate-100": theme().color === "light" && !theme().system,
                 }}
                 onclick={() => updateTheme({ color: "light", system: false })}
               >
···
                   name="constellation"
                   type="text"
                   spellcheck={false}
-                  value={
-                    localStorage.constellationHost ||
-                    "https://constellation.microcosm.blue"
-                  }
+                  value={localStorage.constellationHost || "https://constellation.microcosm.blue"}
                   disabled={!backlinksEnabled()}
                   class="dark:bg-dark-100 rounded-lg border border-gray-400 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-gray-300 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
-                  onInput={(e) =>
-                    (localStorage.constellationHost = e.currentTarget.value)
-                  }
+                  onInput={(e) => (localStorage.constellationHost = e.currentTarget.value)}
                 />
               </div>
             </div>

src/layout.tsx

···
       window.location.href = location.pathname.replace(params.repo, did);
     }
     await retrieveSession();
-    if (loginState() && location.pathname === "/")
-      window.location.href = `/at://${agent.sub}`;
+    if (loginState() && location.pathname === "/") window.location.href = `/at://${agent.sub}`;
   });
 
   return (
-    <div
-      id="main"
-      class="m-5 flex flex-col items-center text-slate-900 dark:text-slate-100"
-    >
+    <div id="main" class="m-5 flex flex-col items-center text-slate-900 dark:text-slate-100">
       <Show when={location.pathname !== "/"}>
         <MetaProvider>
           <Meta name="robots" content="noindex, nofollow" />
···
         </div>
       </div>
       <div class="mb-5 flex max-w-full flex-col items-center text-pretty md:max-w-screen-md">
-        <Show
-          when={
-            location.pathname !== "/jetstream" &&
-            location.pathname !== "/firehose"
-          }
-        >
+        <Show when={location.pathname !== "/jetstream" && location.pathname !== "/firehose"}>
           <Search />
         </Show>
         <Show when={params.pds}>
···
         </Show>
         <Show keyed when={location.pathname}>
           <ErrorBoundary
-            fallback={(err) => (
-              <div class="mt-3 break-words">Error: {err.message}</div>
-            )}
+            fallback={(err) => <div class="mt-3 break-words">Error: {err.message}</div>}
           >
-            <Suspense
-              fallback={
-                <div class="i-line-md-loading-twotone-loop mt-3 text-xl" />
-              }
-            >
+            <Suspense fallback={<div class="i-line-md-loading-twotone-loop mt-3 text-xl" />}>
               {props.children}
             </Suspense>
           </ErrorBoundary>

src/styles/index.css

···
 samp,
 pre {
   font-family:
-    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
 }
 
 .string {

src/styles/tailwind.css

···
 
 ::before,
 ::after {
-  --un-content: '';
+  --un-content: "";
 }
 
 /*
···
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
   font-variation-settings: normal; /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
···
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace; /* 1 */
   font-feature-settings: normal; /* 2 */
   font-variation-settings: normal; /* 3 */
   font-size: 1em; /* 4 */
···
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
···
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }

src/utils/api.ts

···
   cursor?: string,
   limit?: number,
 ) => {
-  const url = new URL(
-    localStorage.constellationHost || "https://constellation.microcosm.blue",
-  );
+  const url = new URL(localStorage.constellationHost || "https://constellation.microcosm.blue");
   url.pathname = endpoint;
   url.searchParams.set("target", target);
   if (collection) {
-    if (!path)
-      throw new Error("collection and path must either both be set or neither");
+    if (!path) throw new Error("collection and path must either both be set or neither");
     url.searchParams.set("collection", collection);
     url.searchParams.set("path", path);
   } else {
-    if (path)
-      throw new Error("collection and path must either both be set or neither");
+    if (path) throw new Error("collection and path must either both be set or neither");
   }
   if (limit) url.searchParams.set("limit", `${limit}`);
   if (cursor) url.searchParams.set("cursor", `${cursor}`);
···
   return await res.json();
 };
 
-const getAllBacklinks = (target: string) =>
-  getConstellation("/links/all", target);
+const getAllBacklinks = (target: string) => getConstellation("/links/all", target);
 
 const getRecordBacklinks = (
   target: string,
···
   path: string,
   cursor?: string,
   limit?: number,
-) =>
-  getConstellation(
-    "/links/distinct-dids",
-    target,
-    collection,
-    path,
-    cursor,
-    limit || 100,
-  );
+) => getConstellation("/links/distinct-dids", target, collection, path, cursor, limit || 100);
 
 export {
   didDocCache,

src/utils/firehose.ts

···
     return this;
   }
 
-  private parseMessage(
-    data: ArrayBuffer,
-  ): ParsedCommit | { $type: string; seq?: number } {
+  private parseMessage(data: ArrayBuffer): ParsedCommit | { $type: string; seq?: number } {
     const [header, remainder] = decodeFirst(new Uint8Array(data));
     const [body, remainder2] = decodeFirst(remainder);
     if (remainder2.length > 0) {

src/utils/types/at-uri.ts

···
 
 const isDid = (input: unknown): input is Did => {
   return (
-    typeof input === "string" &&
-    input.length >= 7 &&
-    input.length <= 2048 &&
-    DID_RE.test(input)
+    typeof input === "string" && input.length >= 7 && input.length <= 2048 && DID_RE.test(input)
   );
 };
 
 const isNsid = (input: unknown): input is Nsid => {
   return (
-    typeof input === "string" &&
-    input.length >= 5 &&
-    input.length <= 317 &&
-    NSID_RE.test(input)
+    typeof input === "string" && input.length >= 5 && input.length <= 317 && NSID_RE.test(input)
   );
 };
 

src/utils/verify.ts

···
 import * as CAR from "@atcute/car";
 import * as CBOR from "@atcute/cbor";
 import * as CID from "@atcute/cid";
-import {
-  type FoundPublicKey,
-  getPublicKeyFromDidController,
-  verifySig,
-} from "@atcute/crypto";
-import {
-  type DidDocument,
-  getAtprotoVerificationMaterial,
-} from "@atcute/identity";
+import { type FoundPublicKey, getPublicKeyFromDidController, verifySig } from "@atcute/crypto";
+import { type DidDocument, getAtprotoVerificationMaterial } from "@atcute/identity";
 import { toSha256 } from "@atcute/uint8array";
 
 import { type AddressedAtUri, parseAddressedAtUri } from "./types/at-uri";
···
   didDoc: DidDocument;
 }
 
-export const verifyRecord = async (
-  opts: VerifyOptions,
-): Promise<VerifyResult> => {
+export const verifyRecord = async (opts: VerifyOptions): Promise<VerifyResult> => {
   const errors: VerifyError[] = [];
 
   // verify cid can be parsed
···
       const cidString = CID.toString(entry.cid);
 
       // Verify that `bytes` matches its associated CID
-      const expectedCid = CID.toString(
-        await CID.create(entry.cid.codec as 85 | 113, entry.bytes),
-      );
+      const expectedCid = CID.toString(await CID.create(entry.cid.codec as 85 | 113, entry.bytes));
       if (cidString !== expectedCid) {
         errors.push({
           message: `cid does not match bytes`,

src/views/blob.tsx

···
   const fetchBlobs = async (): Promise<string[]> => {
     if (!did.startsWith("did:")) did = await resolveHandle(params.repo);
     if (!pds) pds = await resolvePDS(did);
-    if (!rpc)
-      rpc = new XRPC({ handler: new CredentialManager({ service: pds }) });
+    if (!rpc) rpc = new XRPC({ handler: new CredentialManager({ service: pds }) });
     const res = await listBlobs(did, cursor());
     setCursor(res.data.cids.length < 1000 ? undefined : res.data.cursor);
     setBlobs(blobs()?.concat(res.data.cids) ?? res.data.cids);

src/views/collection.tsx

···
       onmouseleave={() => setHoverRk(undefined)}
     >
       <span class="text-lightblue-500">{props.record.rkey}</span>
-      <Show
-        when={props.record.timestamp && props.record.timestamp <= Date.now()}
-      >
+      <Show when={props.record.timestamp && props.record.timestamp <= Date.now()}>
         <span class="ml-2 text-xs text-neutral-500 dark:text-neutral-400">
           {localDateFromTimestamp(props.record.timestamp!)}
         </span>
···
   const fetchRecords = async () => {
     if (!did.startsWith("did:")) did = await resolveHandle(params.repo);
     if (!pds) pds = await resolvePDS(did);
-    if (!rpc)
-      rpc = new XRPC({ handler: new CredentialManager({ service: pds }) });
+    if (!rpc) rpc = new XRPC({ handler: new CredentialManager({ service: pds }) });
     const res = await listRecords(did, params.collection, cursor());
     setCursor(res.data.records.length < 100 ? undefined : res.data.cursor);
     const tmpRecords: AtprotoRecord[] = [];
···
       tmpRecords.push({
         rkey: rkey,
         record: record,
-        timestamp:
-          TID.validate(rkey) ? TID.parse(rkey).timestamp / 1000 : undefined,
+        timestamp: TID.validate(rkey) ? TID.parse(rkey).timestamp / 1000 : undefined,
         toDelete: false,
       });
     });
···
     setRecords(
       records
         .map((record, index) =>
-          JSON.stringify(record.record.value).includes(filter() ?? "") ?
-            index
-          : undefined,
+          JSON.stringify(record.record.value).includes(filter() ?? "") ? index : undefined,
         )
         .filter((i) => i !== undefined),
       "toDelete",
···
                   >
                     <div class="dark:bg-dark-400 rounded-md border border-neutral-500 bg-slate-100 p-3 text-slate-900 dark:text-slate-100">
                       <h3 class="text-lg font-bold">
-                        Delete {records.filter((rec) => rec.toDelete).length}{" "}
-                        records?
+                        Delete {records.filter((rec) => rec.toDelete).length} records?
                       </h3>
                       <div class="mt-2 inline-flex gap-2">
                         <button
···
       <div class="flex flex-col font-mono">
         <For
           each={records.filter((rec) =>
-            filter() ?
-              JSON.stringify(rec.record.value).includes(filter()!)
-            : true,
+            filter() ? JSON.stringify(rec.record.value).includes(filter()!) : true,
           )}
         >
           {(record, index) => (
···
                   <input
                     type="checkbox"
                     checked={record.toDelete}
-                    onchange={(e) =>
-                      setRecords(index(), "toDelete", e.currentTarget.checked)
-                    }
+                    onchange={(e) => setRecords(index(), "toDelete", e.currentTarget.checked)}
                   />
                   <RecordLink record={record} index={index()} />
                 </label>

src/views/home.tsx

···
       <div class="mb-2">
         <p>
           Browse the public data on{" "}
-          <a
-            class="text-lightblue-500 hover:underline"
-            href="https://atproto.com"
-            target="_blank"
-          >
+          <a class="text-lightblue-500 hover:underline" href="https://atproto.com" target="_blank">
             AT Protocol
           </a>
           .
···
         <div>
           <span class="font-semibold text-orange-400">PDS</span>
           <div>
-            <A
-              href="/pyramid-activation.today"
-              class="text-lightblue-500 hover:underline"
-            >
+            <A href="/pyramid-activation.today" class="text-lightblue-500 hover:underline">
               https://pyramid-activation.today
             </A>
           </div>

src/views/labels.tsx

···
   });
 
   const fetchLabels = async () => {
-    const uriPatterns = (
-      document.getElementById("patterns") as HTMLInputElement
-    ).value;
+    const uriPatterns = (document.getElementById("patterns") as HTMLInputElement).value;
     if (!uriPatterns) return;
     const res = await rpc.get("com.atproto.label.queryLabels", {
       params: {
···
     setLabels([]);
     setCursor("");
     setSearchParams({
-      uriPatterns: (document.getElementById("patterns") as HTMLInputElement)
-        .value,
+      uriPatterns: (document.getElementById("patterns") as HTMLInputElement).value,
     });
     refetch();
   };
 
   const filterLabels = () => {
-    const newFilter = labels().filter((label) =>
-      filter() ? filter() === label.val : true,
-    );
+    const newFilter = labels().filter((label) => (filter() ? filter() === label.val : true));
     setLabelCount(newFilter.length);
     return newFilter;
   };
 
   return (
     <>
-      <form
-        class="mt-3 flex flex-col items-center gap-y-1"
-        onsubmit={(e) => e.preventDefault()}
-      >
+      <form class="mt-3 flex flex-col items-center gap-y-1" onsubmit={(e) => e.preventDefault()}>
         <div class="w-full">
           <label for="patterns" class="ml-0.5 text-sm">
             URI Patterns (comma-separated)
···
           </For>
         </div>
       </Show>
-      <Show
-        when={!labels().length && !response.loading && searchParams.uriPatterns}
-      >
+      <Show when={!labels().length && !response.loading && searchParams.uriPatterns}>
         <div class="mt-2">No results</div>
       </Show>
     </>

src/views/pds.tsx

···
   const [version, setVersion] = createSignal<string>();
   const [cursor, setCursor] = createSignal<string>();
   setPDS(params.pds);
-  const pds =
-    params.pds.startsWith("localhost") ?
-      `http://${params.pds}`
-    : `https://${params.pds}`;
+  const pds = params.pds.startsWith("localhost") ? `http://${params.pds}` : `https://${params.pds}`;
   const rpc = new XRPC({ handler: new CredentialManager({ service: pds }) });
 
   const listRepos = async (cursor: string | undefined) =>
···
       <div class="mt-3 flex flex-col">
         <Show when={version()}>
           <div class="flex max-w-[21rem] gap-1">
-            <span class="font-semibold text-stone-600 dark:text-stone-400">
-              Version
-            </span>
+            <span class="font-semibold text-stone-600 dark:text-stone-400">Version</span>
             <span class="break-anywhere">{version()}</span>
           </div>
         </Show>
-        <p class="w-full font-semibold text-stone-600 dark:text-stone-400">
-          Repositories
-        </p>
+        <p class="w-full font-semibold text-stone-600 dark:text-stone-400">Repositories</p>
         <For each={repos()}>
           {(repo) => (
             <A
···
               classList={{
                 "w-full flex font-mono relative": true,
                 "text-lightblue-500": repo.active,
-                "text-gray-300 absolute -left-5 dark:text-gray-600":
-                  !repo.active,
+                "text-gray-300 absolute -left-5 dark:text-gray-600": !repo.active,
               }}
             >
               <Show when={!repo.active}>

src/views/record.tsx

···
 import { setCID, setValidRecord, validRecord } from "../components/navbar.jsx";
 import { theme } from "../components/settings.jsx";
 
-import {
-  didDocCache,
-  getAllBacklinks,
-  LinkData,
-  resolveHandle,
-  resolvePDS,
-} from "../utils/api.js";
+import { didDocCache, getAllBacklinks, LinkData, resolveHandle, resolvePDS } from "../utils/api.js";
 import { AtUri, uriTemplates } from "../utils/templates.js";
 import { verifyRecord } from "../utils/verify.js";
 
···
 
         if (errors.length > 0) {
           console.warn(errors);
-          setNotice(
-            `Invalid record: ${errors.map((e) => e.message).join("\n")}`,
-          );
+          setNotice(`Invalid record: ${errors.map((e) => e.message).join("\n")}`);
         }
         setValidRecord(errors.length === 0);
       } catch (err) {
···
         <div class="i-line-md-loading-twotone-loop mt-3 text-xl" />
       </Show>
       <Show when={validRecord() === false}>
-        <div class="w-20rem mb-2 mt-3 break-words text-red-500 dark:text-red-400">
-          {notice()}
-        </div>
+        <div class="w-20rem mb-2 mt-3 break-words text-red-500 dark:text-red-400">{notice()}</div>
       </Show>
       <Show when={record()}>
         <div class="my-4 flex w-full justify-center gap-x-2">
···
               target="_blank"
               href={externalLink()?.link}
             >
-              {externalLink()?.label}{" "}
-              <div class="i-tabler-external-link text-sm" />
+              {externalLink()?.label} <div class="i-tabler-external-link text-sm" />
             </a>
           </Show>
-          <Show
-            when={loginState() && agent.sub === record()?.uri.split("/")[2]}
-          >
+          <Show when={loginState() && agent.sub === record()?.uri.split("/")[2]}>
             <Show when={openEdit()}>
               <dialog
                 ref={setModal}
···
                     </div>
                     <Editor theme={theme().color} model={model!} />
                     <div class="mt-2 flex flex-col gap-2">
-                      <div class="text-red-500 dark:text-red-400">
-                        {editNotice()}
-                      </div>
+                      <div class="text-red-500 dark:text-red-400">{editNotice()}</div>
                       <div class="flex items-center justify-end gap-2">
                         <div class="flex items-center gap-1">
-                          <input
-                            id="recreate"
-                            class="size-4"
-                            name="recreate"
-                            type="checkbox"
-                          />
+                          <input id="recreate" class="size-4" name="recreate" type="checkbox" />
                           <label for="recreate" class="select-none">
                             Recreate record
                           </label>
···
             </Show>
             <button
               onclick={() => {
-                model = editor.createModel(
-                  JSON.stringify(record()?.value, null, 2),
-                  "json",
-                );
+                model = editor.createModel(JSON.stringify(record()?.value, null, 2), "json");
                 setOpenEdit(true);
               }}
               class="dark:bg-dark-700 dark:hover:bg-dark-800 rounded-lg border border-slate-400 bg-white px-2.5 py-1.5 text-sm font-bold hover:bg-slate-100 focus:outline-none focus:ring-1 focus:ring-slate-700 dark:focus:ring-slate-300"
···
         </div>
         <div
           classList={{
-            "break-anywhere mb-2 whitespace-pre-wrap pb-3 font-mono text-sm sm:text-base":
-              true,
+            "break-anywhere mb-2 whitespace-pre-wrap pb-3 font-mono text-sm sm:text-base": true,
             "border-b border-neutral-500": !!backlinks(),
           }}
         >
           <Show when={!JSONSyntax()}>
-            <JSONValue
-              data={record()?.value as any}
-              repo={record()!.uri.split("/")[2]}
-            />
+            <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />
           </Show>
           <Show when={JSONSyntax()}>
             <span
               innerHTML={syntaxHighlight(
                 JSON.stringify(record()?.value, null, 2).replace(
                   /[\u007F-\uFFFF]/g,
-                  (chr) =>
-                    "\\u" + ("0000" + chr.charCodeAt(0).toString(16)).slice(-4),
+                  (chr) => "\\u" + ("0000" + chr.charCodeAt(0).toString(16)).slice(-4),
                 ),
               )}
             ></span>
           </Show>
         </div>
         <Show when={backlinks()}>
-          {(backlinks) => (
-            <Backlinks links={backlinks().links} target={backlinks().target} />
-          )}
+          {(backlinks) => <Backlinks links={backlinks().links} target={backlinks().target} />}
         </Show>
       </Show>
     </>

src/views/repo.tsx

···
 import { createSignal, For, Show, createResource } from "solid-js";
 import { CredentialManager, XRPC } from "@atcute/client";
 import { A, query, useParams } from "@solidjs/router";
-import {
-  didDocCache,
-  getAllBacklinks,
-  LinkData,
-  resolveHandle,
-  resolvePDS,
-} from "../utils/api.js";
+import { didDocCache, getAllBacklinks, LinkData, resolveHandle, resolvePDS } from "../utils/api.js";
 import { DidDocument } from "@atcute/client/utils/did";
 import { Backlinks } from "../components/backlinks.jsx";
 
···
   let did = params.repo;
 
   const describeRepo = query(
-    (repo: string) =>
-      rpc.get("com.atproto.repo.describeRepo", { params: { repo: repo } }),
+    (repo: string) => rpc.get("com.atproto.repo.describeRepo", { params: { repo: repo } }),
     "describeRepo",
   );
 
···
   const downloadRepo = async () => {
     try {
       setDownloading(true);
-      const response = await fetch(
-        `${pds}/xrpc/com.atproto.sync.getRepo?did=${did}`,
-      );
+      const response = await fetch(`${pds}/xrpc/com.atproto.sync.getRepo?did=${did}`);
       if (!response.ok) {
         throw new Error(`HTTP error status: ${response.status}`);
       }
···
     <Show when={repo()}>
       <div class="mt-3 flex w-[21rem] flex-col gap-2 break-words">
         <div class="flex flex-col border-b border-neutral-500 pb-2 font-mono">
-          <p class="font-sans font-semibold text-stone-600 dark:text-stone-400">
-            Collections
-          </p>
+          <p class="font-sans font-semibold text-stone-600 dark:text-stone-400">Collections</p>
           <For each={repo()?.collections}>
             {(collection) => (
               <A
···
           {(didDocument) => (
             <div class="flex flex-col gap-y-1">
               <div>
-                <span class="font-semibold text-stone-600 dark:text-stone-400">
-                  ID{" "}
-                </span>
+                <span class="font-semibold text-stone-600 dark:text-stone-400">ID </span>
                 <span>{didDocument().id}</span>
               </div>
               <div>
-                <p class="font-semibold text-stone-600 dark:text-stone-400">
-                  Identities
-                </p>
+                <p class="font-semibold text-stone-600 dark:text-stone-400">Identities</p>
                 <ul class="ml-3">
-                  <For each={didDocument().alsoKnownAs}>
-                    {(alias) => <li>{alias}</li>}
-                  </For>
+                  <For each={didDocument().alsoKnownAs}>{(alias) => <li>{alias}</li>}</For>
                 </ul>
               </div>
               <div>
-                <p class="font-semibold text-stone-600 dark:text-stone-400">
-                  Services
-                </p>
+                <p class="font-semibold text-stone-600 dark:text-stone-400">Services</p>
                 <ul class="ml-3">
                   <For each={didDocument().service}>
                     {(service) => (
···
                 </ul>
               </div>
               <div>
-                <p class="font-semibold text-stone-600 dark:text-stone-400">
-                  Verification methods
-                </p>
+                <p class="font-semibold text-stone-600 dark:text-stone-400">Verification methods</p>
                 <ul class="ml-3">
                   <For each={didDocument().verificationMethod}>
                     {(verif) => (
···
                 }
                 target="_blank"
               >
-                DID document{" "}
-                <div class="i-tabler-external-link ml-0.5 text-xs" />
+                DID document <div class="i-tabler-external-link ml-0.5 text-xs" />
               </a>
               <Show when={repo()?.did.startsWith("did:plc")}>
                 <a
···
                   href={`https://boat.kelinci.net/plc-oplogs?q=${repo()?.did}`}
                   target="_blank"
                 >
-                  PLC operation logs{" "}
-                  <div class="i-tabler-external-link ml-0.5 text-xs" />
+                  PLC operation logs <div class="i-tabler-external-link ml-0.5 text-xs" />
                 </a>
               </Show>
               <div class="flex items-center gap-1">
···
               <Show when={backlinks()}>
                 {(backlinks) => (
                   <div class="mt-2 border-t border-neutral-500 pt-2">
-                    <Backlinks
-                      links={backlinks().links}
-                      target={backlinks().target}
-                    />
+                    <Backlinks links={backlinks().links} target={backlinks().target} />
                   </div>
                 )}
               </Show>

src/views/stream.tsx

···
   const [searchParams, setSearchParams] = useSearchParams();
   const [parameters, setParameters] = createSignal<Parameter[]>([]);
   const streamType =
-    useLocation().pathname === "/firehose" ?
-      StreamType.FIREHOSE
-    : StreamType.JETSTREAM;
+    useLocation().pathname === "/firehose" ? StreamType.FIREHOSE : StreamType.JETSTREAM;
 
   const [records, setRecords] = createSignal<Array<any>>([]);
   const [connected, setConnected] = createSignal(false);
···
     let url = "";
     if (streamType === StreamType.JETSTREAM) {
       url =
-        formData.get("instance")?.toString() ??
-        "wss://jetstream1.us-east.bsky.network/subscribe";
+        formData.get("instance")?.toString() ?? "wss://jetstream1.us-east.bsky.network/subscribe";
       url = url.concat("?");
     } else {
       url = formData.get("instance")?.toString() ?? "wss://bsky.network";
···
 
     const collections = formData.get("collections")?.toString().split(",");
     collections?.forEach((collection) => {
-      if (collection.length)
-        url = url.concat(`wantedCollections=${collection}&`);
+      if (collection.length) url = url.concat(`wantedCollections=${collection}&`);
     });
 
     const dids = formData.get("dids")?.toString().split(",");
···
 
   onMount(async () => {
     const formData = new FormData();
-    if (searchParams.instance)
-      formData.append("instance", searchParams.instance.toString());
+    if (searchParams.instance) formData.append("instance", searchParams.instance.toString());
     if (searchParams.collections)
       formData.append("collections", searchParams.collections.toString());
-    if (searchParams.dids)
-      formData.append("dids", searchParams.dids.toString());
-    if (searchParams.cursor)
-      formData.append("cursor", searchParams.cursor.toString());
-    if (searchParams.allEvents)
-      formData.append("allEvents", searchParams.allEvents.toString());
+    if (searchParams.dids) formData.append("dids", searchParams.dids.toString());
+    if (searchParams.cursor) formData.append("cursor", searchParams.cursor.toString());
+    if (searchParams.allEvents) formData.append("allEvents", searchParams.allEvents.toString());
     if (searchParams.instance) connectSocket(formData);
   });
 
···
   return (
     <div class="mt-4 flex flex-col items-center gap-y-3">
       <div class="flex divide-x-2 text-lg font-bold">
-        <A
-          class="pr-2"
-          inactiveClass="text-lightblue-500 hover:underline"
-          href="/jetstream"
-        >
+        <A class="pr-2" inactiveClass="text-lightblue-500 hover:underline" href="/jetstream">
           Jetstream
         </A>
-        <A
-          class="pl-2"
-          inactiveClass="text-lightblue-500 hover:underline"
-          href="/firehose"
-        >
+        <A class="pl-2" inactiveClass="text-lightblue-500 hover:underline" href="/firehose">
           Firehose
         </A>
       </div>