nexus-shared 3.1.0 → 3.2.0

package/dist/Components/Forms/Crud.js

@@ -1,34 +1,61 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { iconArrowBackUp, iconEye, iconFlag, iconFlagOff, iconInfoCircle, iconList, iconLoader2, iconLock, iconNotes, iconPencil, iconPin, iconPinnedOff, iconPlus, iconTrash, iconTrashX, InlineIcon, } from "nexus-icons";
+import { iconArrowBackUp, iconEye, iconFlag, iconFlagOff, iconHistory, iconInfoCircle, iconList, iconLoader2, iconLock, iconNotes, iconPencil, iconPin, iconPinnedOff, iconPlus, iconStar, iconStarOff, iconTrash, iconTrashX, InlineIcon, } from "nexus-icons";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { abortError } from "../../Helpers/ApiFormHelpers.js";
 import { isAbortError, unwrapApiResult } from "../../Helpers/ApiResponses.js";
 import { getCrudBackend } from "../../Helpers/CrudBackend.js";
-import { actionAllowed, availableModes, CRUD_CACHE_LIFETIME, CRUD_MODES, CRUD_ROW_ACTIONS, CrudCache, crudCacheMode, crudListEndpoint, crudMassActions, crudMessageAction, crudRowActions, crudRowEndpoint, getCrudSettings, leavesList, massActionAllowed, patchCachedList, pinRoom, } from "../../Helpers/CrudHelpers.js";
+import { actionAllowed, availableModes, CRUD_CACHE_LIFETIME, CRUD_MARK_BITS, CRUD_MARKS, CRUD_MODES, CRUD_ROW_ACTIONS, CrudCache, crudCacheMode, crudListEndpoint, crudMassActions, crudMassEndpoint, crudMessageAction, crudRowActions, crudRowEndpoint, dropMarkedRows, hasMark, leavesList, markDirections, markedRecords, markLimit, massActionAllowed, patchCachedList, patchMarkedRecords, pinRoom, withMark, } from "../../Helpers/CrudHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { FormStore } from "../../Helpers/FormStore.js";
-import { pluralize } from "../../Helpers/MessageBuilder.js";
+import { buildMessage, pluralize } from "../../Helpers/MessageBuilder.js";
 import { getPermissions, permissionsVersion, subscribePermissions } from "../../Helpers/Permissions.js";
 import { filterRequest } from "../../Helpers/TableFilters.js";
 import { columnValue, formatCellText, readPath } from "../../Helpers/TableHelpers.js";
 import { api as browserApi } from "../../Services/BrowserApi.js";
+import { expireLookups } from "../../Services/JoinSources.js";
 import { Button } from "../Documents/Button.js";
 import { TabButtons } from "../Documents/TabButtons.js";
 import { openPopup } from "../Layouts/PopupHost.js";
 import { toast } from "../Layouts/Toaster.js";
 import { DataTable, useTable } from "../Viewers/DataTable.js";
 import { ApiForm } from "./ApiForm.js";
+import { openAuditHistory } from "./CrudHistory.js";
 import { CrudDetails } from "./CrudParts.js";
 import { confirmDiscard, FormButtons } from "./SubmitForm.js";
 /*
  * Crud: a module's records in one component. It takes a controller's endpoints, the table's columns, and the form's
  * inputs, and handles the rest: the lists (all, flagged, trash, deleted) the user may see, the actions they
- * may take, the records the user pinned in a section above the list, Add and Edit popups built on ApiForm, a details
- * popup, actions on many rows, a cache of lists while the page is open, and rows updated from each answer instead of
- * reloading.
+ * may take, the records the user pinned and their favourites in sections above the list, Add and Edit popups built on
+ * ApiForm, a details popup, actions on many rows, a cache of lists while the page is open, and rows updated from each
+ * answer instead of reloading.
  */
-const ALL_ACTIONS = ["create", "view", "edit", "flag", "pin", "trash", "recover", "delete", "trashFromDelete", "description"];
+const ALL_ACTIONS = ["create", "view", "edit", "flag", "pin", "favorite", "history", "trash", "recover", "delete", "trashFromDelete", "description"];
+/** How each mark shows: its section above the list, the actions that put it on and take it off, and what its limit says. */
+const MARK_INFO = {
+    pin: {
+        section: "pins",
+        title: "Pinned",
+        icon: iconPin,
+        offIcon: iconPinnedOff,
+        on: "Pin",
+        off: "Unpin",
+        full: (max, plural) => `You can pin up to ${max} ${plural}. Unpin one to pin another.`,
+        over: (sent, asked, max, plural) => `${sent} of ${asked} ${plural} pinned: you can pin up to ${max}.`,
+    },
+    favorite: {
+        section: "favorites",
+        title: "Favourite",
+        icon: iconStar,
+        offIcon: iconStarOff,
+        on: "Add to favourites",
+        off: "Remove from favourites",
+        full: (max, plural) => `You can have up to ${max} favourite ${plural}. Remove one from the favourites to add another.`,
+        over: (sent, asked, max, plural) => `${sent} of ${asked} ${plural} added to the favourites: you can have up to ${max}.`,
+    },
+};
+/** What a set of marks draws in a row's first column, by its two known bits: nothing, the pin, the star, both. */
+const MARK_ICONS = [0, 1, 2, 3].map(set => CRUD_MARKS.filter(mark => hasMark(set, mark)).map(mark => ({ icon: MARK_INFO[mark].icon, label: MARK_INFO[mark].title })));
 const MODE_INFO = {
     // "Active", not "All": the list leaves out what is in the trash and what is deleted, and "All" said otherwise.
     normal: { label: "Active", icon: iconList, empty: plural => `No ${plural} yet.` },
@@ -38,10 +65,8 @@ const MODE_INFO = {
 };
 /** Actions that move a record between the lists are asked about first; flags and pins are undone by a click. */
 const ASKED = new Set(["trash", "recover", "delete", "trashFromDelete"]);
-/** Actions that take a record out of the active lists, so it is no longer among the pinned records either. */
+/** Actions that take a record out of the active lists, so it leaves the sections of its marks too. */
 const LEFT_ACTIVE = new Set(["trash", "delete", "trashFromDelete"]);
-/** The words of an action that flags some records and unflags others (a mass toggle of a mixed selection). */
-const TOGGLED_FLAG = { verb: "change the flags of {object}", done: "updated", doing: "Changing the flags of {object}", object: "the records" };
 const capitalize = (text) => (text ? text[0].toUpperCase() + text.slice(1) : text);
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 function isInputList(inputs) {
@@ -147,7 +172,7 @@ export function Crud(props) {
     const subject = props.subject ?? endpointSubject(api) ?? "record";
     const plural = props.subjectPlural ?? pluralize(subject);
     const name = props.name ?? subject;
-    const backend = getCrudBackend();
+    const backend = props.backend ?? getCrudBackend();
     // Permissions: every list and action asks, again whenever the user's rights change.
     const permissionsStamp = useSyncExternalStore(subscribePermissions, permissionsVersion, permissionsVersion);
     const permissions = getPermissions();
@@ -164,7 +189,7 @@ export function Crud(props) {
     }, [ready, api, wantedActions, can]);
     const massAllowed = useMemo(() => {
         const map = {};
-        for (const action of ["flag", "pin", "trash", "recover", "delete", "trashFromDelete", "description"])
+        for (const action of ["flag", "pin", "favorite", "trash", "recover", "delete", "trashFromDelete", "description"])
             map[action] = ready && massActionAllowed(action, api, wantedActions, can);
         return map;
     }, [ready, api, wantedActions, can]);
@@ -189,73 +214,77 @@ export function Crud(props) {
         const text = first ? formatCellText(first, columnValue(first, row)) : "";
         return text || `${capitalize(subject)} ${table.keyOf(row)}`;
     }, [subject, table]);
-    /* The records the user pinned: their own endpoint, a section above the list, and a limit every CRUD shares */
-    const maxPins = getCrudSettings().maxPins;
-    const pinsEndpoint = api.pins;
-    const pinsOn = ready && Boolean(pinsEndpoint) && wantedActions.includes("pin") && can(pinsEndpoint);
-    const [pinned, setPinned] = useState(null);
-    const [pinsLoading, setPinsLoading] = useState(false);
-    const [pinsStamp, setPinsStamp] = useState(0);
+    /*
+     * This user's marks: the records they pinned and their favourites, read in one call (`bookmarks`), shown in a section
+     * each above the active list, with a limit each that every CRUD shares
+     */
+    // A backend that keeps no favourites lists its pins alone (`pins`), and every record it answers is pinned.
+    const fromBookmarks = Boolean(api.bookmarks);
+    const marksEndpoint = api.bookmarks ?? api.pins;
+    const shownMarks = CRUD_MARKS.filter(mark => wantedActions.includes(mark) && (mark === "pin" || fromBookmarks));
+    const marksOn = ready && Boolean(marksEndpoint) && shownMarks.length > 0 && can(marksEndpoint);
+    const [marked, setMarked] = useState(null);
+    const [marksState, setMarksState] = useState("none");
+    const [marksStamp, setMarksStamp] = useState(0);
     useEffect(() => {
-        if (!pinsOn || !pinsEndpoint) {
-            setPinned(null);
+        if (!marksOn || !marksEndpoint) {
+            setMarked(null);
+            setMarksState("none");
             return;
         }
         const controller = new AbortController();
-        setPinsLoading(true);
-        const done = (rows) => {
-            if (controller.signal.aborted)
+        setMarksState("loading");
+        void browserApi.send(marksEndpoint, { signal: controller.signal, toast: false, subject: plural }).then(answer => {
+            if (answer.aborted || controller.signal.aborted)
                 return;
-            if (rows)
-                setPinned(rows);
-            setPinsLoading(false);
-        };
-        void browserApi.send(pinsEndpoint, { signal: controller.signal, toast: false, subject: plural }).then(answer => {
-            if (answer.aborted)
+            if (!answer.ok) {
+                // The sections are shortcuts to records the list holds as well, so they are left out quietly; the actions
+                // that need the marks say why they wait.
+                setMarksState("failed");
                 return;
-            // The rows come from the pinned list, so they are pinned whatever the backend sends on each one.
-            done(answer.ok ? backend.readList(answer.result).map(row => backend.withPin(row, true)) : []);
-        }, 
-        // The section is a shortcut to records the list holds as well, so a failed load leaves it out quietly.
-        () => done([]));
-        return () => controller.abort();
-    }, [pinsOn, pinsEndpoint, backend, plural, pinsStamp]);
-    const reloadPins = useCallback(() => setPinsStamp(stamp => stamp + 1), []);
-    /** The section after a pin or an unpin: records just pinned go on top, unpinned ones go. */
-    function applyPins(rows) {
-        setPinned(current => {
-            if (!current)
-                return current;
-            const changed = new Map(rows.map(row => [table.keyOf(row), row]));
-            const kept = current.map(row => changed.get(table.keyOf(row)) ?? row).filter(row => backend.isPinned(row));
-            const keys = new Set(kept.map(row => table.keyOf(row)));
-            return [...rows.filter(row => backend.isPinned(row) && !keys.has(table.keyOf(row))), ...kept];
+            }
+            const rows = backend.readList(answer.result);
+            setMarked(markedRecords(rows, row => (fromBookmarks ? backend.marksOf(row) : CRUD_MARK_BITS.pin), row => table.keyOf(row)));
+            setMarksState("ready");
+        }, () => {
+            if (!controller.signal.aborted)
+                setMarksState("failed");
         });
+        return () => controller.abort();
+    }, [marksOn, marksEndpoint, fromBookmarks, backend, plural, table, marksStamp]);
+    const reloadMarks = useCallback(() => setMarksStamp(stamp => stamp + 1), []);
+    /**
+     * A record's marks: from the listing when there is one - a list's own rows need not carry them, and the Nexus lists
+     * do not - else from the record itself.
+     */
+    const marksOf = useCallback((row) => marked?.marks.get(table.keyOf(row)) ?? (marked && fromBookmarks ? 0 : backend.marksOf(row)), [marked, fromBookmarks, backend, table]);
+    /**
+     * Why a mark cannot be put on or taken off yet. A switch stores the record's **whole** set of marks, so one sent
+     * before the set is known could take off a mark the page never read.
+     */
+    const marksWait = fromBookmarks && marksOn && marksState !== "ready" ? (marksState === "failed" ? "Your pins and favourites could not be read. Reload the list to try again." : "Reading your pins and favourites…") : undefined;
+    /**
+     * The marks in each row's first column, where its number would be: on the live lists, once they are known, and
+     * only the marks this CRUD offers.
+     */
+    const markMask = CRUD_MARKS.filter(mark => (marksOn && shownMarks.includes(mark)) || allowed[mark]).reduce((mask, mark) => mask | CRUD_MARK_BITS[mark], 0);
+    const rowMarks = useCallback((row) => MARK_ICONS[marksOf(row) & markMask], [marksOf, markMask]);
+    const marksShown = (mode === "normal" || mode === "flag") && markMask !== 0 && !marksWait;
+    /** How many more records may take a mark: lowering a limit never takes a mark off, it only waits to be met. */
+    const markRoom = (mark) => pinRoom(marked ? marked.rows[mark].length : undefined, markLimit(mark));
+    /** Copies of marked records, after a change that was not a mark: a flag, a description, a save. */
+    function patchMarked(rows) {
+        setMarked(current => current && patchMarkedRecords(current, rows, new Map(), row => table.keyOf(row), new Set()));
     }
-    /** A pinned record's copy in the section, after a change that was not a pin: a flag, a description, a save. */
-    function patchPins(rows) {
-        setPinned(current => {
-            if (!current)
-                return current;
-            const changed = new Map(rows.map(row => [table.keyOf(row), row]));
-            if (!current.some(row => changed.has(table.keyOf(row))))
-                return current;
-            // The record is still pinned: only its other values changed, and a list may not send the pin at all.
-            return current.map(row => {
-                const next = changed.get(table.keyOf(row));
-                return next ? backend.withPin(next, true) : row;
-            });
-        });
+    /** Records that left the active lists leave every section; their marks stay, for when they come back. */
+    function dropMarked(keys) {
+        if (keys.length)
+            setMarked(current => current && dropMarkedRows(current, keys, row => table.keyOf(row)));
     }
-    /** Records that left the active lists are no longer among the pinned ones. */
-    function dropPins(keys) {
-        if (!keys.length)
-            return;
-        const gone = new Set(keys);
-        setPinned(current => (current && current.some(row => gone.has(table.keyOf(row))) ? current.filter(row => !gone.has(table.keyOf(row))) : current));
+    /** Records back in the active list take their place in the sections of the marks they kept. */
+    function restoreMarked(rows) {
+        setMarked(current => current && patchMarkedRecords(current, rows, new Map(), row => table.keyOf(row), new Set(rows.map(row => table.keyOf(row)))));
     }
-    /** Nothing can be pinned while the limit is reached: lowering the limit never unpins, it only waits to be met. */
-    const pinsFull = () => `You can pin up to ${maxPins} ${plural}. Unpin one to pin another.`;
     /* Loading */
     const load = useCallback((query, signal) => {
         if (!mode)
@@ -317,6 +346,10 @@ export function Crud(props) {
     }
     function afterChange(action, rows, changes, written) {
         syncCaches(changes, written);
+        // What other tables and pickers looked up from this controller may now be wrong - a name, a status - so it is marked
+        // old, and is asked again where it is next shown. A pin or a favourite is this user's own and changes neither.
+        if (action !== "pin" && action !== "favorite")
+            expireLookups(api);
         const shown = modeRef.current;
         if (shown)
             latest.current.onChange?.({ action, rows, mode: shown });
@@ -358,29 +391,7 @@ export function Crud(props) {
                 moved.push({ key, row: next, before: current });
             }
             table.remove(leaving);
-            patchPins(updated);
-            afterChange(action, updated, moved, write);
-            return;
-        }
-        if (action === "pin") {
-            const updated = [];
-            for (const row of done) {
-                const key = table.keyOf(row);
-                const current = table.getRow(key) ?? row;
-                const on = markOn ?? !backend.isPinned(current);
-                let next = backend.withPin(current, on);
-                const change = changes.get(key);
-                if (change)
-                    next = { ...next, ...change };
-                if (one)
-                    next = { ...next, ...one };
-                // A pin changes the section above the list, never the list itself: the record stays where it is, on its page.
-                if (write && table.getRow(key))
-                    table.upsert(next, { flash: false });
-                updated.push(next);
-                moved.push({ key, row: next, before: current });
-            }
-            applyPins(updated);
+            patchMarked(updated);
             afterChange(action, updated, moved, write);
             return;
         }
@@ -395,7 +406,7 @@ export function Crud(props) {
                 updated.push(next);
                 moved.push({ key, row: next, before: current });
             }
-            patchPins(updated);
+            patchMarked(updated);
             afterChange(action, updated, moved, write);
             return;
         }
@@ -418,9 +429,37 @@ export function Crud(props) {
         if (write && leavesList(action, shown))
             table.remove(keys);
         if (LEFT_ACTIVE.has(action))
-            dropPins(keys);
+            dropMarked(keys);
+        else if (action === "recover")
+            restoreMarked(updated);
         afterChange(action, updated, moved, write);
     }
+    /**
+     * Marks a write stored, written in with no request: every record's set of marks, the sections (a record that took a
+     * mark goes on top of its section, one that lost it leaves), and the record itself in the table and every list kept.
+     * A mark never moves a record between lists: it stays where it is, on its page.
+     */
+    function applyMarks(mark, rows, stored) {
+        const write = holds(undefined);
+        const updated = [];
+        const moved = [];
+        for (const row of rows) {
+            const key = table.keyOf(row);
+            const marks = stored.get(key);
+            if (marks === undefined)
+                continue;
+            const current = table.getRow(key) ?? row;
+            const next = backend.withMarks(current, marks);
+            if (write && table.getRow(key))
+                table.upsert(next, { flash: false });
+            updated.push(next);
+            moved.push({ key, row: next, before: current });
+        }
+        if (!updated.length)
+            return;
+        setMarked(current => current && patchMarkedRecords(current, updated, stored, row => table.keyOf(row)));
+        afterChange(mark, updated, moved, write);
+    }
     /**
      * Records a page's own action changed, written exactly where the built-in ones write theirs. The handle's `apply`.
      */
@@ -431,7 +470,8 @@ export function Crud(props) {
         const moved = [];
         const updated = [];
         const leaving = [];
-        let pinned = false;
+        // Records whose marks the page's own action changed, as the records it gave say them.
+        const stored = new Map();
         // The page asked from whichever list it did; the record's band decides, so only a table still loading is not
         // written. A record that joined the list on screen - asked from another list, answered after a switch - is not in
         // the table to be updated, so the table is read again from the patched lists instead.
@@ -449,19 +489,17 @@ export function Crud(props) {
                 write = false;
             else if (before && write)
                 table.upsert(next, { flash: false });
-            if (before && backend.isPinned(next) !== backend.isPinned(before))
-                pinned = true;
+            if (before && backend.marksOf(next) !== backend.marksOf(before))
+                stored.set(key, backend.marksOf(next));
             updated.push(next);
             moved.push({ key, row: next, before, gone });
         }
         if (write)
             table.remove(leaving);
         if (gone)
-            dropPins(leaving);
-        else if (pinned)
-            applyPins(updated);
+            dropMarked(leaving);
         else
-            patchPins(updated);
+            setMarked(current => current && patchMarkedRecords(current, updated, stored, row => table.keyOf(row)));
         syncCaches(moved, write);
     }
     /* Row actions */
@@ -471,56 +509,120 @@ export function Crud(props) {
             return;
         const key = rawKey(row);
         const from = modeRef.current;
-        const markOn = action === "flag" ? !backend.isFlagged(row) : action === "pin" ? !backend.isPinned(row) : undefined;
-        if (action === "pin" && markOn && pinRoom(pinned?.length) < 1) {
-            toast.warning(pinsFull());
-            return;
-        }
-        const options = { params: { id: key, [rowKey]: key }, subject: labelOf(row), action: crudMessageAction(action, markOn) };
+        const markOn = action === "flag" ? !backend.isFlagged(row) : undefined;
+        // A flag carries the way it goes: never a toggle the server works out.
+        const options = { params: { id: key, [rowKey]: key }, subject: labelOf(row), action: crudMessageAction(action, markOn), ...(markOn !== undefined ? backend.flagRequest(markOn) : {}) };
         const answer = ASKED.has(action) ? await browserApi.confirm(endpoint, options) : await browserApi.send(endpoint, options);
         if (answer?.ok)
             applyChange(action, [row], { result: answer.result, markOn, from });
     }
+    /**
+     * Puts a mark on one record, or takes it off: the way the record's marks say, never a toggle the server works out.
+     * Through `bookmark` it sends the record's whole set of marks with this one changed; a backend with only `pin`
+     * toggles its pin.
+     */
+    async function switchMark(mark, row) {
+        const endpoint = crudRowEndpoint(api, mark);
+        if (!endpoint || marksWait)
+            return;
+        const before = marksOf(row);
+        const on = !hasMark(before, mark);
+        if (on && markRoom(mark) < 1) {
+            toast.warning(MARK_INFO[mark].full(markLimit(mark), plural));
+            return;
+        }
+        const wanted = withMark(before, mark, on);
+        const whole = Boolean(api.bookmark);
+        const id = rawKey(row);
+        const answer = await browserApi.send(endpoint, { params: { id, [rowKey]: id }, subject: labelOf(row), action: crudMessageAction(mark, on), ...(whole ? backend.marksRequest(wanted) : {}) });
+        if (!answer.ok)
+            return;
+        applyMarks(mark, [row], new Map([[table.keyOf(row), (whole ? backend.answeredMarks(answer.result) : null) ?? wanted]]));
+    }
+    /**
+     * Puts a mark on the selected records, or takes it off. Only the records the change is for are sent - the rest are
+     * already as asked - and, putting it on, only as many as the limit leaves room for, in the order they were picked.
+     */
+    async function switchMarkMany(mark, rows, on) {
+        const endpoint = crudMassEndpoint(api, mark);
+        if (!endpoint || marksWait)
+            return;
+        const wanted = rows.filter(row => hasMark(marksOf(row), mark) !== on);
+        let sent = wanted;
+        if (on) {
+            const room = markRoom(mark);
+            if (room < 1) {
+                toast.warning(MARK_INFO[mark].full(markLimit(mark), plural));
+                return;
+            }
+            sent = wanted.slice(0, room);
+        }
+        if (!sent.length)
+            return;
+        const keys = sent.map(rawKey);
+        const request = api.mass?.bookmark ? backend.massMarksRequest(keys, mark, on) : { body: backend.massRequest(mark, keys) };
+        const action = crudMessageAction(mark, on);
+        const answer = await browserApi.send(endpoint, { ...request, subject, plural: props.subjectPlural, count: sent.length, action, toast: { success: false } });
+        if (!answer.ok)
+            return;
+        const done = changedOf(sent, answer.result);
+        applyMarks(mark, done, new Map(done.map(row => [table.keyOf(row), withMark(marksOf(row), mark, on)])));
+        table.clearSelection();
+        sayMassDone(action, sent.length, done.length);
+        if (sent.length < wanted.length)
+            toast.warning(MARK_INFO[mark].over(sent.length, wanted.length, markLimit(mark), plural));
+    }
+    /** The records a mass answer says it changed: the ones it lists, or every one sent when it lists none. */
+    function changedOf(sent, result) {
+        const changed = backend.answeredKeys(result, rowKey);
+        return changed ? sent.filter(row => changed.has(table.keyOf(row))) : sent;
+    }
+    /**
+     * How a directed switch on a selection went, said plainly: one already as asked is skipped, not refused, so "3
+     * regions pinned" when two of them already were is the one thing not to say.
+     */
+    function sayMassDone(action, sent, changed) {
+        const done = buildMessage("success", { action, subject, plural: props.subjectPlural, count: changed });
+        if (changed === sent)
+            toast.success(done);
+        else if (changed > 0)
+            toast.success(`${done.replace(/\.$/, "")}; the other ${sent - changed} already were.`);
+        else
+            toast.info(`Nothing changed: every one of the ${sent} already was.`);
+    }
+    /** Flags the selected records, or unflags them: only the ones the change is for, and the call says which way. */
+    async function switchFlagMany(rows, on) {
+        const endpoint = crudMassEndpoint(api, "flag");
+        if (!endpoint)
+            return;
+        const sent = rows.filter(row => backend.canFlag(row) && backend.isFlagged(row) !== on);
+        if (!sent.length)
+            return;
+        const action = crudMessageAction("flag", on);
+        const from = modeRef.current;
+        const answer = await browserApi.send(endpoint, { body: backend.massRequest("flag", sent.map(rawKey)), ...backend.flagRequest(on), subject, plural: props.subjectPlural, count: sent.length, action, toast: { success: false } });
+        if (!answer.ok)
+            return;
+        const done = changedOf(sent, answer.result);
+        applyChange("flag", done, { result: answer.result, mass: true, markOn: on, from });
+        table.clearSelection();
+        sayMassDone(action, sent.length, done.length);
+    }
     async function runMassAction(action, rows) {
         if (action === "description") {
             openDescription(rows);
             return;
         }
-        const endpoint = api.mass?.[action];
+        const endpoint = crudMassEndpoint(api, action);
         if (!endpoint)
             return;
-        let markOn;
-        let sent = rows;
-        let over = 0;
-        if (action === "flag") {
-            const on = rows.filter(row => backend.isFlagged(row)).length;
-            markOn = on === 0 ? true : on === rows.length ? false : undefined;
-        }
-        if (action === "pin") {
-            // Every selected record pinned means Unpin; otherwise the ones that are not pinned yet are pinned, as many as
-            // the limit leaves room for, in the order the user picked them. The rest stay as they are.
-            const adding = rows.filter(row => !backend.isPinned(row));
-            markOn = adding.length > 0;
-            if (markOn) {
-                const room = pinRoom(pinned?.length);
-                if (room < 1) {
-                    toast.warning(pinsFull());
-                    return;
-                }
-                sent = adding.slice(0, room);
-                over = adding.length - sent.length;
-            }
-        }
-        const messageAction = action === "flag" && markOn === undefined ? TOGGLED_FLAG : crudMessageAction(action, markOn);
-        const options = { body: backend.massRequest(action, sent.map(rawKey)), subject, plural: props.subjectPlural, count: sent.length, action: messageAction };
+        const options = { body: backend.massRequest(action, rows.map(rawKey)), subject, plural: props.subjectPlural, count: rows.length, action: crudMessageAction(action) };
         const from = modeRef.current;
         const answer = ASKED.has(action) ? await browserApi.confirm(endpoint, options) : await browserApi.send(endpoint, options);
         if (!answer?.ok)
             return;
-        applyChange(action, sent, { result: answer.result, mass: true, markOn, from });
+        applyChange(action, rows, { result: answer.result, mass: true, from });
         table.clearSelection();
-        if (over > 0)
-            toast.warning(`${sent.length} of ${sent.length + over} ${plural} pinned: you can pin up to ${maxPins}.`);
     }
     /* Popups */
     const addPopup = useRef(null);
@@ -617,7 +719,7 @@ export function Crud(props) {
             const write = holds(undefined);
             if (write)
                 table.upsert(record);
-            patchPins([record]);
+            patchMarked([record]);
             afterChange("edit", [record], key ? [{ key, row: record, before }] : [], write);
             return;
         }
@@ -634,9 +736,17 @@ export function Crud(props) {
         if (write && shown === "normal")
             table.upsert(record);
         afterChange("create", [record], key ? [{ key, row: record, before: undefined }] : [], write);
-        if (key && !answered && api.details)
+        // The fields only the server knows - the status, the times - are read once, for this one record, when the answer
+        // did not carry them: a bare key, or the payload sent back (no list can place a record without its status).
+        if (key && api.details && (!answered || member(record, "normal") === undefined))
             void fillSaved(key, record);
     }
+    /** A record's history, in a popup of its own: one per record, brought back if it is open. */
+    function openHistory(row) {
+        if (!api.audit)
+            return;
+        openAuditHistory({ endpoint: api.audit, id: rawKey(row), subject, subjectPlural: props.subjectPlural, label: labelOf(row), backend });
+    }
     function openDetails(row) {
         const details = latest.current.details;
         if (details === false)
@@ -681,7 +791,7 @@ export function Crud(props) {
                         : undefined }) })),
             footer: popup => (_jsxs(DetailsFooter, { load: status, children: [details?.actions
                         ?.filter(action => (!action.endpoint || (ready && can(action.endpoint))) && !action.hidden?.(row))
-                        .map(action => (_jsx(Button, { icon: action.icon, "data-action": action.id, onClick: () => action.onSelect(table.getRow(key) ?? row, popup), children: action.label }, action.id))), canEdit && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: () => {
+                        .map(action => (_jsx(Button, { icon: action.icon, "data-action": action.id, onClick: () => action.onSelect(table.getRow(key) ?? row, popup), children: action.label }, action.id))), allowed.history && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconHistory }), "data-action": "history", onClick: () => openHistory(table.getRow(key) ?? row), children: "View history" })), canEdit && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: () => {
                             popup.close();
                             void openForm("edit", table.getRow(key) ?? row);
                         }, children: "Edit" })), _jsx(Button, { variant: "primary", onClick: () => popup.close(), children: "Close" })] })),
@@ -710,8 +820,8 @@ export function Crud(props) {
         });
     }
     // Row actions and the handle call these through a ref, so the table's callbacks stay the same between renders.
-    const run = useRef({ runRowAction, runMassAction, openForm, openDetails, applyRows });
-    run.current = { runRowAction, runMassAction, openForm, openDetails, applyRows };
+    const run = useRef({ runRowAction, runMassAction, switchMark, switchMarkMany, switchFlagMany, openForm, openDetails, openHistory, applyRows });
+    run.current = { runRowAction, runMassAction, switchMark, switchMarkMany, switchFlagMany, openForm, openDetails, openHistory, applyRows };
     /* The table's callbacks */
     const rowActions = useCallback((row) => {
         if (!mode)
@@ -719,12 +829,20 @@ export function Crud(props) {
         const list = [];
         const primary = mode === "normal" || mode === "flag";
         const flagged = backend.isFlagged(row);
-        const isPinned = backend.isPinned(row);
+        const marks = marksOf(row);
+        // A mark goes the way the record's marks say; while they are not known yet, it waits and says why.
+        const markEntry = (mark) => {
+            const info = MARK_INFO[mark];
+            const off = hasMark(marks, mark);
+            return { label: off ? info.off : info.on, icon: _jsx(InlineIcon, { icon: off ? info.offIcon : info.icon }), disabled: Boolean(marksWait), description: marksWait };
+        };
         const info = {
             view: { label: `View ${(latest.current.details || undefined)?.label ?? "details"}`, icon: _jsx(InlineIcon, { icon: iconEye }) },
             edit: { label: "Edit", icon: _jsx(InlineIcon, { icon: iconPencil }), inline: true },
             flag: flagged ? { label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }) } : { label: "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }) },
-            pin: isPinned ? { label: "Unpin", icon: _jsx(InlineIcon, { icon: iconPinnedOff }) } : { label: "Pin", icon: _jsx(InlineIcon, { icon: iconPin }) },
+            pin: markEntry("pin"),
+            favorite: markEntry("favorite"),
+            history: { label: "History", icon: _jsx(InlineIcon, { icon: iconHistory }) },
             trash: { label: "Move to trash", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" },
             recover: { label: "Recover", description: "Back to the active list", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), inline: true },
             delete: { label: "Delete permanently", icon: _jsx(InlineIcon, { icon: iconTrashX }), tone: "danger" },
@@ -733,24 +851,52 @@ export function Crud(props) {
         for (const action of crudRowActions(mode, candidate => allowed[candidate], trashless)) {
             if (action === "view" && latest.current.details === false)
                 continue;
-            const onSelect = action === "view" ? () => run.current.openDetails(row) : action === "edit" ? () => void run.current.openForm("edit", row) : () => run.current.runRowAction(action, row);
+            // A record the backend will not flag either way (a pending one) is offered neither.
+            if (action === "flag" && !backend.canFlag(row))
+                continue;
+            const onSelect = action === "view"
+                ? () => run.current.openDetails(row)
+                : action === "edit"
+                    ? () => void run.current.openForm("edit", row)
+                    : action === "pin" || action === "favorite"
+                        ? () => run.current.switchMark(action, row)
+                        : action === "history"
+                            ? () => run.current.openHistory(row)
+                            : () => run.current.runRowAction(action, row);
             const entry = info[action];
             list.push({ ...entry, id: action, inline: entry.inline && (primary ? action === "edit" : true), onSelect });
         }
         const extra = latest.current.rowActions?.(row, mode) ?? [];
         return [...list, ...extra];
-    }, [mode, allowed, backend, trashless]);
+    }, [mode, allowed, backend, trashless, marksOf, marksWait]);
     const massActionsFor = useCallback((rows) => {
         if (!mode)
             return [];
         const list = [];
-        const flagged = rows.filter(row => backend.isFlagged(row)).length;
-        const unpinned = rows.filter(row => !backend.isPinned(row)).length;
+        const marks = rows.map(marksOf);
         for (const action of crudMassActions(mode, candidate => massAllowed[candidate], massTrashless)) {
+            if (action === "flag") {
+                // The same for the flag: Flag while one of them can be flagged, Unflag while one of them is.
+                const flaggable = rows.filter(row => backend.canFlag(row));
+                if (flaggable.some(row => !backend.isFlagged(row)))
+                    list.push({ id: "flag", label: "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }), onSelect: selected => run.current.switchFlagMany(selected, true) });
+                if (flaggable.some(row => backend.isFlagged(row)))
+                    list.push({ id: "unflag", label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }), onSelect: selected => run.current.switchFlagMany(selected, false) });
+                continue;
+            }
+            if (action === "pin" || action === "favorite") {
+                // Only a way some selected record can still go (the owner, 2026-10-07); a mixed selection offers both. While the
+                // marks are not known, which way it can go is not known either: both show, and neither runs yet.
+                const info = MARK_INFO[action];
+                const ways = marksWait ? { on: true, off: true } : markDirections(marks, action);
+                if (ways.on)
+                    list.push({ id: action, label: info.on, icon: _jsx(InlineIcon, { icon: info.icon }), disabled: Boolean(marksWait), onSelect: selected => run.current.switchMarkMany(action, selected, true) });
+                if (ways.off)
+                    list.push({ id: `un${action}`, label: info.off, icon: _jsx(InlineIcon, { icon: info.offIcon }), disabled: Boolean(marksWait), onSelect: selected => run.current.switchMarkMany(action, selected, false) });
+                continue;
+            }
             const onSelect = (selected) => run.current.runMassAction(action, selected);
             const info = {
-                flag: flagged === rows.length ? { label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }) } : { label: flagged ? "Flag / unflag" : "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }) },
-                pin: unpinned === 0 ? { label: "Unpin", icon: _jsx(InlineIcon, { icon: iconPinnedOff }) } : { label: "Pin", icon: _jsx(InlineIcon, { icon: iconPin }) },
                 trash: { label: "Move to trash", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" },
                 recover: { label: "Recover", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }) },
                 delete: { label: "Delete permanently", icon: _jsx(InlineIcon, { icon: iconTrashX }), tone: "danger" },
@@ -761,7 +907,7 @@ export function Crud(props) {
         }
         const extra = latest.current.massActions ? latest.current.massActions(rows, mode) : [];
         return [...list, ...extra];
-    }, [mode, massAllowed, backend, massTrashless]);
+    }, [mode, massAllowed, backend, massTrashless, marksOf, marksWait]);
     const onRowOpen = useCallback((row) => {
         if (allowed.view && latest.current.details !== false)
             run.current.openDetails(row);
@@ -776,14 +922,14 @@ export function Crud(props) {
         setMode: next => setChosenMode(next),
         reload: () => {
             cache.clear();
-            reloadPins();
+            reloadMarks();
             return table.reload({ quiet: true });
         },
         apply: (rows, options) => run.current.applyRows(rows, options?.gone ?? false),
         create: values => void run.current.openForm("create", null, values),
         edit: row => void run.current.openForm("edit", row),
         view: row => run.current.openDetails(row),
-    }), [table, cache, reloadPins]);
+    }), [table, cache, reloadMarks]);
     const tableLabel = props["aria-label"] ?? (props["aria-labelledby"] ? undefined : capitalize(plural));
     const configured = CRUD_MODES.some(value => wantedModes.includes(value) && crudListEndpoint(api, value, paging));
     if (!configured) {
@@ -794,15 +940,17 @@ export function Crud(props) {
     }
     const modeOptions = modes.map(value => ({ value, label: MODE_INFO[value].label, icon: _jsx(InlineIcon, { icon: MODE_INFO[value].icon }) }));
     const add = allowed.create ? { label: `Add ${subject}`, onClick: () => void run.current.openForm("create", null) } : undefined;
-    // In the main list, select again by pin and by flag, the way the mass actions act on them.
+    // In the main list, select again by mark and by flag, the way the mass actions act on them - marks once they are known.
+    const markSelects = (mark, label, otherwise) => massAllowed[mark] && !marksWait
+        ? [
+            { label, icon: _jsx(InlineIcon, { icon: MARK_INFO[mark].icon }), test: (row) => hasMark(marksOf(row), mark) },
+            { label: otherwise, icon: _jsx(InlineIcon, { icon: MARK_INFO[mark].offIcon }), test: (row) => !hasMark(marksOf(row), mark) },
+        ]
+        : [];
     const selectBy = mode === "normal"
         ? [
-            ...(massAllowed.pin
-                ? [
-                    { label: "Pinned", icon: _jsx(InlineIcon, { icon: iconPin }), test: (row) => backend.isPinned(row) },
-                    { label: "Not pinned", icon: _jsx(InlineIcon, { icon: iconPinnedOff }), test: (row) => !backend.isPinned(row) },
-                ]
-                : []),
+            ...markSelects("pin", "Pinned", "Not pinned"),
+            ...markSelects("favorite", "Favourites", "Not favourites"),
             ...(massAllowed.flag
                 ? [
                     { label: "Flagged", icon: _jsx(InlineIcon, { icon: iconFlag }), test: (row) => backend.isFlagged(row) },
@@ -812,15 +960,28 @@ export function Crud(props) {
         ]
         : [];
     const selectable = props.massActions !== false && Boolean(mode) && (crudMassActions(mode, action => massAllowed[action], massTrashless).length > 0 || Boolean(props.massActions));
-    return (_jsx("div", { id: id, className: cx("nx-crud", className), style: style, "data-mode": mode, children: _jsx(DataTable, { table: table, columns: columns, load: load, loadKey: mode ?? "waiting", paging: paging, rowKey: rowKey, rowLabel: labelOf, "aria-label": tableLabel, "aria-labelledby": props["aria-labelledby"], toolbar: modes.length > 1 && mode ? (_jsx(TabButtons, { size: "sm", labels: "auto", options: modeOptions, value: mode, onChange: setChosenMode, "aria-label": `${capitalize(plural)}: lists` })) : undefined, actions: props.toolbar, add: add, selectable: selectable, massActions: massActionsFor, selectBy: selectBy, rowActions: rowActions, pinnedRows: mode === "normal" && pinsOn ? (pinned ?? undefined) : undefined, pinnedLoading: pinsLoading, pinnedLabel: `Pinned ${plural}`, pinnedMax: maxPins, onRowOpen: onRowOpen, openOnClick: tableOptions?.openOnClick, onReload: () => {
+    // The sections above the active list: one per mark this CRUD shows, Pinned first.
+    const sections = mode === "normal" && marksOn && marksState !== "failed"
+        ? shownMarks.map(mark => ({
+            key: MARK_INFO[mark].section,
+            label: `${MARK_INFO[mark].title} ${plural}`,
+            icon: MARK_INFO[mark].icon,
+            rows: marked?.rows[mark] ?? [],
+            loading: marksState === "loading",
+            max: markLimit(mark),
+        }))
+        : undefined;
+    return (_jsx("div", { id: id, className: cx("nx-crud", className), style: style, "data-mode": mode, children: _jsx(DataTable, { table: table, columns: columns, load: load, loadKey: mode ?? "waiting", paging: paging, rowKey: rowKey, rowLabel: labelOf, "aria-label": tableLabel, "aria-labelledby": props["aria-labelledby"], toolbar: modes.length > 1 && mode ? (_jsx(TabButtons, { size: "sm", labels: "auto", options: modeOptions, value: mode, onChange: setChosenMode, "aria-label": `${capitalize(plural)}: lists` })) : undefined, actions: props.toolbar, add: add, selectable: selectable, massActions: massActionsFor, selectBy: selectBy, rowActions: rowActions, sections: sections, rowMarks: marksShown ? rowMarks : undefined, onRowOpen: onRowOpen, openOnClick: tableOptions?.openOnClick, onReload: () => {
                 cache.clear();
-                reloadPins();
+                reloadMarks();
             }, emptyMessage: tableOptions?.emptyMessage ?? (mode ? MODE_INFO[mode].empty(plural) : undefined), emptyAction: mode === "normal" ? undefined : null, searchPlaceholder: tableOptions?.searchPlaceholder ?? `Search ${plural}…`, stateKey: tableOptions?.stateKey ?? `crud:${name}`, pageSize: tableOptions?.pageSize, pageSizes: tableOptions?.pageSizes, defaultSort: tableOptions?.defaultSort, numbered: tableOptions?.numbered, maxHeight: tableOptions?.maxHeight, fill: tableOptions?.fill, size: tableOptions?.size, maxSelection: tableOptions?.maxSelection, columnsMenu: tableOptions?.columnsMenu, searchDelay: tableOptions?.searchDelay, filterInputs: tableOptions?.filterInputs, reorderable: tableOptions?.reorderable, resizable: tableOptions?.resizable, pinnable: tableOptions?.pinnable, moreActions: tableOptions?.moreActions, exportable: tableOptions?.exportable, printable: tableOptions?.printable, exportName: tableOptions?.exportName, onImport: tableOptions?.onImport, excel: tableOptions?.excel && {
                 ...tableOptions.excel,
+                // The export writes the list on screen, as the backend names that list; the page's own filters win a clash.
+                filters: () => ({ ...backend.exportFilters(modeRef.current ?? "normal"), ...tableOptions.excel?.filters?.() }),
                 // A spreadsheet wrote records straight into the database: every list this CRUD kept is out of date.
                 onImported: () => {
                     cache.clear();
-                    reloadPins();
+                    reloadMarks();
                     tableOptions.excel?.onImported?.();
                 },
             } }) }));