@focus-reactive/payload-plugin-translator 0.7.2 → 0.8.0

package/dist/client/features/collection-translation-progress/ui/CollectionTranslationProgress.js

@@ -1,107 +1,114 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ShimmerEffect } from "@payloadcms/ui";
 import { TrashIcon } from "@payloadcms/ui/icons/Trash";
-import { TranslationsApi } from "../../../entities/translation";
-import { LanguageTranslateIcon } from "../../../shared/lib/assets/icons/LanguageTranslateIcon";
-import Button from "../../../shared/ui/Button";
-import StatusIndicator from "../../../shared/ui/StatusIndicator";
-import Tooltip from "../../../shared/ui/Tooltip";
+import { ActionButton, DocumentTranslationStatus, TranslationsApi } from "../../../entities/translation";
+import ColorIndicator from "../../../shared/ui/ColorIndicator";
 import styles from "./styles.module.scss";
-export function CollectionTranslationProgress({ collection, data, isPending }) {
+// Same colour + label vocabulary as the document status list (StatusBadge STATE_LABEL). Only the
+// actively-processing group pulses — Queued is waiting, not working, so it stays static.
+const ROWS = [
+    {
+        key: DocumentTranslationStatus.RUNNING,
+        label: "Translating",
+        color: "blue"
+    },
+    {
+        key: DocumentTranslationStatus.PENDING,
+        label: "Queued",
+        color: "gray"
+    },
+    {
+        key: DocumentTranslationStatus.COMPLETED,
+        label: "Translated",
+        color: "green"
+    },
+    {
+        key: DocumentTranslationStatus.FAILED,
+        label: "Failed",
+        color: "red"
+    }
+];
+/**
+ * Collection status as a compact list of grouped counts — one `[dot] label … count` row per
+ * non-zero group, mirroring the document popup's per-locale list rhythm (dot vocabulary shared).
+ */ export function CollectionTranslationProgress({ collection, data, isPending }) {
     const cancelPendingTranslations = TranslationsApi.useCancelCollectionTranslations();
-    return /*#__PURE__*/ _jsxs("div", {
-        className: styles.container,
-        children: [
-            isPending && /*#__PURE__*/ _jsxs(_Fragment, {
+    if (isPending) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: styles["status-list"],
+            children: [
+                /*#__PURE__*/ _jsx(ShimmerEffect, {
+                    width: "100%",
+                    height: 20
+                }),
+                /*#__PURE__*/ _jsx(ShimmerEffect, {
+                    width: "100%",
+                    height: 20
+                }),
+                /*#__PURE__*/ _jsx(ShimmerEffect, {
+                    width: "100%",
+                    height: 20
+                })
+            ]
+        });
+    }
+    if (!data) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("ul", {
+        className: styles["status-list"],
+        children: ROWS.map(({ key, label, color })=>{
+            const count = data[key].length;
+            if (count === 0) {
+                return null;
+            }
+            return /*#__PURE__*/ _jsxs("li", {
+                className: styles["status-row"],
                 children: [
-                    /*#__PURE__*/ _jsx(ShimmerEffect, {
-                        width: "100%",
-                        height: 32
-                    }),
-                    /*#__PURE__*/ _jsx(ShimmerEffect, {
-                        width: "100%",
-                        height: 32
-                    }),
-                    /*#__PURE__*/ _jsx(ShimmerEffect, {
-                        width: "100%",
-                        height: 32
-                    }),
-                    /*#__PURE__*/ _jsx(ShimmerEffect, {
-                        width: "100%",
-                        height: 32
-                    })
-                ]
-            }),
-            data && /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsxs(StatusIndicator, {
-                        className: styles["status-indicator"],
-                        title: "Completed",
-                        $color: "green",
-                        children: [
-                            /*#__PURE__*/ _jsx(LanguageTranslateIcon, {}),
-                            /*#__PURE__*/ _jsx("b", {
-                                children: data.completed.length
-                            })
-                        ]
-                    }, "completed"),
-                    /*#__PURE__*/ _jsxs(StatusIndicator, {
-                        className: styles["status-indicator"],
-                        title: "Failed",
-                        $color: "red",
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.top,
                         children: [
-                            /*#__PURE__*/ _jsx(LanguageTranslateIcon, {}),
-                            /*#__PURE__*/ _jsx("b", {
-                                children: data.failed.length
-                            })
-                        ]
-                    }, "failed"),
-                    /*#__PURE__*/ _jsxs(StatusIndicator, {
-                        className: styles["status-indicator"],
-                        title: "In progress",
-                        $animated: data.running.length > 0,
-                        $color: "blue",
-                        children: [
-                            /*#__PURE__*/ _jsx(LanguageTranslateIcon, {}),
-                            /*#__PURE__*/ _jsx("b", {
-                                children: data.running.length
-                            })
-                        ]
-                    }, "running"),
-                    /*#__PURE__*/ _jsxs(StatusIndicator, {
-                        className: styles["status-indicator"],
-                        title: "Pending",
-                        $animated: data.pending.length > 0,
-                        $color: "gray",
-                        children: [
-                            /*#__PURE__*/ _jsx(LanguageTranslateIcon, {}),
-                            /*#__PURE__*/ _jsx("b", {
-                                children: data.pending.length
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: styles.lead,
+                                children: [
+                                    /*#__PURE__*/ _jsx(ColorIndicator, {
+                                        $color: color,
+                                        $animated: key === DocumentTranslationStatus.RUNNING
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.label,
+                                        children: label
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ _jsx(Tooltip, {
-                                sideOffset: 12,
-                                side: "bottom",
-                                content: "Cancel translations",
-                                children: /*#__PURE__*/ _jsx(Button, {
-                                    $variant: "light",
-                                    $size: "sm",
-                                    $isIconButton: true,
-                                    "aria-label": "Cancel all queued translation",
-                                    type: "button",
-                                    onClick: ()=>cancelPendingTranslations.mutateAsync({
-                                            collection
-                                        }),
-                                    disabled: cancelPendingTranslations.isPending || !data.pending.length,
-                                    $isLoading: cancelPendingTranslations.isPending,
-                                    children: /*#__PURE__*/ _jsx(TrashIcon, {})
-                                })
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: styles.right,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.count,
+                                        children: count
+                                    }),
+                                    key === DocumentTranslationStatus.PENDING && /*#__PURE__*/ _jsx(ActionButton, {
+                                        icon: /*#__PURE__*/ _jsx(TrashIcon, {}),
+                                        title: "Cancel translations",
+                                        onClick: ()=>cancelPendingTranslations.mutateAsync({
+                                                collection
+                                            }),
+                                        disabled: cancelPendingTranslations.isPending,
+                                        loading: cancelPendingTranslations.isPending
+                                    })
+                                ]
                             })
                         ]
-                    }, "pending")
+                    }),
+                    key === DocumentTranslationStatus.FAILED && /*#__PURE__*/ _jsx("p", {
+                        className: styles.meta,
+                        children: "Open a document to see why"
+                    })
                 ]
-            })
-        ]
+            }, key);
+        })
     });
 }
 

package/dist/client/features/collection-translation-progress/ui/styles.module.scss

@@ -1,8 +1,57 @@
-.container {
+.status-list {
   display: flex;
+  flex-direction: column;
   gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.status-indicator {
-  flex-grow: 1;
+.status-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  font-size: 0.8125rem;
+}
+
+// The count line: [dot + label] left, count (+ action) right.
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-height: 1.5rem; // same first-line height as the document status row
+}
+
+// Hint under a failed group: no per-doc error data here, so point to where detail lives.
+.meta {
+  margin: 0;
+  padding-left: calc(8px + 0.5rem); // align under the label, like the document meta line
+  font-size: 0.6875rem;
+  color: var(--theme-elevation-500, #8c8c8c);
+}
+
+// Dot + label share one flex line so the dot centres on the label.
+.lead {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.label {
+  font-weight: 500;
+  color: var(--theme-text, #222);
+}
+
+.right {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.count {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
 }

package/dist/client/features/open-document-translation-popup/ui/OpenDocumentTranslationPopup.d.ts

@@ -1,9 +1,12 @@
 import type { ReactNode } from "react";
+import type { PanelStatus } from "../../../entities/translation";
 type OpenDocumentTranslationPopupProps = {
     isLoading?: boolean;
+    /** Aggregate translation state → the marker + tooltip on the trigger (detail lives in the popup). */
+    status?: PanelStatus;
     children: (props: {
         close: () => void;
     }) => ReactNode;
 };
-declare function OpenDocumentTranslationPopup({ children, isLoading }: OpenDocumentTranslationPopupProps): import("react/jsx-runtime").JSX.Element;
+declare function OpenDocumentTranslationPopup({ children, isLoading, status, }: OpenDocumentTranslationPopupProps): import("react/jsx-runtime").JSX.Element;
 export default OpenDocumentTranslationPopup;

package/dist/client/features/open-document-translation-popup/ui/OpenDocumentTranslationPopup.js

@@ -1,25 +1,36 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describePanelStatus, PanelStatusMarker } from "../../../entities/translation";
 import { LanguageTranslateIcon } from "../../../shared/lib/assets/icons/LanguageTranslateIcon";
 import { useToggle } from "../../../shared/lib/utils/react/useToggle";
 import Button from "../../../shared/ui/Button";
 import Popup from "../../../shared/ui/Popup";
 import styles from "./styles.module.scss";
-function OpenDocumentTranslationPopup({ children, isLoading }) {
+function OpenDocumentTranslationPopup({ children, isLoading, status }) {
     const [isPopupOpen, popupOpen] = useToggle();
+    const { tone, title } = describePanelStatus(status, "Translate this document");
     return /*#__PURE__*/ _jsx(Popup, {
         $align: "start",
         onOpenChange: popupOpen.setValue,
-        $trigger: /*#__PURE__*/ _jsx(Button, {
+        $trigger: /*#__PURE__*/ _jsxs(Button, {
+            // Explicit: the control is injected into Payload's document `<form>`, so a bare button
+            // would default to type="submit" and save the whole page on click.
+            type: "button",
             $size: "md",
             $variant: "outlined-light",
             $isIconButton: true,
             className: styles["popup-trigger-button"],
-            "aria-label": "Open translation options",
+            "aria-label": `Open translation options — ${title}`,
+            title: title,
             onClick: popupOpen.setTrue,
             disabled: isLoading,
             $isLoading: isLoading,
-            children: /*#__PURE__*/ _jsx(LanguageTranslateIcon, {})
+            children: [
+                /*#__PURE__*/ _jsx(LanguageTranslateIcon, {}),
+                /*#__PURE__*/ _jsx(PanelStatusMarker, {
+                    tone: tone
+                })
+            ]
         }),
         open: isPopupOpen,
         children: /*#__PURE__*/ _jsx("div", {

package/dist/client/features/open-document-translation-popup/ui/styles.module.scss

@@ -1,11 +1,13 @@
 .popup-content {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem 1rem;
-  min-width: 270px;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  width: 18rem; // ~288px — narrow; status rows wrap to 2 lines so the From/To two-up is the width floor
+  max-width: calc(100vw - 24px);
 }
 
 .popup-trigger-button {
   font-size: 1.3rem;
+  position: relative;
 }

package/dist/client/features/translate-document-form/ui/DocumentTranslationForm.js

@@ -17,16 +17,19 @@ export function DocumentTranslationForm({ form, onSubmit, hasDrafts }) {
                     className: styles.row,
                     children: [
                         /*#__PURE__*/ _jsx(FormSelectLocale, {
+                            size: "sm",
                             label: "From",
                             name: FORM_FIELDS.SOURCE_LNG
                         }),
                         /*#__PURE__*/ _jsx(FormSelectLocale, {
+                            size: "sm",
                             label: "To",
                             name: FORM_FIELDS.TARGET_LNG
                         })
                     ]
                 }),
                 /*#__PURE__*/ _jsx(FormSelectStrategy, {
+                    size: "sm",
                     name: FORM_FIELDS.STRATEGY
                 }),
                 hasDrafts && /*#__PURE__*/ _jsx(FormCheckboxPublish, {
@@ -46,10 +49,10 @@ export function DocumentTranslationForm({ form, onSubmit, hasDrafts }) {
                     className: styles["submit-button"],
                     onClick: form.handleSubmit(onSubmit),
                     type: "submit",
-                    $size: "lg",
+                    $size: "sm",
                     $isLoading: form.formState.isSubmitting,
                     $startContent: /*#__PURE__*/ _jsx(SendIcon, {}),
-                    children: "Queue Translation"
+                    children: "Queue translation"
                 })
             ]
         })

package/dist/client/features/translate-document-form/ui/styles.module.scss

@@ -1,7 +1,7 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
   border-width: 0;
   margin: 0;
   padding: 0;
@@ -9,7 +9,13 @@
 
 .row {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
+}
+
+// From / To share the row equally and are allowed to shrink with the narrower popup.
+.row > * {
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 .submit-button {

package/dist/client/shared/lib/assets/icons/AlertTriangleIcon.d.ts

@@ -0,0 +1 @@
+export declare const AlertTriangleIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/client/shared/lib/assets/icons/AlertTriangleIcon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const AlertTriangleIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        children: /*#__PURE__*/ _jsx("path", {
+            fill: "currentColor",
+            d: "M7.14 1.86a1 1 0 011.72 0l6 10.5A1 1 0 0114 14H2a1 1 0 01-.86-1.5l6-10.64zM8 5.75a.75.75 0 00-.75.75v3a.75.75 0 001.5 0v-3A.75.75 0 008 5.75zm0 6.5a.9.9 0 100-1.8.9.9 0 000 1.8z"
+        })
+    });
+
+//# sourceMappingURL=AlertTriangleIcon.js.map

package/dist/client/shared/lib/assets/icons/CheckIcon.d.ts

@@ -0,0 +1 @@
+export declare const CheckIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/client/shared/lib/assets/icons/CheckIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CheckIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        children: /*#__PURE__*/ _jsx("path", {
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M3.5 8.5l3 3 6-7"
+        })
+    });
+
+//# sourceMappingURL=CheckIcon.js.map

package/dist/client/shared/lib/assets/icons/CloseIcon.d.ts

@@ -0,0 +1 @@
+export declare const CloseIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/client/shared/lib/assets/icons/CloseIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CloseIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        children: /*#__PURE__*/ _jsx("path", {
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            d: "M4 4l8 8M12 4l-8 8"
+        })
+    });
+
+//# sourceMappingURL=CloseIcon.js.map

package/dist/client/shared/ui/Button/Button.js

@@ -37,7 +37,8 @@ const Button = /*#__PURE__*/ forwardRef(function Button({ className = "", childr
                 children: $startContent
             }),
             $isLoading ? /*#__PURE__*/ _jsx(Loading, {
-                size: $isIconButton ? "small" : "medium"
+                size: $size,
+                compact: $isIconButton
             }) : children
         ]
     });

package/dist/client/shared/ui/ColorIndicator/ColorIndicator.d.ts

@@ -1,5 +1,5 @@
 type ColorIndicatorProps = {
-    $color: "red" | "green" | "blue" | "gray";
+    $color: "red" | "green" | "blue" | "gray" | "amber";
     $animated?: boolean;
     title?: string;
     className?: string;

package/dist/client/shared/ui/ColorIndicator/styles.module.scss

@@ -21,6 +21,10 @@
   background-color: var(--color-base-250);
 }
 
+.amber-indicator {
+  background-color: #b45309; // amber-700 — matches the panel trigger's out-of-date marker
+}
+
 .animated {
   animation: pulse 2s ease-in-out infinite;
 }

package/dist/client/shared/ui/Label/Label.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentPropsWithRef, ReactElement } from "react";
 type LabelProps = ComponentPropsWithRef<"label"> & {
     label: string | ReactElement;
+    /** Scales the label text to match the control it captions (e.g. a `sm` field gets a smaller label). */
+    $size?: "sm" | "md" | "lg";
 };
 declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
 export default Label;

package/dist/client/shared/ui/Label/Label.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styles from "./styles.module.scss";
-const Label = /*#__PURE__*/ forwardRef(function Label({ children, className = "", label, ...props }, ref) {
+const Label = /*#__PURE__*/ forwardRef(function Label({ children, className = "", label, $size, ...props }, ref) {
+    const sizeClass = $size ? styles[`size-${$size}`] : "";
     return /*#__PURE__*/ _jsxs("label", {
         ref: ref,
-        className: `${styles.label} ${className}`,
+        className: `${styles.label} ${sizeClass} ${className}`,
         ...props,
         children: [
             /*#__PURE__*/ _jsx("span", {

package/dist/client/shared/ui/Label/styles.module.scss

@@ -10,3 +10,14 @@
     padding-bottom: 5px;
   }
 }
+
+// Scale the caption text to the control size so a small field doesn't get an oversized label.
+.size-sm .label__text {
+  font-size: 0.75rem;
+  padding-bottom: 3px;
+}
+
+.size-lg .label__text {
+  font-size: 1.05rem;
+  padding-bottom: 6px;
+}

package/dist/client/shared/ui/Loading/Loading.d.ts

@@ -1,7 +1,11 @@
+import type { LoadingSize } from "./barCount";
 type LoadingProps = {
     text?: string;
     className?: string;
-    size?: "small" | "medium";
+    /** Matches the host control's size; drives how many bars animate (sm → fewer, so it stays legible). */
+    size?: LoadingSize;
+    /** For square/narrow hosts (icon buttons): use the minimum bar count so they fit the width. */
+    compact?: boolean;
 };
-declare function Loading({ text, className, size }: LoadingProps): import("react/jsx-runtime").JSX.Element;
+declare function Loading({ text, className, size, compact }: LoadingProps): import("react/jsx-runtime").JSX.Element;
 export default Loading;

package/dist/client/shared/ui/Loading/Loading.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { getBarCount } from "./barCount";
 import styles from "./styles.module.scss";
-function Loading({ text, className, size = "medium" }) {
+function Loading({ text, className, size = "md", compact }) {
+    const barCount = getBarCount(size, compact);
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames(styles["loading-overlay"], styles["loading-overlay--entering"], className),
         style: {
@@ -10,7 +12,7 @@ function Loading({ text, className, size = "medium" }) {
         children: [
             /*#__PURE__*/ _jsx("div", {
                 className: classNames(styles["loading-overlay__bars"], styles[`loading-overlay__bars_${size}`]),
-                children: new Array(size === "small" ? 2 : 5).fill(null).map((_, index)=>/*#__PURE__*/ _jsx("div", {
+                children: new Array(barCount).fill(null).map((_, index)=>/*#__PURE__*/ _jsx("div", {
                         className: classNames(styles["loading-overlay__bar"], styles[`loading-overlay__bar_size-${size}`])
                     }, index))
             }),

package/dist/client/shared/ui/Loading/barCount.d.ts

@@ -0,0 +1,3 @@
+export type LoadingSize = "sm" | "md" | "lg";
+/** How many animated bars the loading indicator renders for a given host size. */
+export declare function getBarCount(size: LoadingSize, compact?: boolean): number;

package/dist/client/shared/ui/Loading/barCount.js

@@ -0,0 +1,11 @@
+/** Bars per size — a small control with five bars reads as noise, so the count scales down. */ const BAR_COUNT = {
+    sm: 3,
+    md: 4,
+    lg: 5
+};
+/** Square/narrow hosts (icon buttons) always use the minimum so the bars fit the width. */ const COMPACT_BAR_COUNT = 2;
+/** How many animated bars the loading indicator renders for a given host size. */ export function getBarCount(size, compact) {
+    return compact ? COMPACT_BAR_COUNT : BAR_COUNT[size];
+}
+
+//# sourceMappingURL=barCount.js.map