diff --git a/web/src/components/BBSPanel.tsx b/web/src/components/BBSPanel.tsx
new file mode 100644
index 0000000..198e720
--- /dev/null
+++ b/web/src/components/BBSPanel.tsx
@@ -0,0 +1,52 @@
+import { Link } from "react-router-dom";
+
+const cardStyle =
+  "bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700";
+
+interface BBSPanelProps {
+  hasBBS: boolean;
+  userHandle: string;
+  onDelete: () => void;
+}
+
+export default function BBSPanel({ hasBBS, userHandle, onDelete }: BBSPanelProps) {
+  if (!hasBBS) {
+    return (
+      <>
+        <p className="text-neutral-500 mb-4">
+          You haven't set up a BBS yet.
+        </p>
+        <Link
+          to="/account/create"
+          className="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded inline-block"
+        >
+          create a bbs
+        </Link>
+      </>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-3 max-w-md">
+      <Link to={`/bbs/${userHandle}`} className={cardStyle}>
+        <div className="text-neutral-200 mb-1">Browse</div>
+        <div className="text-xs text-neutral-500">View your BBS.</div>
+      </Link>
+      <Link to="/account/edit" className={cardStyle}>
+        <div className="text-neutral-200 mb-1">Edit</div>
+        <div className="text-xs text-neutral-500">Name, boards, intro.</div>
+      </Link>
+      <Link to="/account/moderate" className={cardStyle}>
+        <div className="text-neutral-200 mb-1">Moderate</div>
+        <div className="text-xs text-neutral-500">Bans and hidden posts.</div>
+      </Link>
+      <button
+        onClick={onDelete}
+        className="text-left bg-neutral-900 border border-neutral-800 rounded px-4 py-3 hover:border-red-900"
+      >
+        <div className="text-neutral-500 mb-1">Delete</div>
+        <div className="text-xs text-neutral-600">Remove your BBS.</div>
+      </button>
+    </div>
+  );
+}
diff --git a/web/src/components/BoardRowEditor.tsx b/web/src/components/BoardRowEditor.tsx
index bc20303..d89456a 100644
--- a/web/src/components/BoardRowEditor.tsx
+++ b/web/src/components/BoardRowEditor.tsx
@@ -16,11 +16,11 @@ export default function BoardRowEditor({
   boards,
   onChange,
 }: BoardRowEditorProps) {
-  function updateField(index: number, field: keyof BoardRow, value: string) {
-    const next = boards.map((b, i) =>
-      i === index ? { ...b, [field]: value } : b,
+  function updateBoard(index: number, field: keyof BoardRow, value: string) {
+    const updated = boards.map((board, i) =>
+      i === index ? { ...board, [field]: value } : board,
     );
-    onChange(next);
+    onChange(updated);
   }
 
   return (
@@ -34,20 +34,20 @@ export default function BoardRowEditor({
           <div key={i} className="flex gap-2">
             <Input
               value={board.slug}
-              onChange={(e) => updateField(i, "slug", e.target.value)}
+              onChange={(e) => updateBoard(i, "slug", e.target.value)}
               placeholder="slug"
               className="w-1/4!"
             />
             <Input
               value={board.name}
-              onChange={(e) => updateField(i, "name", e.target.value)}
+              onChange={(e) => updateBoard(i, "name", e.target.value)}
               placeholder="Name"
               maxLength={limits.BOARD_NAME}
               className="w-1/3!"
             />
             <Input
               value={board.desc}
-              onChange={(e) => updateField(i, "desc", e.target.value)}
+              onChange={(e) => updateBoard(i, "desc", e.target.value)}
               placeholder="Description"
               maxLength={limits.BOARD_DESCRIPTION}
               className="flex-1!"
diff --git a/web/src/components/ComposeForm.tsx b/web/src/components/ComposeForm.tsx
index 6e82d6b..468c12e 100644
--- a/web/src/components/ComposeForm.tsx
+++ b/web/src/components/ComposeForm.tsx
@@ -1,5 +1,6 @@
 import type { SyntheticEvent } from "react";
 import { Input, Textarea, Button } from "./Form";
+import FileChips from "./FileChips";
 import { MAX_ATTACHMENTS } from "../lib/limits";
 
 interface ComposeFormProps {
@@ -35,11 +36,11 @@ export default function ComposeForm({
   onFilesChange,
   quote,
   onClearQuote,
+  bodyMaxLength,
+  titleMaxLength,
   submitLabel = "post",
   posting = false,
   className = "",
-  bodyMaxLength,
-  titleMaxLength,
 }: ComposeFormProps) {
   function addFiles(fileList: FileList | null) {
     if (!fileList) return;
@@ -47,7 +48,7 @@ export default function ComposeForm({
     onFilesChange(combined);
   }
 
-  const atLimit = files.length >= MAX_ATTACHMENTS;
+  const attachmentsAtLimit = files.length >= MAX_ATTACHMENTS;
 
   function removeFile(index: number) {
     onFilesChange(files.filter((_, i) => i !== index));
@@ -96,27 +97,14 @@ export default function ComposeForm({
       />
 
       {files.length > 0 && (
-        <div className="flex flex-wrap gap-2 text-xs text-neutral-500">
-          {files.map((f, i) => (
-            <span key={i} className="flex items-center gap-1 bg-neutral-800 px-2 py-1 rounded">
-              {f.name}
-              <button
-                type="button"
-                onClick={() => removeFile(i)}
-                className="text-neutral-500 hover:text-red-400"
-              >
-                ✕
-              </button>
-            </span>
-          ))}
-        </div>
+        <FileChips files={files} onRemove={removeFile} />
       )}
 
       <div className="flex items-center gap-3">
         <Button type="submit" disabled={posting}>
           {posting ? "posting..." : submitLabel}
         </Button>
-        {!atLimit && (
+        {!attachmentsAtLimit && (
         <label className="text-neutral-200 cursor-pointer bg-neutral-800 hover:bg-neutral-700 px-4 py-2 rounded inline-block">
           attach
           <input
diff --git a/web/src/components/FileChips.tsx b/web/src/components/FileChips.tsx
new file mode 100644
index 0000000..7c364ef
--- /dev/null
+++ b/web/src/components/FileChips.tsx
@@ -0,0 +1,26 @@
+interface FileChipsProps {
+  files: File[];
+  onRemove: (index: number) => void;
+}
+
+export default function FileChips({ files, onRemove }: FileChipsProps) {
+  return (
+    <div className="flex flex-wrap gap-2 text-xs text-neutral-500">
+      {files.map((file, i) => (
+        <span
+          key={i}
+          className="flex items-center gap-1 bg-neutral-800 px-2 py-1 rounded"
+        >
+          {file.name}
+          <button
+            type="button"
+            onClick={() => onRemove(i)}
+            className="text-neutral-500 hover:text-red-400"
+          >
+            ✕
+          </button>
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
new file mode 100644
index 0000000..462b925
--- /dev/null
+++ b/web/src/components/Footer.tsx
@@ -0,0 +1,23 @@
+const linkStyle = "text-neutral-500 hover:text-neutral-300";
+
+const links = [
+  { href: "https://github.com/alyraffauf/atbbs", label: "github" },
+  { href: "https://ko-fi.com/alyraffauf", label: "ko-fi" },
+];
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-neutral-800 mt-auto">
+      <div className="max-w-2xl mx-auto px-4 py-4 flex items-center justify-between text-xs text-neutral-500">
+        <span>
+          made by <a href="https://aly.codes" className={linkStyle}>aly.codes</a>
+        </span>
+        <div className="flex items-center gap-4">
+          {links.map(({ href, label }) => (
+            <a key={label} href={href} className={linkStyle}>{label}</a>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/web/src/components/HandleInput.tsx b/web/src/components/HandleInput.tsx
index a619e76..b4c1455 100644
--- a/web/src/components/HandleInput.tsx
+++ b/web/src/components/HandleInput.tsx
@@ -12,31 +12,27 @@ const PLACEHOLDERS = [
   "handle.your-domain.com",
 ];
 
-// Props for HandleInput. Extends standard <input> props so callers can
-// pass things like `required`, `disabled`, `id`, etc.
 interface HandleInputProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "onChange" | "value"
 > {
   value: string;
-  onChange: (v: string) => void;
+  onChange: (value: string) => void;
 }
 
 export default function HandleInput({
   value,
   onChange,
   className = "",
-  ...rest // any extra <input> attributes (required, disabled, etc.)
+  ...rest
 }: HandleInputProps) {
-  // Cycle through placeholder examples every 3 seconds.
-  const [index, setIndex] = useState(0);
+  const [placeholderIndex, setPlaceholderIndex] = useState(0);
 
   useEffect(() => {
     const timer = setInterval(() => {
-      setIndex((i) => (i + 1) % PLACEHOLDERS.length);
+      setPlaceholderIndex((i) => (i + 1) % PLACEHOLDERS.length);
     }, 3000);
 
-    // Stop the timer when this component is removed from the page.
     return () => clearInterval(timer);
   }, []);
 
@@ -45,7 +41,7 @@ export default function HandleInput({
       type="text"
       value={value}
       onChange={(e) => onChange(e.target.value)}
-      placeholder={PLACEHOLDERS[index]}
+      placeholder={PLACEHOLDERS[placeholderIndex]}
       className={`${inputStyles} ${className}`}
       {...rest}
     />
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
new file mode 100644
index 0000000..56665af
--- /dev/null
+++ b/web/src/components/Header.tsx
@@ -0,0 +1,42 @@
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../lib/auth";
+import Logo from "./Logo";
+import HeaderBreadcrumbs from "./HeaderBreadcrumbs";
+import MobileMenu from "./MobileMenu";
+
+const linkStyle = "text-neutral-500 hover:text-neutral-300";
+
+export default function Header() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  async function onLogout() {
+    await logout();
+    navigate("/");
+  }
+
+  return (
+    <header className="border-b border-neutral-800">
+      <div className="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between">
+        <div className="hidden md:flex items-center gap-2 text-neutral-500 min-w-0 whitespace-nowrap">
+          <Logo />
+          <HeaderBreadcrumbs />
+        </div>
+        <div className="md:hidden">
+          <Logo />
+        </div>
+        <div className="hidden md:flex items-center gap-3 shrink-0 ml-4">
+          {user ? (
+            <>
+              <Link to="/account" className={linkStyle}>{user.handle}</Link>
+              <button type="button" onClick={onLogout} className={linkStyle}>log out</button>
+            </>
+          ) : (
+            <Link to="/login" className={linkStyle}>log in</Link>
+          )}
+        </div>
+        <MobileMenu user={user} onLogout={onLogout} />
+      </div>
+    </header>
+  );
+}
diff --git a/web/src/components/HeaderBreadcrumbs.tsx b/web/src/components/HeaderBreadcrumbs.tsx
new file mode 100644
index 0000000..24f9094
--- /dev/null
+++ b/web/src/components/HeaderBreadcrumbs.tsx
@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+import { useBreadcrumbState } from "../hooks/useBreadcrumb";
+
+export default function HeaderBreadcrumbs() {
+  const { crumbs } = useBreadcrumbState();
+  if (!crumbs.length) return null;
+
+  return (
+    <>
+      {crumbs.flatMap((crumb, index) => {
+        const isLast = index === crumbs.length - 1;
+        const separator = <span key={`sep-${index}`}>/</span>;
+        const element =
+          crumb.to && !isLast ? (
+            <Link
+              key={`crumb-${index}`}
+              to={crumb.to}
+              className="text-neutral-500 hover:text-neutral-300"
+            >
+              {crumb.label}
+            </Link>
+          ) : (
+            <span
+              key={`crumb-${index}`}
+              className="text-neutral-400 truncate"
+            >
+              {crumb.label}
+            </span>
+          );
+        return [separator, element];
+      })}
+    </>
+  );
+}
diff --git a/web/src/components/InboxList.tsx b/web/src/components/InboxList.tsx
new file mode 100644
index 0000000..15cf7df
--- /dev/null
+++ b/web/src/components/InboxList.tsx
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { parseAtUri } from "../lib/util";
+import PostBody from "./PostBody";
+import PostMeta from "./PostMeta";
+import type { InboxItem } from "../router/loaders";
+
+const PAGE_SIZE = 10;
+
+interface InboxListProps {
+  items: InboxItem[];
+  userHandle: string;
+}
+
+export default function InboxList({ items, userHandle }: InboxListProps) {
+  const [shown, setShown] = useState(PAGE_SIZE);
+
+  if (items.length === 0)
+    return <p className="text-neutral-500">No messages yet.</p>;
+
+  return (
+    <div>
+      {items.slice(0, shown).map((item) => {
+        const { did: threadDid, rkey: threadRkey } = parseAtUri(item.threadUri);
+        const { rkey: replyRkey } = parseAtUri(item.replyUri);
+        const url = `/bbs/${userHandle}/thread/${threadDid}/${threadRkey}#reply-${replyRkey}`;
+        return (
+          <Link
+            key={item.replyUri}
+            to={url}
+            className="block border border-neutral-800/50 rounded p-4 mb-2 hover:bg-neutral-800"
+          >
+            <PostMeta handle={item.handle} createdAt={item.createdAt} />
+            <p className="text-xs text-neutral-500 mb-1">
+              {item.type === "quote"
+                ? "quoted your reply"
+                : `on: ${item.threadTitle}`}
+            </p>
+            <div className="line-clamp-2">
+              <PostBody>{item.body}</PostBody>
+            </div>
+          </Link>
+        );
+      })}
+      {shown < items.length && (
+        <div className="mt-4 text-center">
+          <button
+            onClick={() => setShown((prev) => prev + PAGE_SIZE)}
+            className="text-neutral-500 hover:text-neutral-300"
+          >
+            show more
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
index 54896a5..b1301c8 100644
--- a/web/src/components/Layout.tsx
+++ b/web/src/components/Layout.tsx
@@ -1,24 +1,10 @@
-import {
-  Link,
-  Outlet,
-  useNavigate,
-  useNavigation,
-} from "react-router-dom";
-import type { ReactNode } from "react";
-import { useState } from "react";
-import { useAuth } from "../lib/auth";
-import { useBreadcrumbState, type Crumb } from "../hooks/useBreadcrumb";
+import { Outlet, useNavigation } from "react-router-dom";
+import Header from "./Header";
+import MobileBackButton from "./MobileBackButton";
+import Footer from "./Footer";
 
 export default function Layout() {
-  const { user, logout } = useAuth();
-  const navigation = useNavigation();
-  const navigate = useNavigate();
-  const isLoading = navigation.state === "loading";
-
-  async function onLogout() {
-    await logout();
-    navigate("/");
-  }
+  const isLoading = useNavigation().state === "loading";
 
   return (
     <div className="flex flex-col h-dvh">
@@ -28,197 +14,12 @@ export default function Layout() {
           style={{ animation: "atbbs-progress 1.5s ease-out infinite" }}
         />
       )}
-      <header className="border-b border-neutral-800">
-        <div className="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between">
-          {/* Desktop: logo + breadcrumbs inline */}
-          <div className="hidden md:flex items-center gap-2 text-neutral-500 min-w-0 whitespace-nowrap">
-            <Logo />
-            <HeaderBreadcrumbs />
-          </div>
-          {/* Mobile/tablet: logo only */}
-          <div className="md:hidden">
-            <Logo />
-          </div>
-          {/* Desktop: inline links */}
-          <div className="hidden md:flex items-center gap-3 shrink-0 ml-4">
-            {user ? (
-              <>
-                <Link
-                  to="/account"
-                  className="text-neutral-500 hover:text-neutral-300"
-                >
-                  {user.handle}
-                </Link>
-                <button
-                  type="button"
-                  onClick={onLogout}
-                  className="text-neutral-500 hover:text-neutral-300"
-                >
-                  log out
-                </button>
-              </>
-            ) : (
-              <Link
-                to="/login"
-                className="text-neutral-500 hover:text-neutral-300"
-              >
-                log in
-              </Link>
-            )}
-          </div>
-          {/* Mobile: hamburger menu */}
-          <MobileMenu user={user} onLogout={onLogout} />
-        </div>
-      </header>
+      <Header />
       <main className="max-w-2xl mx-auto px-4 py-8 flex-1 w-full">
-        <Navigation />
+        <MobileBackButton />
         <Outlet />
       </main>
-      <footer className="border-t border-neutral-800 mt-auto">
-        <div className="max-w-2xl mx-auto px-4 py-4 flex items-center justify-between text-xs text-neutral-500">
-          <span>
-            made by{" "}
-            <a
-              href="https://aly.codes"
-              className="text-neutral-500 hover:text-neutral-300"
-            >
-              aly.codes
-            </a>
-          </span>
-          <div className="flex items-center gap-4">
-            <a
-              href="https://github.com/alyraffauf/atbbs"
-              className="text-neutral-500 hover:text-neutral-300"
-            >
-              github
-            </a>
-            <a
-              href="https://ko-fi.com/alyraffauf"
-              className="text-neutral-500 hover:text-neutral-300"
-            >
-              ko-fi
-            </a>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
-
-function MobileMenu({
-  user,
-  onLogout,
-}: {
-  user: ReturnType<typeof useAuth>["user"];
-  onLogout: () => void;
-}) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="md:hidden relative">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="text-neutral-400 hover:text-neutral-300 text-lg px-1"
-        aria-label="Menu"
-      >
-        {open ? "✕" : "☰"}
-      </button>
-      {open && (
-        <div className="z-50 fixed inset-0 top-[49px] bg-neutral-950/95 flex flex-col items-center pt-12 gap-6 text-lg sm:absolute sm:inset-auto sm:right-0 sm:top-full sm:mt-2 sm:bg-neutral-900 sm:border sm:border-neutral-800 sm:rounded sm:py-2 sm:px-4 sm:gap-2 sm:text-sm sm:pt-0 sm:min-w-40">
-          {user ? (
-            <>
-              <Link
-                to="/account"
-                onClick={() => setOpen(false)}
-                className="text-neutral-300 hover:text-neutral-200"
-              >
-                {user.handle}
-              </Link>
-              <button
-                type="button"
-                onClick={() => {
-                  setOpen(false);
-                  onLogout();
-                }}
-                className="text-neutral-500 hover:text-neutral-300"
-              >
-                log out
-              </button>
-            </>
-          ) : (
-            <Link
-              to="/login"
-              onClick={() => setOpen(false)}
-              className="text-neutral-300 hover:text-neutral-200"
-            >
-              log in
-            </Link>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function Logo() {
-  return (
-    <Link to="/" className="shrink-0 hover:opacity-80">
-      <picture>
-        <source srcSet="/hero-dark.svg" media="(prefers-color-scheme: dark)" />
-        <img
-          src="/hero.svg"
-          alt="@bbs"
-          style={{ height: "1.25rem", imageRendering: "pixelated" }}
-          className="inline-block"
-        />
-      </picture>
-    </Link>
-  );
-}
-
-function Navigation() {
-  const { crumbs } = useBreadcrumbState();
-  if (crumbs.length <= 1) return null;
-  const parent = crumbs[crumbs.length - 2];
-  if (!parent?.to) return null;
-
-  return (
-    <Link
-      to={parent.to}
-      className="md:hidden inline-block mb-6 px-3 py-1.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded text-xs"
-    >
-      ← {parent.label}
-    </Link>
-  );
-}
-
-function HeaderBreadcrumbs() {
-  const { crumbs } = useBreadcrumbState();
-  if (!crumbs.length) return null;
-
-  const out: ReactNode[] = [];
-  crumbs.forEach((c: Crumb, i: number) => {
-    out.push(<span key={`s${i}`}>/</span>);
-    const last = i === crumbs.length - 1;
-    if (c.to && !last) {
-      out.push(
-        <Link
-          key={`c${i}`}
-          to={c.to}
-          className="text-neutral-500 hover:text-neutral-300"
-        >
-          {c.label}
-        </Link>,
-      );
-    } else {
-      out.push(
-        <span key={`c${i}`} className="text-neutral-400 truncate">
-          {c.label}
-        </span>,
-      );
-    }
-  });
-
-  return <>{out}</>;
-}
diff --git a/web/src/components/Logo.tsx b/web/src/components/Logo.tsx
new file mode 100644
index 0000000..c016cf8
--- /dev/null
+++ b/web/src/components/Logo.tsx
@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+
+export default function Logo() {
+  return (
+    <Link to="/" className="shrink-0 hover:opacity-80">
+      <picture>
+        <source srcSet="/hero-dark.svg" media="(prefers-color-scheme: dark)" />
+        <img
+          src="/hero.svg"
+          alt="@bbs"
+          style={{ height: "1.25rem", imageRendering: "pixelated" }}
+          className="inline-block"
+        />
+      </picture>
+    </Link>
+  );
+}
diff --git a/web/src/components/MobileBackButton.tsx b/web/src/components/MobileBackButton.tsx
new file mode 100644
index 0000000..4239322
--- /dev/null
+++ b/web/src/components/MobileBackButton.tsx
@@ -0,0 +1,18 @@
+import { Link } from "react-router-dom";
+import { useBreadcrumbState } from "../hooks/useBreadcrumb";
+
+export default function MobileBackButton() {
+  const { crumbs } = useBreadcrumbState();
+  if (crumbs.length <= 1) return null;
+  const parent = crumbs[crumbs.length - 2];
+  if (!parent?.to) return null;
+
+  return (
+    <Link
+      to={parent.to}
+      className="md:hidden inline-block mb-6 px-3 py-1.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded text-xs"
+    >
+      ← {parent.label}
+    </Link>
+  );
+}
diff --git a/web/src/components/MobileMenu.tsx b/web/src/components/MobileMenu.tsx
new file mode 100644
index 0000000..8a525c5
--- /dev/null
+++ b/web/src/components/MobileMenu.tsx
@@ -0,0 +1,56 @@
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import type { useAuth } from "../lib/auth";
+
+interface MobileMenuProps {
+  user: ReturnType<typeof useAuth>["user"];
+  onLogout: () => void;
+}
+
+// Fullscreen on phone, dropdown on tablet
+const panelStyle = [
+  "z-50 fixed inset-0 top-12.25 bg-neutral-950/95",
+  "flex flex-col items-center pt-12 gap-6 text-lg",
+  "sm:absolute sm:inset-auto sm:right-0 sm:top-full sm:mt-2",
+  "sm:bg-neutral-900 sm:border sm:border-neutral-800 sm:rounded",
+  "sm:py-2 sm:px-4 sm:gap-2 sm:text-sm sm:pt-0 sm:min-w-40",
+].join(" ");
+
+export default function MobileMenu({ user, onLogout }: MobileMenuProps) {
+  const [open, setOpen] = useState(false);
+
+  function close() {
+    setOpen(false);
+  }
+
+  return (
+    <div className="md:hidden relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="text-neutral-400 hover:text-neutral-300 text-lg px-1"
+        aria-label="Menu"
+      >
+        {open ? "✕" : "☰"}
+      </button>
+      {open && (
+        <div className={panelStyle}>
+          {user ? (
+            <>
+              <Link to="/account" onClick={close} className="text-neutral-300 hover:text-neutral-200">
+                {user.handle}
+              </Link>
+              <button type="button" onClick={() => { close(); onLogout(); }} className="text-neutral-500 hover:text-neutral-300">
+                log out
+              </button>
+            </>
+          ) : (
+            <Link to="/login" onClick={close} className="text-neutral-300 hover:text-neutral-200">
+              log in
+            </Link>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/components/PostActions.tsx b/web/src/components/PostActions.tsx
new file mode 100644
index 0000000..a869225
--- /dev/null
+++ b/web/src/components/PostActions.tsx
@@ -0,0 +1,38 @@
+const actionStyle = "text-xs text-neutral-500 hover:text-red-400";
+
+interface PostActionsProps {
+  isAuthor: boolean;
+  isSysop: boolean;
+  onDelete?: () => void;
+  onBan?: () => void;
+  onHide?: () => void;
+  onQuote?: () => void;
+}
+
+export default function PostActions({
+  isAuthor,
+  isSysop,
+  onDelete,
+  onBan,
+  onHide,
+  onQuote,
+}: PostActionsProps) {
+  return (
+    <span className="reply-actions flex items-center gap-3">
+      {onQuote && (
+        <button onClick={onQuote} className="text-xs text-neutral-500 hover:text-neutral-300">
+          quote
+        </button>
+      )}
+      {isAuthor && onDelete && (
+        <button onClick={onDelete} className={actionStyle}>delete</button>
+      )}
+      {isSysop && !isAuthor && onBan && (
+        <button onClick={onBan} className={actionStyle}>ban</button>
+      )}
+      {isSysop && onHide && (
+        <button onClick={onHide} className={actionStyle}>hide</button>
+      )}
+    </span>
+  );
+}
diff --git a/web/src/components/PostMeta.tsx b/web/src/components/PostMeta.tsx
new file mode 100644
index 0000000..864cb01
--- /dev/null
+++ b/web/src/components/PostMeta.tsx
@@ -0,0 +1,21 @@
+import { formatFullDate, relativeDate } from "../lib/util";
+
+interface PostMetaProps {
+  handle: string;
+  createdAt: string;
+}
+
+export default function PostMeta({ handle, createdAt }: PostMetaProps) {
+  return (
+    <div className="flex items-baseline gap-2">
+      <span className="text-neutral-200">{handle}</span>
+      <span className="text-neutral-600">·</span>
+      <time
+        className="text-xs text-neutral-500"
+        title={formatFullDate(createdAt)}
+      >
+        {relativeDate(createdAt)}
+      </time>
+    </div>
+  );
+}
diff --git a/web/src/components/ReplyCard.tsx b/web/src/components/ReplyCard.tsx
index 8ff9857..f77c439 100644
--- a/web/src/components/ReplyCard.tsx
+++ b/web/src/components/ReplyCard.tsx
@@ -1,6 +1,7 @@
-import { formatFullDate, parseAtUri, relativeDate } from "../lib/util";
 import AttachmentLink from "./AttachmentLink";
-import PostBody from "./PostBody.tsx";
+import PostActions from "./PostActions";
+import PostBody from "./PostBody";
+import PostMeta from "./PostMeta";
 
 export interface Reply {
   uri: string;
@@ -46,50 +47,15 @@ export default function ReplyCard({
       className="reply-card border border-neutral-800/50 rounded p-4"
     >
       <div className="flex items-baseline justify-between mb-2">
-        <div className="flex items-baseline gap-2">
-          <span className="text-neutral-300">{reply.handle}</span>
-          <span className="text-neutral-600">·</span>
-          <time
-            className="text-xs text-neutral-500"
-            title={formatFullDate(reply.createdAt)}
-          >
-            {relativeDate(reply.createdAt)}
-          </time>
-        </div>
-        <span className="reply-actions flex items-center gap-3">
-          {userDid && (
-            <button
-              onClick={onQuote}
-              className="text-xs text-neutral-500 hover:text-neutral-300"
-            >
-              quote
-            </button>
-          )}
-          {isAuthor && (
-            <button
-              onClick={onDelete}
-              className="text-xs text-neutral-500 hover:text-red-400"
-            >
-              delete
-            </button>
-          )}
-          {isSysop && !isAuthor && (
-            <button
-              onClick={onBan}
-              className="text-xs text-neutral-500 hover:text-red-400"
-            >
-              ban
-            </button>
-          )}
-          {isSysop && (
-            <button
-              onClick={onHide}
-              className="text-xs text-neutral-500 hover:text-red-400"
-            >
-              hide
-            </button>
-          )}
-        </span>
+        <PostMeta handle={reply.handle} createdAt={reply.createdAt} />
+        <PostActions
+          isAuthor={isAuthor}
+          isSysop={isSysop}
+          onQuote={userDid ? onQuote : undefined}
+          onDelete={onDelete}
+          onBan={onBan}
+          onHide={onHide}
+        />
       </div>
 
       {quoted && (
@@ -108,9 +74,9 @@ export default function ReplyCard({
 
       <PostBody>{reply.body}</PostBody>
 
-      {reply.attachments.map((attachment, i) => (
+      {reply.attachments.map((attachment, index) => (
         <AttachmentLink
-          key={i}
+          key={index}
           pds={reply.pds}
           did={reply.did}
           cid={attachment.file.ref.$link}
diff --git a/web/src/components/ThreadCard.tsx b/web/src/components/ThreadCard.tsx
new file mode 100644
index 0000000..bfd95ae
--- /dev/null
+++ b/web/src/components/ThreadCard.tsx
@@ -0,0 +1,58 @@
+import type { ThreadObj } from "../router/loaders";
+import AttachmentLink from "./AttachmentLink";
+import PostActions from "./PostActions";
+import PostBody from "./PostBody";
+import PostMeta from "./PostMeta";
+
+interface ThreadHeaderProps {
+  thread: ThreadObj;
+  userDid?: string;
+  sysopDid: string;
+  onDelete: () => void;
+  onBan: () => void;
+  onHide: () => void;
+}
+
+export default function ThreadCard({
+  thread,
+  userDid,
+  sysopDid,
+  onDelete,
+  onBan,
+  onHide,
+}: ThreadHeaderProps) {
+  const isAuthor = !!(userDid && userDid === thread.did);
+  const isSysop = !!(userDid && userDid === sysopDid);
+
+  return (
+    <article className="reply-card bg-neutral-900 border border-neutral-800 rounded p-4 mb-4">
+      <div className="flex items-baseline justify-between mb-3">
+        <PostMeta handle={thread.authorHandle} createdAt={thread.createdAt} />
+        <PostActions
+          isAuthor={isAuthor}
+          isSysop={isSysop}
+          onDelete={onDelete}
+          onBan={onBan}
+          onHide={onHide}
+        />
+      </div>
+      <h1 className="text-lg text-neutral-200 font-bold mb-3">
+        {thread.title}
+      </h1>
+      <PostBody>{thread.body}</PostBody>
+      {thread.attachments && thread.attachments.length > 0 && (
+        <div className="mt-3 space-y-1">
+          {thread.attachments.map((attachment, index) => (
+            <AttachmentLink
+              key={index}
+              pds={thread.authorPds}
+              did={thread.did}
+              cid={attachment.file.ref.$link}
+              name={attachment.name}
+            />
+          ))}
+        </div>
+      )}
+    </article>
+  );
+}
diff --git a/web/src/components/ThreadHeader.tsx b/web/src/components/ThreadHeader.tsx
deleted file mode 100644
index e899115..0000000
--- a/web/src/components/ThreadHeader.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { formatFullDate, relativeDate } from "../lib/util";
-import type { ThreadObj } from "../router/loaders";
-import AttachmentLink from "./AttachmentLink";
-import PostBody from "./PostBody";
-
-interface ThreadHeaderProps {
-  thread: ThreadObj;
-  userDid?: string;
-  sysopDid: string;
-  onDeleteThread: () => void;
-  onBanAuthor: () => void;
-  onHideThread: () => void;
-}
-
-export default function ThreadHeader({
-  thread,
-  userDid,
-  sysopDid,
-  onDeleteThread,
-  onBanAuthor,
-  onHideThread,
-}: ThreadHeaderProps) {
-  const isAuthor = userDid && userDid === thread.did;
-  const isSysop = userDid && userDid === sysopDid;
-  return (
-    <article className="reply-card bg-neutral-900 border border-neutral-800 rounded p-4 mb-4">
-      <div className="flex items-baseline justify-between mb-3">
-        <div className="flex items-baseline gap-2">
-          <span className="text-neutral-200">{thread.authorHandle}</span>
-          <span className="text-neutral-600">·</span>
-          <time
-            className="text-xs text-neutral-500"
-            title={formatFullDate(thread.createdAt)}
-          >
-            {relativeDate(thread.createdAt)}
-          </time>
-        </div>
-        <span className="reply-actions flex items-center gap-3">
-          {isAuthor && (
-            <button
-              onClick={onDeleteThread}
-              className="text-xs text-neutral-500 hover:text-red-400"
-            >
-              delete
-            </button>
-          )}
-          {isSysop && !isAuthor && (
-            <button
-              onClick={onBanAuthor}
-              className="text-xs text-neutral-500 hover:text-red-400"
-            >
-              ban
-            </button>
-          )}
-          {isSysop && (
-            <button
-              onClick={onHideThread}
-              className="text-xs text-neutral-500 hover:text-red-400"
-            >
-              hide
-            </button>
-          )}
-        </span>
-      </div>
-      <h1 className="text-lg text-neutral-200 font-bold mb-3">
-        {thread.title}
-      </h1>
-      <PostBody>{thread.body}</PostBody>
-      {thread.attachments && thread.attachments.length > 0 && (
-        <div className="mt-3 space-y-1">
-          {thread.attachments.map((a, i) => (
-            <AttachmentLink
-              key={i}
-              pds={thread.authorPds}
-              did={thread.did}
-              cid={a.file.ref.$link}
-              name={a.name}
-            />
-          ))}
-        </div>
-      )}
-    </article>
-  );
-}
diff --git a/web/src/hooks/useTitle.ts b/web/src/hooks/usePageTitle.ts
similarity index 81%
rename from web/src/hooks/useTitle.ts
rename to web/src/hooks/usePageTitle.ts
index cb8134b..6108259 100644
--- a/web/src/hooks/useTitle.ts
+++ b/web/src/hooks/usePageTitle.ts
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-export function useTitle(title: string) {
+export function usePageTitle(title: string) {
   useEffect(() => {
     const previous = document.title;
     document.title = title;
diff --git a/web/src/hooks/useThreadReplies.ts b/web/src/hooks/useThreadReplies.ts
index aa4c307..444d12a 100644
--- a/web/src/hooks/useThreadReplies.ts
+++ b/web/src/hooks/useThreadReplies.ts
@@ -6,55 +6,23 @@ import { useSearchParams } from "react-router-dom";
 import { getRecordsBatch, resolveIdentitiesBatch } from "../lib/atproto";
 import { parseAtUri } from "../lib/util";
 import type { BBS } from "../lib/bbs";
-import { is } from "@atcute/lexicons/validations";
-import { mainSchema as replySchema } from "../lexicons/types/xyz/atboards/reply";
-import type { XyzAtboardsReply } from "../lexicons";
 import type { Reply } from "../components/ReplyCard";
-
-const REPLIES_PER_PAGE = 10;
-
-interface BacklinkRef {
-  did: string;
-  collection: string;
-  rkey: string;
-}
+import {
+  REPLIES_PER_PAGE,
+  type BacklinkRef,
+  refToUri,
+  pageForReply,
+  rkeyFromHash,
+  pageForRkey,
+  clampPage,
+  recordToReply,
+} from "../lib/replies";
 
 interface ThreadLoaderData {
   bbs: BBS;
   allRefs: BacklinkRef[];
 }
 
-function refToUri(ref: BacklinkRef): string {
-  return `at://${ref.did}/${ref.collection}/${ref.rkey}`;
-}
-
-function pageForReply(
-  refs: BacklinkRef[],
-  replyUri: string | null,
-): number | null {
-  if (!replyUri) return null;
-  const index = refs.findIndex((r) => refToUri(r) === replyUri);
-  return index >= 0 ? Math.floor(index / REPLIES_PER_PAGE) + 1 : null;
-}
-
-function rkeyFromHash(): string | null {
-  const h = typeof window !== "undefined" ? window.location.hash : "";
-  return h.startsWith("#reply-") ? h.slice(7) : null;
-}
-
-function pageForRkey(refs: BacklinkRef[], rkey: string | null): number | null {
-  if (!rkey) return null;
-  const index = refs.findIndex((r) => r.rkey === rkey);
-  return index >= 0 ? Math.floor(index / REPLIES_PER_PAGE) + 1 : null;
-}
-
-function clampPage(page: number, totalRefs: number): number {
-  const totalPages = Math.max(1, Math.ceil(totalRefs / REPLIES_PER_PAGE));
-  return Math.max(1, Math.min(page, totalPages));
-}
-
-// --- Hook ---
-
 export function useThreadReplies(loaded: ThreadLoaderData) {
   const { bbs, allRefs } = loaded;
   const [params, setParams] = useSearchParams();
@@ -174,38 +142,18 @@ export function useThreadReplies(loaded: ThreadLoaderData) {
       // Fetch records from Slingshot.
       const records = await getRecordsBatch(slice);
 
-      // Drop moderated and invalid content.
+      // Drop moderated content.
       const visible = records.filter((r) => {
         const { did } = parseAtUri(r.uri);
-        return (
-          !bbs.site.bannedDids.has(did) &&
-          !bbs.site.hiddenPosts.has(r.uri) &&
-          is(replySchema, r.value)
-        );
+        return !bbs.site.bannedDids.has(did) && !bbs.site.hiddenPosts.has(r.uri);
       });
 
-      // Resolve author handles.
+      // Resolve author handles and build Reply objects.
       const dids = visible.map((r) => parseAtUri(r.uri).did);
       const authors = await resolveIdentitiesBatch(dids);
-
-      // Build Reply objects.
       const items: Reply[] = visible
-        .filter((r) => parseAtUri(r.uri).did in authors)
-        .map((r) => {
-          const { did, rkey } = parseAtUri(r.uri);
-          const v = r.value as unknown as XyzAtboardsReply.Main;
-          return {
-            uri: r.uri,
-            did,
-            rkey,
-            handle: authors[did].handle,
-            pds: authors[did].pds ?? "",
-            body: v.body,
-            createdAt: v.createdAt,
-            quote: v.quote ?? null,
-            attachments: (v.attachments ?? []) as Reply["attachments"],
-          };
-        });
+        .map((r) => recordToReply(r, authors))
+        .filter((r): r is Reply => r !== null);
 
       // Merge in optimistic adds that Slingshot hasn't caught up to yet.
       const fetchedUris = new Set(items.map((i) => i.uri));
@@ -236,22 +184,9 @@ export function useThreadReplies(loaded: ThreadLoaderData) {
         const quoteRecords = await getRecordsBatch(quoteRefs);
         const quoteDids = quoteRecords.map((r) => parseAtUri(r.uri).did);
         const quoteAuthors = await resolveIdentitiesBatch(quoteDids);
-        for (const r of quoteRecords) {
-          const { did, rkey } = parseAtUri(r.uri);
-          if (!(did in quoteAuthors)) continue;
-          if (!is(replySchema, r.value)) continue;
-          const v = r.value as unknown as XyzAtboardsReply.Main;
-          newCache[r.uri] = {
-            uri: r.uri,
-            did,
-            rkey,
-            handle: quoteAuthors[did].handle,
-            pds: quoteAuthors[did].pds ?? "",
-            body: v.body,
-            createdAt: v.createdAt,
-            quote: v.quote ?? null,
-            attachments: (v.attachments ?? []) as Reply["attachments"],
-          };
+        for (const record of quoteRecords) {
+          const reply = recordToReply(record, quoteAuthors);
+          if (reply) newCache[reply.uri] = reply;
         }
       }
 
diff --git a/web/src/lib/atproto.ts b/web/src/lib/atproto.ts
index 1900eee..2fe3dcc 100644
--- a/web/src/lib/atproto.ts
+++ b/web/src/lib/atproto.ts
@@ -52,8 +52,8 @@ export async function resolveIdentitiesBatch(
   const unique = [...new Set(dids)];
   const results = await Promise.allSettled(unique.map(resolveIdentity));
   const map: Record<string, MiniDoc> = {};
-  for (const r of results) {
-    if (r.status === "fulfilled") map[r.value.did] = r.value;
+  for (const result of results) {
+    if (result.status === "fulfilled") map[result.value.did] = result.value;
   }
   return map;
 }
@@ -77,13 +77,14 @@ export async function getRecordsBatch(
   refs: BacklinkRef[],
 ): Promise<ATRecord[]> {
   const results = await Promise.allSettled(
-    refs.map((r) => getRecord(r.did, r.collection, r.rkey)),
+    refs.map((ref) => getRecord(ref.did, ref.collection, ref.rkey)),
   );
   return results
     .filter(
-      (r): r is PromiseFulfilledResult<ATRecord> => r.status === "fulfilled",
+      (result): result is PromiseFulfilledResult<ATRecord> =>
+        result.status === "fulfilled",
     )
-    .map((r) => r.value);
+    .map((result) => result.value);
 }
 
 export async function getBacklinks(
@@ -128,32 +129,32 @@ export async function fetchAndHydrate(
 
   const records = await getRecordsBatch(backlinks.records);
 
-  const filtered = records.filter((r) => {
-    const { did } = parseAtUri(r.uri);
+  const filtered = records.filter((record) => {
+    const { did } = parseAtUri(record.uri);
     if (opts?.excludeDid && did === opts.excludeDid) return false;
     if (opts?.bannedDids?.has(did)) return false;
-    if (opts?.hiddenPosts?.has(r.uri)) return false;
+    if (opts?.hiddenPosts?.has(record.uri)) return false;
     return true;
   });
 
   if (!filtered.length)
     return { records: [], cursor: backlinks.cursor ?? null };
 
-  const dids = filtered.map((r) => parseAtUri(r.uri).did);
+  const dids = filtered.map((record) => parseAtUri(record.uri).did);
   const authors = await resolveIdentitiesBatch(dids);
 
   const hydrated = filtered
-    .filter((r) => parseAtUri(r.uri).did in authors)
-    .map((r) => {
-      const parsed = parseAtUri(r.uri);
-      const author = authors[parsed.did];
+    .filter((record) => parseAtUri(record.uri).did in authors)
+    .map((record) => {
+      const { did, rkey } = parseAtUri(record.uri);
+      const author = authors[did];
       return {
-        uri: r.uri,
-        did: parsed.did,
-        rkey: parsed.rkey,
+        uri: record.uri,
+        did,
+        rkey,
         handle: author.handle,
         pds: author.pds ?? "",
-        value: r.value,
+        value: record.value,
       };
     });
 
diff --git a/web/src/lib/bbs.ts b/web/src/lib/bbs.ts
index bf1a066..7342c19 100644
--- a/web/src/lib/bbs.ts
+++ b/web/src/lib/bbs.ts
@@ -106,9 +106,9 @@ async function _resolveBBS(handle: string): Promise<BBS> {
   if (!is(siteSchema, siteRecord.value)) {
     throw new NoBBSError(`${handle} has an invalid site record.`);
   }
-  const sv = siteRecord.value as unknown as XyzAtboardsSite.Main;
+  const siteValue = siteRecord.value as unknown as XyzAtboardsSite.Main;
   const siteUri = makeAtUri(identity.did, SITE, "self");
-  const boardSlugs: string[] = sv.boards ?? [];
+  const boardSlugs: string[] = siteValue.boards ?? [];
 
   const [boardResults, newsBacklinks, banRecords, hideRecords] =
     await Promise.all([
@@ -121,16 +121,16 @@ async function _resolveBBS(handle: string): Promise<BBS> {
     ]);
 
   const boards: Board[] = [];
-  boardResults.forEach((r, i) => {
-    if (r.status !== "fulfilled") return;
-    if (!is(boardSchema, r.value.value)) return;
-    const v = r.value.value as unknown as XyzAtboardsBoard.Main;
+  boardResults.forEach((result, index) => {
+    if (result.status !== "fulfilled") return;
+    if (!is(boardSchema, result.value.value)) return;
+    const board = result.value.value as unknown as XyzAtboardsBoard.Main;
     boards.push({
-      slug: boardSlugs[i],
-      name: v.name,
-      description: v.description,
-      createdAt: v.createdAt,
-      updatedAt: v.updatedAt,
+      slug: boardSlugs[index],
+      name: board.name,
+      description: board.description,
+      createdAt: board.createdAt,
+      updatedAt: board.updatedAt,
     });
   });
 
@@ -138,20 +138,20 @@ async function _resolveBBS(handle: string): Promise<BBS> {
   let news: News[] = [];
   if (newsBacklinks) {
     const sysopRefs = newsBacklinks.records.filter(
-      (r) => r.did === identity.did,
+      (ref) => ref.did === identity.did,
     );
     const newsRecords = await getRecordsBatch(sysopRefs);
     news = newsRecords
-      .filter((r) => is(newsSchema, r.value))
-      .map((r) => {
-        const v = r.value as unknown as XyzAtboardsNews.Main;
+      .filter((record) => is(newsSchema, record.value))
+      .map((record) => {
+        const value = record.value as unknown as XyzAtboardsNews.Main;
         return {
-          tid: parseAtUri(r.uri).rkey,
-          siteUri: v.site,
-          title: v.title,
-          body: v.body,
-          createdAt: v.createdAt,
-          attachments: v.attachments as NewsAttachment[] | undefined,
+          tid: parseAtUri(record.uri).rkey,
+          siteUri: value.site,
+          title: value.title,
+          body: value.body,
+          createdAt: value.createdAt,
+          attachments: value.attachments as NewsAttachment[] | undefined,
         };
       });
     news.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
@@ -159,26 +159,26 @@ async function _resolveBBS(handle: string): Promise<BBS> {
 
   const bannedDids = new Set(
     banRecords
-      .filter((r) => is(banSchema, r.value))
-      .map((r) => (r.value as unknown as XyzAtboardsBan.Main).did),
+      .filter((record) => is(banSchema, record.value))
+      .map((record) => (record.value as unknown as XyzAtboardsBan.Main).did),
   );
   const hiddenPosts = new Set(
     hideRecords
-      .filter((r) => is(hideSchema, r.value))
-      .map((r) => (r.value as unknown as XyzAtboardsHide.Main).uri),
+      .filter((record) => is(hideSchema, record.value))
+      .map((record) => (record.value as unknown as XyzAtboardsHide.Main).uri),
   );
 
   return {
     identity,
     site: {
-      name: sv.name,
-      description: sv.description,
-      intro: sv.intro,
+      name: siteValue.name,
+      description: siteValue.description,
+      intro: siteValue.intro,
       boards,
       bannedDids,
       hiddenPosts,
-      createdAt: sv.createdAt ?? "",
-      updatedAt: sv.updatedAt,
+      createdAt: siteValue.createdAt ?? "",
+      updatedAt: siteValue.updatedAt,
     },
     news,
   };
diff --git a/web/src/lib/inbox.ts b/web/src/lib/inbox.ts
index ce48daf..8fd09c0 100644
--- a/web/src/lib/inbox.ts
+++ b/web/src/lib/inbox.ts
@@ -30,14 +30,14 @@ async function fetchBacklinkItems(
       limit: 50,
       excludeDid,
     });
-    return records.map((r) => ({
+    return records.map((record) => ({
       type,
       threadTitle,
       threadUri,
-      replyUri: r.uri,
-      handle: r.handle,
-      body: ((r.value.body as string) ?? "").substring(0, 200),
-      createdAt: (r.value.createdAt as string) ?? "",
+      replyUri: record.uri,
+      handle: record.handle,
+      body: ((record.value.body as string) ?? "").substring(0, 200),
+      createdAt: (record.value.createdAt as string) ?? "",
     }));
   } catch {
     return [];
@@ -53,30 +53,30 @@ export async function fetchInbox(
     listRecords(pdsUrl, did, THREAD, SCAN_LIMIT),
     listRecords(pdsUrl, did, REPLY, SCAN_LIMIT),
   ]);
-  const threads = allThreads.filter((r) => is(threadSchema, r.value));
-  const replies = allReplies.filter((r) => is(replySchema, r.value));
+  const threads = allThreads.filter((record) => is(threadSchema, record.value));
+  const replies = allReplies.filter((record) => is(replySchema, record.value));
 
   const results = await Promise.all([
-    ...threads.map((tr) => {
-      const v = tr.value as unknown as XyzAtboardsThread.Main;
+    ...threads.map((thread) => {
+      const value = thread.value as unknown as XyzAtboardsThread.Main;
       return fetchBacklinkItems(
-        tr.uri,
+        thread.uri,
         `${REPLY}:subject`,
         did,
         "reply",
-        v.title ?? "",
-        tr.uri,
+        value.title ?? "",
+        thread.uri,
       );
     }),
-    ...replies.map((rr) => {
-      const v = rr.value as unknown as XyzAtboardsReply.Main;
+    ...replies.map((reply) => {
+      const value = reply.value as unknown as XyzAtboardsReply.Main;
       return fetchBacklinkItems(
-        rr.uri,
+        reply.uri,
         `${REPLY}:quote`,
         did,
         "quote",
         "",
-        v.subject ?? "",
+        value.subject ?? "",
       );
     }),
   ]);
diff --git a/web/src/lib/replies.ts b/web/src/lib/replies.ts
new file mode 100644
index 0000000..304d928
--- /dev/null
+++ b/web/src/lib/replies.ts
@@ -0,0 +1,65 @@
+/** Pure helpers for reply pagination and hydration. */
+
+import { type BacklinkRef } from "./atproto";
+import { parseAtUri } from "./util";
+import { is } from "@atcute/lexicons/validations";
+import { mainSchema as replySchema } from "../lexicons/types/xyz/atboards/reply";
+import type { XyzAtboardsReply } from "../lexicons";
+import type { Reply } from "../components/ReplyCard";
+
+export type { BacklinkRef };
+
+export const REPLIES_PER_PAGE = 10;
+
+export function refToUri(ref: BacklinkRef): string {
+  return `at://${ref.did}/${ref.collection}/${ref.rkey}`;
+}
+
+export function pageForReply(
+  refs: BacklinkRef[],
+  replyUri: string | null,
+): number | null {
+  if (!replyUri) return null;
+  const index = refs.findIndex((ref) => refToUri(ref) === replyUri);
+  return index >= 0 ? Math.floor(index / REPLIES_PER_PAGE) + 1 : null;
+}
+
+export function rkeyFromHash(): string | null {
+  const hash = typeof window !== "undefined" ? window.location.hash : "";
+  return hash.startsWith("#reply-") ? hash.slice(7) : null;
+}
+
+export function pageForRkey(
+  refs: BacklinkRef[],
+  rkey: string | null,
+): number | null {
+  if (!rkey) return null;
+  const index = refs.findIndex((ref) => ref.rkey === rkey);
+  return index >= 0 ? Math.floor(index / REPLIES_PER_PAGE) + 1 : null;
+}
+
+export function clampPage(page: number, totalRefs: number): number {
+  const totalPages = Math.max(1, Math.ceil(totalRefs / REPLIES_PER_PAGE));
+  return Math.max(1, Math.min(page, totalPages));
+}
+
+export function recordToReply(
+  record: { uri: string; value: Record<string, unknown> },
+  authors: Record<string, { handle: string; pds?: string }>,
+): Reply | null {
+  const { did, rkey } = parseAtUri(record.uri);
+  if (!(did in authors)) return null;
+  if (!is(replySchema, record.value)) return null;
+  const value = record.value as unknown as XyzAtboardsReply.Main;
+  return {
+    uri: record.uri,
+    did,
+    rkey,
+    handle: authors[did].handle,
+    pds: authors[did].pds ?? "",
+    body: value.body,
+    createdAt: value.createdAt,
+    quote: value.quote ?? null,
+    attachments: (value.attachments ?? []) as Reply["attachments"],
+  };
+}
diff --git a/web/src/lib/util.ts b/web/src/lib/util.ts
index 3724d2d..dd60031 100644
--- a/web/src/lib/util.ts
+++ b/web/src/lib/util.ts
@@ -1,16 +1,15 @@
 export function formatFullDate(iso: string): string {
-  const d = new Date(iso);
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  const date = new Date(iso);
+  const pad = (num: number) => String(num).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
 
 export function relativeDate(iso: string): string {
-  const d = new Date(iso);
-  const diff = Math.floor((Date.now() - d.getTime()) / 1000);
-  if (diff < 60) return "just now";
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
   return formatFullDate(iso);
 }
 
diff --git a/web/src/lib/writes.ts b/web/src/lib/writes.ts
index 9ba1591..546e034 100644
--- a/web/src/lib/writes.ts
+++ b/web/src/lib/writes.ts
@@ -40,8 +40,8 @@ interface BlobRef {
 type Did = `did:${string}:${string}`;
 type Nsid = `${string}.${string}.${string}`;
 
-const asDid = (s: string) => s as Did;
-const asNsid = (s: string) => s as Nsid;
+const asDid = (value: string) => value as Did;
+const asNsid = (value: string) => value as Nsid;
 
 function currentDid(): Did {
   const user = getCurrentUser();
diff --git a/web/src/pages/Account.tsx b/web/src/pages/Account.tsx
index 5ace845..0437fa9 100644
--- a/web/src/pages/Account.tsx
+++ b/web/src/pages/Account.tsx
@@ -1,11 +1,13 @@
-import { Await, Link, useLoaderData, useRevalidator } from "react-router-dom";
+import { Await, useLoaderData, useRevalidator } from "react-router-dom";
 import { Suspense, useState } from "react";
 import { useAuth } from "../lib/auth";
 import { getRecord, listRecords } from "../lib/atproto";
 import { BAN, BOARD, HIDE, NEWS, SITE } from "../lib/lexicon";
-import { parseAtUri, relativeDate } from "../lib/util";
-import { useTitle } from "../hooks/useTitle";
+import { parseAtUri } from "../lib/util";
+import { usePageTitle } from "../hooks/usePageTitle";
 import { deleteRecord } from "../lib/writes";
+import InboxList from "../components/InboxList";
+import BBSPanel from "../components/BBSPanel";
 import type { InboxItem } from "../router/loaders";
 import type { AuthUser } from "../lib/auth";
 
@@ -16,14 +18,12 @@ interface LoaderData {
   items: Promise<InboxItem[]>;
 }
 
-const PAGE_SIZE = 10;
-
 export default function Account() {
   const { user, hasBBS, bbsName, items } = useLoaderData() as LoaderData;
   const { agent } = useAuth();
   const revalidator = useRevalidator();
   const [tab, setTab] = useState<"inbox" | "bbs">("inbox");
-  useTitle("Account — atbbs");
+  usePageTitle("Account — atbbs");
 
   async function deleteBBS() {
     if (!agent) return;
@@ -36,32 +36,32 @@ export default function Account() {
     try {
       const failed: string[] = [];
       const existing = await getRecord(user.did, SITE, "self");
-      const sv = existing.value as Record<string, unknown>;
+      const siteValue = existing.value as Record<string, unknown>;
       const slugs: string[] = (
-        Array.isArray(sv.boards) ? sv.boards : []
+        Array.isArray(siteValue.boards) ? siteValue.boards : []
       ) as string[];
-      for (const s of slugs) {
+      for (const slug of slugs) {
         try {
-          await deleteRecord(agent, BOARD, s);
+          await deleteRecord(agent, BOARD, slug);
         } catch {
-          failed.push(`board/${s}`);
+          failed.push(`board/${slug}`);
         }
       }
       const newsRecords = await listRecords(user.pdsUrl, user.did, NEWS);
-      for (const n of newsRecords) {
+      for (const record of newsRecords) {
         try {
-          await deleteRecord(agent, NEWS, parseAtUri(n.uri).rkey);
+          await deleteRecord(agent, NEWS, parseAtUri(record.uri).rkey);
         } catch {
-          failed.push(`news/${parseAtUri(n.uri).rkey}`);
+          failed.push(`news/${parseAtUri(record.uri).rkey}`);
         }
       }
-      for (const col of [BAN, HIDE]) {
-        const recs = await listRecords(user.pdsUrl, user.did, col);
-        for (const r of recs) {
+      for (const collection of [BAN, HIDE]) {
+        const records = await listRecords(user.pdsUrl, user.did, collection);
+        for (const record of records) {
           try {
-            await deleteRecord(agent, col, parseAtUri(r.uri).rkey);
+            await deleteRecord(agent, collection, parseAtUri(record.uri).rkey);
           } catch {
-            failed.push(`${col}/${parseAtUri(r.uri).rkey}`);
+            failed.push(`${collection}/${parseAtUri(record.uri).rkey}`);
           }
         }
       }
@@ -78,6 +78,10 @@ export default function Account() {
     }
   }
 
+  const activeTab = "py-2 border-b-2 text-neutral-200 border-neutral-200";
+  const inactiveTab =
+    "py-2 border-b-2 text-neutral-500 hover:text-neutral-300 border-transparent";
+
   return (
     <>
       <div className="mb-6">
@@ -99,13 +103,13 @@ export default function Account() {
       <div className="flex gap-4 border-b border-neutral-800 mb-6">
         <button
           onClick={() => setTab("inbox")}
-          className={`py-2 border-b-2 ${tab === "inbox" ? "text-neutral-200 border-neutral-200" : "text-neutral-500 hover:text-neutral-300 border-transparent"}`}
+          className={tab === "inbox" ? activeTab : inactiveTab}
         >
           Messages
         </button>
         <button
           onClick={() => setTab("bbs")}
-          className={`py-2 border-b-2 ${tab === "bbs" ? "text-neutral-200 border-neutral-200" : "text-neutral-500 hover:text-neutral-300 border-transparent"}`}
+          className={tab === "bbs" ? activeTab : inactiveTab}
         >
           {hasBBS ? (bbsName ?? "Your BBS") : "Your BBS"}
         </button>
@@ -122,108 +126,12 @@ export default function Account() {
       )}
 
       {tab === "bbs" && (
-        <div>
-          {hasBBS ? (
-            <div className="grid grid-cols-2 gap-3 max-w-md">
-              <Link
-                to={`/bbs/${user.handle}`}
-                className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700"
-              >
-                <div className="text-neutral-200 mb-1">Browse</div>
-                <div className="text-xs text-neutral-500">View your BBS.</div>
-              </Link>
-              <Link
-                to="/account/edit"
-                className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700"
-              >
-                <div className="text-neutral-200 mb-1">Edit</div>
-                <div className="text-xs text-neutral-500">
-                  Name, boards, intro.
-                </div>
-              </Link>
-              <Link
-                to="/account/moderate"
-                className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700"
-              >
-                <div className="text-neutral-200 mb-1">Moderate</div>
-                <div className="text-xs text-neutral-500">
-                  Bans and hidden posts.
-                </div>
-              </Link>
-              <button
-                onClick={deleteBBS}
-                className="text-left bg-neutral-900 border border-neutral-800 rounded px-4 py-3 hover:border-red-900"
-              >
-                <div className="text-neutral-500 mb-1">Delete</div>
-                <div className="text-xs text-neutral-600">Remove your BBS.</div>
-              </button>
-            </div>
-          ) : (
-            <>
-              <p className="text-neutral-500 mb-4">
-                You haven't set up a BBS yet.
-              </p>
-              <Link
-                to="/account/create"
-                className="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded inline-block"
-              >
-                create a bbs
-              </Link>
-            </>
-          )}
-        </div>
+        <BBSPanel
+          hasBBS={hasBBS}
+          userHandle={user.handle}
+          onDelete={deleteBBS}
+        />
       )}
     </>
   );
 }
-
-function InboxList({
-  items,
-  userHandle,
-}: {
-  items: InboxItem[];
-  userHandle: string;
-}) {
-  const [shown, setShown] = useState(PAGE_SIZE);
-  if (items.length === 0)
-    return <p className="text-neutral-500">No messages yet.</p>;
-  return (
-    <div>
-      {items.slice(0, shown).map((m) => {
-        const { did: tDid, rkey: tRkey } = parseAtUri(m.threadUri);
-        const { rkey: replyRkey } = parseAtUri(m.replyUri);
-        const url = `/bbs/${userHandle}/thread/${tDid}/${tRkey}#reply-${replyRkey}`;
-        return (
-          <Link
-            key={m.replyUri}
-            to={url}
-            className="block border border-neutral-800/50 rounded p-4 mb-2 hover:bg-neutral-800"
-          >
-            <div className="flex items-baseline justify-between mb-1">
-              <span className="text-neutral-300">{m.handle}</span>
-              <span className="text-xs text-neutral-500">
-                {relativeDate(m.createdAt)}
-              </span>
-            </div>
-            <p className="text-xs text-neutral-500 mb-1">
-              {m.type === "quote"
-                ? "quoted your reply"
-                : `on: ${m.threadTitle}`}
-            </p>
-            <p className="text-neutral-400">{m.body}</p>
-          </Link>
-        );
-      })}
-      {shown < items.length && (
-        <div className="mt-4 text-center">
-          <button
-            onClick={() => setShown((s) => s + PAGE_SIZE)}
-            className="text-neutral-500 hover:text-neutral-300"
-          >
-            show more
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/web/src/pages/BBS.tsx b/web/src/pages/BBS.tsx
index 034bee5..dbf6e6e 100644
--- a/web/src/pages/BBS.tsx
+++ b/web/src/pages/BBS.tsx
@@ -7,7 +7,7 @@ import ComposeForm from "../components/ComposeForm";
 import { NEWS, SITE } from "../lib/lexicon";
 import { makeAtUri, nowIso, parseAtUri } from "../lib/util";
 import * as limits from "../lib/limits";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 import Localtime from "../components/Localtime";
 import ListLink from "../components/ListLink";
 import type { News } from "../lib/bbs";
@@ -28,7 +28,7 @@ export default function BBSPage() {
     [{ label: bbs.site.name, to: `/bbs/${handle}` }],
     [bbs, handle],
   );
-  useTitle(`${bbs.site.name} — atbbs`);
+  usePageTitle(`${bbs.site.name} — atbbs`);
 
   if (user && bbs.site.bannedDids.has(user.did))
     return (
@@ -91,12 +91,12 @@ export default function BBSPage() {
           Boards
         </h2>
         <div className="space-y-1">
-          {bbs.site.boards.map((b) => (
+          {bbs.site.boards.map((board) => (
             <ListLink
-              key={b.slug}
-              to={`/bbs/${handle}/board/${b.slug}`}
-              name={b.name}
-              description={b.description}
+              key={board.slug}
+              to={`/bbs/${handle}/board/${board.slug}`}
+              name={board.name}
+              description={board.description}
             />
           ))}
         </div>
diff --git a/web/src/pages/Board.tsx b/web/src/pages/Board.tsx
index ed47e79..66824a2 100644
--- a/web/src/pages/Board.tsx
+++ b/web/src/pages/Board.tsx
@@ -7,7 +7,7 @@ import {
 } from "react-router-dom";
 import { useAuth } from "../lib/auth";
 import { useBreadcrumb } from "../hooks/useBreadcrumb";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 import { makeAtUri, parseAtUri, relativeDate } from "../lib/util";
 import { BOARD } from "../lib/lexicon";
 import { createThread, uploadAttachments } from "../lib/writes";
@@ -51,7 +51,7 @@ export default function BoardPage() {
   const [body, setBody] = useState("");
   const [files, setFiles] = useState<File[]>([]);
 
-  useTitle(`${board.name} — ${bbs.site.name}`);
+  usePageTitle(`${board.name} — ${bbs.site.name}`);
   useBreadcrumb(
     [
       { label: bbs.site.name, to: `/bbs/${handle}` },
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 3031833..3f43989 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -4,7 +4,7 @@ import HandleInput from "../components/HandleInput";
 import ListLink from "../components/ListLink";
 import { resolveIdentitiesBatch } from "../lib/atproto";
 import { SITE } from "../lib/lexicon";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 
 interface UFORecord {
   did: string;
@@ -21,22 +21,22 @@ let discoveryCache: { items: Discovered[]; expires: number } | null = null;
 const DISCOVERY_TTL = 5 * 60 * 1000; // 5 minutes
 
 export default function Home() {
-  const nav = useNavigate();
+  const navigate = useNavigate();
   const [handle, setHandle] = useState("");
   const [tab, setTab] = useState<"pip" | "uv" | "brew" | "telnet">("pip");
   const [discovered, setDiscovered] = useState<Discovered[]>([]);
-  useTitle("atbbs");
+  usePageTitle("atbbs");
 
   function onSubmit(e: SyntheticEvent) {
     e.preventDefault();
-    const h = handle.trim();
-    if (h) nav(`/bbs/${encodeURIComponent(h)}`);
+    const trimmed = handle.trim();
+    if (trimmed) navigate(`/bbs/${encodeURIComponent(trimmed)}`);
   }
 
   function onRandom() {
     if (!discovered.length) return;
-    const d = discovered[Math.floor(Math.random() * discovered.length)];
-    nav(`/bbs/${encodeURIComponent(d.handle)}`);
+    const pick = discovered[Math.floor(Math.random() * discovered.length)];
+    navigate(`/bbs/${encodeURIComponent(pick.handle)}`);
   }
 
   useEffect(() => {
@@ -132,12 +132,12 @@ export default function Home() {
               or try one of these
             </p>
             <div className="space-y-1">
-              {discovered.slice(0, 5).map((d) => (
+              {discovered.slice(0, 5).map((bbs) => (
                 <ListLink
-                  key={d.handle}
-                  to={`/bbs/${encodeURIComponent(d.handle)}`}
-                  name={d.name}
-                  description={d.desc}
+                  key={bbs.handle}
+                  to={`/bbs/${encodeURIComponent(bbs.handle)}`}
+                  name={bbs.name}
+                  description={bbs.desc}
                 />
               ))}
             </div>
diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx
index af07d47..918a49a 100644
--- a/web/src/pages/Login.tsx
+++ b/web/src/pages/Login.tsx
@@ -1,6 +1,6 @@
 import { useState, type SyntheticEvent } from "react";
 import { useAuth } from "../lib/auth";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 import HandleInput from "../components/HandleInput";
 
 export default function Login() {
@@ -8,7 +8,7 @@ export default function Login() {
   const [handle, setHandle] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
-  useTitle("Login — atbbs");
+  usePageTitle("Login — atbbs");
 
   async function onSubmit(e: SyntheticEvent) {
     e.preventDefault();
diff --git a/web/src/pages/News.tsx b/web/src/pages/News.tsx
index 9df2100..ecf9078 100644
--- a/web/src/pages/News.tsx
+++ b/web/src/pages/News.tsx
@@ -1,13 +1,14 @@
 import { useNavigate, useParams, useRouteLoaderData } from "react-router-dom";
 import { useAuth } from "../lib/auth";
 import { useBreadcrumb } from "../hooks/useBreadcrumb";
-import { useTitle } from "../hooks/useTitle";
-import { formatFullDate, relativeDate } from "../lib/util";
+import { usePageTitle } from "../hooks/usePageTitle";
 import { NEWS } from "../lib/lexicon";
 import { deleteRecord } from "../lib/writes";
 import type { BBSLoaderData } from "../router/loaders";
 import AttachmentLink from "../components/AttachmentLink";
+import PostActions from "../components/PostActions";
 import PostBody from "../components/PostBody";
+import PostMeta from "../components/PostMeta";
 
 export default function NewsPage() {
   const { handle, tid } = useParams();
@@ -24,7 +25,7 @@ export default function NewsPage() {
     ],
     [bbs, handle, tid],
   );
-  useTitle(
+  usePageTitle(
     item ? `${item.title} — ${bbs.site.name}` : `News — ${bbs.site.name}`,
   );
 
@@ -32,7 +33,7 @@ export default function NewsPage() {
     return <p className="text-neutral-500">News post not found.</p>;
   }
 
-  const isSysop = user && user.did === bbs.identity.did;
+  const isSysop = !!(user && user.did === bbs.identity.did);
 
   async function onDelete() {
     if (!agent || !tid) return;
@@ -44,36 +45,24 @@ export default function NewsPage() {
   return (
     <article className="bg-neutral-900 border border-neutral-800 rounded p-4">
       <div className="flex items-baseline justify-between mb-3">
-        <div className="flex items-baseline gap-2">
-          <span className="text-neutral-200">{handle}</span>
-          <span className="text-neutral-600">·</span>
-          <time
-            className="text-xs text-neutral-500"
-            title={formatFullDate(item.createdAt)}
-          >
-            {relativeDate(item.createdAt)}
-          </time>
-        </div>
-        {isSysop && (
-          <button
-            onClick={onDelete}
-            className="text-xs text-neutral-500 hover:text-red-400"
-          >
-            delete
-          </button>
-        )}
+        <PostMeta handle={handle ?? ""} createdAt={item.createdAt} />
+        <PostActions
+          isAuthor={isSysop}
+          isSysop={false}
+          onDelete={onDelete}
+        />
       </div>
       <h1 className="text-lg text-neutral-200 font-bold mb-3">{item.title}</h1>
       <PostBody>{item.body}</PostBody>
       {item.attachments && item.attachments.length > 0 && (
         <div className="mt-3 space-y-1">
-          {item.attachments.map((a, i) => (
+          {item.attachments.map((attachment, index) => (
             <AttachmentLink
-              key={i}
+              key={index}
               pds={bbs.identity.pds ?? ""}
               did={bbs.identity.did}
-              cid={a.file.ref.$link}
-              name={a.name}
+              cid={attachment.file.ref.$link}
+              name={attachment.name}
             />
           ))}
         </div>
diff --git a/web/src/pages/OAuthCallback.tsx b/web/src/pages/OAuthCallback.tsx
index 548fc76..08b6ca8 100644
--- a/web/src/pages/OAuthCallback.tsx
+++ b/web/src/pages/OAuthCallback.tsx
@@ -4,20 +4,20 @@ import { completeAuthCallback, takePostLoginRedirect } from "../lib/auth";
 
 /** Handles the OAuth redirect: exchanges params for a session. */
 export default function OAuthCallback() {
-  const nav = useNavigate();
+  const navigate = useNavigate();
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     completeAuthCallback()
       .then(() => {
         const dest = takePostLoginRedirect() ?? "/";
-        nav(dest, { replace: true });
+        navigate(dest, { replace: true });
       })
       .catch((e) => {
         console.error(e);
         setError(e?.message ?? "Sign-in failed.");
       });
-  }, [nav]);
+  }, [navigate]);
 
   if (error) return <p className="text-red-400">{error}</p>;
   return <p className="text-neutral-500">Signing in…</p>;
diff --git a/web/src/pages/SysopCreate.tsx b/web/src/pages/SysopCreate.tsx
index 4670169..a25ce81 100644
--- a/web/src/pages/SysopCreate.tsx
+++ b/web/src/pages/SysopCreate.tsx
@@ -4,7 +4,7 @@ import { useAuth } from "../lib/auth";
 import { putBoard, putSite } from "../lib/writes";
 import { nowIso } from "../lib/util";
 import * as limits from "../lib/limits";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 import { Input, Textarea, Button } from "../components/Form";
 import BoardRowEditor, { type BoardRow } from "../components/BoardRowEditor";
 import type { AuthUser } from "../lib/auth";
@@ -26,32 +26,32 @@ export default function SysopCreate() {
   ]);
   const [error, setError] = useState<string | null>(null);
 
-  useTitle("Create BBS — atbbs");
+  usePageTitle("Create BBS — atbbs");
 
   async function onSubmit(e: SyntheticEvent) {
     e.preventDefault();
     if (!agent) return;
     const cleanBoards = boards
-      .map((b) => ({
-        slug: b.slug.trim(),
-        name: b.name.trim(),
-        desc: b.desc.trim(),
+      .map((board) => ({
+        slug: board.slug.trim(),
+        name: board.name.trim(),
+        desc: board.desc.trim(),
       }))
-      .filter((b) => b.slug);
+      .filter((board) => board.slug);
     if (!name.trim() || !cleanBoards.length) {
       setError("Name and at least one board are required.");
       return;
     }
     const now = nowIso();
     try {
-      for (const b of cleanBoards) {
-        await putBoard(agent, b.slug, b.name || b.slug, b.desc, now);
+      for (const board of cleanBoards) {
+        await putBoard(agent, board.slug, board.name || board.slug, board.desc, now);
       }
       await putSite(agent, {
         name: name.trim(),
         description: description.trim(),
         intro,
-        boards: cleanBoards.map((b) => b.slug),
+        boards: cleanBoards.map((board) => board.slug),
         createdAt: now,
       });
       navigate(`/bbs/${user.handle}`);
diff --git a/web/src/pages/SysopEdit.tsx b/web/src/pages/SysopEdit.tsx
index aa832d2..f5faaec 100644
--- a/web/src/pages/SysopEdit.tsx
+++ b/web/src/pages/SysopEdit.tsx
@@ -4,7 +4,7 @@ import { useAuth } from "../lib/auth";
 import { putBoard, putSite } from "../lib/writes";
 import { nowIso } from "../lib/util";
 import * as limits from "../lib/limits";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 import { Input, Textarea, Button } from "../components/Form";
 import BoardRowEditor, { type BoardRow } from "../components/BoardRowEditor";
 import type { BBS } from "../lib/bbs";
@@ -24,36 +24,36 @@ export default function SysopEdit() {
   const [description, setDescription] = useState(bbs.site.description);
   const [intro, setIntro] = useState(bbs.site.intro);
   const [boards, setBoards] = useState<BoardRow[]>(
-    bbs.site.boards.map((b) => ({
-      slug: b.slug,
-      name: b.name,
-      desc: b.description,
+    bbs.site.boards.map((board) => ({
+      slug: board.slug,
+      name: board.name,
+      desc: board.description,
     })),
   );
   const [error, setError] = useState<string | null>(null);
 
-  useTitle("Edit BBS — atbbs");
+  usePageTitle("Edit BBS — atbbs");
 
   async function onSubmit(e: SyntheticEvent) {
     e.preventDefault();
     if (!agent || !name.trim()) return;
     const cleanBoards = boards
-      .map((b) => ({
-        slug: b.slug.trim(),
-        name: b.name.trim(),
-        desc: b.desc.trim(),
+      .map((board) => ({
+        slug: board.slug.trim(),
+        name: board.name.trim(),
+        desc: board.desc.trim(),
       }))
-      .filter((b) => b.slug);
+      .filter((board) => board.slug);
     const now = nowIso();
     try {
-      for (const b of cleanBoards) {
-        await putBoard(agent, b.slug, b.name || b.slug, b.desc, now);
+      for (const board of cleanBoards) {
+        await putBoard(agent, board.slug, board.name || board.slug, board.desc, now);
       }
       await putSite(agent, {
         name: name.trim(),
         description: description.trim(),
         intro,
-        boards: cleanBoards.map((b) => b.slug),
+        boards: cleanBoards.map((board) => board.slug),
         createdAt: bbs.site.createdAt || now,
         updatedAt: now,
       });
diff --git a/web/src/pages/SysopModerate.tsx b/web/src/pages/SysopModerate.tsx
index c0a8f00..e72a7e0 100644
--- a/web/src/pages/SysopModerate.tsx
+++ b/web/src/pages/SysopModerate.tsx
@@ -5,7 +5,7 @@ import { resolveIdentity } from "../lib/atproto";
 import { BAN, HIDE } from "../lib/lexicon";
 import { invalidateBBSCache } from "../lib/bbs";
 import HandleInput from "../components/HandleInput";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 import { createBan, createHide, deleteRecord } from "../lib/writes";
 import type { BBS } from "../lib/bbs";
 import type { AuthUser } from "../lib/auth";
@@ -27,7 +27,7 @@ export default function SysopModerate() {
   const revalidator = useRevalidator();
   const [identifier, setIdentifier] = useState("");
   const [hideUri, setHideUri] = useState("");
-  useTitle("Moderate BBS — atbbs");
+  usePageTitle("Moderate BBS — atbbs");
 
   async function ban() {
     if (!agent) return;
diff --git a/web/src/pages/Thread.tsx b/web/src/pages/Thread.tsx
index 0884c77..7490104 100644
--- a/web/src/pages/Thread.tsx
+++ b/web/src/pages/Thread.tsx
@@ -7,7 +7,7 @@ import {
 } from "react-router-dom";
 import { useAuth } from "../lib/auth";
 import { useBreadcrumb } from "../hooks/useBreadcrumb";
-import { useTitle } from "../hooks/useTitle";
+import { usePageTitle } from "../hooks/usePageTitle";
 import { useThreadReplies } from "../hooks/useThreadReplies";
 import { THREAD, REPLY } from "../lib/lexicon";
 import { makeAtUri, parseAtUri } from "../lib/util";
@@ -23,7 +23,7 @@ import type { BBSLoaderData, ThreadObj } from "../router/loaders";
 import PageNav from "../components/PageNav";
 import ReplyCard, { type Reply } from "../components/ReplyCard";
 import ComposeForm from "../components/ComposeForm";
-import ThreadHeader from "../components/ThreadHeader";
+import ThreadCard from "../components/ThreadCard";
 
 interface LoaderData {
   handle: string;
@@ -70,7 +70,7 @@ function ThreadPage({ loaded }: { loaded: LoaderData }) {
   );
   const [posting, setPosting] = useState(false);
 
-  useTitle(`${thread.title} — ${bbs.site.name}`);
+  usePageTitle(`${thread.title} — ${bbs.site.name}`);
   useBreadcrumb(buildBreadcrumb(bbs, thread, handle), [bbs, thread, handle]);
 
   const isSysop = user && user.did === bbs.identity.did;
@@ -147,13 +147,13 @@ function ThreadPage({ loaded }: { loaded: LoaderData }) {
 
   return (
     <>
-      <ThreadHeader
+      <ThreadCard
         thread={thread}
         userDid={user?.did}
         sysopDid={bbs.identity.did}
-        onDeleteThread={onDeleteThread}
-        onBanAuthor={() => onBan(thread.did)}
-        onHideThread={() => onHide(thread.uri)}
+        onDelete={onDeleteThread}
+        onBan={() => onBan(thread.did)}
+        onHide={() => onHide(thread.uri)}
       />
 
       {totalPages > 1 && (
@@ -217,7 +217,7 @@ function buildBreadcrumb(
   thread: ThreadObj,
   handle: string,
 ) {
-  const board = bbs.site.boards.find((b) => b.slug === thread.boardSlug);
+  const board = bbs.site.boards.find((board) => board.slug === thread.boardSlug);
   return [
     { label: bbs.site.name, to: `/bbs/${handle}` },
     ...(board
diff --git a/web/src/router/loaders.ts b/web/src/router/loaders.ts
deleted file mode 100644
index 7a64760..0000000
--- a/web/src/router/loaders.ts
+++ /dev/null
@@ -1,298 +0,0 @@
-/** Route loaders. Pages read these via useLoaderData(). */
-
-import { redirect, type LoaderFunctionArgs } from "react-router-dom";
-import { ensureAuthReady, getCurrentUser } from "../lib/auth";
-import { resolveBBS, type BBS } from "../lib/bbs";
-import { fetchInbox } from "../lib/inbox";
-import {
-  getRecord,
-  getRecordByUri,
-  getBacklinks,
-  getRecordsBatch,
-  listRecords,
-  resolveIdentitiesBatch,
-  resolveIdentity,
-  type ATRecord,
-  type BacklinkRef,
-} from "../lib/atproto";
-import { SITE, THREAD, REPLY, BAN, HIDE, BOARD } from "../lib/lexicon";
-import { makeAtUri, parseAtUri } from "../lib/util";
-import { is } from "@atcute/lexicons/validations";
-import { mainSchema as threadSchema } from "../lexicons/types/xyz/atboards/thread";
-import { mainSchema as banSchema } from "../lexicons/types/xyz/atboards/ban";
-import { mainSchema as hideSchema } from "../lexicons/types/xyz/atboards/hide";
-import type {
-  XyzAtboardsThread,
-  XyzAtboardsBan,
-  XyzAtboardsHide,
-} from "../lexicons";
-
-// --- Auth guard (shared by all protected loaders) ---
-
-async function requireAuth() {
-  await ensureAuthReady();
-  const user = getCurrentUser();
-  if (!user) throw redirect("/login");
-  return user;
-}
-
-// --- BBS parent ---
-
-export async function bbsLoader({ params }: LoaderFunctionArgs) {
-  const handle = params.handle!;
-  const bbs = await resolveBBS(handle);
-  return { handle, bbs };
-}
-
-export type BBSLoaderData = { handle: string; bbs: BBS };
-
-// --- Board ---
-
-export interface ThreadItem {
-  uri: string;
-  did: string;
-  rkey: string;
-  handle: string;
-  title: string;
-  body: string;
-  createdAt: string;
-}
-
-/** Fetch one page of threads for a board, hydrated and filtered. */
-export async function hydrateThreadPage(
-  bbs: BBS,
-  slug: string,
-  cursor?: string,
-): Promise<{ threads: ThreadItem[]; cursor: string | null }> {
-  const boardUri = makeAtUri(bbs.identity.did, BOARD, slug);
-  const backlinks = await getBacklinks(boardUri, `${THREAD}:board`, 50, cursor);
-  const records = await getRecordsBatch(backlinks.records);
-  const filtered = records.filter((r) => {
-    const { did } = parseAtUri(r.uri);
-    return (
-      !bbs.site.bannedDids.has(did) &&
-      !bbs.site.hiddenPosts.has(r.uri) &&
-      is(threadSchema, r.value)
-    );
-  });
-  const authors = await resolveIdentitiesBatch(
-    filtered.map((r) => parseAtUri(r.uri).did),
-  );
-  const threads: ThreadItem[] = filtered
-    .filter((r) => parseAtUri(r.uri).did in authors)
-    .map((r: ATRecord) => {
-      const { did, rkey } = parseAtUri(r.uri);
-      const v = r.value as unknown as XyzAtboardsThread.Main;
-      return {
-        uri: r.uri,
-        did,
-        rkey,
-        handle: authors[did].handle,
-        title: v.title,
-        body: v.body,
-        createdAt: v.createdAt,
-      };
-    })
-    .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
-  return { threads, cursor: backlinks.cursor ?? null };
-}
-
-export async function boardLoader({ params }: LoaderFunctionArgs) {
-  const handle = params.handle!;
-  const slug = params.slug!;
-  const bbs = await resolveBBS(handle);
-  const board = bbs.site.boards.find((b) => b.slug === slug);
-  if (!board) throw new Response("Board not found", { status: 404 });
-
-  const { threads, cursor } = await hydrateThreadPage(bbs, slug);
-  return { handle, bbs, board, threads, cursor };
-}
-
-// --- Thread ---
-
-export interface ThreadObj {
-  uri: string;
-  did: string;
-  rkey: string;
-  authorHandle: string;
-  authorPds: string;
-  title: string;
-  body: string;
-  createdAt: string;
-  boardSlug: string;
-  attachments?: { file: { ref: { $link: string } }; name: string }[];
-}
-
-export async function threadLoader({ params }: LoaderFunctionArgs) {
-  const handle = params.handle!;
-  const did = params.did!;
-  const tid = params.tid!;
-
-  const threadUri = makeAtUri(did, THREAD, tid);
-  const [bbs, tr, author, allRefs] = await Promise.all([
-    resolveBBS(handle),
-    getRecord(did, THREAD, tid),
-    resolveIdentity(did),
-    collectAllReplyRefs(threadUri),
-  ]);
-  if (!is(threadSchema, tr.value)) {
-    throw new Response("Invalid thread record", { status: 404 });
-  }
-  const tv = tr.value as unknown as XyzAtboardsThread.Main;
-  const boardSlug = parseAtUri(tv.board).rkey;
-  const thread: ThreadObj = {
-    uri: tr.uri,
-    did,
-    rkey: tid,
-    authorHandle: author.handle,
-    authorPds: author.pds ?? "",
-    title: tv.title,
-    body: tv.body,
-    createdAt: tv.createdAt,
-    boardSlug,
-    attachments: tv.attachments as ThreadObj["attachments"],
-  };
-
-  return { handle, bbs, thread, allRefs };
-}
-
-// --- Account ---
-
-export type { InboxItem } from "../lib/inbox";
-
-/** Collect all reply refs, paginating Constellation in chunks of 100. */
-async function collectAllReplyRefs(threadUri: string): Promise<BacklinkRef[]> {
-  const collected: BacklinkRef[] = [];
-  let cursor: string | undefined;
-  for (let i = 0; i < 20; i++) {
-    const page = await getBacklinks(threadUri, `${REPLY}:subject`, 100, cursor);
-    collected.push(...page.records);
-    if (!page.cursor) break;
-    cursor = page.cursor;
-  }
-  return collected.reverse(); // oldest first
-}
-
-export async function accountLoader() {
-  const user = await requireAuth();
-
-  // Probe site record (fast — keep awaited so the page can render with it)
-  let hasBBS = false;
-  let bbsName: string | null = null;
-  try {
-    const r = await getRecord(user.did, SITE, "self");
-    hasBBS = true;
-    const sv = r.value as unknown as { name?: string };
-    bbsName = sv.name ?? user.handle;
-  } catch {
-    // no site
-  }
-
-  // Inbox lookup is slow — return the promise unawaited so the page renders
-  // immediately and items stream in via <Await>. (v7 auto-defers promises.)
-  const itemsPromise = fetchInbox(user.did, user.pdsUrl);
-  return { user, hasBBS, bbsName, items: itemsPromise };
-}
-
-// --- Sysop ---
-
-export async function requireAuthLoader() {
-  return { user: await requireAuth() };
-}
-
-export async function sysopEditLoader() {
-  const user = await requireAuth();
-  try {
-    const bbs = await resolveBBS(user.handle);
-    return { user, bbs };
-  } catch {
-    throw redirect("/account/create");
-  }
-}
-
-export interface HiddenInfo {
-  uri: string;
-  handle: string;
-  title: string;
-  body: string;
-}
-
-/** Build a map from a record field value to its rkey, for deletion. */
-function buildRkeyMap<T>(
-  records: { uri: string; value: Record<string, unknown> }[],
-  schema: Parameters<typeof is>[0],
-  getKey: (v: T) => string,
-): Record<string, string> {
-  const map: Record<string, string> = {};
-  for (const r of records) {
-    if (!is(schema, r.value)) continue;
-    map[getKey(r.value as unknown as T)] = parseAtUri(r.uri).rkey;
-  }
-  return map;
-}
-
-async function hydrateHiddenPosts(uris: Set<string>): Promise<HiddenInfo[]> {
-  const hidden: HiddenInfo[] = [];
-  for (const uri of uris) {
-    const did = parseAtUri(uri).did;
-    let handle = did;
-    try {
-      handle = (await resolveIdentity(did)).handle;
-    } catch {}
-    try {
-      const rec = await getRecordByUri(uri);
-      const v = rec.value as unknown as { title?: string; body?: string };
-      hidden.push({
-        uri,
-        handle,
-        title: v.title ?? "",
-        body: (v.body ?? "").substring(0, 100),
-      });
-    } catch {
-      hidden.push({ uri, handle, title: "", body: uri });
-    }
-  }
-  return hidden;
-}
-
-export async function sysopModerateLoader() {
-  const user = await requireAuth();
-
-  let bbs: BBS;
-  try {
-    bbs = await resolveBBS(user.handle);
-  } catch {
-    throw redirect("/account/create");
-  }
-
-  const [banRecs, hideRecs] = await Promise.all([
-    listRecords(user.pdsUrl, user.did, BAN),
-    listRecords(user.pdsUrl, user.did, HIDE),
-  ]);
-
-  const banRkeys = buildRkeyMap<XyzAtboardsBan.Main>(
-    banRecs,
-    banSchema,
-    (v) => v.did,
-  );
-  const hideRkeys = buildRkeyMap<XyzAtboardsHide.Main>(
-    hideRecs,
-    hideSchema,
-    (v) => v.uri,
-  );
-
-  let bannedHandles: Record<string, string> = {};
-  if (bbs.site.bannedDids.size) {
-    try {
-      const authors = await resolveIdentitiesBatch([...bbs.site.bannedDids]);
-      for (const did of bbs.site.bannedDids)
-        bannedHandles[did] = authors[did]?.handle ?? did;
-    } catch {
-      for (const did of bbs.site.bannedDids) bannedHandles[did] = did;
-    }
-  }
-
-  const hidden = await hydrateHiddenPosts(bbs.site.hiddenPosts);
-
-  return { user, bbs, banRkeys, bannedHandles, hideRkeys, hidden };
-}
diff --git a/web/src/router/loaders/account.ts b/web/src/router/loaders/account.ts
new file mode 100644
index 0000000..f5f6658
--- /dev/null
+++ b/web/src/router/loaders/account.ts
@@ -0,0 +1,28 @@
+import { getRecord } from "../../lib/atproto";
+import { fetchInbox } from "../../lib/inbox";
+import { SITE } from "../../lib/lexicon";
+import { requireAuth } from "./auth";
+
+export type { InboxItem } from "../../lib/inbox";
+
+export async function accountLoader() {
+  const user = await requireAuth();
+
+  let hasBBS = false;
+  let bbsName: string | null = null;
+  try {
+    const siteRecord = await getRecord(user.did, SITE, "self");
+    hasBBS = true;
+    const siteValue = siteRecord.value as unknown as { name?: string };
+    bbsName = siteValue.name ?? user.handle;
+  } catch {
+    // no site
+  }
+
+  const itemsPromise = fetchInbox(user.did, user.pdsUrl);
+  return { user, hasBBS, bbsName, items: itemsPromise };
+}
+
+export async function requireAuthLoader() {
+  return { user: await requireAuth() };
+}
diff --git a/web/src/router/loaders/auth.ts b/web/src/router/loaders/auth.ts
new file mode 100644
index 0000000..99a26f7
--- /dev/null
+++ b/web/src/router/loaders/auth.ts
@@ -0,0 +1,9 @@
+import { redirect } from "react-router-dom";
+import { ensureAuthReady, getCurrentUser } from "../../lib/auth";
+
+export async function requireAuth() {
+  await ensureAuthReady();
+  const user = getCurrentUser();
+  if (!user) throw redirect("/login");
+  return user;
+}
diff --git a/web/src/router/loaders/bbs.ts b/web/src/router/loaders/bbs.ts
new file mode 100644
index 0000000..2eb1001
--- /dev/null
+++ b/web/src/router/loaders/bbs.ts
@@ -0,0 +1,10 @@
+import type { LoaderFunctionArgs } from "react-router-dom";
+import { resolveBBS, type BBS } from "../../lib/bbs";
+
+export async function bbsLoader({ params }: LoaderFunctionArgs) {
+  const handle = params.handle!;
+  const bbs = await resolveBBS(handle);
+  return { handle, bbs };
+}
+
+export type BBSLoaderData = { handle: string; bbs: BBS };
diff --git a/web/src/router/loaders/board.ts b/web/src/router/loaders/board.ts
new file mode 100644
index 0000000..3927fdb
--- /dev/null
+++ b/web/src/router/loaders/board.ts
@@ -0,0 +1,72 @@
+import type { LoaderFunctionArgs } from "react-router-dom";
+import { resolveBBS, type BBS } from "../../lib/bbs";
+import {
+  getBacklinks,
+  getRecordsBatch,
+  resolveIdentitiesBatch,
+  type ATRecord,
+} from "../../lib/atproto";
+import { THREAD, BOARD } from "../../lib/lexicon";
+import { makeAtUri, parseAtUri } from "../../lib/util";
+import { is } from "@atcute/lexicons/validations";
+import { mainSchema as threadSchema } from "../../lexicons/types/xyz/atboards/thread";
+import type { XyzAtboardsThread } from "../../lexicons";
+
+export interface ThreadItem {
+  uri: string;
+  did: string;
+  rkey: string;
+  handle: string;
+  title: string;
+  body: string;
+  createdAt: string;
+}
+
+export async function hydrateThreadPage(
+  bbs: BBS,
+  slug: string,
+  cursor?: string,
+): Promise<{ threads: ThreadItem[]; cursor: string | null }> {
+  const boardUri = makeAtUri(bbs.identity.did, BOARD, slug);
+  const backlinks = await getBacklinks(boardUri, `${THREAD}:board`, 50, cursor);
+  const records = await getRecordsBatch(backlinks.records);
+  const filtered = records.filter((record) => {
+    const { did } = parseAtUri(record.uri);
+    return (
+      !bbs.site.bannedDids.has(did) &&
+      !bbs.site.hiddenPosts.has(record.uri) &&
+      is(threadSchema, record.value)
+    );
+  });
+  const authors = await resolveIdentitiesBatch(
+    filtered.map((record) => parseAtUri(record.uri).did),
+  );
+  const threads: ThreadItem[] = filtered
+    .filter((record) => parseAtUri(record.uri).did in authors)
+    .map((record: ATRecord) => {
+      const { did, rkey } = parseAtUri(record.uri);
+      const value = record.value as unknown as XyzAtboardsThread.Main;
+      return {
+        uri: record.uri,
+        did,
+        rkey,
+        handle: authors[did].handle,
+        title: value.title,
+        body: value.body,
+        createdAt: value.createdAt,
+      };
+    })
+    .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  return { threads, cursor: backlinks.cursor ?? null };
+}
+
+export async function boardLoader({ params }: LoaderFunctionArgs) {
+  const handle = params.handle!;
+  const slug = params.slug!;
+  const bbs = await resolveBBS(handle);
+  const board = bbs.site.boards.find((board) => board.slug === slug);
+  if (!board) throw new Response("Board not found", { status: 404 });
+
+  const { threads, cursor } = await hydrateThreadPage(bbs, slug);
+  return { handle, bbs, board, threads, cursor };
+}
diff --git a/web/src/router/loaders/index.ts b/web/src/router/loaders/index.ts
new file mode 100644
index 0000000..d382da8
--- /dev/null
+++ b/web/src/router/loaders/index.ts
@@ -0,0 +1,13 @@
+export { bbsLoader, type BBSLoaderData } from "./bbs";
+export { boardLoader, hydrateThreadPage, type ThreadItem } from "./board";
+export { threadLoader, type ThreadObj } from "./thread";
+export {
+  accountLoader,
+  requireAuthLoader,
+  type InboxItem,
+} from "./account";
+export {
+  sysopEditLoader,
+  sysopModerateLoader,
+  type HiddenInfo,
+} from "./sysop";
diff --git a/web/src/router/loaders/sysop.ts b/web/src/router/loaders/sysop.ts
new file mode 100644
index 0000000..6ab1781
--- /dev/null
+++ b/web/src/router/loaders/sysop.ts
@@ -0,0 +1,111 @@
+import { redirect } from "react-router-dom";
+import { resolveBBS, type BBS } from "../../lib/bbs";
+import {
+  getRecordByUri,
+  listRecords,
+  resolveIdentitiesBatch,
+  resolveIdentity,
+} from "../../lib/atproto";
+import { BAN, HIDE } from "../../lib/lexicon";
+import { parseAtUri } from "../../lib/util";
+import { is } from "@atcute/lexicons/validations";
+import { mainSchema as banSchema } from "../../lexicons/types/xyz/atboards/ban";
+import { mainSchema as hideSchema } from "../../lexicons/types/xyz/atboards/hide";
+import type { XyzAtboardsBan, XyzAtboardsHide } from "../../lexicons";
+import { requireAuth } from "./auth";
+
+export interface HiddenInfo {
+  uri: string;
+  handle: string;
+  title: string;
+  body: string;
+}
+
+function buildRkeyMap<T>(
+  records: { uri: string; value: Record<string, unknown> }[],
+  schema: Parameters<typeof is>[0],
+  getKey: (value: T) => string,
+): Record<string, string> {
+  const map: Record<string, string> = {};
+  for (const record of records) {
+    if (!is(schema, record.value)) continue;
+    map[getKey(record.value as unknown as T)] = parseAtUri(record.uri).rkey;
+  }
+  return map;
+}
+
+async function hydrateHiddenPosts(uris: Set<string>): Promise<HiddenInfo[]> {
+  const hidden: HiddenInfo[] = [];
+  for (const uri of uris) {
+    const did = parseAtUri(uri).did;
+    let handle = did;
+    try {
+      handle = (await resolveIdentity(did)).handle;
+    } catch {}
+    try {
+      const record = await getRecordByUri(uri);
+      const value = record.value as unknown as { title?: string; body?: string };
+      hidden.push({
+        uri,
+        handle,
+        title: value.title ?? "",
+        body: (value.body ?? "").substring(0, 100),
+      });
+    } catch {
+      hidden.push({ uri, handle, title: "", body: uri });
+    }
+  }
+  return hidden;
+}
+
+export async function sysopEditLoader() {
+  const user = await requireAuth();
+  try {
+    const bbs = await resolveBBS(user.handle);
+    return { user, bbs };
+  } catch {
+    throw redirect("/account/create");
+  }
+}
+
+export async function sysopModerateLoader() {
+  const user = await requireAuth();
+
+  let bbs: BBS;
+  try {
+    bbs = await resolveBBS(user.handle);
+  } catch {
+    throw redirect("/account/create");
+  }
+
+  const [banRecs, hideRecs] = await Promise.all([
+    listRecords(user.pdsUrl, user.did, BAN),
+    listRecords(user.pdsUrl, user.did, HIDE),
+  ]);
+
+  const banRkeys = buildRkeyMap<XyzAtboardsBan.Main>(
+    banRecs,
+    banSchema,
+    (ban) => ban.did,
+  );
+  const hideRkeys = buildRkeyMap<XyzAtboardsHide.Main>(
+    hideRecs,
+    hideSchema,
+    (hide) => hide.uri,
+  );
+
+  let bannedHandles: Record<string, string> = {};
+  if (bbs.site.bannedDids.size) {
+    try {
+      const authors = await resolveIdentitiesBatch([...bbs.site.bannedDids]);
+      for (const did of bbs.site.bannedDids)
+        bannedHandles[did] = authors[did]?.handle ?? did;
+    } catch {
+      for (const did of bbs.site.bannedDids) bannedHandles[did] = did;
+    }
+  }
+
+  const hidden = await hydrateHiddenPosts(bbs.site.hiddenPosts);
+
+  return { user, bbs, banRkeys, bannedHandles, hideRkeys, hidden };
+}
diff --git a/web/src/router/loaders/thread.ts b/web/src/router/loaders/thread.ts
new file mode 100644
index 0000000..bb6206c
--- /dev/null
+++ b/web/src/router/loaders/thread.ts
@@ -0,0 +1,71 @@
+import type { LoaderFunctionArgs } from "react-router-dom";
+import { resolveBBS } from "../../lib/bbs";
+import {
+  getRecord,
+  getBacklinks,
+  resolveIdentity,
+  type BacklinkRef,
+} from "../../lib/atproto";
+import { THREAD, REPLY } from "../../lib/lexicon";
+import { makeAtUri, parseAtUri } from "../../lib/util";
+import { is } from "@atcute/lexicons/validations";
+import { mainSchema as threadSchema } from "../../lexicons/types/xyz/atboards/thread";
+import type { XyzAtboardsThread } from "../../lexicons";
+
+export interface ThreadObj {
+  uri: string;
+  did: string;
+  rkey: string;
+  authorHandle: string;
+  authorPds: string;
+  title: string;
+  body: string;
+  createdAt: string;
+  boardSlug: string;
+  attachments?: { file: { ref: { $link: string } }; name: string }[];
+}
+
+async function collectAllReplyRefs(threadUri: string): Promise<BacklinkRef[]> {
+  const collected: BacklinkRef[] = [];
+  let cursor: string | undefined;
+  for (let i = 0; i < 20; i++) {
+    const page = await getBacklinks(threadUri, `${REPLY}:subject`, 100, cursor);
+    collected.push(...page.records);
+    if (!page.cursor) break;
+    cursor = page.cursor;
+  }
+  return collected.reverse(); // oldest first
+}
+
+export async function threadLoader({ params }: LoaderFunctionArgs) {
+  const handle = params.handle!;
+  const did = params.did!;
+  const tid = params.tid!;
+
+  const threadUri = makeAtUri(did, THREAD, tid);
+  const [bbs, threadRecord, author, allRefs] = await Promise.all([
+    resolveBBS(handle),
+    getRecord(did, THREAD, tid),
+    resolveIdentity(did),
+    collectAllReplyRefs(threadUri),
+  ]);
+  if (!is(threadSchema, threadRecord.value)) {
+    throw new Response("Invalid thread record", { status: 404 });
+  }
+  const threadValue = threadRecord.value as unknown as XyzAtboardsThread.Main;
+  const boardSlug = parseAtUri(threadValue.board).rkey;
+  const thread: ThreadObj = {
+    uri: threadRecord.uri,
+    did,
+    rkey: tid,
+    authorHandle: author.handle,
+    authorPds: author.pds ?? "",
+    title: threadValue.title,
+    body: threadValue.body,
+    createdAt: threadValue.createdAt,
+    boardSlug,
+    attachments: threadValue.attachments as ThreadObj["attachments"],
+  };
+
+  return { handle, bbs, thread, allRefs };
+}