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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.5.2
+
+- Work-list filters use Payload's ReactSelect with its standard menu and focus styling.
+  Filters, Clear filters and individual and batch assistant buttons share one control height.
+  The filter row fills the available width, with Clear filters aligned to the batch action below.
+- The workspace dev app now includes content health alongside the editor assistant and visual
+  editing, with alt text, SEO, heading, thin content and translation checks on its seed data.
+- Source builds typecheck with the host app's generated collection and locale types.
+
 ## 0.5.1
 
 - The assistant's button now shows in the header of the work list. The view did not pass Admin's

package/dist/scan.js

@@ -31,7 +31,7 @@ export async function scanContentHealth({ payload, user, checks }) {
         ? payload.config.localization.localeCodes
         : [undefined];
     for (const [slug, collectionOptions] of Object.entries(options.collections)) {
-        const collection = payload.collections[slug]?.config;
+        const collection = payload.config.collections.find((collection) => collection.slug === slug);
         if (!collection) {
             result.problems.push(`Collection "${slug}" does not exist.`);
             continue;
@@ -95,7 +95,7 @@ export async function scanContentHealth({ payload, user, checks }) {
                     depth: 0,
                     draft: drafts,
                     fallbackLocale: false,
-                    ...(locale ? { locale } : {}),
+                    ...(locale ? { locale: locale } : {}),
                     overrideAccess: false,
                     pagination: false,
                     select: select,
@@ -159,7 +159,7 @@ async function scanTranslations(input) {
         depth: 0,
         draft: input.drafts,
         fallbackLocale: false,
-        locale,
+        locale: locale,
         overrideAccess: false,
         pagination: false,
         user: input.user,

package/dist/styles/view.css

@@ -1,6 +1,7 @@
 /* The work list. Colors come from Payload's theme; the accent is the blue the widget uses. */
 .content-health-list {
   --content-health-accent: #2563eb;
+  --content-health-control-height: calc(var(--base) * 1.6);
   padding-bottom: calc(var(--base) * 2);
 }
 
@@ -31,21 +32,39 @@ html[data-theme="dark"] .content-health-list {
 
 .content-health-list__filter {
   display: flex;
+  flex: 1 1 10rem;
+  min-width: 0;
   flex-direction: column;
   gap: calc(var(--base) * 0.25);
   font-size: 0.9em;
+  color: var(--theme-text);
+}
+
+.content-health-list__filter > label {
   color: var(--theme-elevation-600);
 }
 
-.content-health-list__filter select {
-  min-width: 12rem;
-  height: calc(var(--base) * 1.6);
+.content-health-list__filter .rs__control {
+  box-sizing: border-box;
+  min-height: var(--content-health-control-height);
+  height: var(--content-health-control-height);
   padding: 0 calc(var(--base) * 0.5);
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-s);
-  background: var(--theme-input-bg, var(--theme-elevation-0));
-  color: var(--theme-text);
-  font: inherit;
+}
+
+.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);
+}
+
+.content-health-list__clear {
+  flex-shrink: 0;
+  margin-inline-start: auto;
 }
 
 .content-health-list__summary {
@@ -55,7 +74,7 @@ html[data-theme="dark"] .content-health-list {
   align-items: center;
   justify-content: space-between;
   min-height: 1.5em;
-  margin: var(--base) 0 calc(var(--base) * 0.5);
+  margin: var(--base) 0 calc(var(--base) * 0.75);
   color: var(--theme-elevation-600);
 }
 

package/dist/view/ContentHealthView.js

@@ -61,7 +61,7 @@ export async function ContentHealthView({ initPageResult, params, searchParams,
     }));
     const collections = Object.keys(result.documents).map((slug) => ({
         value: slug,
-        label: label(req.payload.collections[slug]?.config.labels?.plural, language) ?? slug,
+        label: label(config.collections.find((collection) => collection.slug === slug)?.labels?.plural, language) ?? slug,
     }));
     const locales = config.localization
         ? config.localization.locales.map((locale) => ({

package/dist/view/WorkList.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Link } from "@payloadcms/ui";
-import { useMemo, useState } from "react";
+import { Button, Link, ReactSelect } from "@payloadcms/ui";
+import { useId, useMemo, useState } from "react";
 import { LIST_COPY } from "../copy.js";
 import { BATCH_CHECKS, batchURL, filterQuery, MAX_BATCH_TARGETS, matchesFilters, } from "../links.js";
 /**
@@ -23,8 +23,14 @@ export function WorkList({ adminRoute, batchAsk, checks, collections, initialFil
         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", 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 }))] }));
+    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 }))] }));
 }
 function Filter({ all, label, onChange, options, value, }) {
-    return (_jsxs("label", { className: "content-health-list__filter", children: [_jsx("span", { children: label }), _jsxs("select", { onChange: (event) => onChange(event.target.value || undefined), value: value ?? "", children: [_jsx("option", { value: "", children: all }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })] }));
+    const inputId = useId();
+    const choices = [{ label: all, value: "" }, ...options];
+    return (_jsxs("div", { className: "content-health-list__filter", children: [_jsx("label", { htmlFor: inputId, children: label }), _jsx(ReactSelect, { inputId: inputId, isClearable: false, isSearchable: options.length > 6, onChange: (option) => {
+                    if (!Array.isArray(option)) {
+                        onChange(typeof option?.value === "string" && option.value ? option.value : undefined);
+                    }
+                }, options: choices, value: choices.find((option) => option.value === (value ?? "")) ?? choices[0] })] }));
 }

package/package.json

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