astro-atmosphere-comments 0.3.0 → 0.4.0

package/components/AtmosphereReactions.astro

@@ -0,0 +1,785 @@
+---
+// Like and Repost (with their counts), and Reply and Quote links to Bluesky,
+// under any Bluesky post your page shows: a feed of your latest posts, say.
+// Put it once in your layout, and mark each post's element with its AT URI:
+//
+//   <article data-atmosphere-post="at://did:plc:…/app.bsky.feed.post/…"
+//            data-atmosphere-url="https://bsky.app/profile/…/post/…"
+//            data-atmosphere-likes="3" data-atmosphere-reposts="1">
+//
+// It also fills any element marked `data-atmosphere-account` (in your
+// header, say) with the signed-in reader's avatar, which opens a small menu
+// saying who they're signed in as, with Sign out. Signed out, the element
+// stays empty (give it `hidden` so it takes no space).
+//
+// A link marked `data-atmosphere-follow="<DID>"` (and
+// `data-atmosphere-follow-handle="you.bsky.social"`), such as "Follow me on
+// Bluesky", becomes a Follow / Following button for signed-in readers; a
+// second press unfollows. The first follow asks for one more permission. Only
+// `allowedAuthors` can be followed through your site.
+//
+// Signed-in readers like and repost from your page. Anyone else who presses
+// Like or Repost is offered the sign-in form in an overlay, and the like or
+// repost is done once they're back. Only posts by the integration's
+// `allowedAuthors` can be liked or reposted through your site.
+//
+// Props: locale, messages (as for AtmosphereComments).
+import settings from "../lib/settings";
+import { messagesFor, pickLocale, translate } from "../lib/i18n";
+import SignInForm from "./SignInForm.astro";
+import Composer from "./Composer.astro";
+import "./atmosphere.css";
+
+interface Props {
+  /** The language of the wording, e.g. "fr". Overrides the integration's `locale`. */
+  locale?: string;
+  /** Your own wording for any line, by its key in locales/en.json. */
+  messages?: Record<string, string>;
+}
+
+const lang = pickLocale(Astro.props.locale, settings.locale, Astro.currentLocale);
+const messages = messagesFor(lang, { ...settings.messages, ...Astro.props.messages });
+const t = (key: string) => translate(messages, lang, key);
+const { base } = settings;
+---
+
+<atmosphere-reactions data-base={base} data-locale={lang} data-messages={JSON.stringify(messages)}>
+  <dialog class="atmo atmo-signin" aria-label={t("dialog.heading")} data-signin-dialog>
+    <button type="button" class="atmo-signin__close" aria-label={t("dialog.close")} data-close>×</button>
+    <SignInForm id="atmo-dialog" returnTo={Astro.url.pathname} messages={messages} lang={lang} heading={t("dialog.heading")} />
+    <p class="atmo-signin__status" role="status" data-dialog-status></p>
+  </dialog>
+  {/* Reply or Quote, for signed-in readers: the comment box in an overlay. */}
+  <dialog class="atmo atmo-signin atmo-compose" aria-label={t("postActions.replyLabel")} data-compose-dialog>
+    <button type="button" class="atmo-signin__close" aria-label={t("dialog.close")} data-close>×</button>
+    <Composer id="atmo-compose" messages={messages} lang={lang} cancel />
+    <div class="atmo-compose__done" data-compose-done hidden>
+      <p data-compose-done-text></p>
+      <button type="button" class="atmo__link-button" data-close>{t("dialog.close")}</button>
+    </div>
+    <p class="atmo-signin__status" role="status" data-compose-status></p>
+  </dialog>
+</atmosphere-reactions>
+
+<script>
+  import { translate } from "../lib/translate";
+  import { enhanceHandleBox } from "../lib/client/handle-suggestions";
+  import { MAX, quotePreview, setUpComposer, type Posted } from "../lib/client/composer";
+
+  const HEART = '<path d="M12 20.5s-7.5-4.4-7.5-10.1A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 7.5 2.8c0 5.7-7.5 10.1-7.5 10.1Z" />';
+  const ARROWS = '<path d="M7 8h10l-3-3M17 16H7l3 3M5 13V9.5A1.5 1.5 0 0 1 6.5 8M19 11v3.5a1.5 1.5 0 0 1-1.5 1.5" />';
+  const BUBBLE = '<path d="M5 6.5A2.5 2.5 0 0 1 7.5 4h9A2.5 2.5 0 0 1 19 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4 3.5V16h0.5A2.5 2.5 0 0 1 5 13.5Z" />';
+  // The Bluesky butterfly (Simple Icons, CC0), on the Follow button.
+  const BUTTERFLY = '<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />';
+  const QUOTE = '<path d="M5 18h5v-5H6.5A4.5 4.5 0 0 1 11 8.5V7a6 6 0 0 0-6 6Zm9 0h5v-5h-3.5A4.5 4.5 0 0 1 20 8.5V7a6 6 0 0 0-6 6Z" />';
+  // Messages the sign-in round trip can bring back (?atmosphere=…).
+  const SIGN_IN_PROBLEMS: Record<string, string> = {
+    "sign-in-failed": "messages.signInFailed",
+    "account-not-found": "messages.accountNotFound",
+    "invalid-handle": "messages.invalidHandle",
+  };
+
+  type Kind = "like" | "repost";
+  // Error codes from the routes, and their wording (as in the comments).
+  const MESSAGE_KEYS: Record<string, string> = {
+    "signed-out": "messages.signedOut",
+    "new-permissions": "messages.newPermissions",
+    "not-allowed": "messages.notAllowed",
+    "too-long": "messages.tooLong",
+    "too-many": "messages.tooMany",
+    error: "messages.error",
+  };
+
+  class AtmosphereReactions extends HTMLElement {
+    connectedCallback() {
+      const base = this.dataset.base ?? "/atmosphere";
+      const lang = this.dataset.locale || "en";
+      const wording = JSON.parse(this.dataset.messages || "{}") as Record<string, string>;
+      const t = (key: string, vars?: Record<string, string | number>) => translate(wording, lang, key, vars);
+      const dialog = this.querySelector<HTMLDialogElement>("[data-signin-dialog]")!;
+      const form = dialog.querySelector<HTMLFormElement>("[data-login-form]")!;
+      const status = dialog.querySelector<HTMLElement>("[data-dialog-status]")!;
+      let signedIn = false;
+      let handle = "";
+      let me: { did?: string; handle?: string; displayName?: string; avatar?: string } = {};
+      // What the reader has liked or reposted, by post.
+      const known: Record<string, { liked: boolean; reposted: boolean }> = {};
+
+      enhanceHandleBox(form, base);
+      for (const overlay of this.querySelectorAll<HTMLDialogElement>("dialog")) {
+        overlay.querySelectorAll("[data-close]").forEach((button) => button.addEventListener("click", () => overlay.close()));
+        // A click on the dimmed page around the overlay closes it.
+        overlay.addEventListener("click", (event) => {
+          if (event.target === overlay) overlay.close();
+        });
+      }
+
+      // An avatar picture, or the name's first letter if there isn't one.
+      const setAvatar = (slot: HTMLElement, name: string, src?: string) => {
+        slot.textContent = name.trim().charAt(0).toUpperCase();
+        if (!src) return;
+        const img = Object.assign(document.createElement("img"), { src, alt: "" });
+        img.onload = () => slot.replaceChildren(img);
+      };
+      const message = (code: string) => t(MESSAGE_KEYS[code] ?? MESSAGE_KEYS.error, { max: MAX });
+
+      // Reply and Quote for signed-in readers: the comment box in an overlay,
+      // posting to their own account. What they post shows on Bluesky, not
+      // on this page, so the overlay ends by saying so, with a link to it.
+      const compose = this.querySelector<HTMLDialogElement>("[data-compose-dialog]")!;
+      const composeForm = compose.querySelector<HTMLFormElement>("[data-composer]")!;
+      const composeStatus = compose.querySelector<HTMLElement>("[data-compose-status]")!;
+      const composeDone = compose.querySelector<HTMLElement>("[data-compose-done]")!;
+      const $c = <T extends Element>(selector: string) => composeForm.querySelector<T>(selector)!;
+      const composerContext = { base, t, message, setAvatar };
+      let composeRoot = "";
+      let composeMode: "reply" | "quote" = "reply";
+      const composer = setUpComposer(composeForm, composerContext, {
+        root: () => composeRoot,
+        extra: () => (composeMode === "quote" ? { quote: true } : {}),
+        tell: (text) => (composeStatus.textContent = text),
+        onPosted: (data: Posted) => {
+          composeStatus.textContent = "";
+          composeForm.hidden = true;
+          const done = compose.querySelector<HTMLElement>("[data-compose-done-text]")!;
+          done.replaceChildren(
+            `${t(data.quote ? "posted.quote" : "posted.reply")} ${t("posted.notHere")} `,
+            Object.assign(make("a", "", t("posted.see")), { href: data.url, target: "_blank", rel: "noopener noreferrer" }),
+          );
+          composeDone.hidden = false;
+          this.dispatchEvent(new CustomEvent("atmosphere:commented", { detail: data, bubbles: true }));
+        },
+        onError: (code, tell) => {
+          if (code === "signed-out" || code === "new-permissions") signedIn = false;
+          tell(message(code));
+        },
+        onInput: () => quote.update(),
+      });
+      const quote = quotePreview(composeForm, composer.textarea, composerContext);
+      $c<HTMLElement>("[data-cancel-context]").hidden = true;
+
+      const openCompose = (post: HTMLElement, mode: "reply" | "quote") => {
+        composeRoot = post.dataset.atmospherePost!;
+        composeMode = mode;
+        const author = post.dataset.atmosphereUrl?.match(/\/profile\/([^/]+)\//)?.[1];
+        $c<HTMLElement>("[data-context]").hidden = false;
+        $c<HTMLElement>("[data-context-text]").textContent =
+          mode === "quote" ? t("composer.quoting") : t("composer.replyingTo", { name: author ? `@${author}` : t("comment.someone") });
+        $c<HTMLElement>("[data-verb]").textContent = t(mode === "quote" ? "composer.quote" : "comment.reply");
+        $c<HTMLElement>("[data-submit]").textContent = t(mode === "quote" ? "composer.postQuote" : "composer.postReply");
+        $c<HTMLElement>("[data-preview]").hidden = mode !== "quote";
+        compose.setAttribute("aria-label", t(mode === "quote" ? "postActions.quoteLabel" : "postActions.replyLabel"));
+        composer.textarea.value = "";
+        composer.updateCount();
+        composeStatus.textContent = "";
+        composeDone.hidden = true;
+        composeForm.hidden = false;
+        if (mode === "quote") void quote.load(composeRoot);
+        if (!compose.open) compose.showModal();
+        composer.textarea.focus();
+      };
+
+      // The reader, in the box: "Reply as @handle" with their avatar, and in
+      // the quote preview.
+      const showMe = () => {
+        const name = me.displayName || me.handle || "";
+        $c<HTMLElement>("[data-handle]").textContent = handle;
+        setAvatar($c<HTMLElement>("[data-me-avatar]"), name, me.avatar);
+        $c<HTMLElement>("[data-preview-name]").textContent = name;
+        $c<HTMLElement>("[data-preview-handle]").textContent = handle;
+        setAvatar($c<HTMLElement>("[data-preview-avatar]"), name, me.avatar);
+      };
+
+      const make = <K extends keyof HTMLElementTagNameMap>(tag: K, className = "", text?: string) => {
+        const element = document.createElement(tag);
+        if (className) element.className = className;
+        if (text !== undefined) element.textContent = text;
+        return element;
+      };
+
+      // Not signed in: the sign-in form, coming back to finish this like or repost.
+      const askToSignIn = (kind: Kind, uri: string, problem = "") => {
+        form.querySelector<HTMLInputElement>("[data-return-to]")!.value =
+          `${location.pathname}${location.search}#atmo-react=${kind}:${encodeURIComponent(uri)}`;
+        status.textContent = problem;
+        if (!dialog.open) dialog.showModal();
+        form.querySelector<HTMLInputElement>('input[name="handle"]')!.focus();
+      };
+
+      const send = (body: unknown) =>
+        fetch(`${base}/react`, {
+          method: "POST",
+          credentials: "same-origin",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(body),
+        });
+
+      const icon = (paths: string) => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
+
+      const setCount = (button: HTMLElement, value: number) => {
+        button.dataset.count = String(value);
+        button.querySelector("span")!.textContent = value ? String(value) : "";
+      };
+
+      const react = async (post: HTMLElement, button: HTMLButtonElement, kind: Kind, on: boolean) => {
+        const uri = post.dataset.atmospherePost!;
+        if (!signedIn) return askToSignIn(kind, uri);
+        const before = Number(button.dataset.count || 0);
+        button.setAttribute("aria-pressed", String(on));
+        setCount(button, Math.max(0, before + (on ? 1 : -1)));
+        try {
+          const response = await send({ post: uri, kind, on });
+          if (response.ok) {
+            known[uri] = { ...(known[uri] ?? { liked: false, reposted: false }), [kind === "like" ? "liked" : "reposted"]: on };
+            return;
+          }
+          const data = (await response.json().catch(() => ({}))) as { error?: string };
+          button.setAttribute("aria-pressed", String(!on));
+          setCount(button, before);
+          if (data.error === "signed-out" || data.error === "new-permissions") {
+            signedIn = false;
+            labelButton(button, kind);
+            askToSignIn(kind, uri, t(data.error === "signed-out" ? "messages.signedOut" : "messages.newPermissions"));
+          }
+        } catch {
+          button.setAttribute("aria-pressed", String(!on));
+          setCount(button, before);
+        }
+      };
+
+      // "Like as @handle" when signed in (so readers know which account),
+      // "Like this post" otherwise; the same for screen readers.
+      const labelButton = (button: HTMLElement, kind: Kind) => {
+        button.title = signedIn && handle
+          ? t(kind === "like" ? "postActions.likeAs" : "postActions.repostAs", { handle })
+          : t(kind === "like" ? "postActions.likeLabel" : "postActions.repostLabel");
+        button.setAttribute("aria-label", button.title);
+      };
+
+      const labelLink = (link: HTMLElement) => {
+        const quote = link.dataset.kind === "quote";
+        link.title = signedIn && handle
+          ? t(quote ? "postActions.quoteAs" : "postActions.replyAs", { handle })
+          : t(quote ? "postActions.quoteLabel" : "postActions.replyLabel");
+        link.setAttribute("aria-label", link.title);
+      };
+
+      const reactButton = (post: HTMLElement, kind: Kind) => {
+        const button = make("button", "atmo-post-action");
+        button.type = "button";
+        button.dataset.kind = kind;
+        labelButton(button, kind);
+        const seen = known[post.dataset.atmospherePost!];
+        button.setAttribute("aria-pressed", String(!!(kind === "like" ? seen?.liked : seen?.reposted)));
+        button.innerHTML = `${icon(kind === "like" ? HEART : ARROWS)}<span></span>`;
+        setCount(button, Number(post.dataset[kind === "like" ? "atmosphereLikes" : "atmosphereReposts"] || 0));
+        button.addEventListener("click", () => react(post, button, kind, button.getAttribute("aria-pressed") !== "true"));
+        return button;
+      };
+
+      // Reply and Quote: the comment box in an overlay for signed-in readers,
+      // otherwise the post on Bluesky (as also with ⌘-click or a middle click).
+      // Icons only, as on Bluesky, with their names for screen readers and as
+      // tooltips.
+      const bskyLink = (post: HTMLElement, paths: string) => {
+        const link = make("a", "atmo-post-action");
+        const mode = paths === BUBBLE ? "reply" : "quote";
+        link.href = post.dataset.atmosphereUrl ?? "#";
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        link.dataset.kind = mode;
+        labelLink(link);
+        link.innerHTML = icon(paths);
+        link.addEventListener("click", (event) => {
+          if (!signedIn || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          openCompose(post, mode);
+        });
+        return link;
+      };
+
+      const posts = () => [...document.querySelectorAll<HTMLElement>("[data-atmosphere-post]")];
+
+      // Returns how many posts got buttons, so new arrivals can be checked.
+      const addActions = (): number => {
+        let added = 0;
+        for (const post of posts()) {
+          if (post.querySelector(":scope > .atmo-post-actions")) continue;
+          added += 1;
+          const actions = make("div", "atmo-post-actions");
+          actions.append(
+            bskyLink(post, BUBBLE),
+            reactButton(post, "repost"),
+            bskyLink(post, QUOTE),
+            reactButton(post, "like"),
+          );
+          post.append(actions);
+        }
+        return added;
+      };
+
+      // Which of the posts the reader has already liked or reposted.
+      const loadState = async () => {
+        const uris = posts().map((post) => post.dataset.atmospherePost!);
+        if (!signedIn || !uris.length) return;
+        try {
+          const query = uris.map((uri) => `post=${encodeURIComponent(uri)}`).join("&");
+          const response = await fetch(`${base}/state?${query}`, { credentials: "same-origin" });
+          if (!response.ok) return;
+          const state = ((await response.json()) as { posts?: typeof known }).posts ?? {};
+          Object.assign(known, state);
+          for (const post of posts()) {
+            const seen = state[post.dataset.atmospherePost!];
+            if (!seen) continue;
+            post.querySelector(".atmo-post-action[data-kind='like']")?.setAttribute("aria-pressed", String(seen.liked));
+            post.querySelector(".atmo-post-action[data-kind='repost']")?.setAttribute("aria-pressed", String(seen.reposted));
+          }
+        } catch {
+          // The buttons stay as they are; a click still works.
+        }
+      };
+
+      // Follow buttons in place of links marked data-atmosphere-follow, for
+      // signed-in readers: "Follow @handle", then "Following" (a second press
+      // unfollows, as on Bluesky, without inviting it).
+      const followButtons = new Map<string, { following: boolean; set: (on: boolean) => void; press: () => Promise<void> }>();
+      // Following isn't part of signing in: the first follow asks the
+      // reader's account host for it, then carries on when they're back.
+      const askFollowPermission = (subject: string) => {
+        const permit = Object.assign(document.createElement("form"), { method: "post", action: `${base}/login` });
+        permit.hidden = true;
+        const field = (name: string, value: string) =>
+          permit.append(Object.assign(document.createElement("input"), { type: "hidden", name, value }));
+        field("handle", me.did || me.handle || "");
+        field("permission", "follow");
+        field("returnTo", `${location.pathname}${location.search}#atmo-follow=${encodeURIComponent(subject)}`);
+        document.body.append(permit);
+        permit.submit();
+      };
+      const setUpFollow = async () => {
+        for (const link of document.querySelectorAll<HTMLElement>("[data-atmosphere-follow]")) {
+          const subject = link.dataset.atmosphereFollow!;
+          if (followButtons.has(subject) || link.nextElementSibling?.matches(".atmo-follow")) continue;
+          // Nobody can follow themselves: the account's owner keeps the link.
+          if (subject === me.did) continue;
+          const who = link.dataset.atmosphereFollowHandle ? `@${link.dataset.atmosphereFollowHandle}` : t("comment.someone");
+          const button = make("button", "atmo-follow");
+          button.type = "button";
+          let following = false;
+          // The account's avatar, through the site (its own accounts' are always served).
+          const avatar = make("img", "atmo-follow__avatar");
+          avatar.src = `${base}/media?avatar=${encodeURIComponent(subject)}`;
+          avatar.alt = "";
+          avatar.onerror = () => avatar.remove();
+          const render = () => {
+            button.setAttribute("aria-pressed", String(following));
+            // The butterfly, then "Follow" with the account's avatar beside its
+            // handle (wherever the language puts the handle), or the avatar
+            // with "Following".
+            button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${BUTTERFLY}</svg>`;
+            if (following) {
+              button.append(avatar, make("span", "", `✓ ${t("follow.following")}`));
+            } else {
+              const [before, after = ""] = t("follow.follow").split("{{handle}}");
+              if (before.trim()) button.append(make("span", "", before.trim()));
+              button.append(avatar, make("span", "", who));
+              if (after.trim()) button.append(make("span", "", after.trim()));
+            }
+            button.title = following ? t("follow.followingLabel", { handle: who }) : t("follow.followAs", { handle: who, me: handle });
+            button.setAttribute("aria-label", button.title);
+          };
+          const set = (on: boolean) => {
+            following = on;
+            render();
+          };
+          const press = async () => {
+            button.disabled = true;
+            try {
+              const response = await fetch(`${base}/follow`, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ subject, on: !following }),
+              });
+              const data = (await response.json().catch(() => ({}))) as { following?: boolean; error?: string };
+              if (response.ok) return set(!!data.following);
+              if (data.error === "needs-permission") return askFollowPermission(subject);
+              if (data.error === "signed-out" || data.error === "new-permissions") location.reload();
+            } finally {
+              button.disabled = false;
+            }
+          };
+          button.addEventListener("click", () => void press());
+          followButtons.set(subject, { get following() { return following; }, set, press });
+          render();
+          // The button takes the link's place. (Inline, as a site's own style
+          // for the link could otherwise keep it showing.)
+          link.hidden = true;
+          link.style.display = "none";
+          link.after(button);
+          try {
+            const response = await fetch(`${base}/follow?subject=${encodeURIComponent(subject)}`, { credentials: "same-origin" });
+            if (response.ok) set(!!((await response.json()) as { following?: boolean }).following);
+          } catch {
+            // Shown as Follow; pressing it still works.
+          }
+        }
+      };
+
+      // Back from approving following: follow as they asked.
+      const finishPendingFollow = async () => {
+        const pending = location.hash.match(/^#atmo-follow=(.+)$/);
+        if (!pending) return;
+        const subject = decodeURIComponent(pending[1]);
+        const url = new URL(location.href);
+        if (!document.querySelector("atmosphere-comments")) url.searchParams.delete("atmosphere");
+        history.replaceState(history.state, "", `${url.pathname}${url.search}`);
+        const follow = followButtons.get(subject);
+        if (signedIn && follow && !follow.following) await follow.press();
+      };
+
+      // Back from signing in: finish the like or repost they pressed.
+      const finishPending = async () => {
+        const pending = location.hash.match(/^#atmo-react=(like|repost):(.+)$/);
+        if (!pending) return;
+        const [, kind, encoded] = pending;
+        const uri = decodeURIComponent(encoded);
+        const url = new URL(location.href);
+        const problem = url.searchParams.get("atmosphere") ?? "";
+        // The comments component tidies this away on post pages; elsewhere, do it here.
+        if (!document.querySelector("atmosphere-comments")) url.searchParams.delete("atmosphere");
+        // The page may still be loading its posts (a server island, say).
+        for (let tries = 0; tries < 40 && !posts().some((post) => post.dataset.atmospherePost === uri); tries++) {
+          await new Promise((resolve) => setTimeout(resolve, 250));
+        }
+        const post = posts().find((candidate) => candidate.dataset.atmospherePost === uri);
+        history.replaceState(history.state, "", `${url.pathname}${url.search}`);
+        if (!post) return;
+        post.scrollIntoView({ block: "center" });
+        if (!signedIn) {
+          if (SIGN_IN_PROBLEMS[problem]) askToSignIn(kind as Kind, uri, t(SIGN_IN_PROBLEMS[problem]));
+          return;
+        }
+        const button = post.querySelector<HTMLButtonElement>(`.atmo-post-action[data-kind='${kind}']`);
+        if (button && button.getAttribute("aria-pressed") !== "true") await react(post, button, kind as Kind, true);
+      };
+
+      // The reader's avatar wherever the page marks data-atmosphere-account,
+      // opening a menu with who they're signed in as and Sign out.
+      const showAccount = (me: { handle?: string; displayName?: string; avatar?: string }) => {
+        for (const slot of document.querySelectorAll<HTMLElement>("[data-atmosphere-account]")) {
+          if (slot.querySelector(".atmo-account")) continue;
+          const handle = `@${me.handle}`;
+          const account = make("span", "atmo-account");
+          const button = make("button", "atmo-account__button");
+          button.type = "button";
+          button.title = t("account.signedInAs", { handle });
+          button.setAttribute("aria-label", button.title);
+          button.setAttribute("aria-haspopup", "true");
+          button.setAttribute("aria-expanded", "false");
+          const name = me.displayName || me.handle || "";
+          button.textContent = name.trim().charAt(0).toUpperCase();
+          if (me.avatar) {
+            const img = Object.assign(document.createElement("img"), { src: me.avatar, alt: "" });
+            img.onload = () => button.replaceChildren(img);
+          }
+          const menu = make("div", "atmo-account__menu");
+          menu.hidden = true;
+          const who = make("p", "atmo-account__who", t("account.signedInAsLabel"));
+          const strong = make("strong", "", handle);
+          who.append(make("br"), strong);
+          const signOut = make("button", "atmo-account__sign-out", t("account.signOut"));
+          signOut.type = "button";
+          signOut.addEventListener("click", async () => {
+            signOut.disabled = true;
+            await fetch(`${base}/logout`, { method: "POST", credentials: "same-origin" }).catch(() => undefined);
+            location.reload();
+          });
+          menu.append(who, signOut);
+          const close = () => {
+            menu.hidden = true;
+            button.setAttribute("aria-expanded", "false");
+          };
+          button.addEventListener("click", () => {
+            const open = menu.hidden;
+            menu.hidden = !open;
+            button.setAttribute("aria-expanded", String(open));
+            if (open) signOut.focus();
+          });
+          document.addEventListener("click", (event) => {
+            if (!account.contains(event.target as Node)) close();
+          });
+          account.addEventListener("keydown", (event) => {
+            if (event.key === "Escape" && !menu.hidden) {
+              close();
+              button.focus();
+            }
+          });
+          account.append(button, menu);
+          slot.append(account);
+          slot.hidden = false;
+        }
+      };
+
+      fetch(`${base}/me`, { credentials: "same-origin" })
+        .then((response) => response.json())
+        .then((found: { signedIn?: boolean; handle?: string; displayName?: string; avatar?: string }) => {
+          me = found;
+          signedIn = !!found.signedIn;
+          handle = found.handle ? `@${found.handle}` : "";
+          if (signedIn) {
+            showAccount(found);
+            showMe();
+          }
+          // Buttons added before we knew get the signed-in wording too.
+          for (const button of document.querySelectorAll<HTMLElement>(".atmo-post-action[data-kind='like'], .atmo-post-action[data-kind='repost']")) {
+            labelButton(button, button.dataset.kind as Kind);
+          }
+          document.querySelectorAll<HTMLElement>(".atmo-post-action[data-kind='reply'], .atmo-post-action[data-kind='quote']").forEach(labelLink);
+        })
+        .catch(() => undefined)
+        .finally(async () => {
+          addActions();
+          await loadState();
+          await finishPending();
+          if (signedIn) {
+            await setUpFollow();
+            await finishPendingFollow();
+          }
+        });
+
+      // Posts that arrive later (a server island, say) get buttons too.
+      let recheck: number | undefined;
+      new MutationObserver(() => {
+        if (!addActions() || !signedIn) return;
+        window.clearTimeout(recheck);
+        recheck = window.setTimeout(loadState, 300);
+      }).observe(document.body, { childList: true, subtree: true });
+    }
+  }
+
+  if (!customElements.get("atmosphere-reactions")) customElements.define("atmosphere-reactions", AtmosphereReactions);
+</script>
+
+<style>
+  .atmo-signin {
+    /* Centred on the screen, whatever margin a site gives .atmo. */
+    margin: auto;
+    width: min(92vw, 520px);
+    padding: 22px 22px 18px;
+    border: 1px solid var(--atmo-border, #8886);
+    border-radius: calc(var(--atmo-radius, 10px) + 6px);
+    background: var(--atmo-dialog-bg, var(--atmo-menu-bg, Canvas));
+    color: var(--atmo-text, CanvasText);
+    box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
+  }
+
+  .atmo-signin::backdrop {
+    background: rgb(0 0 0 / 0.55);
+  }
+
+  .atmo-signin :global(.atmo__login) {
+    margin-top: 0;
+  }
+
+  .atmo-signin__close {
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    padding: 4px 8px;
+    border: 0;
+    background: none;
+    color: var(--atmo-muted, inherit);
+    font: inherit;
+    font-size: 1.4em;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .atmo-compose {
+    width: min(92vw, 600px);
+  }
+
+  .atmo-compose :global(.atmo__composer) {
+    margin-top: 0;
+  }
+
+  .atmo-compose__done p {
+    margin: 0 0 12px;
+  }
+
+  .atmo-signin__status {
+    margin: 10px 0 0;
+    color: var(--atmo-muted, inherit);
+    font-size: 0.9em;
+  }
+
+  .atmo-signin__status:empty {
+    display: none;
+  }
+
+  /* The row under each post. Defaults carry no weight, so a site's own
+     rules always win. */
+  :global(:where(.atmo-post-actions)) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 18px;
+    margin-top: 10px;
+  }
+
+  :global(:where(.atmo-post-action)) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--atmo-muted, inherit);
+    font: inherit;
+    font-size: 0.85em;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  :global(:where(.atmo-post-action:hover, .atmo-post-action:focus-visible)) {
+    color: var(--atmo-accent, #1185fe);
+  }
+
+  :global(:where(.atmo-post-action svg)) {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  :global(:where(.atmo-post-action[aria-pressed="true"])) {
+    color: var(--atmo-accent, #1185fe);
+  }
+
+  :global(:where(.atmo-post-action[data-kind="like"][aria-pressed="true"] svg)) {
+    fill: currentColor;
+  }
+
+  /* Follow / Following, in place of a "Follow me" link. */
+  /* Low-key: a slim outlined pill in the accent colour. */
+  :global(:where(.atmo-follow)) {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 11px;
+    border: 1px solid var(--atmo-accent, #1185fe);
+    border-radius: 999px;
+    background: none;
+    color: var(--atmo-accent, #1185fe);
+    font: inherit;
+    font-size: 0.85em;
+    font-weight: 600;
+    line-height: 1.5;
+    cursor: pointer;
+  }
+
+  :global(:where(.atmo-follow:not([aria-pressed="true"]):hover, .atmo-follow:not([aria-pressed="true"]):focus-visible)) {
+    background: color-mix(in srgb, var(--atmo-accent, #1185fe) 12%, transparent);
+  }
+
+  :global(:where(.atmo-follow svg)) {
+    flex: none;
+    width: 13px;
+    height: 13px;
+    fill: currentColor;
+  }
+
+  :global(:where(.atmo-follow__avatar)) {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  :global(:where(.atmo-follow[aria-pressed="true"])) {
+    border-color: var(--atmo-border, #8886);
+    color: var(--atmo-muted, inherit);
+  }
+
+  :global(:where(.atmo-follow:disabled)) {
+    opacity: 0.6;
+    cursor: progress;
+  }
+
+  /* The signed-in reader's avatar and its menu. */
+  :global(:where(.atmo-account)) {
+    position: relative;
+    display: inline-block;
+  }
+
+  :global(:where(.atmo-account__button)) {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--atmo-border, #8886);
+    border-radius: 50%;
+    background: var(--atmo-field-bg, #8882);
+    color: inherit;
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+  }
+
+  :global(:where(.atmo-account__button img)) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  :global(:where(.atmo-account__menu)) {
+    position: absolute;
+    z-index: 20;
+    top: calc(100% + 8px);
+    right: 0;
+    display: grid;
+    gap: 10px;
+    min-width: 200px;
+    padding: 12px 14px;
+    border: 1px solid var(--atmo-border, #8886);
+    border-radius: var(--atmo-radius, 10px);
+    background: var(--atmo-menu-bg, Canvas);
+    color: var(--atmo-text, CanvasText);
+    box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
+    text-align: left;
+  }
+
+  :global(:where(.atmo-account__menu[hidden])) {
+    display: none;
+  }
+
+  :global(:where(.atmo-account__who)) {
+    margin: 0;
+    color: var(--atmo-muted, inherit);
+    font-size: 0.85em;
+    overflow-wrap: anywhere;
+  }
+
+  :global(:where(.atmo-account__who strong)) {
+    color: var(--atmo-text, inherit);
+  }
+
+  :global(:where(.atmo-account__sign-out)) {
+    justify-self: start;
+    padding: 6px 12px;
+    border: 1px solid var(--atmo-border, #8886);
+    border-radius: var(--atmo-radius, 10px);
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-size: 0.9em;
+    cursor: pointer;
+  }
+</style>