✨ Colorpicker: remember las color mode

CHANGES.md

@@ -2,6 +2,10 @@
 
 ## 1.19.3
 
+### :sparkles: New features
+
+- Colorpicker: remember last color mode [Taiga #5508](https://tree.taiga.io/project/penpot/issue/5508)
+
 ### :bug: Bugs fixed
 
 - List view is discarded on tab change on Workspace Assets Sidebar tab [Github #3547](https://github.com/penpot/penpot/issues/3547)

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

@@ -22,6 +22,7 @@
    [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.undo :as dwu]
    [app.util.color :as uc]
+   [app.util.storage :refer [storage]]
    [beicon.core :as rx]
    [potok.core :as ptk]))
 
@@ -647,3 +648,12 @@
                   :position :right})
           (ptk/event ::ev/event {::ev/name "add-asset-to-library"
                                  :asset-type "color"}))))))
+
+(defn get-active-color-tab
+  []
+  (let [tab (::tab @storage)]
+    (or tab :ramp)))
+
+(defn set-active-color-tab!
+  [tab]
+  (swap! storage assoc ::tab tab))

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

@@ -56,12 +56,17 @@
 
         current-color       (:current-color state)
 
-        active-tab          (mf/use-state :ramp #_:harmony #_:hsva)
+        active-tab          (mf/use-state (dc/get-active-color-tab))
-        set-ramp-tab!       (mf/use-fn #(reset! active-tab :ramp))
-        set-harmony-tab!    (mf/use-fn #(reset! active-tab :harmony))
-        set-hsva-tab!       (mf/use-fn #(reset! active-tab :hsva))
-
         drag?               (mf/use-state false)
+        
+        set-tab!
+        (mf/use-fn
+          (fn [event]
+            (let [tab (-> (dom/get-current-target event)
+                          (dom/get-data "tab")
+                          (keyword))]
+              (reset! active-tab tab)
+              (dc/set-active-color-tab! tab))))
 
         handle-change-color
         (mf/use-fn
@@ -81,9 +86,9 @@
          (fn []
            (if picking-color?
              (do (modal/disallow-click-outside!)
-                 (st/emit! (dc/stop-picker)))
+               (st/emit! (dc/stop-picker)))
              (do (modal/allow-click-outside!)
-                 (st/emit! (dc/start-picker))))))
+               (st/emit! (dc/start-picker))))))
 
         handle-change-stop
         (mf/use-fn
@@ -225,15 +230,18 @@
        [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
         {:class (when (= @active-tab :ramp) "active")
          :alt (tr "workspace.libraries.colors.rgba")
-         :on-click set-ramp-tab!} i/picker-ramp]
+         :on-click set-tab!
+         :data-tab "ramp"} i/picker-ramp]
        [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
         {:class (when (= @active-tab :harmony) "active")
          :alt (tr "workspace.libraries.colors.rgb-complementary")
-         :on-click set-harmony-tab!} i/picker-harmony]
+         :on-click set-tab!
+         :data-tab "harmony"} i/picker-harmony]
        [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
         {:class (when (= @active-tab :hsva) "active")
          :alt (tr "workspace.libraries.colors.hsv")
-         :on-click set-hsva-tab!} i/picker-hsv]]
+         :on-click set-tab!
+         :data-tab "hsva"} i/picker-hsv]]
 
       (if picking-color?
         [:div.picker-detail-wrapper