@firedrill-tools/linkedin 0.1.1

package/firedrill/tools/linkedin/app/site/base.css

@@ -0,0 +1,87 @@
+@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/fira-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./assets/fonts/fira-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("./assets/fonts/fira-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/fira-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./assets/fonts/fira-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("./assets/fonts/fira-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+
+:root {
+  --ground: #f4f2ee;
+  --card: #ffffff;
+  --blue: #0a66c2;
+  --blue-hover: #004182;
+  --blue-tint: rgba(112, 181, 249, 0.2);
+  --text: rgba(0, 0, 0, 0.9);
+  --text-2: rgba(0, 0, 0, 0.6);
+  --text-3: rgba(0, 0, 0, 0.45);
+  --hairline: rgba(140, 140, 140, 0.2);
+  --divider: #e8e8e8;
+  --hover: rgba(0, 0, 0, 0.08);
+  --press: rgba(0, 0, 0, 0.12);
+  --green: #01754f;
+  --danger: #cc1016;
+  --search: #edf3f8;
+  --radius: 8px;
+  --shadow: 0 0 0 1px var(--hairline);
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lato Extended", Lato, sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body { font-family: var(--font); font-size: 14px; line-height: 1.42857; color: var(--text); background: var(--ground); -webkit-font-smoothing: antialiased; }
+button, input, textarea, select { font: inherit; color: inherit; }
+a { color: var(--blue); text-decoration: none; }
+a:hover { text-decoration: underline; }
+h1, h2, h3, p { margin: 0; }
+ul { margin: 0; padding: 0; list-style: none; }
+:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
+[hidden] { display: none !important; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.icon { display: block; flex: none; }
+
+.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
+.card + .card { margin-top: 8px; }
+
+/* Pill buttons */
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 6px 16px; border-radius: 24px; border: 0; font-weight: 600; font-size: 16px; line-height: 20px; cursor: pointer; background: transparent; transition: background-color .167s, box-shadow .167s, color .167s; white-space: nowrap; }
+.btn--sm { min-height: 32px; padding: 6px 12px; font-size: 14px; }
+.btn--primary { background: var(--blue); color: #fff; }
+.btn--primary:hover { background: var(--blue-hover); }
+.btn--primary:disabled { background: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.3); cursor: not-allowed; }
+.btn--secondary { box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); }
+.btn--secondary:hover { box-shadow: inset 0 0 0 2px var(--blue-hover); background: var(--blue-tint); color: var(--blue-hover); }
+.btn--muted { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); color: var(--text-2); }
+.btn--muted:hover { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.75); background: var(--hover); color: var(--text); }
+.btn--tertiary { color: var(--text-2); border-radius: 4px; padding: 6px 8px; }
+.btn--tertiary:hover { background: var(--hover); color: var(--text); }
+.btn--danger { background: var(--danger); color: #fff; }
+.btn--danger:hover { background: #8a0005; }
+.btn[data-busy="true"] { position: relative; color: transparent !important; }
+.btn[data-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); border-top-color: var(--blue); animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
+.icon-btn:hover { background: var(--hover); color: var(--text); }
+.icon-btn--sm { width: 32px; height: 32px; }
+
+.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--avatar-bg, #56687a); color: #fff; font-weight: 600; overflow: hidden; user-select: none; }
+.avatar--org { border-radius: 4px; }
+.avatar--24 { width: 24px; height: 24px; font-size: 10px; }
+.avatar--32 { width: 32px; height: 32px; font-size: 13px; }
+.avatar--40 { width: 40px; height: 40px; font-size: 15px; }
+.avatar--48 { width: 48px; height: 48px; font-size: 18px; }
+.avatar--56 { width: 56px; height: 56px; font-size: 20px; }
+.avatar--72 { width: 72px; height: 72px; font-size: 26px; border: 2px solid #fff; }
+.avatar--152 { width: 152px; height: 152px; font-size: 56px; border: 4px solid #fff; }
+.avatar--org.avatar--72, .avatar--org.avatar--152 { border-radius: 4px; }
+
+.link-quiet { color: inherit; }
+.link-quiet:hover { color: var(--blue); text-decoration: underline; }
+.muted { color: var(--text-2); }
+.t-12 { font-size: 12px; line-height: 16px; }
+.t-bold { font-weight: 600; }
+
+.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: #fff; z-index: 50; }
+.boot-bar { width: 132px; height: 2px; background: #e9e5df; overflow: hidden; border-radius: 2px; }
+.boot-bar span { display: block; width: 40%; height: 100%; background: var(--blue); animation: boot 1.2s ease-in-out infinite; }
+@keyframes boot { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
+.boot__message { max-width: 420px; text-align: center; color: var(--text-2); font-size: 16px; }

package/firedrill/tools/linkedin/app/site/comment-box.js

@@ -0,0 +1,119 @@
+// Comment/reply input with "comment as" avatar selector and an @mention picker over the viewer's connections.
+import { el, call, describe, avatar, busy } from "./ui.js";
+import { icon } from "./icons.js";
+import { session, actingPages } from "./store.js";
+import { showMenu, notSimulated } from "./overlay.js";
+
+export function commentBox({ placeholder = "Add a comment…", submitLabel = "Comment", asPages = false, autofocus = false, compact = false, initialText = "", initialAttributes = [], onSubmit, onCancel }) {
+  const viewer = session.viewer;
+  let actor = viewer.personUrn;
+  const mentions = []; // { name, urn }
+  for (const attribute of initialAttributes ?? []) {
+    const urn = attribute.value?.person?.person ?? attribute.value?.organization?.organization;
+    if (urn) mentions.push({ name: initialText.slice(attribute.start, attribute.start + attribute.length), urn });
+  }
+
+  const form = el("form", { class: `comment-box${compact ? " comment-box--compact" : ""}` });
+  const who = el("button", { class: "comment-box__as", attrs: { type: "button", "aria-haspopup": "menu", "aria-expanded": "false" } });
+  const paintWho = () => {
+    const page = actingPages().find((p) => p.organizationUrn === actor);
+    const name = page ? page.name : viewer.name;
+    who.replaceChildren(avatar(name, actor, compact ? 32 : 40, Boolean(page)));
+    who.setAttribute("aria-label", `Commenting as ${name}. Change`);
+    who.title = `Commenting as ${name}`;
+  };
+  paintWho();
+  const pages = asPages ? actingPages() : [];
+  if (pages.length > 0) {
+    who.addEventListener("click", () => showMenu(who, [{ urn: viewer.personUrn, name: viewer.name }, ...pages.map((p) => ({ urn: p.organizationUrn, name: p.name }))].map((choice) => ({
+      label: `${choice.urn === actor ? "✓ " : ""}${choice.name}`, sub: choice.urn === viewer.personUrn ? "Your profile" : "Page you manage", onSelect: () => { actor = choice.urn; paintWho(); },
+    })), { align: "left" }));
+  } else {
+    who.disabled = true;
+  }
+
+  const input = el("textarea", { class: "comment-box__input", attrs: { rows: "1", placeholder, "aria-label": placeholder.replace("…", "") } });
+  input.value = initialText;
+  const picker = el("div", { class: "mention-picker", attrs: { role: "listbox", "aria-label": "Mention suggestions" } });
+  picker.hidden = true;
+  const error = el("p", { class: "comment-box__error", attrs: { role: "alert" } });
+  error.hidden = true;
+  const submit = el("button", { class: "btn btn--primary btn--sm comment-box__submit", text: submitLabel, attrs: { type: "submit" } });
+  const tools = el("span", { class: "comment-box__tools" }, [
+    el("button", { class: "icon-btn icon-btn--sm", title: "Open Emoji Keyboard", attrs: { type: "button", "aria-label": "Open Emoji Keyboard" }, on: { click: () => notSimulated("Emoji keyboard") } }, icon("emoji")),
+    el("button", { class: "icon-btn icon-btn--sm", title: "Add a photo", attrs: { type: "button", "aria-label": "Add a photo" }, on: { click: () => notSimulated("Images in comments") } }, icon("photo")),
+  ]);
+  const field = el("div", { class: "comment-box__field" }, [input, tools]);
+  const row = el("div", { class: "comment-box__row" }, [who, el("div", { class: "comment-box__main" }, [field, picker])]);
+  const footer = el("div", { class: "comment-box__footer" }, [
+    onCancel ? el("button", { class: "btn btn--tertiary btn--sm", text: "Cancel", attrs: { type: "button" }, on: { click: onCancel } }) : null,
+    submit,
+  ]);
+  form.append(row, error, footer);
+
+  const sync = () => {
+    input.style.height = "auto";
+    input.style.height = `${Math.min(input.scrollHeight, 240)}px`;
+    const has = input.value.trim().length > 0;
+    footer.hidden = !has && !onCancel;
+    submit.disabled = !has || [...input.value].length > 1250;
+  };
+  sync();
+
+  let searchToken = 0;
+  const mentionQuery = () => {
+    const before = input.value.slice(0, input.selectionStart ?? input.value.length);
+    const match = /(?:^|\s)@([\p{L}\p{N} .'-]{0,40})$/u.exec(before);
+    return match ? { query: match[1], at: before.length - match[1].length - 1 } : null;
+  };
+  const refreshPicker = async () => {
+    const found = mentionQuery();
+    if (!found) { picker.hidden = true; return; }
+    const token = ++searchToken;
+    try {
+      const page = await call("connections.list", { query: found.query.trim(), start: 0, count: 5 });
+      if (token !== searchToken) return;
+      picker.replaceChildren();
+      if (page.elements.length === 0) { picker.append(el("p", { class: "mention-picker__empty", text: "No matching connections" })); }
+      for (const { person } of page.elements) {
+        const name = `${person.localizedFirstName} ${person.localizedLastName}`.trim();
+        picker.append(el("button", { class: "mention-picker__item", attrs: { type: "button", role: "option" }, on: { mousedown: (event) => event.preventDefault(), click: () => {
+          input.value = `${input.value.slice(0, found.at)}${name} ${input.value.slice(input.selectionStart ?? input.value.length)}`;
+          mentions.push({ name, urn: `urn:li:person:${person.id}` });
+          picker.hidden = true;
+          input.focus();
+          sync();
+        } } }, [avatar(name, `urn:li:person:${person.id}`, 32), el("span", {}, [el("span", { class: "t-bold", text: name }), el("span", { class: "mention-picker__sub", text: person.localizedHeadline ?? "" })])]));
+      }
+      picker.hidden = false;
+    } catch { picker.hidden = true; }
+  };
+  input.addEventListener("input", () => { error.hidden = true; sync(); void refreshPicker(); });
+  input.addEventListener("keydown", (event) => { if (event.key === "Escape" && !picker.hidden) { event.stopPropagation(); picker.hidden = true; } });
+  input.addEventListener("blur", () => setTimeout(() => { picker.hidden = true; }, 150));
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    void busy(submit, async () => {
+      const text = input.value.trim();
+      const attributes = [];
+      let from = 0;
+      for (const mention of mentions) {
+        const start = text.indexOf(mention.name, from);
+        if (start < 0) continue;
+        const kind = mention.urn.startsWith("urn:li:organization:") ? "organization" : "person";
+        attributes.push({ start, length: mention.name.length, value: kind === "person" ? { person: { person: mention.urn } } : { organization: { organization: mention.urn } } });
+        from = start + mention.name.length;
+      }
+      try {
+        await onSubmit({ text, attributes, actor });
+        if (form.isConnected) { input.value = ""; mentions.length = 0; sync(); }
+      } catch (failure) {
+        error.textContent = describe(failure);
+        error.hidden = false;
+      }
+    });
+  });
+  if (autofocus) queueMicrotask(() => { input.focus(); input.setSelectionRange(input.value.length, input.value.length); });
+  return form;
+}

package/firedrill/tools/linkedin/app/site/comments.css

@@ -0,0 +1,59 @@
+.comments { padding: 4px 16px 12px; }
+.comments__closed { display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; color: var(--text-2); }
+.comments__sort { display: inline-flex; align-items: center; gap: 2px; margin: 8px 0 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
+.comments__sort .icon { width: 16px; height: 16px; }
+.comments__empty, .comments__error { padding: 8px 0; color: var(--text-2); }
+.comments__error { display: flex; align-items: center; gap: 8px; color: var(--danger); }
+.comments__loading { display: flex; justify-content: center; padding: 12px; }
+.comments__more { display: inline-flex; margin: 4px 0 0 48px; padding: 4px 8px; border: 0; border-radius: 16px; background: none; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.comments__more:hover { background: var(--hover); color: var(--text); }
+.spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .15); border-top-color: var(--blue); animation: spin .8s linear infinite; }
+
+.comment { display: flex; gap: 4px; margin-top: 12px; }
+.comment__avatar { flex: none; margin-right: 4px; }
+.comment__body { flex: 1; min-width: 0; }
+.comment__bubble { padding: 8px 12px 12px; border-radius: 0 8px 8px 8px; background: #f2f2f2; }
+.comment__head { display: flex; justify-content: space-between; gap: 8px; }
+.comment__who { display: flex; flex-direction: column; min-width: 0; }
+.comment__name { font-size: 14px; font-weight: 600; color: var(--text); }
+.comment__name:hover { color: var(--blue); }
+.comment__name-line { display: flex; align-items: center; gap: 6px; }
+.comment__degree { font-size: 12px; color: var(--text-2); }
+.comment__author-badge { padding: 0 4px; border-radius: 2px; background: #56687a; color: #fff; font-size: 12px; line-height: 16px; }
+.comment__headline { font-size: 12px; line-height: 16px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.comment__aside { display: flex; align-items: flex-start; gap: 2px; flex: none; }
+.comment__time { font-size: 12px; color: var(--text-2); line-height: 32px; }
+.comment__menu { margin-top: 0; }
+.comment__menu .icon { width: 20px; height: 20px; }
+.comment__text { margin-top: 8px; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.comment__actions { display: flex; align-items: center; gap: 6px; padding: 2px 0 0 4px; font-size: 12px; color: var(--text-2); }
+.comment__action { padding: 4px; border: 0; border-radius: 4px; background: none; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.comment__action:hover { background: var(--hover); color: var(--text); }
+.comment__action--active { color: var(--blue); }
+.comment__sep { color: var(--text-3); }
+.comment__count-badge { display: inline-flex; align-items: center; gap: 3px; }
+.comment__dot { color: var(--text-3); }
+.comment__count-badge .icon { width: 14px; height: 14px; color: #378fe9; }
+.comment__replies { margin-top: 4px; }
+.comment--reply { margin-top: 8px; }
+
+.comment-box { margin-top: 8px; }
+.comment-box__row { display: flex; gap: 8px; align-items: flex-start; }
+.comment-box__as { flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
+.comment-box__as:disabled { cursor: default; }
+.comment-box__main { position: relative; flex: 1; min-width: 0; }
+.comment-box__field { display: flex; align-items: flex-end; min-height: 40px; padding: 2px 4px 2px 16px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); background: #fff; }
+.comment-box__field:focus-within { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.9); }
+.comment-box--compact .comment-box__field { min-height: 32px; border-radius: 16px; }
+.comment-box__input { flex: 1; min-height: 36px; max-height: 240px; padding: 8px 0; border: 0; resize: none; overflow-y: auto; background: transparent; font-size: 14px; line-height: 20px; }
+.comment-box--compact .comment-box__input { min-height: 28px; padding: 4px 0; }
+.comment-box__input:focus { outline: none; }
+.comment-box__tools { display: flex; color: var(--text-2); }
+.comment-box__footer { display: flex; justify-content: flex-start; gap: 8px; margin: 8px 0 0 48px; }
+.comment-box__error { margin: 6px 0 0 48px; font-size: 12px; color: var(--danger); }
+.mention-picker { position: absolute; left: 0; top: calc(100% + 4px); width: 320px; padding: 4px 0; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--hairline), 0 4px 12px rgba(0, 0, 0, .15); z-index: 12; }
+.mention-picker__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
+.mention-picker__item > span { display: flex; flex-direction: column; min-width: 0; }
+.mention-picker__item:hover { background: var(--hover); }
+.mention-picker__sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mention-picker__empty { padding: 8px 12px; color: var(--text-2); }

package/firedrill/tools/linkedin/app/site/comments.js

@@ -0,0 +1,188 @@
+// Comments section under a post: comment box with @mentions and "comment as", paged list, replies, likes, edit and delete.
+import { el, call, newKey, describe, toast, avatar, relativeTime, busy } from "./ui.js";
+import { icon } from "./icons.js";
+import { session, actingPages, resolveEntity, hrefForUrn, isViewer } from "./store.js";
+import { renderAttributedText } from "./text.js";
+import { confirmDialog, showMenu, notSimulated } from "./overlay.js";
+import { commentBox } from "./comment-box.js";
+import { canManage } from "./post.js";
+
+const PAGE = 10;
+
+/** Expand (or collapse) the comments section of a post card. */
+export function toggleComments(host, entry, { focus = false, onChanged } = {}) {
+  if (host.dataset.open === "true") {
+    if (focus) host.querySelector(".comment-box__input")?.focus();
+    else { host.dataset.open = "false"; host.replaceChildren(); }
+    return;
+  }
+  host.dataset.open = "true";
+  const ctx = { entry, onChanged: async () => { await onChanged?.(); } };
+  const section = el("section", { class: "comments", attrs: { "aria-label": "Comments" } });
+  host.replaceChildren(section);
+  if (entry.social.commentsState === "CLOSED") {
+    section.append(el("p", { class: "comments__closed" }, [icon("comment-off"), el("span", { text: "Comments are turned off for this post." })]));
+    return;
+  }
+  const list = el("div", { class: "comments__list" });
+  const box = commentBox({
+    placeholder: "Add a comment…",
+    submitLabel: "Comment",
+    asPages: true,
+    autofocus: focus,
+    onSubmit: async ({ text, attributes, actor }) => {
+      await call("comments.create", { target: entry.post.id, actor, message: { text, attributes } }, newKey());
+      await loadInto(list, ctx, { reset: true });
+      await ctx.onChanged();
+    },
+  });
+  section.append(box, el("div", { class: "comments__sort" }, [el("span", { text: "Oldest" }), icon("caret-down")]), list);
+  void loadInto(list, ctx, { reset: true });
+}
+
+async function loadInto(list, ctx, { reset = false, parent = null } = {}) {
+  const target = parent ? parent.commentUrn : ctx.entry.post.id;
+  const start = reset ? 0 : Number(list.dataset.loaded ?? 0);
+  if (reset) { list.replaceChildren(el("div", { class: "comments__loading", attrs: { role: "status" } }, el("span", { class: "spinner", attrs: { "aria-label": "Loading comments" } }))); }
+  list.querySelector(".comments__more")?.remove();
+  try {
+    const page = await call("comments.list", { target, start, count: PAGE });
+    if (reset) list.replaceChildren();
+    for (const comment of page.elements) list.append(await renderComment(comment, ctx, parent));
+    const loaded = start + page.elements.length;
+    list.dataset.loaded = String(loaded);
+    if (reset && page.elements.length === 0 && !parent) list.append(el("p", { class: "comments__empty", text: "No comments yet. Be the first to comment." }));
+    const total = page.paging.total ?? loaded;
+    if (loaded < total) {
+      list.append(el("button", { class: "comments__more", text: parent ? `Load more replies` : "Load more comments", attrs: { type: "button" }, on: { click: (event) => busy(event.currentTarget, () => loadInto(list, ctx, { parent })) } }));
+    }
+  } catch (error) {
+    if (reset) list.replaceChildren();
+    list.append(el("p", { class: "comments__error", attrs: { role: "alert" } }, [el("span", { text: describe(error) }), el("button", { class: "btn btn--tertiary btn--sm", text: "Retry", attrs: { type: "button" }, on: { click: () => loadInto(list, ctx, { reset: true, parent }) } })]));
+  }
+}
+
+async function renderComment(comment, ctx, parent) {
+  const who = await resolveEntity(comment.actor);
+  const isOrg = who.kind === "organization";
+  const row = el("article", { class: `comment${parent ? " comment--reply" : ""}`, attrs: { "data-comment": comment.id } });
+  const href = hrefForUrn(comment.actor);
+  const edited = comment.lastModified.time > comment.created.time;
+  const mine = isViewer(comment.actor) || actingPages().some((p) => p.organizationUrn === comment.actor);
+  const canDelete = mine || canManage(ctx.entry.post.author);
+
+  const bubble = el("div", { class: "comment__bubble" });
+  const menuButton = el("button", { class: "icon-btn icon-btn--sm comment__menu", title: "Open options", attrs: { type: "button", "aria-label": `Open options for ${who.name}'s comment`, "aria-haspopup": "menu" } }, icon("ellipsis"));
+  menuButton.addEventListener("click", () => showMenu(menuButton, [
+    ...(isViewer(comment.actor) ? [{ icon: "pencil", label: "Edit", onSelect: () => startEdit(bubble, textNode, comment, ctx) }] : []),
+    ...(canDelete ? [{ icon: "trash", label: "Delete", onSelect: () => removeComment(comment, ctx, row) }] : []),
+    { icon: "alert", label: "Report", onSelect: () => notSimulated("Reporting comments") },
+  ]));
+  const textNode = renderAttributedText(el("div", { class: "comment__text", attrs: { dir: "ltr" } }), comment.message.text, comment.message.attributes);
+  bubble.append(
+    el("div", { class: "comment__head" }, [
+      el("div", { class: "comment__who" }, [
+        el("span", { class: "comment__name-line" }, [
+          el("a", { class: "comment__name", text: who.name, attrs: { href } }),
+          comment.actor === ctx.entry.post.author ? el("span", { class: "comment__author-badge", text: "Author" }) : isViewer(comment.actor) ? el("span", { class: "comment__degree", text: "• You" }) : null,
+        ]),
+        who.headline ? el("span", { class: "comment__headline", text: who.headline }) : null,
+      ]),
+      el("div", { class: "comment__aside" }, [el("span", { class: "comment__time", text: `${relativeTime(comment.created.time)}${edited ? " (edited)" : ""}` }), menuButton]),
+    ]),
+    textNode,
+  );
+
+  const likes = comment.likesSummary ?? { totalLikes: 0, likedByCurrentUser: false };
+  const likeState = { liked: Boolean(likes.likedByCurrentUser), count: likes.totalLikes ?? 0 };
+  const likeButton = el("button", { class: "comment__action", attrs: { type: "button" } });
+  const likeCount = el("span", { class: "comment__count" });
+  const paintLike = () => {
+    likeButton.textContent = "Like";
+    likeButton.setAttribute("aria-pressed", String(likeState.liked));
+    likeButton.setAttribute("aria-label", likeState.liked ? `Unlike ${who.name}'s comment` : `Like ${who.name}'s comment`);
+    likeButton.classList.toggle("comment__action--active", likeState.liked);
+    likeCount.replaceChildren();
+    if (likeState.count > 0) likeCount.append(el("span", { class: "comment__dot", text: "•" }), el("span", { class: "comment__count-badge" }, [icon("like"), el("span", { text: String(likeState.count) })]));
+  };
+  paintLike();
+  likeButton.addEventListener("click", () => busy(likeButton, async () => {
+    const actor = session.viewer.personUrn;
+    try {
+      if (likeState.liked) await call("reactions.delete", { actor, entity: comment.commentUrn }, newKey());
+      else await call("reactions.create", { actor, root: comment.commentUrn, reactionType: "LIKE" }, newKey());
+      likeState.count += likeState.liked ? -1 : 1;
+      likeState.liked = !likeState.liked;
+      paintLike();
+    } catch (error) { toast(describe(error), { error: true }); }
+  }));
+
+  const actions = el("div", { class: "comment__actions" }, [likeButton, likeCount]);
+  const body = el("div", { class: "comment__body" }, [bubble, actions]);
+  row.append(el("a", { class: "comment__avatar", attrs: { href, tabindex: "-1", "aria-hidden": "true" } }, avatar(who.name, comment.actor, parent ? 32 : 40, isOrg)), body);
+
+  if (!parent) {
+    const replyCount = comment.commentsSummary?.aggregatedTotalComments ?? 0;
+    const replies = el("div", { class: "comment__replies" });
+    const replyButton = el("button", { class: "comment__action", text: "Reply", attrs: { type: "button", "aria-label": `Reply to ${who.name}'s comment` } });
+    actions.append(el("span", { class: "comment__sep", text: "|", attrs: { "aria-hidden": "true" } }), replyButton);
+    if (replyCount > 0) actions.append(el("span", { class: "comment__dot", text: "•" }), el("span", { class: "comment__count", text: `${replyCount} ${replyCount === 1 ? "reply" : "replies"}` }));
+    body.append(replies);
+    const openReplies = async (withBox) => {
+      if (replies.dataset.open !== "true") {
+        replies.dataset.open = "true";
+        const list = el("div", { class: "comments__list" });
+        replies.append(list);
+        await loadInto(list, ctx, { reset: true, parent: comment });
+      }
+      if (withBox && !replies.querySelector(".comment-box")) {
+        const box = commentBox({
+          placeholder: "Add a reply…", submitLabel: "Reply", asPages: true, autofocus: true, compact: true,
+          onSubmit: async ({ text, attributes, actor }) => {
+            await call("comments.create", { target: comment.commentUrn, actor, parentComment: comment.commentUrn, message: { text, attributes } }, newKey());
+            replies.replaceChildren();
+            replies.dataset.open = "false";
+            await openReplies(false);
+            await ctx.onChanged();
+          },
+        });
+        replies.prepend(box);
+      }
+    };
+    replyButton.addEventListener("click", () => openReplies(true));
+    if (replyCount > 0) void openReplies(false);
+  }
+  return row;
+}
+
+function startEdit(bubble, textNode, comment, ctx) {
+  if (bubble.querySelector(".comment-box")) return;
+  textNode.hidden = true;
+  const box = commentBox({
+    initialText: comment.message.text, initialAttributes: comment.message.attributes, submitLabel: "Save changes", autofocus: true, compact: true,
+    onCancel: () => { box.remove(); textNode.hidden = false; },
+    onSubmit: async ({ text, attributes }) => {
+      await call("comments.update", { target: ctx.entry.post.id, commentId: comment.id, message: { text, attributes } }, newKey());
+      comment.message = { text, attributes };
+      textNode.replaceChildren();
+      renderAttributedText(textNode, text, attributes);
+      box.remove();
+      textNode.hidden = false;
+      toast("Comment edited.");
+    },
+  });
+  textNode.after(box);
+}
+
+async function removeComment(comment, ctx, row) {
+  const ok = await confirmDialog({ title: "Delete comment?", message: "Are you sure you want to delete this comment? Replies to it will be deleted too.", confirmLabel: "Delete", danger: true });
+  if (!ok) return;
+  try {
+    await call("comments.delete", { target: ctx.entry.post.id, commentId: comment.id }, newKey());
+    row.remove();
+    toast("Comment deleted.");
+    await ctx.onChanged();
+  } catch (error) {
+    toast(describe(error), { error: true });
+  }
+}

package/firedrill/tools/linkedin/app/site/company.js

@@ -0,0 +1,115 @@
+// Company page (/company/{vanity}): header, admin view (About, Admins) when the viewer administers it, and page posts.
+import { el, call, describe, avatar, relativeTime, busy } from "./ui.js";
+import { icon } from "./icons.js";
+import { session, rememberOrganization, resolveEntity, hrefForUrn } from "./store.js";
+import { littleTextToPlain } from "./text.js";
+import { openComposer } from "./composer.js";
+import { footer } from "./feed.js";
+
+const SIZES = { SIZE_1: "1 employee", SIZE_2_TO_10: "2-10 employees", SIZE_11_TO_50: "11-50 employees", SIZE_51_TO_200: "51-200 employees", SIZE_201_TO_500: "201-500 employees", SIZE_501_TO_1000: "501-1,000 employees", SIZE_1001_TO_5000: "1,001-5,000 employees", SIZE_5001_TO_10000: "5,001-10,000 employees", SIZE_10001_OR_MORE: "10,001+ employees" };
+const fmt = (n) => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+export function renderCompany(main, vanity) {
+  const host = el("div", { class: "company-main" }, el("section", { class: "card state-card" }, el("span", { class: "spinner", attrs: { "aria-label": "Loading page" } })));
+  main.replaceChildren(el("div", { class: "profile-layout" }, [host, el("aside", { class: "profile-aside" }, footer())]));
+
+  const load = async () => {
+    try {
+      const found = await call("organizations.find_by_vanity_name", { vanityName: vanity });
+      const org = found.elements[0];
+      if (!org) throw Object.assign(new Error("This page doesn't exist"), { code: "NOT_FOUND" });
+      rememberOrganization(org);
+      const urn = `urn:li:organization:${org.id}`;
+      const role = session.viewer.pages.find((p) => p.organizationUrn === urn);
+      let admin = null;
+      if (role?.roles.includes("ADMINISTRATOR")) admin = await call("organizations.get", { organizationId: String(org.id) }).catch(() => null);
+      const followers = await call("network_sizes.get", { entity: urn, edgeType: "COMPANY_FOLLOWED_BY_MEMBER" }).then((r) => r.firstDegreeSize).catch(() => null);
+      paint(host, { org, admin, urn, followers, role });
+    } catch (error) {
+      host.replaceChildren(el("section", { class: "card state-card", attrs: { role: "alert" } }, [
+        el("h1", { class: "state-card__title", text: error.code === "NOT_FOUND" ? "This page doesn't exist" : "Couldn't load this page" }),
+        el("p", { class: "state-card__text", text: error.code === "NOT_FOUND" ? "Please check your URL or return to your feed." : describe(error) }),
+        el("a", { class: "btn btn--secondary", text: "Go to your feed", attrs: { href: "#/feed" } }),
+      ]));
+    }
+  };
+  void load();
+  return { refresh: load };
+}
+
+function paint(host, { org, admin, urn, followers, role }) {
+  const location = org.locations?.[0]?.address;
+  const where = location ? [location.city, location.geographicArea].filter(Boolean).join(", ") : "";
+  const facts = [where, followers === null ? null : `${fmt(followers)} followers`, admin?.staffCountRange ? SIZES[admin.staffCountRange] : null].filter(Boolean).join(" · ");
+  const canPost = role?.roles.some((r) => ["ADMINISTRATOR", "CONTENT_ADMINISTRATOR", "DIRECT_SPONSORED_CONTENT_POSTER"].includes(r));
+  const posts = el("div", { class: "activity-list" });
+  const more = el("div", { class: "activity-more" });
+  const top = el("section", { class: "card profile-top" }, [
+    el("div", { class: "profile-top__cover profile-top__cover--company", attrs: { "aria-hidden": "true" } }),
+    el("div", { class: "profile-top__body" }, [
+      el("div", { class: "profile-top__avatar" }, avatar(org.localizedName, urn, 152, true)),
+      el("h1", { class: "profile-top__name", text: org.localizedName }),
+      admin?.localizedDescription ? el("p", { class: "profile-top__headline", text: admin.localizedDescription }) : null,
+      el("p", { class: "profile-top__meta muted", text: facts }),
+      el("div", { class: "profile-top__actions" }, admin
+        ? [el("button", { class: "btn btn--primary btn--sm", attrs: { type: "button" }, on: { click: () => openComposer({ onDone: () => loadPosts(true) }) } }, [icon("pencil"), el("span", { text: "Create" })]), el("button", { class: "btn btn--secondary btn--sm", text: "Edit page", attrs: { type: "button", "data-not-simulated": "Editing page details" } })]
+        : [el("button", { class: "btn btn--primary btn--sm", attrs: { type: "button", "data-not-simulated": "Following pages" } }, [icon("plus"), el("span", { text: "Follow" })]), el("button", { class: "btn btn--secondary btn--sm", text: "Message", attrs: { type: "button", "data-not-simulated": "Messaging pages" } })]),
+    ]),
+    role && !admin ? el("p", { class: "company-note", text: "You don't have access to this page's admin view." }) : null,
+  ]);
+  const sections = [top];
+  if (admin) {
+    sections.push(el("section", { class: "card company-about" }, [
+      el("h2", { class: "section-head__title", text: "About" }),
+      admin.localizedDescription ? el("p", { class: "company-about__text", text: admin.localizedDescription }) : null,
+      el("dl", { class: "company-about__facts" }, [
+        ["Website", admin.localizedWebsite], ["Company size", SIZES[admin.staffCountRange]], ["Headquarters", where], ["Founded", admin.foundedOn?.year ? String(admin.foundedOn.year) : null],
+      ].filter(([, value]) => value).flatMap(([label, value]) => [el("dt", { text: label }), el("dd", { text: value })])),
+    ]));
+    const admins = el("ul", { class: "company-admins" });
+    sections.push(el("section", { class: "card company-about" }, [el("h2", { class: "section-head__title", text: "Page admins" }), admins]));
+    void loadAdmins(admins, urn);
+  }
+  sections.push(el("section", { class: "card profile-activity" }, [
+    el("div", { class: "section-head" }, [el("h2", { class: "section-head__title", text: "Page posts" }), canPost ? el("button", { class: "btn btn--secondary btn--sm", text: "Start a post", attrs: { type: "button" }, on: { click: () => openComposer({ onDone: () => loadPosts(true) }) } }) : null]),
+    posts, more,
+  ]));
+  host.replaceChildren(...sections);
+
+  let start = 0;
+  const loadPosts = async (reset) => {
+    if (reset) { start = 0; posts.replaceChildren(); }
+    more.replaceChildren();
+    try {
+      const page = await call("posts.list_by_author", { author: urn, sortBy: "CREATED", start, count: 5, ...(admin ? { viewContext: "AUTHOR" } : {}) });
+      for (const post of page.elements) posts.append(el("article", { class: "activity-row" }, [
+        el("p", { class: "activity-row__meta" }, [el("span", { text: `${org.localizedName} • ${relativeTime(post.publishedAt ?? post.createdAt)}` }), post.lifecycleState === "DRAFT" ? el("span", { class: "badge badge--draft", text: "Draft" }) : null]),
+        el("p", { class: "activity-row__text", text: littleTextToPlain(post.commentary) || (post.content?.article?.title ?? "") }),
+      ]));
+      start += page.elements.length;
+      if (start === 0) posts.append(el("p", { class: "profile-activity__empty", text: "This page hasn't posted yet." }));
+      if (page.paging.links.some((l) => l.rel === "next")) more.append(el("button", { class: "btn btn--tertiary", text: "Show more posts", attrs: { type: "button" }, on: { click: (e) => busy(e.currentTarget, () => loadPosts(false)) } }));
+    } catch (error) {
+      posts.append(el("p", { class: "comments__error", attrs: { role: "alert" }, text: describe(error) }));
+    }
+  };
+  void loadPosts(true);
+}
+
+async function loadAdmins(list, urn) {
+  let start = 0;
+  try {
+    for (;;) {
+      const page = await call("organization_acls.list", { q: "organization", organization: urn, state: "APPROVED", start, count: 20 });
+      for (const acl of page.elements) {
+        const who = await resolveEntity(acl.roleAssignee);
+        list.append(el("li", { class: "company-admins__row" }, [avatar(who.name, acl.roleAssignee, 40), el("div", {}, [el("a", { class: "t-bold link-quiet", text: who.name, attrs: { href: hrefForUrn(acl.roleAssignee) } }), el("div", { class: "muted t-12", text: acl.role.charAt(0) + acl.role.slice(1).toLowerCase().replaceAll("_", " ") })])]));
+      }
+      start += page.elements.length;
+      if (page.elements.length === 0 || !page.paging.links.some((l) => l.rel === "next")) break;
+    }
+    if (start === 0) list.append(el("li", { class: "muted", text: "No approved admins." }));
+  } catch (error) {
+    list.append(el("li", { class: "comments__error", attrs: { role: "alert" }, text: describe(error) }));
+  }
+}