@justanarthur/payload-plugin-translator 3.1.0 → 3.2.0

package/dist/rsc.js

@@ -1,10 +1,11 @@
-import"./shared/chunk-9d433kmv.js";
+import"./shared/chunk-d0n3f8ad.js";
 import {
   readLocales,
   loadCollectionReview,
   loadGlobalsReview,
-  loadEntityLocaleReview
-} from "./shared/chunk-15n5q7wd.js";
+  loadEntityLocaleReview,
+  loadJobsProgress
+} from "./shared/chunk-4ftfmxgs.js";
 import {
   REVIEW_VIEW_PATH
 } from "./shared/chunk-31qgv1zk.js";
@@ -12,7 +13,7 @@ import {
 // src/review/view/TranslationsView.tsx
 import { DefaultTemplate } from "@payloadcms/next/templates";
 import { Gutter } from "@payloadcms/ui";
-import { ReviewStyles } from "@justanarthur/payload-plugin-translator/client";
+import { BulkActions } from "@justanarthur/payload-plugin-translator/client";
 
 // src/review/view/Detail.tsx
 import { ReviewActions } from "@justanarthur/payload-plugin-translator/client";
@@ -30,38 +31,50 @@ var editHref = (adminRoute, { collectionSlug, globalSlug, id }, locale) => `${fo
 
 // src/review/view/Detail.tsx
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-var STATE_LABEL = {
-  identical: "same as source",
-  missing: "missing",
-  ok: "translated",
-  placeholders: "placeholders differ"
+var STATE = {
+  identical: { label: "same as source", tone: "warn" },
+  missing: { label: "missing", tone: "bad" },
+  ok: { label: "translated", tone: "ok" },
+  placeholders: { label: "placeholders differ", tone: "warn" }
 };
 var preview = (text) => text.length > 600 ? `${text.slice(0, 597)}…` : text;
 var readablePath = (path) => path.replace(/\[(\d+)\]/g, (_, index) => ` ${Number(index) + 1}`).replace(/\(([^)]+)\)/g, " · $1").replace(/#(\d+)$/, (_, index) => ` (part ${Number(index) + 1})`).split(".").join(" › ");
-var Detail = ({ adminRoute, review, onlyIssues, tab }) => {
+var Detail = ({ adminRoute, review, onlyIssues, tab, page }) => {
   const rows = onlyIssues ? review.fields.filter((field) => field.state !== "ok") : review.fields;
   const { summary } = review;
+  const tone = summary.slugMissing || summary.coverage < 50 ? "bad" : summary.coverage < 100 ? "warn" : "ok";
+  const counters = [
+    { label: "translated", value: `${summary.coverage}%`, note: `${summary.ok} of ${summary.total} fields`, bar: true },
+    { label: "missing", value: summary.missing, note: "empty in this locale" },
+    { label: "same as source", value: summary.identical, note: `identical to ${review.defaultLocale}` },
+    { label: "placeholders", value: summary.placeholders, note: "differ from source" }
+  ];
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsxs("div", {
-        className: "translator-review__header",
+        className: "tr__head",
         children: [
           /* @__PURE__ */ jsxs("div", {
             children: [
               /* @__PURE__ */ jsxs("a", {
-                href: reviewHref(adminRoute, { tab }),
+                className: "tr__back",
+                href: reviewHref(adminRoute, { tab, page }),
                 children: [
                   "← All ",
-                  tab === "globals" ? "globals" : tab
+                  tab
                 ]
               }),
-              /* @__PURE__ */ jsxs("h2", {
+              /* @__PURE__ */ jsx("h1", {
+                children: review.label
+              }),
+              /* @__PURE__ */ jsxs("p", {
+                className: "tr__lead",
                 children: [
-                  review.label,
-                  " · ",
-                  review.defaultLocale,
+                  review.defaultLocale.toUpperCase(),
                   " → ",
-                  review.locale
+                  review.locale.toUpperCase(),
+                  " · ",
+                  review.entity
                 ]
               })
             ]
@@ -73,86 +86,106 @@ var Detail = ({ adminRoute, review, onlyIssues, tab }) => {
           })
         ]
       }),
+      /* @__PURE__ */ jsx("div", {
+        className: "tr__stats",
+        children: counters.map((counter) => /* @__PURE__ */ jsxs("div", {
+          className: "tr__stat",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: "tr__stat-label",
+              children: counter.label
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: "tr__stat-value",
+              children: counter.value
+            }),
+            counter.bar && /* @__PURE__ */ jsx("div", {
+              className: "tr__bar",
+              style: { ["--tr-tone"]: `var(--tr-${tone})` },
+              children: /* @__PURE__ */ jsx("span", {
+                style: { width: `${summary.coverage}%` }
+              })
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: "tr__stat-note",
+              children: counter.note
+            })
+          ]
+        }, counter.label))
+      }),
       /* @__PURE__ */ jsxs("div", {
-        className: "translator-review__meta",
+        className: "tr__meta",
         children: [
-          /* @__PURE__ */ jsxs("span", {
-            children: [
-              summary.ok,
-              "/",
-              summary.total,
-              " translated (",
-              summary.coverage,
-              "%)"
-            ]
-          }),
-          summary.missing > 0 && /* @__PURE__ */ jsxs("span", {
-            children: [
-              summary.missing,
-              " missing"
-            ]
-          }),
-          summary.identical > 0 && /* @__PURE__ */ jsxs("span", {
-            children: [
-              summary.identical,
-              " same as ",
-              review.defaultLocale
-            ]
-          }),
-          summary.placeholders > 0 && /* @__PURE__ */ jsxs("span", {
-            children: [
-              summary.placeholders,
-              " placeholder mismatches"
-            ]
-          }),
           summary.slugMissing && /* @__PURE__ */ jsxs("span", {
-            className: "translator-review__error",
+            className: "tr__chip tr__chip--bad",
             children: [
-              "no slug, the page 404s in ",
+              "no slug: the page 404s in ",
               review.locale
             ]
           }),
           review.stale && /* @__PURE__ */ jsx("span", {
-            children: "source changed since the last translation"
+            className: "tr__chip",
+            children: "↻ source changed since the last translation"
           }),
           review.translatedAt && /* @__PURE__ */ jsxs("span", {
+            className: "tr__chip",
             children: [
               "translated ",
               new Date(review.translatedAt).toLocaleString()
             ]
           }),
           review.reviewedAt && /* @__PURE__ */ jsxs("span", {
+            className: "tr__chip",
             children: [
-              "reviewed ",
+              "✓ reviewed ",
               new Date(review.reviewedAt).toLocaleString(),
               " by ",
               review.reviewedBy
             ]
           }),
           review.lastJob && /* @__PURE__ */ jsxs("span", {
-            className: review.lastJob.error ? "translator-review__error" : undefined,
+            className: `tr__chip${review.lastJob.error ? " tr__chip--bad" : ""}`,
+            title: review.lastJob.error,
             children: [
-              "last auto-translate job #",
+              "job #",
               review.lastJob.id,
               ": ",
-              review.lastJob.error ? `failed — ${preview(review.lastJob.error)}` : review.lastJob.completedAt ? "completed" : review.lastJob.processing ? "running" : "queued"
+              review.lastJob.error ? `failed — ${preview(review.lastJob.error).slice(0, 80)}` : review.lastJob.completedAt ? "completed" : review.lastJob.processing ? "running" : "queued"
             ]
           }),
           /* @__PURE__ */ jsxs("a", {
+            className: "tr__chip",
             href: editHref(adminRoute, review, review.locale),
             children: [
               "Edit in ",
-              review.locale
+              review.locale.toUpperCase(),
+              " ↗"
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "tr__toolbar",
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            className: "tr__filters",
+            children: [
+              rows.length,
+              " of ",
+              review.fields.length,
+              " fields"
             ]
           }),
           /* @__PURE__ */ jsx("a", {
-            href: reviewHref(adminRoute, { tab, entity: review.entity, locale: review.locale, issues: onlyIssues ? undefined : 1 }),
-            children: onlyIssues ? "Show all fields" : "Show only problems"
+            "aria-pressed": onlyIssues,
+            className: "tr__toggle",
+            href: reviewHref(adminRoute, { tab, page, entity: review.entity, locale: review.locale, issues: onlyIssues ? undefined : 1 }),
+            children: "Only problems"
           })
         ]
       }),
       /* @__PURE__ */ jsx("div", {
-        className: "translator-review__scroll",
+        className: "tr__card",
         children: /* @__PURE__ */ jsxs("table", {
           children: [
             /* @__PURE__ */ jsx("thead", {
@@ -165,10 +198,10 @@ var Detail = ({ adminRoute, review, onlyIssues, tab }) => {
                     children: "State"
                   }),
                   /* @__PURE__ */ jsx("th", {
-                    children: review.defaultLocale
+                    children: review.defaultLocale.toUpperCase()
                   }),
                   /* @__PURE__ */ jsx("th", {
-                    children: review.locale
+                    children: review.locale.toUpperCase()
                   })
                 ]
               })
@@ -178,28 +211,30 @@ var Detail = ({ adminRoute, review, onlyIssues, tab }) => {
                 rows.map((field) => /* @__PURE__ */ jsxs("tr", {
                   children: [
                     /* @__PURE__ */ jsx("td", {
-                      className: "translator-review__path",
+                      className: "tr__path",
                       title: field.path,
                       children: readablePath(field.path)
                     }),
                     /* @__PURE__ */ jsx("td", {
                       children: /* @__PURE__ */ jsx("span", {
-                        className: `translator-review__state translator-review__state--${field.state}`,
-                        children: STATE_LABEL[field.state]
+                        className: "tr__pill",
+                        "data-tone": STATE[field.state].tone,
+                        children: STATE[field.state].label
                       })
                     }),
                     /* @__PURE__ */ jsx("td", {
-                      className: "translator-review__text",
+                      className: "tr__text",
                       children: preview(field.sourceText)
                     }),
                     /* @__PURE__ */ jsx("td", {
-                      className: `translator-review__text${field.targetText.trim() ? "" : " translator-review__text--empty"}`,
+                      className: `tr__text${field.targetText.trim() ? "" : " tr__text--empty"}`,
                       children: field.targetText.trim() ? preview(field.targetText) : "empty"
                     })
                   ]
                 }, field.path)),
                 rows.length === 0 && /* @__PURE__ */ jsx("tr", {
                   children: /* @__PURE__ */ jsx("td", {
+                    className: "tr__empty",
                     colSpan: 4,
                     children: "Every field is translated."
                   })
@@ -215,24 +250,55 @@ var Detail = ({ adminRoute, review, onlyIssues, tab }) => {
 
 // src/review/view/Overview.tsx
 import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
-var cellTone = ({ summary, stale }) => [
-  "translator-review__cell",
-  summary.slugMissing || summary.coverage === 0 ? "translator-review__cell--missing" : summary.coverage === 100 ? "translator-review__cell--ok" : "translator-review__cell--partial",
-  stale ? "translator-review__cell--stale" : ""
-].filter(Boolean).join(" ");
-var hasIssue = ({ summary, stale, reviewed }) => summary.coverage < 100 || summary.slugMissing || stale || !reviewed;
-var Overview = ({ adminRoute, defaultLocale, entities, locales, onlyIssues, tab }) => {
-  const rows = onlyIssues ? entities.filter((entity) => Object.values(entity.locales).some((each) => each.summary.coverage < 100 || each.summary.slugMissing || each.stale)) : entities;
-  const totals = Object.fromEntries(locales.map((locale) => {
+var toneOf = ({ summary }) => summary.slugMissing || summary.coverage < 50 ? "bad" : summary.coverage < 100 ? "warn" : "ok";
+var coverageTone = (coverage) => coverage < 50 ? "bad" : coverage < 100 ? "warn" : "ok";
+var isIncomplete = ({ summary, stale }) => summary.coverage < 100 || summary.slugMissing || stale;
+var Overview = ({ adminRoute, defaultLocale, entities, locales, onlyIssues, tab, page }) => {
+  const rows = onlyIssues ? entities.filter((entity) => Object.values(entity.locales).some(isIncomplete)) : entities;
+  const stats = locales.map((locale) => {
     const reviews = entities.map((entity) => entity.locales[locale]);
     const fields = reviews.reduce((sum, each) => sum + each.summary.total, 0);
     const ok = reviews.reduce((sum, each) => sum + each.summary.ok, 0);
-    return [locale, fields ? Math.floor(ok / fields * 100) : 100];
-  }));
+    return {
+      locale,
+      coverage: fields ? Math.floor(ok / fields * 100) : 100,
+      incomplete: reviews.filter(isIncomplete).length
+    };
+  });
   return /* @__PURE__ */ jsxs2(Fragment2, {
     children: [
       /* @__PURE__ */ jsx2("div", {
-        className: "translator-review__scroll",
+        className: "tr__stats",
+        children: stats.map(({ locale, coverage, incomplete }) => /* @__PURE__ */ jsxs2("div", {
+          className: "tr__stat",
+          children: [
+            /* @__PURE__ */ jsx2("span", {
+              className: "tr__stat-label",
+              children: locale
+            }),
+            /* @__PURE__ */ jsxs2("span", {
+              className: "tr__stat-value",
+              children: [
+                coverage,
+                "%"
+              ]
+            }),
+            /* @__PURE__ */ jsx2("div", {
+              className: "tr__bar",
+              style: { ["--tr-tone"]: `var(--tr-${coverageTone(coverage)})` },
+              children: /* @__PURE__ */ jsx2("span", {
+                style: { width: `${coverage}%` }
+              })
+            }),
+            /* @__PURE__ */ jsx2("span", {
+              className: "tr__stat-note",
+              children: incomplete ? `${incomplete} incomplete` : "all complete"
+            })
+          ]
+        }, locale))
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        className: "tr__card",
         children: /* @__PURE__ */ jsxs2("table", {
           children: [
             /* @__PURE__ */ jsx2("thead", {
@@ -241,17 +307,9 @@ var Overview = ({ adminRoute, defaultLocale, entities, locales, onlyIssues, tab
                   /* @__PURE__ */ jsx2("th", {
                     children: "Document"
                   }),
-                  locales.map((locale) => /* @__PURE__ */ jsxs2("th", {
-                    children: [
-                      locale,
-                      " ",
-                      /* @__PURE__ */ jsxs2("small", {
-                        children: [
-                          totals[locale],
-                          "%"
-                        ]
-                      })
-                    ]
+                  locales.map((locale) => /* @__PURE__ */ jsx2("th", {
+                    className: "tr__locale-col",
+                    children: locale.toUpperCase()
                   }, locale))
                 ]
               })
@@ -261,37 +319,56 @@ var Overview = ({ adminRoute, defaultLocale, entities, locales, onlyIssues, tab
                 rows.map((entity) => /* @__PURE__ */ jsxs2("tr", {
                   children: [
                     /* @__PURE__ */ jsxs2("td", {
-                      className: "translator-review__doc",
+                      className: "tr__doc",
                       children: [
                         /* @__PURE__ */ jsx2("a", {
                           href: editHref(adminRoute, entity, defaultLocale),
                           children: entity.label
                         }),
-                        /* @__PURE__ */ jsx2("small", {
+                        /* @__PURE__ */ jsx2("span", {
+                          className: "tr__key",
                           children: entity.key
                         })
                       ]
                     }),
                     locales.map((locale) => {
                       const review = entity.locales[locale];
+                      const { summary } = review;
                       const title = [
-                        `${review.summary.ok}/${review.summary.total} fields translated`,
-                        review.summary.missing && `${review.summary.missing} missing`,
-                        review.summary.identical && `${review.summary.identical} same as ${defaultLocale}`,
-                        review.summary.placeholders && `${review.summary.placeholders} broken placeholders`,
-                        review.summary.slugMissing && "no slug: page 404s",
-                        review.stale && `source changed since translation`,
+                        `${summary.ok}/${summary.total} fields translated`,
+                        summary.missing && `${summary.missing} missing`,
+                        summary.identical && `${summary.identical} same as ${defaultLocale}`,
+                        summary.placeholders && `${summary.placeholders} broken placeholders`,
+                        summary.slugMissing && "no slug: the page 404s",
+                        review.stale && "source changed since translation",
                         review.reviewed && "reviewed"
                       ].filter(Boolean).join(" · ");
                       return /* @__PURE__ */ jsx2("td", {
+                        className: "tr__locale-col",
                         children: /* @__PURE__ */ jsxs2("a", {
-                          className: cellTone(review),
-                          href: reviewHref(adminRoute, { tab, entity: entity.key, locale, issues: hasIssue(review) ? 1 : undefined }),
+                          className: "tr__cell",
+                          "data-tone": toneOf(review),
+                          href: reviewHref(adminRoute, { tab, page, entity: entity.key, locale, issues: isIncomplete(review) ? 1 : undefined }),
                           title,
                           children: [
-                            review.summary.slugMissing ? "404" : `${review.summary.coverage}%`,
-                            review.reviewed ? " ✓" : "",
-                            review.stale ? " ↻" : ""
+                            /* @__PURE__ */ jsxs2("span", {
+                              children: [
+                                summary.slugMissing ? "404" : `${summary.coverage}%`,
+                                (review.stale || review.reviewed) && /* @__PURE__ */ jsxs2("span", {
+                                  className: "tr__marks",
+                                  children: [
+                                    " ",
+                                    [review.stale && "↻", review.reviewed && "✓"].filter(Boolean).join(" ")
+                                  ]
+                                })
+                              ]
+                            }),
+                            /* @__PURE__ */ jsx2("span", {
+                              className: "tr__bar",
+                              children: /* @__PURE__ */ jsx2("span", {
+                                style: { width: `${summary.slugMissing ? 100 : summary.coverage}%` }
+                              })
+                            })
                           ]
                         })
                       }, locale);
@@ -300,8 +377,9 @@ var Overview = ({ adminRoute, defaultLocale, entities, locales, onlyIssues, tab
                 }, entity.key)),
                 rows.length === 0 && /* @__PURE__ */ jsx2("tr", {
                   children: /* @__PURE__ */ jsx2("td", {
+                    className: "tr__empty",
                     colSpan: locales.length + 1,
-                    children: "Nothing to review here."
+                    children: "Everything here is fully translated."
                   })
                 })
               ]
@@ -310,19 +388,40 @@ var Overview = ({ adminRoute, defaultLocale, entities, locales, onlyIssues, tab
         })
       }),
       /* @__PURE__ */ jsxs2("div", {
-        className: "translator-review__legend",
+        className: "tr__legend",
         children: [
-          /* @__PURE__ */ jsx2("span", {
-            children: "% share of fields translated"
+          /* @__PURE__ */ jsxs2("span", {
+            children: [
+              /* @__PURE__ */ jsx2("i", {
+                className: "tr__dot",
+                style: { ["--tr-tone"]: "var(--tr-ok)" }
+              }),
+              "fully translated"
+            ]
           }),
-          /* @__PURE__ */ jsx2("span", {
-            children: "404 no slug in that locale"
+          /* @__PURE__ */ jsxs2("span", {
+            children: [
+              /* @__PURE__ */ jsx2("i", {
+                className: "tr__dot",
+                style: { ["--tr-tone"]: "var(--tr-warn)" }
+              }),
+              "partly translated"
+            ]
+          }),
+          /* @__PURE__ */ jsxs2("span", {
+            children: [
+              /* @__PURE__ */ jsx2("i", {
+                className: "tr__dot",
+                style: { ["--tr-tone"]: "var(--tr-bad)" }
+              }),
+              "under half, or 404 without a slug"
+            ]
           }),
           /* @__PURE__ */ jsx2("span", {
             children: "↻ source changed since the last translation"
           }),
           /* @__PURE__ */ jsx2("span", {
-            children: "✓ reviewed against the current source"
+            children: "✓ reviewed"
           })
         ]
       })
@@ -330,8 +429,93 @@ var Overview = ({ adminRoute, defaultLocale, entities, locales, onlyIssues, tab
   });
 };
 
+// src/review/view/styles.ts
+var reviewStyles = `
+.tr { --tr-ok: var(--theme-success-500); --tr-ok-bg: var(--theme-success-100); --tr-warn: var(--theme-warning-500); --tr-warn-bg: var(--theme-warning-100); --tr-bad: var(--theme-error-500); --tr-bad-bg: var(--theme-error-100); --tr-line: var(--theme-elevation-100); --tr-muted: var(--theme-elevation-500); --tr-card: var(--theme-elevation-50); padding-block: calc(var(--base) * 2) calc(var(--base) * 4); }
+.tr a { text-decoration: none; color: inherit; }
+.tr__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--base); margin-bottom: calc(var(--base) * 1.5); }
+.tr__head h1 { margin: 0 0 4px; }
+.tr__lead { margin: 0; color: var(--tr-muted); max-width: 60ch; }
+.tr__back { display: inline-flex; gap: 6px; color: var(--tr-muted); font-size: 13px; margin-bottom: 8px; }
+.tr__back:hover { color: var(--theme-text); }
+
+.tr__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: calc(var(--base) * 1.5); }
+.tr__stat { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--tr-line); border-radius: var(--style-radius-m); background: var(--tr-card); }
+.tr__stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tr-muted); }
+.tr__stat-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
+.tr__stat-note { font-size: 12px; color: var(--tr-muted); }
+
+.tr__bar { height: 4px; border-radius: 999px; background: var(--theme-elevation-150); overflow: hidden; }
+.tr__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--tr-tone, var(--tr-ok)); }
+
+.tr__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
+.tr__tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--theme-elevation-100); }
+.tr__tab { padding: 5px 14px; border-radius: 999px; font-size: 13px; color: var(--theme-elevation-700); text-transform: capitalize; }
+.tr__tab:hover { color: var(--theme-text); }
+.tr__tab[aria-current='true'] { background: var(--theme-elevation-0); color: var(--theme-text); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
+.tr__filters { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tr-muted); }
+.tr__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--tr-line); border-radius: 999px; color: var(--theme-elevation-800); }
+.tr__toggle::before { content: ''; width: 26px; height: 14px; border-radius: 999px; background: var(--theme-elevation-200) radial-gradient(circle at 7px 50%, var(--theme-elevation-0) 4px, transparent 4.5px); }
+.tr__toggle[aria-pressed='true']::before { background: var(--tr-ok) radial-gradient(circle at 19px 50%, var(--theme-elevation-0) 4px, transparent 4.5px); }
+
+.tr__bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: calc(var(--base) * 1.25); padding: 10px 12px; border: 1px dashed var(--tr-line); border-radius: var(--style-radius-m); }
+.tr__bulk-main, .tr__bulk-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.tr__bulk .btn { margin: 0; }
+.tr__select { height: 28px; padding: 0 8px; border: 1px solid var(--tr-line); border-radius: var(--style-radius-s, 4px); background: var(--theme-input-bg, var(--theme-elevation-0)); color: var(--theme-text); font: inherit; font-size: 13px; }
+.tr__card { border: 1px solid var(--tr-line); border-radius: var(--style-radius-m); overflow: auto; background: var(--theme-elevation-0); }
+.tr table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
+.tr th { position: sticky; top: 0; z-index: 1; background: var(--tr-card); text-align: left; font-weight: 500; color: var(--tr-muted); padding: 10px 12px; border-bottom: 1px solid var(--tr-line); white-space: nowrap; }
+.tr th small { display: block; font-size: 11px; font-weight: 400; }
+.tr td { padding: 6px 12px; border-bottom: 1px solid var(--tr-line); vertical-align: middle; }
+.tr tbody tr:last-child td { border-bottom: 0; }
+.tr tbody tr:hover td { background: var(--theme-elevation-50); }
+.tr__locale-col { text-align: center !important; }
+.tr__doc { min-width: 240px; }
+.tr__doc a { font-weight: 500; }
+.tr__doc a:hover { text-decoration: underline; }
+.tr__key { display: block; margin-top: 2px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--tr-muted); }
+
+.tr__cell { display: flex; flex-direction: column; gap: 4px; min-width: 64px; padding: 6px 8px; border-radius: 6px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; transition: background .12s; }
+.tr__cell:hover { background: var(--theme-elevation-100); }
+.tr__cell[data-tone='ok'] { --tr-tone: var(--tr-ok); color: var(--tr-ok); }
+.tr__cell[data-tone='warn'] { --tr-tone: var(--tr-warn); color: var(--tr-warn); }
+.tr__cell[data-tone='bad'] { --tr-tone: var(--tr-bad); color: var(--tr-bad); }
+.tr__marks { font-size: 11px; color: var(--tr-muted); }
+
+.tr__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: var(--tr-muted); }
+.tr__legend span { display: inline-flex; align-items: center; gap: 6px; }
+.tr__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tr-tone); }
+
+.tr__pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--tr-muted); }
+.tr__pager nav { display: inline-flex; gap: 6px; }
+.tr__pager a, .tr__pager span[aria-disabled] { padding: 5px 12px; border: 1px solid var(--tr-line); border-radius: 999px; color: var(--theme-elevation-800); }
+.tr__pager span[aria-disabled] { opacity: .4; }
+.tr__pager a:hover { background: var(--theme-elevation-100); }
+
+.tr__pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--theme-elevation-100); }
+.tr__pill::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
+.tr__pill[data-tone='ok'] { color: var(--tr-ok); background: var(--tr-ok-bg); }
+.tr__pill[data-tone='warn'] { color: var(--tr-warn); background: var(--tr-warn-bg); }
+.tr__pill[data-tone='bad'] { color: var(--tr-bad); background: var(--tr-bad-bg); }
+
+.tr__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
+.tr__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--tr-line); border-radius: 999px; font-size: 12px; color: var(--theme-elevation-800); }
+.tr__chip--bad { color: var(--tr-bad); border-color: var(--tr-bad); }
+a.tr__chip:hover { background: var(--theme-elevation-100); }
+
+.tr__path { width: 22%; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--theme-elevation-700); word-break: break-word; }
+.tr__text { width: 34%; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
+.tr__text--empty { color: var(--tr-muted); font-style: italic; }
+.tr__empty { padding: 32px; text-align: center; color: var(--tr-muted); }
+.tr__error { color: var(--tr-bad); }
+
+.translator-review__actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.translator-review__actions .btn { margin: 0; }
+`;
+
 // src/review/view/TranslationsView.tsx
 import { jsx as jsx3, jsxs as jsxs3, Fragment as Fragment3 } from "react/jsx-runtime";
+var PAGE_SIZE = 50;
 var param = (value) => Array.isArray(value) ? value[0] : value;
 var TranslationsView = async ({ initPageResult, params, searchParams }) => {
   const { req, permissions, visibleEntities, locale } = initPageResult;
@@ -350,6 +534,7 @@ var TranslationsView = async ({ initPageResult, params, searchParams }) => {
   const content = async () => {
     if (!req.user)
       return /* @__PURE__ */ jsx3("p", {
+        className: "tr__empty",
         children: "Log in to review translations."
       });
     if (!tab)
@@ -362,12 +547,13 @@ var TranslationsView = async ({ initPageResult, params, searchParams }) => {
         return /* @__PURE__ */ jsx3(Detail, {
           adminRoute,
           onlyIssues,
+          page,
           review,
           tab
         });
       } catch (error) {
         return /* @__PURE__ */ jsxs3("p", {
-          className: "translator-review__error",
+          className: "tr__error",
           children: [
             "Could not load ",
             entity,
@@ -388,7 +574,10 @@ var TranslationsView = async ({ initPageResult, params, searchParams }) => {
         tab
       });
     }
-    const review = await loadCollectionReview({ req, collectionSlug: tab, page });
+    const review = await loadCollectionReview({ req, collectionSlug: tab, page, limit: PAGE_SIZE });
+    const first = review.totalDocs ? (review.page - 1) * PAGE_SIZE + 1 : 0;
+    const last = Math.min(review.page * PAGE_SIZE, review.totalDocs);
+    const pageHref = (target) => reviewHref(adminRoute, { tab, page: target, issues: onlyIssues ? 1 : undefined });
     return /* @__PURE__ */ jsxs3(Fragment3, {
       children: [
         /* @__PURE__ */ jsx3(Overview, {
@@ -397,29 +586,47 @@ var TranslationsView = async ({ initPageResult, params, searchParams }) => {
           entities: review.entities,
           locales: review.locales,
           onlyIssues,
+          page,
           tab
         }),
-        review.totalPages > 1 && /* @__PURE__ */ jsxs3("div", {
-          className: "translator-review__pager",
+        /* @__PURE__ */ jsxs3("div", {
+          className: "tr__pager",
           children: [
-            page > 1 && /* @__PURE__ */ jsx3("a", {
-              href: reviewHref(adminRoute, { tab, page: page - 1, issues: onlyIssues ? 1 : undefined }),
-              children: "← Newer"
-            }),
             /* @__PURE__ */ jsxs3("span", {
               children: [
-                "Page ",
-                page,
+                first,
+                "–",
+                last,
                 " of ",
-                review.totalPages,
-                " · ",
                 review.totalDocs,
-                " documents"
+                " documents",
+                onlyIssues ? " (complete ones hidden)" : ""
               ]
             }),
-            page < review.totalPages && /* @__PURE__ */ jsx3("a", {
-              href: reviewHref(adminRoute, { tab, page: page + 1, issues: onlyIssues ? 1 : undefined }),
-              children: "Older →"
+            review.totalPages > 1 && /* @__PURE__ */ jsxs3("nav", {
+              children: [
+                review.page > 1 ? /* @__PURE__ */ jsx3("a", {
+                  href: pageHref(review.page - 1),
+                  children: "← Newer"
+                }) : /* @__PURE__ */ jsx3("span", {
+                  "aria-disabled": true,
+                  children: "← Newer"
+                }),
+                /* @__PURE__ */ jsxs3("span", {
+                  children: [
+                    review.page,
+                    " / ",
+                    review.totalPages
+                  ]
+                }),
+                review.page < review.totalPages ? /* @__PURE__ */ jsx3("a", {
+                  href: pageHref(review.page + 1),
+                  children: "Older →"
+                }) : /* @__PURE__ */ jsx3("span", {
+                  "aria-disabled": true,
+                  children: "Older →"
+                })
+              ]
             })
           ]
         })
@@ -427,6 +634,7 @@ var TranslationsView = async ({ initPageResult, params, searchParams }) => {
     });
   };
   const adminLocale = req.locale;
+  const progress = entity || !req.user ? null : await loadJobsProgress(req);
   const body = await content();
   req.locale = adminLocale;
   return /* @__PURE__ */ jsxs3(DefaultTemplate, {
@@ -439,32 +647,56 @@ var TranslationsView = async ({ initPageResult, params, searchParams }) => {
     user: req.user || undefined,
     visibleEntities,
     children: [
-      /* @__PURE__ */ jsx3(ReviewStyles, {}),
+      /* @__PURE__ */ jsx3("style", {
+        dangerouslySetInnerHTML: { __html: reviewStyles }
+      }),
       /* @__PURE__ */ jsxs3(Gutter, {
-        className: "translator-review",
+        className: "tr",
         children: [
           !entity && /* @__PURE__ */ jsxs3(Fragment3, {
             children: [
+              /* @__PURE__ */ jsx3("div", {
+                className: "tr__head",
+                children: /* @__PURE__ */ jsxs3("div", {
+                  children: [
+                    /* @__PURE__ */ jsx3("h1", {
+                      children: "Translations"
+                    }),
+                    /* @__PURE__ */ jsxs3("p", {
+                      className: "tr__lead",
+                      children: [
+                        "How much of each document is translated from ",
+                        defaultLocale.toUpperCase(),
+                        ". Open a cell to compare it field by field."
+                      ]
+                    })
+                  ]
+                })
+              }),
               /* @__PURE__ */ jsxs3("div", {
-                className: "translator-review__header",
+                className: "tr__toolbar",
                 children: [
-                  /* @__PURE__ */ jsx3("h1", {
-                    children: "Translations"
+                  /* @__PURE__ */ jsx3("nav", {
+                    className: "tr__tabs",
+                    children: tabs.map((each) => /* @__PURE__ */ jsx3("a", {
+                      "aria-current": each === tab,
+                      className: "tr__tab",
+                      href: reviewHref(adminRoute, { tab: each, issues: onlyIssues ? 1 : undefined }),
+                      children: each
+                    }, each))
                   }),
                   /* @__PURE__ */ jsx3("a", {
+                    "aria-pressed": onlyIssues,
+                    className: "tr__toggle",
                     href: reviewHref(adminRoute, { tab, issues: onlyIssues ? undefined : 1 }),
-                    children: onlyIssues ? "Show everything" : "Show only incomplete"
+                    children: "Only incomplete"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx3("nav", {
-                className: "translator-review__tabs",
-                children: tabs.map((each) => /* @__PURE__ */ jsx3("a", {
-                  "aria-current": each === tab,
-                  className: "translator-review__tab",
-                  href: reviewHref(adminRoute, { tab: each, issues: onlyIssues ? 1 : undefined }),
-                  children: each
-                }, each))
+              req.user && tab && /* @__PURE__ */ jsx3(BulkActions, {
+                locales: targetLocales,
+                progress,
+                tab
               })
             ]
           }),