From 07a463ee52ad6229f60f638ebf75fc40f95bd5d4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 2 Jan 2026 22:10:41 +0200
Subject: [PATCH] feat(save_indicator): improve display of some states

---
 apps/client/src/widgets/layout/NoteBadges.css | 10 +++++++++-
 apps/client/src/widgets/layout/NoteBadges.tsx | 10 ++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/layout/NoteBadges.css b/apps/client/src/widgets/layout/NoteBadges.css
index 31f50159a..1e5f13ab5 100644
--- a/apps/client/src/widgets/layout/NoteBadges.css
+++ b/apps/client/src/widgets/layout/NoteBadges.css
@@ -16,7 +16,15 @@
         &.share-badge {--color: var(--badge-share-background-color);}
         &.clipped-note-badge {--color: var(--badge-clipped-note-background-color);}
         &.execute-badge {--color: var(--badge-execute-background-color);}
-        &.save-status-badge { opacity: 0.4; }
+        &.save-status-badge {
+            opacity: 0.4;
+            transition: opacity 250ms ease-in;
+
+            &.error {
+                color: var(--dropdown-item-icon-destructive-color);
+                opacity: 1;
+            }
+        }
 
         min-width: 0;
 
diff --git a/apps/client/src/widgets/layout/NoteBadges.tsx b/apps/client/src/widgets/layout/NoteBadges.tsx
index 5e4700513..fc4e5b649 100644
--- a/apps/client/src/widgets/layout/NoteBadges.tsx
+++ b/apps/client/src/widgets/layout/NoteBadges.tsx
@@ -1,5 +1,7 @@
 import "./NoteBadges.css";
 
+import { clsx } from "clsx";
+
 import { copyTextWithToast } from "../../services/clipboard_ext";
 import { t } from "../../services/i18n";
 import { goToLinkExt } from "../../services/link";
@@ -108,7 +110,7 @@ function ExecuteBadge() {
 }
 
 function SaveStatusBadge() {
-    const state: "saved" | "saving" | "unsaved" | "error" = "saved"; // TODO: implement save state tracking
+    const state: "saved" | "saving" | "unsaved" | "error" = "error"; // TODO: implement save state tracking
 
     let icon: string;
     let title: string;
@@ -122,18 +124,18 @@ function SaveStatusBadge() {
             title = t("breadcrumb_badges.save_status_saving");
             break;
         case "unsaved":
-            icon = "bx bx-cloud-upload";
+            icon = "bx bx-pencil";
             title = t("breadcrumb_badges.save_status_unsaved");
             break;
         case "error":
-            icon = "bx bx-error-circle";
+            icon = "bx bxs-error";
             title = t("breadcrumb_badges.save_status_error");
             break;
     }
 
     return (
         <Badge
-            className="save-status-badge"
+            className={clsx("save-status-badge", state)}
             icon={icon}
             text={title}
         />