PT-3739 UX follow-on tasks

assets/localization/en.json

@@ -4,7 +4,9 @@
   "%about_db_ip_attribution_terms%": "Terms",
   "%about_licenseLabel_format%": "License: {license}",
   "%about_versionLabel_format%": "Version: {version}",
+  "%acceptButton_tooltip%": "Save",
   "%ariaLabel_opensInBrowser%": "Opens externally in a browser window",
+  "%cancelButton_tooltip%": "Cancel",
   "%commentEditor_assignTo_label%": "Assign to",
   "%commentEditor_cancelButton_tooltip%": "Cancel",
   "%commentEditor_placeholder%": "Type your comment here...",
@@ -33,7 +35,7 @@
   "%footnoteEditor_noteType_footnote_label%": "Footnote",
   "%footnoteEditor_noteType_tooltip%": "Change type: Footnote",
   "%footnoteEditor_noteTypeDropdown_label%": "Type",
-  "%footnoteEditor_saveButton_tooltip%": "Save",
+  "%footnoteEditor_saveButton_tooltip%": "Save footnote",
   "%general_button_submit%": "Submit",
   "%general_cancel%": "Cancel",
   "%general_countOfTotal%": "{count} of {total}",

assets/localization/es.json

@@ -4,6 +4,7 @@
   "%about_db_ip_attribution_terms%": "Licencia",
   "%about_licenseLabel_format%": "Licencia: {license}",
   "%about_versionLabel_format%": "Versión: {version}",
+  "%acceptButton_tooltip%": "Guardar",
   "%ariaLabel_opensInBrowser%": "Se abre externamente en el navegador.",
   "%Book.1CH%": "1 Crónicas",
   "%Book.1CO%": "1 Corintios",
@@ -127,6 +128,7 @@
   "%Book.XXG%": "Extra G",
   "%Book.ZEC%": "Zacarías",
   "%Book.ZEP%": "Sofonías",
+  "%cancelButton_tooltip%": "Cancelar",
   "%commentEditor_assignTo_label%": "Asignar a",
   "%commentEditor_cancelButton_tooltip%": "Cancelar",
   "%commentEditor_placeholder%": "Escribe tu comentario aquí...",
@@ -154,7 +156,7 @@
   "%footnoteEditor_noteType_footnote_label%": "Nota a pie de página",
   "%footnoteEditor_noteType_tooltip%": "Tipo de nota",
   "%footnoteEditor_noteTypeDropdown_label%": "Tipo",
-  "%footnoteEditor_saveButton_tooltip%": "Guardar",
+  "%footnoteEditor_saveButton_tooltip%": "Guardar nota",
   "%general_button_submit%": "Enviar",
   "%general_cancel%": "Cancelar",
   "%general_countOfTotal%": "{count} de {total}",

assets/localization/metadata.json

@@ -5,6 +5,18 @@
   "%about_db_ip_attribution_terms%": {
     "fallbackKey": "%Paratext.Base.SplashScreen.Splash_Load."Terms"%"
   },
+  "%acceptButton_tooltip%": {
+    "fallbackKey": "%Paratext.Checklists.ChecklistsTool.saveToolStripButton.ToolTipText%"
+  },
+  "%cancelButton_tooltip%": {
+    "fallbackKey": "%general_cancel%"
+  },
+  "%commentEditor_cancelButton_tooltip%": {
+    "deprecationInfo": {
+      "date": "2026-04-22",
+      "message": "The comment editor now uses the generic %cancelButton_tooltip% key."
+    }
+  },
   "%data_loading_error_paratextData_internet_disabled%": {
     "deprecationInfo": {
       "date": "2025-09-24",
@@ -15,7 +27,11 @@
     "fallbackKey": "%Paratext.Base.ScriptureEditor.NoteCallerForm.NoteCallerForm.Text%"
   },
   "%footnoteEditor_cancelButton_tooltip%": {
-    "fallbackKey": "%general_cancel%"
+    "fallbackKey": "%general_cancel%",
+    "deprecationInfo": {
+      "date": "2026-04-22",
+      "message": "Prefer the generic %cancelButton_tooltip% key for new code."
+    }
   },
   "%footnoteEditor_noteType_crossReference_label%": {
     "fallbackKey": "%Paratext.TextForm.crossReferenceToolStripMenuItem.Text%"

lib/platform-bible-react/dist/index.d.ts

@@ -196,11 +196,12 @@ export declare function useRecentSearches<T>(recentSearches: T[], setRecentSearc
  */
 export declare const COMMENT_EDITOR_STRING_KEYS: readonly [
 	"%commentEditor_placeholder%",
-	"%commentEditor_saveButton_tooltip%",
-	"%commentEditor_cancelButton_tooltip%",
 	"%commentEditor_assignTo_label%",
+	"%commentEditor_saveButton_tooltip%",
 	"%commentEditor_unassigned%",
-	"%commentEditor_team%"
+	"%commentEditor_team%",
+	"%cancelButton_tooltip%",
+	"%acceptButton_tooltip%"
 ];
 /** Localized strings needed for the comment editor component */
 export type CommentEditorLocalizedStrings = {
@@ -712,7 +713,6 @@ export declare const FOOTNOTE_EDITOR_STRING_KEYS: readonly [
 	"%footnoteEditor_callerDropdown_item_hidden%",
 	"%footnoteEditor_callerDropdown_label%",
 	"%footnoteEditor_callerDropdown_tooltip%",
-	"%footnoteEditor_cancelButton_tooltip%",
 	"%footnoteEditor_copyButton_tooltip%",
 	"%footnoteEditor_noteType_crossReference_label%",
 	"%footnoteEditor_noteType_endNote_label%",
@@ -721,7 +721,9 @@ export declare const FOOTNOTE_EDITOR_STRING_KEYS: readonly [
 	"%footnoteEditor_noteTypeDropdown_label%",
 	"%footnoteEditor_saveButton_tooltip%",
 	"%undoButton_tooltip%",
-	"%redoButton_tooltip%"
+	"%redoButton_tooltip%",
+	"%cancelButton_tooltip%",
+	"%acceptButton_tooltip%"
 ];
 export type FootnoteEditorLocalizedStrings = {
 	[localizedKey in (typeof FOOTNOTE_EDITOR_STRING_KEYS)[number]]: string;
@@ -1719,15 +1721,55 @@ export type ComboBoxProps<T> = {
  */
 export declare function ComboBox<T extends ComboBoxOption = ComboBoxOption>({ id, options, className, buttonClassName, popoverContentClassName, popoverContentStyle, value, onChange, getOptionLabel, getButtonLabel, icon, buttonPlaceholder, textPlaceholder, commandEmptyMessage, buttonVariant, alignDropDown, isDisabled, ariaLabel, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 type EditorKeyboardShortcutsProps = React$1.PropsWithChildren & {
+	/** The `editorRef` of the editor that this undo/redo plugin is applied to */
 	editorRef: React$1.MutableRefObject<EditorRef | null>;
+	/** Whether the Undo button is enabled. */
+	canUndo?: boolean;
+	/** Whether the Redo button is enabled. */
+	canRedo?: boolean;
 };
 /**
  * Component that provides common undo/redo capability for a scripture `Editorial` component. Must
  * have the `Editorial` component instance as a child of this component.
- *
- * @param editorRef The `editorRef` of the editor that this undo/redo plugin is applied to
  */
-export declare function EditorKeyboardShortcuts({ children, editorRef }: EditorKeyboardShortcutsProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorKeyboardShortcuts({ children, editorRef, canUndo, canRedo, }: EditorKeyboardShortcutsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Object containing all keys used for localization in this component. If you're using this
+ * component in an extension, you can pass it into the useLocalizedStrings hook to easily obtain the
+ * localized strings and pass them into the localizedStrings prop of this component.
+ */
+export declare const CANCEL_ACCEPT_BUTTONS_STRING_KEYS: readonly [
+	"%cancelButton_tooltip%",
+	"%acceptButton_tooltip%"
+];
+export type CancelAcceptButtonsLocalizedStrings = {
+	[key in (typeof CANCEL_ACCEPT_BUTTONS_STRING_KEYS)[number]]?: string;
+};
+export type CancelAcceptButtonsProps = {
+	/** Function to call when Cancel is clicked. */
+	onCancelClick: () => void;
+	/** Function to call when Accept is clicked. */
+	onAcceptClick: () => void;
+	/** Whether the Accept button is enabled. */
+	canAccept?: boolean;
+	/**
+	 * Localized strings for button tooltips and aria-labels. Falls back to the key itself if not
+	 * provided.
+	 */
+	localizedStrings?: CancelAcceptButtonsLocalizedStrings;
+	/** CSS class name for the buttons. Defaults to "tw-h-6 tw-w-6". */
+	className?: string;
+	/**
+	 * Optional context-specific label for the accept button (e.g. "Save Comment", "Save Footnote").
+	 * When provided, overrides the generic `%acceptButton_tooltip%` localized string.
+	 */
+	acceptLabel?: string;
+};
+/**
+ * Cancel and Accept buttons with tooltips in a ButtonGroup. Suitable for use in any editor toolbar.
+ * Tooltip text defaults to the localization key if no localized strings are provided.
+ */
+export declare function CancelAcceptButtons({ onCancelClick, onAcceptClick, canAccept, localizedStrings, className, acceptLabel, }: CancelAcceptButtonsProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Object containing all keys used for localization in this component. If you're using this
  * component in an extension, you can pass it into the useLocalizedStrings hook to easily obtain the
@@ -2127,6 +2169,22 @@ export declare namespace DialogFooter {
 export declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
 /** Renders the dialog's description text in a muted style. Used inside DialogHeader. */
 export declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+/**
+ * The Separator component visually or semantically separates content. This component is built on
+ * Radix UI primitives and styled with Shadcn UI.
+ *
+ * @see Shadcn UI Documentation: {@link https://ui.shadcn.com/docs/components/separator}
+ * @see Radix UI Documentation: {@link https://www.radix-ui.com/primitives/docs/components/separator}
+ */
+export declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+export declare const buttonGroupVariants: (props?: ({
+	orientation?: "horizontal" | "vertical" | null | undefined;
+} & ClassProp) | undefined) => string;
+export declare function ButtonGroup({ className, orientation, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonGroupText({ className, asChild, ...props }: React$1.ComponentProps<"div"> & {
+	asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonGroupSeparator({ className, orientation, ...props }: React$1.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 /**
  * A drawer component for React. These components are built on Vaul and styled with Shadcn UI. See
  * Shadcn UI Documentation: https://ui.shadcn.com/docs/components/drawer See Vaul Documentation:
@@ -2281,6 +2339,20 @@ interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
  * @see Shadcn UI Documentation: {@link https://ui.shadcn.com/docs/components/input}
  */
 export declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+/**
+ * Props for the Kbd component.
+ *
+ * @see Shadcn UI Documentation: {@link https://ui.shadcn.com/docs/components/kbd}
+ */
+export type KbdProps = React$1.HTMLAttributes<HTMLElement>;
+/**
+ * The Kbd component displays keyboard keys or shortcuts. The component is built and styled by
+ * Shadcn UI.
+ *
+ * @param KbdProps
+ * @see Shadcn UI Documentation: {@link https://ui.shadcn.com/docs/components/kbd}
+ */
+export declare const Kbd: React$1.ForwardRefExoticComponent<KbdProps & React$1.RefAttributes<HTMLElement>>;
 /**
  * The Label component renders an accessible label associated with controls. This components is
  * built on Radix UI primitives and styled with Shadcn UI.
@@ -2392,14 +2464,6 @@ export declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<Reac
 export declare function ResizableHandle({ withHandle, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
 	withHandle?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-/**
- * The Separator component visually or semantically separates content. This component is built on
- * Radix UI primitives and styled with Shadcn UI.
- *
- * @see Shadcn UI Documentation: {@link https://ui.shadcn.com/docs/components/separator}
- * @see Radix UI Documentation: {@link https://www.radix-ui.com/primitives/docs/components/separator}
- */
-export declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 /** @inheritdoc Tooltip */
 export declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
 /**