🐛 Fix several bugs for the combination of status and share on workspace (#5773)

* ✨ Add status notification bubble

* ✨ Add file persistance functionality

* ✨ Add new colors

* ✨ Add status tooltips

* ✨ Fix z-index share modal

* 🐛 Fix share modal doesn't register on workspace

* 💄 Fix files formatting

* ✨ Add revision fixes

* ✨ Add revision fixes CI

* 🔥 Remove unused require

---------

Co-authored-by: Elhombretecla <delacruzgarciajuan@gmail.com>

frontend/resources/styles/common/refactor/color-defs.scss

@@ -35,7 +35,7 @@
   --status-color-success-200: #a7e8d9; // Used on Register confirmation text
   --status-color-success-500: #2d9f8f; // Used on accept icon, and status widget
 
-  --status-color-warning-500: #fe4811; // Used on status widget, some buttons and warnings icons and elements
+  --status-color-warning-500: #f5a91b; // Used on status widget, some buttons and warnings icons and elements
 
   --status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget
 

frontend/src/app/main/ui/dashboard/team.scss

@@ -455,6 +455,7 @@
 
 .modal-team-container-workspace {
   top: $s-40;
+  z-index: $z-index-modal;
 }
 
 .modal-title {

frontend/src/app/main/ui/workspace/left_header.cljs

@@ -35,6 +35,11 @@
         project-id  (:id project)
         team-id     (:team-id project)
         shared?     (:is-shared file)
+        persistence
+        (mf/deref refs/persistence)
+
+        persistence-status
+        (get persistence :status)
 
         read-only?  (mf/use-ctx ctx/workspace-read-only?)
 
@@ -108,6 +113,25 @@
          {:class (stl/css :file-name)
           :title file-name
           :on-double-click start-editing-name}
+          ;;-- Persistende state widget
+         [:div {:class (case 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))
+                :title (case persistence-status
+                         :pending (tr "workspace.header.saving")
+                         :saving (tr "workspace.header.saving")
+                         :saved (tr "workspace.header.saved")
+                         :error (tr "workspace.header.save-error")
+                         nil)}
+          (case persistence-status
+            :pending i/status-alert
+            :saving i/status-alert
+            :saved i/status-tick
+            :error i/status-wrong
+            nil)]
          file-name])]
      (when ^boolean shared?
        [:span {:class (stl/css :shared-badge)} i/library])

frontend/src/app/main/ui/workspace/left_header.scss

@@ -49,6 +49,9 @@
   @include smallTitleTipography;
   text-transform: none;
   color: var(--title-foreground-color-hover);
+  align-items: center;
+  display: flex;
+  flex-direction: row;
 }
 
 .file-name-input {
@@ -80,3 +83,41 @@
     width: $s-16;
   }
 }
+
+.status-notification {
+  width: $s-6;
+  height: $s-6;
+  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);
+  }
+}

frontend/src/app/main/ui/workspace/right_header.cljs

@@ -19,6 +19,7 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.dashboard.team]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.exports.assets :refer [export-progress-widget]]
    [app.main.ui.formats :as fmt]
@@ -32,39 +33,6 @@
 (def ref:persistence-status
   (l/derived :status refs/persistence))
 
-;; --- Persistence state Widget
-
-(mf/defc persistence-state-widget
-  {::mf/wrap [mf/memo]
-   ::mf/wrap-props false}
-  []
-  (let [status (mf/deref ref:persistence-status)
-        workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)]
-    (when-not workspace-read-only?
-      [:div {:class (stl/css :persistence-status-widget)}
-       (case status
-         :pending
-         [:div {:class (stl/css :status-icon :pending-status)
-                :title (tr "workspace.header.unsaved")}
-          i/status-alert]
-
-         :saving
-         [:div {:class (stl/css :status-icon :pending-status)
-                :title (tr "workspace.header.unsaved")}
-          i/status-alert]
-
-         :saved
-         [:div {:class (stl/css :status-icon :saved-status)
-                :title (tr "workspace.header.saved")}
-          i/status-tick]
-
-         :error
-         [:div {:class (stl/css :status-icon :error-status)
-                :title "There was an error saving the data. Please refresh if this persists."}
-          i/status-wrong]
-
-         nil)])))
-
 ;; --- Zoom Widget
 
 (mf/defc zoom-widget-workspace
@@ -216,8 +184,6 @@
      [:div {:class (stl/css :users-section)}
       [:& active-sessions]]
 
-     [:& persistence-state-widget]
-
      [:& export-progress-widget]
 
      [:div {:class (stl/css :separator)}]