✨ Persist color palette and color picker across refresh

CHANGES.md

@@ -5,6 +5,7 @@
 ### :boom: Breaking changes
 ### :sparkles: New features
 
+- Persist color palette and color picker across refresh [Taiga #1660](https://tree.taiga.io/project/penpot/issue/1660)
 - Ability to add multiple strokes to a shape [Taiga #2778](https://tree.taiga.io/project/penpot/us/2778)
 - Scroll to selected size in font size selector [Taiga #2825](https://tree.taiga.io/project/penpot/us/2825)
 - Duplicate artboards create new flows if needed [Taiga #2221](https://tree.taiga.io/project/penpot/issue/2221)

frontend/src/app/main/data/workspace.cljs

@@ -52,6 +52,7 @@
    [app.util.http :as http]
    [app.util.i18n :as i18n]
    [app.util.router :as rt]
+   [app.util.storage :refer [storage]]
    [app.util.timers :as tm]
    [app.util.webapi :as wapi]
    [beicon.core :as rx]
@@ -245,6 +246,8 @@
             (rx/observe-on :async))))))
 
 (declare go-to-page)
+(declare load-flag)
+
 (defn initialize-page
   [page-id]
   (us/assert ::us/uuid page-id)
@@ -268,6 +271,12 @@
               (assoc :current-page-id id)
               (assoc :trimmed-page (dm/select-keys page [:id :name]))
               (assoc :workspace-local local)
+              (update :workspace-layout
+                      #(if (load-flag :colorpalette false)
+                         (conj % :colorpalette)
+                         (disj % :colorpalette)))
+              (assoc-in [:workspace-local :selected-palette] (load-flag :selected-palette :recent))
+              (assoc-in [:workspace-local :selected-palette-colorpicker] (load-flag :selected-palette-colorpicker :recent))
               (update :workspace-global assoc :background-color (-> page :options :background))
               (update-in [:route :params :query] assoc :page-id (dm/str id))))
         state))))
@@ -385,6 +394,27 @@
         (->> (rp/mutation :rename-file params)
              (rx/ignore))))))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Local storage Flags Manipulation
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def storeable-layout-flags #{:colorpalette})
+(def storeable-workspace-local-flags #{:selected-palette :selected-palette-colorpicker})
+
+(defn store-layout-flags!
+  [state flags]
+  (doseq [item (filter storeable-layout-flags flags)]
+    (swap! storage assoc item (contains? (:workspace-layout state) item))))
+
+(defn store-workspace-local-flag!
+  [flag value]
+  (when (contains? storeable-workspace-local-flags flag)
+    (swap! storage assoc flag value)))
+
+(defn load-flag
+  [flag default]
+  (or (flag @storage) default))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Workspace State Manipulation
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -396,23 +426,34 @@
   (ptk/reify ::toggle-layout-flags
     ptk/UpdateEvent
     (update [_ state]
-      (update state :workspace-layout
-              (fn [stored]
-                (reduce (fn [flags flag]
-                          (if (contains? flags flag)
-                            (disj flags flag)
-                            (conj flags flag)))
-                        stored
-                        (d/concat-set flags)))))))
+      (let [new-state (update state :workspace-layout
+                              (fn [stored]
+                                (reduce (fn [flags flag]
+                                          (if (contains? flags flag)
+                                            (disj flags flag)
+                                            (conj flags flag)))
+                                        stored
+                                        (d/concat-set flags))))]
+        (store-layout-flags! new-state flags)
+        new-state))))
 
 (defn remove-layout-flags
   [& flags]
   (ptk/reify ::remove-layout-flags
     ptk/UpdateEvent
     (update [_ state]
-      (update state :workspace-layout
-              (fn [stored]
-                (reduce disj stored (d/concat-set flags)))))))
+      (let [new-state (update state :workspace-layout
+                              (fn [stored]
+                                (reduce disj stored (d/concat-set flags))))]
+        (store-layout-flags! (:workspace-layout new-state) flags)
+        new-state))))
+
+;; --- Set workspace flag
+
+(defn set-workspace-local-flag!
+  [state flag value]
+  (store-workspace-local-flag! flag value)
+  (assoc-in state [:workspace-local flag] value))
 
 ;; --- Set element options mode
 

frontend/src/app/main/data/workspace/colors.cljs

@@ -9,6 +9,7 @@
    [app.common.colors :as clr]
    [app.common.data :as d]
    [app.main.data.modal :as md]
+   [app.main.data.workspace :as dw]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
@@ -45,8 +46,7 @@
   (ptk/reify ::change-palette-selected
     ptk/UpdateEvent
     (update [_ state]
-      (-> state
-          (assoc-in [:workspace-global :selected-palette] selected)))))
+      (dw/set-workspace-local-flag! state :selected-palette selected))))
 
 (defn change-palette-selected-colorpicker
   "Change the library used by the color picker"
@@ -54,8 +54,7 @@
   (ptk/reify ::change-palette-selected-colorpicker
     ptk/UpdateEvent
     (update [_ state]
-      (-> state
-          (assoc-in [:workspace-global :selected-palette-colorpicker] selected)))))
+      (dw/set-workspace-local-flag! state :selected-palette-colorpicker selected))))
 
 (defn show-palette
   "Show the palette tool and change the library it uses"
@@ -65,7 +64,7 @@
     (update [_ state]
       (-> state
           (update :workspace-layout conj :colorpalette)
-          (assoc-in [:workspace-global :selected-palette] selected)))))
+          (dw/set-workspace-local-flag! :selected-palette selected)))))
 
 (defn start-picker
   []