From 6f3a69210b1e41995d682334048ce1e2c6654710 Mon Sep 17 00:00:00 2001
From: Elhombretecla <delacruzgarciajuan@gmail.com>
Date: Tue, 4 Feb 2025 16:29:38 +0100
Subject: [PATCH] :sparkles: Add file persistance functionality

---
 .../app/main/ui/workspace/left_header.cljs    | 13 ++++++++--
 .../app/main/ui/workspace/left_header.scss    | 25 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs
index 49beea406f..50303ecc00 100644
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -22,7 +22,11 @@
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
+   [rumext.v2 :as mf]
+   [okulary.core :as l]))
+
+(def ref:persistence-status
+  (l/derived :status refs/persistence))
 
 ;; --- Header Component
 
@@ -108,7 +112,12 @@
          {:class (stl/css :file-name)
           :title file-name
           :on-double-click start-editing-name}
-         [:div {:class (stl/css :status-notification)}]
+         [:div {:class (case (mf/deref ref:persistence-status)
+                        :pending (stl/css :status-notification :pending-status)
+                        :saving (stl/css :status-notification :saving-status)
+                        :saved (stl/css :status-notification :saved-status)
+                        :error (stl/css :status-notification :error-status)
+                        (stl/css :status-notification))}]
          file-name])]
      (when ^boolean shared?
        [:span {:class (stl/css :shared-badge)} i/library])
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index 81df70691a..4ecb7b5b92 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -87,8 +87,31 @@
 .status-notification {
   width: $s-6;
   height: $s-6;
-  background-color: red;
   border-radius: 50%;
   margin-right: $s-4;
   flex-shrink: 0;
+  background-color: var(--status-widget-background-color-pending);
+
+  &.pending-status {
+    background-color: var(--status-widget-background-color-warning);
+  }
+
+  &.saving-status {
+    background-color: var(--status-widget-background-color-pending);
+  }
+
+  &.saved-status {
+    background-color: var(--status-widget-background-color-success);
+    animation: jump 0.3s ease-out;
+  }
+
+  &.error-status {
+    background-color: var(--status-widget-background-color-error);
+  }
+}
+
+@keyframes jump {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+  100% { transform: translateY(0); }
 }