astro-atmosphere-comments 0.6.1 → 0.8.0

package/components/AtmosphereReactions.astro

@@ -92,7 +92,8 @@ const { base } = settings;
 <script>
   import { translate } from "../lib/translate";
   import { enhanceHandleBox } from "../lib/client/handle-suggestions";
-  import { MAX, quotePreview, setUpComposer, type Posted } from "../lib/client/composer";
+  import { MAX, fetchPost, quotePreview, setUpComposer, showPost, type Posted, type ShownPost } from "../lib/client/composer";
+  import { showDone } from "../lib/client/done";
   import { following, handleSignInForm, me as whoIsSignedIn, send as act, signIn, signOut as endSignIn, state } from "../lib/client/account";
   import { addSubscribeButtons, finishPendingSubscribe, loadSubscribed } from "../lib/client/subscribe";
   import type { Permission } from "../lib/permissions";
@@ -211,13 +212,45 @@ const { base } = settings;
       const quote = quotePreview(composeForm, composer.textarea, composerContext);
       $c<HTMLElement>("[data-cancel-context]").hidden = true;
 
+      // The post being replied to, shown above the box, since the reply won't
+      // appear on this page: fetched through the site once per post.
+      const parent = $c<HTMLElement>("[data-parent]");
+      const fetched = new Map<string, Promise<ShownPost | null>>();
+      const postFor = (uri: string) => {
+        if (!fetched.has(uri)) fetched.set(uri, fetchPost(base, uri));
+        return fetched.get(uri)!;
+      };
+      // A handle, never a DID: a post's address may name its author either way
+      // (Bluesky accepts both), and a lookup that fails gives back the DID.
+      const shownHandle = (handle?: string | null) =>
+        handle && !handle.startsWith("did:") && handle !== "handle.invalid" ? handle : null;
+      const replyingTo = (handle?: string | null) =>
+        t("composer.replyingTo", { name: shownHandle(handle) ? `@${handle}` : t("comment.someone") });
+
       const openCompose = (post: HTMLElement, mode: "reply" | "quote") => {
         composeRoot = post.dataset.atmospherePost!;
         composeMode = mode;
-        const author = post.dataset.atmosphereUrl?.match(/\/profile\/([^/]+)\//)?.[1];
+        // From the bsky.app address until the post itself arrives.
+        let author: string | undefined;
+        try {
+          author = decodeURIComponent(post.dataset.atmosphereUrl?.match(/\/profile\/([^/]+)\//)?.[1] ?? "");
+        } catch {
+          author = undefined;
+        }
+        const context = $c<HTMLElement>("[data-context-text]");
         $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") });
+        parent.hidden = true;
+        if (mode === "quote") context.textContent = t("composer.quoting");
+        else {
+          context.textContent = replyingTo(author);
+          const root = composeRoot;
+          void postFor(root).then((shown) => {
+            if (!shown || composeRoot !== root || composeMode !== "reply") return;
+            showPost(parent, shown, composerContext);
+            parent.hidden = false;
+            if (shownHandle(shown.author.handle)) context.textContent = replyingTo(shown.author.handle);
+          });
+        }
         $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";
@@ -407,7 +440,16 @@ const { base } = settings;
       // 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> }>();
+      // One entry per account, however many links for it the page has (say,
+      // one in a toolbar and one in the Subscribe menu): they all agree.
+      type FollowState = {
+        following: boolean;
+        buttons: HTMLButtonElement[];
+        renders: (() => void)[];
+        set: (on: boolean) => void;
+        press: () => Promise<void>;
+      };
+      const followButtons = new Map<string, FollowState>();
       // 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, who: string) =>
@@ -415,19 +457,47 @@ const { base } = settings;
       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;
+          if (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");
+          let state = followButtons.get(subject);
+          const isNew = !state;
+          if (!state) {
+            const created: FollowState = {
+              following: false,
+              buttons: [],
+              renders: [],
+              set: (on) => {
+                created.following = on;
+                created.renders.forEach((render) => render());
+              },
+              press: async () => {
+                created.buttons.forEach((each) => (each.disabled = true));
+                try {
+                  const response = await act("follow", { subject, on: !created.following });
+                  const data = (await response.json().catch(() => ({}))) as { following?: boolean; error?: string };
+                  if (response.ok) return created.set(!!data.following);
+                  if (data.error === "needs-permission") return void askFollowPermission(subject, who);
+                  if (data.error === "signed-out") location.reload();
+                } finally {
+                  created.buttons.forEach((each) => (each.disabled = false));
+                }
+              },
+            };
+            state = created;
+            followButtons.set(subject, state);
+          }
           const button = make("button", "atmo-follow");
           button.type = "button";
-          let isFollowing = 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 current = state;
           const render = () => {
+            const isFollowing = current.following;
             button.setAttribute("aria-pressed", String(isFollowing));
             // The butterfly, then "Follow" with the account's avatar beside its
             // handle (wherever the language puts the handle), or the avatar
@@ -444,32 +514,19 @@ const { base } = settings;
             button.title = isFollowing ? t("follow.followingLabel", { handle: who }) : t("follow.followAs", { handle: who, me: handle });
             button.setAttribute("aria-label", button.title);
           };
-          const set = (on: boolean) => {
-            isFollowing = on;
-            render();
-          };
-          const press = async () => {
-            button.disabled = true;
-            try {
-              const response = await act("follow", { subject, on: !isFollowing });
-              const data = (await response.json().catch(() => ({}))) as { following?: boolean; error?: string };
-              if (response.ok) return set(!!data.following);
-              if (data.error === "needs-permission") return void askFollowPermission(subject, who);
-              if (data.error === "signed-out") location.reload();
-            } finally {
-              button.disabled = false;
-            }
-          };
-          button.addEventListener("click", () => void press());
-          followButtons.set(subject, { get following() { return isFollowing; }, set, press });
+          button.addEventListener("click", () => void current.press());
+          current.buttons.push(button);
+          current.renders.push(render);
           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);
-          const known = await following(subject);
-          if (known !== null) set(known);
+          if (isNew) {
+            const known = await following(subject);
+            if (known !== null) current.set(known);
+          }
         }
       };
 
@@ -516,7 +573,11 @@ const { base } = settings;
           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);
+        if (button && button.getAttribute("aria-pressed") !== "true") {
+          await react(post, button, kind as Kind, true);
+          // A brief "Liked" or "Reposted", so it's clear it went through.
+          if (button.getAttribute("aria-pressed") === "true") showDone(button, t(kind === "like" ? "actions.liked" : "actions.reposted"));
+        }
       };
 
       // Back from signing in or allowing posting: open the Reply or Quote box they pressed.

package/components/AtmosphereSubscribe.astro

@@ -0,0 +1,135 @@
+---
+// Subscribe to the site's Standard.site publication, with a ⌄ menu of more
+// ways to follow it (Copy link, the feed, Bluesky, Standard Reader, Leaflet
+// and any links of the site's own). Shown only with the integration's
+// `standardSite` option, and only with JavaScript (the menu needs it).
+//
+// Placed anywhere, such as a blog's list of posts. The Subscribe button
+// itself is worked by AtmosphereReactions, which offers signing in, so put
+// that in the layout too. AtmosphereComments uses this component for the one
+// under each post, and works that button itself.
+//
+// Props:
+//   align     which edge the menu lines up with: "start" (default) or "end"
+//             (for a button near the right-hand edge, so the menu opens leftwards)
+//   copyUrl   what Copy link copies (default: the site's address)
+//   links     more menu items, after the built-in ones: [{ label, href }]
+//   bluesky   adds "View on Bluesky", going here (under a post: its thread)
+//
+// The menu's note ends by suggesting following the publication's account on
+// Bluesky, with AtmosphereFollow: a link to its profile, which AtmosphereReactions
+// turns into a Follow / Following button for signed-in readers.
+//   locale, messages  as for AtmosphereComments
+import logo from "../assets/union.svg?url";
+import settings from "../lib/settings";
+import { messagesFor, pickLocale, translate, translateHtml } from "../lib/i18n";
+import { escapeHtml } from "../lib/translate";
+import { profileFor } from "../lib/profile";
+import AtmosphereFollow from "./AtmosphereFollow.astro";
+import "./atmosphere.css";
+
+interface Props {
+  align?: "start" | "end";
+  copyUrl?: string;
+  links?: { label: string; href: string }[];
+  bluesky?: string;
+  locale?: string;
+  messages?: Record<string, string>;
+}
+
+const { align = "start", copyUrl = settings.site, links = [] } = Astro.props;
+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 th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
+const link = (href: string, text: string) => `<a href="${escapeHtml(href)}" target="_blank" rel="noopener">${escapeHtml(text)}</a>`;
+
+const publication = settings.standardSite?.publication ?? "";
+const feed = settings.standardSite?.feed;
+// at://<did>/site.standard.publication/<rkey>
+const [, , did = "", , rkey = ""] = publication.split("/");
+const bluesky = Astro.props.bluesky ?? "";
+// The publication's account, by handle, for the note and the Follow link
+// (looked up when the page is built; without it, the note leaves that part out).
+const account = did ? await profileFor(did).catch(() => null) : null;
+const accountHandle = account && account.handle !== did ? account.handle : "";
+---
+
+{publication && (
+  <atmosphere-subscribe class:list={["atmo-subscribe", align === "end" && "atmo-subscribe--end"]} 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>
+      <div class="atmo-subscribe__note">
+        <p
+          set:html={th(feed ? "subscribe.panelTextFeed" : "subscribe.panelText", {
+            leaflet: link("https://leaflet.pub", "Leaflet"),
+            standardReader: link("https://standard-reader.app", "Standard Reader"),
+          }) + (accountHandle ? ` ${escapeHtml(translate(messages, lang, "subscribe.followNote", { handle: `@${accountHandle}` }))}` : "")}
+        />
+        {accountHandle && <AtmosphereFollow account={did} label={t("subscribe.follow")} class="atmo-subscribe__follow" locale={lang} messages={messages} />}
+      </div>
+      <button type="button" data-subscribe-copy={copyUrl} 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>
+      {feed && <a href={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={bluesky || undefined} hidden={!bluesky} 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/${did}/${rkey}`} 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>
+      <a href={`https://leaflet.pub/lish/${did}/${rkey}`} 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.leaflet")}</span></a>
+      {links.map(({ label, href }) => (
+        <a href={href} 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>{label}</span></a>
+      ))}
+    </div>
+  </atmosphere-subscribe>
+)}
+
+<script>
+  // The ⌄ menu: opens and closes (click, a click elsewhere, Escape) and Copy
+  // link. Shows itself once this runs, except under a post, where
+  // AtmosphereComments shows it when the comments are ready.
+  class AtmosphereSubscribe extends HTMLElement {
+    connectedCallback() {
+      const more = this.querySelector<HTMLButtonElement>("[data-subscribe-more]");
+      const menu = this.querySelector<HTMLElement>("[data-subscribe-menu]");
+      if (!more || !menu || this.dataset.ready !== undefined) return;
+      this.dataset.ready = "";
+      if (!this.closest("atmosphere-comments")) this.hidden = false;
+      const setMenu = (open: boolean) => {
+        menu.hidden = !open;
+        more.setAttribute("aria-expanded", String(open));
+      };
+      more.addEventListener("click", () => {
+        setMenu(menu.hidden);
+        if (!menu.hidden) menu.querySelector<HTMLElement>("[data-subscribe-copy]")?.focus();
+      });
+      document.addEventListener("click", (event) => {
+        if (!this.contains(event.target as Node)) setMenu(false);
+      });
+      this.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && !menu.hidden) {
+          setMenu(false);
+          more.focus();
+        }
+      });
+      const copy = menu.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.
+        }
+      });
+    }
+  }
+  if (!customElements.get("atmosphere-subscribe")) customElements.define("atmosphere-subscribe", AtmosphereSubscribe);
+</script>

package/components/Composer.astro

@@ -12,6 +12,7 @@
 //   cancel   show a Cancel button that closes an overlay (default false)
 import { translate, translateHtml } from "../lib/i18n";
 import { escapeHtml } from "../lib/translate";
+import PostPreview from "./PostPreview.astro";
 
 interface Props {
   id: string;
@@ -31,6 +32,10 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
     <span data-context-text></span>
     <button type="button" class="atmo__link-button" data-cancel-context>{t("composer.cancel")}</button>
   </p>
+  <!-- The post being replied to, when it won't be on this page (AtmosphereReactions). -->
+  <div class="atmo__quoted atmo__parent" data-parent hidden>
+    <PostPreview />
+  </div>
   <label for={`${id}-text`} class="atmo__as">
     <span class="atmo__avatar atmo__avatar--me" data-me-avatar aria-hidden="true"></span>
     <span set:html={th("composer.commentAs", { verb: `<span data-verb>${escapeHtml(t("composer.comment"))}</span>`, handle: "<strong data-handle></strong>" })} />
@@ -53,23 +58,8 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
       <div class="atmo__preview-body">
         <p class="atmo__preview-author"><strong data-preview-name></strong> <span data-preview-handle></span> <span>· {t("composer.now")}</span></p>
         <p class="atmo__preview-text" data-preview-text></p>
-        <div class="atmo__quoted">
-          <p class="atmo__preview-author">
-            <span class="atmo__avatar atmo__avatar--small" data-quoted-avatar aria-hidden="true"></span>
-            <strong data-quoted-name></strong> <span data-quoted-handle></span> <span data-quoted-age></span>
-          </p>
-          <p class="atmo__preview-text" data-quoted-text></p>
-          <div class="atmo__card" data-card hidden>
-            <img data-card-image alt="" hidden />
-            <div>
-              <strong data-card-title></strong>
-              <span data-card-description></span>
-              <span class="atmo__card-domain">
-                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9s1.3-6.5 3.8-9Z" /></svg>
-                <span data-card-domain></span>
-              </span>
-            </div>
-          </div>
+        <div class="atmo__quoted" data-quoted-post>
+          <PostPreview />
         </div>
       </div>
     </div>

package/components/PostPreview.astro

@@ -0,0 +1,24 @@
+---
+// A Bluesky post as the composer shows it: author (avatar, name, handle,
+// age), its words and its link card. Empty here, filled in by showPost() in
+// lib/client/composer.ts. Used inside the Quote preview (the post being
+// quoted) and above the box when replying from AtmosphereReactions (the post
+// being replied to); not meant to be used on its own.
+---
+
+<p class="atmo__preview-author">
+  <span class="atmo__avatar atmo__avatar--small" data-quoted-avatar aria-hidden="true"></span>
+  <strong data-quoted-name></strong> <span data-quoted-handle></span> <span data-quoted-age></span>
+</p>
+<p class="atmo__preview-text" data-quoted-text></p>
+<div class="atmo__card" data-card hidden>
+  <img data-card-image alt="" hidden />
+  <div>
+    <strong data-card-title></strong>
+    <span data-card-description></span>
+    <span class="atmo__card-domain">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9s1.3-6.5 3.8-9Z" /></svg>
+      <span data-card-domain></span>
+    </span>
+  </div>
+</div>

package/components/SignInForm.astro

@@ -30,7 +30,14 @@ interface Props {
 
 const { id, returnTo, messages, lang, heading, permissions = [] } = Astro.props;
 const { policyUri } = settings;
-const t = (key: string) => translate(messages, lang, key);
+const t = (key: string, vars?: Record<string, string>) => translate(messages, lang, key, vars);
+// The site's name in "… can use it only for what you approved", e.g. saltedlolly.com.
+let siteName = "";
+try {
+  siteName = new URL(settings.site).hostname;
+} catch {
+  siteName = "";
+}
 const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
 // Links lead off the page, so they open in a new tab.
 const link = (href: string, text: string) =>
@@ -40,12 +47,13 @@ const link = (href: string, text: string) =>
 <form class="atmo__login" id={`${id}-login`} data-login-form>
   <label for={`${id}-handle`}>{heading ?? t("signIn.heading")}</label>
   <p
-    class="atmo__hint"
+    class="atmo__hint atmo__hint--accounts"
     set:html={th("signIn.anyAccount", {
       atmosphereAccount: link("https://atmosphereaccount.com", t("signIn.atmosphereAccount")),
       bluesky: link("https://bsky.app", "Bluesky"),
-      createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")),
-    })}
+    }) +
+      "<br>" +
+      th("signIn.noAccount", { createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")) })}
   />
   <div class="atmo__row">
     <span class="atmo__handle">
@@ -84,9 +92,8 @@ const link = (href: string, text: string) =>
   {/* The detail, for anyone who wants it. */}
   <details class="atmo__details">
     <summary>{t("signIn.more")}</summary>
-    <p class="atmo__hint">{t("signIn.privacy")}</p>
     <p class="atmo__hint">
-      {t("signIn.access")}
+      {t("signIn.privacy", { site: siteName || t("signIn.thisSite") })}
       {policyUri && <Fragment> <a href={policyUri} target="_blank" rel="noopener">{t("signIn.policy")}</a></Fragment>}
     </p>
   </details>
@@ -108,6 +115,11 @@ const link = (href: string, text: string) =>
     font-weight: 700;
   }
 
+  /* The two lines about accounts, above the box: a little more room. */
+  .atmo__hint.atmo__hint--accounts {
+    line-height: 1.7;
+  }
+
   .atmo__details summary {
     width: fit-content;
     color: var(--atmo-muted, inherit);
@@ -123,6 +135,8 @@ const link = (href: string, text: string) =>
     margin: 0;
     color: var(--atmo-muted, inherit);
     font-size: 0.9em;
+    /* Tighter than a site's body text, which is often set for long reading. */
+    line-height: 1.5;
   }
 
   .atmo__row {

package/components/atmosphere.css

@@ -276,6 +276,12 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
   box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
 }
 
+/* <AtmosphereSubscribe align="end">: near the right-hand edge, the menu opens leftwards. */
+.atmo-subscribe--end .atmo-subscribe__menu {
+  right: 0;
+  left: auto;
+}
+
 .atmo-subscribe__menu[hidden] {
   display: none;
 }
@@ -286,6 +292,23 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
   border-bottom: 1px solid var(--atmo-border, #8886);
   color: var(--atmo-muted, inherit);
   font-size: 0.85em;
+  line-height: 1.5;
+}
+
+.atmo-subscribe__note p {
+  margin: 0;
+}
+
+/* "Follow on Bluesky →" under the note, which AtmosphereReactions turns into
+   a Follow / Following button for signed-in readers. */
+.atmo-subscribe__follow {
+  display: inline-block;
+  margin-top: 8px;
+  font-weight: 700;
+}
+
+.atmo-subscribe__note .atmo-follow {
+  margin-top: 8px;
 }
 
 .atmo-subscribe__menu > a[hidden] {
@@ -562,6 +585,7 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
 }
 
 .atmo__preview-post p,
+.atmo__quoted p,
 .atmo__card span {
   margin: 0;
 }
@@ -868,10 +892,148 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
   margin: 0;
 }
 
-/* In place of a comment whose author asks not to be shown to logged-out people. */
-:where(.atmo-comment__withheld) {
-  margin: 0;
+/* In place of a comment whose author asks not to be shown to logged-out people:
+   a blurred, made-up comment (grey bars, never the real one) under an explanation. */
+:where(.atmo-comment--withheld article) {
+  position: relative;
+  overflow: hidden;
+}
+
+.atmo-withheld__ghost {
+  filter: blur(5px);
+  opacity: 0.7;
+  pointer-events: none;
+  user-select: none;
+}
+
+.atmo-withheld__names,
+.atmo-withheld__text {
+  display: grid;
+  gap: 8px;
+  align-content: center;
+}
+
+.atmo-withheld__text {
+  margin-top: 14px;
+}
+
+.atmo-withheld__bar {
+  display: block;
+  max-width: 100%;
+  height: 0.75em;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--atmo-muted, currentColor) 45%, transparent);
+}
+
+.atmo-withheld__cover {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  gap: 4px;
+  padding: 12px 20px;
+  border: 0;
+  color: var(--atmo-text, inherit);
+  font: inherit;
+  text-align: center;
+  background: color-mix(in srgb, var(--atmo-card-bg, Canvas) 35%, transparent);
+  cursor: pointer;
+}
+
+.atmo-withheld__cover:disabled {
+  cursor: default;
+}
+
+.atmo-withheld__cover span {
+  max-width: 42ch;
   color: var(--atmo-muted, inherit);
   font-size: 0.9em;
-  font-style: italic;
+}
+
+.atmo-withheld__cover:not(:disabled):hover strong,
+.atmo-withheld__cover:not(:disabled):focus-visible strong {
+  text-decoration: underline;
+}
+
+.atmo-withheld__cover:focus-visible {
+  outline: 2px solid var(--atmo-accent, #1185fe);
+  outline-offset: -2px;
+}
+
+/* A faceless avatar: a head and shoulders. */
+:where(.atmo-avatar-anonymous) {
+  display: inline-block;
+  background:
+    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--atmo-muted, #888) 70%, transparent) 0 18%, transparent 19%),
+    radial-gradient(ellipse 34% 26% at 50% 88%, color-mix(in srgb, var(--atmo-muted, #888) 70%, transparent) 0 99%, transparent 100%),
+    var(--atmo-field-bg, #8882);
+}
+
+/* "Liked" / "Reposted" over a button, when something pressed before signing
+   in is finished once the reader is back (lib/client/done.ts): the button's
+   icon, enlarged, pops in above it with the word, then floats up and fades. */
+.atmo-has-done {
+  position: relative;
+}
+
+.atmo-done {
+  position: absolute;
+  z-index: 30;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  display: grid;
+  justify-items: center;
+  gap: 2px;
+  padding: 8px 14px 6px;
+  border: 1px solid var(--atmo-border, #8886);
+  border-radius: var(--atmo-radius, 10px);
+  background: var(--atmo-dialog-bg, var(--atmo-menu-bg, Canvas));
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.25);
+  color: var(--atmo-accent, #1185fe);
+  font-size: 0.85rem;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  pointer-events: none;
+  transform: translateX(-50%);
+  animation: atmo-done 1.8s ease-out forwards;
+}
+
+/* Specific enough to beat a button's own icon size; its colours still apply. */
+.atmo-has-done .atmo-done svg.atmo-done__icon {
+  width: 34px;
+  height: 34px;
+  animation: atmo-done-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
+}
+
+.atmo-done__label {
+  color: var(--atmo-text, CanvasText);
+}
+
+@keyframes atmo-done {
+  0% { opacity: 0; transform: translate(-50%, 6px); }
+  12% { opacity: 1; transform: translate(-50%, 0); }
+  75% { opacity: 1; transform: translate(-50%, 0); }
+  100% { opacity: 0; transform: translate(-50%, -10px); }
+}
+
+@keyframes atmo-done-pop {
+  0% { transform: scale(0.3); }
+  60% { transform: scale(1.25); }
+  100% { transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .atmo-done {
+    animation-name: atmo-done-fade;
+  }
+
+  .atmo-has-done .atmo-done svg.atmo-done__icon {
+    animation: none;
+  }
+
+  @keyframes atmo-done-fade {
+    0%, 100% { opacity: 0; }
+    12%, 75% { opacity: 1; }
+  }
 }