@simmalugnt-se/payload-content-health 0.5.2 → 0.6.0

package/dist/view/WorkList.js

@@ -2,28 +2,64 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Link, ReactSelect } from "@payloadcms/ui";
 import { useId, useMemo, useState } from "react";
+import { categoryOf } from "../categories.js";
 import { LIST_COPY } from "../copy.js";
 import { BATCH_CHECKS, batchURL, filterQuery, MAX_BATCH_TARGETS, matchesFilters, } from "../links.js";
+import { CHECK_IDS } from "../types.js";
 /**
- * The findings with filters on check, collection and locale. Filters apply in the browser and are
- * kept in the address, so the view can be linked to and reloaded with them.
+ * The findings, one category at a time and one section per check. The category and the collection
+ * and locale filters apply in the browser and are kept in the address, so the view can be linked to
+ * and reloaded with them.
  */
-export function WorkList({ adminRoute, batchAsk, checks, collections, initialFilters, language, locales, rows, }) {
+export function WorkList({ adminRoute, batchAsk, categories, collections, initialFilters, language, locales, rows, }) {
     const copy = LIST_COPY[language];
+    const panelId = useId();
     const [filters, setFilters] = useState(initialFilters);
-    const shown = useMemo(() => rows.filter((row) => matchesFilters(row, filters)), [rows, filters]);
-    const documents = new Set(shown.map((row) => row.href.split("?")[0])).size;
-    const filtered = Boolean(filters.check || filters.collection || filters.locale);
-    // One check at a time: the assistant fixes a batch with one prompt.
-    const ask = filters.check && BATCH_CHECKS[filters.check] ? batchAsk[filters.check] : undefined;
-    const batch = ask ? shown.flatMap((row) => (row.batchTarget ? [row.batchTarget] : [])) : [];
-    const batchHref = ask && batch.length > 1 ? batchURL(adminRoute, filters, batch, ask) : undefined;
+    const category = filters.category ?? categories[0]?.id;
+    // Tab counts follow the collection and locale filters, so they match what the tab then shows.
+    const narrowed = useMemo(() => rows.filter((row) => matchesFilters(row, { collection: filters.collection, locale: filters.locale })), [rows, filters.collection, filters.locale]);
+    const counts = useMemo(() => {
+        const result = new Map();
+        for (const row of narrowed) {
+            const id = categoryOf(row.check);
+            result.set(id, (result.get(id) ?? 0) + 1);
+        }
+        return result;
+    }, [narrowed]);
+    const shown = narrowed.filter((row) => categoryOf(row.check) === category);
+    const sections = CHECK_IDS.flatMap((check) => {
+        const own = shown.filter((row) => row.check === check);
+        return own.length ? [{ check, rows: own }] : [];
+    });
+    const everywhere = rows.some((row) => categoryOf(row.check) === category);
     const update = (next) => {
         setFilters(next);
         const query = filterQuery(next);
         window.history.replaceState(window.history.state, "", `${window.location.pathname}${query ? `?${query}` : ""}`);
     };
-    return (_jsxs("div", { className: "content-health-list__body", children: [_jsxs("div", { className: "content-health-list__filters", children: [_jsx(Filter, { label: copy.check, all: copy.all, onChange: (check) => update({ ...filters, check: check }), options: checks, value: filters.check }), collections.length > 1 ? (_jsx(Filter, { label: copy.collection, all: copy.all, onChange: (collection) => update({ ...filters, collection }), options: collections, value: filters.collection })) : null, locales.length > 1 ? (_jsx(Filter, { label: copy.locale, all: copy.all, onChange: (locale) => update({ ...filters, locale }), options: locales, value: filters.locale })) : null, filtered ? (_jsx(Button, { buttonStyle: "subtle", className: "content-health-list__clear", margin: false, onClick: () => update({}), size: "small", children: copy.clear })) : null] }), _jsxs("div", { className: "content-health-list__summary", children: [_jsx("p", { "aria-live": "polite", children: shown.length ? copy.summary(shown.length, documents) : null }), batchHref ? (_jsx(Button, { buttonStyle: "primary", el: "link", margin: false, size: "small", url: batchHref, children: copy.fixMany(Math.min(batch.length, MAX_BATCH_TARGETS), batch.length) })) : null] }), shown.length ? (_jsx("ul", { className: "content-health-list__rows", children: shown.map((row) => (_jsxs("li", { className: "content-health-list__row", children: [_jsxs("div", { className: "content-health-list__what", children: [_jsx("span", { className: "content-health-list__check", children: row.checkLabel }), row.detail ? (_jsx("span", { className: "content-health-list__detail", children: row.detail })) : null] }), _jsxs("div", { className: "content-health-list__document", children: [_jsx(Link, { href: row.href, prefetch: false, children: row.title }), row.locale ? (_jsx("span", { className: "content-health-list__pill", children: row.locale })) : null, row.draft ? (_jsx("span", { className: "content-health-list__pill content-health-list__pill--draft", children: copy.draft })) : null] }), _jsx("div", { className: "content-health-list__actions", children: row.askHref ? (_jsx(Button, { buttonStyle: "secondary", el: "link", margin: false, size: "small", url: row.askHref, children: copy.fix })) : null })] }, row.key))) })) : (_jsx("p", { className: "content-health-list__empty", children: filtered ? copy.noneFiltered : copy.none }))] }));
+    const moveTab = (event, index) => {
+        const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+        const target = categories[(index + step + categories.length) % categories.length];
+        if (!step || !target)
+            return;
+        event.preventDefault();
+        update({ ...filters, category: target.id });
+        document.getElementById(`${panelId}-tab-${target.id}`)?.focus();
+    };
+    return (_jsxs("div", { className: "content-health-list__body", children: [_jsx("div", { "aria-label": copy.categories, className: "content-health-list__tabs", role: "tablist", children: categories.map((entry, index) => {
+                    const selected = entry.id === category;
+                    return (_jsxs("button", { "aria-controls": `${panelId}-panel`, "aria-selected": selected, className: `content-health-list__tab${selected ? " content-health-list__tab--selected" : ""}`, id: `${panelId}-tab-${entry.id}`, onClick: () => update({ ...filters, category: entry.id }), onKeyDown: (event) => moveTab(event, index), role: "tab", tabIndex: selected ? 0 : -1, type: "button", children: [_jsxs("span", { className: "content-health-list__tab-name", children: [_jsx("span", { "aria-hidden": "true", className: `content-health-list__dot content-health-list__dot--${entry.tone}` }), entry.label] }), _jsx("span", { className: "content-health-list__tab-count", children: counts.get(entry.id) ?? 0 })] }, entry.id));
+                }) }), collections.length > 1 || locales.length > 1 ? (_jsxs("div", { className: "content-health-list__filters", children: [collections.length > 1 ? (_jsx(Filter, { label: copy.collection, all: copy.all, onChange: (collection) => update({ ...filters, category, collection }), options: collections, value: filters.collection })) : null, locales.length > 1 ? (_jsx(Filter, { label: copy.locale, all: copy.all, onChange: (locale) => update({ ...filters, category, locale }), options: locales, value: filters.locale })) : null] })) : null, _jsx("div", { "aria-labelledby": category ? `${panelId}-tab-${category}` : undefined, className: "content-health-list__panel", id: `${panelId}-panel`, role: "tabpanel", children: sections.length ? (sections.map((section) => (_jsx(Section, { adminRoute: adminRoute, ask: batchAsk[section.check], copy: copy, filters: { ...filters, category }, rows: section.rows }, section.check)))) : (_jsx("p", { className: "content-health-list__empty", children: everywhere ? copy.noneFiltered : copy.categoryOk })) })] }));
+}
+function Section({ adminRoute, ask, copy, filters, rows, }) {
+    const check = rows[0]?.check;
+    const documents = new Set(rows.map((row) => row.href.split("?")[0])).size;
+    const targets = ask && BATCH_CHECKS[check] ? rows.flatMap((row) => row.batchTarget ?? []) : [];
+    // The check says how far each fix may reach, so the batch link carries it.
+    const batchHref = ask && targets.length > 1
+        ? batchURL(adminRoute, { ...filters, check }, targets, ask)
+        : undefined;
+    return (_jsxs("section", { className: "content-health-list__section", children: [_jsxs("header", { className: "content-health-list__section-head", children: [_jsx("h2", { children: rows[0]?.checkLabel }), _jsx("span", { className: "content-health-list__pill", children: copy.documents(documents) }), batchHref ? (_jsx(Button, { buttonStyle: "secondary", className: "content-health-list__batch", el: "link", margin: false, size: "small", url: batchHref, children: copy.fixMany(Math.min(targets.length, MAX_BATCH_TARGETS), targets.length) })) : null] }), _jsx("ul", { className: "content-health-list__items", children: rows.map((row) => (_jsxs("li", { className: "content-health-list__item", children: [_jsx(Link, { href: row.href, prefetch: false, children: row.title }), row.locale ? _jsx("span", { className: "content-health-list__pill", children: row.locale }) : null, row.draft ? (_jsx("span", { className: "content-health-list__pill content-health-list__pill--draft", children: copy.draft })) : null, row.detail ? _jsx("span", { className: "content-health-list__detail", children: row.detail }) : null, row.askHref ? (_jsx(Link, { className: "content-health-list__fix", href: row.askHref, prefetch: false, children: copy.fix })) : null] }, row.key))) })] }));
 }
 function Filter({ all, label, onChange, options, value, }) {
     const inputId = useId();

package/dist/widget/ContentHealthWidget.d.ts

@@ -1,7 +1,8 @@
 import type { WidgetServerProps } from "payload";
+import "../styles/tokens.css";
 import "../styles/widget.css";
 /**
- * Dashboard widget: the share of checked fields in order, overall and per check, and the documents
- * that need work, each linking to the document in the right locale.
+ * Dashboard widget: the share of checked fields in order, overall and per category. Each category
+ * links to its part of the work list, where the documents are.
  */
 export declare function ContentHealthWidget({ req, widgetData }: WidgetServerProps): Promise<import("react").JSX.Element>;

package/dist/widget/ContentHealthWidget.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { COPY, findingDetail, STATUS, TILE_LABELS, uiLanguage } from "../copy.js";
+import { Button } from "@payloadcms/ui";
+import { categoryStats, categoryTone } from "../categories.js";
+import { CATEGORY_LABELS, COPY, uiLanguage } from "../copy.js";
 import { checkStats, countDocuments } from "../group.js";
-import { editURL, listURL } from "../links.js";
+import { listURL } from "../links.js";
 import { scanContentHealth } from "../scan.js";
 import { CHECK_IDS } from "../types.js";
 import { Ring } from "./Ring.js";
+import "../styles/tokens.css";
 import "../styles/widget.css";
-const ROWS_PER_CHECK = 4;
 /**
- * Dashboard widget: the share of checked fields in order, overall and per check, and the documents
- * that need work, each linking to the document in the right locale.
+ * Dashboard widget: the share of checked fields in order, overall and per category. Each category
+ * links to its part of the work list, where the documents are.
  */
 export async function ContentHealthWidget({ req, widgetData }) {
     const language = uiLanguage(req.i18n?.language);
@@ -23,34 +25,19 @@ export async function ContentHealthWidget({ req, widgetData }) {
         checks: selected,
     });
     const stats = checkStats(result.checks, result.checked, result.findings);
+    const categories = categoryStats(stats);
     const total = stats.reduce((sum, stat) => sum + stat.checked, 0);
     const failing = stats.reduce((sum, stat) => sum + stat.failing, 0);
-    const passing = stats.filter((stat) => stat.checked > 0 && stat.failing === 0).length;
     const documents = Object.values(result.documents).reduce((sum, count) => sum + count, 0);
     const adminRoute = req.payload.config.routes.admin;
-    return (_jsxs("section", { className: "content-health", children: [_jsx("h2", { className: "content-health__heading", children: copy.title }), _jsxs("div", { className: "content-health__panel", children: [_jsxs("div", { className: "content-health__overview", children: [_jsx(Ring, { className: "content-health__ring content-health__ring--large", failing: failing, label: copy.ok(total - failing, total), total: total }), _jsxs("div", { children: [_jsx("p", { className: "content-health__overall", children: copy.overall }), _jsxs("p", { className: "content-health__summary", children: [result.findings.length
-                                                ? copy.summary(countDocuments(result.findings), documents)
-                                                : copy.allGood, passing > 0 && result.findings.length > 0 ? ` · ${copy.passing(passing)}` : null] })] })] }), _jsx("ul", { className: "content-health__tiles", children: stats.map((stat) => (_jsx(CheckTile, { adminRoute: adminRoute, language: language, stat: stat }, stat.check))) }), result.problems.length ? (_jsxs("div", { className: "content-health__problems", children: [_jsx("p", { children: copy.problems }), _jsx("ul", { children: result.problems.map((problem) => (_jsx("li", { children: problem }, problem))) })] })) : null] })] }));
+    return (_jsxs("section", { className: "content-health", children: [_jsx("h2", { className: "content-health__heading", children: copy.title }), _jsxs("div", { className: "content-health__panel", children: [_jsxs("div", { className: "content-health__overview", children: [_jsx(Ring, { className: "content-health__ring", failing: failing, label: copy.ok(total - failing, total), total: total }), _jsxs("div", { className: "content-health__overview-text", children: [_jsx("p", { className: "content-health__overall", children: copy.overall }), _jsx("p", { className: "content-health__summary", children: result.findings.length
+                                            ? copy.summary(countDocuments(result.findings), documents)
+                                            : copy.allGood })] }), _jsx(Button, { buttonStyle: "secondary", el: "link", margin: false, size: "small", url: listURL(adminRoute), children: copy.openDetails })] }), _jsx("ul", { className: "content-health__categories", children: categories.map((stat) => (_jsx(CategoryRow, { adminRoute: adminRoute, language: language, stat: stat }, stat.category))) }), result.problems.length ? (_jsxs("div", { className: "content-health__problems", children: [_jsx("p", { children: copy.problems }), _jsx("ul", { children: result.problems.map((problem) => (_jsx("li", { children: problem }, problem))) })] })) : null] })] }));
 }
-function CheckTile({ adminRoute, language, stat, }) {
+function CategoryRow({ adminRoute, language, stat, }) {
     const copy = COPY[language];
-    const status = !stat.checked
-        ? copy.nothingYet
-        : stat.failing
-            ? STATUS[language][stat.check](stat.checked - stat.failing, stat.checked)
-            : copy.checkPasses;
-    return (_jsxs("li", { className: "content-health__tile", children: [_jsxs("div", { className: "content-health__tile-head", children: [_jsx(Ring, { className: "content-health__ring", failing: stat.failing, label: status, total: stat.checked }), _jsxs("div", { children: [_jsx("h3", { className: "content-health__tile-title", children: TILE_LABELS[language][stat.check] }), _jsx("p", { className: "content-health__tile-status", children: status })] })] }), stat.documents.length ? (_jsxs("ul", { className: "content-health__rows", children: [stat.documents.slice(0, ROWS_PER_CHECK).map((row) => (_jsx(FindingRow, { adminRoute: adminRoute, language: language, row: row }, `${row.collection}:${row.id}`))), stat.documents.length > ROWS_PER_CHECK ? (_jsx("li", { className: "content-health__more", children: _jsx("a", { href: listURL(adminRoute, { check: stat.check }), children: copy.more(stat.documents.length - ROWS_PER_CHECK) }) })) : null] })) : null] }));
-}
-/**
- * A document on its own line, then its locales: one per line when they carry details (lengths, word
- * counts), otherwise side by side.
- */
-function FindingRow({ adminRoute, language, row, }) {
-    const locales = row.findings.map((finding) => ({
-        finding,
-        detail: findingDetail(language, finding),
-    }));
-    const stacked = locales.some(({ detail }) => detail);
-    const shown = locales.filter(({ finding, detail }) => finding.locale || detail);
-    return (_jsxs("li", { className: "content-health__row", children: [_jsx("a", { href: editURL(adminRoute, row.findings[0]), children: row.title }), shown.length ? (_jsx("ul", { className: `content-health__locales${stacked ? " content-health__locales--stacked" : ""}`, children: shown.map(({ finding, detail }) => (_jsxs("li", { className: "content-health__locale", children: [finding.locale ? (_jsx("a", { className: "content-health__pill", href: editURL(adminRoute, finding), children: finding.locale })) : null, detail ? _jsx("span", { className: "content-health__detail", children: detail }) : null] }, finding.locale ?? ""))) })) : null] }));
+    const tone = categoryTone(stat);
+    const share = stat.checked ? (stat.checked - stat.failing) / stat.checked : 0;
+    const status = tone === "none" ? copy.nothingYet : stat.failing ? copy.toFix(stat.failing) : copy.checkPasses;
+    return (_jsx("li", { children: _jsxs("a", { className: "content-health__category", href: listURL(adminRoute, { category: stat.category }), children: [_jsx("span", { className: "content-health__category-name", children: CATEGORY_LABELS[language][stat.category] }), _jsx("span", { "aria-hidden": "true", className: "content-health__bar", children: _jsx("span", { className: `content-health__bar-fill content-health__bar-fill--${tone}`, style: { width: `${Math.round(share * 100)}%` } }) }), _jsx("span", { className: `content-health__category-status content-health__tone--${tone}`, children: status })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-content-health",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Content health checks and dashboard widgets for Payload Admin: alt texts, SEO fields and more",
   "keywords": [
     "payload",