astro-atmosphere-comments 0.4.1 → 0.5.0

package/components/AtmosphereComments.astro

@@ -71,8 +71,9 @@ const messages = messagesFor(lang, {
 });
 const t = (key: string, vars?: Record<string, string | number>) => translate(messages, lang, key, vars);
 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 | undefined, text: string, attributes = "") =>
-  `<a${href ? ` href="${escapeHtml(href)}"` : ""}${attributes}>${escapeHtml(text)}</a>`;
+  `<a${href ? ` href="${escapeHtml(href)}"` : ""} target="_blank" rel="noopener"${attributes}>${escapeHtml(text)}</a>`;
 // The announcement on bsky.app, when the page is given it (otherwise the
 // script fills it in once the thread has loaded).
 const atUri = post.match(/^at:\/\/([^/]+)\/app\.bsky\.feed\.post\/([^/]+)$/);
@@ -120,6 +121,16 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       </button>
     </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>
+
     <Composer id="atmo" messages={messages} lang={lang} signOut />
   </div>
 
@@ -142,6 +153,9 @@ 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 type { Permission } from "../lib/permissions";
+  import { authorOf } from "../lib/uris";
 
 
   // The error and status codes the routes and the sign-in round trip send,
@@ -154,7 +168,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",
@@ -176,23 +189,32 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const signedOut = $<HTMLElement>("[data-view='signed-out']");
       const signedIn = $<HTMLElement>("[data-view='signed-in']");
       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 => {
@@ -215,6 +237,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;
@@ -254,7 +277,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             group.append(make("p", "atmo-reactions__count", t(kind === "like" ? "reactions.likes" : "reactions.reposts", { count })));
             const faces = make("ul", "atmo-facepile");
             for (const person of people) {
-              const link = Object.assign(make("a"), { href: person.url, title: nameOf(person), rel: "ugc nofollow noopener" });
+              const link = Object.assign(make("a"), { href: person.url, title: nameOf(person), rel: "ugc nofollow noopener", target: "_blank" });
               link.setAttribute("aria-label", nameOf(person));
               link.append(avatarOf(person, "atmo-facepile__avatar"));
               const item = make("li");
@@ -271,18 +294,29 @@ 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);
         const author = Object.assign(make("a", "atmo-comment__author", nameOf(reply.author)), {
           href: reply.author.url,
           rel: "ugc nofollow noopener",
+          target: "_blank",
         });
         const who = make("div", "atmo-comment__who");
         who.append(author);
         if (reply.byAuthor) who.append(make("span", "atmo-comment__badge", authorLabel));
-        const date = Object.assign(make("a", "atmo-comment__date"), { href: reply.url, rel: "ugc nofollow noopener" });
+        const date = Object.assign(make("a", "atmo-comment__date"), { href: reply.url, rel: "ugc nofollow noopener", target: "_blank" });
         const time = Object.assign(make("time"), { dateTime: reply.createdAt, textContent: reply.createdAt ? dates.format(new Date(reply.createdAt)) : "" });
         date.append(time, make("span", "", ` · ${t("comment.viewOnBluesky")}`));
         const names = make("div");
@@ -293,7 +327,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         const paragraph = make("p");
         for (const piece of reply.text) {
           paragraph.append(
-            piece.href ? Object.assign(make("a", "", piece.text), { href: piece.href, rel: "ugc nofollow noopener" }) : piece.text,
+            piece.href ? Object.assign(make("a", "", piece.text), { href: piece.href, rel: "ugc nofollow noopener", target: "_blank" }) : piece.text,
           );
         }
         body.append(paragraph);
@@ -383,6 +417,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const openLogin = () => loginForm.querySelector("input")?.focus({ preventScroll: true });
 
       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) => {
@@ -393,15 +428,17 @@ 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));
       };
 
       const postedMessage = (where: HTMLElement, data: Posted) =>
         where.replaceChildren(
           `${t(data.quote ? "posted.quote" : "posted.comment")} `,
-          Object.assign(document.createElement("a"), { href: data.url, textContent: t("posted.see") }),
+          Object.assign(document.createElement("a"), { href: data.url, textContent: t("posted.see"), target: "_blank", rel: "noopener noreferrer" }),
         );
 
       // The comment box (lib/client/composer.ts): posts as a reply to the
@@ -451,6 +488,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         main.textarea.focus();
       });
       $<HTMLButtonElement>("[data-quote]").addEventListener("click", () => {
+        if (!can("post")) return explainPermission("post");
         setMainMode("quote");
         main.textarea.focus();
       });
@@ -535,7 +573,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;
@@ -557,6 +596,7 @@ 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 (!can("post")) return explainPermission("post");
             openReply(comment, author);
           });
           actions.append(reply, commentButton("like", comment), commentButton("repost", comment));
@@ -581,7 +621,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 {
@@ -590,58 +631,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"));
         });
       };
 
@@ -651,14 +746,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);
@@ -687,23 +781,28 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         signedOut.hidden = signed;
         signedIn.hidden = !signed;
         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());
           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=(.+)$/);
+        // 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);
           }
         }
       };
@@ -718,11 +817,10 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       }
 
       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 }) => {
+      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(() => {
@@ -749,7 +847,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             const response = await send("react", { post, kind, on });
             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);
@@ -766,12 +865,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"));
     }
   }