diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index eb8d63d0fb..307e50eb0c 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2213,7 +2213,11 @@ "save_status_saved": "Saved", "save_status_saving": "Saving...", "save_status_unsaved": "Unsaved", - "save_status_error": "Save failed" + "save_status_error": "Save failed", + "save_status_saved_tooltip": "All changes have been saved.", + "save_status_saving_tooltip": "Changes are being saved.", + "save_status_unsaved_tooltip": "There are unsaved changes. They will be saved automatically in a moment.", + "save_status_error_tooltip": "An error occurred while saving the note. If possible, try copying the note content elsewhere and reloading the application." }, "status_bar": { "language_title": "Change content language", diff --git a/apps/client/src/widgets/layout/NoteBadges.tsx b/apps/client/src/widgets/layout/NoteBadges.tsx index fc4e5b6497..5dceb31cb6 100644 --- a/apps/client/src/widgets/layout/NoteBadges.tsx +++ b/apps/client/src/widgets/layout/NoteBadges.tsx @@ -114,22 +114,27 @@ function SaveStatusBadge() { let icon: string; let title: string; + let tooltip: string; switch (state) { case "saved": icon = "bx bx-check"; title = t("breadcrumb_badges.save_status_saved"); + tooltip = t("breadcrumb_badges.save_status_saved_tooltip"); break; case "saving": icon = "bx bx-loader bx-spin"; title = t("breadcrumb_badges.save_status_saving"); + tooltip = t("breadcrumb_badges.save_status_saving_tooltip"); break; case "unsaved": icon = "bx bx-pencil"; title = t("breadcrumb_badges.save_status_unsaved"); + tooltip = t("breadcrumb_badges.save_status_unsaved_tooltip"); break; case "error": icon = "bx bxs-error"; title = t("breadcrumb_badges.save_status_error"); + tooltip = t("breadcrumb_badges.save_status_error_tooltip"); break; } @@ -138,6 +143,7 @@ function SaveStatusBadge() { className={clsx("save-status-badge", state)} icon={icon} text={title} + tooltip={tooltip} /> ); }