add modal component

src/components/account.tsx

···
-import { createSignal, onMount, Show, onCleanup, createEffect, For } from "solid-js";
+import { createSignal, onMount, For } from "solid-js";
 import Tooltip from "./tooltip.jsx";
 import { deleteStoredSession, getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";
 import { agent, Login, loginState, setLoginState } from "./login.jsx";
···
 import { resolveDidDoc } from "../utils/api.js";
 import { createStore } from "solid-js/store";
 import { Client, CredentialManager } from "@atcute/client";
+import { Modal } from "./modal.jsx";
 
 const AccountManager = () => {
-  const [modal, setModal] = createSignal<HTMLDialogElement>();
   const [openManager, setOpenManager] = createSignal(false);
   const [sessions, setSessions] = createStore<Record<string, string | undefined>>();
   const [avatar, setAvatar] = createSignal<string>();
 
-  const clickEvent = (event: MouseEvent) => {
-    if (modal() && event.target == modal()) setOpenManager(false);
-  };
-  const keyEvent = (event: KeyboardEvent) => {
-    if (modal() && event.key == "Escape") setOpenManager(false);
-  };
-
   onMount(async () => {
-    window.addEventListener("keydown", keyEvent);
-    window.addEventListener("click", clickEvent);
-
     const storedSessions = localStorage.getItem("atcute-oauth:sessions");
     if (storedSessions) {
       const sessionDids = Object.keys(JSON.parse(storedSessions)) as Did[];
···
     if (repo) setAvatar(await getAvatar(repo as Did));
   });
 
-  onCleanup(() => {
-    window.removeEventListener("keydown", keyEvent);
-    window.removeEventListener("click", clickEvent);
-  });
-
-  createEffect(() => {
-    if (openManager()) document.body.style.overflow = "hidden";
-    else document.body.style.overflow = "auto";
-  });
-
   const resumeSession = (did: Did) => {
     localStorage.setItem("lastSignedIn", did);
     window.location.href = "/";
···
 
   return (
     <>
-      <Show when={openManager()}>
-        <dialog
-          ref={setModal}
-          class="fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent"
-        >
-          <div class="starting:opacity-0 dark:bg-dark-800/70 backdrop-blur-xs border-0.5 dark:shadow-dark-900 absolute top-12 rounded-md border-neutral-300 bg-zinc-200/70 p-4 text-slate-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-slate-100">
-            <h3 class="mb-2 font-bold">Manage accounts</h3>
-            <div class="border-b-0.5 mb-2 max-h-[20rem] overflow-y-auto border-neutral-500 pb-2 md:max-h-[25rem]">
-              <For each={Object.keys(sessions)}>
-                {(did) => (
-                  <div class="group/select flex w-full items-center justify-between gap-x-2">
-                    <button
-                      classList={{
-                        "bg-transparent basis-full text-left max-w-[32ch] truncate group-hover/select:bg-zinc-200 px-1 rounded dark:group-hover/select:bg-neutral-600": true,
-                        "text-blue-500 dark:text-blue-400 font-bold": did === agent?.sub,
-                      }}
-                      onclick={() => resumeSession(did as Did)}
-                    >
-                      {sessions[did]?.length ? sessions[did] : did}
-                    </button>
-                    <button onclick={() => removeSession(did as Did)}>
-                      <div class="i-lucide-x text-xl text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500" />
-                    </button>
-                  </div>
-                )}
-              </For>
-            </div>
-            <Login />
+      <Modal open={openManager()} onClose={() => setOpenManager(false)}>
+        <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900 backdrop-blur-xs left-50% absolute top-12 -translate-x-1/2 rounded-md border-neutral-300 bg-zinc-200/70 p-4 text-slate-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-slate-100">
+          <h3 class="mb-2 font-bold">Manage accounts</h3>
+          <div class="border-b-0.5 mb-2 max-h-[20rem] overflow-y-auto border-neutral-500 pb-2 md:max-h-[25rem]">
+            <For each={Object.keys(sessions)}>
+              {(did) => (
+                <div class="group/select flex w-full items-center justify-between gap-x-2">
+                  <button
+                    classList={{
+                      "bg-transparent basis-full text-left max-w-[32ch] truncate group-hover/select:bg-zinc-200 px-1 rounded dark:group-hover/select:bg-neutral-600": true,
+                      "text-blue-500 dark:text-blue-400 font-bold": did === agent?.sub,
+                    }}
+                    onclick={() => resumeSession(did as Did)}
+                  >
+                    {sessions[did]?.length ? sessions[did] : did}
+                  </button>
+                  <button onclick={() => removeSession(did as Did)}>
+                    <div class="i-lucide-x text-xl text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500" />
+                  </button>
+                </div>
+              )}
+            </For>
           </div>
-        </dialog>
-      </Show>
+          <Login />
+        </div>
+      </Modal>
       <button onclick={() => setOpenManager(true)}>
         <Tooltip text="Accounts">
           {loginState() && avatar() ?

src/components/create.tsx

···
-import { createSignal, onMount, Show, onCleanup, createEffect } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { Client } from "@atcute/client";
 import { agent } from "../components/login.jsx";
 import { editor, Editor } from "../components/editor.jsx";
···
 import { useParams } from "@solidjs/router";
 import { remove } from "@mary/exif-rm";
 import { TextInput } from "./text-input.jsx";
+import { Modal } from "./modal.jsx";
 
 export const RecordEditor = (props: { create: boolean; record?: any }) => {
   const params = useParams();
-  const [modal, setModal] = createSignal<HTMLDialogElement>();
   const [openDialog, setOpenDialog] = createSignal(false);
   const [notice, setNotice] = createSignal("");
   const [uploading, setUploading] = createSignal(false);
···
       createdAt: date,
     };
   };
-
-  const keyEvent = (event: KeyboardEvent) => {
-    if (modal() && event.key == "Escape") setOpenDialog(false);
-  };
-
-  onMount(() => window.addEventListener("keydown", keyEvent));
-
-  onCleanup(() => window.removeEventListener("keydown", keyEvent));
 
   const createRecord = async (formData: FormData) => {
     const rpc = new Client({ handler: agent });
···
     editor.trigger("editor", "editor.action.formatDocument", {});
   };
 
-  createEffect(() => {
-    if (openDialog()) document.body.style.overflow = "hidden";
-    else document.body.style.overflow = "auto";
-    setNotice("");
-  });
-
   const createModel = () => {
     if (!model)
       model = monaco.editor.createModel(
···
 
   return (
     <>
-      <Show when={openDialog()}>
-        <dialog
-          ref={setModal}
-          class="fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent"
-        >
-          <div class="w-21rem sm:w-xl lg:w-50rem starting:opacity-0 dark:bg-dark-800/70 backdrop-blur-xs border-0.5 dark:shadow-dark-900 absolute top-12 rounded-md border-neutral-300 bg-zinc-200/70 p-2 text-slate-900 shadow-md transition-opacity duration-300 sm:p-4 dark:border-neutral-700 dark:text-slate-100">
-            <div class="mb-2 flex w-full justify-between">
-              <h3 class="font-bold">{props.create ? "Creating" : "Editing"} record</h3>
-              <div
-                class="i-lucide-x text-xl hover:text-red-500 dark:hover:text-red-400"
-                onclick={() => setOpenDialog(false)}
-              />
-            </div>
-            <form ref={formRef} class="flex flex-col gap-y-2">
-              <div class="flex w-fit flex-col gap-y-1 text-xs sm:text-sm">
-                <Show when={props.create}>
-                  <div class="flex items-center gap-x-2">
-                    <label for="collection" class="min-w-20 select-none">
-                      Collection
-                    </label>
-                    <TextInput
-                      id="collection"
-                      name="collection"
-                      placeholder="Optional (default: record type)"
-                      class="w-14rem"
+      <Modal open={openDialog()} onClose={() => setOpenDialog(false)}>
+        <div class="w-21rem sm:w-xl lg:w-50rem starting:opacity-0 dark:bg-dark-800/70 left-50% backdrop-blur-xs border-0.5 dark:shadow-dark-900 absolute top-12 -translate-x-1/2 rounded-md border-neutral-300 bg-zinc-200/70 p-2 text-slate-900 shadow-md transition-opacity duration-300 sm:p-4 dark:border-neutral-700 dark:text-slate-100">
+          <div class="mb-2 flex w-full justify-between">
+            <h3 class="font-bold">{props.create ? "Creating" : "Editing"} record</h3>
+            <div
+              class="i-lucide-x text-xl hover:text-red-500 dark:hover:text-red-400"
+              onclick={() => setOpenDialog(false)}
+            />
+          </div>
+          <form ref={formRef} class="flex flex-col gap-y-2">
+            <div class="flex w-fit flex-col gap-y-1 text-xs sm:text-sm">
+              <Show when={props.create}>
+                <div class="flex items-center gap-x-2">
+                  <label for="collection" class="min-w-20 select-none">
+                    Collection
+                  </label>
+                  <TextInput
+                    id="collection"
+                    name="collection"
+                    placeholder="Optional (default: record type)"
+                    class="w-14rem"
+                  />
+                </div>
+                <div class="flex items-center gap-x-2">
+                  <label for="rkey" class="min-w-20 select-none">
+                    Record key
+                  </label>
+                  <TextInput id="rkey" name="rkey" placeholder="Optional" class="w-14rem" />
+                </div>
+              </Show>
+              <div class="flex items-center gap-x-2">
+                <label for="validate" class="min-w-20 select-none">
+                  Validate
+                </label>
+                <select
+                  name="validate"
+                  id="validate"
+                  class="dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900 rounded-lg bg-white px-1 py-1 shadow-sm focus:outline-blue-500"
+                >
+                  <option value="unset">Unset</option>
+                  <option value="true">True</option>
+                  <option value="false">False</option>
+                </select>
+              </div>
+              <div class="flex flex-row items-center gap-2">
+                <Show when={!uploading()}>
+                  <Tooltip text="Upload file">
+                    <input
+                      type="file"
+                      title=""
+                      id="blob"
+                      class="i-lucide-upload text-xl"
+                      onChange={() => uploadBlob()}
                     />
-                  </div>
-                  <div class="flex items-center gap-x-2">
-                    <label for="rkey" class="min-w-20 select-none">
-                      Record key
-                    </label>
-                    <TextInput id="rkey" name="rkey" placeholder="Optional" class="w-14rem" />
-                  </div>
+                  </Tooltip>
+                  <p>Blob metadata will be pasted after the cursor</p>
+                </Show>
+                <Show when={uploading()}>
+                  <div class="i-lucide-loader-circle animate-spin text-xl" />
                 </Show>
+              </div>
+              <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                 <div class="flex items-center gap-x-2">
-                  <label for="validate" class="min-w-20 select-none">
-                    Validate
+                  <label for="mimetype" class="min-w-20 select-none">
+                    MIME type
                   </label>
-                  <select
-                    name="validate"
-                    id="validate"
-                    class="dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900 rounded-lg bg-white px-1 py-1 shadow-sm focus:outline-blue-500"
-                  >
-                    <option value="unset">Unset</option>
-                    <option value="true">True</option>
-                    <option value="false">False</option>
-                  </select>
+                  <TextInput id="mimetype" placeholder="Optional" class="w-14rem" />
                 </div>
-                <div class="flex flex-row items-center gap-2">
-                  <Show when={!uploading()}>
-                    <Tooltip text="Upload file">
-                      <input
-                        type="file"
-                        title=""
-                        id="blob"
-                        class="i-lucide-upload text-xl"
-                        onChange={() => uploadBlob()}
-                      />
-                    </Tooltip>
-                    <p>Blob metadata will be pasted after the cursor</p>
-                  </Show>
-                  <Show when={uploading()}>
-                    <div class="i-lucide-loader-circle animate-spin text-xl" />
-                  </Show>
+                <div class="flex items-center gap-1">
+                  <input id="exif-rm" class="size-4" type="checkbox" checked />
+                  <label for="exif-rm" class="select-none">
+                    Remove EXIF data
+                  </label>
                 </div>
-                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                  <div class="flex items-center gap-x-2">
-                    <label for="mimetype" class="min-w-20 select-none">
-                      MIME type
-                    </label>
-                    <TextInput id="mimetype" placeholder="Optional" class="w-14rem" />
-                  </div>
+              </div>
+            </div>
+            <Editor theme={theme().color} model={model!} />
+            <div class="flex flex-col gap-2">
+              <Show when={notice()}>
+                <div class="text-red-500 dark:text-red-400">{notice()}</div>
+              </Show>
+              <div class="flex items-center justify-end gap-2">
+                <Show when={!props.create}>
                   <div class="flex items-center gap-1">
-                    <input id="exif-rm" class="size-4" type="checkbox" checked />
-                    <label for="exif-rm" class="select-none">
-                      Remove EXIF data
+                    <input id="recreate" class="size-4" name="recreate" type="checkbox" />
+                    <label for="recreate" class="select-none">
+                      Recreate record
                     </label>
                   </div>
-                </div>
-              </div>
-              <Editor theme={theme().color} model={model!} />
-              <div class="flex flex-col gap-2">
-                <Show when={notice()}>
-                  <div class="text-red-500 dark:text-red-400">{notice()}</div>
                 </Show>
-                <div class="flex items-center justify-end gap-2">
-                  <Show when={!props.create}>
-                    <div class="flex items-center gap-1">
-                      <input id="recreate" class="size-4" name="recreate" type="checkbox" />
-                      <label for="recreate" class="select-none">
-                        Recreate record
-                      </label>
-                    </div>
-                  </Show>
-                  <button
-                    type="button"
-                    onclick={() =>
-                      props.create ?
-                        createRecord(new FormData(formRef))
-                      : editRecord(new FormData(formRef))
-                    }
-                    class="focus:outline-1.5 dark:shadow-dark-900 rounded-lg bg-blue-500 px-2 py-1.5 text-xs font-bold text-slate-100 shadow-sm hover:bg-blue-400 focus:outline-blue-500 sm:text-sm dark:bg-blue-600 dark:hover:bg-blue-500"
-                  >
-                    Confirm
-                  </button>
-                </div>
+                <button
+                  type="button"
+                  onclick={() =>
+                    props.create ?
+                      createRecord(new FormData(formRef))
+                    : editRecord(new FormData(formRef))
+                  }
+                  class="focus:outline-1.5 dark:shadow-dark-900 rounded-lg bg-blue-500 px-2 py-1.5 text-xs font-bold text-slate-100 shadow-sm hover:bg-blue-400 focus:outline-blue-500 sm:text-sm dark:bg-blue-600 dark:hover:bg-blue-500"
+                >
+                  Confirm
+                </button>
               </div>
-            </form>
-          </div>
-        </dialog>
-      </Show>
+            </div>
+          </form>
+        </div>
+      </Modal>
       <Show when={props.create}>
         <button
           onclick={() => {

src/components/modal.tsx

···
+import { ComponentProps, onCleanup, onMount, Show } from "solid-js";
+
+export interface ModalProps extends Pick<ComponentProps<"svg">, "children"> {
+  open?: boolean;
+  onClose?: () => void;
+}
+
+export const Modal = (props: ModalProps) => {
+  return (
+    <Show when={props.open}>
+      <dialog
+        ref={(node) => {
+          onMount(() => {
+            document.body.style.overflow = "hidden";
+            node.showModal();
+          });
+          onCleanup(() => node.close());
+        }}
+        onClick={(ev) => {
+          if (ev.target === ev.currentTarget) {
+            if (props.onClose) props.onClose();
+          }
+        }}
+        onClose={() => {
+          document.body.style.overflow = "auto";
+          if (props.onClose) props.onClose();
+        }}
+        class="h-full max-h-none w-full max-w-none bg-transparent backdrop:bg-transparent"
+      >
+        {props.children}
+      </dialog>
+    </Show>
+  );
+};

src/components/settings.tsx

···
-import { createSignal, onMount, Show, onCleanup, createEffect } from "solid-js";
+import { createSignal, onMount, Show, onCleanup } from "solid-js";
 import Tooltip from "./tooltip.jsx";
 import { TextInput } from "./text-input.jsx";
+import { Modal } from "./modal.jsx";
 
 const getInitialTheme = () => {
   const isDarkMode =
···
 export const [kawaii, setKawaii] = createSignal(localStorage.kawaii === "true");
 
 const Settings = () => {
-  const [modal, setModal] = createSignal<HTMLDialogElement>();
   const [openSettings, setOpenSettings] = createSignal(false);
 
-  const clickEvent = (event: MouseEvent) => {
-    if (modal() && event.target == modal()) setOpenSettings(false);
-  };
-  const keyEvent = (event: KeyboardEvent) => {
-    if (modal() && event.key == "Escape") setOpenSettings(false);
-  };
   const themeEvent = () => {
     if (!theme().system) return;
     const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
···
   };
 
   onMount(() => {
-    window.addEventListener("keydown", keyEvent);
-    window.addEventListener("click", clickEvent);
     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);
   });
 
-  createEffect(() => {
-    if (openSettings()) document.body.style.overflow = "hidden";
-    else document.body.style.overflow = "auto";
-  });
-
   const updateTheme = (newTheme: { color: string; system: boolean }) => {
     setTheme(newTheme);
     document.documentElement.classList.toggle("dark", newTheme.color === "dark");
···
 
   return (
     <>
-      <Show when={openSettings()}>
-        <dialog
-          ref={setModal}
-          class="fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent"
-        >
-          <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900 backdrop-blur-xs absolute top-12 rounded-md border-neutral-300 bg-zinc-200/70 p-4 text-slate-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-slate-100">
-            <h3 class="border-b-0.5 mb-2 border-neutral-500 pb-2 font-bold">Settings</h3>
-            <h4 class="mb-1 font-semibold">Theme</h4>
-            <div class="w-xs flex gap-2">
-              <button
-                classList={{
-                  "basis-1/3 py-1 rounded-lg": true,
-                  "bg-transparent hover:bg-neutral-200 dark:hover:bg-dark-200": !theme().system,
-                  "bg-neutral-300 dark:bg-neutral-600 font-semibold": theme().system,
+      <Modal open={openSettings()} onClose={() => setOpenSettings(false)}>
+        <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900 backdrop-blur-xs left-50% absolute top-12 -translate-x-1/2 rounded-md border-neutral-300 bg-zinc-200/70 p-4 text-slate-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-slate-100">
+          <h3 class="border-b-0.5 mb-2 border-neutral-500 pb-2 font-bold">Settings</h3>
+          <h4 class="mb-1 font-semibold">Theme</h4>
+          <div class="w-xs flex gap-2">
+            <button
+              classList={{
+                "basis-1/3 py-1 rounded-lg": true,
+                "bg-transparent hover:bg-neutral-200 dark:hover:bg-dark-200": !theme().system,
+                "bg-neutral-300 dark:bg-neutral-600 font-semibold": theme().system,
+              }}
+              onclick={() =>
+                updateTheme({
+                  color:
+                    window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+                  system: true,
+                })
+              }
+            >
+              System
+            </button>
+            <button
+              classList={{
+                "basis-1/3 py-1 rounded-lg": true,
+                "bg-transparent hover:bg-neutral-200 dark:hover:bg-dark-200":
+                  theme().color !== "light" || theme().system,
+                "bg-neutral-300 font-semibold": theme().color === "light" && !theme().system,
+              }}
+              onclick={() => updateTheme({ color: "light", system: false })}
+            >
+              Light
+            </button>
+            <button
+              classList={{
+                "basis-1/3 py-1 rounded-lg": true,
+                "bg-transparent hover:bg-neutral-200 dark:hover:bg-dark-200":
+                  theme().color !== "dark" || theme().system,
+                "bg-neutral-600 font-semibold": theme().color === "dark" && !theme().system,
+              }}
+              onclick={() => updateTheme({ color: "dark", system: false })}
+            >
+              Dark
+            </button>
+          </div>
+          <div class="border-t-0.5 mt-4 flex flex-col gap-1 border-neutral-500 pt-2">
+            <div class="flex items-center gap-1">
+              <input
+                id="backlinks"
+                class="size-4"
+                type="checkbox"
+                checked={localStorage.backlinks === "true"}
+                onChange={(e) => {
+                  localStorage.backlinks = e.currentTarget.checked;
+                  setBacklinksEnabled(e.currentTarget.checked);
                 }}
-                onclick={() =>
-                  updateTheme({
-                    color:
-                      window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
-                    system: true,
-                  })
-                }
-              >
-                System
-              </button>
-              <button
+              />
+              <label for="backlinks" class="select-none font-semibold">
+                Backlinks
+              </label>
+              <div class="i-lucide-send-to-back" />
+            </div>
+            <div class="flex flex-col gap-1">
+              <label
+                for="constellation"
                 classList={{
-                  "basis-1/3 py-1 rounded-lg": true,
-                  "bg-transparent hover:bg-neutral-200 dark:hover:bg-dark-200":
-                    theme().color !== "light" || theme().system,
-                  "bg-neutral-300 font-semibold": theme().color === "light" && !theme().system,
+                  "select-none": true,
+                  "text-gray-500": !backlinksEnabled(),
                 }}
-                onclick={() => updateTheme({ color: "light", system: false })}
               >
-                Light
-              </button>
-              <button
-                classList={{
-                  "basis-1/3 py-1 rounded-lg": true,
-                  "bg-transparent hover:bg-neutral-200 dark:hover:bg-dark-200":
-                    theme().color !== "dark" || theme().system,
-                  "bg-neutral-600 font-semibold": theme().color === "dark" && !theme().system,
+                Constellation host
+              </label>
+              <TextInput
+                id="constellation"
+                value={localStorage.constellationHost || "https://constellation.microcosm.blue"}
+                disabled={!backlinksEnabled()}
+                class="disabled:bg-gray-50 disabled:text-gray-500 dark:disabled:bg-gray-800/20"
+                onInput={(e) => {
+                  e.currentTarget.value.length ?
+                    (localStorage.constellationHost = e.currentTarget.value)
+                  : localStorage.removeItem("constellationHost");
                 }}
-                onclick={() => updateTheme({ color: "dark", system: false })}
-              >
-                Dark
-              </button>
+              />
             </div>
-            <div class="border-t-0.5 mt-4 flex flex-col gap-1 border-neutral-500 pt-2">
+            <div class="border-t-0.5 mt-2 flex flex-col gap-1 border-neutral-500 pt-2">
+              <div class="flex flex-col gap-1">
+                <label for="plcDirectory" class="select-none font-semibold">
+                  PLC Directory
+                </label>
+                <TextInput
+                  id="plcDirectory"
+                  value={localStorage.plcDirectory || "https://plc.directory"}
+                  onInput={(e) => {
+                    e.currentTarget.value.length ?
+                      (localStorage.plcDirectory = e.currentTarget.value)
+                    : localStorage.removeItem("plcDirectory");
+                  }}
+                />
+              </div>
+            </div>
+            <div class="border-t-0.5 mt-2 flex flex-col gap-1 border-neutral-500 pt-2">
               <div class="flex items-center gap-1">
                 <input
-                  id="backlinks"
+                  id="showHandle"
                   class="size-4"
                   type="checkbox"
-                  checked={localStorage.backlinks === "true"}
+                  checked={localStorage.showHandle === "true"}
                   onChange={(e) => {
-                    localStorage.backlinks = e.currentTarget.checked;
-                    setBacklinksEnabled(e.currentTarget.checked);
+                    localStorage.showHandle = e.currentTarget.checked;
+                    setShowHandle(e.currentTarget.checked);
                   }}
                 />
-                <label for="backlinks" class="select-none font-semibold">
-                  Backlinks
+                <label for="showHandle" class="select-none">
+                  Default to showing handle
                 </label>
-                <div class="i-lucide-send-to-back" />
               </div>
-              <div class="flex flex-col gap-1">
-                <label
-                  for="constellation"
-                  classList={{
-                    "select-none": true,
-                    "text-gray-500": !backlinksEnabled(),
-                  }}
-                >
-                  Constellation host
-                </label>
-                <TextInput
-                  id="constellation"
-                  value={localStorage.constellationHost || "https://constellation.microcosm.blue"}
-                  disabled={!backlinksEnabled()}
-                  class="disabled:bg-gray-50 disabled:text-gray-500 dark:disabled:bg-gray-800/20"
-                  onInput={(e) => {
-                    e.currentTarget.value.length ?
-                      (localStorage.constellationHost = e.currentTarget.value)
-                    : localStorage.removeItem("constellationHost");
+              <div class="flex items-center gap-1">
+                <input
+                  id="disableMedia"
+                  class="size-4"
+                  type="checkbox"
+                  checked={localStorage.hideMedia === "true"}
+                  onChange={(e) => {
+                    localStorage.hideMedia = e.currentTarget.checked;
+                    setHideMedia(e.currentTarget.checked);
                   }}
                 />
-              </div>
-              <div class="border-t-0.5 mt-2 flex flex-col gap-1 border-neutral-500 pt-2">
-                <div class="flex flex-col gap-1">
-                  <label for="plcDirectory" class="select-none font-semibold">
-                    PLC Directory
-                  </label>
-                  <TextInput
-                    id="plcDirectory"
-                    value={localStorage.plcDirectory || "https://plc.directory"}
-                    onInput={(e) => {
-                      e.currentTarget.value.length ?
-                        (localStorage.plcDirectory = e.currentTarget.value)
-                      : localStorage.removeItem("plcDirectory");
-                    }}
-                  />
-                </div>
+                <label for="disableMedia" class="select-none">
+                  Hide media embeds
+                </label>
               </div>
-              <div class="border-t-0.5 mt-2 flex flex-col gap-1 border-neutral-500 pt-2">
+              <Show when={localStorage.kawaii}>
                 <div class="flex items-center gap-1">
                   <input
-                    id="showHandle"
+                    id="enableKawaii"
                     class="size-4"
                     type="checkbox"
-                    checked={localStorage.showHandle === "true"}
+                    checked={localStorage.kawaii === "true"}
                     onChange={(e) => {
-                      localStorage.showHandle = e.currentTarget.checked;
-                      setShowHandle(e.currentTarget.checked);
+                      localStorage.kawaii = e.currentTarget.checked;
+                      setKawaii(e.currentTarget.checked);
                     }}
                   />
-                  <label for="showHandle" class="select-none">
-                    Default to showing handle
+                  <label for="enableKawaii" class="select-none">
+                    Kawaii mode
                   </label>
                 </div>
-                <div class="flex items-center gap-1">
-                  <input
-                    id="disableMedia"
-                    class="size-4"
-                    type="checkbox"
-                    checked={localStorage.hideMedia === "true"}
-                    onChange={(e) => {
-                      localStorage.hideMedia = e.currentTarget.checked;
-                      setHideMedia(e.currentTarget.checked);
-                    }}
-                  />
-                  <label for="disableMedia" class="select-none">
-                    Hide media embeds
-                  </label>
-                </div>
-                <Show when={localStorage.kawaii}>
-                  <div class="flex items-center gap-1">
-                    <input
-                      id="enableKawaii"
-                      class="size-4"
-                      type="checkbox"
-                      checked={localStorage.kawaii === "true"}
-                      onChange={(e) => {
-                        localStorage.kawaii = e.currentTarget.checked;
-                        setKawaii(e.currentTarget.checked);
-                      }}
-                    />
-                    <label for="enableKawaii" class="select-none">
-                      Kawaii mode
-                    </label>
-                  </div>
-                </Show>
-              </div>
+              </Show>
             </div>
           </div>
-        </dialog>
-      </Show>
+        </div>
+      </Modal>
       <button onclick={() => setOpenSettings(true)}>
         <Tooltip text="Settings" children={<div class="i-lucide-settings text-xl" />} />
       </button>