astro-atmosphere-comments 0.4.2 → 0.6.0

package/components/AtmosphereComments.astro

@@ -1,14 +1,14 @@
 ---
-// The comment box under a post: a form to sign in with an Atmosphere account
-// (Bluesky or any other), then, once signed in, Like, Repost and Quote buttons and a box to write a
-// comment (a reply to the post's announcement, or to one of its comments).
+// Under a post: Like, Repost and Quote buttons and a box to write a comment (a
+// reply to the post's announcement, or to one of its comments). Signed out,
+// they open an overlay to sign in with an Atmosphere account (Bluesky or any
+// other), and what the reader pressed is finished once they're back.
 //
 // Props:
 //   post   the announcement's AT URI (at://did/app.bsky.feed.post/rkey).
-//   label   the sign-in form's heading
-//           (default "Sign in to leave a comment, like or repost").
-//   blueskyLink  "Rather not sign in here? Reply on Bluesky instead →" under the
-//           sign-in form (default true; false hides it).
+//   label   the sign-in overlay's heading when commenting (default "Sign in to leave a comment").
+//   blueskyLink  "Rather not sign in here? Reply on Bluesky instead →" in the
+//           sign-in overlay (default true; false hides it).
 //   credit  a small "Powered by Atmosphere Comments for Astro" link under the
 //           comments (default true; false hides it).
 //
@@ -31,12 +31,17 @@
 // text, author, createdAt, quote, parent }), and after a like or repost (or
 // undoing one) `atmosphere:reacted` (detail: { kind, on, author }), so a site
 // can show it straight away.
+//
+// With the integration's `standardSite` option, Like on the post also
+// recommends the page's Standard.site record (<link rel="site.standard.document">),
+// and un-liking removes the recommend. Likes on comments stay Bluesky likes.
 import settings from "../lib/settings";
 import SignInForm from "./SignInForm.astro";
 import Composer from "./Composer.astro";
 import "./atmosphere.css";
 import { messagesFor, pickLocale, translate, translateHtml } from "../lib/i18n";
 import { escapeHtml } from "../lib/translate";
+import logo from "../assets/union.svg?url";
 
 interface Props {
   /**
@@ -45,13 +50,13 @@ interface Props {
    * is used to find it.
    */
   post?: string;
-  /** The sign-in form's heading. */
+  /** The sign-in overlay's heading when commenting. */
   label?: string;
   /** The badge on comments by the site's own accounts. */
   authorLabel?: string;
   /** A small "Powered by Atmosphere Comments for Astro" link under the comments. Default true. */
   credit?: boolean;
-  /** "Rather not sign in here? Reply on Bluesky instead →" under the sign-in form. Default true. */
+  /** "Rather not sign in here? Reply on Bluesky instead →" in the sign-in overlay. Default true. */
   blueskyLink?: boolean;
   /** The language of the wording, e.g. "fr". Overrides the integration's `locale`. */
   locale?: string;
@@ -90,22 +95,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 <atmosphere-comments class="atmo" id="atmosphere-comments" data-post={post} data-base={base} data-locale={lang} data-messages={JSON.stringify(messages)}>
   <div class="atmo-reactions" data-reactions data-pagefind-ignore hidden></div>
 
-  <div class="atmo__signed-out" data-view="signed-out" data-pagefind-ignore>
-    <SignInForm id="atmo" returnTo={returnTo} messages={messages} lang={lang} />
-    {blueskyLink && (
-      <p
-        class="atmo__elsewhere"
-        data-elsewhere
-        hidden={!blueskyUrl}
-        set:html={th("elsewhere.text", {
-          // u-syndication: microformats readers learn this is the post's copy on Bluesky.
-          link: link(blueskyUrl || undefined, t("elsewhere.link"), ' class="atmo__elsewhere-link u-syndication" data-elsewhere-link'),
-        })}
-      />
-    )}
-  </div>
-
-  <div class="atmo__signed-in" data-view="signed-in" data-pagefind-ignore hidden>
+  {/* For everyone: signed out, these open the sign-in overlay below, and what was pressed is finished on coming back. */}
+  <div class="atmo__signed-in" data-view="main" data-pagefind-ignore hidden>
     <div class="atmo__actions" role="group" aria-label={t("actions.label")}>
       <button type="button" class="atmo__action" data-react="like" aria-pressed="false">
         <svg viewBox="0 0 24 24" aria-hidden="true"><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" /></svg>
@@ -119,11 +110,72 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         <svg viewBox="0 0 24 24" aria-hidden="true"><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" /></svg>
         <span>{t("actions.quote")}</span>
       </button>
+      {/* With the `standardSite` option. */}
+        {settings.standardSite && (
+      <div class="atmo-subscribe" data-subscribe-panel data-pagefind-ignore hidden>
+        <button type="button" class="atmo__action atmo-subscribe__button" data-atmosphere-subscribe hidden>
+          <span class="atmo-subscribe__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+          <span data-atmosphere-subscribe-label>{t("subscribe.subscribe")}</span>
+        </button>
+        <button type="button" class="atmo__action atmo-subscribe__more" aria-label={t("subscribe.more")} title={t("subscribe.more")} aria-expanded="false" data-subscribe-more>
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+        </button>
+        <div class="atmo-subscribe__menu" data-subscribe-menu hidden>
+          <p
+            class="atmo-subscribe__note"
+            set:html={th("subscribe.panelText", {
+              leaflet: link("https://leaflet.pub", "Leaflet"),
+              standardReader: link("https://standard-reader.app", "Standard Reader"),
+            })}
+          />
+          <button type="button" data-subscribe-copy={settings.site} data-copied={t("subscribe.copied")}><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" /></svg><span data-copy-label>{t("subscribe.copyLink")}</span></button>
+          {settings.standardSite.feed && <a href={settings.standardSite.feed}><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 11a8 8 0 0 1 8 8M5 5a14 14 0 0 1 14 14" /><circle cx="6" cy="18" r="1" /></svg><span>{t("subscribe.feed")}</span></a>}
+          <a href={blueskyUrl || undefined} hidden={!blueskyUrl} data-subscribe-bluesky target="_blank" rel="noopener"><svg class="atmo-subscribe__filled" viewBox="0 0 24 24" aria-hidden="true"><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" /></svg><span>{t("subscribe.viewBluesky")}</span></a>
+          <a href={`https://standard-reader.app/p/${settings.standardSite.publication.split("/")[2]}/${settings.standardSite.publication.split("/")[4]}`} target="_blank" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4" /></svg><span>{t("subscribe.standardReader")}</span></a>
+        </div>
+      </div>
+    )}
+    </div>
+
+    {/* A sign-in from before posting was asked for: one more permission. */}
+    <div class="atmo__permission" data-permission hidden>
+      <p data-permission-text>{t("composer.needsPermission")}</p>
+      <p class="atmo__hint">{t("permission.approve")}</p>
+      <div class="atmo__row">
+        <button type="button" class="atmo__button" data-permission-continue>{t("comment.continue")}</button>
+        <button type="button" class="atmo__link-button" data-permission-sign-out>{t("composer.signOut")}</button>
+      </div>
+    </div>
+
+    {/* Signed out: looks like the comment box, and opens the sign-in overlay. */}
+    <div class="atmo__prompt-box" data-comment-prompt hidden>
+      <button type="button" class="atmo__prompt" data-comment-prompt-open>{t("comment.prompt")}</button>
+      <div class="atmo__row atmo__row--end">
+        <button type="button" class="atmo__link-button" data-comment-prompt-open>{t("comment.signIn")}</button>
+        <button type="button" class="atmo__button" disabled>{t("composer.postComment")}</button>
+      </div>
     </div>
 
     <Composer id="atmo" messages={messages} lang={lang} signOut />
   </div>
 
+  <dialog class="atmo atmo-signin" aria-label={t("signIn.heading")} data-signin-dialog data-pagefind-ignore>
+    <button type="button" class="atmo-signin__close" aria-label={t("dialog.close")} data-close>×</button>
+    <SignInForm id="atmo" returnTo={returnTo} messages={messages} lang={lang} />
+    {blueskyLink && (
+      <p
+        class="atmo__elsewhere"
+        data-elsewhere
+        hidden={!blueskyUrl}
+        set:html={th("elsewhere.text", {
+          // u-syndication: microformats readers learn this is the post's copy on Bluesky.
+          link: link(blueskyUrl || undefined, t("elsewhere.link"), ' class="atmo__elsewhere-link u-syndication" data-elsewhere-link'),
+        })}
+      />
+    )}
+    <p class="atmo-signin__status" role="status" data-dialog-status></p>
+  </dialog>
+
   <p class="atmo__status" data-status role="status" data-pagefind-ignore></p>
 
   {/* Anything the site wants between the comment box and the comments. */}
@@ -143,6 +195,10 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
   import { translate } from "../lib/translate";
   import { enhanceHandleBox } from "../lib/client/handle-suggestions";
   import { MAX, quotePreview, setUpComposer, type ComposerBehaviour, type Posted } from "../lib/client/composer";
+  import { handleSignInForm, me as whoIsSignedIn, send, signIn, signOut, state } from "../lib/client/account";
+  import { addSubscribeButtons, finishPendingSubscribe, forgetSubscribed, loadSubscribed } from "../lib/client/subscribe";
+  import type { Permission } from "../lib/permissions";
+  import { authorOf } from "../lib/uris";
 
 
   // The error and status codes the routes and the sign-in round trip send,
@@ -155,7 +211,6 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     "signed-out": "messages.signedOut",
     "needs-permission": "messages.needsPermission",
     "not-allowed": "messages.notAllowed",
-    "new-permissions": "messages.newPermissions",
     "too-long": "messages.tooLong",
     "too-many": "messages.tooMany",
     error: "messages.error",
@@ -174,26 +229,34 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       // Standard.site record is turned into one when the thread loads.
       let post = this.dataset.post?.startsWith("at://") ? this.dataset.post : "";
       const $ = <T extends Element>(selector: string) => this.querySelector<T>(selector)!;
-      const signedOut = $<HTMLElement>("[data-view='signed-out']");
-      const signedIn = $<HTMLElement>("[data-view='signed-in']");
+      const commentPrompt = $<HTMLElement>("[data-comment-prompt]");
       const composer = $<HTMLFormElement>("[data-composer]");
+      const permissionPanel = $<HTMLElement>("[data-permission]");
       // A clean copy of the comment box, for reply boxes under comments.
       const template = composer.cloneNode(true) as HTMLFormElement;
       const loginForm = $<HTMLFormElement>("[data-login-form]");
       const status = $<HTMLElement>("[data-status]");
       let isSignedIn = false;
-      let me: { did?: string; handle?: string; displayName?: string; avatar?: string } = {};
+      let me: { did?: string; handle?: string; displayName?: string; avatar?: string; can?: string[] } = {};
+      const can = (permission: Permission) => !!me.can?.includes(permission);
       // What the main box is doing: a comment on the post, or a quote post.
       let mainMode: "comment" | "quote" = "comment";
 
       const say = (message: string) => (status.textContent = message);
-      const send = (path: string, body: unknown) =>
-        fetch(`${base}/${path}`, {
-          method: "POST",
-          credentials: "same-origin",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify(body),
-        });
+      // Sends the reader to their account host for one more permission,
+      // coming back to `hash` on this page (to finish what they asked).
+      const askPermission = (permission: Permission, hash = "#atmosphere-comments") =>
+        signIn(me.did!, { permissions: [permission], returnTo: `${location.pathname}${location.search}${hash}`, lang });
+      // Says what the permission is for before going (the account host may
+      // ask the reader to sign in again first, which is puzzling unexplained),
+      // with Continue to approve. Delete and Hide do the same in their panels.
+      const explainPermission = (permission: "post" | "react") => {
+        const go = Object.assign(make("button", "atmo__link-button", t("comment.continue")), { type: "button" });
+        go.addEventListener("click", () => void askPermission(permission));
+        status.replaceChildren(`${t(`permission.${permission}`)} ${t("permission.approve")} `, go);
+        status.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        go.focus({ preventScroll: true });
+      };
       // Elements this script creates get the component's marker attribute, so
       // Astro's scoped styles still reach them.
       const scoped = <T extends HTMLElement>(element: T): T => {
@@ -216,6 +279,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         depth: number;
         likeCount: number;
         repostCount: number;
+        withheld?: true;
       };
       type Thread = { uri: string; url: string; likeCount: number; repostCount: number; likes: Person[]; reposts: Person[]; replies: Reply[] };
       let thread: Thread | null = null;
@@ -272,7 +336,17 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const replyElement = (reply: Reply) => {
         const item = make("li", `atmo-comment${reply.byAuthor ? " atmo-comment--author" : ""}${reply.depth ? " atmo-comment--nested" : ""}`);
         if (reply.depth) item.style.setProperty("--depth", String(Math.min(reply.depth, 3)));
+        // Its author asks not to be shown to logged-out people: a placeholder,
+        // keeping the replies under it in place. (No AT URI, so no actions.)
+        if (reply.withheld) {
+          item.classList.add("atmo-comment--withheld");
+          const article = make("article");
+          article.append(make("p", "atmo-comment__withheld", t("comment.withheld")));
+          item.append(article);
+          return item;
+        }
         item.dataset.atmosphereUri = reply.uri;
+        item.dataset.atmosphereUrl = reply.url;
         item.dataset.atmosphereAuthor = nameOf(reply.author);
         item.dataset.atmosphereLikes = String(reply.likeCount);
         item.dataset.atmosphereReposts = String(reply.repostCount);
@@ -310,7 +384,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       // Nothing to respond to: hide the box and likes, but keep whatever the
       // site put in the slots.
       const deactivate = () => {
-        for (const part of this.querySelectorAll<HTMLElement>("[data-view], [data-reactions], [data-replies], [data-credit]")) {
+        for (const part of this.querySelectorAll<HTMLElement>("[data-view], [data-reactions], [data-replies], [data-credit], [data-subscribe-panel]")) {
           part.hidden = true;
         }
         this.classList.add("is-inactive");
@@ -332,6 +406,11 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           }
           thread = data.thread;
           post = thread.uri;
+          const viewOnBluesky = this.querySelector<HTMLAnchorElement>("[data-subscribe-bluesky]");
+          if (viewOnBluesky && thread.url) {
+            viewOnBluesky.href = thread.url;
+            viewOnBluesky.hidden = false;
+          }
           const elsewhere = this.querySelector<HTMLElement>("[data-elsewhere]");
           if (elsewhere && thread.url) {
             elsewhere.querySelector("a")!.href = thread.url;
@@ -382,9 +461,39 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         renderReactions();
       };
 
-      const openLogin = () => loginForm.querySelector("input")?.focus({ preventScroll: true });
+      // The sign-in overlay: for whatever a signed-out reader pressed. They come
+      // back to `hash` on this page, and it's finished then (resumePending).
+      const signInDialog = $<HTMLDialogElement>("[data-signin-dialog]");
+      const dialogHeading = loginForm.querySelector("label")!;
+      const dialogStatus = $<HTMLElement>("[data-dialog-status]");
+      const openSignIn = (heading: string, hash: string, problem = "") => {
+        dialogHeading.textContent = heading;
+        signInDialog.setAttribute("aria-label", heading);
+        loginForm.querySelector<HTMLInputElement>("[data-return-to]")!.value = `${location.pathname}${location.search}${hash}`;
+        dialogStatus.textContent = problem;
+        if (!signInDialog.open) signInDialog.showModal();
+        loginForm.querySelector<HTMLInputElement>('input[name="handle"]')!.focus();
+      };
+      signInDialog.querySelector("[data-close]")!.addEventListener("click", () => signInDialog.close());
+      // A click on the dimmed page around the overlay closes it.
+      signInDialog.addEventListener("click", (event) => {
+        if (event.target === signInDialog) signInDialog.close();
+      });
+      const SIGN_IN_HEADINGS: Record<string, string> = {
+        like: "signInFirst.likePost",
+        repost: "signInFirst.repostPost",
+        quote: "signInFirst.quotePost",
+        comment: "signIn.heading",
+        reply: "signInFirst.reply",
+        "comment-like": "signInFirst.like",
+        "comment-repost": "signInFirst.repost",
+      };
+      const askToSignIn = (kind: string, uri?: string, problem?: string) =>
+        openSignIn(t(SIGN_IN_HEADINGS[kind]), `#atmo-do=${kind}${uri ? `:${encodeURIComponent(uri)}` : ""}`, problem);
+      commentPrompt.querySelectorAll("[data-comment-prompt-open]").forEach((opener) => opener.addEventListener("click", () => askToSignIn("comment")));
 
       enhanceHandleBox(loginForm, base);
+      handleSignInForm(loginForm, lang);
 
       // An avatar picture, or the name's first letter if there isn't one.
       const setAvatar = (slot: HTMLElement, name: string, src?: string) => {
@@ -395,8 +504,10 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         img.onload = () => slot.replaceChildren(img);
       };
 
-      const handleError = (error: string, tell: (message: string) => void = say) => {
-        if (error === "signed-out" || error === "new-permissions") void show(false);
+      const handleError = (error: string, tell: (message: string) => void = say, permission?: string) => {
+        if (error === "signed-out") void show(false);
+        // The page checks before it starts, so this is rare: ask now.
+        if (error === "needs-permission" && (permission === "post" || permission === "react")) return explainPermission(permission);
         tell(message(error));
       };
 
@@ -453,6 +564,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         main.textarea.focus();
       });
       $<HTMLButtonElement>("[data-quote]").addEventListener("click", () => {
+        if (!isSignedIn) return askToSignIn("quote");
+        if (!can("post")) return explainPermission("post");
         setMainMode("quote");
         main.textarea.focus();
       });
@@ -502,11 +615,49 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       // and Repost with their counts, as in the Bluesky app.
       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 signInFirst = (message: string) => {
-        this.scrollIntoView({ block: "center", behavior: "smooth" });
-        say(message);
-        openLogin();
-      };
+
+      // Subscribe: not signed in, the overlay, coming back to subscribe.
+      const subscribePanel = this.querySelector<HTMLElement>("[data-subscribe-panel]");
+      const askToSubscribe = (problem?: string) => openSignIn(t("subscribe.signIn"), "#atmo-subscribe", problem);
+      if (subscribePanel) addSubscribeButtons([...subscribePanel.querySelectorAll<HTMLButtonElement>("[data-atmosphere-subscribe]")], t, askToSubscribe);
+
+      // The ⌄ menu beside Subscribe: more ways to follow the site.
+      const moreButton = subscribePanel?.querySelector<HTMLButtonElement>("[data-subscribe-more]");
+      const moreMenu = subscribePanel?.querySelector<HTMLElement>("[data-subscribe-menu]");
+      if (subscribePanel && moreButton && moreMenu) {
+        const setMenu = (open: boolean) => {
+          moreMenu.hidden = !open;
+          moreButton.setAttribute("aria-expanded", String(open));
+        };
+        moreButton.addEventListener("click", () => {
+          setMenu(moreMenu.hidden);
+          if (!moreMenu.hidden) moreMenu.querySelector<HTMLElement>("[data-subscribe-copy]")?.focus();
+        });
+        document.addEventListener("click", (event) => {
+          if (!subscribePanel.contains(event.target as Node)) setMenu(false);
+        });
+        subscribePanel.addEventListener("keydown", (event) => {
+          if (event.key === "Escape" && !moreMenu.hidden) {
+            setMenu(false);
+            moreButton.focus();
+          }
+        });
+        const copy = moreMenu.querySelector<HTMLButtonElement>("[data-subscribe-copy]")!;
+        const copyText = copy.querySelector<HTMLElement>("[data-copy-label]")!;
+        const copyLabel = copyText.textContent;
+        copy.addEventListener("click", async () => {
+          try {
+            await navigator.clipboard.writeText(copy.dataset.subscribeCopy!);
+            copyText.textContent = copy.dataset.copied!;
+            window.setTimeout(() => {
+              copyText.textContent = copyLabel;
+              setMenu(false);
+            }, 1200);
+          } catch {
+            // Clipboard refused: the button stays as it was.
+          }
+        });
+      }
 
       // What the reader has liked or reposted, by post (filled in by loadState).
       let known: Record<string, { liked: boolean; reposted: boolean }> = {};
@@ -526,7 +677,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         };
         setCount(count);
         button.addEventListener("click", async () => {
-          if (!isSignedIn) return signInFirst(t(kind === "like" ? "signInFirst.like" : "signInFirst.repost"));
+          if (!isSignedIn) return askToSignIn(kind === "like" ? "comment-like" : "comment-repost", comment.dataset.atmosphereUri);
           const on = button.getAttribute("aria-pressed") !== "true";
           const before = Number(button.dataset.count || 0);
           button.setAttribute("aria-pressed", String(on));
@@ -537,7 +688,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           } catch (problem) {
             button.setAttribute("aria-pressed", String(!on));
             setCount(before);
-            handleError((problem as { error?: string })?.error ?? "error");
+            const { error, permission } = (problem ?? {}) as { error?: string; permission?: string };
+            handleError(error ?? "error", say, permission);
           }
         });
         return button;
@@ -558,7 +710,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           });
           reply.setAttribute("aria-label", t("comment.replyTo", { name: author }));
           reply.addEventListener("click", () => {
-            if (!isSignedIn) return signInFirst(t("signInFirst.reply"));
+            if (!isSignedIn) return askToSignIn("reply", comment.dataset.atmosphereUri);
+            if (!can("post")) return explainPermission("post");
             openReply(comment, author);
           });
           actions.append(reply, commentButton("like", comment), commentButton("repost", comment));
@@ -583,7 +736,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             this.dispatchEvent(new CustomEvent("atmosphere:deleted", { detail: { uri }, bubbles: true }));
             return;
           }
-          if (data.error === "needs-permission") return askDeletePermission(comment, panel);
+          // The page checks first, so this is rare: ask now.
+          if (data.error === "needs-permission") return void askPermission("delete", `#atmo-delete=${encodeURIComponent(uri)}`);
           panel.remove();
           handleError(data.error ?? "error");
         } catch {
@@ -592,58 +746,112 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         }
       };
 
-      // Deleting posts isn't part of signing in, so the first delete asks the
-      // reader's account host for it, then carries on when they come back.
-      const askDeletePermission = (comment: HTMLElement, panel: HTMLElement) => {
-        const form = Object.assign(document.createElement("form"), { method: "post", action: `${base}/login` });
-        const field = (name: string, value: string) =>
-          form.append(Object.assign(document.createElement("input"), { type: "hidden", name, value }));
-        field("handle", me.did!);
-        field("permission", "delete");
-        field("returnTo", `${location.pathname}#atmo-delete=${encodeURIComponent(comment.dataset.atmosphereUri!)}`);
-        const go = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.continue")), { type: "submit" });
-        const cancel = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
-        cancel.addEventListener("click", () => panel.remove());
-        form.append(go, cancel);
-        panel.replaceChildren(
-          make(
-            "span",
-            "atmo-comment-delete__text",
-            t("comment.deletePermission"),
-          ),
-          form,
-        );
-        go.focus();
+      // Hide, for the announcement's own author: hides a comment here and on
+      // Bluesky. Showing it again is done in the Bluesky app.
+      const isOwner = () => !!me.did && !!post && authorOf(post) === me.did;
+
+      const hideComment = async (comment: HTMLElement, panel: HTMLElement) => {
+        const uri = comment.dataset.atmosphereUri!;
+        panel.replaceChildren(make("span", "atmo-comment-delete__text", t("comment.hiding")));
+        try {
+          const response = await send("hide", { post: uri, root: post });
+          const data = (await response.json()) as { error?: string };
+          if (response.ok) {
+            comment.remove();
+            say(t("comment.hidden"));
+            this.dispatchEvent(new CustomEvent("atmosphere:hidden", { detail: { uri }, bubbles: true }));
+            return;
+          }
+          if (data.error === "needs-permission") return void askPermission("moderate", `#atmo-hide=${encodeURIComponent(uri)}`);
+          panel.remove();
+          handleError(data.error ?? "error");
+        } catch {
+          panel.remove();
+          say(message("error"));
+        }
       };
 
-      const deleteButton = (comment: HTMLElement) => {
-        const button = Object.assign(make("button", "atmo-comment-action atmo-comment-action--delete", t("comment.delete")), { type: "button" });
-        button.setAttribute("aria-label", t("comment.deleteLabel"));
-        button.addEventListener("click", () => {
-          const actions = button.parentElement!;
-          if (actions.nextElementSibling?.matches(".atmo-comment-delete")) return;
-          const panel = make("div", "atmo-comment-delete");
-          const yes = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.delete")), { type: "button" });
-          const no = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
-          yes.addEventListener("click", () => deleteComment(comment, panel));
-          no.addEventListener("click", () => {
-            panel.remove();
-            button.focus();
-          });
-          panel.append(make("span", "atmo-comment-delete__text", t("comment.deleteConfirm")), yes, no);
-          panel.setAttribute("role", "group");
-          panel.setAttribute("aria-label", t("comment.deleteLabel"));
+      // Delete and Hide each need one more permission than signing in gives.
+      // Readers who haven't given it yet are asked for it first; once they
+      // have (straight away, or back from approving), they confirm.
+      const STEPS = {
+        delete: {
+          permission: "delete",
+          action: "comment.delete",
+          label: "comment.deleteLabel",
+          confirm: "comment.deleteConfirm",
+          needs: "comment.deletePermission",
+          // "{{link}}" in the wording: the comment on Bluesky, to delete it there instead.
+          elsewhere: "comment.deleteElsewhere",
+          run: deleteComment,
+        },
+        hide: {
+          permission: "moderate",
+          action: "comment.hide",
+          label: "comment.hideLabel",
+          confirm: "comment.hideConfirm",
+          needs: "comment.hidePermission",
+          elsewhere: "",
+          run: hideComment,
+        },
+      } as const;
+
+      const openPanel = (comment: HTMLElement, kind: keyof typeof STEPS) => {
+        const actions = comment.querySelector<HTMLElement>(":scope .atmo-comment-actions");
+        if (!actions || actions.nextElementSibling?.matches(".atmo-comment-delete")) return;
+        const step = STEPS[kind];
+        const panel = make("div", "atmo-comment-delete");
+        panel.setAttribute("role", "group");
+        panel.setAttribute("aria-label", t(step.label));
+        const button = (text: string, danger = false) =>
+          Object.assign(make("button", `atmo-comment-action${danger ? " atmo-comment-action--danger" : ""}`, text), { type: "button" });
+        const no = button(t("comment.cancel"));
+        no.addEventListener("click", () => {
+          panel.remove();
+          actions.querySelector<HTMLElement>(`.atmo-comment-action--${kind}`)?.focus();
+        });
+        if (can(step.permission)) {
+          const yes = button(t(step.action), true);
+          yes.addEventListener("click", () => step.run(comment, panel));
+          panel.append(make("span", "atmo-comment-delete__text", t(step.confirm)), yes, no);
           actions.after(panel);
           no.focus();
-        });
+        } else {
+          const go = button(t("comment.continue"), true);
+          go.addEventListener("click", () =>
+            void askPermission(step.permission, `#atmo-${kind}=${encodeURIComponent(comment.dataset.atmosphereUri!)}`),
+          );
+          const text = make("span", "atmo-comment-delete__text");
+          const [before, after = ""] = t(step.needs, { link: "\u0000" }).split("\u0000");
+          text.append(before);
+          if (step.elsewhere) {
+            const url = comment.dataset.atmosphereUrl;
+            text.append(
+              url
+                ? Object.assign(make("a", "", t(step.elsewhere)), { href: url, target: "_blank", rel: "noopener noreferrer" })
+                : t(step.elsewhere),
+              after,
+            );
+          }
+          panel.append(text, go, no);
+          actions.after(panel);
+          go.focus();
+        }
+      };
+
+      const panelButton = (comment: HTMLElement, kind: keyof typeof STEPS) => {
+        const button = Object.assign(make("button", `atmo-comment-action atmo-comment-action--${kind}`, t(STEPS[kind].action)), { type: "button" });
+        button.setAttribute("aria-label", t(STEPS[kind].label));
+        button.addEventListener("click", () => openPanel(comment, kind));
         return button;
       };
 
       const addDeleteButtons = () => {
         document.querySelectorAll<HTMLElement>("[data-atmosphere-uri]").forEach((comment) => {
           const actions = comment.querySelector<HTMLElement>(":scope .atmo-comment-actions");
-          if (!actions || actions.querySelector(".atmo-comment-action--delete")) return;
-          if (isSignedIn && isMine(comment)) actions.append(deleteButton(comment));
+          if (!actions || actions.querySelector(".atmo-comment-action--delete, .atmo-comment-action--hide")) return;
+          if (isSignedIn && isMine(comment)) actions.append(panelButton(comment, "delete"));
+          else if (isSignedIn && isOwner()) actions.append(panelButton(comment, "hide"));
         });
       };
 
@@ -653,14 +861,13 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         const comments = [...document.querySelectorAll<HTMLElement>("[data-atmosphere-uri]")];
         const uris = [post, ...comments.map((comment) => comment.dataset.atmosphereUri!)];
         try {
-          const query = uris.map((uri) => `post=${encodeURIComponent(uri)}`).join("&");
-          const response = await fetch(`${base}/state?${query}`, { credentials: "same-origin" });
-          const state = (await response.json()) as {
+          const response = await state(uris);
+          const found = (await response.json()) as {
             error?: string;
             posts?: Record<string, { liked: boolean; reposted: boolean }>;
           };
-          if (!response.ok) return handleError(state.error ?? "error");
-          const posts = state.posts ?? {};
+          if (!response.ok) return handleError(found.error ?? "error");
+          const posts = found.posts ?? {};
           known = { ...known, ...posts };
           setPressed("like", !!posts[post]?.liked);
           setPressed("repost", !!posts[post]?.reposted);
@@ -675,6 +882,31 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         }
       };
 
+      // Back from the sign-in overlay: finishes what the reader pressed. If
+      // signing in failed, the overlay opens again to say so.
+      const resumePending = (signed: boolean) => {
+        const pending = location.hash.match(/^#atmo-do=([a-z-]+)(?::(.+))?$/);
+        if (!pending) return;
+        const [, kind, encoded] = pending;
+        const uri = encoded ? decodeURIComponent(encoded) : undefined;
+        history.replaceState(history.state, "", `${location.pathname}${location.search}#atmosphere-comments`);
+        if (!signed) {
+          if (result && result !== "signed-in" && SIGN_IN_HEADINGS[kind]) askToSignIn(kind, uri, message(result));
+          return;
+        }
+        const comment = uri ? document.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(uri)}"]`) : null;
+        const press = (button: HTMLElement | null | undefined) => {
+          if (button?.getAttribute("aria-pressed") !== "true") button?.click();
+        };
+        (comment ?? this).scrollIntoView({ block: "center" });
+        if (kind === "like" || kind === "repost") press(reactButton(kind));
+        else if (kind === "quote") $<HTMLButtonElement>("[data-quote]").click();
+        else if (kind === "comment") main.textarea.focus({ preventScroll: true });
+        else if (kind === "reply" && comment) openReply(comment, comment.dataset.atmosphereAuthor || t("comment.someone"));
+        else if (kind === "comment-like" && comment) press(comment.querySelector<HTMLElement>(".atmo-comment-action[data-kind='like']"));
+        else if (kind === "comment-repost" && comment) press(comment.querySelector<HTMLElement>(".atmo-comment-action[data-kind='repost']"));
+      };
+
       const show = async (signed: boolean, handle?: string, displayName?: string, avatar?: string) => {
         if (handle) {
           $<HTMLElement>("[data-preview-name]").textContent = displayName || handle;
@@ -686,26 +918,42 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         await threadReady;
         if (this.classList.contains("is-inactive")) return;
         isSignedIn = signed;
-        signedOut.hidden = signed;
-        signedIn.hidden = !signed;
+        commentPrompt.hidden = signed;
+        if (subscribePanel) {
+          subscribePanel.hidden = false;
+          if (signed) void loadSubscribed();
+          else forgetSubscribed();
+          await finishPendingSubscribe(t, askToSubscribe);
+        }
         if (!signed) {
-          document.querySelectorAll(".atmo-comment-action--delete, .atmo-comment-delete").forEach((part) => part.remove());
+          document.querySelectorAll(".atmo-comment-action--delete, .atmo-comment-action--hide, .atmo-comment-delete").forEach((part) => part.remove());
+          composer.hidden = true;
+          permissionPanel.hidden = true;
+          setPressed("like", false);
+          setPressed("repost", false);
+          resumePending(false);
           return closeReplies();
         }
+        // A sign-in without posting (from an older version, which asked for
+        // less): one more permission, asked for before they type.
+        composer.hidden = !can("post");
+        permissionPanel.hidden = can("post");
+        // Which account, as they may have more than one.
+        $<HTMLElement>("[data-permission-text]").textContent = t("composer.needsPermission", { handle: handle ? `@${handle}` : "" });
         addCommentActions();
+        addDeleteButtons();
         await loadState();
-        // Back from approving the delete permission: finish the delete they asked for.
-        const pending = location.hash.match(/^#atmo-delete=(.+)$/);
+        resumePending(true);
+        // Back from approving the delete or hide permission: ask them to
+        // confirm the delete or hide they started.
+        const pending = location.hash.match(/^#atmo-(delete|hide)=(.+)$/);
         if (pending) {
           history.replaceState(history.state, "", `${location.pathname}${location.search}#atmosphere-comments`);
-          const uri = decodeURIComponent(pending[1]);
-          const comment = document.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(uri)}"]`);
-          const actions = comment?.querySelector<HTMLElement>(":scope .atmo-comment-actions");
-          if (comment && actions && isMine(comment)) {
-            const panel = make("div", "atmo-comment-delete");
-            actions.after(panel);
+          const kind = pending[1] as keyof typeof STEPS;
+          const comment = document.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(decodeURIComponent(pending[2]))}"]`);
+          if (comment && (kind === "delete" ? isMine(comment) : isOwner())) {
             comment.scrollIntoView({ block: "center" });
-            await deleteComment(comment, panel);
+            openPanel(comment, kind);
           }
         }
       };
@@ -719,12 +967,13 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         history.replaceState(history.state, "", url);
       }
 
+      // These need this script, so they're hidden without it.
       this.classList.add("is-loading");
-      fetch(`${base}/me`, { credentials: "same-origin" })
-        .then((response) => response.json())
-        .then((found: { signedIn: boolean; did?: string; handle?: string; displayName?: string; avatar?: string }) => {
+      $<HTMLElement>("[data-view='main']").hidden = false;
+      whoIsSignedIn()
+        .then((found) => {
           me = found;
-          return show(found.signedIn, found.handle, found.displayName, found.avatar);
+          return found.signedIn ? show(true, found.handle, found.displayName, found.avatar) : show(false);
         })
         .catch(() => show(false))
         .finally(() => {
@@ -743,15 +992,23 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       // Like and Repost: shown as done straight away, put back if it fails.
       const reactButton = (kind: string) => $<HTMLButtonElement>(`[data-react='${kind}']`);
       const setPressed = (kind: string, on: boolean) => reactButton(kind).setAttribute("aria-pressed", String(on));
+      // Liking also recommends the page's Standard.site record: says so.
+      if (subscribePanel && document.querySelector('link[rel="site.standard.document"]')) {
+        reactButton("like").title = t("actions.likeAndRecommend");
+      }
       for (const kind of ["like", "repost"]) {
         reactButton(kind).addEventListener("click", async () => {
+          if (!isSignedIn) return askToSignIn(kind);
           const on = reactButton(kind).getAttribute("aria-pressed") !== "true";
           setPressed(kind, on);
           try {
-            const response = await send("react", { post, kind, on });
+            // Liking the post also recommends the page's Standard.site record, if it has one.
+            const document_ = kind === "like" ? document.querySelector('link[rel="site.standard.document"]')?.getAttribute("href") : undefined;
+            const response = await send("react", { post, kind, on, document: document_ ?? undefined });
             if (!response.ok) {
               setPressed(kind, !on);
-              return handleError((await response.json()).error);
+              const { error, permission } = (await response.json()) as { error?: string; permission?: string };
+              return handleError(error ?? "error", say, permission);
             }
             say(t(on ? (kind === "like" ? "status.liked" : "status.reposted") : kind === "like" ? "status.likeRemoved" : "status.repostRemoved"));
             showReaction(kind, on);
@@ -768,12 +1025,16 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         });
       }
 
-      $<HTMLButtonElement>("[data-sign-out]").addEventListener("click", async () => {
-        await fetch(`${base}/logout`, { method: "POST", credentials: "same-origin" }).catch(() => undefined);
+      const signOutHere = async () => {
+        await signOut();
+        me = {};
         void show(false);
         setMainMode("comment");
         say(t("status.signedOut"));
-      });
+      };
+      $<HTMLButtonElement>("[data-sign-out]").addEventListener("click", signOutHere);
+      $<HTMLButtonElement>("[data-permission-sign-out]").addEventListener("click", signOutHere);
+      $<HTMLButtonElement>("[data-permission-continue]").addEventListener("click", () => void askPermission("post"));
     }
   }