From f4d6a9a280c4c28b12af55fff0c21ab2d640edca Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@aly.codes>
Date: Thu, 23 Apr 2026 21:31:38 -0400
Subject: [PATCH] web: cleanup silly stuff

---
 web/src/components/form/BoardRowEditor.tsx | 10 +--
 web/src/lib/alerts.ts                      |  6 ++
 web/src/lib/threadCache.ts                 | 79 +++++++++++++++++++
 web/src/pages/BBS.tsx                      |  7 +-
 web/src/pages/Board.tsx                    |  9 +--
 web/src/pages/News.tsx                     |  7 +-
 web/src/pages/SysopCreate.tsx              |  6 +-
 web/src/pages/SysopEdit.tsx                |  6 +-
 web/src/pages/SysopModerate.tsx            | 26 +++---
 web/src/pages/Thread.tsx                   | 92 +++-------------------
 10 files changed, 129 insertions(+), 119 deletions(-)
 create mode 100644 web/src/lib/alerts.ts
 create mode 100644 web/src/lib/threadCache.ts

diff --git a/web/src/components/form/BoardRowEditor.tsx b/web/src/components/form/BoardRowEditor.tsx
index 7ac090a..58892ac 100644
--- a/web/src/components/form/BoardRowEditor.tsx
+++ b/web/src/components/form/BoardRowEditor.tsx
@@ -4,7 +4,7 @@ import * as limits from "../../lib/limits";
 export interface BoardRow {
   slug: string;
   name: string;
-  desc: string;
+  description: string;
 }
 
 interface BoardRowEditorProps {
@@ -27,7 +27,7 @@ export default function BoardRowEditor({
     <div>
       <label className="block text-neutral-400 mb-1">Boards</label>
       <p className="text-neutral-400 text-xs mb-2">
-        One board per row: slug, name, description
+        One board per row: slug, name, descriptionription
       </p>
       <div className="space-y-2">
         {boards.map((board, i) => (
@@ -46,8 +46,8 @@ export default function BoardRowEditor({
               className="w-1/3!"
             />
             <Input
-              value={board.desc}
-              onChange={(e) => updateBoard(i, "desc", e.target.value)}
+              value={board.description}
+              onChange={(e) => updateBoard(i, "description", e.target.value)}
               placeholder="Description"
               maxLength={limits.BOARD_DESCRIPTION}
               className="flex-1!"
@@ -57,7 +57,7 @@ export default function BoardRowEditor({
       </div>
       <button
         type="button"
-        onClick={() => onChange([...boards, { slug: "", name: "", desc: "" }])}
+        onClick={() => onChange([...boards, { slug: "", name: "", description: "" }])}
         className="mt-2 text-neutral-400 hover:text-neutral-300 text-xs"
       >
         + add board
diff --git a/web/src/lib/alerts.ts b/web/src/lib/alerts.ts
new file mode 100644
index 0000000..3a0efd6
--- /dev/null
+++ b/web/src/lib/alerts.ts
@@ -0,0 +1,6 @@
+export function alertOnError(operation: string) {
+  return (err: unknown) =>
+    alert(
+      `Could not ${operation}: ${err instanceof Error ? err.message : err}`,
+    );
+}
diff --git a/web/src/lib/threadCache.ts b/web/src/lib/threadCache.ts
new file mode 100644
index 0000000..09a2483
--- /dev/null
+++ b/web/src/lib/threadCache.ts
@@ -0,0 +1,79 @@
+import { queryClient } from "./queryClient";
+import { threadPageQuery, threadRefsQuery } from "./queries";
+import { REPLIES_PER_PAGE, refToUri } from "./replies";
+import type { BacklinkRef } from "./atproto";
+import type { ReplyPage } from "./thread";
+import type { Reply } from "../components/post/ReplyCard";
+
+export async function cancelRefsRefetch(threadUri: string) {
+  await queryClient.cancelQueries({
+    queryKey: threadRefsQuery(threadUri).queryKey,
+  });
+}
+
+export function getRefs(threadUri: string): BacklinkRef[] {
+  const key = threadRefsQuery(threadUri).queryKey;
+  return queryClient.getQueryData<BacklinkRef[]>(key) ?? [];
+}
+
+export function setRefs(threadUri: string, refs: BacklinkRef[]) {
+  queryClient.setQueryData(threadRefsQuery(threadUri).queryKey, refs);
+}
+
+function pageSlice(refs: BacklinkRef[], page: number): BacklinkRef[] {
+  const start = (page - 1) * REPLIES_PER_PAGE;
+  return refs.slice(start, start + REPLIES_PER_PAGE);
+}
+
+// threadPageQuery's key is fingerprinted by reply rkeys, so adding or removing
+// a reply changes the cache key. We read the pre-change page data from the old
+// key and seed the new key explicitly.
+export function appendRefAndReply(
+  threadUri: string,
+  newRef: BacklinkRef,
+  newReply: Reply,
+): BacklinkRef[] {
+  const previousRefs = getRefs(threadUri);
+  const updatedRefs = [...previousRefs, newRef];
+
+  const newLastPage = Math.max(
+    1,
+    Math.ceil(updatedRefs.length / REPLIES_PER_PAGE),
+  );
+  const oldPageRefs = pageSlice(previousRefs, newLastPage);
+  const oldKey = threadPageQuery(threadUri, newLastPage, oldPageRefs).queryKey;
+  const oldData = queryClient.getQueryData<ReplyPage>(oldKey);
+
+  setRefs(threadUri, updatedRefs);
+
+  const pageRefs = pageSlice(updatedRefs, newLastPage);
+  const newKey = threadPageQuery(threadUri, newLastPage, pageRefs).queryKey;
+  queryClient.setQueryData<ReplyPage>(newKey, {
+    replies: [...(oldData?.replies ?? []), newReply],
+    parentReplies: oldData?.parentReplies ?? {},
+  });
+
+  return updatedRefs;
+}
+
+export function removeRefAndReply(
+  threadUri: string,
+  replyUri: string,
+  currentPage: number,
+) {
+  const previousRefs = getRefs(threadUri);
+  const oldPageRefs = pageSlice(previousRefs, currentPage);
+  const oldKey = threadPageQuery(threadUri, currentPage, oldPageRefs).queryKey;
+  const oldData = queryClient.getQueryData<ReplyPage>(oldKey);
+
+  const updatedRefs = previousRefs.filter((ref) => refToUri(ref) !== replyUri);
+  setRefs(threadUri, updatedRefs);
+
+  if (!oldData) return;
+  const pageRefs = pageSlice(updatedRefs, currentPage);
+  const newKey = threadPageQuery(threadUri, currentPage, pageRefs).queryKey;
+  queryClient.setQueryData<ReplyPage>(newKey, {
+    ...oldData,
+    replies: oldData.replies.filter((r) => r.uri !== replyUri),
+  });
+}
diff --git a/web/src/pages/BBS.tsx b/web/src/pages/BBS.tsx
index c547550..fd71ee6 100644
--- a/web/src/pages/BBS.tsx
+++ b/web/src/pages/BBS.tsx
@@ -20,6 +20,7 @@ import { makeAtUri, nowIso, parseAtUri, truncate } from "../lib/util";
 import * as limits from "../lib/limits";
 import { bbsQuery, newsQuery, pinsQuery } from "../lib/queries";
 import { queryClient } from "../lib/queryClient";
+import { alertOnError } from "../lib/alerts";
 import type { NewsPost } from "../lib/bbs";
 import ComposeForm from "../components/form/ComposeForm";
 import Localtime from "../components/Localtime";
@@ -89,11 +90,7 @@ export default function BBSPage() {
       setNewsBody("");
       setNewsFiles([]);
     },
-    onError: (error) => {
-      alert(
-        `Could not post: ${error instanceof Error ? error.message : error}`,
-      );
-    },
+    onError: alertOnError("post"),
   });
 
   function onPostNews(event: SyntheticEvent) {
diff --git a/web/src/pages/Board.tsx b/web/src/pages/Board.tsx
index f1ef838..c2f950b 100644
--- a/web/src/pages/Board.tsx
+++ b/web/src/pages/Board.tsx
@@ -22,6 +22,7 @@ import {
   myThreadsQuery,
 } from "../lib/queries";
 import { queryClient } from "../lib/queryClient";
+import { alertOnError } from "../lib/alerts";
 import type { ThreadItem, ThreadPageResult } from "../lib/boardThreads";
 import ThreadLink, { ThreadListHeader } from "../components/nav/ThreadLink";
 import ComposeForm from "../components/form/ComposeForm";
@@ -143,18 +144,14 @@ export default function BoardPage() {
           };
         },
       );
-      refetchUntilIndexed(boardKey, resp.data.uri);
+      void refetchUntilIndexed(boardKey, resp.data.uri);
       queryClient.invalidateQueries(myThreadsQuery(user.pdsUrl, user.did));
       setTitle("");
       setBody("");
       setFiles([]);
       navigate(`/bbs/${handle}/thread/${did}/${rkey}`);
     },
-    onError: (error) => {
-      alert(
-        `Could not post: ${error instanceof Error ? error.message : error}`,
-      );
-    },
+    onError: alertOnError("post"),
   });
 
   function onCreate(event: SyntheticEvent) {
diff --git a/web/src/pages/News.tsx b/web/src/pages/News.tsx
index 559f6c9..c09a334 100644
--- a/web/src/pages/News.tsx
+++ b/web/src/pages/News.tsx
@@ -7,6 +7,7 @@ import { POST } from "../lib/lexicon";
 import { deleteRecord } from "../lib/writes";
 import { bbsQuery, newsQuery } from "../lib/queries";
 import { queryClient } from "../lib/queryClient";
+import { alertOnError } from "../lib/alerts";
 import type { NewsPost } from "../lib/bbs";
 import NewsCard from "../components/post/NewsCard";
 
@@ -44,11 +45,7 @@ export default function NewsPage() {
       );
       navigate(`/bbs/${handle}`);
     },
-    onError: (error) => {
-      alert(
-        `Could not delete: ${error instanceof Error ? error.message : error}`,
-      );
-    },
+    onError: alertOnError("delete"),
   });
 
   if (!item) {
diff --git a/web/src/pages/SysopCreate.tsx b/web/src/pages/SysopCreate.tsx
index aaecf37..e74e405 100644
--- a/web/src/pages/SysopCreate.tsx
+++ b/web/src/pages/SysopCreate.tsx
@@ -23,7 +23,7 @@ export default function SysopCreate() {
     {
       slug: DEFAULT_BOARD.slug,
       name: DEFAULT_BOARD.name,
-      desc: DEFAULT_BOARD.description,
+      description: DEFAULT_BOARD.description,
     },
   ]);
   const [error, setError] = useState<string | null>(null);
@@ -37,7 +37,7 @@ export default function SysopCreate() {
       .map((board) => ({
         slug: board.slug.trim(),
         name: board.name.trim(),
-        desc: board.desc.trim(),
+        description: board.description.trim(),
       }))
       .filter((board) => board.slug);
     if (!name.trim() || !cleanBoards.length) {
@@ -51,7 +51,7 @@ export default function SysopCreate() {
           agent,
           board.slug,
           board.name || board.slug,
-          board.desc,
+          board.description,
           now,
         );
       }
diff --git a/web/src/pages/SysopEdit.tsx b/web/src/pages/SysopEdit.tsx
index cd4748e..fda23b3 100644
--- a/web/src/pages/SysopEdit.tsx
+++ b/web/src/pages/SysopEdit.tsx
@@ -28,7 +28,7 @@ export default function SysopEdit() {
     bbs.site.boards.map((board) => ({
       slug: board.slug,
       name: board.name,
-      desc: board.description,
+      description: board.description,
     })),
   );
   const [error, setError] = useState<string | null>(null);
@@ -42,7 +42,7 @@ export default function SysopEdit() {
       .map((board) => ({
         slug: board.slug.trim(),
         name: board.name.trim(),
-        desc: board.desc.trim(),
+        description: board.description.trim(),
       }))
       .filter((board) => board.slug);
     const now = nowIso();
@@ -52,7 +52,7 @@ export default function SysopEdit() {
           agent,
           board.slug,
           board.name || board.slug,
-          board.desc,
+          board.description,
           now,
         );
       }
diff --git a/web/src/pages/SysopModerate.tsx b/web/src/pages/SysopModerate.tsx
index 0862ecf..3633df7 100644
--- a/web/src/pages/SysopModerate.tsx
+++ b/web/src/pages/SysopModerate.tsx
@@ -10,6 +10,7 @@ import HandleInput from "../components/form/HandleInput";
 import { Button } from "../components/form/Form";
 import { usePageTitle } from "../hooks/usePageTitle";
 import { createBan, createHide, deleteRecord } from "../lib/writes";
+import { alertOnError } from "../lib/alerts";
 
 export default function SysopModerate() {
   const { user, agent } = useAuth();
@@ -42,8 +43,7 @@ export default function SysopModerate() {
       setIdentifier("");
       refreshModeration();
     },
-    onError: (err) =>
-      alert(`Could not ban: ${err instanceof Error ? err.message : err}`),
+    onError: alertOnError("ban"),
   });
 
   const unbanMutation = useMutation({
@@ -85,12 +85,12 @@ export default function SysopModerate() {
   }
 
   function hide() {
-    const u = hideUri.trim();
-    if (!u.startsWith("at://")) {
+    const uri = hideUri.trim();
+    if (!uri.startsWith("at://")) {
       alert("Enter a valid AT-URI.");
       return;
     }
-    hideMutation.mutate(u);
+    hideMutation.mutate(uri);
   }
 
   function unhide(rkey: string) {
@@ -149,24 +149,24 @@ export default function SysopModerate() {
         <div>
           <label className="block text-neutral-400 mb-3">Hidden Posts</label>
           <div className="space-y-1 mb-3">
-            {hidden.map((p) => (
+            {hidden.map((post) => (
               <div
-                key={p.uri}
-                title={p.uri}
+                key={post.uri}
+                title={post.uri}
                 className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800"
               >
                 <a
-                  href={`https://pdsls.dev/${p.uri}`}
+                  href={`https://pdsls.dev/${post.uri}`}
                   target="_blank"
                   rel="noreferrer"
-                  aria-label={`${p.handle} — ${p.title || p.body} (opens in new tab)`}
+                  aria-label={`${post.handle} — ${post.title || post.body} (opens in new tab)`}
                   className="truncate text-neutral-300 hover:text-neutral-200"
                 >
-                  {p.handle} — {p.title || p.body}
+                  {post.handle} — {post.title || post.body}
                 </a>
-                {hideRkeys[p.uri] && (
+                {hideRkeys[post.uri] && (
                   <button
-                    onClick={() => unhide(hideRkeys[p.uri])}
+                    onClick={() => unhide(hideRkeys[post.uri])}
                     className="text-xs text-neutral-400 hover:text-red-400 shrink-0"
                   >
                     unhide
diff --git a/web/src/pages/Thread.tsx b/web/src/pages/Thread.tsx
index d0c0b67..f9869f9 100644
--- a/web/src/pages/Thread.tsx
+++ b/web/src/pages/Thread.tsx
@@ -19,16 +19,21 @@ import {
   bbsModerationQuery,
   bbsQuery,
   myThreadsQuery,
-  threadPageQuery,
-  threadRefsQuery,
   threadRootQuery,
 } from "../lib/queries";
 import { queryClient } from "../lib/queryClient";
 import { threadUriFor } from "../lib/thread";
-import { REPLIES_PER_PAGE, refToUri } from "../lib/replies";
+import { REPLIES_PER_PAGE } from "../lib/replies";
+import {
+  appendRefAndReply,
+  cancelRefsRefetch,
+  getRefs,
+  removeRefAndReply,
+  setRefs,
+} from "../lib/threadCache";
 import { invalidateAllBBSCaches } from "../lib/bbs";
+import { alertOnError } from "../lib/alerts";
 import type { BacklinkRef } from "../lib/atproto";
-import type { ReplyPage } from "../lib/thread";
 import type { BBS } from "../lib/bbs";
 import PageNav from "../components/nav/PageNav";
 import ReplyCard, { type Reply } from "../components/post/ReplyCard";
@@ -133,10 +138,7 @@ export default function ThreadPage() {
       );
       if (page !== newLastPage) setPage(newLastPage);
     },
-    onError: (err) =>
-      alert(
-        `Could not post reply: ${err instanceof Error ? err.message : err}`,
-      ),
+    onError: alertOnError("post reply"),
   });
 
   const deleteReplyMutation = useMutation({
@@ -146,15 +148,14 @@ export default function ThreadPage() {
       return reply;
     },
     onMutate: async (reply) => {
-      const refsKey = threadRefsQuery(threadUri).queryKey;
-      await queryClient.cancelQueries({ queryKey: refsKey });
+      await cancelRefsRefetch(threadUri);
       const previousRefs = getRefs(threadUri);
       removeRefAndReply(threadUri, reply.uri, page);
       return { previousRefs };
     },
     onError: (err, _reply, context) => {
       if (context) setRefs(threadUri, context.previousRefs);
-      alert(`Could not delete: ${err instanceof Error ? err.message : err}`);
+      alertOnError("delete")(err);
     },
   });
 
@@ -169,8 +170,7 @@ export default function ThreadPage() {
       }
       navigate(`/bbs/${handle}`);
     },
-    onError: (err) =>
-      alert(`Could not delete: ${err instanceof Error ? err.message : err}`),
+    onError: alertOnError("delete"),
   });
 
   const moderationMutationDefaults = { onSuccess: invalidateAllBBSCaches };
@@ -344,72 +344,6 @@ export default function ThreadPage() {
   );
 }
 
-// --- Cache-update helpers ---
-
-function getRefs(threadUri: string): BacklinkRef[] {
-  const key = threadRefsQuery(threadUri).queryKey;
-  return queryClient.getQueryData<BacklinkRef[]>(key) ?? [];
-}
-
-function setRefs(threadUri: string, refs: BacklinkRef[]) {
-  queryClient.setQueryData(threadRefsQuery(threadUri).queryKey, refs);
-}
-
-function pageSlice(refs: BacklinkRef[], page: number): BacklinkRef[] {
-  const start = (page - 1) * REPLIES_PER_PAGE;
-  return refs.slice(start, start + REPLIES_PER_PAGE);
-}
-
-function appendRefAndReply(
-  threadUri: string,
-  newRef: BacklinkRef,
-  newReply: Reply,
-): BacklinkRef[] {
-  const previousRefs = getRefs(threadUri);
-  const updatedRefs = [...previousRefs, newRef];
-
-  const newLastPage = Math.max(
-    1,
-    Math.ceil(updatedRefs.length / REPLIES_PER_PAGE),
-  );
-  const oldPageRefs = pageSlice(previousRefs, newLastPage);
-  const oldKey = threadPageQuery(threadUri, newLastPage, oldPageRefs).queryKey;
-  const oldData = queryClient.getQueryData<ReplyPage>(oldKey);
-
-  setRefs(threadUri, updatedRefs);
-
-  const pageRefs = pageSlice(updatedRefs, newLastPage);
-  const newKey = threadPageQuery(threadUri, newLastPage, pageRefs).queryKey;
-  queryClient.setQueryData<ReplyPage>(newKey, {
-    replies: [...(oldData?.replies ?? []), newReply],
-    parentReplies: oldData?.parentReplies ?? {},
-  });
-
-  return updatedRefs;
-}
-
-function removeRefAndReply(
-  threadUri: string,
-  replyUri: string,
-  currentPage: number,
-) {
-  const previousRefs = getRefs(threadUri);
-  const oldPageRefs = pageSlice(previousRefs, currentPage);
-  const oldKey = threadPageQuery(threadUri, currentPage, oldPageRefs).queryKey;
-  const oldData = queryClient.getQueryData<ReplyPage>(oldKey);
-
-  const updatedRefs = previousRefs.filter((ref) => refToUri(ref) !== replyUri);
-  setRefs(threadUri, updatedRefs);
-
-  if (!oldData) return;
-  const pageRefs = pageSlice(updatedRefs, currentPage);
-  const newKey = threadPageQuery(threadUri, currentPage, pageRefs).queryKey;
-  queryClient.setQueryData<ReplyPage>(newKey, {
-    ...oldData,
-    replies: oldData.replies.filter((r) => r.uri !== replyUri),
-  });
-}
-
 function buildBreadcrumb(
   bbs: BBS,
   threadTitle: string,
-- 
2.51.2