enhance(ui): polish custom colors for the icons picker

src/main/frontend/components/icon.cljs

@@ -239,6 +239,7 @@
 (rum/defc color-picker
   [*color]
   (let [[color, set-color!] (rum/use-state @*color)
+        _ (prn "==>>" color)
         *el (rum/use-ref nil)
         content-fn (fn []
                      (let [colors ["#6e7b8b" "#5e69d2" "#00b5ed" "#00b55b"
@@ -252,9 +253,9 @@
                             (if c "" (shui/tabler-icon "minus" {:class "scale-75 opacity-70"}))))]))]
     (rum/use-effect!
       (fn []
-        (when-let [^js section (some-> (rum/deref *el) (.closest ".cp__emoji-icon-picker") (.querySelector ".pane-section"))]
+        (when-let [^js picker (some-> (rum/deref *el) (.closest ".cp__emoji-icon-picker"))]
           (let [color (if (string/blank? color) "inherit" color)]
-            (set! (. (.-style section) -color) color)
+            (.setProperty (.-style picker) "--ls-color-icon-preset" color)
             (storage/set :ls-icon-color-preset color)))
         (reset! *color color))
       [color])
@@ -272,8 +273,9 @@
   (rum/local nil ::result)
   (rum/local false ::select-mode?)
   (rum/local :all ::tab)
-  (rum/local (storage/get :ls-icon-color-preset) ::color)
   (rum/local nil ::hover)
+  {:init (fn [s]
+           (assoc s ::color (atom (storage/get :ls-icon-color-preset))))}
   [state {:keys [on-chosen] :as opts}]
   (let [*q (::q state)
         *result (::result state)
@@ -370,7 +372,7 @@
                  :class (util/classnames [{:active active?} "tab-item"])
                  :on-click #(reset! *tab id)}
                 label)))]
-         (when (= :icon @*tab)
+         (when (not= :emoji @*tab)
            (color-picker *color))]
 
         ;; preview

src/main/frontend/components/icon.css

@@ -1,4 +1,6 @@
 .cp__emoji-icon-picker {
+  --ls-color-icon-preset: "inherit";
+
   @apply w-[380px] max-h-[396px] relative flex flex-col overflow-hidden;
   @apply pt-14 pb-[40px];
 
@@ -54,6 +56,8 @@
   .pane-section {
     @apply pl-2 overflow-y-scroll h-full;
 
+    color: var(--ls-color-icon-preset);
+
     > .its, .icons-row {
       @apply flex gap-1 py-1 flex-wrap;