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

package/dist/styles/view.css

@@ -1,15 +1,12 @@
-/* The work list. Colors come from Payload's theme; the accent is the blue the widget uses. */
+/* The work list. Colors come from Payload's theme; tokens.css has the accent, red and amber. */
 .content-health-list {
-  --content-health-accent: #2563eb;
-  --content-health-control-height: calc(var(--base) * 1.6);
   padding-bottom: calc(var(--base) * 2);
 }
 
-html[data-theme="dark"] .content-health-list {
-  --content-health-accent: #60a5fa;
-}
-
 .content-health-list__header {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) * 1.1);
   padding: calc(var(--base) * 1.5) 0 var(--base);
 }
 
@@ -17,22 +14,121 @@ html[data-theme="dark"] .content-health-list {
   margin: 0;
 }
 
+.content-health-list__ring {
+  flex: none;
+  width: 5rem;
+  height: 5rem;
+}
+
+.content-health-list__ring .content-health__ring-track,
+.content-health-list__ring-track {
+  stroke: var(--theme-elevation-100);
+}
+
+.content-health-list__ring .content-health__ring-ok {
+  stroke: var(--content-health-accent);
+}
+
+.content-health-list__ring .content-health__ring-value {
+  fill: var(--theme-text);
+  font-size: 24px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
 .content-health-list__intro {
-  margin: calc(var(--base) * 0.5) 0 0;
-  max-width: 44rem;
+  margin: calc(var(--base) * 0.25) 0 0;
+  color: var(--theme-elevation-600);
+}
+
+/* Category tabs: the selected one is filled with the accent tint and outlined in the accent. */
+.content-health-list__tabs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: calc(var(--base) * 0.6);
+  margin-bottom: var(--base);
+}
+
+.content-health-list__tab {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--base) * 0.15);
+  padding: calc(var(--base) * 0.6) calc(var(--base) * 0.75);
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-m);
+  background: var(--theme-elevation-0);
   color: var(--theme-elevation-600);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.content-health-list__tab:hover {
+  border-color: var(--theme-elevation-400);
+}
+
+.content-health-list__tab:focus-visible {
+  outline: 2px solid var(--content-health-accent);
+  outline-offset: 2px;
+}
+
+.content-health-list__tab--selected,
+.content-health-list__tab--selected:hover {
+  border-color: var(--content-health-accent);
+  background: var(--content-health-accent-tint);
+  color: var(--theme-text);
+}
+
+.content-health-list__tab-name {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) * 0.3);
+  font-size: 0.9em;
+}
+
+.content-health-list__tab--selected .content-health-list__tab-name {
+  font-weight: 600;
+}
+
+.content-health-list__tab-count {
+  color: var(--theme-text);
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+}
+
+.content-health-list__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--content-health-accent);
+}
+
+.content-health-list__dot--bad {
+  background: var(--content-health-bad);
+}
+
+.content-health-list__dot--warn {
+  background: var(--content-health-warn);
+}
+
+.content-health-list__dot--none {
+  background: var(--theme-elevation-400);
 }
 
 .content-health-list__filters {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
+  justify-content: flex-end;
   gap: calc(var(--base) * 0.75);
+  margin-bottom: var(--base);
 }
 
 .content-health-list__filter {
   display: flex;
-  flex: 1 1 10rem;
+  flex: 0 1 12rem;
   min-width: 0;
   flex-direction: column;
   gap: calc(var(--base) * 0.25);
@@ -46,97 +142,90 @@ html[data-theme="dark"] .content-health-list {
 
 .content-health-list__filter .rs__control {
   box-sizing: border-box;
-  min-height: var(--content-health-control-height);
-  height: var(--content-health-control-height);
+  min-height: calc(var(--base) * 1.6);
+  height: calc(var(--base) * 1.6);
   padding: 0 calc(var(--base) * 0.5);
 }
 
-.content-health-list__filters .btn,
-.content-health-list__summary .btn,
-.content-health-list__actions .btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-height: var(--content-health-control-height);
-  padding-inline: calc(var(--base) * 0.6);
+/* One section per check inside the selected category. */
+.content-health-list__panel {
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-m);
+  background: var(--theme-elevation-0);
+  padding: 0 calc(var(--base) * 1.25);
 }
 
-.content-health-list__clear {
-  flex-shrink: 0;
-  margin-inline-start: auto;
+.content-health-list__section {
+  padding: var(--base) 0;
+}
+
+.content-health-list__section + .content-health-list__section {
+  border-top: 1px solid var(--theme-elevation-100);
 }
 
-.content-health-list__summary {
+.content-health-list__section-head {
   display: flex;
   flex-wrap: wrap;
-  gap: calc(var(--base) * 0.5) var(--base);
   align-items: center;
-  justify-content: space-between;
-  min-height: 1.5em;
-  margin: var(--base) 0 calc(var(--base) * 0.75);
-  color: var(--theme-elevation-600);
+  gap: calc(var(--base) * 0.5);
+  margin-bottom: calc(var(--base) * 0.4);
 }
 
-.content-health-list__summary p {
+.content-health-list__section-head h2 {
   margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
 }
 
-/* One grid for all rows, so the columns line up; each row takes its tracks through subgrid. */
-.content-health-list__rows {
-  display: grid;
-  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1.5fr) auto;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-m);
-  background: var(--theme-elevation-0);
+.content-health-list__batch {
+  margin-inline-start: auto;
 }
 
-.content-health-list__row {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
+.content-health-list__section-head .btn {
+  display: inline-flex;
   align-items: center;
-  gap: calc(var(--base) * 0.75);
-  padding: calc(var(--base) * 0.6) calc(var(--base) * 0.8);
+  justify-content: center;
+  min-height: calc(var(--base) * 1.6);
+  padding-inline: calc(var(--base) * 0.6);
 }
 
-.content-health-list__row + .content-health-list__row {
-  border-top: 1px solid var(--theme-elevation-100);
+.content-health-list__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.content-health-list__what,
-.content-health-list__document {
+.content-health-list__item {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: calc(var(--base) * 0.25) calc(var(--base) * 0.5);
-  min-width: 0;
+  padding: calc(var(--base) * 0.25) 0;
 }
 
-.content-health-list__what {
-  flex-direction: column;
-  align-items: flex-start;
+.content-health-list__item a {
+  color: var(--content-health-accent-text);
+  text-decoration: none;
 }
 
-.content-health-list__check {
-  font-weight: 500;
+.content-health-list__item a:hover {
+  text-decoration: underline;
 }
 
-.content-health-list__detail {
+/* The assistant link sits at the end of the row and stays quiet next to the batch button. */
+.content-health-list__item a.content-health-list__fix {
+  margin-inline-start: auto;
   color: var(--theme-elevation-600);
   font-size: 0.9em;
 }
 
-.content-health-list__document a {
-  color: var(--content-health-accent);
-  text-decoration: none;
+.content-health-list__item a.content-health-list__fix:hover {
+  color: var(--content-health-accent-text);
 }
 
-.content-health-list__document a:hover {
-  text-decoration: underline;
+.content-health-list__detail {
+  color: var(--theme-elevation-600);
+  font-size: 0.9em;
 }
 
 .content-health-list__pill {
@@ -152,11 +241,9 @@ html[data-theme="dark"] .content-health-list {
   text-transform: none;
 }
 
-.content-health-list__actions {
-  justify-self: end;
-}
-
 .content-health-list__empty {
+  margin: 0;
+  padding: var(--base) 0;
   color: var(--theme-elevation-600);
 }
 
@@ -166,11 +253,7 @@ html[data-theme="dark"] .content-health-list {
 }
 
 @media (max-width: 768px) {
-  .content-health-list__rows {
-    grid-template-columns: 1fr;
-  }
-
-  .content-health-list__actions {
-    justify-self: start;
+  .content-health-list__panel {
+    padding: 0 var(--base);
   }
 }

package/dist/styles/widget.css

@@ -1,7 +1,5 @@
 /* Laid out like Payload's collection cards: a section heading, then the content. */
-/* The accent is the blue the editor assistant and visual editing use. */
 .content-health {
-  --content-health-accent: #2563eb;
   display: flex;
   flex-direction: column;
   gap: var(--base);
@@ -17,7 +15,7 @@
 .content-health__panel {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--base) * 1.25);
+  gap: var(--base);
   padding: calc(var(--base) * 1.25);
   border: 1px solid var(--theme-elevation-150);
   border-radius: var(--style-radius-m);
@@ -27,7 +25,12 @@
 .content-health__overview {
   display: flex;
   align-items: center;
-  gap: calc(var(--base) * 1.25);
+  gap: calc(var(--base) * 1.1);
+}
+
+.content-health__overview-text {
+  flex: 1;
+  min-width: 0;
 }
 
 .content-health__overall {
@@ -41,30 +44,21 @@
   color: var(--theme-elevation-600);
 }
 
-/* Rings */
+/* The ring */
 .content-health__ring {
   flex: none;
-  width: 3.75rem;
-  height: 3.75rem;
-}
-
-.content-health__ring--large {
-  width: 7.5rem;
-  height: 7.5rem;
+  width: 5rem;
+  height: 5rem;
 }
 
 .content-health__ring-track {
-  stroke: var(--theme-elevation-150);
+  stroke: var(--theme-elevation-100);
 }
 
 .content-health__ring-ok {
   stroke: var(--content-health-accent);
 }
 
-html[data-theme="dark"] .content-health {
-  --content-health-accent: #60a5fa;
-}
-
 .content-health__ring-value {
   fill: var(--theme-text);
   /* viewBox units: scales with the ring. */
@@ -73,98 +67,79 @@ html[data-theme="dark"] .content-health {
   font-variant-numeric: tabular-nums;
 }
 
-/* One tile per check, as many columns as fit. */
-.content-health__tiles {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-  gap: 12px;
+/* One row per category: name, bar and status. The whole row links to its part of the work list. */
+.content-health__categories {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.content-health__tile {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) * 0.75);
-  padding: var(--base);
-  /* Same as Payload's collection cards. */
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-m);
-  background: var(--theme-elevation-50);
+.content-health__categories li + li {
+  border-top: 1px solid var(--theme-elevation-100);
 }
 
-.content-health__tile-head {
-  display: flex;
+.content-health__category {
+  display: grid;
+  grid-template-columns: 8rem minmax(0, 1fr) 9rem;
   align-items: center;
-  gap: calc(var(--base) * 0.75);
+  gap: var(--base);
+  padding: calc(var(--base) * 0.6) 0;
+  color: var(--theme-text);
+  text-decoration: none;
 }
 
-.content-health__tile-title {
-  margin: 0;
-  font-size: 1rem;
-  line-height: 1.3;
+.content-health__category:hover .content-health__category-name {
+  text-decoration: underline;
 }
 
-.content-health__tile-status {
-  margin: calc(var(--base) * 0.15) 0 0;
-  color: var(--theme-elevation-600);
-  font-variant-numeric: tabular-nums;
+.content-health__bar {
+  height: 6px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: var(--theme-elevation-100);
 }
 
-.content-health__rows {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) * 0.6);
-  margin: 0;
-  padding: calc(var(--base) * 0.6) 0 0;
-  border-top: 1px solid var(--theme-elevation-100);
-  list-style: none;
+.content-health__bar-fill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  background: var(--content-health-accent);
+  transition: width 0.4s ease-out;
 }
 
-.content-health__row {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) * 0.25);
+.content-health__bar-fill--bad {
+  background: var(--content-health-bad);
+  /* A bar at 0% is still a mark: the row reads as "nothing in order", not "no bar". */
+  min-width: 4px;
 }
 
-.content-health__locales {
-  display: flex;
-  flex-wrap: wrap;
-  gap: calc(var(--base) * 0.25);
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.content-health__bar-fill--warn {
+  background: var(--content-health-warn);
 }
 
-.content-health__locales--stacked {
-  flex-direction: column;
+.content-health__bar-fill--none {
+  width: 0 !important;
 }
 
-.content-health__locale {
-  display: flex;
-  align-items: baseline;
-  gap: calc(var(--base) * 0.3);
+.content-health__category-status {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
 }
 
-.content-health__pill {
-  padding: 0 calc(var(--base) * 0.3);
-  border-radius: var(--style-radius-s);
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  font-size: 0.75em;
-  text-decoration: none;
-  text-transform: uppercase;
+.content-health__tone--ok {
+  color: var(--content-health-accent-text);
 }
 
-.content-health__pill:hover {
-  background: var(--theme-elevation-250);
+.content-health__tone--warn {
+  color: var(--content-health-warn-text);
 }
 
-.content-health__detail,
-.content-health__more {
+.content-health__tone--bad {
+  color: var(--content-health-bad-text);
+}
+
+.content-health__tone--none {
   color: var(--theme-elevation-500);
-  font-size: 0.9em;
 }
 
 .content-health__problems {
@@ -178,12 +153,23 @@ html[data-theme="dark"] .content-health {
 }
 
 @media (max-width: 768px) {
-  .content-health__ring--large {
-    width: 5.5rem;
-    height: 5.5rem;
+  .content-health__overview {
+    flex-wrap: wrap;
+  }
+
+  .content-health__category {
+    grid-template-columns: 1fr auto;
+    gap: calc(var(--base) * 0.25) var(--base);
+  }
+
+  .content-health__bar {
+    grid-column: 1 / -1;
+    grid-row: 2;
   }
 }
 
-.content-health__more a {
-  color: inherit;
+@media (prefers-reduced-motion: reduce) {
+  .content-health__bar-fill {
+    transition: none;
+  }
 }

package/dist/view/ContentHealthView.d.ts

@@ -1,9 +1,10 @@
 import type { AdminViewServerProps } from "payload";
+import "../styles/tokens.css";
 import "../styles/view.css";
 /**
- * The work list: every finding with filters on check, collection and locale. Each row opens the
- * document in the finding's locale with the field selected; where the editor assistant works, a
- * second link opens it with a ready prompt too. Scans once per visit; the filters work in the browser.
+ * The work list: every finding, one category at a time. Each row opens the document in the
+ * finding's locale with the field selected; where the editor assistant works, a second link opens it
+ * with a ready prompt too. Scans once per visit; the tabs and filters work in the browser.
  * Only for visitors who may use Admin: Payload leaves custom views public.
  */
 export declare function ContentHealthView({ initPageResult, params, searchParams, }: AdminViewServerProps): Promise<import("react").JSX.Element>;

package/dist/view/ContentHealthView.js

@@ -2,16 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DefaultTemplate } from "@payloadcms/next/templates";
 import { Gutter, SetStepNav } from "@payloadcms/ui";
 import { redirect } from "next/navigation";
-import { ASK, BATCH_ASK, CHECK_LABELS, findingDetail, LIST_COPY, uiLanguage } from "../copy.js";
+import { categoryOf, categoryStats, categoryTone, defaultCategory, } from "../categories.js";
+import { ASK, BATCH_ASK, CATEGORY_LABELS, CHECK_LABELS, COPY, findingDetail, LIST_COPY, uiLanguage, } from "../copy.js";
+import { checkStats, countDocuments } from "../group.js";
 import { accessRedirect, assistantCollections, BATCH_CHECKS, batchCollections, batchTarget, editURL, readFilters, } from "../links.js";
 import { scanContentHealth } from "../scan.js";
 import { CHECK_IDS } from "../types.js";
-import { WorkList } from "./WorkList.js";
+import { Ring } from "../widget/Ring.js";
+import { WorkList, } from "./WorkList.js";
+import "../styles/tokens.css";
 import "../styles/view.css";
 /**
- * The work list: every finding with filters on check, collection and locale. Each row opens the
- * document in the finding's locale with the field selected; where the editor assistant works, a
- * second link opens it with a ready prompt too. Scans once per visit; the filters work in the browser.
+ * The work list: every finding, one category at a time. Each row opens the document in the
+ * finding's locale with the field selected; where the editor assistant works, a second link opens it
+ * with a ready prompt too. Scans once per visit; the tabs and filters work in the browser.
  * Only for visitors who may use Admin: Payload leaves custom views public.
  */
 export async function ContentHealthView({ initPageResult, params, searchParams, }) {
@@ -27,6 +31,7 @@ export async function ContentHealthView({ initPageResult, params, searchParams,
     }
     const language = uiLanguage(req.i18n?.language);
     const copy = LIST_COPY[language];
+    const common = COPY[language];
     const { config } = req.payload;
     const adminRoute = config.routes.admin;
     const result = await scanContentHealth({ payload: req.payload, user: req.user });
@@ -55,10 +60,26 @@ export async function ContentHealthView({ initPageResult, params, searchParams,
             ...(batchable ? { batchTarget: batchTarget(finding) } : {}),
         };
     });
-    const checks = result.checks.map((check) => ({
-        value: check,
-        label: CHECK_LABELS[language][check],
+    const stats = checkStats(result.checks, result.checked, result.findings);
+    const categoryList = categoryStats(stats);
+    const categories = categoryList.map((stat) => ({
+        id: stat.category,
+        label: CATEGORY_LABELS[language][stat.category],
+        tone: categoryTone(stat),
     }));
+    // A link may name a category or, as older ones do, a check.
+    const requested = readFilters(searchParams);
+    const named = requested.category ?? (requested.check ? categoryOf(requested.check) : undefined);
+    const category = categories.some((entry) => entry.id === named)
+        ? named
+        : defaultCategory(categoryList);
+    const initialFilters = {
+        ...(category ? { category } : {}),
+        ...(requested.collection ? { collection: requested.collection } : {}),
+        ...(requested.locale ? { locale: requested.locale } : {}),
+    };
+    const total = stats.reduce((sum, stat) => sum + stat.checked, 0);
+    const failing = stats.reduce((sum, stat) => sum + stat.failing, 0);
     const collections = Object.keys(result.documents).map((slug) => ({
         value: slug,
         label: label(config.collections.find((collection) => collection.slug === slug)?.labels?.plural, language) ?? slug,
@@ -70,7 +91,9 @@ export async function ContentHealthView({ initPageResult, params, searchParams,
         }))
         : [];
     // Payload wraps only its own views in the Admin shell; a custom view brings nav and header itself.
-    return (_jsx(DefaultTemplate, { i18n: req.i18n, locale: locale, params: params, payload: req.payload, permissions: permissions, req: req, searchParams: searchParams, user: req.user ?? undefined, viewActions: req.payload.config.admin?.components?.actions, visibleEntities: visibleEntities, children: _jsxs(Gutter, { className: "content-health-list", children: [_jsx(SetStepNav, { nav: [{ label: copy.title }] }), _jsxs("header", { className: "content-health-list__header", children: [_jsx("h1", { children: copy.title }), _jsx("p", { className: "content-health-list__intro", children: copy.intro })] }), _jsx(WorkList, { adminRoute: adminRoute, batchAsk: batchAsk, checks: checks, collections: collections, initialFilters: readFilters(searchParams), language: language, locales: locales, rows: rows }), result.problems.length ? (_jsx("ul", { className: "content-health-list__problems", children: result.problems.map((problem) => (_jsx("li", { children: problem }, problem))) })) : null] }) }));
+    return (_jsx(DefaultTemplate, { i18n: req.i18n, locale: locale, params: params, payload: req.payload, permissions: permissions, req: req, searchParams: searchParams, user: req.user ?? undefined, viewActions: req.payload.config.admin?.components?.actions, visibleEntities: visibleEntities, children: _jsxs(Gutter, { className: "content-health-list", children: [_jsx(SetStepNav, { nav: [{ label: copy.title }] }), _jsxs("header", { className: "content-health-list__header", children: [_jsx(Ring, { className: "content-health-list__ring", failing: failing, label: common.ok(total - failing, total), total: total }), _jsxs("div", { children: [_jsx("h1", { children: copy.title }), _jsx("p", { className: "content-health-list__intro", children: result.findings.length
+                                        ? copy.summary(result.findings.length, countDocuments(result.findings))
+                                        : copy.none })] })] }), _jsx(WorkList, { adminRoute: adminRoute, batchAsk: batchAsk, categories: categories, collections: collections, initialFilters: initialFilters, language: language, locales: locales, rows: rows }), result.problems.length ? (_jsx("ul", { className: "content-health-list__problems", children: result.problems.map((problem) => (_jsx("li", { children: problem }, problem))) })) : null] }) }));
 }
 /** By check, then document, then locale, so a document's locales sit together. */
 function sortFindings(findings) {

package/dist/view/WorkList.d.ts

@@ -1,10 +1,16 @@
+import { type CategoryId, type Tone } from "../categories.ts";
 import { type UiLanguage } from "../copy.ts";
 import { type ListFilters } from "../links.ts";
-import type { CheckId } from "../types.ts";
+import { type CheckId } from "../types.ts";
 export type WorkListOption = {
     value: string;
     label: string;
 };
+export type WorkListCategory = {
+    id: CategoryId;
+    label: string;
+    tone: Tone;
+};
 /** One finding, ready to show: labels and links are made on the server. */
 export type WorkListRow = {
     key: string;
@@ -23,14 +29,15 @@ export type WorkListRow = {
     batchTarget?: string;
 };
 /**
- * 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 declare function WorkList({ adminRoute, batchAsk, checks, collections, initialFilters, language, locales, rows, }: {
+export declare function WorkList({ adminRoute, batchAsk, categories, collections, initialFilters, language, locales, rows, }: {
     adminRoute: string;
     /** The assistant's prompt per check that it can fix in many documents at once. */
     batchAsk: Partial<Record<CheckId, string>>;
-    checks: WorkListOption[];
+    categories: WorkListCategory[];
     collections: WorkListOption[];
     initialFilters: ListFilters;
     language: UiLanguage;