♻️ Convert colorpicker and its sub-components to modern rumext * format

slider-selector (slider_selector.cljs):
- Rename to slider-selector*
- Rename prop vertical? to is-vertical
- Remove prop reverse? entirely: it was never passed by any callsite,
  so the related reversal logic in calculate-pos and handler positioning
  is also removed as dead code

value-saturation-selector (ramp.cljs):
- Rename to value-saturation-selector*
- Update internal call site to [:> value-saturation-selector* ...]
- Update slider-selector call sites to [:> slider-selector* ...]

harmony-selector (harmony.cljs):
- Rename to harmony-selector*
- Update slider-selector call sites to [:> slider-selector* ...] with
  renamed is-vertical prop
- Remove stale duplicate :vertical true prop
- Fix spurious extra wrapping vector around the opacity slider in the
  when branch

hsva-selector (hsva.cljs):
- Rename to hsva-selector*
- Update all four slider-selector call sites to [:> slider-selector* ...]
- Remove no-op :reverse? false prop from the value slider

color-inputs (color_inputs.cljs):
- Rename to color-inputs*

colorpicker.cljs:
- Update :refer imports for color-inputs*, harmony-selector*,
  hsva-selector* and libraries*
- Update all corresponding call sites from [:& ...] to [:> ...]

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

@@ -33,12 +33,12 @@
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
+   [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs*]]
    [app.main.ui.workspace.colorpicker.color-tokens :refer [token-section*]]
    [app.main.ui.workspace.colorpicker.gradients :refer [gradients*]]
-   [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
-   [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
-   [app.main.ui.workspace.colorpicker.libraries :refer [libraries]]
+   [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector*]]
+   [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector*]]
+   [app.main.ui.workspace.colorpicker.libraries :refer [libraries*]]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
    [app.main.ui.workspace.colorpicker.shortcuts :as sc]
    [app.util.dom :as dom]
@@ -93,7 +93,7 @@
       (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
       (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))))
 
-(mf/defc colorpicker
+(mf/defc colorpicker*
   [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept origin combined-tokens color-origin on-token-change tab applied-token]}]
   (let [state                  (mf/deref refs/colorpicker)
         node-ref               (mf/use-ref)
@@ -511,27 +511,27 @@
                     :on-finish-drag on-finish-drag}]
 
                   "harmony"
-                  [:& harmony-selector
+                  [:> harmony-selector*
                    {:color current-color
                     :disable-opacity disable-opacity
                     :on-change handle-change-color
                     :on-start-drag on-start-drag}]
 
                   "hsva"
-                  [:& hsva-selector
+                  [:> hsva-selector*
                    {:color current-color
                     :disable-opacity disable-opacity
                     :on-change handle-change-color
                     :on-start-drag on-start-drag
                     :on-finish-drag on-finish-drag}]))]]
 
-            [:& color-inputs
+            [:> color-inputs*
              {:type type
               :disable-opacity disable-opacity
               :color current-color
               :on-change handle-change-color}]
 
-            [:& libraries
+            [:> libraries*
              {:state state
               :current-color current-color
               :disable-gradient disable-gradient
@@ -786,15 +786,15 @@
            :data-testid "colorpicker"
            :style style}
 
-     [:& colorpicker {:data data
-                      :combined-tokens grouped-tokens-by-set
-                      :disable-gradient disable-gradient
-                      :disable-opacity disable-opacity
-                      :disable-image disable-image
-                      :on-token-change on-token-change
-                      :applied-token applied-token
-                      :on-change on-change'
-                      :origin origin
-                      :tab tab
-                      :color-origin color-origin
-                      :on-accept on-accept}]]))
+     [:> colorpicker* {:data data
+                       :combined-tokens grouped-tokens-by-set
+                       :disable-gradient disable-gradient
+                       :disable-opacity disable-opacity
+                       :disable-image disable-image
+                       :on-token-change on-token-change
+                       :applied-token applied-token
+                       :on-change on-change'
+                       :origin origin
+                       :tab tab
+                       :color-origin color-origin
+                       :on-accept on-accept}]]))

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

@@ -28,7 +28,7 @@
   [val]
   (* (/ val 255) 100))
 
-(mf/defc color-inputs [{:keys [type color disable-opacity on-change]}]
+(mf/defc color-inputs* [{:keys [type color disable-opacity on-change]}]
   (let [{red :r green :g blue :b
          hue :h saturation :s value :v
          hex :hex alpha :alpha} color

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

@@ -11,7 +11,7 @@
    [app.common.geom.point :as gpt]
    [app.common.math :as mth]
    [app.common.types.color :as cc]
-   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
+   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector*]]
    [app.util.dom :as dom]
    [app.util.object :as obj]
    [cuerdas.core :as str]
@@ -58,7 +58,7 @@
         y (+ (/ canvas-side 2) (* comp-y (/ canvas-side 2)))]
     (gpt/point x y)))
 
-(mf/defc harmony-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
+(mf/defc harmony-selector* [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
   (let [canvas-ref     (mf/use-ref nil)
         canvas-side    192
         {hue :h saturation :s value :v alpha :alpha} color
@@ -134,24 +134,21 @@
            :style {"--hue-from" (dm/str "hsl(" h1 ", " (* s1 100) "%, " (* l1 100) "%)")
                    "--hue-to" (dm/str "hsl(" h2 ", " (* s2 100) "%, " (* l2 100) "%)")}}
      [:div {:class (stl/css :handlers-wrapper)}
-      [:& slider-selector {:type :value
-                           :vertical? true
-                           :reverse? false
-                           :value value
-                           :max-value 255
-                           :vertical true
-                           :on-change on-change-value
-                           :on-start-drag on-start-drag
-                           :on-finish-drag on-finish-drag}]
+      [:> slider-selector* {:type :value
+                            :is-vertical true
+                            :value value
+                            :max-value 255
+                            :on-change on-change-value
+                            :on-start-drag on-start-drag
+                            :on-finish-drag on-finish-drag}]
       (when (not disable-opacity)
-        [[:& slider-selector {:type :opacity
-                              :vertical? true
+        [:> slider-selector* {:type :opacity
+                              :is-vertical true
                               :value alpha
                               :max-value 1
-                              :vertical true
                               :on-change on-change-opacity
                               :on-start-drag on-start-drag
-                              :on-finish-drag on-finish-drag}]])]
+                              :on-finish-drag on-finish-drag}])]
 
      [:div {:class (stl/css :hue-wheel-wrapper)}
       [:canvas {:class (stl/css :hue-wheel)

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

@@ -8,10 +8,10 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.types.color :as cc]
-   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
+   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector*]]
    [rumext.v2 :as mf]))
 
-(mf/defc hsva-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
+(mf/defc hsva-selector* [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
   (let [{hue :h saturation :s value :v alpha :alpha} color
         handle-change-slider (fn [key]
                                (fn [new-value]
@@ -26,7 +26,7 @@
     [:div {:class (stl/css :hsva-selector)}
      [:div {:class (stl/css :hsva-row)}
       [:span {:class (stl/css :hsva-selector-label)} "H"]
-      [:& slider-selector
+      [:> slider-selector*
        {:class (stl/css :hsva-bar)
         :type :hue
         :max-value 360
@@ -36,7 +36,7 @@
         :on-finish-drag on-finish-drag}]]
      [:div {:class (stl/css :hsva-row)}
       [:span {:class (stl/css :hsva-selector-label)} "S"]
-      [:& slider-selector
+      [:> slider-selector*
        {:class (stl/css :hsva-bar)
         :type :saturation
         :max-value 1
@@ -46,10 +46,9 @@
         :on-finish-drag on-finish-drag}]]
      [:div {:class (stl/css :hsva-row)}
       [:span {:class (stl/css :hsva-selector-label)} "V"]
-      [:& slider-selector
+      [:> slider-selector*
        {:class (stl/css :hsva-bar)
         :type :value
-        :reverse? false
         :max-value 255
         :value value
         :on-change (handle-change-slider :v)
@@ -58,7 +57,7 @@
      (when (not disable-opacity)
        [:div {:class (stl/css :hsva-row)}
         [:span {:class (stl/css :hsva-selector-label)} "A"]
-        [:& slider-selector
+        [:> slider-selector*
          {:class (stl/css :hsva-bar)
           :type :opacity
           :max-value 1

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

@@ -27,7 +27,7 @@
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-(mf/defc libraries
+(mf/defc libraries*
   [{:keys [state on-select-color on-add-library-color disable-gradient disable-opacity disable-image]}]
   (let [selected*        (h/use-shared-state mdc/colorpicker-selected-broadcast-key :recent)
         selected         (deref selected*)

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

@@ -11,11 +11,11 @@
    [app.common.math :as mth]
    [app.common.types.color :as cc]
    [app.main.ui.components.color-bullet :as cb]
-   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
+   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector*]]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(mf/defc value-saturation-selector [{:keys [saturation value on-change on-start-drag on-finish-drag]}]
+(mf/defc value-saturation-selector* [{:keys [saturation value on-change on-start-drag on-finish-drag]}]
   (let [dragging?* (mf/use-state false)
         dragging? (deref dragging?*)
         calculate-pos
@@ -127,7 +127,7 @@
        (reset! internal-color* (enrich-color-map color))))
 
     [:*
-     [:& value-saturation-selector
+     [:> value-saturation-selector*
       {:hue h
        :saturation s
        :value v
@@ -140,17 +140,17 @@
       [:& cb/color-bullet {:color bullet-color
                            :area true}]
       [:div {:class (stl/css :sliders-wrapper)}
-       [:& slider-selector {:type :hue
-                            :max-value 360
-                            :value h
-                            :on-change on-change-hue
-                            :on-start-drag on-start-drag
-                            :on-finish-drag on-finish-drag}]
+       [:> slider-selector* {:type :hue
+                             :max-value 360
+                             :value h
+                             :on-change on-change-hue
+                             :on-start-drag on-start-drag
+                             :on-finish-drag on-finish-drag}]
 
        (when (not disable-opacity)
-         [:& slider-selector {:type :opacity
-                              :max-value 1
-                              :value alpha
-                              :on-change on-change-opacity
-                              :on-start-drag on-start-drag
-                              :on-finish-drag on-finish-drag}])]]]))
+         [:> slider-selector* {:type :opacity
+                               :max-value 1
+                               :value alpha
+                               :on-change on-change-opacity
+                               :on-start-drag on-start-drag
+                               :on-finish-drag on-finish-drag}])]]]))

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

@@ -13,8 +13,8 @@
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
 
-(mf/defc slider-selector
-  [{:keys [value class min-value max-value vertical? reverse? on-change on-start-drag on-finish-drag type]}]
+(mf/defc slider-selector*
+  [{:keys [value class min-value max-value is-vertical on-change on-start-drag on-finish-drag type]}]
   (let [min-value (or min-value 0)
         max-value (or max-value 1)
         dragging? (mf/use-state false)
@@ -42,17 +42,14 @@
           (when on-change
             (let [{:keys [left right top bottom]} (-> ev dom/get-target dom/get-bounding-rect)
                   {:keys [x y]} (-> ev dom/get-client-position)
-                  unit-value (if vertical?
+                  unit-value (if is-vertical
                                (mth/clamp (/ (- bottom y) (- bottom top)) 0 1)
                                (mth/clamp (/ (- x left) (- right left)) 0 1))
-                  unit-value (if reverse?
-                               (mth/abs (- unit-value 1.0))
-                               unit-value)
                   value (+ min-value (* unit-value (- max-value min-value)))]
               (on-change value))))]
 
 
-    [:div {:class (dm/str class (stl/css-case :vertical vertical?
+    [:div {:class (dm/str class (stl/css-case :vertical is-vertical
                                               :slider-selector true
                                               :hue (= type :hue)
                                               :opacity (= type :opacity)
@@ -65,14 +62,10 @@
            :on-pointer-move #(when @dragging? (calculate-pos %))}
      (let [value-percent (* (/ (- value min-value)
                                (- max-value min-value)) 100)
-
-           value-percent (if reverse?
-                           (mth/abs (- value-percent 100))
-                           value-percent)
            value-percent-str (str value-percent "%")
 
            style-common #js {:pointerEvents "none"}
            style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
            style-vertical   (obj/merge! #js {:bottom value-percent-str} style-common)]
        [:div {:class (stl/css :handler)
-              :style (if vertical? style-vertical style-horizontal)}])]))
+              :style (if is-vertical style-vertical style-horizontal)}])]))