💄 Add cosmetic improvements to workspace palette component

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

@@ -27,7 +27,7 @@
    [app.main.ui.workspace.coordinates :as coordinates]
    [app.main.ui.workspace.libraries]
    [app.main.ui.workspace.nudge]
-   [app.main.ui.workspace.palette :refer [palette]]
+   [app.main.ui.workspace.palette :refer [palette*]]
    [app.main.ui.workspace.plugins]
    [app.main.ui.workspace.sidebar :refer [sidebar*]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
@@ -84,8 +84,8 @@
         node-ref (use-resize-observer on-resize)]
     [:*
      (when (not ^boolean hide-ui?)
-       [:& palette {:layout layout
+       [:> palette* {:layout layout
-                    :on-change-palette-size on-resize-palette}])
+                     :on-change-size on-resize-palette}])
 
      [:section
       {:key (dm/str "workspace-" page-id)

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

@@ -33,10 +33,11 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def viewport
+(def ^:private ref:viewport
   (l/derived :vport refs/workspace-local))
 
-(defn calculate-palette-padding [rulers?]
+(defn- calculate-palette-style
+  [rulers?]
   (let [left-sidebar           (dom/get-element "left-sidebar-aside")
         left-sidebar-size      (-> (dom/get-data left-sidebar "left-sidebar-width")
                                    (d/parse-integer))
@@ -48,36 +49,46 @@
     #js {"paddingLeft" (dm/str calculate-padding-left "px")
          "paddingRight" "322px"}))
 
-(mf/defc palette
+(mf/defc palette*
-  [{:keys [layout on-change-palette-size]}]
+  [{:keys [layout on-change-size]}]
   (let [color-palette? (:colorpalette layout)
         text-palette?  (:textpalette layout)
         hide-palettes? (:hide-palettes layout)
-        workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
+
+        read-only?     (mf/use-ctx ctx/workspace-read-only?)
         container      (mf/use-ref nil)
-        state*               (mf/use-state {:show-menu false})
+
+        state*         (mf/use-state #(-> {:show-menu false}))
         state          (deref state*)
         show-menu?     (:show-menu state)
+
         selected       (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
+
         selected-text* (mf/use-state :file)
         selected-text  (deref selected-text*)
-        on-select            (mf/use-fn #(reset! selected %))
-        rulers?              (mf/deref refs/rulers?)
-        {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
-        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
 
-        vport (mf/deref viewport)
+        on-select      (mf/use-fn #(reset! selected %))
-        vport-width (:width vport)
+
+        rulers?        (mf/deref refs/rulers?)
+        vport          (mf/deref ref:viewport)
+        vport-width    (get vport :width)
+
+        {:keys [on-pointer-down
+                on-lost-pointer-capture
+                on-pointer-move
+                parent-ref
+                size]}
+        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-size)
 
         on-resize
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (let [dom   (mf/ref-val container)
                  width (obj/get dom "clientWidth")]
              (swap! state* assoc :width width))))
 
         on-close-menu
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (swap! state* assoc :show-menu false)))
 
@@ -100,7 +111,7 @@
              (reset! selected-text* (:id lib)))))
 
         toggle-palettes
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (r/set-resize-type! :top)
            (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
@@ -131,7 +142,9 @@
                                              (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
              (dom/blur! node))))
 
-        any-palette? (or color-palette? text-palette?)
+        any-palette?
+        (or color-palette? text-palette?)
+
         size-classname
         (cond
           (<= size 64) (stl/css :small-palette)
@@ -142,16 +155,16 @@
       (let [key1 (events/listen js/window "resize" on-resize)]
         #(events/unlistenByKey key1)))
 
-    (mf/use-layout-effect
+    (mf/with-layout-effect []
-     #(let [dom     (mf/ref-val parent-ref)
+      (let [dom     (mf/ref-val parent-ref)
             width (obj/get dom "clientWidth")]
         (swap! state* assoc :width width)))
 
     [:div {:class (stl/css :palette-wrapper)
            :id "palette-wrapper"
-           :style  (calculate-palette-padding rulers?)
+           :style  (calculate-palette-style rulers?)
            :data-testid "palette"}
-     (when-not workspace-read-only?
+     (when-not ^boolean read-only?
        [:div {:ref parent-ref
               :class (dm/str size-classname " " (stl/css-case :palettes true
                                                               :wide any-palette?