@firedrill-tools/linkedin 0.1.1

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

@@ -0,0 +1,77 @@
+// My Network > Connections: count header, search, "Recently added" list with paging.
+import { el, call, describe, avatar, longDate, busy } from "./ui.js";
+import { icon } from "./icons.js";
+import { footer } from "./feed.js";
+
+const PAGE = 10;
+
+export function renderNetwork(main) {
+  const header = el("h1", { class: "network__count", text: "Connections" });
+  const input = el("input", { class: "network__search-input", attrs: { id: "network-search", type: "search", placeholder: "Search by name", autocomplete: "off" } });
+  const list = el("ul", { class: "network__list", attrs: { "aria-live": "polite" } });
+  const more = el("div", { class: "network__more" });
+  let query = "";
+  let loaded = 0;
+  let token = 0;
+
+  const load = async (reset) => {
+    const mine = ++token;
+    if (reset) { loaded = 0; list.replaceChildren(el("li", { class: "network__loading" }, el("span", { class: "spinner", attrs: { "aria-label": "Loading connections" } }))); }
+    more.replaceChildren();
+    try {
+      const page = await call("connections.list", { query, start: loaded, count: PAGE });
+      if (mine !== token) return;
+      if (reset) list.replaceChildren();
+      const total = page.paging.total ?? 0;
+      if (!query) header.textContent = `${total} Connection${total === 1 ? "" : "s"}`;
+      for (const { person, connectedAt } of page.elements) {
+        const name = `${person.localizedFirstName} ${person.localizedLastName}`.trim();
+        const href = `#/in/${encodeURIComponent(person.id)}`;
+        list.append(el("li", { class: "network__row" }, [
+          el("a", { attrs: { href, tabindex: "-1", "aria-hidden": "true" } }, avatar(name, `urn:li:person:${person.id}`, 72)),
+          el("div", { class: "network__meta" }, [
+            el("a", { class: "network__name", text: name, attrs: { href } }),
+            person.localizedHeadline ? el("span", { class: "network__headline", text: person.localizedHeadline }) : null,
+            el("span", { class: "network__date", text: `Connected on ${longDate(connectedAt)}` }),
+          ]),
+          el("div", { class: "network__actions" }, [
+            el("button", { class: "btn btn--secondary btn--sm", text: "Message", attrs: { type: "button", "data-not-simulated": "Messaging" } }),
+            el("button", { class: "icon-btn", title: "More actions", attrs: { type: "button", "aria-label": `More actions for ${name}`, "data-not-simulated": "Removing connections" } }, icon("ellipsis")),
+          ]),
+        ]));
+      }
+      loaded += page.elements.length;
+      if (loaded === 0) list.append(el("li", { class: "network__empty" }, query
+        ? [el("p", { class: "t-bold", text: "No results found" }), el("p", { class: "muted", text: "Try searching for a different name." })]
+        : [el("p", { class: "t-bold", text: "You don't have any connections yet" }), el("p", { class: "muted", text: "Connections you make will appear here." })]));
+      if (loaded < total) more.append(el("button", { class: "btn btn--tertiary", text: "Show more results", attrs: { type: "button" }, on: { click: (e) => busy(e.currentTarget, () => load(false)) } }));
+    } catch (error) {
+      if (mine !== token) return;
+      list.replaceChildren(el("li", { class: "network__empty", attrs: { role: "alert" } }, [el("p", { class: "t-bold", text: "Couldn't load your connections" }), el("p", { class: "muted", text: describe(error) }), el("button", { class: "btn btn--secondary btn--sm", text: "Retry", attrs: { type: "button" }, on: { click: () => load(true) } })]));
+    }
+  };
+
+  let timer;
+  input.addEventListener("input", () => { clearTimeout(timer); timer = setTimeout(() => { query = input.value.trim().slice(0, 200); void load(true); }, 200); });
+
+  const manage = el("nav", { class: "card network-manage", attrs: { "aria-label": "Manage my network" } }, [
+    el("h2", { class: "network-manage__title", text: "Manage my network" }),
+    el("a", { class: "network-manage__item network-manage__item--active", attrs: { href: "#/mynetwork", "aria-current": "page" } }, [icon("nav-network"), el("span", { text: "Connections" })]),
+    ...[["people", "Following & followers"], ["group", "Groups"], ["calendar", "Events"], ["nav-grid", "Pages"], ["newsletter", "Newsletters"]].map(([glyph, label]) =>
+      el("button", { class: "network-manage__item", attrs: { type: "button", "data-not-simulated": label } }, [icon(glyph), el("span", { text: label })])),
+  ]);
+
+  main.replaceChildren(el("div", { class: "network-layout" }, [
+    el("aside", {}, [manage, footer()]),
+    el("section", { class: "card network" }, [
+      header,
+      el("div", { class: "network__toolbar" }, [
+        el("span", { class: "network__sort" }, [el("span", { class: "muted", text: "Sort by: " }), el("button", { class: "network__sort-btn", attrs: { type: "button", "data-not-simulated": "Other connection sort orders" } }, [el("span", { text: "Recently added" }), icon("caret-down")])]),
+        el("div", { class: "network__search" }, [icon("search"), el("label", { class: "visually-hidden", text: "Search connections by name", attrs: { for: "network-search" } }), input]),
+      ]),
+      list, more,
+    ]),
+  ]));
+  void load(true);
+  return { refresh: () => load(true) };
+}

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

@@ -0,0 +1,62 @@
+.modal-scrim { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; background: rgba(0, 0, 0, 0.75); overflow-y: auto; }
+.modal { width: 100%; max-width: 552px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--hairline), 0 4px 16px rgba(0, 0, 0, .3); display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
+.modal__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--divider); }
+.modal__title { font-size: 20px; line-height: 1.4; font-weight: 400; color: var(--text); }
+.modal__body { padding: 16px 24px; overflow-y: auto; }
+.modal__footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--divider); }
+.modal__footer:empty { display: none; }
+.modal--confirm { max-width: 480px; margin-top: 15vh; }
+.confirm__text { font-size: 14px; color: var(--text); }
+.not-sim { display: flex; gap: 12px; }
+.not-sim__icon { color: var(--blue); }
+.not-sim p + p { margin-top: 4px; }
+
+.modal--composer { max-width: 744px; min-height: 480px; }
+.modal--composer .modal__header { border-bottom: 0; }
+.modal--composer .modal__header { padding: 16px 12px 0 16px; align-items: flex-start; }
+.composer__who { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
+.composer__who:hover:not(:disabled) { background: var(--hover); }
+.composer__who:disabled { cursor: default; }
+.composer__who-text { display: flex; flex-direction: column; }
+.composer__who-name { display: flex; align-items: center; gap: 2px; font-size: 20px; font-weight: 600; line-height: 1.4; }
+.composer__who-vis { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text); }
+.composer__who-vis .icon { width: 16px; height: 16px; }
+.composer__text { display: block; width: 100%; min-height: 240px; margin-top: 4px; padding: 0; border: 0; resize: vertical; font-size: 18px; line-height: 1.5; color: var(--text); background: transparent; }
+.composer__text:focus { outline: none; }
+.composer__text::placeholder { color: rgba(0, 0, 0, 0.6); }
+.composer__embed { margin-top: 8px; padding: 12px; border: 1px solid #e0dfdc; border-radius: 8px; }
+.composer__embed-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.composer__embed-text { color: var(--text); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.composer__link { display: grid; gap: 4px; margin-top: 12px; padding: 12px; border-radius: 8px; background: #f3f6f8; }
+.composer__error { margin-top: 12px; padding: 8px 12px; border-radius: 4px; background: #fce8e6; color: #b3080f; font-size: 14px; }
+.modal--composer .modal__footer { justify-content: space-between; border-top: 0; padding: 8px 24px 16px; }
+.composer__tools { display: flex; gap: 4px; }
+.composer__tools .icon-btn { color: var(--text-2); }
+.composer__submit-row { display: flex; align-items: center; gap: 12px; }
+.composer__counter { font-size: 14px; color: var(--text-2); }
+.composer__counter--over { color: var(--danger); font-weight: 600; }
+
+.field__label { font-size: 14px; color: var(--text-2); margin-top: 4px; }
+.field__input { width: 100%; height: 32px; padding: 4px 8px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 4px; background: #fff; font-size: 14px; }
+.field__input:focus { outline: none; box-shadow: inset 0 0 0 1px #000; }
+
+.reactors__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--divider); margin: -16px -24px 0; padding: 0 16px; overflow-x: auto; }
+.reactors__tab { display: inline-flex; align-items: center; gap: 4px; padding: 12px; border: 0; background: none; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; }
+.reactors__tab[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
+.reactors__tab:hover { background: var(--hover); }
+.reactors__list { margin: 0 -24px; }
+.reactors__row { display: flex; align-items: center; gap: 12px; padding: 8px 24px; }
+.reactors__avatar { position: relative; }
+.reactors__avatar .reaction-badge { position: absolute; right: -2px; bottom: -2px; border: 2px solid #fff; border-radius: 50%; box-sizing: content-box; }
+.reactors__meta { min-width: 0; flex: 1; border-bottom: 1px solid var(--divider); padding-bottom: 8px; }
+.reactors__name { font-weight: 600; color: var(--text); }
+.reactors__sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.modal--reactors .modal__body { min-height: 320px; }
+
+.toast { position: fixed; left: 24px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 8px; min-width: 320px; max-width: 480px; padding: 12px 8px 12px 16px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 4px 16px rgba(0, 0, 0, .2); font-size: 14px; color: var(--text); animation: pop .15s ease-out; }
+.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 8px 0 0 8px; background: #057642; }
+.toast[data-error="true"]::before { background: var(--danger); }
+.toast__icon { color: #057642; }
+.toast[data-error="true"] .toast__icon { color: var(--danger); }
+.toast__text { flex: 1; }
+.toast__action { border: 0; background: none; color: var(--blue); font-weight: 600; cursor: pointer; }

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

@@ -0,0 +1,108 @@
+// Modals, confirmation dialogs, dropdown menus and the "not simulated" panel.
+import { $, el, iconButton } from "./ui.js";
+import { icon } from "./icons.js";
+
+let openModalState = null;
+
+/** Open a modal dialog. Returns { body, footer, close }. */
+export function openModal({ title, className = "", onClose, labelledBy } = {}) {
+  closeModal();
+  const titleId = `modal-title-${Math.random().toString(36).slice(2)}`;
+  const heading = el("h2", { class: "modal__title", text: title, attrs: { id: titleId } });
+  const closeButton = iconButton("close", "Dismiss", () => closeModal());
+  const body = el("div", { class: "modal__body" });
+  const footer = el("div", { class: "modal__footer" });
+  const dialog = el("div", { class: `modal ${className}`.trim(), attrs: { role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy ?? titleId } }, [
+    el("div", { class: "modal__header" }, [heading, closeButton]), body, footer,
+  ]);
+  const scrim = el("div", { class: "modal-scrim", on: { mousedown: (event) => { if (event.target === scrim) closeModal(); } } }, dialog);
+  const previous = document.activeElement;
+  const onKey = (event) => { if (event.key === "Escape") { event.preventDefault(); closeModal(); } };
+  document.addEventListener("keydown", onKey);
+  $("#overlay-root").append(scrim);
+  openModalState = { scrim, onKey, previous, onClose };
+  queueMicrotask(() => (dialog.querySelector("textarea, input, [data-autofocus]") ?? closeButton).focus());
+  return { dialog, body, footer, heading, close: closeModal };
+}
+
+export function closeModal() {
+  if (!openModalState) return;
+  const { scrim, onKey, previous, onClose } = openModalState;
+  openModalState = null;
+  document.removeEventListener("keydown", onKey);
+  scrim.remove();
+  if (onClose) onClose();
+  if (previous && typeof previous.focus === "function" && document.contains(previous)) previous.focus();
+}
+export const modalOpen = () => openModalState !== null;
+
+/** LinkedIn-style confirmation: resolves true when the primary button is chosen. */
+export function confirmDialog({ title, message, confirmLabel, cancelLabel = "Cancel", danger = false }) {
+  return new Promise((resolve) => {
+    let answered = false;
+    const modal = openModal({ title, className: "modal--confirm", onClose: () => { if (!answered) resolve(false); } });
+    modal.body.append(el("p", { class: "confirm__text", text: message }));
+    const cancel = el("button", { class: "btn btn--muted", text: cancelLabel, attrs: { type: "button" }, on: { click: () => closeModal() } });
+    const ok = el("button", { class: `btn ${danger ? "btn--primary" : "btn--primary"}`, text: confirmLabel, attrs: { type: "button", "data-autofocus": true }, on: { click: () => { answered = true; closeModal(); resolve(true); } } });
+    modal.footer.append(cancel, ok);
+  });
+}
+
+/** Explain that a visible control belongs to a part of the product this Tool does not simulate. */
+export function notSimulated(feature) {
+  const modal = openModal({ title: feature, className: "modal--confirm" });
+  modal.body.append(
+    el("div", { class: "not-sim" }, [
+      el("span", { class: "not-sim__icon" }, icon("info")),
+      el("div", {}, [
+        el("p", { class: "t-bold", text: "Not simulated by this Tool" }),
+        el("p", { class: "muted", text: `${feature} is part of the real product but is outside this Firedrill Tool's scope. Nothing was changed and no data is shown for it.` }),
+      ]),
+    ]),
+  );
+  modal.footer.append(el("button", { class: "btn btn--primary", text: "Got it", attrs: { type: "button", "data-autofocus": true }, on: { click: () => closeModal() } }));
+}
+
+let openMenu = null;
+export function closeMenu() {
+  if (!openMenu) return;
+  openMenu.menu.remove();
+  openMenu.trigger.setAttribute("aria-expanded", "false");
+  document.removeEventListener("mousedown", openMenu.outside, true);
+  document.removeEventListener("keydown", openMenu.onKey, true);
+  openMenu = null;
+}
+
+/** Dropdown menu anchored under a trigger. items: [{icon, label, sub, onSelect, disabled}] */
+export function showMenu(trigger, items, { align = "right" } = {}) {
+  const wasOpen = openMenu?.trigger === trigger;
+  closeMenu();
+  if (wasOpen) return;
+  const menu = el("div", { class: `dropdown dropdown--${align}`, attrs: { role: "menu" } });
+  for (const item of items) {
+    const button = el("button", { class: "dropdown__item", attrs: { type: "button", role: "menuitem", disabled: item.disabled ? true : undefined }, on: { click: () => { closeMenu(); item.onSelect?.(); } } }, [
+      item.icon ? icon(item.icon) : null,
+      el("span", { class: "dropdown__text" }, [el("span", { class: "dropdown__label", text: item.label }), item.sub ? el("span", { class: "dropdown__sub", text: item.sub }) : null]),
+    ]);
+    menu.append(button);
+  }
+  trigger.parentElement.style.position = trigger.parentElement.style.position || "relative";
+  trigger.after(menu);
+  trigger.setAttribute("aria-expanded", "true");
+  const outside = (event) => { if (!menu.contains(event.target) && event.target !== trigger && !trigger.contains(event.target)) closeMenu(); };
+  const onKey = (event) => { if (event.key === "Escape") { closeMenu(); trigger.focus(); } };
+  document.addEventListener("mousedown", outside, true);
+  document.addEventListener("keydown", onKey, true);
+  openMenu = { menu, trigger, outside, onKey };
+  menu.querySelector("button:not([disabled])")?.focus();
+}
+
+/** Delegate every [data-not-simulated] control in the document to the panel. */
+export function wireNotSimulated() {
+  document.addEventListener("click", (event) => {
+    const target = event.target instanceof Element ? event.target.closest("[data-not-simulated]") : null;
+    if (!target) return;
+    event.preventDefault();
+    notSimulated(target.getAttribute("data-not-simulated"));
+  });
+}

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

@@ -0,0 +1,78 @@
+.profile-layout { display: grid; grid-template-columns: minmax(0, 804px) 300px; gap: 24px; justify-content: center; align-items: start; }
+.profile-main > * + *, .company-main > * + * { margin-top: 8px; }
+.profile-aside > * + * { margin-top: 8px; }
+.aside-card { padding: 16px 24px; }
+.aside-card__title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
+
+.profile-top { position: relative; overflow: hidden; }
+.profile-top__loading { display: flex; justify-content: center; padding: 64px; }
+.profile-top__cover { height: 201px; background: linear-gradient(120deg, #a0b4b7 0%, #c8d4d6 45%, #e6ecec 100%); }
+.profile-top__cover--company { height: 170px; background: linear-gradient(120deg, #9db3c8 0%, #c7d6e4 55%, #e3ebf2 100%); }
+.profile-top__body { position: relative; padding: 0 24px 24px; }
+.profile-top__avatar { margin-top: -112px; margin-bottom: 12px; }
+.profile-top__avatar .avatar { box-shadow: none; }
+.profile-top__edit { position: absolute; top: 12px; right: 16px; }
+.profile-top__name { font-size: 24px; line-height: 1.25; font-weight: 600; }
+.profile-top__headline { margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--text); }
+.profile-top__meta { margin-top: 8px; font-size: 14px; color: var(--text-2); }
+.profile-top__contact { padding: 0; border: 0; background: none; color: var(--blue); font-weight: 600; cursor: pointer; }
+.profile-top__contact:hover { text-decoration: underline; }
+.profile-top__connections { margin-top: 4px; font-weight: 600; }
+.profile-top__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.contact__title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
+.contact__row { display: flex; gap: 16px; margin-bottom: 16px; }
+.company-note { padding: 12px 24px; border-top: 1px solid var(--divider); color: var(--text-2); }
+
+.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 24px 0; }
+.section-head__title { font-size: 20px; line-height: 1.4; font-weight: 600; }
+.section-head__sub { display: block; font-size: 14px; font-weight: 600; }
+.profile-activity { padding-bottom: 8px; }
+.profile-activity__empty { padding: 16px 24px; color: var(--text-2); }
+.chips { display: flex; gap: 8px; padding: 12px 24px 4px; }
+.chip { height: 32px; padding: 0 12px; border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); background: #fff; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.chip:hover { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .75); background: var(--hover); }
+.chip[aria-pressed="true"] { background: var(--green); color: #fff; box-shadow: none; }
+.activity-list { padding: 0 24px; }
+.activity-list > .spinner { margin: 16px auto; display: block; }
+.activity-row { padding: 12px 0; border-bottom: 1px solid var(--divider); }
+.activity-row__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
+.activity-row__text { margin-top: 4px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.activity-row__actions { margin-top: 8px; }
+.activity-more { display: flex; justify-content: center; padding: 8px; }
+.badge { padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 600; }
+.badge--draft { background: #fcf0d2; color: #915907; }
+
+.company-about { padding: 16px 24px; }
+.company-about .section-head__title { margin-bottom: 8px; }
+.company-about__text { white-space: pre-wrap; margin-bottom: 12px; }
+.company-about__facts { margin: 0; }
+.company-about__facts dt { font-weight: 600; margin-top: 12px; }
+.company-about__facts dd { margin: 2px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
+.company-admins__row { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
+
+.network-layout { display: grid; grid-template-columns: 300px minmax(0, 804px); gap: 24px; justify-content: center; align-items: start; }
+.network-manage { padding: 12px 0; }
+.network-manage__title { padding: 0 16px 8px; font-size: 16px; font-weight: 600; }
+.network-manage__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: none; font-size: 16px; font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none !important; }
+.network-manage__item:hover { background: var(--hover); color: var(--text); }
+.network-manage__item--active { color: var(--green); box-shadow: inset 2px 0 0 var(--green); }
+.network { padding-bottom: 8px; }
+.network__count { padding: 16px 24px 8px; font-size: 20px; font-weight: 400; }
+.network__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 24px 8px; border-bottom: 1px solid var(--divider); }
+.network__sort { display: flex; align-items: center; font-size: 14px; }
+.network__sort-btn { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.network__sort-btn .icon { width: 16px; height: 16px; }
+.network__search { position: relative; display: flex; align-items: center; }
+.network__search > .icon { position: absolute; left: 8px; width: 16px; height: 16px; color: var(--text-2); }
+.network__search-input { width: 240px; height: 32px; padding: 0 8px 0 32px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 4px; }
+.network__row { display: flex; align-items: center; gap: 16px; margin: 0 24px; padding: 16px 0; border-bottom: 1px solid var(--divider); }
+.network__meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+.network__name { font-size: 16px; font-weight: 600; color: var(--text); }
+.network__name:hover { color: var(--blue); }
+.network__headline { font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.network__date { margin-top: 4px; font-size: 12px; color: var(--text-2); }
+.network__actions { display: flex; align-items: center; gap: 4px; }
+.network__empty, .network__loading { padding: 32px 24px; text-align: center; }
+.network__more { display: flex; justify-content: center; padding: 8px; }
+
+@media (max-width: 991px) { .profile-layout, .network-layout { grid-template-columns: minmax(0, 1fr); } .profile-aside { display: none; } }

package/firedrill/tools/linkedin/app/site/post-actions.js

@@ -0,0 +1,83 @@
+// Like (with the six-reaction picker), Comment, Repost and Send buttons of a post card.
+import { el, call, newKey, describe, toast } from "./ui.js";
+import { icon } from "./icons.js";
+import { REACTIONS, REACTION_BY_TYPE, reactionBadge } from "./reactions.js";
+import { session } from "./store.js";
+import { toggleComments } from "./comments.js";
+import { openComposer } from "./composer.js";
+import { notSimulated } from "./overlay.js";
+
+export function renderActions(host, entry, state, { paint, commentsHost, ctx }) {
+  const { post } = entry;
+  const likeWrap = el("div", { class: "social-actions__like" });
+  const likeButton = el("button", { class: "social-action", attrs: { type: "button", "aria-pressed": "false" } });
+  let picker = null;
+  let hoverTimer;
+  let pendingReaction = false;
+
+  const paintLike = () => {
+    const reaction = state.viewerReaction ? REACTION_BY_TYPE.get(state.viewerReaction) : null;
+    likeButton.replaceChildren(reaction && reaction.type !== "LIKE" ? reactionBadge(reaction.type, 20) : icon("like"), el("span", { text: reaction ? reaction.label : "Like" }));
+    likeButton.setAttribute("aria-pressed", String(Boolean(reaction)));
+    likeButton.setAttribute("aria-label", reaction ? `Undo ${reaction.label} reaction` : "React Like");
+    if (reaction) likeButton.dataset.reaction = reaction.type; else delete likeButton.dataset.reaction;
+  };
+
+  const react = async (type) => {
+    if (pendingReaction) return;
+    pendingReaction = true;
+    closePicker();
+    const actor = session.viewer.personUrn;
+    const previous = state.viewerReaction;
+    try {
+      if (type === null) await call("reactions.delete", { actor, entity: post.id }, newKey());
+      else await call("reactions.create", { actor, root: post.id, reactionType: type }, newKey());
+      state.viewerReaction = type;
+      paintLike();
+      await host.closest(".feed-post")?.refreshSocial?.();
+    } catch (error) {
+      state.viewerReaction = previous;
+      paintLike();
+      toast(describe(error), { error: true });
+    } finally {
+      pendingReaction = false;
+    }
+  };
+
+  const openPicker = () => {
+    if (picker) return;
+    picker = el("div", { class: "reaction-picker", attrs: { role: "toolbar", "aria-label": "Reactions" } }, REACTIONS.map((reaction) =>
+      el("button", { class: "reaction-picker__item", attrs: { type: "button", "aria-label": reaction.label }, on: { click: () => react(reaction.type) } }, [
+        reactionBadge(reaction.type, 36), el("span", { class: "reaction-picker__tip", text: reaction.label, attrs: { "aria-hidden": "true" } }),
+      ])));
+    picker.addEventListener("mouseenter", () => clearTimeout(hoverTimer));
+    picker.addEventListener("mouseleave", () => { hoverTimer = setTimeout(closePicker, 300); });
+    picker.addEventListener("keydown", (event) => { if (event.key === "Escape") { closePicker(); likeButton.focus(); } });
+    likeWrap.append(picker);
+  };
+  const closePicker = () => { picker?.remove(); picker = null; };
+
+  likeButton.addEventListener("click", () => react(state.viewerReaction ? null : "LIKE"));
+  likeButton.addEventListener("mouseenter", () => { clearTimeout(hoverTimer); hoverTimer = setTimeout(openPicker, 500); });
+  likeButton.addEventListener("mouseleave", () => { clearTimeout(hoverTimer); hoverTimer = setTimeout(closePicker, 400); });
+  likeButton.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowUp" || (event.key === "Enter" && event.shiftKey)) { event.preventDefault(); openPicker(); picker.querySelector("button").focus(); }
+  });
+  paintLike();
+  likeWrap.append(likeButton);
+
+  const commentButton = el("button", { class: "social-action", attrs: { type: "button", "aria-label": "Comment" }, on: {
+    click: () => toggleComments(commentsHost, entry, { focus: true, onChanged: () => host.closest(".feed-post")?.refreshSocial?.() }),
+  } }, [icon("comment"), el("span", { text: "Comment" })]);
+
+  const reshareDisabled = post.isReshareDisabledByAuthor || post.visibility !== "PUBLIC";
+  const repostTarget = entry.reshareOf && !post.commentary ? entry.reshareOf : entry;
+  const repostButton = el("button", { class: "social-action", title: reshareDisabled ? "The author has disabled reposting for this post" : "Repost", attrs: { type: "button", "aria-label": "Repost", disabled: reshareDisabled ? true : undefined }, on: {
+    click: () => openComposer({ repostOf: repostTarget, onDone: ctx.onReload }),
+  } }, [icon("repost"), el("span", { text: "Repost" })]);
+
+  const sendButton = el("button", { class: "social-action", attrs: { type: "button", "aria-label": "Send in a private message" }, on: { click: () => notSimulated("Sending posts in messages") } }, [icon("send"), el("span", { text: "Send" })]);
+
+  host.append(likeWrap, el("div", {}, commentButton), el("div", {}, repostButton), el("div", {}, sendButton));
+  void paint;
+}

package/firedrill/tools/linkedin/app/site/post-menu.js

@@ -0,0 +1,72 @@
+// The "…" control menu on a post: edit, delete, comments on/off, copy link, and not-simulated entries.
+import { call, newKey, describe, toast } from "./ui.js";
+import { confirmDialog, notSimulated } from "./overlay.js";
+import { openComposer } from "./composer.js";
+import { canManage } from "./post.js";
+
+export function postMenu(entry, ctx) {
+  const { post } = entry;
+  const items = [
+    { icon: "bookmark", label: "Save", sub: "Save for later", onSelect: () => notSimulated("Saved items") },
+    { icon: "link", label: "Copy link to post", onSelect: () => copyLink(post.id) },
+  ];
+  if (canManage(post.author)) {
+    items.push(
+      { icon: "pencil", label: "Edit post", onSelect: () => openComposer({ edit: entry, onDone: ctx.onReload }) },
+      { icon: "trash", label: "Delete post", onSelect: () => deletePost(post, ctx) },
+    );
+    const closed = entry.social.commentsState === "CLOSED";
+    if (post.author === entry.actor.urn) {
+      items.push({
+        icon: closed ? "comment" : "comment-off",
+        label: closed ? "Turn on commenting" : "Turn off commenting",
+        sub: closed ? "Let people comment on this post" : "Existing comments will be deleted",
+        onSelect: () => setCommentsState(entry, closed ? "OPEN" : "CLOSED", ctx),
+      });
+    }
+  } else {
+    items.push({ icon: "close", label: "Not interested", sub: "See fewer posts like this", onSelect: () => notSimulated("Feed preferences") });
+  }
+  return items;
+}
+
+async function copyLink(urn) {
+  const text = `https://www.linkedin.com/feed/update/${urn}/`;
+  try {
+    await navigator.clipboard.writeText(text);
+    toast("Link copied to clipboard.");
+  } catch {
+    toast(`Copy this link: ${text}`);
+  }
+}
+
+async function deletePost(post, ctx) {
+  const ok = await confirmDialog({ title: "Delete post?", message: "Are you sure you want to permanently remove this post from LinkedIn?", confirmLabel: "Delete", danger: true });
+  if (!ok) return;
+  try {
+    await call("posts.delete", { postUrn: post.id }, newKey());
+    toast("Post deleted.");
+    await ctx.onReload();
+  } catch (error) {
+    toast(describe(error), { error: true });
+  }
+}
+
+async function setCommentsState(entry, next, ctx) {
+  if (next === "CLOSED") {
+    const count = entry.social.commentSummary?.count ?? 0;
+    const ok = await confirmDialog({
+      title: "Turn off commenting?",
+      message: count > 0 ? `This will delete the ${count} existing comment${count === 1 ? "" : "s"} on this post. People won't be able to comment.` : "People won't be able to comment on this post.",
+      confirmLabel: "Turn off",
+    });
+    if (!ok) return;
+  }
+  try {
+    await call("social_metadata.set_comments_state", { entity: entry.post.id, actor: entry.post.author, commentsState: next }, newKey());
+    toast(next === "CLOSED" ? "Commenting turned off." : "Commenting turned on.");
+    await ctx.onReload();
+  } catch (error) {
+    toast(describe(error), { error: true });
+  }
+}

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

@@ -0,0 +1,82 @@
+.feed-post { position: relative; padding-top: 12px; }
+.feed-post__controls { position: absolute; top: 4px; right: 8px; display: flex; }
+.feed-post__controls .icon-btn { width: 32px; height: 32px; }
+.feed-post__controls .icon { width: 24px; height: 24px; }
+
+.post-actor { display: flex; gap: 8px; padding: 0 16px; margin-right: 72px; margin-bottom: 8px; }
+.post-actor__avatar { flex: none; }
+.post-actor__meta { display: flex; flex-direction: column; min-width: 0; }
+.post-actor__name-line { font-size: 14px; line-height: 20px; }
+.post-actor__name { font-weight: 600; color: var(--text); }
+.post-actor__name:hover { color: var(--blue); text-decoration: underline; }
+.post-actor__degree { color: var(--text-2); font-weight: 400; }
+.post-actor__headline { font-size: 12px; line-height: 16px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.post-actor__time { display: block; white-space: pre; font-size: 12px; line-height: 16px; color: var(--text-2); }
+.post-actor__vis { display: inline-block; vertical-align: -3px; }
+.post-actor__vis .icon { width: 16px; height: 16px; }
+.post-actor--compact { padding: 0; margin: 0 0 8px; }
+
+.post-text { position: relative; padding: 0 16px; margin-bottom: 8px; font-size: 14px; line-height: 20px; color: var(--text); }
+.post-text__inner { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
+.post-text--expanded .post-text__inner { display: block; -webkit-line-clamp: unset; }
+.post-text__more { position: absolute; right: 16px; bottom: 0; padding: 0 0 0 24px; border: 0; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 24px); color: var(--text-2); font-size: 14px; line-height: 20px; cursor: pointer; }
+.post-text__more:hover { color: var(--blue); text-decoration: underline; }
+.hashtag, .mention { font-weight: 600; color: var(--blue); }
+
+.post-article { display: flex; align-items: stretch; margin: 4px 0 0; background: #eef3f8; color: var(--text); text-decoration: none !important; }
+.post-article__art { display: flex; align-items: center; justify-content: center; flex: none; width: 138px; min-height: 72px; background: #dce6f1; color: #56687a; }
+.post-article__meta { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; min-width: 0; }
+.post-article__title { font-weight: 600; font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.post-article__source { font-size: 12px; color: var(--text-2); }
+.post-article:hover .post-article__title { color: var(--blue); text-decoration: underline; }
+
+.post-reshare { margin: 4px 16px 8px; padding: 12px 0 4px; border: 1px solid #e0dfdc; border-radius: 8px; }
+.post-reshare .post-actor { padding: 0 12px; }
+.post-reshare .post-text { padding: 0 12px; }
+.post-reshare .post-article { margin: 0 0 8px; }
+.post-reshare--gone { padding: 16px; color: var(--text-2); }
+
+.social-counts { display: flex; align-items: center; justify-content: space-between; margin: 0 16px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 12px; color: var(--text-2); }
+.social-counts__reactions { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--text-2); cursor: pointer; }
+.social-counts__reactions:hover { color: var(--blue); text-decoration: underline; }
+.social-counts__badges { display: inline-flex; }
+.social-counts__badges .reaction-badge { margin-right: -4px; border: 1px solid #fff; border-radius: 50%; box-sizing: content-box; }
+.social-counts__badges .reaction-badge:last-child { margin-right: 2px; }
+.social-counts__right { margin-left: auto; display: inline-flex; gap: 4px; }
+.social-counts__link { padding: 0; border: 0; background: none; font-size: 12px; color: var(--text-2); cursor: pointer; }
+.social-counts__link:hover { color: var(--blue); text-decoration: underline; }
+.social-counts__link--static:hover { color: var(--text-2); text-decoration: none; cursor: default; }
+
+.social-actions { display: flex; justify-content: space-around; padding: 4px 8px; }
+.social-actions > * { flex: 1; display: flex; justify-content: center; position: relative; }
+.social-action { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 48px; padding: 10px 8px; border: 0; border-radius: 4px; background: none; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.social-action:hover { background: var(--hover); color: var(--text); }
+.social-action:disabled { color: rgba(0, 0, 0, 0.3); cursor: not-allowed; background: none; }
+.social-action .icon { width: 20px; height: 20px; }
+.social-action .icon--repost { transform: scale(.85); }
+.social-action .reaction-badge { width: 20px; height: 20px; }
+.social-action[data-reaction="LIKE"] { color: #378fe9; }
+.social-action[data-reaction="PRAISE"] { color: #44712e; }
+.social-action[data-reaction="APPRECIATION"] { color: #715e86; }
+.social-action[data-reaction="EMPATHY"] { color: #b24020; }
+.social-action[data-reaction="INTEREST"] { color: #915907; }
+.social-action[data-reaction="ENTERTAINMENT"] { color: #1a707e; }
+.social-action[data-reaction="LIKE"] .icon--like { transform: scaleX(-1) rotate(0deg); }
+
+.reaction-picker { position: absolute; bottom: 46px; left: 0; display: flex; gap: 2px; padding: 4px 6px; background: #fff; border-radius: 24px; box-shadow: 0 0 0 1px var(--hairline), 0 4px 12px rgba(0, 0, 0, .15); z-index: 10; animation: pop .12s ease-out; }
+.reaction-picker__item { position: relative; display: flex; padding: 2px; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform .1s; }
+.reaction-picker__item:hover, .reaction-picker__item:focus-visible { transform: translateY(-6px) scale(1.25); }
+.reaction-picker__item .reaction-badge { width: 36px; height: 36px; }
+.reaction-picker__tip { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 12px; background: #1d2226; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; }
+.reaction-picker__item:hover .reaction-picker__tip, .reaction-picker__item:focus-visible .reaction-picker__tip { opacity: 1; }
+@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
+
+.dropdown { position: absolute; top: 36px; min-width: 264px; padding: 8px 0; background: #fff; border-radius: 8px 0 8px 8px; box-shadow: 0 0 0 1px var(--hairline), 0 4px 12px rgba(0, 0, 0, .15); z-index: 15; }
+.dropdown--right { right: 0; }
+.dropdown--left { left: 0; border-radius: 0 8px 8px 8px; }
+.dropdown__item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; color: var(--text-2); cursor: pointer; }
+.dropdown__item:hover, .dropdown__item:focus-visible { background: var(--hover); color: var(--text); outline: none; }
+.dropdown__item:disabled { opacity: .5; cursor: not-allowed; }
+.dropdown__text { display: flex; flex-direction: column; }
+.dropdown__label { font-size: 14px; font-weight: 600; color: var(--text); }
+.dropdown__sub { font-size: 12px; color: var(--text-2); }