fedipod-server 0.21.0 → 0.26.0

package/web/app/site/bb/bb.js

@@ -0,0 +1,1617 @@
+// bb.js — the forum website: reads a forum from its pod (through this site's
+// own /u/<handle>/ when the forum is attached here, or a pod named outright)
+// and shows categories, topics and threads. Replying signs the reader in
+// with a Mastodon account and posts from it; the reply appears here once the
+// forum's host has placed it, and until then the reader sees their own copy
+// marked as waiting.
+//
+//   /bb/?forum=<handle>            a forum attached to this site
+//   /bb/?pod=https://…/fedipod-bb/  a forum read from its pod directly
+//   https://bb.<site>/<handle>/     the same forum at its own address
+//   #/  #/c/<slug>  #/t/<slug>/<tid>
+
+import { reader, placeOf, authorLabel, cacheKey, categoryBase } from './read.mjs?v=1e46e77224';
+import { MastoLogin, hostOfHandle, serverKind, actorOfHandle } from './masto.mjs?v=2e3c531c63';
+import * as pod from './pod.mjs?v=5d0995ec1d';
+import { mine as keptByReader } from './mine.mjs?v=2e33e2ff90';
+import { readState } from './seen.mjs?v=1a3acc66e7';
+import { toHtml } from './markdown.mjs?v=83efe6b33d';
+
+const $ = (id) => document.getElementById(id);
+// Said to a screen reader when the page changes under it and no focus moves:
+// what is loading, how much arrived, that a link was copied.
+const say = (msg) => { const el = $('say'); if (el) el.textContent = msg; };
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const when = (iso) => { const d = new Date(iso); return Number.isNaN(d.getTime()) ? '' : d.toISOString().slice(0, 10); };
+const ago = (iso) => {
+  const ms = Date.now() - Date.parse(iso);
+  if (!Number.isFinite(ms)) return '';
+  const m = Math.round(ms / 60_000);
+  if (m < 2) return 'just now';
+  if (m < 90) return `${m} min ago`;
+  const h = Math.round(m / 60);
+  if (h < 36) return `${h} h ago`;
+  return `${Math.round(h / 24)} days ago`;
+};
+
+const params = new URLSearchParams(location.search);
+const place = placeOf({ origin: location.origin, pathname: location.pathname, search: location.search });
+const { front, base } = place;
+const frontHost = new URL(front).host;
+// The reader asks anonymously first; where a category is members-only it
+// asks again with the pod session, if there is one.
+let read = reader();
+const login = new MastoLogin({ storage: localStorage, redirectUri: location.origin + location.pathname + location.search });
+// What this reader has already read. Theirs, in their own browser: a public
+// forum has nowhere to keep it and no business keeping it.
+const seen = base ? readState({ storage: localStorage, forum: base }) : null;
+
+let forum = null;
+let podAcct = null;          // { handle, actor, webId } when signed in with a pod
+let moderators = [];         // the category's own list, read from the forum
+const account = () => podAcct || login.account();
+const cats = () => forum?.categories || [];
+const iModerate = () => {
+  const me = podAcct?.actor || login.account()?.url;
+  return !!me && moderators.includes(me);
+};
+const catBySlug = (slug) => cats().find(c => c.slug === slug || c.base.endsWith('/c/' + slug + '/'));
+const handleOf = (cat) => {
+  // Through a Gateway a category answers as @slug@gateway; read from a pod, its id is its address.
+  if (place.handle && cat.slug) return `@${cat.slug}@${frontHost}`;
+  return cat.id;
+};
+// A post names the category it is for, and every reader of this page is
+// already in it: the address is how it got here, not something to read.
+function body(p, cat) {
+  const html = p?.content || '';
+  if (!cat) return html;
+  const d = document.createElement('div');
+  d.innerHTML = html;
+  for (const a of [...d.querySelectorAll('a')]) {
+    const names = a.getAttribute('href') === cat.id
+      || a.textContent.trim().replace(/^@/u, '') === String(cat.slug || '')
+      || a.textContent.trim() === handleOf(cat);
+    if (!names) continue;
+    const p0 = a.closest('p') || a.parentElement;
+    a.remove();
+    if (p0 && !p0.textContent.trim() && !p0.querySelector('img,a')) p0.remove();
+  }
+  return d.innerHTML;
+}
+
+// The author as they are known: their name when the forum kept a card for
+// them, and always the handle, which is the thing that is theirs everywhere.
+function byline(p, author) {
+  if (!author) return esc(p.author ? authorLabel(p.author) : '');
+  const handle = esc(author.handle);
+  const name = author.name && author.name !== author.handle ? esc(author.name) : null;
+  const inner = name ? `${name} <span class="dim">${handle}</span>` : handle;
+  // Their posts in this forum, not their page elsewhere: that is what a
+  // reader here is asking for when they click a name.
+  return `<a href="#/who/${encodeURIComponent(author.id)}">${inner}</a>`;
+}
+
+// Where this post can be READ away from here. A pod answers its post's own
+// address with JSON, so that address is no use to a person and is not shown;
+// a server that publishes a page for it says so, and the link names its host.
+function elsewhere(p) {
+  if (!p?.page) return '';
+  let host = '';
+  try { host = new URL(p.page).host; } catch { return ''; }
+  return ` <a href="${esc(p.page)}" class="dim" rel="noopener">on ${esc(host)}</a>`;
+}
+
+// Whose post this is, as this browser can tell: a pod account is its actor,
+// a Mastodon account is the profile its server gave us.
+const mine = (p) => {
+  const me = podAcct?.actor || login.account()?.url;
+  return !!me && !!p?.author && (p.author === me || p.author === podAcct?.webId);
+};
+
+// A thread in the shape it was written: each reply under the post it answers,
+// and anything whose parent is not here at the top level. Depth is capped so
+// a long argument does not walk off the side of the page.
+const MAX_DEPTH = 6;
+async function threaded(posts, authors, cat) {
+  const byId = new Map(posts.map(p => [p.id, p]));
+  const kids = new Map();
+  const roots = [];
+  for (const p of posts) {
+    const parent = p.inReplyTo && byId.has(p.inReplyTo) && p.inReplyTo !== p.id ? p.inReplyTo : null;
+    if (!parent) { roots.push(p); continue; }
+    if (!kids.has(parent)) kids.set(parent, []);
+    kids.get(parent).push(p);
+  }
+  const out = [];
+  const walk = async (p, depth) => {
+    const html = card(p, { author: p.author ? authors.get(p.author) : null, cat, anchor: await cacheKey(p.id) });
+    out.push(depth ? `<div class="nest" style="--depth:${Math.min(depth, MAX_DEPTH)}">${html}</div>` : html);
+    for (const k of kids.get(p.id) || []) await walk(k, depth + 1);
+  };
+  for (const r of roots) await walk(r, 0);
+  return out;
+}
+
+function topicActs(topicId) {
+  if (!iModerate()) return '';
+  return `<div class="acts mod" role="group" aria-label="Moderator actions for this topic" data-topic="${esc(topicId)}">
+    <button data-act="rename">Rename topic</button>
+    <button data-act="unlock">Reopen topic</button>
+    <button data-act="pin">Pin topic</button><button data-act="unpin">Unpin topic</button>
+    <button data-act="sitepin">Pin site-wide</button><button data-act="siteunpin">Unpin site-wide</button>
+    <button class="grave" data-act="lock">Close topic</button><button class="grave" data-act="droptopic">Delete topic</button>
+  </div>`;
+}
+
+// Voting, both ways, as a forum has always had it: up, down, and the one you
+// cast again to take it back. A reader with no account sees the counts.
+function votes(p) {
+  const up = p.likes || 0;
+  const down = p.dislikes || 0;
+  // Signed out, the buttons are still buttons: pressing one asks who you are
+  // and then casts the vote. Showing the counts as dead text hid the fact that
+  // voting was possible at all.
+  const mineWay = account() ? own().votedOn(p.id) : 'none';
+  const one = (way, mark, n, label) => `<button data-act="vote-${mineWay === way ? 'none' : way}"
+    data-was="${mineWay}"${mineWay === way ? ' aria-pressed="true" class="voted"' : ''}
+    aria-label="${mineWay === way ? `Take back your vote ${label}` : `Vote ${label} this post`}">${mark} ${n}</button>`;
+  return one('up', '▲', up, 'for') + one('down', '▼', down, 'against');
+}
+
+function card(p, { author = null, cat = null, extra = '', waiting = false, anchor = null } = {}) {
+  const at = p.published ? when(p.published) : '';
+  // What a screen reader hears before the words, and what each of this post's
+  // own buttons is called — a thread of them is not twenty identical "Reply"s.
+  const whose = esc(author ? (author.name || author.handle) : (p.author ? authorLabel(p.author) : 'someone'));
+  const named = `${waiting ? 'Waiting: p' : 'P'}ost by ${whose}${at ? `, ${esc(at)}` : ''}`;
+  return `<article class="post${p.gone ? ' gone' : ''}${extra}" aria-label="${named}"${anchor ? ` id="p-${esc(anchor)}"` : ''}>
+    <div class="who"><b>${waiting ? '<span class="dim">waiting for the forum · </span>' : ''}${byline(p, author)}</b>
+      <span class="when">${esc(at)}${elsewhere(p)}</span></div>
+    <div class="body">${p.gone ? 'This post was removed.' : (body(p, cat) || '<span class="dim">(not readable here)</span>')}</div>
+    ${p.gone || waiting || !p.id ? '' : `<div class="acts" data-post="${esc(p.id)}">
+      <button data-act="reply" aria-label="Reply to ${whose}">Reply</button>
+      ${votes(p)}
+      <button data-act="share" aria-label="Copy a link to the post by ${whose}">Share</button>
+      ${account() ? `<button data-act="${own().isSaved(p.id) ? 'unsave' : 'save'}" aria-label="${own().isSaved(p.id) ? 'Remove this post from your bookmarks' : 'Bookmark this post'}">${own().isSaved(p.id) ? 'Bookmarked' : 'Bookmark'}</button>` : ''}
+      ${mine(p) || !account() ? '' : `<button data-act="report" aria-label="Report the post by ${whose}">Report</button>`}
+      ${mine(p) ? '<button data-act="edit" aria-label="Edit your own post">Edit</button><button data-act="delete" aria-label="Delete your own post">Delete</button>' : ''}
+      ${!mine(p) && iModerate() ? `<button data-act="remove" aria-label="Remove the post by ${whose}">Remove</button>` : ''}
+    </div>`}
+  </article>`;
+}
+
+const waitingKey = (topicId) => 'bb:waiting:' + topicId;
+const waiting = (topicId) => { try { return (JSON.parse(localStorage.getItem(waitingKey(topicId)) || '[]') || []).filter(w => w?.id); } catch { return []; } };
+// A copy is kept only for a post that is waiting to be PLACED, and only when
+// it carries the id the topic will name it by: an entry nothing can match is
+// an entry nothing can ever clear.
+const remember = (topicId, entry) => {
+  if (!entry?.id) return;
+  try { localStorage.setItem(waitingKey(topicId), JSON.stringify([...waiting(topicId), entry].slice(-20))); } catch { /* full or blocked */ }
+};
+
+async function load() {
+  if (!base) {
+    $('main').innerHTML = `<p class="err">Name a forum: <code>${esc(location.origin)}/&lt;forum&gt;/</code></p>`;
+    return;
+  }
+  forum = await read.forum(base);
+  if (!forum) {
+    $('main').innerHTML = '<p class="err">No forum answers at this address.</p>';
+    return;
+  }
+  document.title = forum.name || 'FediPod-BB';
+  $('forum-link').textContent = forum.name || 'Forum';
+  // Who moderates, under the line: the forum's own list, each name linking to
+  // the page that account keeps.
+  const mods = (forum.admins || []).map(a => `<a href="#/who/${encodeURIComponent(a.id)}">${esc(a.handle)}</a>`).join(', ');
+  $('mods-who').innerHTML = mods ? `<span class="lead">moderators:</span> ${mods}` : '';
+  route();
+}
+
+function crumbs(parts) {
+  // One stop is no trail: the front page needs no line saying it is the
+  // front page.
+  if (parts.length < 2) { $('crumbs').textContent = ''; $('crumbs').hidden = true; return; }
+  $('crumbs').hidden = false;
+  $('crumbs').innerHTML = parts.map(([label, href], i) => (href && i < parts.length - 1 ? `<a href="${esc(href)}">${esc(label)}</a>` : esc(label))).join(' › ');
+}
+
+// Who the page is holding, in the top row: the handle a reader posts under,
+// and the way in when there is nobody. Signing in from here is what makes the
+// moderator's Queue and Settings reachable at all.
+function paintWho() {
+  const acct = account();
+  $('who-name').textContent = acct ? `signed in as ${acct.handle}` : '';
+  $('who-act').textContent = acct ? 'Sign out' : 'Sign in';
+}
+
+async function route() {
+  paintWho();
+  // Searching and starting a topic belong to the forum's own view; the rest of
+  // the page keeps the moderators line and nothing else.
+  $('mods-acts').innerHTML = '';
+  const mine = ++view;
+  void mine;
+  const hash = location.hash.replace(/^#\/?/u, '');
+  const [kind, a, b, c] = hash.split('/');
+  $('reply-row').hidden = true;
+  $('reply-dlg').close();
+  if (kind === 'replies') return showReplies();
+  if (kind === 'bookmarks' || kind === 'saved') return showSaved();
+  if (kind === 'queue') return showQueue();
+  if (kind === 'settings') return showSettings();
+  if (kind === 'who' && a) return showWho(decodeURIComponent(a));
+  if (kind === 'c' && a) { if (feedFilter !== a) shown = 30; feedFilter = a; return showForum(); }
+  if (kind === 't' && a && b) return showTopic(a, b, c || null);
+  // `#/` IS the whole forum, so arriving at it clears the category. Leaving the
+  // filter where it was meant Home redrew whatever category you had been in,
+  // and All — whose link is `#/` — redrew the same one, which from the reader's
+  // side was a button that did nothing at all.
+  if (feedFilter !== 'all') { feedFilter = 'all'; shown = 30; }
+  return showForum();
+}
+
+// The front page is an index of what has been said, newest first, across the
+// forum: which category, which topic, who, and when. The words themselves are
+// in the topic, one click away.
+let feedFilter = 'all';        // 'all', or a category's slug
+let shown = 30;                // how many of the index's rows are on the page
+let view = 0;                  // which view the page is on; an older one must not draw
+let order = 'date';            // which column the index is ordered by
+let down = true;               // and which way
+let finding = '';              // what the reader is looking for, if anything
+// What this reader keeps for themselves, under the account they signed in as.
+const own = () => keptByReader({ storage: localStorage, who: account()?.handle || null });
+
+// Answers to this reader's own posts, newest first. The forum publishes what
+// each post answers, so nobody has to be told whom to notify.
+async function showReplies() {
+  crumbs([['Home', '#/'], ['Replies to you', null]]);
+  const me = podAcct?.actor || login.account()?.url;
+  if (!me) { $('main').innerHTML = '<p class="empty">Sign in to see answers to your posts.</p>'; return; }
+  $('main').innerHTML = '<p class="dim">Looking…</p>';
+  const latest = await read.latest(base, { limit: 200 });
+  const mineIds = new Set(latest.filter(p => p.author === me).map(p => p.id));
+  const answers = latest.filter(p => p.inReplyTo && mineIds.has(p.inReplyTo) && p.author !== me);
+  if (!answers.length) { $('main').innerHTML = '<p class="empty">Nobody has answered you yet.</p>'; return; }
+  const items = [];
+  for (const p of answers) {
+    const cat = cats().find(c => c.id === p.category) || null;
+    const who = cat && p.author ? await read.author(cat.base, p.author) : null;
+    const tid = p.topic ? p.topic.split('/').pop() : null;
+    const href = cat && tid ? `#/t/${esc(cat.slug)}/${esc(tid)}/${esc(await cacheKey(p.id))}` : '#/';
+    items.push(`<li><a class="title" href="${href}">${esc(p.topicName || 'Topic')}</a>
+      <div class="meta">${who ? esc(who.handle) : esc(authorLabel(p.author || ''))} · ${esc(when(p.published))}</div>
+      <article class="post"><div class="body">${p.content || ''}</div></article></li>`);
+  }
+  $('main').innerHTML = `<ul class="list">${items.join('')}</ul>`;
+}
+
+// Posts this reader kept. The list is theirs and lives in this browser.
+function showSaved() {
+  crumbs([['Home', '#/'], ['Bookmarked', null]]);
+  const rows = own().saved();
+  if (!rows.length) { $('main').innerHTML = '<p class="empty">Nothing bookmarked yet. Use Bookmark on a post.</p>'; return; }
+  $('main').innerHTML = `<ul class="list">${rows.map(r => {
+    const cat = cats().find(c => c.slug === r.cat) || null;
+    const tid = r.topic ? r.topic.split('/').pop() : null;
+    const href = cat && tid ? `#/t/${esc(cat.slug)}/${esc(tid)}` : '#/';
+    return `<li><a class="title" href="${href}">${esc(r.text || r.id)}</a>
+      <div class="meta">bookmarked ${esc(when(r.at))}${cat ? ' · ' + esc(cat.name) : ''}</div></li>`;
+  }).join('')}</ul>`;
+}
+
+// The moderators' queue: reports, posts held from people who have not joined,
+// and asks not yet acted on. Read from the forum's pod with the moderator's
+// own login — it is not public and never passes through the Gateway.
+async function showQueue() {
+  crumbs([['Home', '#/'], ['Queue', null]]);
+  if (!podAcct) { $('main').innerHTML = '<p class="empty">The queue is read with your pod account.</p>'; return; }
+  $('main').innerHTML = '<p class="dim">Reading the queue…</p>';
+  try {
+    const said = await serverKind(new URL(front).host, front, undefined, forum.handle || 'forum');
+    if (!said?.podHome) throw new Error('this forum does not say where its pod is');
+    const q = await pod.modQueue(said.podHome);
+    const rows = q?.rows || [];
+    if (!rows.length) { $('main').innerHTML = '<p class="empty">Nothing is waiting.</p>'; return; }
+    $('main').innerHTML = `<ul class="list">${rows.map(r => `<li>
+      <div class="title">${esc(r.type)}${r.category ? ' · ' + esc(r.category) : ''}</div>
+      <div class="meta">${r.type === 'Flag' ? 'reported by ' : ''}${esc(r.by ? authorLabel(r.by) : '')}${r.about ? ` · about <a href="#/who/${encodeURIComponent(r.about)}">${esc(authorLabel(r.about))}</a>` : ''} · ${esc(when(r.at))}${r.verified ? ' · checked' : ''}</div>
+      ${r.object ? `<div class="dim">${esc(r.object)}</div>` : ''}
+      ${r.failed ? `<p class="err">It did not take: ${esc(r.failed)}${r.failedAt ? ` (${esc(when(r.failedAt))})` : ''}. It is still here and will be tried again.</p>` : ''}
+      ${r.why ? `<article class="post"><div class="body">${esc(r.why)}</div></article>` : ''}
+      ${r.object ? `<div class="acts mod" data-post="${esc(r.object)}" data-cat="${esc(r.category || '')}">
+        ${r.type === 'Held' || r.type === 'Create' ? '<button data-act="approve">Let it through</button><button data-act="refuse">Turn it away</button>' : ''}
+        ${r.type === 'Join request' ? '<button data-act="admit">Admit</button><button data-act="refuse">Turn them away</button>' : ''}
+        ${r.about ? '<button data-act="ban" data-who="' + esc(r.about) + '">Ban the author</button>' : ''}
+        ${r.about && r.object ? '<button data-act="removepost" data-post="' + esc(r.object) + '">Remove the post</button>' : ''}
+        ${r.type !== 'Flag' && r.by ? '<button data-act="ban" data-who="' + esc(r.by) + '">Ban them</button>' : ''}
+      </div>` : ''}
+    </li>`).join('')}</ul>`;
+  } catch (e) { $('main').innerHTML = `<p class="err">${esc(e.message)}</p>`; }
+}
+
+async function showWho(handleOrId) {
+  crumbs([['Home', '#/'], ['Someone', null]]);
+  $('main').innerHTML = '<p class="dim">Looking…</p>';
+  const latest = await read.latest(base, { limit: 200 });
+  const theirs = latest.filter(p => p.author === handleOrId);
+  const cat = theirs[0] ? cats().find(c => c.id === theirs[0].category) : cats()[0];
+  // What the forum kept of them, and failing that their own actor: a moderator
+  // who has never posted here has no card, and this page is where every handle
+  // in the forum now leads.
+  const kept = cat ? await read.author(cat.base, handleOrId) : null;
+  // The copy the forum kept may predate the account saying where its profile
+  // is, so where it names no page the account itself is asked.
+  const said = kept?.url ? null : await read.actorCard(handleOrId).catch(() => null);
+  const card = kept && said ? { ...kept, url: said.url, name: kept.name || said.name } : (kept || said);
+  crumbs([['Home', '#/'], [card?.handle || authorLabel(handleOrId), null]]);
+  const named = esc(card?.handle || authorLabel(handleOrId));
+  // A word with them and nobody else. Only from a pod account: the message is
+  // written on the sender's own pod before it is handed over.
+  const messageBox = podAcct && podAcct.actor !== handleOrId ? `<section class="reply">
+    <h2>Post to ${named}'s timeline</h2>
+    <p class="hint">A post of yours that names them, so it reaches them and anyone who reads either of
+      you. It is public: everybody can read it. Your own account posts it and signs it, so it reaches
+      Mastodon and the rest of the Fediverse — which means it goes out when your agent next reads its
+      inbox, and that it needs an account fronted at this Gateway.</p>
+    <label class="vh" for="dm-text">Your post</label>
+    <textarea id="dm-text" rows="3" placeholder="Your post"></textarea>
+    <p class="row"><button class="primary" data-act="post-to" data-to="${esc(handleOrId)}"
+      data-handle="${esc(card?.handle || '')}">Post</button></p>
+    <p class="err" id="dm-err" role="alert"></p>
+  </section>` : '';
+  const head = `<div class="topline"><h1>${esc(card?.name || card?.handle || authorLabel(handleOrId))}</h1></div>
+    <p class="hint">${named}${card?.url ? ` · <a href="${esc(card.url)}">their profile</a>` : ''}
+      · ${theirs.length} post${theirs.length === 1 ? '' : 's'} here</p>${messageBox}`;
+  if (!theirs.length) { $('main').innerHTML = head + '<p class="empty">Nothing from them in what the forum is holding.</p>'; return; }
+  const items = [];
+  for (const p of theirs) {
+    const c = cats().find(x => x.id === p.category) || null;
+    const tid = p.topic ? p.topic.split('/').pop() : null;
+    const href = c && tid ? `#/t/${esc(c.slug)}/${esc(tid)}/${esc(await cacheKey(p.id))}` : '#/';
+    items.push(`<li><a class="title" href="${href}">${esc(p.topicName || 'Topic')}</a>
+      <div class="meta">${c ? esc(c.name) + ' · ' : ''}${esc(when(p.published))} · ▲ ${p.likes || 0} ▼ ${p.dislikes || 0}</div>
+      <article class="post"><div class="body">${p.content || ''}</div></article></li>`);
+  }
+  $('main').innerHTML = head + `<ul class="list">${items.join('')}</ul>`;
+}
+
+// What a moderator may change about the forum itself. Every change is a
+// request published at the moderator's own pod and checked there, so this
+// page needs no rights on the forum's pod at all.
+// Who moderates is learned while the forum is drawn. A page opened straight
+// at a link — Settings, say, or a bookmark — has drawn nothing yet, and would
+// take a moderator for a stranger and turn them away.
+async function knowModerators() {
+  if (moderators.length || !cats().length) return;
+  const lists = await Promise.all(cats().map(c => read.moderators(c.base).catch(() => [])));
+  moderators = [...new Set(lists.flat())];
+}
+
+async function showSettings() {
+  crumbs([['Home', '#/'], ['Settings', null]]);
+  await knowModerators();
+  if (!iModerate()) { $('main').innerHTML = '<p class="empty">Only this forum\'s moderators may change it.</p>'; return; }
+  if (!podAcct) { $('main').innerHTML = '<p class="empty">Changing the forum is done with your pod account.</p>'; return; }
+  $('main').innerHTML = `
+    <div class="topline"><h1>Settings</h1></div>
+    <section class="reply">
+      <h2>The forum</h2>
+      <div class="row oneline">
+        <label for="set-forum-name">Name</label>
+        <input type="text" id="set-forum-name" value="${esc(forum.name || '')}">
+        <button data-act="set-forum-name">Rename</button>
+        <button data-act="open-mods">Manage moderators</button>
+      </div>
+    </section>
+    <section class="reply">
+      <h2>Categories</h2>
+      <ul class="list bare">${cats().map(c => `<li>
+        <div class="row">
+          <input type="text" class="cat-name" data-cat="${esc(c.id)}" value="${esc(c.name)}">
+          <button data-act="set-cat-name" data-cat="${esc(c.id)}">Rename</button>
+          <button data-act="open-members" data-cat="${esc(c.id)}">Manage members</button>
+          <span class="dim">${esc(handleOf(c))}</span>
+          <label><input type="radio" name="cat-private-${esc(c.slug || c.id)}" data-act="set-cat-private" data-cat="${esc(c.id)}" value="open"${c.private ? '' : ' checked'}> Open</label>
+          <label><input type="radio" name="cat-private-${esc(c.slug || c.id)}" data-act="set-cat-private" data-cat="${esc(c.id)}" value="private"${c.private ? ' checked' : ''}> Private</label>
+        </div>
+      </li>`).join('')}</ul>
+    </section>
+    <section class="reply">
+      <h2>New Category</h2>
+      <div class="row oneline">
+        <label for="set-new-name">Category name</label>
+        <input type="text" id="set-new-name">
+        <label for="set-new-slug">Category slug</label>
+        <input type="text" id="set-new-slug" placeholder="Fediverse Username" size="18">
+      </div>
+      <div class="row">
+        <label><input type="radio" name="set-new-private" value="open" checked> Open</label>
+        <label><input type="radio" name="set-new-private" value="private"> Private</label>
+        <button data-act="add-cat">Create</button>
+      </div>
+    </section>
+`;
+}
+
+// The index, read once and filtered here. Changing category, ordering it,
+// or typing in the search box changes NOTHING about what the forum holds — yet
+// each of them refetched every post, every category's moderators and every
+// category's pinned topics, and blanked the page to "Loading…" while it went.
+// Searching did it on every keystroke.
+//
+// So it is read once and kept: whole, unfiltered, for every category, because
+// which subset is on screen is the reader's business and not the network's.
+// Thrown away after a minute, when more rows are asked for than were fetched,
+// and by hand whenever this page writes something the forum will show back.
+let index = null;
+const INDEX_STALE_MS = 60_000;
+function forgetIndex() { index = null; authors.clear(); }
+
+// Who wrote it, and the digest a topic link carries. Both are asked once per
+// ROW, and the same people and the same posts come round again every time the
+// index is redrawn — so each was a fresh lookup for an answer that cannot have
+// changed. Serially, too: thirty rows was thirty round trips one after another,
+// which is where the wait after choosing a category actually went.
+const authors = new Map();
+const digests = new Map();
+function authorOnce(catBase, id) {
+  const key = `${catBase}|${id}`;
+  if (!authors.has(key)) authors.set(key, read.author(catBase, id).catch(() => null));
+  return authors.get(key);
+}
+function digestOnce(id) {
+  if (!digests.has(id)) digests.set(id, cacheKey(id));
+  return digests.get(id);
+}
+
+async function readIndex(want) {
+  if (index && index.limit >= want && Date.now() - index.at < INDEX_STALE_MS) return index;
+  const latest = await read.latest(base, { limit: want });
+  const site = new Set(await read.featured(base));
+  const pinned = new Map();
+  const mods = new Map();
+  for (const c of cats()) {
+    pinned.set(c.id, new Set(await read.featured(c.base)));
+    mods.set(c.id, await read.moderators(c.base));
+  }
+  index = { at: Date.now(), limit: want, latest, site, pinned, mods };
+  return index;
+}
+
+async function showForum() {
+  const mineView = view;
+  const here = cats().find(c => c.slug === feedFilter) || null;
+  crumbs(here ? [['Home', '#/'], [here.name, `#/c/${here.slug}`]] : [['Home', '#/']]);
+  // Who moderates what is on screen. Showing the whole forum, that is
+  // whoever moderates its categories — otherwise a moderator looking at
+  // everything would look like a stranger.
+  // Moderators come out of the index below, which holds them for every
+  // category — so this no longer decides what to fetch, only what to show.
+  const showMods = (idx) => {
+    if (here) { moderators = idx.mods.get(here.id) || []; } else {
+      const all = new Set();
+      for (const list of idx.mods.values()) for (const m of list) all.add(m);
+      moderators = [...all];
+    }
+    // The line under the rule says who they are. It is painted from the
+    // forum's own list when the page loads; this keeps it with the categories'
+    // lists, which is where a moderator added while you read appears first.
+    paintMods(moderators);
+  };
+  const chip = (slug, label) => `<a class="chip${feedFilter === slug ? ' on' : ''}"${feedFilter === slug ? ' aria-current="page"' : ''} href="${slug === 'all' ? '#/' : `#/c/${esc(slug)}`}">${esc(label)}</a>`;
+  // Starting a topic from the front page: in the category being shown, or the
+  // first one when the whole forum is.
+  const into = cats().find(c => c.slug === feedFilter) || cats()[0] || null;
+  // Built where it is drawn, not once above: whether this reader moderates is
+  // read with the index below, and a row composed before that always said no.
+  const head = () => `<p class="hint chips">Categories: ${chip('all', 'All')}${cats().map(c => chip(c.slug || '', c.name)).join('')}
+    ${account() ? '<a class="chip" href="#/replies">Replies to you</a><a class="chip" href="#/bookmarks">Bookmarked</a>' : ''}
+    ${iModerate() ? '<a class="chip" href="#/queue">Queue</a><a class="chip" href="#/settings">Settings</a>' : ''}
+    <span class="rowend">
+      ${here && account() && podAcct ? `<button class="new" data-act="${own().isJoined(here.id) ? 'leave' : 'join'}" data-cat="${esc(here.id)}">${own().isJoined(here.id) ? 'Leave' : 'Join'}</button>` : ''}
+    </span></p>`;
+  // Search and New topic ride at the right end of the moderators row, which is
+  // the one line the page keeps above whatever is being read.
+  const acts = () => `<label class="vh" for="find">Search this forum</label>
+    <input type="text" id="find" placeholder="Search" value="${esc(finding)}" autocomplete="off"${finding ? '' : ' hidden'}>
+    <button data-act="search"${finding ? ' hidden' : ''}>Search</button>
+    ${into ? `<button data-act="newtopic" data-slug="${esc(into.slug || '')}">New topic</button>` : ''}`;
+  if (mineView !== view) return;
+  // Enough posts to fill a page of TOPICS: several posts can belong to one.
+  const want = Math.min(300, shown * 5);
+  // Only say "Loading" when something is actually going to be waited for. The
+  // reader changing category has everything already; blanking the page for
+  // them was the whole of the delay they could see.
+  const willFetch = !(index && index.limit >= want && Date.now() - index.at < INDEX_STALE_MS);
+  if (willFetch) {
+    $('mods-acts').innerHTML = acts();
+    $('main').innerHTML = head() + '<p class="dim">Loading…</p>';
+    say('Loading the latest posts');
+  }
+  const idx = await readIndex(want);
+  if (mineView !== view) return;
+  showMods(idx);
+  const latest = idx.latest;
+  const looking = finding.trim().toLowerCase();
+  const mine = latest.filter(p => (feedFilter === 'all'
+    || (cats().find(c => c.id === p.category)?.slug === feedFilter))
+    // Searching what the page has: a topic's name, an author's handle, and
+    // the words of the post itself.
+    && (!looking || [p.topicName, p.author, p.content].some(v => String(v || '').toLowerCase().includes(looking))));
+  // Pinned topics first. A pin belongs to a category; the forum has a
+  // featured collection of its own for a pin that holds everywhere.
+  const pins = { cat: new Set(), site: idx.site };
+  for (const c of cats()) {
+    if (feedFilter !== 'all' && c.slug !== feedFilter) continue;
+    for (const id of idx.pinned.get(c.id) || []) pins.cat.add(id);
+  }
+  // One row per topic: the newest post in it stands for it, which is what a
+  // reader wants to open — the thing they have not read.
+  const byTopic = new Map();
+  for (const p of mine) {
+    if (!p.topic) continue;
+    const held = byTopic.get(p.topic);
+    if (!held || String(p.published || '') > String(held.published || '')) byTopic.set(p.topic, p);
+  }
+  const rank = (p) => (pins.site.has(p.topic) ? 2 : pins.cat.has(p.topic) ? 1 : 0);
+  // Pinned first whatever the order; then the column the reader chose.
+  // Posts, not replies: a topic with nobody answering yet still HAS the post
+  // that started it, and a column reading 0 beside a topic you can open and
+  // read says the wrong thing. The count the forum keeps is of replies, so the
+  // opening post is the one added here.
+  const by = (p) => (order === 'replies' ? (p.topicReplies || 0) + 1 : String(p.published || ''));
+  const topics = [...byTopic.values()].sort((a, b) => rank(b) - rank(a)
+    || (down ? (by(a) > by(b) ? -1 : by(a) < by(b) ? 1 : 0) : (by(a) > by(b) ? 1 : by(a) < by(b) ? -1 : 0)));
+  const page = topics.slice(0, shown);
+  if (!topics.length) {
+    // A members-only category that will not answer this reader looks exactly
+    // like an empty one. Ask it a question only a member can have answered.
+    if (here && !(await read.topics(here.base)).total && !(await read.canRead(here.base))) {
+      if (mineView !== view) return;
+      $('mods-acts').innerHTML = acts();
+    $('main').innerHTML = head() + (podAcct
+        ? `<p class="empty row">This category is for its members.
+           <button class="new" data-act="ask-join" data-cat="${esc(here.id)}">Request membership</button></p>`
+        : `<p class="empty row">This category is for its members, and membership needs a FediPod account.
+           <a class="big" href="${esc(front)}/new-account">Get a FediPod account</a></p>`);
+      say('This category is for its members');
+      return;
+    }
+    // The one thing to do on an empty page is the one thing offered.
+    if (mineView !== view) return;
+    $('mods-acts').innerHTML = acts();
+    $('main').innerHTML = head() + '<p class="empty">Nothing posted here yet. Use the button at the upper right to create a topic.</p>';
+    say('Nothing posted here yet');
+    return;
+  }
+  const rows = [];
+  let fresh = 0;
+  // Every row's author and digest at once rather than one row at a time: they
+  // do not depend on each other, and waiting for each in turn is the whole of
+  // the delay between choosing a category and seeing it.
+  const looked = await Promise.all(page.map(async (p) => {
+    const cat = cats().find(c => c.id === p.category) || null;
+    return {
+      cat,
+      who: cat && p.author ? await authorOnce(cat.base, p.author) : null,
+      digest: await digestOnce(p.id),
+    };
+  }));
+  if (mineView !== view) return;
+  for (let i = 0; i < page.length; i++) {
+    const p = page[i];
+    const { cat, who, digest } = looked[i];
+    const tid = p.topic ? p.topic.split('/').pop() : null;
+    const href = cat && tid ? `#/t/${esc(cat.slug)}/${esc(tid)}/${esc(digest)}` : null;
+    const name = esc(p.topicName || 'Topic');
+    // New to THIS reader: posted since they last had the topic open.
+    const isNew = !!seen?.isNew(p.topic, p.published);
+    if (isNew) fresh += 1;
+    const byline = who ? who.handle : (p.author ? authorLabel(p.author) : '');
+    rows.push(`<tr>
+      <td>${pins.site.has(p.topic) ? '<span class="pin" title="Pinned across the forum" role="img" aria-label="pinned across the forum">\u2B50</span> ' : pins.cat.has(p.topic) ? '<span class="pin" title="Pinned in this category" role="img" aria-label="pinned in this category">\uD83D\uDCCC</span> ' : ''}${href ? `<a href="${href}">${name}</a>` : name}${isNew
+        ? ' <span class="badge">New<span class="vh"> since you last opened this topic</span></span>' : ''}</td>
+      <td>${cat ? esc(cat.name) : ''}</td>
+      <td>${byline ? (p.author
+        ? `<a class="who" href="#/who/${encodeURIComponent(p.author)}" title="${esc(byline)}">${esc(byline)}</a>`
+        : `<span class="who" title="${esc(byline)}">${esc(byline)}</span>`) : ''}</td>
+      <td>${esc(when(p.published))}</td>
+      <td>${Number.isFinite(p.topicReplies) ? p.topicReplies + 1 : ''}</td>
+    </tr>`);
+  }
+  // A table, so a reader can run their eye down any one of the four things
+  // an entry says.
+  const more = Math.max(0, topics.length - page.length) + (latest.more || 0);
+  if (mineView !== view) return;
+  $('mods-acts').innerHTML = acts();
+    $('main').innerHTML = head() + `<div class="scroll" role="region" aria-label="Topics, most recently posted in first" tabindex="0"><table class="index">
+    <thead><tr><th scope="col">Topic</th><th scope="col">Category</th><th scope="col">Latest by</th>
+      <th scope="col" aria-sort="${order === 'date' ? (down ? 'descending' : 'ascending') : 'none'}">
+        <button class="sort" data-act="order" data-order="date">Date ${order === 'date' ? (down ? '▼' : '▲') : '<span class="dim">▽</span>'}</button></th>
+      <th scope="col" aria-sort="${order === 'replies' ? (down ? 'descending' : 'ascending') : 'none'}">
+        <button class="sort" data-act="order" data-order="replies">Posts ${order === 'replies' ? (down ? '▼' : '▲') : '<span class="dim">▽</span>'}</button></th></tr></thead>
+    <tbody>${rows.join('')}</tbody></table>
+    ${more ? `<p class="row"><button data-act="more">Show ${Math.min(more, 30)} more of ${more}</button></p>` : ''}</div>`;
+  say(`${rows.length} topic${rows.length === 1 ? '' : 's'}${fresh ? `, ${fresh} with something new` : ''}`);
+  // The box takes the keyboard only when there is something in it to scroll:
+  // a tab stop that does nothing is one more press between a reader and the page.
+  const box = $('main').querySelector('.scroll');
+  if (box) { if (box.scrollHeight > box.clientHeight) box.tabIndex = 0; else box.removeAttribute('tabindex'); }
+}
+
+
+async function showTopic(slug, tid, atPost = null) {
+  const cat = catBySlug(slug);
+  if (!cat) { $('main').innerHTML = '<p class="err">No such category.</p>'; return; }
+  const topicId = cat.base + 'ap/topic/' + tid;
+  moderators = await read.moderators(cat.base);
+  crumbs([['Home', '#/'], [cat.name, `#/c/${slug}`], ['topic', null]]);
+  $('main').innerHTML = '<p class="dim">Loading…</p>';
+  say('Loading the topic');
+  const t = await read.topic(topicId);
+  if (!t) { $('main').innerHTML = '<p class="err">No such topic.</p>'; return; }
+  crumbs([['Home', '#/'], [cat.name, `#/c/${slug}`], [t.name, null]]);
+  const posts = [];
+  for (const id of t.posts) posts.push({ id, ...(await read.post(cat.base, id)) });
+  const authors = new Map();
+  for (const p of posts) {
+    if (!p.author || authors.has(p.author)) continue;
+    authors.set(p.author, await read.author(cat.base, p.author));
+  }
+  // Opening a topic reads it, up to the newest post that was in it.
+  seen?.markRead(topicId, seen.newest(posts));
+  const placed = new Set(t.posts);
+  const pending = waiting(topicId).filter(w => !placed.has(w.id));
+  $('main').innerHTML = `<div class="topline"><h1>${esc(t.name)}</h1>
+      <button class="primary" data-act="newpost" data-topic="${esc(topicId)}">New post</button></div>
+    ${topicActs(topicId)}
+
+    ${(await threaded(posts, authors, cat)).join('')}
+    ${pending.map(w => card({ author: w.author, published: w.at, content: toHtml(w.text) },
+      { cat, extra: ' waiting', waiting: true })).join('')}`;
+  replyBox({ cat, title: 'Reply', inReplyToUrl: t.posts[t.posts.length - 1] || null, topicId });
+  $('reply-row').hidden = true;      // the thread's own button opens it
+  // A closed topic takes nothing more: the forum would refuse it anyway, so
+  // the page does not offer it.
+  if (t.closed) {
+    for (const b of document.querySelectorAll('[data-act="newpost"], [data-act="reply"]')) b.remove();
+    const said = document.createElement('p');
+    said.className = 'hint';
+    said.textContent = 'This topic is closed. No more replies are being taken.';
+    document.querySelector('.topline')?.after(said);
+  }
+  // Arriving from the front page: the post that was linked to, in view and
+  // marked, rather than the top of a thread it sits somewhere inside.
+  say(`${t.name}, ${posts.length} post${posts.length === 1 ? '' : 's'}`);
+  if (atPost) {
+    const el = document.getElementById('p-' + atPost);
+    // Taken to, not just scrolled to: a keyboard and a screen reader both land
+    // on the post that was linked, rather than at the top of the thread.
+    if (el) { el.scrollIntoView({ block: 'center' }); el.classList.add('picked'); el.tabIndex = -1; el.focus(); }
+  }
+}
+
+// The reply box: signed out, it offers the two ways in; signed in, it posts.
+let replyCtx = null;
+function replyBox(ctx) {
+  replyCtx = ctx;
+  $('reply-row').hidden = false;
+  $('reply-open').textContent = ctx.title;
+  $('reply-title').textContent = ctx.title;
+  $('reply-err').textContent = '';
+  const acct = account();
+  $('reply-signed-out').hidden = !!acct;
+  $('reply-signed-in').hidden = !acct;
+  $('fedi-note').textContent = '';
+  editing = null;
+  $('reply-send').textContent = 'Post reply';
+  $('topic-title-row').hidden = !!ctx.topicId;
+  $('reply-text').placeholder = ctx.topicId ? 'Write your reply' : 'Your opening post';
+  $('reply-text-label').textContent = ctx.topicId ? 'Your reply' : 'Your opening post';
+  if (acct) $('reply-as').textContent = acct.handle;
+}
+
+// From a handle to a way in. A server that speaks the Mastodon API signs the
+// reader in here; a Lemmy server takes part by its own community address; any
+// other account posts from where it is, naming the category.
+async function signIn(handleInput, noteId = 'fedi-note') {
+  const host = hostOfHandle(handleInput);
+  if (!host) throw new Error('a handle looks like @you@your.server');
+  const at = replyCtx?.cat ? handleOf(replyCtx.cat) : 'the category';
+  $(noteId).textContent = `Asking ${host}…`;
+  const handle = String(handleInput).trim().replace(/^@/u, '').split('@')[0];
+  const said = await serverKind(host, front, undefined, handle);
+  const kind = said.kind;
+  if (kind === 'mastodon-api') {
+    sessionStorage.setItem('bb:return', location.hash);
+    location.href = await login.begin(host);
+    return;
+  }
+  const note = $(noteId);
+  note.textContent = '';
+  if (kind === 'fedipod') {
+    if (!said.issuer || !said.actor) throw new Error(`${host} did not say where ${handleInput} signs in`);
+    sessionStorage.setItem('bb:return', location.hash);
+    sessionStorage.setItem('bb:pod', JSON.stringify({ handle: `@${handle}@${host}`, actor: said.actor, podHome: said.podHome }));
+    location.href = await pod.signIn({ issuer: said.issuer, redirectUri: location.origin + location.pathname });
+    return;
+  }
+  note.textContent = kind === 'lemmy'
+    ? `From ${host}, subscribe to !${at.replace(/^@/u, '')} and post there; it arrives here.`
+    : kind === 'invalid'
+      ? 'A handle looks like @you@your.server.'
+      : `${host} does not offer a sign-in this page can use. Post from your account there, naming ${at}, and it arrives here.`;
+}
+
+// A box in front of the page is movable: press its heading and drag. It
+// stays where it was put until it is closed, and it cannot be dragged off
+// the edge and lost.
+function movable(dlg) {
+  const grip = dlg.querySelector('h2');
+  if (!grip || grip.dataset.movable) return;
+  grip.dataset.movable = '1';
+  grip.addEventListener('pointerdown', (e) => {
+    if (e.button && e.button !== 0) return;
+    const box = dlg.getBoundingClientRect();
+    const from = { x: e.clientX - box.left, y: e.clientY - box.top };
+    grip.setPointerCapture(e.pointerId);
+    const move = (ev) => {
+      const x = Math.min(Math.max(0, ev.clientX - from.x), window.innerWidth - box.width);
+      const y = Math.min(Math.max(0, ev.clientY - from.y), window.innerHeight - 40);
+      dlg.classList.add('moved');
+      dlg.style.left = `${x}px`;
+      dlg.style.top = `${y}px`;
+    };
+    const done = () => { grip.removeEventListener('pointermove', move); grip.removeEventListener('pointerup', done); };
+    grip.addEventListener('pointermove', move);
+    grip.addEventListener('pointerup', done);
+  });
+}
+
+// Anything the page opens in front of itself goes through here.
+function openPanel(title, html) {
+  $('panel-title').textContent = title;
+  $('panel-body').innerHTML = html;
+  $('panel-err').textContent = '';
+  const dlg = $('panel');
+  dlg.classList.remove('moved');
+  dlg.style.left = dlg.style.top = '';
+  movable(dlg);
+  dlg.showModal();
+}
+$('panel-close').addEventListener('click', () => $('panel').close());
+
+// A panel is a box in front of the page, and it sits OUTSIDE <main> — so the
+// page's own click handler never saw the buttons in one, and pressing Add did
+// nothing at all. Its buttons are settings acts like any other.
+$('panel').addEventListener('click', (e) => {
+  const b = e.target.closest('button[data-act]');
+  const act = b?.dataset.act || '';
+  if (act.startsWith('set-') || act.startsWith('add-') || act.startsWith('drop-')) return onSettings(b);
+  return undefined;
+});
+
+$('reply-open').addEventListener('click', () => { openReply({ inReplyToUrl: replyCtx?.inReplyToUrl || null }); });
+$('main').addEventListener('click', async (e) => {
+
+  // Every button in the page that names an action, wherever it sits: a
+  // post's row, a topic's row, or the categories line.
+  const b = e.target.closest('button[data-act]');
+  if (!b) return;
+  const id = b.closest('[data-post]')?.dataset.post;
+  const act = b.dataset.act;
+  if (act === 'reply') return openReply({ inReplyToUrl: id });
+  if (act === 'edit') return openEdit(id);
+  if (act === 'delete') return removePost(id);
+  if (act === 'share') return share(id, b);
+  if (act === 'report') return report(id);
+  if (act === 'remove') return modRemove(id);
+  const topic = b.dataset.topic || b.closest('[data-topic]')?.dataset.topic;
+  if (act === 'more') { shown += 30; return showForum(); }
+  if (act === 'order') {
+    const col = b.dataset.order;
+    if (order === col) down = !down; else { order = col; down = true; }
+    shown = 30;
+    return showForum();
+  }
+  // Anything that acts as somebody asks who that is first, and remembers what
+  // was pressed so signing in finishes it.
+  if (GATED[act] && !account()) { rememberIntent(b); return askToSignIn(GATED[act]); }
+  if (act === 'join' || act === 'leave') return joinOrLeave(b.dataset.cat, act === 'join');
+  if (act === 'ask-join') return askToJoin(b.dataset.cat);
+  if (act === 'admit') return modAdmit(id, b.closest('[data-cat]')?.dataset.cat);
+  if (act === 'removepost') return modRemoveFromQueue(b.dataset.post, b.closest('[data-cat]')?.dataset.cat);
+  if (act === 'save' || act === 'unsave') return saveOrNot(id, act === 'save');
+  if (act.startsWith('vote-')) return voteOn(id, act.slice(5), b.dataset.was || 'none');
+  if (act === 'approve' || act === 'refuse') return modHeld(id, b.closest('[data-cat]')?.dataset.cat, act === 'approve');
+  if (act === 'ban') return modBan(b.dataset.who, b.closest('[data-cat]')?.dataset.cat);
+  if (act === 'open-mods') {
+    const named = await Promise.all(moderators.map(m => modLabel(m)));
+    return openPanel('Moderators', `<p class="hint">${named.map(esc).join(', ') || 'nobody yet'}</p>
+      <div class="row oneline">
+        <label for="set-mod">Their handle</label>
+        <input type="text" id="set-mod" placeholder="@mei@their.server">
+        <button data-act="add-mod">Add</button><button data-act="drop-mod">Remove</button>
+      </div>
+      <p class="hint">Adding somebody makes them a moderator and lets them read the queue.
+        The queue is held under the pod's own access rule, and a rule names a person by the
+        WebID of their pod: a Mastodon account has none, so it can moderate and have its
+        asks acted on, but it cannot open the queue.</p>`);
+  }
+  if (act === 'open-members') {
+    const cat = cats().find(c => c.id === b.dataset.cat);
+    if (!cat) return;
+    return openPanel(`Members of ${cat.name}`, `<p class="hint">Naming anyone here closes this category to everyone else. A member is named by their WebID, which is what a pod's own rule can grant.</p>
+      <div class="row">
+        <label for="set-member">Their WebID</label>
+        <input type="text" id="set-member" class="cat-member" data-cat="${esc(cat.id)}" placeholder="https://someone.example/profile/card#me">
+        <button data-act="add-member" data-cat="${esc(cat.id)}">Let them in</button>
+        <button data-act="drop-member" data-cat="${esc(cat.id)}">Take them out</button>
+      </div>`);
+  }
+  if (act.startsWith('set-') || act.startsWith('add-') || act.startsWith('drop-')) return onSettings(b);
+  // Search asks for the room to type in rather than holding it open: the
+  // button becomes the box, and an empty box left alone becomes the button.
+  if (act === 'search') {
+    const box = $('find');
+    if (!box) return undefined;
+    b.hidden = true;
+    box.hidden = false;
+    box.focus();
+    return undefined;
+  }
+  if (act === 'post-to') return postToTimeline(b.dataset.to, b.dataset.handle || '');
+  if (act === 'newpost') return openReply({ inReplyToUrl: replyCtx?.inReplyToUrl || null });
+  if (act === 'newtopic') {
+    const cat = catBySlug(b.dataset.slug);
+    if (!cat) return;
+    replyBox({ cat, title: 'Start a topic', inReplyToUrl: null, topicId: null });
+    $('reply-row').hidden = true;
+    return openReply({ inReplyToUrl: null });
+  }
+  if (act === 'rename') return modRename(topic);
+  if (act === 'pin' || act === 'unpin') return modPin(topic, act === 'pin');
+  if (act === 'sitepin' || act === 'siteunpin') return modPin(topic, act === 'sitepin', true);
+  if (act === 'lock' || act === 'unlock') return modLock(topic, act === 'lock');
+  if (act === 'droptopic') return modDropTopic(topic);
+});
+
+// The dialog takes the focus when it opens and hands it back to whatever
+// opened it when it closes, so a keyboard is never left where the page was.
+let reopener = null;
+// What a private category actually promises the person about to write in it.
+// Said in the box, at the moment it matters, because the word Private on a
+// button is a claim and this is the whole of what is behind it.
+function sayPrivacy() {
+  const note = $('reply-private');
+  if (!note) return;
+  const cat = replyCtx?.cat;
+  if (!cat?.private) { note.hidden = true; note.textContent = ''; return; }
+  note.hidden = false;
+  note.textContent = `${cat.name} is private. This is written into your own pod for its members to read, `
+    + 'and goes to nobody else. Your followers are not sent it and cannot read it. '
+    + 'Anyone admitted later can read it, and anyone admitted now can copy it.';
+}
+
+function showDialog() {
+  sayPrivacy();
+  reopener = document.activeElement;
+  $('reply-dlg').showModal();
+  (account() ? $('reply-text') : $('fedi-handle'))?.focus();
+}
+$('reply-dlg').addEventListener('close', () => { reopener?.focus?.(); reopener = null; });
+
+// The dialog, armed for what it is about to do.
+function openReply({ inReplyToUrl = null } = {}) {
+  movable($('reply-dlg'));
+  editing = null;
+  if (replyCtx) replyCtx.inReplyToUrl = inReplyToUrl;
+  $('reply-title').textContent = replyCtx?.title || 'Reply';
+  $('reply-send').textContent = 'Post reply';
+  $('reply-err').textContent = '';
+  showDialog();
+}
+
+let editing = null;
+async function openEdit(id) {
+  const p = await read.post(replyCtx.cat.base, id);
+  if (!p) { $('reply-err').textContent = 'that post is not readable here'; return; }
+  editing = { id, page: p.page || null };
+  $('reply-title').textContent = 'Edit your post';
+  $('reply-text-label').textContent = 'Your post';
+  $('reply-send').textContent = 'Save';
+  $('reply-err').textContent = '';
+  $('topic-title-row').hidden = true;
+  // Back to the words, from the HTML the post is kept as.
+  if (p.source) {
+    $('reply-text').value = p.source;
+  } else {
+    // Written before the forum kept the source, or written elsewhere: the
+    // words are recovered from the HTML, losing whatever marked them up.
+    const d = document.createElement('div');
+    d.innerHTML = body(p, replyCtx.cat);
+    $('reply-text').value = [...d.querySelectorAll('p')].map(x => x.textContent.trim()).join('\n\n') || d.textContent.trim();
+  }
+  showDialog();
+}
+
+// The address of this post on this site, for pasting anywhere. The thread is
+// what a person wants to open, and the post is named in it.
+async function share(id, btn) {
+  const hash = location.hash.startsWith('#/t/') ? location.hash : `#/t/${replyCtx.cat.slug}/${(await topicOf(id)) || ''}`;
+  const link = `${location.origin}${location.pathname}${hash}`;
+  try { await navigator.clipboard.writeText(link); btn.textContent = 'Copied'; say('Link copied'); }
+  catch { window.prompt('Copy this address', link); return; }
+  setTimeout(() => { btn.textContent = 'Share'; }, 1500);
+}
+
+// Which topic holds a post, when the page is showing a category rather than a
+// thread: the card sits inside the topic's own list item.
+async function topicOf(id) {
+  const li = [...document.querySelectorAll('ul.list li')].find(el => el.querySelector(`[data-post="${CSS.escape(id)}"]`));
+  const a = li?.querySelector('a[href^="#/t/"]');
+  return a ? a.getAttribute('href').split('/').pop() : null;
+}
+
+async function report(id) {
+  const why = window.prompt('Report this post to the moderators. What is wrong with it?');
+  if (why === null) return;
+  try {
+    const cat = replyCtx.cat;
+    const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+    const who = podAcct?.actor || login.account()?.url;
+    await pod.report({ actor: who, object: id, category: cat.id, inbox, why });
+    alert('Reported. A moderator will see it in the forum\'s queue.');
+  } catch (e) { alert(e.message); }
+}
+
+async function asksTo(activity, forCat = null) {
+  if (!podAcct) throw new Error('moderating from here needs your pod account');
+  const cat = forCat || replyCtx?.cat;
+  if (!cat) throw new Error('this is not in a category the page knows about — open the topic and try from there');
+  // Which step failed, not only that one did. Three requests go out here — ask
+  // the Gateway where the forum takes mail, write the request on your own pod,
+  // hand it to the forum — and each can fail with the browser's bare "Failed to
+  // fetch", which on its own says nothing about which address would not answer.
+  // The same reason voteOn says it.
+  let step = 'finding where the forum takes mail';
+  try {
+    const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+    if (!inbox) throw new Error('the forum did not say where to send it');
+    // moderate() names its own two requests, so nothing is added over the top.
+    step = 'sending the request';
+    await pod.moderate({ actor: podAcct.actor, podHome: podAcct.podHome, inbox, activity });
+  } catch (e) {
+    throw new Error(`${e.message} — while ${step}`);
+  }
+  alert('Sent to the forum. It takes effect once the forum has checked who asked.');
+}
+
+// A post out of its topic: a Delete whose origin is the topic it is leaving.
+async function modRemove(id) {
+  if (!confirm('Remove this post from the topic?')) return;
+  const topicId = replyCtx.topicId || (replyCtx.cat.base + 'ap/topic/' + (await topicOf(id)));
+  try { await asksTo({ type: 'Delete', object: id, origin: topicId }); } catch (e) { alert(e.message); }
+}
+
+// A topic's name belongs to the topic, and only the forum writes it.
+async function modRename(topicId) {
+  const now = document.querySelector('.topline h1')?.textContent || '';
+  const name = window.prompt('Name for this topic', now);
+  if (name === null || !name.trim()) return;
+  try { await asksTo({ type: 'Update', object: { id: topicId, name: name.trim() } }); } catch (e) { alert(e.message); }
+}
+
+// Pinned topics are the category's featured collection.
+// Closed to further replies. `closed` is AS2's own word for a collection
+// that takes no more, so a reader on any server can see it too.
+// Joining is a Follow to the category and leaving undoes it. A category
+// carries its members' posts and nobody else's, so this is what makes
+// posting from here work at all.
+async function joinOrLeave(categoryId, on) {
+  const cat = cats().find(c => c.id === categoryId);
+  if (!cat) return;
+  if (!podAcct) {
+    alert(account()
+      ? 'Joining is sent from your own pod, so it needs a pod account — sign out and sign in with your @you@your-pod handle.'
+      : 'Joining needs an account.');
+    return;
+  }
+  try {
+    const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+    const ok = on
+      ? await pod.join({ actor: podAcct.actor, category: cat.id, inbox })
+      : await pod.leave({ actor: podAcct.actor, category: cat.id, inbox });
+    if (!ok) throw new Error('the forum did not take it');
+    if (on) own().join(cat.id); else own().leave(cat.id);
+    forgetIndex();
+    await showForum();
+  } catch (e) { alert(e.message); }
+}
+
+// --- signing in where the reader is, rather than where the form is ---
+//
+// Everything below the counts needs an account: voting, joining, saving,
+// asking to be let into a private category. A reader without one used to see
+// no button at all for some of these and a bare refusal for others, and the
+// way in was hidden inside the Reply box. Now the button is there, pressing it
+// asks who you are, and the thing you pressed happens when you come back.
+//
+// Signing in leaves the page — it is somebody else's login — so what you were
+// doing has to outlive the trip. It goes in sessionStorage beside `bb:return`,
+// which is how the hash already survives it.
+const GATED = {
+  'vote-up': 'vote on a post', 'vote-down': 'vote on a post', 'vote-none': 'take back your vote',
+  join: 'join a category', leave: 'leave a category', 'ask-join': 'ask to join a category',
+  save: 'save a post', unsave: 'remove a saved post',
+};
+
+function rememberIntent(b) {
+  const d = b.dataset;
+  sessionStorage.setItem('bb:intent', JSON.stringify({
+    // The SAME places the dispatcher reads them from, or the replay acts on a
+    // different post from the one that was pressed: the id is on the enclosing
+    // `data-post`, never on the button.
+    act: d.act, id: b.closest('[data-post]')?.dataset.post || null,
+    cat: d.cat || b.closest('[data-cat]')?.dataset.cat || null,
+    was: d.was || null,
+  }));
+}
+
+// Open the sign-in dialog, saying what it is for. `why` is the plain-English
+// name of the action from GATED, so the reader is told what signing in buys
+// them rather than being asked for a handle out of nowhere.
+function askToSignIn(why) {
+  $('signin-why').textContent = why ? `Sign in to ${why}.` : '';
+  $('signin-note').textContent = '';
+  $('signin-dlg').showModal();
+  $('signin-handle').focus();
+}
+
+// Back from the login with something to finish. Runs the same handler the
+// click would have run, so there is one path through each action and not two.
+async function replayIntent() {
+  let want = null;
+  try { want = JSON.parse(sessionStorage.getItem('bb:intent') || 'null'); } catch { /* unreadable */ }
+  sessionStorage.removeItem('bb:intent');
+  if (!want || !account()) return;
+  if (String(want.act).startsWith('vote-')) return voteOn(want.id, want.act.slice(5), want.was || 'none');
+  if (want.act === 'join' || want.act === 'leave') return joinOrLeave(want.cat, want.act === 'join');
+  if (want.act === 'ask-join') return askToJoin(want.cat);
+  if (want.act === 'save' || want.act === 'unsave') return saveOrNot(want.id, want.act === 'save');
+}
+
+// A vote goes to the category as a Like or a Dislike, and the Undo of
+// whichever was cast takes it back. The forum counts them; this browser only
+// remembers which way this reader went, so the buttons can say so.
+async function voteOn(postId, way, was) {
+  // A vote is signed by the pod that casts it, so a Fediverse-only sign-in
+  // cannot cast one. Said plainly: the reader has just signed in and is being
+  // refused, and "needs your pod account" on its own does not say what to do.
+  if (!podAcct) {
+    alert(account()
+      ? 'A vote is sent from your own pod, so it needs a pod account — sign out and sign in with your @you@your-pod handle.'
+      : 'Voting needs an account.');
+    return;
+  }
+  const cat = replyCtx?.cat || cats().find(c => c.slug === feedFilter) || cats()[0];
+  if (!cat) return;
+  let step = 'finding where the forum takes mail';
+  try {
+    const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+    if (!inbox) throw new Error('the forum did not say where to send it');
+    step = `sending the vote to ${new URL(inbox).host}`;
+    await pod.vote({ actor: podAcct.actor, post: postId, category: cat.id, inbox, way, was });
+    own().vote(postId, way);
+    forgetIndex();
+    paintVote(postId, way, was);
+    say(way === 'none' ? 'Vote taken back.' : 'Voted. The count follows once the forum has taken it.');
+  } catch (e) {
+    // Which step failed, not only that one did: "failed to fetch" on its own
+    // says nothing about which address would not answer.
+    alert(`${e.message} — while ${step}`);
+  }
+}
+
+// A post on somebody's timeline: their inbox is asked for, the post is written
+// in the sender's own public container, and handed over. Each way it can fail
+// says which address would not answer, since a bare "failed to fetch" names
+// none of them.
+async function postToTimeline(to, handle) {
+  const box = $('dm-text');
+  const err = $('dm-err');
+  const text = box?.value.trim();
+  if (!err) return;
+  if (!text) { err.className = 'err'; err.textContent = 'Write something first.'; return; }
+  if (!podAcct) { err.className = 'err'; err.textContent = 'Posting to someone is done from your own pod account.'; return; }
+  err.className = '';
+  err.textContent = 'Posting…';
+  try {
+    // Their handle, for the mention the post carries. Nothing else about them
+    // is needed: the sender's own agent works out where it goes and signs it.
+    const card = await read.actorCard(to).catch(() => null);
+    await pod.postTo({
+      actor: podAcct.actor, podHome: podAcct.podHome, handle: podAcct.handle,
+      to, toHandle: card?.handle || handle || '', front, text,
+    });
+    box.value = '';
+    err.className = 'said';
+    err.textContent = 'Handed to your own account. It goes out signed when your agent next reads its inbox.';
+    say('Posted.');
+  } catch (e) {
+    err.className = 'err';
+    err.textContent = e.message;
+  }
+}
+
+// The reader's own vote, on the buttons they just pressed. The forum's count
+// is the truth and follows when it has taken the vote; until then the page
+// showed the row exactly as it was, so a vote looked like nothing happening.
+function paintVote(postId, way, was) {
+  const acts = document.querySelector(`.acts[data-post="${CSS.escape(postId)}"]`);
+  const [upBtn, downBtn] = acts ? acts.querySelectorAll('button[data-act^="vote-"]') : [];
+  if (!upBtn || !downBtn) return;
+  const count = (b) => Number(String(b.textContent).replace(/[^0-9]/gu, '')) || 0;
+  let up = count(upBtn);
+  let down = count(downBtn);
+  if (was === 'up') up -= 1;
+  if (was === 'down') down -= 1;
+  if (way === 'up') up += 1;
+  if (way === 'down') down += 1;
+  const set = (b, its, mark, n, label) => {
+    b.dataset.act = `vote-${way === its ? 'none' : its}`;
+    b.dataset.was = way;
+    b.textContent = `${mark} ${Math.max(0, n)}`;
+    b.classList.toggle('voted', way === its);
+    if (way === its) b.setAttribute('aria-pressed', 'true'); else b.removeAttribute('aria-pressed');
+    b.setAttribute('aria-label', way === its ? `Take back your vote ${label}` : `Vote ${label} this post`);
+  };
+  set(upBtn, 'up', '\u25B2', up, 'for');
+  set(downBtn, 'down', '\u25BC', down, 'against');
+}
+
+// Asking to be let into a private category: the same Follow that joining
+// sends, which a category approving its members holds for a moderator.
+async function askToJoin(categoryId) {
+  const cat = cats().find(c => c.id === categoryId);
+  if (!cat || !podAcct) return;
+  try {
+    const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+    await pod.join({ actor: podAcct.actor, category: cat.id, inbox });
+    say('Asked. A moderator sees it in the forum\'s queue.');
+    alert('Your request is with the moderators.');
+  } catch (e) { alert(e.message); }
+}
+
+// Admitting somebody who asked: their follow is accepted, and in a private
+// category their pod is granted the reading that membership means.
+async function modAdmit(who, slug) {
+  forgetIndex();   // whatever this does, the index behind it is now out of date
+  const cat = cats().find(c => c.slug === slug) || replyCtx?.cat;
+  if (!cat || !who) return;
+  try {
+    await asksTo({ type: 'Join', object: who }, cat);
+    await asksTo({ type: 'Add', object: who, target: cat.base + 'ap/members' }, cat);
+    say('Admitted. It takes effect once the forum has checked who asked.');
+  } catch (e) { alert(e.message); }
+}
+
+// A bookmark is this reader's own note to come back to, in this browser.
+function saveOrNot(postId, on) {
+  const m = own();
+  if (on) {
+    const card = document.querySelector(`[data-post="${CSS.escape(postId)}"]`)?.closest('article');
+    m.save({ id: postId, at: new Date().toISOString(), topic: replyCtx?.topicId || null,
+      cat: replyCtx?.cat?.slug || null, text: (card?.querySelector('.body')?.textContent || '').trim().slice(0, 140) });
+  } else m.unsave(postId);
+  route();
+}
+
+// A held post: let through, or turned away. Both are asks like any other,
+// published at the moderator's own pod and checked there.
+async function modHeld(postId, slug, through) {
+  forgetIndex();   // whatever this does, the index behind it is now out of date
+  const cat = cats().find(c => c.slug === slug) || replyCtx?.cat;
+  if (!cat) { alert('which category is that in?'); return; }
+  try {
+    await asksTo({ type: through ? 'Accept' : 'Reject', object: postId }, cat);
+    say(through ? 'Let through. It is carried once the forum has checked who asked.' : 'Turned away.');
+  } catch (e) { alert(e.message); }
+}
+
+// A reported post taken out of its topic, from the queue rather than from
+// the thread: the topic it is in is the one the forum has it in.
+async function modRemoveFromQueue(postId, slug) {
+  forgetIndex();   // whatever this does, the index behind it is now out of date
+  const cat = cats().find(c => c.slug === slug);
+  if (!cat || !postId) return;
+  if (!confirm('Remove this post from its topic?')) return;
+  try {
+    const copy = await read.post(cat.base, postId);
+    if (!copy?.topic) throw new Error('the forum does not say which topic holds it');
+    await asksTo({ type: 'Delete', object: postId, origin: copy.topic }, cat);
+    say('Asked. It takes effect once the forum has checked who asked.');
+  } catch (e) { alert(e.message); }
+}
+
+// Banning: the category blocks them, which is the whole of what a group can
+// enforce — it stops carrying them and ends the following.
+async function modBan(who, slug) {
+  const cat = cats().find(c => c.slug === slug) || replyCtx?.cat;
+  if (!cat || !who) return;
+  if (!confirm(`Ban ${authorLabel(who)} from ${cat.name}? Their posts stop being carried.`)) return;
+  try {
+    await asksTo({ type: 'Block', object: who }, cat);
+    say('Asked. It takes effect once the forum has checked who asked.');
+  } catch (e) { alert(e.message); }
+}
+
+// The line naming who moderates, from actor ids: each one's own handle where
+// something says it, and the address it was read from otherwise.
+async function paintMods(ids) {
+  if (!ids.length) return;
+  const cat = cats()[0];
+  const named = await Promise.all(ids.map(async (id) => {
+    const card = cat ? await authorOnce(cat.base, id).catch(() => null) : null;
+    const handle = card?.handle || await modLabel(id);
+    return `<a href="#/who/${encodeURIComponent(id)}">${esc(handle)}</a>`;
+  }));
+  $('mods-who').innerHTML = `<span class="lead">moderators:</span> ${named.join(', ')}`;
+}
+
+// What to call a moderator: the card the forum kept of them, then the actor's
+// own word for it, and a name read off the address only when neither answers.
+async function modLabel(actorId) {
+  const cat = cats()[0];
+  const card = cat ? await authorOnce(cat.base, actorId) : null;
+  if (card?.handle) return card.handle;
+  return (await read.actorHandle(actorId).catch(() => null)) || authorLabel(actorId);
+}
+
+// What a moderator types is a handle; what the wire names is the actor behind
+// it. A server that will not say who that is stops the ask here, where the
+// person who typed it is looking, rather than on the forum an hour later.
+async function actorFor(typed) {
+  if (!typed) return null;
+  try { return await actorOfHandle(typed); } catch (e) { settingsSaid(e.message, true); return null; }
+}
+
+// Every settings change is an ordinary activity naming what it changes: a
+// Create of a Group for a new category, an Update for a name, an Add or a
+// Remove for who moderates and who may read.
+// What came of a settings change, where the reader can see it: the line that
+// reads aloud is invisible on the screen, so a change that worked looked
+// exactly like a button that did nothing.
+function settingsSaid(text, bad = false) {
+  say(text);
+  if ($('panel').open) {
+    const box = $('panel-err');
+    box.textContent = text;
+    box.className = bad ? 'err' : 'said';
+    return;
+  }
+  alert(text);
+}
+
+async function settingsAsk(...activities) {
+  try {
+    const inbox = await pod.podInboxOf(cats()[0]?.id || forum.id, { front, handle: cats()[0]?.slug || forum.handle });
+    for (const activity of activities) {
+      await pod.moderate({ actor: podAcct.actor, podHome: podAcct.podHome, inbox, activity });
+    }
+    settingsSaid('Sent. It takes effect once the forum has checked who asked.');
+  } catch (e) { settingsSaid(e.message, true); }
+}
+
+async function onSettings(b) {
+  const act = b.dataset.act;
+  const catId = b.dataset.cat;
+  const val = (sel) => document.querySelector(sel)?.value.trim() || '';
+  if (act === 'set-forum-name') {
+    const name = val('#set-forum-name');
+    if (name) await settingsAsk({ type: 'Update', object: { id: forum.id, name } });
+  } else if (act === 'set-cat-name') {
+    const name = document.querySelector(`.cat-name[data-cat="${CSS.escape(catId)}"]`)?.value.trim();
+    if (name) await settingsAsk({ type: 'Update', object: { id: catId, name } });
+  } else if (act === 'add-cat') {
+    const slug = val('#set-new-slug').toLowerCase();
+    const name = val('#set-new-name') || slug;
+    if (!/^[a-z0-9][a-z0-9-]{0,62}$/u.test(slug)) { alert('a Fediverse username is lower-case letters, digits and hyphens'); return; }
+    const priv = document.querySelector('input[name="set-new-private"]:checked')?.value === 'private';
+    await settingsAsk({ type: 'Create', target: forum.id,
+      object: { type: 'Group', preferredUsername: slug, name, ...(priv ? { manuallyApprovesFollowers: true } : {}) } });
+  } else if (act === 'add-member' || act === 'drop-member') {
+    const webid = document.querySelector(`.cat-member[data-cat="${CSS.escape(catId)}"]`)?.value.trim();
+    const cat = cats().find(c => c.id === catId);
+    if (webid && cat) await settingsAsk({ type: act === 'add-member' ? 'Add' : 'Remove', object: webid, target: cat.base + 'ap/members' });
+  } else if (act === 'add-mod' || act === 'drop-mod') {
+    const typed = val('#set-mod');
+    if (!typed) { settingsSaid('Type a handle first, like @mei@their.server.', true); return; }
+    const who = await actorFor(typed);
+    const cat = cats()[0];
+    if (!who) return;                       // actorFor has already said why
+    if (!cat) { settingsSaid('This forum has no category to moderate yet.', true); return; }
+    // One handle says two things: who may ask for moderation, and whose pod
+    // the rule on the queue names. The forum finds the pod behind the actor.
+    const type = act === 'add-mod' ? 'Add' : 'Remove';
+    await settingsAsk({ type, object: who, target: cat.base + 'ap/moderators' },
+      { type, object: who, target: `${base}mod/` });
+  }
+}
+
+async function modLock(topicId, on) {
+  // AS2 types `closed` as a TIME, so closing carries the moment it closed and
+  // reopening REMOVES it — which ActivityPub spells as `null` (§6.3.1, partial
+  // updates). It used to send `closed: false`, which is neither a time nor a
+  // removal: it arrived as the text "false" typed as a date, and `!!"false"` is
+  // true, so every reopen closed the topic again.
+  //
+  // The type is named because the reading is built from a graph, and a node
+  // with nothing on it but an id collapses to a bare id — taking the removal
+  // with it. A topic IS an OrderedCollection, which is what the forum publishes.
+  try {
+    await asksTo({ type: 'Update',
+      object: { id: topicId, type: 'OrderedCollection', closed: on ? new Date().toISOString() : null } });
+  } catch (e) { alert(e.message); }
+}
+
+async function modPin(topicId, on, wholeSite = false) {
+  // Which featured collection it goes into says how far the pin reaches: the
+  // category's, or the forum's own.
+  const target = wholeSite ? base + 'ap/featured' : replyCtx.cat.base + 'ap/featured';
+  try { await asksTo({ type: on ? 'Add' : 'Remove', object: topicId, target }); } catch (e) { alert(e.message); }
+}
+
+// A topic removed from the category is a topic gone (FEP-f15d).
+async function modDropTopic(topicId) {
+  if (!confirm('Delete this topic and every post in it?')) return;
+  try { await asksTo({ type: 'Remove', object: topicId, target: replyCtx.cat.id }); } catch (e) { alert(e.message); }
+}
+
+async function removePost(id) {
+  if (!confirm('Delete this post? Everywhere it has reached is told to remove it.')) return;
+  try {
+    const cat = replyCtx.cat;
+    if (podAcct) {
+      const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+      await pod.remove({ actor: podAcct.actor, podHome: podAcct.podHome, id, category: cat.id,
+        categoryBase: cat.base, isPrivate: !!cat.private, inbox });
+    } else {
+      const p = await read.post(cat.base, id);
+      await login.remove({ url: p?.page || id });
+    }
+    forgetIndex();
+    await route();
+  } catch (e) { alert(e.message); }
+}
+$('reply-cancel').addEventListener('click', () => $('reply-dlg').close());
+// Open or private is the forum's setting, changed here and nowhere else:
+// nobody joining, and nobody being named a member, ever moves a category
+// between the two.
+$('main').addEventListener('change', async (e) => {
+  const r = e.target;
+  if (r?.dataset?.act !== 'set-cat-private' || !r.checked) return;
+  const cat = cats().find(c => c.id === r.dataset.cat);
+  if (!cat) return;
+  const priv = r.value === 'private';
+  if (priv === !!cat.private) return;
+  await settingsAsk({ type: 'Update', object: { id: cat.id, manuallyApprovesFollowers: priv } });
+  cat.private = priv;
+});
+
+let findTimer = null;
+function onFind(e) {
+  if (e.target?.id !== 'find') return;
+  finding = e.target.value;
+  clearTimeout(findTimer);
+  findTimer = setTimeout(async () => {
+    const where = e.target.selectionStart;
+    await showForum();
+    const box = document.getElementById('find');
+    if (box) { box.focus(); box.setSelectionRange(where, where); }
+  }, 250);
+}
+$('main').addEventListener('input', onFind);
+
+// The moderators row is above <main>, so the page's own handlers never see the
+// controls at its end: they are the same acts, listened for here.
+$('mods-line').addEventListener('click', (e) => {
+  const b = e.target.closest('button[data-act]');
+  if (!b) return;
+  if (b.dataset.act === 'search') {
+    const box = $('find');
+    if (!box) return;
+    b.hidden = true;
+    box.hidden = false;
+    box.focus();
+    return;
+  }
+  if (b.dataset.act === 'newtopic') {
+    const cat = catBySlug(b.dataset.slug);
+    if (!cat) return;
+    replyBox({ cat, title: 'Start a topic', inReplyToUrl: null, topicId: null });
+    $('reply-row').hidden = true;
+    openReply({ inReplyToUrl: null });
+  }
+});
+$('mods-line').addEventListener('input', onFind);
+$('mods-line').addEventListener('focusout', onFindOut);
+
+// Nothing typed and the reader has gone elsewhere: the row takes its width
+// back. Something typed stays open, so what is being searched for is visible.
+function onFindOut(e) {
+  if (e.target?.id !== 'find' || e.target.value.trim()) return;
+  const button = document.querySelector('button[data-act="search"]');
+  if (!button) return;
+  e.target.hidden = true;
+  button.hidden = false;
+}
+$('main').addEventListener('focusout', onFindOut);
+
+$('reply-image').addEventListener('change', async (e) => {
+  const file = e.target.files?.[0];
+  const said = $('reply-image-said');
+  if (!file) return;
+  if (!podAcct) { said.textContent = 'adding an image needs your pod account'; e.target.value = ''; return; }
+  said.textContent = 'putting it in your pod…';
+  try {
+    const url = await pod.upload({ actor: podAcct.actor, podHome: podAcct.podHome, file });
+    const box = $('reply-text');
+    const alt = file.name.replace(/\.[^.]+$/u, '').replace(/[-_]+/gu, ' ');
+    box.value = `${box.value}${box.value && !box.value.endsWith('\n') ? '\n\n' : ''}![${alt}](${url})\n`;
+    said.textContent = 'added';
+    box.focus();
+  } catch (err) { said.textContent = err.message; }
+  e.target.value = '';
+});
+
+$('fedi-login').addEventListener('click', async () => {
+  $('reply-err').textContent = '';
+  $('fedi-login').disabled = true;
+  try { await signIn($('fedi-handle').value); } catch (e) { $('reply-err').textContent = e.message; }
+  $('fedi-login').disabled = false;
+});
+$('fedi-handle').addEventListener('keydown', (e) => { if (e.key === 'Enter') $('fedi-login').click(); });
+
+// The stand-alone sign-in. Same signIn() as the Reply box's, reporting into
+// this dialog's own line rather than the other one's.
+$('signin-go').addEventListener('click', async () => {
+  $('signin-note').textContent = '';
+  $('signin-go').disabled = true;
+  try { await signIn($('signin-handle').value, 'signin-note'); } catch (e) { $('signin-note').textContent = e.message; }
+  $('signin-go').disabled = false;
+});
+$('signin-handle').addEventListener('keydown', (e) => { if (e.key === 'Enter') $('signin-go').click(); });
+// Cancelling drops what was remembered: the reader said no, and it should not
+// happen to them the next time they sign in for something else.
+$('signin-cancel').addEventListener('click', () => { sessionStorage.removeItem('bb:intent'); $('signin-dlg').close(); });
+$('signin-dlg').addEventListener('cancel', () => sessionStorage.removeItem('bb:intent'));
+async function signOutOfEverything() {
+  if (podAcct) { await pod.signOut(); podAcct = null; localStorage.removeItem('bb:acct'); sessionStorage.removeItem('bb:pod'); } else login.signOut();
+  if (replyCtx) replyBox(replyCtx);
+  paintWho();
+}
+$('masto-logout').addEventListener('click', signOutOfEverything);
+
+$('who-act').addEventListener('click', async () => {
+  if (!account()) return askToSignIn('take part, and to moderate if you are a moderator');
+  await signOutOfEverything();
+  say('Signed out.');
+  route();
+});
+
+async function saveEdit({ body }) {
+  const cat = replyCtx.cat;
+  if (podAcct) {
+    const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+    return pod.edit({ actor: podAcct.actor, podHome: podAcct.podHome, id: editing.id, text: body, category: cat.id,
+      categoryBase: cat.base, isPrivate: !!cat.private, inbox });
+  }
+  return login.edit({ url: editing.page || editing.id, text: body });
+}
+
+// A post written into the reader's own pod and announced to the forum. The
+// category is named on its own pod, which is where a delivery is taken.
+async function postFromPod({ topic, body }) {
+  const cat = replyCtx.cat;
+  const inbox = await pod.podInboxOf(cat.id, { front, handle: cat.slug || null });
+  if (!inbox) throw new Error('the forum did not say where to send it');
+  // Posting in an open category joins it on the way past, which is what makes
+  // the post carry. A private one is joined by asking and being admitted, so
+  // the post is refused here instead, and says so.
+  if (!cat.private) await pod.join({ actor: podAcct.actor, category: cat.id, inbox });
+  return pod.post({
+    actor: podAcct.actor, podHome: podAcct.podHome, category: cat.id, categoryBase: cat.base,
+    categoryHandle: handleOf(cat), isPrivate: !!cat.private, inbox,
+    topic, text: body, inReplyTo: replyCtx.inReplyToUrl,
+    context: replyCtx.topicId ? replyCtx.topicId : null,
+  });
+}
+$('reply-send').addEventListener('click', async () => {
+  if (!replyCtx) return;
+  const body = $('reply-text').value.trim();
+  if (!body) return;
+  // A Mastodon post has no topic name to give: its first line stands in for
+  // one, which is all that server can say. A pod post names the topic on the
+  // activity that opens it, and its words are only its words.
+  // The topic's name, asked for only when a topic is being opened; the
+  // post's own title, which any post may have and any edit may change.
+  const topic = !editing && !replyCtx.topicId ? $('topic-title').value.trim() : '';
+
+  const text = topic ? `${topic}\n\n${body}` : body;
+  $('reply-err').textContent = '';
+  $('reply-send').disabled = true;
+  try {
+    const made = editing
+      ? await saveEdit({ body })
+      : podAcct
+        ? await postFromPod({ topic, body })
+        : await login.post({ text, mention: handleOf(replyCtx.cat), inReplyToUrl: replyCtx.inReplyToUrl });
+    const acct = account();
+    if (!editing && replyCtx.topicId) remember(replyCtx.topicId, { id: made.uri || made.url, author: acct.url || acct.handle, text, at: new Date().toISOString() });
+    $('reply-text').value = '';
+    $('topic-title').value = '';
+    $('reply-dlg').close();
+    forgetIndex();
+    await route();
+  } catch (e) { $('reply-err').textContent = e.message; }
+  $('reply-send').disabled = false;
+});
+
+// Back from the reader's server with a code: finish the sign-in, then clean
+// the address so a reload does not replay it.
+(async () => {
+  // Back from a pod's sign-in: the session is this browser's, and the handle
+  // it belongs to was put aside before leaving.
+  // A reader who signed in stays signed in: the pod session lives in this
+  // browser, and the handle it belongs to is kept beside it.
+  const kept = localStorage.getItem('bb:acct');
+  if (kept && !sessionStorage.getItem('bb:pod')) {
+    try {
+      const s = await pod.session();
+      if (s) { podAcct = { ...JSON.parse(kept), webId: s.webId }; read = reader({ session: s }); }
+      else localStorage.removeItem('bb:acct');
+    } catch { localStorage.removeItem('bb:acct'); }
+  }
+  const waiting = sessionStorage.getItem('bb:pod');
+  if (waiting) {
+    try {
+      const who = JSON.parse(waiting);
+      const s = params.get('code') ? await pod.complete(location.href) : await pod.session();
+      if (s) {
+        podAcct = { ...who, webId: s.webId };
+        read = reader({ session: s });
+        try { localStorage.setItem('bb:acct', JSON.stringify(who)); } catch { /* blocked storage */ }
+        sessionStorage.removeItem('bb:pod');
+        params.delete('code'); params.delete('state'); params.delete('iss');
+        const q = String(params);
+        const back = sessionStorage.getItem('bb:return') || '';
+        sessionStorage.removeItem('bb:return');
+        history.replaceState(null, '', `${location.pathname}${q ? '?' + q : ''}${back}`);
+      }
+    } catch (e) { $('reply-err').textContent = e.message; }
+  }
+  const code = params.get('code');
+  const state = params.get('state');
+  if (code && state) {
+    try {
+      await login.complete({ state, code });
+      params.delete('code'); params.delete('state');
+      const back = sessionStorage.getItem('bb:return') || '';
+      sessionStorage.removeItem('bb:return');
+      const q = String(params);
+      history.replaceState(null, '', `${location.pathname}${q ? '?' + q : ''}${back}`);
+    } catch (e) { $('reply-err').textContent = e.message; }
+  }
+  // Sign-up lives at the Gateway, which is this page's own site or the one it is a face of.
+  $('fedipod-signup').href = front + '/new-account';
+  window.addEventListener('hashchange', () => route());
+  await load();
+  // Whatever the reader pressed before being asked to sign in. After `load`,
+  // because voting and joining both need the categories to be known.
+  await replayIntent();
+})();