web/src/inbox/InboxPage.tsx

// ---------------------------------------------------------------------------
// inbox/InboxPage.tsx — WAVE 32 · T20 (owner item 16, ruling R7, contract C3).
//
// Owner, item 16: *"Alerts becomes an Inbox that looks like email."* R7: it is a
// FULL MODULE and the pop-up pane is deleted — the bell navigates here, there is
// no dropdown.
//
// So this is a LIST + a READING PANE, which is the only structural thing an email
// client actually is. The pane it replaces was a 520px drawer with one column, and
// that shape is why the feature never read like mail: a drawer has no room for a
// subject line above a body, so subject and body were one field, and a
// notification could only ever be a sentence with no sender.
//
// ⛔ NOT A REGISTRY MODULE — a CHROME route, like Home and Connectors. Every
// provisioned tenant carries a restricted `modules` list (`['analyst','automation']`
// on all three), and a registry key outside it is silently OMITTED from the rail.
// Registering Inbox would make it invisible in every tenant while every gate stayed
// green. `alerts` was already chrome; Inbox inherits the right shape. The MOUNT is
// A's (`shell/Shell.tsx`, W32-T04); this file only exports the surface.
//
// ⚠ STYLING REUSES THE `.alerts-*` RULES ON PURPOSE. They are the same feature's
// classes, they already exist, and `src/index.css` is in no lane's fence this wave
// (D-186's shape, second occurrence). Page-frame geometry that has no class yet is
// inline rather than invented: a class name with no rule behind it looks identical
// to a rule that failed to load.
// ---------------------------------------------------------------------------

import { useCallback, useEffect, useMemo, useState } from "react";
import {
  deleteAlert,
  fetchAlerts,
  fetchInbox,
  markRead,
  runAlert,
} from "../alerts/alertsApi";
import {
  NOTIF_KIND_AUTOMATION,
  applyRead,
  canMarkAll,
  paneView,
  stampText,
} from "../alerts/alertsModel";
import type { Alert, Inbox, Notification, NotificationTarget } from "../alerts/alertsModel";
import type { InboxSections } from "./inboxModel";
import {
  UNOPENABLE_NOTE,
  canOpen,
  inboxSections,
  kindLabel,
  previewOf,
  subjectOf,
  targetOf,
} from "./inboxModel";
import { BellIcon } from "../ui/icons";
// ⭐ WAVE 27 C5, CARRIED FORWARD — the ONE generated loop mark, consumed rather than redrawn.
// ⛔ It is here because W32-T21 DELETES `AlertsPane`, and a rename ticket must not quietly drop a
// shipped visual: an automation row wore this mark, and losing it in the move would be a silent
// regression behind a green gate. ⛔ NOT A STATUS DOT (W26 R14 deleted the whole status
// vocabulary from the automation module) and never a hand-copied path — `shell/Brand.tsx`'s own
// header records a redrawn copy silently painting LAST WAVE'S BRAND while a comment claimed parity.
import { Mark } from "../shell/Brand";

/** The page frame. `.shell-home`'s geometry, without borrowing Home's class name for a

 *  surface that is not Home — the rule is six declarations and copying them is cheaper than

 *  a shared class two modules would then have to agree about. */
const PAGE: React.CSSProperties = {
  height: "100%",
  overflow: "hidden",
  padding: "34px 44px 28px",
  boxSizing: "border-box",
  background: "var(--lp-wash)",
  display: "flex",
  flexDirection: "column",
};

const SPLIT: React.CSSProperties = {
  flex: "1 1 auto",
  minHeight: 0,
  display: "flex",
  gap: 20,
  alignItems: "stretch",
};

const CARD: React.CSSProperties = {
  background: "var(--lp-surface)",
  border: "1px solid var(--lp-line)",
  borderRadius: "var(--lp-r-lg)",
  overflow: "auto",
  minHeight: 0,
};

export default function InboxPage({

  onOpenTarget,

  onInbox,

  onToast,

  seed,

}: {

  /**

   * ⛔ REQUIRED, NOT OPTIONAL, and this is the lesson written into a type rather than a comment.

   * An optional callback the frame forgot to pass degrades to "clicking an Inbox item does

   * nothing" — indistinguishable from "the feature was never built", and red in no gate. A

   * required prop fails `tsc` the moment it is unmounted. `AlertsPane` carried the same rule on

   * `onOpenAutomation` and `seed`; C3 carries it forward as the wave's cross-fence contract.

   *

   * The FRAME owns routing — it holds the router and knows which module surfaces exist. This

   * module owns the QUESTION (`inboxModel.routeForTarget` turns a wire target into a surface +

   * what it needs) so the frame's dispatcher is a switch over two literals rather than a second

   * copy of the topic→route table.

   */

  onOpenTarget: (t: NotificationTarget) => void;

  /** Hand the freshly-read inbox back so the rail badge and this module agree. */

  onInbox: (inbox: Inbox) => void;

  onToast: (message: string) => void;

  /**

   * ⛔ REQUIRED, for the reason `onOpenTarget` is (W31-T23's shipped bug, kept as a type). The

   * frame has ALREADY fetched this — it is what paints the rail badge the user just clicked — so

   * the module opens knowing the account's count, and "Mark all read" is live from the first

   * frame and stays live if this module's own read fails.

   */

  seed: Inbox;

}) {

  const [inbox, setInbox] = useState<Inbox>(seed);

  const [alerts, setAlerts] = useState<Alert[]>([]);

  const [error, setError] = useState("");

  const [busy, setBusy] = useState(false);

  const [selectedId, setSelectedId] = useState("");

  /** ⛔ THE STATE THE PANE DID NOT HAVE (W31-T23). Without it "no rows yet" and "no rows, ever"

   *  are the same value, so an in-flight read — 3,280 ms live on tenant #0 — printed a confident

   *  "Nothing new." over an inbox nobody had looked at yet. */

  const [phase, setPhase] = useState<"pending" | "ready" | "error">("pending");



  const publish = useCallback(

    (next: Inbox) => {

      setInbox(next);

      onInbox(next);

    },

    [onInbox]

  );



  const load = useCallback(async () => {

    const [inboxRes, alertRes] = await Promise.all([fetchInbox(), fetchAlerts()]);

    if (inboxRes.ok) {

      publish(inboxRes.value);

      setError("");

      setPhase("ready");

    } else {

      // ⚠ THE SEEDED INBOX SURVIVES A FAILED READ. Blanking it would take the count — and with it

      // the Mark-all control — away from a reader who can see the badge. The failure is REPORTED

      // and nothing the frame already knew is discarded.

      setError(inboxRes.message);

      setPhase("error");

    }

    if (alertRes.ok) setAlerts(alertRes.value);

  }, [publish]);



  useEffect(() => {

    void load();

  }, [load]);



  const sections = useMemo(() => inboxSections(inbox.items), [inbox.items]);

  const rowCount = sections.unread.length + sections.read.length;

  const view = paneView(phase, rowCount, seed.unread);

  const selected = useMemo(

    () => inbox.items.find((n) => n.id === selectedId) ?? null,

    [inbox.items, selectedId]

  );



  const setRead = useCallback(

    (n: Notification, read: boolean) => {

      if (n.read === read) return;

      // Optimistic, with the server's own convention (`ids`, `read`) sent explicitly — and

      // reverted OUT LOUD if refused, because a badge that silently disagrees with the list is

      // how a reader learns to stop trusting it.

      const before = inbox;

      publish(applyRead(inbox, [n.id], read));

      void markRead([n.id], read).then((r) => {

        if (!r.ok) {

          publish(before);

          onToast(r.message);

        }

      });

    },

    [inbox, publish, onToast]

  );

  const markAll = useCallback(() => {
    const before = inbox;
    // `applyRead(…, null, true)` zeroes the count from the ITEMS, which is right here because the
    // request below clears the whole ACCOUNT (`ids: null`) — 0 is what the server is about to
    // make true. The revert on failure is what keeps it honest.
    publish({ ...applyRead(inbox, null, true), unread: 0 });
    void markRead(null, true).then((r) => {
      if (!r.ok) {
        publish(before);
        onToast(r.message);
      }
    });
  }, [inbox, publish, onToast]);

  /**

   * ⭐ SELECTING IS READING. Opening a mail item marks it read — that is what the metaphor

   * promises, and a reader who has to press a second button to clear a badge they have plainly

   * seen concludes the badge is decorative.

   *

   * ⛔ IT DOES NOT NAVIGATE. Item 19 (T29) is the separate act: the reading pane offers "Open …",

   * which is where `onOpenTarget` fires. The old pane conflated them, so there was no way to READ

   * a notification without leaving the surface you were reading it on.

   */
  const select = useCallback(
    (n: Notification) => {
      setSelectedId(n.id);
      setRead(n, true);
    },
    [setRead]
  );

  const open = useCallback(
    (n: Notification) => {
      const t = targetOf(n);
      if (!t) return onToast(UNOPENABLE_NOTE);
      setRead(n, true);
      onOpenTarget(t);
    },
    [onOpenTarget, onToast, setRead]
  );

  const runAlertNow = useCallback(
    (a: Alert) => {
      setBusy(true);
      void runAlert(a.id).then((r) => {
        setBusy(false);
        if (!r.ok) return onToast(r.message);
        const v = r.value as { new?: unknown[]; skipped?: string };
        onToast(
          v?.skipped
            ? `Skipped: ${v.skipped}`
            : `${(v?.new ?? []).length} new since the last check.`
        );
        void load();
      });
    },
    [load, onToast]
  );

  const deleteAlertNow = useCallback(
    (a: Alert) => {
      setBusy(true);
      void deleteAlert(a.id).then((r) => {
        setBusy(false);
        if (!r.ok) return onToast(r.message);
        setAlerts((cur) => cur.filter((x) => x.id !== a.id));
        void load();
      });
    },
    [load, onToast]
  );

  return (
    <InboxSurface

      alerts={alerts}

      error={error}

      busy={busy}

      view={view}

      sections={sections}

      selected={selected}

      selectedId={selectedId}

      onSelect={select}

      onOpen={open}

      onSetRead={setRead}

      onMarkAll={markAll}

      onRunAlert={runAlertNow}

      onDeleteAlert={deleteAlertNow}

      canMarkAllNow={canMarkAll(inbox.unread, busy)}

    />
  );
}

/**

 * ⭐ THE SURFACE, WITH NO FETCH IN IT — every value arrives as a prop.

 *

 * ⛔ SPLIT FOR ONE REASON, AND IT IS THE `done-when`: *"observed by a person"*. `InboxPage` reads

 * on mount, and `renderToStaticMarkup` never runs an effect — so a shot of the page can only ever

 * photograph its spinner. `_inbox_shot.tsx` renders THIS with rows that came through the real

 * server derivation (`routes_alerts.inbox_view`), so what a reviewer looks at is the shipped

 * markup over the shipped payload rather than a picture of a fixture. It is the same division

 * `connectors/_conn_shot.tsx` already relies on.

 */
export function InboxSurface({

  alerts,

  error,

  busy,

  view,

  sections,

  selected,

  selectedId,

  onSelect,

  onOpen,

  onSetRead,

  onMarkAll,

  onRunAlert,

  onDeleteAlert,

  canMarkAllNow,

}: {

  alerts: Alert[];

  error: string;

  busy: boolean;

  view: ReturnType<typeof paneView>;

  sections: InboxSections;

  selected: Notification | null;

  selectedId: string;

  onSelect: (n: Notification) => void;

  onOpen: (n: Notification) => void;

  onSetRead: (n: Notification, read: boolean) => void;

  onMarkAll: () => void;

  onRunAlert: (a: Alert) => void;

  onDeleteAlert: (a: Alert) => void;

  canMarkAllNow: boolean;

}) {
  const row = (n: Notification) => {
    const preview = previewOf(n);
    return (
      <li key={n.id} className={"alerts-row" + (n.read ? "" : " is-unread")}>

        <button

          type="button"

          className="alerts-row-main"

          aria-current={n.id === selectedId ? "true" : undefined}

          style={n.id === selectedId ? { background: "var(--lp-wash)" } : undefined}

          onClick={() => onSelect(n)}

          title={subjectOf(n)}

        >

          {/* THE SUBJECT, on its own line and first — the header this feature never had. */}

          <span className="alerts-row-label">

            {n.kind === NOTIF_KIND_AUTOMATION ? (

              // ⚠ INSIDE the label span, not beside it. `.alerts-row-main` is a flex COLUMN, so a

              // sibling here becomes a third ROW stacked above the text

              // ([[wrong-parent-not-broken-control]]); inline, it sits on the line it annotates

              // and rides the same ellipsis.

              <span className="alerts-row-mark">

                <Mark size={12} />

              </span>

            ) : null}

            {subjectOf(n)}

          </span>

          <span className="alerts-row-meta">

            {kindLabel(n.kind)}

            {preview ? ` · ${preview}` : ""}

            {" · "}

            {/* Readable, never re-derived: `stampText` is string surgery over the server's own

                UTC-with-offset stamp (D-18). Parsing it into a browser Date is how a tenant a

                day ahead gets told an event happened tomorrow. */}

            {stampText(n.at)}

          </span>

        </button>

        <button

          type="button"

          className="alerts-row-toggle"

          aria-label={n.read ? `Mark ${subjectOf(n)} unread` : `Mark ${subjectOf(n)} read`}

          title={n.read ? "Mark unread" : "Mark read"}

          onClick={() => onSetRead(n, !n.read)}

        >

          {/* The ACTION, not the state: "Read" beside an unread row reads as a label for the

              row itself. */}

          {n.read ? "Mark unread" : "Mark read"}

        </button>

      </li>
    );
  };

  return (
    <div className="inbox-page" style={PAGE}>

      <header className="alerts-head" style={{ padding: "0 0 14px" }}>

        <h2>

          <BellIcon size={18} className="alerts-bell" /> Inbox

        </h2>

        <button

          type="button"

          className="alerts-markall"

          // ⭐⭐ W31-T23 (R6), KEPT: the question is about the ACCOUNT, so it is asked of the

          // count the frame already holds. `inbox.unread === 0` was this surface's OWN state —

          // zero until its fetch landed and zero for ever if it failed — so the one verb that

          // clears the badge was disabled in exactly the two situations the owner reported.

          disabled={!canMarkAllNow}

          onClick={onMarkAll}

        >

          Mark all read

        </button>

      </header>



      {error ? <p className="shell-newdb-err">{error}</p> : null}



      <div style={SPLIT}>

        <div style={{ ...CARD, flex: "1 1 42%", padding: "4px 16px 16px" }}>

          {view === "pending" ? (

            /* R6: the mark, never the word. `verify_icons` asserts this product ships no load

               TEXT — and the sentence that used to occupy this space was worse than a word, it

               was an ANSWER ("Nothing new.") to a question nobody had asked yet. */

            <p className="alerts-empty" aria-busy="true">

              <span className="lp-spin" role="status" aria-label="Loading the inbox" />

            </p>

          ) : view === "error" ? (

            <p className="alerts-empty">

              These notifications could not be loaded. The count beside the bell is still this

              account&rsquo;s — &ldquo;Mark all read&rdquo; above clears it.

            </p>

          ) : view === "empty" ? (

            <p className="alerts-empty">

              Nothing new. An alert watches ONE view and tells you when a record it had never

              matched arrives in it — make one from a view&rsquo;s menu.

            </p>

          ) : (

            <>

              {/* ⛔ THE UNREAD HEADING RENDERS AT ZERO TOO. Hiding it would make "I have read

                  everything" and "the unread half failed to render" the same picture. */}

              <h3 className="home-section-title" style={{ margin: "14px 0 6px" }}>

                Unread{sections.unread.length ? ` (${sections.unread.length})` : ""}

              </h3>

              {sections.unread.length ? (

                <ul className="alerts-list">{sections.unread.map(row)}</ul>

              ) : (

                <p className="alerts-empty" style={{ margin: "4px 0 10px" }}>

                  Nothing unread.

                </p>

              )}

              {sections.read.length ? (

                <>

                  <h3 className="home-section-title" style={{ margin: "18px 0 6px" }}>

                    Earlier

                  </h3>

                  <ul className="alerts-list">{sections.read.map(row)}</ul>

                </>

              ) : null}

            </>

          )}



          {alerts.length > 0 ? (

            <section className="alerts-watching">

              <h3 className="home-section-title">Watching</h3>

              {alerts.map((a) => (

                <div key={a.id} className="alerts-watch-row">

                  <span className="alerts-watch-label">{a.label}</span>

                  <span className="alerts-watch-meta">

                    {/* The remembered set's SIZE, which is what "no news" means here: an alert

                        with 40 matches and nothing new is working. */}

                    {a.matched.toLocaleString()} matched

                    {a.lastError ? ` · ${a.lastError}` : ""}

                  </span>

                  <button

                    type="button"

                    className="alerts-watch-run"

                    disabled={busy}

                    onClick={() => onRunAlert(a)}

                  >

                    Check now

                  </button>

                  <button

                    type="button"

                    className="alerts-watch-del"

                    disabled={busy}

                    aria-label={`Delete the alert ${a.label}`}

                    onClick={() => onDeleteAlert(a)}

                  >

                    Delete

                  </button>

                </div>

              ))}

            </section>

          ) : null}

        </div>

        {/* THE READING PANE. Always present, so the layout does not jump when a row is picked —

            and so the surface reads as mail before anything is selected. */}
        <div className="inbox-detail" style={{ ...CARD, flex: "1 1 58%", padding: "20px 24px" }}>
          {selected === null ? (
            <p className="alerts-empty">Select a notification to read it.</p>
          ) : (
            <>

              <h3

                style={{

                  margin: "0 0 6px",

                  fontSize: "var(--lp-fs-sm)",

                  fontWeight: 650,

                  color: "var(--lp-ink)",

                }}

              >

                {subjectOf(selected)}

              </h3>

              <p className="alerts-row-meta" style={{ margin: "0 0 16px" }}>

                {kindLabel(selected.kind)} · {stampText(selected.at)}

              </p>

              {previewOf(selected) ? (

                <p

                  style={{

                    margin: "0 0 18px",

                    fontSize: "var(--lp-fs-xs)",

                    lineHeight: 1.55,

                    color: "var(--lp-ink)",

                  }}

                >

                  {previewOf(selected)}

                </p>

              ) : null}

              {canOpen(selected) ? (

                <button

                  type="button"

                  className="login-submit"

                  onClick={() => onOpen(selected)}

                >

                  {/* Item 19 (T29): the verb names the DESTINATION rather than promising

                      "open" generically — two kinds go two places. */}

                  {kindLabel(selected.kind) === "Automation"

                    ? "Open the automation"

                    : "Open the database"}

                </button>

              ) : (

                /* ⛔ SAID ON THE ITEM, NOT ON THE CLICK. The pane raised this as a toast AFTER

                   the reader pressed a button that looked live — "you pressed this and were

                   told off" rather than "this is unavailable". */

                <p className="alerts-empty" style={{ margin: 0 }}>

                  {UNOPENABLE_NOTE}

                </p>

              )}

              <button

                type="button"

                className="alerts-row-toggle"

                style={{ marginLeft: 10 }}

                onClick={() => onSetRead(selected, !selected.read)}

              >

                {selected.read ? "Mark unread" : "Mark read"}

              </button>

            </>
          )}
        </div>
      </div>
    </div>
  );
}