feat(save_indicator): improve display of some states

This commit is contained in:
Elian Doran 2026-01-02 22:10:41 +02:00
parent 3157047160
commit 07a463ee52
No known key found for this signature in database
2 changed files with 15 additions and 5 deletions

View File

@ -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;

View File

@ -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}
/>