feat(save_indicator): fade out after a few seconds

apps/client/src/translations/en/translation.json

@@ -2214,7 +2214,6 @@
     "save_status_saving": "Saving...",
     "save_status_unsaved": "Unsaved",
     "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."

apps/client/src/widgets/layout/NoteBadges.css

@@ -2,6 +2,11 @@
     contain: none;
 }
 
+@keyframes fadeOut {
+    from { opacity: var(--default-opacity); }
+    to { opacity: 0; }
+}
+
 .note-badges {
     display: flex;
     gap: 5px;
@@ -17,13 +22,19 @@
         &.clipped-note-badge {--color: var(--badge-clipped-note-background-color);}
         &.execute-badge {--color: var(--badge-execute-background-color);}
         &.save-status-badge {
-            opacity: 0.4;
+            --default-opacity: 0.4;
+            opacity: var(--default-opacity);
             transition: opacity 250ms ease-in;
 
             &.error {
                 color: var(--dropdown-item-icon-destructive-color);
                 opacity: 1;
             }
+
+            &.saved {
+                animation: fadeOut 250ms ease-in 5s forwards;
+                pointer-events: none;
+            }
         }
 
         min-width: 0;

apps/client/src/widgets/layout/NoteBadges.tsx

@@ -120,7 +120,6 @@ function SaveStatusBadge() {
         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";