From d9136372909596ba916a0b1fd025a9f1078f7c7b Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Tue, 3 Oct 2023 14:24:56 +0200
Subject: [PATCH] :bug: Fix several frontend errors related with new UI

---
 .../styles/main/partials/sidebar.scss         |  10 +
 .../styles/main/partials/tab-container.scss   |   2 +-
 frontend/src/app/main/data/workspace.cljs     |  24 --
 .../src/app/main/data/workspace/common.cljs   |  27 ++
 .../src/app/main/data/workspace/drawing.cljs  |   3 +-
 .../src/app/main/data/workspace/edition.cljs  |   1 +
 .../app/main/data/workspace/path/drawing.cljs |   4 +-
 .../app/main/data/workspace/path/edition.cljs |   2 +
 .../app/main/ui/workspace/left_toolbar.cljs   |  19 +-
 .../src/app/main/ui/workspace/sidebar.cljs    |  41 ++-
 .../src/app/main/ui/workspace/sidebar.scss    |  17 +-
 .../app/main/ui/workspace/sidebar/layers.scss |   5 +-
 .../workspace/sidebar/options/menus/fill.cljs |   7 +-
 .../sidebar/options/menus/measures.cljs       |   2 +-
 .../sidebar/options/menus/shadow.cljs         | 342 +++++++++---------
 .../sidebar/options/rows/color_row.cljs       |   5 +-
 .../main/ui/workspace/sidebar/sitemap.cljs    |  40 +-
 .../main/ui/workspace/sidebar/sitemap.scss    |   4 +-
 .../ui/workspace/viewport/path_actions.cljs   |  34 +-
 .../main/ui/workspace/viewport/widgets.cljs   |   7 -
 20 files changed, 315 insertions(+), 281 deletions(-)

diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 1221960a6..956b20b62 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -338,6 +338,16 @@ button.collapse-sidebar {
   grid-template-columns: 100%;
   height: 100%;
   overflow: hidden;
+  position: relative;
+  .resize-area-horiz {
+    position: absolute;
+    top: var(--height, 200px);
+    left: 0;
+    height: 8px;
+    width: 100%;
+    z-index: 10;
+    cursor: ns-resize;
+  }
 }
 
 .shortcuts,
diff --git a/frontend/resources/styles/main/partials/tab-container.scss b/frontend/resources/styles/main/partials/tab-container.scss
index 2b2da4c50..33c759e0a 100644
--- a/frontend/resources/styles/main/partials/tab-container.scss
+++ b/frontend/resources/styles/main/partials/tab-container.scss
@@ -2,7 +2,7 @@
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-columns: 100%;
-  height: calc(100% - 45px);
+  height: 100%;
 }
 
 .tab-container-tabs {
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index 8bcd1d7bd..25ed07ac5 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -1420,30 +1420,6 @@
         (rx/of ::dwp/force-persist
                (rt/nav :dashboard-fonts {:team-id team-id}))))))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Toolbar
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn toggle-toolbar-visibility
-   []
-  (ptk/reify ::toggle-toolbar-visibility
-    ptk/UpdateEvent
-    (update [_ state]
-      (update-in state [:workspace-local :hide-toolbar] not))))
-
-(defn hide-toolbar
-  []
-  (ptk/reify ::hide-toolbar
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc-in state [:workspace-local :hide-toolbar] true))))
-
-(defn show-toolbar
-  []
-  (ptk/reify ::show-toolbar
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc-in state [:workspace-local :hide-toolbar] false))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Context Menu
diff --git a/frontend/src/app/main/data/workspace/common.cljs b/frontend/src/app/main/data/workspace/common.cljs
index ec5270b25..ab6ad0154 100644
--- a/frontend/src/app/main/data/workspace/common.cljs
+++ b/frontend/src/app/main/data/workspace/common.cljs
@@ -152,3 +152,30 @@
                                               :undo-changes []
                                               :origin it
                                               :save-undo? false})))))))))))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Toolbar
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn toggle-toolbar-visibility
+   []
+  (ptk/reify ::toggle-toolbar-visibility
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:workspace-local :hide-toolbar] not))))
+
+(defn hide-toolbar
+  []
+  (ptk/reify ::hide-toolbar
+    ptk/UpdateEvent
+    (update [_ state]
+            (let [_ (prn "hide toolbar")])
+            (assoc-in state [:workspace-local :hide-toolbar] true))))
+
+(defn show-toolbar
+  []
+  (ptk/reify ::show-toolbar
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [_ (prn "show toolbar")])
+      (assoc-in state [:workspace-local :hide-toolbar] false))))
diff --git a/frontend/src/app/main/data/workspace/drawing.cljs b/frontend/src/app/main/data/workspace/drawing.cljs
index ab99818c9..a12d2991a 100644
--- a/frontend/src/app/main/data/workspace/drawing.cljs
+++ b/frontend/src/app/main/data/workspace/drawing.cljs
@@ -38,7 +38,8 @@
     (watch [_ _ stream]
       (rx/merge
        (when (= tool :path)
-         (rx/of (start-drawing :path)))
+         (rx/of (start-drawing :path)
+                (dwc/hide-toolbar)))
 
        (when (= tool :curve)
          (let [stopper (rx/filter dwc/interrupt? stream)]
diff --git a/frontend/src/app/main/data/workspace/edition.cljs b/frontend/src/app/main/data/workspace/edition.cljs
index 531842413..0c5e4220e 100644
--- a/frontend/src/app/main/data/workspace/edition.cljs
+++ b/frontend/src/app/main/data/workspace/edition.cljs
@@ -46,4 +46,5 @@
         (-> state
             (update :workspace-local dissoc :edition)
             (dissoc :workspace-grid-edition)
+            (assoc-in  [:workspace-local :hide-toolbar] false)
             (cond-> (some? id) (update-in [:workspace-local :edit-path] dissoc id)))))))
diff --git a/frontend/src/app/main/data/workspace/path/drawing.cljs b/frontend/src/app/main/data/workspace/path/drawing.cljs
index 609fec285..4d4281523 100644
--- a/frontend/src/app/main/data/workspace/path/drawing.cljs
+++ b/frontend/src/app/main/data/workspace/path/drawing.cljs
@@ -15,6 +15,7 @@
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.changes :as dch]
+   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.drawing.common :as dwdc]
    [app.main.data.workspace.edition :as dwe]
    [app.main.data.workspace.path.changes :as changes]
@@ -350,7 +351,8 @@
       (let [id (st/get-path-id state)]
         (cond
           (and id (= :move mode)) (rx/of (common/finish-path "change-edit-mode"))
-          (and id (= :draw mode)) (rx/of (start-draw-mode))
+          (and id (= :draw mode)) (rx/of (dwc/hide-toolbar)
+                                         (start-draw-mode))
           :else (rx/empty))))))
 
 (defn reset-last-handler
diff --git a/frontend/src/app/main/data/workspace/path/edition.cljs b/frontend/src/app/main/data/workspace/path/edition.cljs
index 3b623ea57..2258843fd 100644
--- a/frontend/src/app/main/data/workspace/path/edition.cljs
+++ b/frontend/src/app/main/data/workspace/path/edition.cljs
@@ -15,6 +15,7 @@
    [app.common.path.shapes-to-path :as upsp]
    [app.common.path.subpaths :as ups]
    [app.main.data.workspace.changes :as dch]
+   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.edition :as dwe]
    [app.main.data.workspace.path.changes :as changes]
    [app.main.data.workspace.path.drawing :as drawing]
@@ -308,6 +309,7 @@
                                       (= (ptk/type %) ::start-path-edit))))
             interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))]
         (rx/concat
+         (rx/of (dwc/hide-toolbar))
          (rx/of (undo/start-path-undo))
          (rx/of (drawing/change-edit-mode mode))
          (->> interrupt
diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
index b2dee7d64..6c2acae8b 100644
--- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs
+++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
@@ -11,6 +11,7 @@
    [app.common.media :as cm]
    [app.main.data.events :as ev]
    [app.main.data.workspace :as dw]
+   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.media :as dwm]
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.refs :as refs]
@@ -27,14 +28,15 @@
 (mf/defc image-upload
   {::mf/wrap [mf/memo]}
   []
-  (let [ref     (mf/use-ref nil)
-        file-id (mf/use-ctx ctx/current-file-id)
+  (let [new-css-system (mf/use-ctx ctx/new-css-system)
+        ref            (mf/use-ref nil)
+        file-id        (mf/use-ctx ctx/current-file-id)
 
         on-click
         (mf/use-fn
-          (fn []
-            (st/emit! :interrupt dw/clear-edition-mode)
-            (dom/click (mf/ref-val ref))))
+         (fn []
+           (st/emit! :interrupt dw/clear-edition-mode)
+           (dom/click (mf/ref-val ref))))
 
         on-selected
         (mf/use-fn
@@ -49,13 +51,14 @@
                          :blobs (seq blobs)
                          :position (gpt/point x y)}]
              (st/emit! (dwm/upload-media-workspace params)))))]
-
     [:li
      [:button
       {:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
        :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
        :on-click on-click}
-      i/img-refactor
+      (if new-css-system
+        i/img-refactor
+        i/image)
       [:& file-uploader
        {:input-id "image-upload"
         :accept cm/str-image-types
@@ -138,7 +141,7 @@
 
         toggle-toolbar
         (mf/use-fn
-         #(st/emit! (dw/toggle-toolbar-visibility)))]
+         #(st/emit! (dwc/toggle-toolbar-visibility)))]
 
     (if new-css-system
       (when-not ^boolean read-only?
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 437993c68..ac618f9e8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -39,7 +39,9 @@
   [{:keys [layout file page-id] :as props}]
   (let [options-mode   (mf/deref refs/options-mode-global)
         mode-inspect?  (= options-mode :inspect)
-        project          (mf/deref refs/workspace-project)
+        project        (mf/deref refs/workspace-project)
+        show-pages?    (mf/use-state true)
+        toggle-pages   (mf/use-callback #(reset! show-pages? not))
 
         section        (cond (or mode-inspect? (contains? layout :layers)) :layers
                              (contains? layout :assets) :assets)
@@ -47,9 +49,13 @@
         show-debug?    (contains? layout :debug-panel)
         new-css-system (mf/use-ctx ctx/new-css-system)
 
-        {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
+        {on-pointer-down :on-pointer-down on-lost-pointer-capture :on-lost-pointer-capture  on-pointer-move :on-pointer-move parent-ref :parent-ref size :size}
         (use-resize-hook :left-sidebar 275 275 500 :x false :left)
 
+        {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages  :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages :size}
+        (use-resize-hook :sitemap 200 38 400 :y false nil)
+
+
         handle-collapse
         (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
 
@@ -94,11 +100,21 @@
              :shortcuts? shortcuts?
              :collapsable? true
              :handle-collapse handle-collapse
-             :class :tab-spacing}
+             :class (stl/css :tab-spacing)}
             [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
-             [:div {:class (stl/css :layers-tab)}
-              [:& sitemap {:layout layout}]
-              [:& layers-toolbox {:size-parent size}]]]
+             [:div {:class (stl/css :layers-tab)
+                    :style #js {"--height" (str size-pages "px")}}
+              [:& sitemap {:layout layout
+                           :toggle-pages toggle-pages
+                           :show-pages? @show-pages?
+                           :size size-pages}]
+              (when @show-pages?
+                [:div {:class (stl/css :resize-area-horiz)
+                       :on-pointer-down on-pointer-down-pages
+                       :on-lost-pointer-capture on-lost-pointer-capture-pages
+                       :on-pointer-move on-pointer-move-pages}])
+              [:& layers-toolbox {:size-parent size
+                                  :size size-pages}]]]
 
             (when-not ^boolean mode-inspect?
               [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
@@ -118,8 +134,17 @@
              :handle-collapse handle-collapse}
 
             [:& tabs-element {:id :layers :title (tr "workspace.sidebar.layers")}
-             [:div {:class :layers-tab}
-              [:& sitemap {:layout layout}]
+             [:div {:class :layers-tab
+                    :style #js {"--height" (str size-pages "px")}}
+              [:& sitemap {:layout layout
+                           :toggle-pages toggle-pages
+                           :show-pages? @show-pages?
+                           :size size-pages}]
+              (when @show-pages?
+                [:div.resize-area-horiz
+                 {:on-pointer-down on-pointer-down-pages
+                  :on-lost-pointer-capture on-lost-pointer-capture-pages
+                  :on-pointer-move on-pointer-move-pages}])
               [:& layers-toolbox {:size-parent size}]]]
 
             (when-not ^boolean mode-inspect?
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index 544083bf3..112c76c79 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -26,6 +26,19 @@ $width-settings-bar-max: $s-500;
     height: calc(100vh - $s-52);
     cursor: ew-resize;
   }
+  .resize-area-horiz {
+    position: absolute;
+    top: calc($s-80 + var(--height, 200px));
+    left: 0;
+    width: 100%;
+    height: $s-12;
+    border-top: 2px solid var(--color-background-secondary);
+    background-color: var(--color-background-primary);
+    cursor: ns-resize;
+    &:hover {
+      border-color: var(--color-background-quaternary);
+    }
+  }
   .settings-bar-inside {
     display: grid;
     grid-template-columns: 100%;
@@ -42,8 +55,8 @@ $width-settings-bar-max: $s-500;
     }
   }
 }
-:global(.tab-spacing) {
-  margin: $s-4 $s-8 0 $s-8;
+.tab-spacing {
+  margin: $s-4 $s-12 0 $s-12;
 }
 .right-settings-bar {
   grid-area: right-sidebar;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 8af16fd14..4469bd268 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -237,13 +237,14 @@
     }
   }
   .tool-window-content {
+    --calculated-height: calc(128px + var(--height, 200px));
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: calc(100vh - var(--calculated-height));
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    // scrollbar-gutter: stable;
+    scrollbar-gutter: stable;
     overflow-y: overlay;
     .element-list {
       width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
index cedfbaa1b..a7cc63c46 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
@@ -149,7 +149,7 @@
               (tr "settings.multiple")]
              [:button {:on-click on-remove-all
                        :class (stl/css :remove-btn)}
-               i/remove-refactor]]
+              i/remove-refactor]]
 
             (seq (:fills values))
             [:& h/sortable-container {}
@@ -174,14 +174,13 @@
           (when (or (= type :frame)
                     (and (= type :multiple) (some? (:hide-fill-on-export values))))
             [:div {:class (stl/css :checkbox)}
-
              [:label {:for "show-fill-on-export"
                       :class (stl/css-case :checked (not hide-fill-on-export?))}
               [:span {:class (stl/css-case :check-mark true
                                            :checked (not hide-fill-on-export?))}
-               (when(not hide-fill-on-export?)
+               (when (not hide-fill-on-export?)
                  i/status-tick-refactor)]
-               (tr "workspace.options.show-fill-on-export")
+              (tr "workspace.options.show-fill-on-export")
               [:input {:type "checkbox"
                        :id "show-fill-on-export"
                        :ref checkbox-ref
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 6ca9156ba..0bc00dd7c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -381,7 +381,7 @@
                              (= (:height size-preset) (d/parse-integer (:height values) 0)))
                     [:span {:class (stl/css :check-icon)} i/tick-refactor])]))]]]
 
-          [:& radio-buttons {:selected (name orientation)
+          [:& radio-buttons {:selected (or (d/name orientation) "")
                              :on-change on-orientation-change-refactor
                              :name "frame-otientation"}
            [:& radio-button {:icon i/size-vertical-refactor
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
index 93448e0ff..3d0539e11 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@@ -64,6 +64,7 @@
         shadow-style       (if new-css-system
                              (:style value)
                              (dm/str (:style value)))
+
         shadow-id          (:id value)
 
         open-status-ref    (mf/with-memo [open-state-ref shadow-id]
@@ -146,200 +147,199 @@
              (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value))))))
 
         type-options [{:value "drop-shadow" :label (tr "workspace.options.shadow-options.drop-shadow")}
-                      {:value "inner-shadow" :label (tr "workspace.options.shadow-options.inner-shadow")}]]
+                      {:value "inner-shadow" :label (tr "workspace.options.shadow-options.inner-shadow")}]
 
-    (if new-css-system
-      [:div {:class (stl/css-case :shadow-element true
-                                  :dnd-over-top (= (:over dprops) :top)
-                                  :dnd-over-bot (= (:over dprops) :bot))
-             :ref dref}
-       [:div {:class (stl/css :basic-options)}
-        [:div {:class (stl/css :shadow-info)}
-         [:button {:class (stl/css :more-options)
-                   :on-click on-toggle-open-shadow}
-          i/menu-refactor]
-         [:div {:class (stl/css :type-select)}
-          [:& select
-           {:class (stl/css :shadow-type-select)
-            :default-value (d/name shadow-style)
-            :options type-options
-            :on-change on-type-change}]]]
-        [:div {:class (stl/css :actions)}
-         [:button {:class (stl/css :action-btn)
-                   :on-click toggle-visibility}
-          (if (:hidden value)
-            i/hide-refactor
-            i/shown-refactor)]
-         [:button {:class (stl/css :action-btn)
-                   :on-click on-remove-shadow}
-          i/remove-refactor]]]
-
-       (when open-shadow
-         [:& advanced-options {:class (stl/css :shadow-advanced-options)
-                               :visible? open-shadow
-                               :on-close on-toggle-open-shadow}
-
-          [:div {:class (stl/css :first-row)}
-           [:div {:class (stl/css :offset-x-input)
-                  :title (tr "workspace.options.shadow-options.offsetx")}
-            [:span {:class (stl/css :input-label)}
-             "X"]
-            [:> numeric-input* {:className (stl/css :numeric-input)
-                                :ref adv-offset-x-ref
-                                :no-validate true
-                                :placeholder "--"
-                                :on-change (update-attr index :offset-x basic-offset-x-ref)
-                                :on-blur on-blur
-                                :value (:offset-x value)}]]
-
-           [:div {:class (stl/css :blur-input)
-                  :title (tr "workspace.options.shadow-options.blur")}
-            [:span {:class (stl/css :input-label)}
-             (tr "workspace.options.shadow-options.blur")]
-            [:> numeric-input* {:ref adv-blur-ref
-                                :className (stl/css :numeric-input)
-                                :no-validate true
-                                :placeholder "--"
-                                :on-change (update-attr index :blur basic-blur-ref)
-                                :on-blur on-blur
-                                :min 0
-                                :value (:blur value)}]]
-
-           [:div {:class (stl/css :spread-input)
-                  :title (tr "workspace.options.shadow-options.spread")}
-            [:span {:class (stl/css :input-label)}
-             (tr "workspace.options.shadow-options.spread")]
-            [:> numeric-input* {:ref adv-spread-ref
-                                :className (stl/css :numeric-input)
-                                :no-validate true
-                                :placeholder "--"
-                                :on-change (update-attr index :spread)
-                                :on-blur on-blur
-                                :value (:spread value)}]]]
+        manage-on-open #(st/emit! (dwu/start-undo-transaction :color-row))
+        manage-on-close #(st/emit! (dwu/commit-undo-transaction :color-row))]
 
 
-          [:div {:class (stl/css :second-row)}
-           [:div {:class (stl/css :offset-y-input)
-                  :title (tr "workspace.options.shadow-options.offsety")}
-            [:span {:class (stl/css :input-label)}
-             "Y"]
-            [:> numeric-input* {:ref adv-offset-y-ref
-                                :className (stl/css :numeric-input)
-                                :no-validate true
-                                :placeholder "--"
-                                :on-change (update-attr index :offset-y basic-offset-y-ref)
-                                :on-blur on-blur
-                                :value (:offset-y value)}]]
-           [:& color-row {:color (if (string? (:color value))
-                                   ;; Support for old format colors
-                                   {:color (:color value) :opacity (:opacity value)}
-                                   (:color value))
-                          :title (tr "workspace.options.shadow-options.color")
-                          :disable-gradient true
-                          :on-change update-color
-                          :on-detach detach-color
-                          :on-open #(st/emit! (dwu/start-undo-transaction :color-row))
-                          :on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]])]
+    [:div.shadow-option {:class (stl/css-case new-css-system
+                                              :old-css/shadow-option true
+                                              :shadow-element true
+                                              :dnd-over-top (= (:over dprops) :top)
+                                              :dnd-over-bot (= (:over dprops) :bot))
+                         :ref dref}
+     (if new-css-system
+       [:*
+        [:div {:class (stl/css :basic-options)}
+         [:div {:class (stl/css :shadow-info)}
+          [:button {:class (stl/css :more-options)
+                    :on-click on-toggle-open-shadow}
+           i/menu-refactor]
+          [:div {:class (stl/css :type-select)}
+           [:& select
+            {:class (stl/css :shadow-type-select)
+             :default-value (d/name shadow-style)
+             :options type-options
+             :on-change on-type-change}]]]
+         [:div {:class (stl/css :actions)}
+          [:button {:class (stl/css :action-btn)
+                    :on-click toggle-visibility}
+           (if (:hidden value)
+             i/hide-refactor
+             i/shown-refactor)]
+          [:button {:class (stl/css :action-btn)
+                    :on-click on-remove-shadow}
+           i/remove-refactor]]]
+        (when open-shadow
+          [:& advanced-options {:class (stl/css :shadow-advanced-options)
+                                :visible? open-shadow
+                                :on-close on-toggle-open-shadow}
 
-      [:div.shadow-option {:class (dom/classnames
-                                   :dnd-over-top (= (:over dprops) :top)
-                                   :dnd-over-bot (= (:over dprops) :bot))
-                           :ref dref}
-       [:div.shadow-option-main {:style {:display (when open-shadow "none")}}
-        [:div.element-set-actions-button
-         {:on-click on-toggle-open-shadow}
-         i/actions]
+           [:div {:class (stl/css :first-row)}
+            [:div {:class (stl/css :offset-x-input)
+                   :title (tr "workspace.options.shadow-options.offsetx")}
+             [:span {:class (stl/css :input-label)}
+              "X"]
+             [:> numeric-input* {:className (stl/css :numeric-input)
+                                 :ref adv-offset-x-ref
+                                 :no-validate true
+                                 :placeholder "--"
+                                 :on-change (update-attr index :offset-x basic-offset-x-ref)
+                                 :on-blur on-blur
+                                 :value (:offset-x value)}]]
 
-        [:select.input-select
-         {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
-          :default-value shadow-style
-          :on-change (fn [event]
-                       (let [value (-> event dom/get-target dom/get-value d/read-string)]
-                         (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
-         [:option {:value ":drop-shadow"
-                   :selected (when (= shadow-style ":drop-shadow") "selected")}
-          (tr "workspace.options.shadow-options.drop-shadow")]
-         [:option {:value ":inner-shadow"
-                   :selected (when (= shadow-style ":inner-shadow") "selected")}
-          (tr "workspace.options.shadow-options.inner-shadow")]]
+            [:div {:class (stl/css :blur-input)
+                   :title (tr "workspace.options.shadow-options.blur")}
+             [:span {:class (stl/css :input-label)}
+              (tr "workspace.options.shadow-options.blur")]
+             [:> numeric-input* {:ref adv-blur-ref
+                                 :className (stl/css :numeric-input)
+                                 :no-validate true
+                                 :placeholder "--"
+                                 :on-change (update-attr index :blur basic-blur-ref)
+                                 :on-blur on-blur
+                                 :min 0
+                                 :value (:blur value)}]]
 
-        [:div.shadow-option-main-actions
-         [:div.element-set-actions-button {:on-click (toggle-visibility index)}
-          (if (:hidden value) i/eye-closed i/eye)]
-         [:div.element-set-actions-button
-          {:data-index index
-           :on-click on-remove-shadow}
-          i/minus]]]
+            [:div {:class (stl/css :spread-input)
+                   :title (tr "workspace.options.shadow-options.spread")}
+             [:span {:class (stl/css :input-label)}
+              (tr "workspace.options.shadow-options.spread")]
+             [:> numeric-input* {:ref adv-spread-ref
+                                 :className (stl/css :numeric-input)
+                                 :no-validate true
+                                 :placeholder "--"
+                                 :on-change (update-attr index :spread)
+                                 :on-blur on-blur
+                                 :value (:spread value)}]]]
 
-       [:& advanced-options {:visible? open-shadow
-                             :on-close on-toggle-open-shadow}
-        [:div.color-data
+           [:div {:class (stl/css :second-row)}
+            [:div {:class (stl/css :offset-y-input)
+                   :title (tr "workspace.options.shadow-options.offsety")}
+             [:span {:class (stl/css :input-label)}
+              "Y"]
+             [:> numeric-input* {:ref adv-offset-y-ref
+                                 :className (stl/css :numeric-input)
+                                 :no-validate true
+                                 :placeholder "--"
+                                 :on-change (update-attr index :offset-y basic-offset-y-ref)
+                                 :on-blur on-blur
+                                 :value (:offset-y value)}]]
+            [:& color-row {:color (if (string? (:color value))
+                                           ;; Support for old format colors
+                                    {:color (:color value) :opacity (:opacity value)}
+                                    (:color value))
+                           :title (tr "workspace.options.shadow-options.color")
+                           :disable-gradient true
+                           :on-change update-color
+                           :on-detach detach-color
+                           :on-open manage-on-open
+                           :on-close manage-on-close}]]])]
+
+       [:*
+        [:div.shadow-option-main {:style {:display (when open-shadow "none")}}
          [:div.element-set-actions-button
           {:on-click on-toggle-open-shadow}
           i/actions]
+
          [:select.input-select
           {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
            :default-value shadow-style
-           :on-change (fn [event]
-                        (let [value (-> event dom/get-target dom/get-value d/read-string)]
-                          (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
+           :on-change on-type-change}
           [:option {:value ":drop-shadow"
                     :selected (when (= shadow-style ":drop-shadow") "selected")}
            (tr "workspace.options.shadow-options.drop-shadow")]
           [:option {:value ":inner-shadow"
                     :selected (when (= shadow-style ":inner-shadow") "selected")}
-           (tr "workspace.options.shadow-options.inner-shadow")]]]
+           (tr "workspace.options.shadow-options.inner-shadow")]]
 
-        [:div.row-grid-2
-         [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
-          [:> numeric-input* {:ref adv-offset-x-ref
-                              :no-validate true
-                              :placeholder "--"
-                              :on-change (update-attr index :offset-x basic-offset-x-ref)
-                              :on-blur on-blur
-                              :value (:offset-x value)}]
-          [:span.after (tr "workspace.options.shadow-options.offsetx")]]
+         [:div.shadow-option-main-actions
+          [:div.element-set-actions-button {:on-click toggle-visibility}
+           (if (:hidden value) i/eye-closed i/eye)]
+          [:div.element-set-actions-button
+           {:data-index index
+            :on-click on-remove-shadow}
+           i/minus]]]
 
-         [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
-          [:> numeric-input* {:ref adv-offset-y-ref
-                              :no-validate true
-                              :placeholder "--"
-                              :on-change (update-attr index :offset-y basic-offset-y-ref)
-                              :on-blur on-blur
-                              :value (:offset-y value)}]
-          [:span.after (tr "workspace.options.shadow-options.offsety")]]]
+        [:& advanced-options {:visible? open-shadow
+                              :on-close on-toggle-open-shadow}
+         [:div.color-data
+          [:div.element-set-actions-button
+           {:on-click on-toggle-open-shadow}
+           i/actions]
+          [:select.input-select
+           {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+            :default-value shadow-style
+            :on-change on-type-change}
+           [:option {:value ":drop-shadow"
+                     :selected (when (= shadow-style ":drop-shadow") "selected")}
+            (tr "workspace.options.shadow-options.drop-shadow")]
+           [:option {:value ":inner-shadow"
+                     :selected (when (= shadow-style ":inner-shadow") "selected")}
+            (tr "workspace.options.shadow-options.inner-shadow")]]]
 
-        [:div.row-grid-2
-         [:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
-          [:> numeric-input* {:ref adv-blur-ref
-                              :no-validate true
-                              :placeholder "--"
-                              :on-change (update-attr index :blur basic-blur-ref)
-                              :on-blur on-blur
-                              :min 0
-                              :value (:blur value)}]
-          [:span.after (tr "workspace.options.shadow-options.blur")]]
+         [:div.row-grid-2
+          [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
+           [:> numeric-input* {:ref adv-offset-x-ref
+                               :no-validate true
+                               :placeholder "--"
+                               :on-change (update-attr index :offset-x basic-offset-x-ref)
+                               :on-blur on-blur
+                               :value (:offset-x value)}]
+           [:span.after (tr "workspace.options.shadow-options.offsetx")]]
 
-         [:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
-          [:> numeric-input* {:ref adv-spread-ref
-                              :no-validate true
-                              :placeholder "--"
-                              :on-change (update-attr index :spread)
-                              :on-blur on-blur
-                              :value (:spread value)}]
-          [:span.after (tr "workspace.options.shadow-options.spread")]]]
+          [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
+           [:> numeric-input* {:ref adv-offset-y-ref
+                               :no-validate true
+                               :placeholder "--"
+                               :on-change (update-attr index :offset-y basic-offset-y-ref)
+                               :on-blur on-blur
+                               :value (:offset-y value)}]
+           [:span.after (tr "workspace.options.shadow-options.offsety")]]]
+
+         [:div.row-grid-2
+          [:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
+           [:> numeric-input* {:ref adv-blur-ref
+                               :no-validate true
+                               :placeholder "--"
+                               :on-change (update-attr index :blur basic-blur-ref)
+                               :on-blur on-blur
+                               :min 0
+                               :value (:blur value)}]
+           [:span.after (tr "workspace.options.shadow-options.blur")]]
+
+          [:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
+           [:> numeric-input* {:ref adv-spread-ref
+                               :no-validate true
+                               :placeholder "--"
+                               :on-change (update-attr index :spread)
+                               :on-blur on-blur
+                               :value (:spread value)}]
+           [:span.after (tr "workspace.options.shadow-options.spread")]]]
+
+         [:div.color-row-wrap
+          [:& color-row {:color (if (string? (:color value))
+                                                   ;; Support for old format colors
+                                  {:color (:color value) :opacity (:opacity value)}
+                                  (:color value))
+                         :title (tr "workspace.options.shadow-options.color")
+                         :disable-gradient true
+                         :on-change update-color
+                         :on-detach detach-color
+                         :on-open manage-on-open
+                         :on-close manage-on-close}]]]])]))
 
-        [:div.color-row-wrap
-         [:& color-row {:color (if (string? (:color value))
-                                      ;; Support for old format colors
-                                 {:color (:color value) :opacity (:opacity value)}
-                                 (:color value))
-                        :title (tr "workspace.options.shadow-options.color")
-                        :disable-gradient true
-                        :on-change update-color
-                        :on-detach detach-color
-                        :on-open #(st/emit! (dwu/start-undo-transaction :color-row))
-                        :on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]]])))
 (mf/defc shadow-menu
   {::mf/wrap-props false}
   [props]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index c2ad44f5e..75c8f869a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -14,7 +14,8 @@
    [app.main.data.workspace.libraries :as dwl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet-new :as cb]
+   [app.main.ui.components.color-bullet :as cb]
+   [app.main.ui.components.color-bullet-new :as cbn]
    [app.main.ui.components.color-input :refer [color-input*]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.context :as ctx]
@@ -167,7 +168,7 @@
         [:span {:class (stl/css-case :color-name-wrapper true
                                      :gradient-name-wrapper gradient-color?)}
          [:span {:class (stl/css :color-bullet-wrapper)}
-          [:& cb/color-bullet {:color (cond-> color
+          [:& cbn/color-bullet {:color (cond-> color
                                         (nil? color-name) (assoc
                                                            :id nil
                                                            :file-id nil))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index d630eea1d..8d82b10ec 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -16,7 +16,6 @@
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
-   [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -220,11 +219,8 @@
 ;; --- Sitemap Toolbox
 
 (mf/defc sitemap
-  []
-  (let [{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
-        (use-resize-hook :sitemap 200 38 400 :y false nil)
-
-        file                 (mf/deref refs/workspace-file)
+  [{:keys [size show-pages? toggle-pages] :as props}]
+  (let [file                 (mf/deref refs/workspace-file)
         create               (mf/use-callback
                               (mf/deps file)
                               (fn [event]
@@ -232,24 +228,22 @@
                                   (st/emit! (dw/create-page {:file-id (:id file)
                                                              :project-id (:project-id file)}))
                                   (dom/blur! node))))
-        show-pages?          (mf/use-state true)
-        size                 (if @show-pages? size 32)
-        toggle-pages         (mf/use-callback #(reset! show-pages? not))
+
+        size                 (if show-pages? size 32)
+
         workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
         new-css-system       (mf/use-ctx ctx/new-css-system)]
 
     (if new-css-system
       [:div {:class (dom/classnames (css :sitemap) true)
-             :ref parent-ref
              :style #js {"--height" (str size "px")}}
 
        [:& title-bar {:collapsable? true
-                      :collapsed?   (not @show-pages?)
+                      :collapsed?   (not show-pages?)
                       :on-collapsed toggle-pages
                       :title        (tr "workspace.sidebar.sitemap")
                       :class        (css :title-spacing-sitemap)}
 
-
         (if workspace-read-only?
           [:div
            {:class  (dom/classnames (css :view-only-mode) true)}
@@ -259,30 +253,16 @@
            i/add-refactor])]
 
        [:div {:class (dom/classnames (css :tool-window-content) true)}
-        [:& pages-list {:file file :key (:id file)}]]
+        [:& pages-list {:file file :key (:id file)}]]]
 
-       (when @show-pages?
-         [:div {:class (dom/classnames (css :resize-area) true)
-                :on-pointer-down on-pointer-down
-                :on-lost-pointer-capture on-lost-pointer-capture
-                :on-pointer-move on-pointer-move}])]
-
-
-
-      [:div#sitemap.tool-window {:ref parent-ref
-                                 :style #js {"--height" (str size "px")}}
+      [:div#sitemap.tool-window {:style #js {"--height" (str size "px")}}
        [:div.tool-window-bar
         [:span.pages-title (tr "workspace.sidebar.sitemap")]
         (if workspace-read-only?
           [:div.view-only-mode (tr "labels.view-only")]
           [:div.add-page {:on-click create} i/close])
         [:div.collapse-pages {:on-click toggle-pages
-                              :style {:transform (when (not @show-pages?) "rotate(-90deg)")}} i/arrow-slide]]
+                              :style {:transform (when (not show-pages?) "rotate(-90deg)")}} i/arrow-slide]]
 
        [:div.tool-window-content
-        [:& pages-list {:file file :key (:id file)}]]
-
-       (when @show-pages?
-         [:div.resize-area {:on-pointer-down on-pointer-down
-                            :on-lost-pointer-capture on-lost-pointer-capture
-                            :on-pointer-move on-pointer-move}])])))
+        [:& pages-list {:file file :key (:id file)}]]])))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index 0cac04b5b..7956ae1d0 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -60,9 +60,9 @@
     flex-direction: column;
     overflow-y: auto;
     overflow-x: hidden;
-    // scrollbar-gutter: stable;
+    scrollbar-gutter: stable;
     overflow-y: overlay;
-    height: 100%;
+    height: calc(-38px + var(--height, 200px));
     width: 100%;
 
     .pages-list {
diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
index 8ab61a53c..e310d8755 100644
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
@@ -118,14 +118,14 @@
       ;; Draw Mode
         [:button
          {:class  (stl/css-case :is-toggled (= edit-mode :draw))
-          :alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
+          :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
           :on-click on-select-draw-mode}
          i/pentool-refactor]
 
       ;; Edit mode
         [:button
          {:class (stl/css-case :is-toggled (= edit-mode :move))
-          :alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
+          :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
           :on-click on-select-edit-mode}
          i/move-refactor]]
 
@@ -133,52 +133,52 @@
 
       ;; Add Node
         [:button
-         {:class  (stl/css-case :is-disabled (:add-node enabled-buttons))
-          :alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
+         {:class  (stl/css-case :is-disabled (not (:add-node enabled-buttons)))
+          :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
           :on-click on-add-node}
          i/add-refactor]
 
       ;; Remove node
         [:button
-         {:class (stl/css-case :is-disabled (:remove-node enabled-buttons))
-          :alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
+         {:class (stl/css-case :is-disabled (not (:remove-node enabled-buttons)))
+          :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
           :on-click on-remove-node}
          i/remove-refactor]]
 
        [:div {:class (stl/css :sub-actions-group)}
       ;; Merge Nodes
         [:button
-         {:class (stl/css-case :is-disabled (:merge-nodes enabled-buttons))
-          :alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
+         {:class (stl/css-case :is-disabled (not (:merge-nodes enabled-buttons)))
+          :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
           :on-click on-merge-nodes}
          i/merge-nodes-refactor]
 
       ;; Join Nodes
         [:button
-         {:class (stl/css-case :is-disabled (:join-nodes enabled-buttons))
-          :alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
+         {:class (stl/css-case :is-disabled (not (:join-nodes enabled-buttons)))
+          :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
           :on-click on-join-nodes}
          i/join-nodes-refactor]
 
       ;; Separate Nodes
         [:button
-         {:class (stl/css-case :is-disabled (:separate-nodes enabled-buttons))
-          :alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
+         {:class (stl/css-case :is-disabled (not (:separate-nodes enabled-buttons)))
+          :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
           :on-click on-separate-nodes}
          i/separate-nodes-refactor]]
 
      ;; Make Corner
        [:div {:class (stl/css :sub-actions-group)}
         [:button
-         {:class (stl/css-case :is-disabled (:make-corner enabled-buttons))
-          :alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
+         {:class (stl/css-case :is-disabled (not (:make-corner enabled-buttons)))
+          :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
           :on-click on-make-corner}
          i/to-corner-refactor]
 
       ;; Make Curve
         [:button
-         {:class (stl/css-case :is-disabled (:make-curve enabled-buttons))
-          :alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
+         {:class (stl/css-case :is-disabled (not (:make-curve enabled-buttons)))
+          :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
           :on-click on-make-curve}
          i/to-curve-refactor]]
 
@@ -186,7 +186,7 @@
        [:div {:class (stl/css :sub-actions-group)}
         [:button
          {:class  (stl/css-case :is-toggled snap-toggled)
-          :alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
+          :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
           :on-click on-toggle-snap}
          i/snap-nodes-refactor]]]
 
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
index adac81fcc..065984894 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -75,13 +75,6 @@
 
         grid-edition? (and single? editing? (ctl/grid-layout? shape))]
 
-    (mf/use-effect
-     (mf/deps editing?)
-     (fn []
-       (if editing?
-         (st/emit! (dw/hide-toolbar))
-         (st/emit! (dw/show-toolbar)))))
-
     (cond
       path-edition?
       [:div.viewport-actions