From 1599b2644a016bbf23b21cba4fecc6a2860ef055 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 26 Jan 2022 15:16:21 +0100
Subject: [PATCH 01/11] :sparkles: Resizeable panels

---
 frontend/resources/styles/common/base.scss    |   7 ++
 .../styles/main/layouts/handoff.scss          |   3 +-
 .../styles/main/partials/color-palette.scss   |  21 ++--
 .../styles/main/partials/left-toolbar.scss    |   9 --
 .../styles/main/partials/sidebar.scss         |  35 +++---
 .../main/partials/workspace-header.scss       |   4 +-
 .../styles/main/partials/workspace.scss       |  77 ++++++++++++--
 frontend/src/app/main/data/workspace.cljs     |  47 +++++---
 frontend/src/app/main/ui/hooks/resize.cljs    | 100 ++++++++++++++++++
 frontend/src/app/main/ui/workspace.cljs       |  15 ++-
 .../app/main/ui/workspace/colorpalette.cljs   |  20 ++--
 .../app/main/ui/workspace/left_toolbar.cljs   |   5 +-
 .../src/app/main/ui/workspace/sidebar.cljs    |  41 ++++---
 .../src/app/main/ui/workspace/viewport.cljs   |   3 -
 .../main/ui/workspace/viewport/actions.cljs   |   8 --
 .../main/ui/workspace/viewport/guides.cljs    |   6 +-
 .../app/main/ui/workspace/viewport/hooks.cljs |  20 ++--
 .../ui/workspace/viewport/pixel_overlay.cljs  |   2 +-
 .../app/main/ui/workspace/viewport/utils.cljs |   2 +-
 19 files changed, 307 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/app/main/ui/hooks/resize.cljs

diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index 34ff9c2320..ebd5568d1e 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -11,6 +11,13 @@ body {
   display: flex;
   flex-direction: column;
   font-family: "worksans", sans-serif;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#app {
+  width: 100vw;
   height: 100vh;
   overflow: hidden;
 }
diff --git a/frontend/resources/styles/main/layouts/handoff.scss b/frontend/resources/styles/main/layouts/handoff.scss
index 087c0c6f47..59d981d227 100644
--- a/frontend/resources/styles/main/layouts/handoff.scss
+++ b/frontend/resources/styles/main/layouts/handoff.scss
@@ -1,4 +1,5 @@
-$width-settings-bar: 16rem;
+$width-left-toolbar: 48px;
+$width-settings-bar: 256px;
 
 .handoff-layout {
   height: 100vh;
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index fb42b2418b..040a24d735 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -10,10 +10,7 @@
   background-color: $color-gray-50;
   border-top: 1px solid $color-gray-60;
   display: flex;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  
   z-index: 11;
 
   & .right-arrow,
@@ -46,16 +43,21 @@
     @include animation(0, 0.5s, fadeOutDown);
   }
 
-  &.left-sidebar-open {
-    left: 303px;
-    width: calc(100% - 303px);
-  }
-
   & .context-menu-items {
     bottom: 1.5rem;
     top: initial;
     min-width: 10rem;
   }
+
+  & .resize-area {
+    position: absolute;
+    height: 8px;
+    width: 100%;
+    z-index: 10;
+    cursor: ns-resize;
+    top: 0;
+    left: 0;
+  }
 }
 
 .color-palette-actions {
@@ -119,7 +121,6 @@
   display: flex;
   overflow: hidden;
   width: 100%;
-  height: 5rem;
   padding: 0.25rem;
 
   &.size-small {
diff --git a/frontend/resources/styles/main/partials/left-toolbar.scss b/frontend/resources/styles/main/partials/left-toolbar.scss
index 9b5cf562e8..29ba7bc9a5 100644
--- a/frontend/resources/styles/main/partials/left-toolbar.scss
+++ b/frontend/resources/styles/main/partials/left-toolbar.scss
@@ -5,16 +5,8 @@
 // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-$width-left-toolbar: 48px;
-
 .left-toolbar {
   background-color: $color-gray-50;
-  bottom: 0;
-  height: 100%;
-  position: fixed;
-  left: 0;
-  width: $width-left-toolbar;
-  z-index: 11;
 }
 
 .left-toolbar-inside {
@@ -23,7 +15,6 @@ $width-left-toolbar: 48px;
   display: flex;
   flex-direction: column;
   overflow: visible;
-  padding-top: 48px;
   height: 100%;
 }
 
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 1de3a52642..74b9db8f3d 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -5,29 +5,14 @@
 // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-$width-settings-bar: 16rem;
-// This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
-
 .settings-bar {
   background-color: $color-gray-50;
   border-left: 1px solid $color-gray-60;
-  bottom: 0;
-  height: 100%;
-  position: fixed;
-  right: 0;
-  width: $width-settings-bar;
-
-  &.expanded {
-    width: $width-settings-bar * 3;
-  }
-
-  z-index: 10;
-  overflow-y: auto;
+  position: relative;
 
   &.settings-bar-left {
     border-left: none;
     border-right: 1px solid $color-gray-60;
-    left: 48px;
   }
 
   .settings-bar-inside {
@@ -64,7 +49,6 @@ $width-settings-bar: 16rem;
     }
 
     flex-direction: column;
-    padding-top: 48px;
     height: 100%;
 
     .tool-window {
@@ -163,6 +147,22 @@ $width-settings-bar: 16rem;
       height: auto;
     }
   }
+
+  & .resize-area {
+    position: absolute;
+    width: 8px;
+    height: 100%;
+    z-index: 10;
+    cursor: ew-resize;
+  }
+
+  &.settings-bar-left .resize-area {
+    right: -8px;
+  }
+
+  &.settings-bar-right .resize-area {
+    left: -8px;
+  }
 }
 
 .tool-window-content {
@@ -204,6 +204,7 @@ $width-settings-bar: 16rem;
       }
     }
   }
+
 }
 
 .element-list.pages-list {
diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss
index 43faf986c4..691ee2c6da 100644
--- a/frontend/resources/styles/main/partials/workspace-header.scss
+++ b/frontend/resources/styles/main/partials/workspace-header.scss
@@ -5,14 +5,12 @@
 // Copyright (c) UXBOX Labs SL
 
 .workspace-header {
+  position: relative;
   align-items: center;
   background-color: $color-gray-50;
   border-bottom: 1px solid $color-gray-60;
   display: flex;
-  height: 48px;
   padding: $size-1 $size-4 $size-1 55px;
-  position: relative;
-  z-index: 12;
   justify-content: space-between;
 
   .main-icon {
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 101ec69bce..a3c3f03a71 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -5,10 +5,70 @@
 // Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
+$width-left-toolbar: 48px;
+
+$width-settings-bar: 256px;
+$width-settings-bar-min: 255px;
+$width-settings-bar-max: 500px;
+
+$height-palette: 79px;
+$height-palette-min: 54px;
+$height-palette-max: 80px;
+
 #workspace {
+  width: 100vw;
+  height: 100vh;
   user-select: none;
+
+  display: grid;
+  grid-template-areas: "header header header header"
+                       "toolbar left-sidebar viewport right-sidebar"
+                       "toolbar left-sidebar color-palette right-sidebar";
+
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto auto 1fr auto;
+
+  .workspace-header {
+    grid-area: header;
+    height: 48px;
+  }
+
+  .left-toolbar {
+    grid-area: toolbar;
+    width: $width-left-toolbar;
+  }
+
+  .settings-bar.settings-bar-left {
+    min-width: $width-settings-bar;
+    max-width: 500px;
+    width: var(--width, $width-settings-bar);
+    grid-area: left-sidebar;
+  }
+
+  .settings-bar.settings-bar-right {
+    min-width: $width-settings-bar;
+    max-width: 500px;
+    width: var(--width, $width-settings-bar);
+    grid-area: right-sidebar;
+  }
+
+  .workspace-loader {
+    grid-area: viewport;
+  }
+
+  .workspace-content {
+    grid-area: viewport;
+  }
+
+  .color-palette {
+    grid-area: color-palette;
+    min-height: $height-palette-min;
+    max-height: $height-palette-max;
+    height: var(--height, $height-palette);
+  }
 }
 
+
 .workspace-context-menu {
   background-color: $color-white;
   border-radius: $br-small;
@@ -97,7 +157,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
 
   svg#loader-pencil {
     fill: $color-gray-50;
@@ -107,12 +166,8 @@
 .workspace-content {
   background-color: $color-canvas;
   display: flex;
-  height: 100%;
-  width: calc(100% - #{$width-left-toolbar} - 2 * #{$width-settings-bar});
   padding: 0;
   margin: 0;
-  position: fixed;
-  right: $width-settings-bar;
 
   &.scrolling {
     cursor: grab;
@@ -171,14 +226,12 @@
   }
 
   .workspace-viewport {
-    height: calc(100% - 40px);
     overflow: hidden;
     transition: none;
-    width: 100%;
-
     display: grid;
-    grid-template-rows: 20px 100%;
-    grid-template-columns: 20px 100%;
+    grid-template-rows: 20px 1fr;
+    grid-template-columns: 20px 1fr;
+    flex: 1;
   }
 
   .viewport {
@@ -209,10 +262,14 @@
 
     .render-shapes {
       position: absolute;
+      width: 100%;
+      height: 100%;
     }
 
     .viewport-controls {
       position: absolute;
+      width: 100%;
+      height: 100%;
     }
   }
 
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index 38613db7bf..ea93b46d73 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -481,7 +481,7 @@
               (cond
                 (or (not (mth/finite? (:width srect)))
                     (not (mth/finite? (:height srect))))
-                (assoc local :vbox (assoc size :x 0 :y 0 :left-offset 0))
+                (assoc local :vbox (assoc size :x 0 :y 0))
 
                 (or (> (:width srect) width)
                     (> (:height srect) height))
@@ -522,25 +522,44 @@
                        (update :y y)))))))
 
 (defn update-viewport-size
-  [{:keys [width height] :as size}]
+  [resize-type {:keys [width height] :as size}]
   (ptk/reify ::update-viewport-size
     ptk/UpdateEvent
     (update [_ state]
       (update state :workspace-local
-              (fn [{:keys [vport left-sidebar? zoom] :as local}]
+              (fn [{:keys [vport] :as local}]
                 (if (or (mth/almost-zero? width) (mth/almost-zero? height))
                   ;; If we have a resize to zero just keep the old value
                   local
                   (let [wprop (/ (:width vport) width)
                         hprop (/ (:height vport) height)
-                        left-offset (if left-sidebar? 0 (/ (* -1 15 16) zoom))]
-                    (-> local         ;; This matches $width-settings-bar
-                        (assoc :vport size) ;; in frontend/resources/styles/main/partials/sidebar.scss
-                        (update :vbox (fn [vbox]
-                                        (-> vbox
-                                            (update :width #(/ % wprop))
-                                            (update :height #(/ % hprop))
-                                            (assoc :left-offset left-offset))))))))))))
+
+                        vbox (:vbox local)
+                        vbox-x (:x vbox)
+                        vbox-y (:y vbox)
+                        vbox-width (:width vbox)
+                        vbox-height (:height vbox)
+
+                        vbox-width' (/ vbox-width wprop)
+                        vbox-height' (/ vbox-height hprop)
+
+                        vbox-x'
+                        (case resize-type
+                          :left  (+ vbox-x (- vbox-width vbox-width'))
+                          :right vbox-x
+                          (+ vbox-x (/ (- vbox-width vbox-width') 2)))
+
+                        vbox-y'
+                        (case resize-type
+                          :top  (+ vbox-y (- vbox-height vbox-height'))
+                          :bottom vbox-y
+                          (+ vbox-y (/ (- vbox-height vbox-height') 2)))]
+                    (-> local
+                        (assoc :vport size)
+                        (assoc-in [:vbox :x] vbox-x')
+                        (assoc-in [:vbox :y] vbox-y')
+                        (assoc-in [:vbox :width] vbox-width')
+                        (assoc-in [:vbox :height] vbox-height')))))))))
 
 (defn start-panning []
   (ptk/reify ::start-panning
@@ -596,14 +615,12 @@
 
 (defn- impl-update-zoom
   [{:keys [vbox] :as local} center zoom]
-  (let [vbox (update vbox :x + (:left-offset vbox))
-        new-zoom (if (fn? zoom) (zoom (:zoom local)) zoom)
+  (let [new-zoom (if (fn? zoom) (zoom (:zoom local)) zoom)
         old-zoom (:zoom local)
         center (if center center (gsh/center-rect vbox))
         scale (/ old-zoom new-zoom)
         mtx  (gmt/scale-matrix (gpt/point scale) center)
-        vbox' (gsh/transform-rect vbox mtx)
-        vbox' (update vbox' :x - (:left-offset vbox))]
+        vbox' (gsh/transform-rect vbox mtx)]
     (-> local
         (assoc :zoom new-zoom)
         (update :vbox merge (select-keys vbox' [:x :y :width :height])))))
diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs
new file mode 100644
index 0000000000..79b8600e13
--- /dev/null
+++ b/frontend/src/app/main/ui/hooks/resize.cljs
@@ -0,0 +1,100 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.hooks.resize
+  (:require
+   [app.common.geom.point :as gpt]
+   [app.common.logging :as log]
+   [app.util.dom :as dom]
+   [rumext.alpha :as mf]))
+
+(log/set-level! :warn)
+
+(def last-resize-type nil)
+
+(defn set-resize-type! [type]
+  (set! last-resize-type type))
+
+(defn use-resize-hook
+  [initial min-val max-val axis negate? resize-type]
+  (let [size-state (mf/use-state initial)
+        parent-ref (mf/use-ref nil)
+
+        dragging-ref (mf/use-ref false)
+        start-size-ref (mf/use-ref nil)
+        start-ref (mf/use-ref nil)
+
+        on-pointer-down
+        (fn [event]
+          (dom/capture-pointer event)
+          (mf/set-ref-val! start-size-ref @size-state)
+          (mf/set-ref-val! dragging-ref true)
+          (mf/set-ref-val! start-ref (dom/get-client-position event))
+          (set! last-resize-type resize-type))
+
+        on-lost-pointer-capture
+        (fn [event]
+          (dom/release-pointer event)
+          (mf/set-ref-val! start-size-ref nil)
+          (mf/set-ref-val! dragging-ref false)
+          (mf/set-ref-val! start-ref nil)
+          (set! last-resize-type nil))
+
+        on-mouse-move
+        (fn [event]
+          (when (mf/ref-val dragging-ref)
+            (let [start (mf/ref-val start-ref)
+                  pos (dom/get-client-position event)
+                  delta (-> (gpt/to-vec start pos)
+                            (cond-> negate? gpt/negate)
+                            (get axis))
+                  start-size (mf/ref-val start-size-ref)
+                  new-size (-> (+ start-size delta) (max min-val) (min max-val))]
+              
+              (reset! size-state new-size))))]
+    {:on-pointer-down on-pointer-down
+     :on-lost-pointer-capture on-lost-pointer-capture
+     :on-mouse-move on-mouse-move
+     :parent-ref parent-ref
+     :size @size-state}))
+
+(defn use-resize-observer
+  [callback]
+
+  (let [prev-val-ref (mf/use-ref nil)
+        current-observer-ref (mf/use-ref nil)
+
+        node-ref
+        (mf/use-callback
+         (mf/deps callback)
+         (fn [node]
+           (let [current-observer (mf/ref-val current-observer-ref)
+                 prev-val         (mf/ref-val prev-val-ref)]
+
+             (when (and (not= prev-val node) (some? current-observer))
+               (log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
+               (.disconnect current-observer)
+               (mf/set-ref-val! current-observer-ref nil))
+
+             (when (and (not= prev-val node) (some? node))
+               (let [observer
+                     (js/ResizeObserver.
+                      (fn []
+                        (let [size (dom/get-client-size node)]
+                          (when callback (callback last-resize-type size)))))]
+                 (mf/set-ref-val! current-observer-ref observer)
+                 (log/debug :action "observe"  :js/node node)
+                 (.observe observer node))))
+           (mf/set-ref-val! prev-val-ref node)))]
+
+    (mf/use-effect
+     (fn []
+       (fn []
+         (let [current-observer (mf/ref-val current-observer-ref)]
+           (when (some? current-observer)
+             (log/debug :action "disconnect")
+             (.disconnect current-observer))))))
+    node-ref))
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index 541fb0b843..15c01c18cb 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -12,6 +12,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
+   [app.main.ui.hooks.resize :refer [use-resize-observer]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.colorpalette :refer [colorpalette]]
    [app.main.ui.workspace.colorpicker]
@@ -39,11 +40,19 @@
         {:keys [options-mode]} local
         file   (obj/get props "file")
         layout (obj/get props "layout")
-        colorpalette? (:colorpalette layout)]
+        colorpalette? (:colorpalette layout)
+
+        on-resize
+        (mf/use-callback
+         (fn [resize-type size]
+           (when (:vport local)
+             (st/emit! (dw/update-viewport-size resize-type size)))))
+
+        node-ref (use-resize-observer on-resize)]
     [:*
      (when colorpalette? [:& colorpalette])
 
-     [:section.workspace-content
+     [:section.workspace-content {:ref node-ref}
       [:section.workspace-viewport
        [:& coordinates/coordinates {:colorpalette? colorpalette?}]
 
@@ -131,3 +140,5 @@
                                :layout layout}]
            [:& workspace-loader])]]]]]))
 
+
+
diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index 006fdaaa5c..45efa13f1d 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -12,6 +12,7 @@
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
    [app.util.color :as uc]
    [app.util.i18n :refer [tr]]
@@ -52,7 +53,7 @@
      [:& cb/color-name {:color color :size size}]]))
 
 (mf/defc palette
-  [{:keys [current-colors recent-colors file-colors shared-libs selected size]}]
+  [{:keys [current-colors recent-colors file-colors shared-libs selected]}]
   (let [state      (mf/use-state {:show-menu false })
 
         width      (:width @state 0)
@@ -64,6 +65,9 @@
 
         container  (mf/use-ref nil)
 
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook 72 54 80 :y true :bottom)
+
         on-left-arrow-click
         (mf/use-callback
          (mf/deps max-offset visible)
@@ -111,7 +115,11 @@
         (fn []
           (events/unlistenByKey key1))))
 
-    [:div.color-palette.left-sidebar-open
+    [:div.color-palette {:ref parent-ref
+                         :style #js {"--height" (str size "px")}}
+     [:div.resize-area {:on-pointer-down on-pointer-down
+                        :on-lost-pointer-capture on-lost-pointer-capture
+                        :on-mouse-move on-mouse-move}]
      [:& dropdown {:show (:show-menu @state)
                    :on-close #(swap! state assoc :show-menu false)}
       [:ul.workspace-context-menu.palette-menu
@@ -170,8 +178,7 @@
       [:div.color-palette-inside {:style {:position "relative"
                                           :right (str (* 66 offset) "px")}}
        (for [[idx item] (map-indexed vector current-colors)]
-         [:& palette-item {:size size
-                           :color item
+         [:& palette-item {:color item
                            :key idx}])]]
 
      [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
@@ -188,8 +195,6 @@
         file-colors   (mf/deref refs/workspace-file-colors)
         shared-libs   (mf/deref refs/workspace-libraries)
         selected      (or (mf/deref selected-palette-ref) :recent)
-        size      (or (mf/deref selected-palette-size-ref) :big)
-
         current-library-colors (mf/use-state [])]
 
     (mf/use-effect
@@ -219,5 +224,4 @@
                  :recent-colors recent-colors
                  :file-colors file-colors
                  :shared-libs shared-libs
-                 :selected selected
-                 :size size}]))
+                 :selected selected}]))
diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
index be41b8e6dc..b9f60b75e5 100644
--- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs
+++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
@@ -14,6 +14,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
+   [app.main.ui.hooks.resize :as r]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -136,5 +137,7 @@
        [:li.tooltip.tooltip-right
         {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-palette))
          :class (when (contains? layout :colorpalette) "selected")
-         :on-click (st/emitf (dw/toggle-layout-flags :colorpalette))}
+         :on-click (do
+                     (r/set-resize-type! :bottom)
+                     (st/emitf (dw/toggle-layout-flags :colorpalette)))}
         i/palette]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index da154e26a7..361c6f7c81 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar
   (:require
    [app.main.refs :as refs]
+   [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.workspace.comments :refer [comments-sidebar]]
    [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
@@ -21,19 +22,26 @@
 (mf/defc left-sidebar
   {:wrap [mf/memo]}
   [{:keys [layout ] :as props}]
-  [:aside.settings-bar.settings-bar-left
-   [:div.settings-bar-inside
-    {:data-layout (str/join "," layout)}
-    (when (contains? layout :layers)
-      [:*
-       [:& sitemap {:layout layout}]
-       [:& layers-toolbox]])
+  (let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook 255 255 500 :x false :left)]
 
-    (when (contains? layout :document-history)
-      [:& history-toolbox])
+    [:aside.settings-bar.settings-bar-left {:ref parent-ref
+                                            :style #js {"--width" (str size "px")}}
+     [:div.resize-area {:on-pointer-down on-pointer-down
+                        :on-lost-pointer-capture on-lost-pointer-capture
+                        :on-mouse-move on-mouse-move}]
+     [:div.settings-bar-inside
+      {:data-layout (str/join "," layout)}
+      (when (contains? layout :layers)
+        [:*
+         [:& sitemap {:layout layout}]
+         [:& layers-toolbox]])
 
-    (when (contains? layout :assets)
-      [:& assets-toolbox])]])
+      (when (contains? layout :document-history)
+        [:& history-toolbox])
+
+      (when (contains? layout :assets)
+        [:& assets-toolbox])]]))
 
 ;; --- Right Sidebar (Component)
 
@@ -41,8 +49,15 @@
   {::mf/wrap-props false
    ::mf/wrap [mf/memo]}
   [props]
-  (let [drawing-tool (:tool (mf/deref refs/workspace-drawing))]
-    [:aside.settings-bar
+  (let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook 255 255 500 :x true :right)
+
+        drawing-tool (:tool (mf/deref refs/workspace-drawing))]
+    [:aside.settings-bar.settings-bar-right {:ref parent-ref
+                                             :style #js {"--width" (str size "px")}}
+     [:div.resize-area {:on-pointer-down on-pointer-down
+                        :on-lost-pointer-capture on-lost-pointer-capture
+                        :on-mouse-move on-mouse-move}]
      [:div.settings-bar-inside
       (if (= drawing-tool :comments)
         [:& comments-sidebar]
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 4c673a565a..acc6cdeac1 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -163,7 +163,6 @@
     (hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport?)
     (hooks/setup-viewport-size viewport-ref)
     (hooks/setup-cursor cursor alt? panning drawing-tool drawing-path? node-editing?)
-    (hooks/setup-resize layout viewport-ref)
     (hooks/setup-keyboard alt? ctrl? space?)
     (hooks/setup-hover-shapes page-id move-stream base-objects transform selected ctrl? hover hover-ids @hover-disabled? zoom)
     (hooks/setup-viewport-modifiers modifiers base-objects)
@@ -222,8 +221,6 @@
        :xmlnsXlink "http://www.w3.org/1999/xlink"
        :preserveAspectRatio "xMidYMid meet"
        :key (str "viewport" page-id)
-       :width (:width vport 0)
-       :height (:height vport 0)
        :view-box (utils/format-viewbox vbox)
        :ref viewport-ref
        :class (when drawing-tool "drawing")
diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs
index 54b46e727f..4862883743 100644
--- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs
@@ -492,11 +492,3 @@
        (when (and (not (#{"INPUT" "TEXTAREA"} tag-name)) (not @disable-paste))
          (st/emit! (dw/paste-from-event event @in-viewport?)))))))
 
-(defn on-resize [viewport-ref]
-  (mf/use-callback
-   (fn [_]
-     (let [node (mf/ref-val viewport-ref)
-           prnt (dom/get-parent node)
-           size (dom/get-client-size prnt)]
-      ;; We schedule the event so it fires after `initialize-page` event
-       (timers/schedule #(st/emit! (dw/update-viewport-size size)))))))
diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs
index f18d913f61..03b7a3bdbb 100644
--- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/guides.cljs
@@ -220,12 +220,12 @@
 (defn guide-creation-area
   [vbox zoom axis]
   (if (= axis :x)
-    {:x (:x vbox)
+    {:x (+ (:x vbox) (/ 8 zoom))
      :y (:y vbox)
-     :width (/ 24 zoom)
+     :width (/ 16 zoom)
      :height (:height vbox)}
 
-    {:x (:x vbox)
+    {:x (+ (:x vbox) (+ 28 zoom))
      :y (:y vbox)
      :width (:width vbox)
      :height (/ 24 zoom)}))
diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
index 33cf92fe38..21ea3e7001 100644
--- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
@@ -31,10 +31,9 @@
         on-key-up         (actions/on-key-up)
         on-mouse-move     (actions/on-mouse-move viewport-ref zoom)
         on-mouse-wheel    (actions/on-mouse-wheel viewport-ref zoom)
-        on-resize         (actions/on-resize viewport-ref)
         on-paste          (actions/on-paste disable-paste in-viewport?)]
     (mf/use-layout-effect
-     (mf/deps on-key-down on-key-up on-mouse-move on-mouse-wheel on-resize on-paste)
+     (mf/deps on-key-down on-key-up on-mouse-move on-mouse-wheel on-paste)
      (fn []
        (let [node (mf/ref-val viewport-ref)
              keys [(events/listen js/document EventType.KEYDOWN on-key-down)
@@ -43,7 +42,6 @@
                    ;; bind with passive=false to allow the event to be cancelled
                    ;; https://stackoverflow.com/a/57582286/3219895
                    (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
-                   (events/listen js/window EventType.RESIZE on-resize)
                    (events/listen js/window EventType.PASTE on-paste)]]
 
          (fn []
@@ -52,12 +50,12 @@
 
 (defn setup-viewport-size [viewport-ref]
   (mf/use-layout-effect
-  (fn []
-    (let [node (mf/ref-val viewport-ref)
-          prnt (dom/get-parent node)
-          size (dom/get-client-size prnt)]
-      ;; We schedule the event so it fires after `initialize-page` event
-      (timers/schedule #(st/emit! (dw/initialize-viewport size)))))))
+   (fn []
+     (let [node (mf/ref-val viewport-ref)
+           prnt (dom/get-parent node)
+           size (dom/get-client-size prnt)]
+       ;; We schedule the event so it fires after `initialize-page` event
+       (timers/schedule #(st/emit! (dw/initialize-viewport size)))))))
 
 (defn setup-cursor [cursor alt? panning drawing-tool drawing-path? path-editing?]
   (mf/use-effect
@@ -80,10 +78,6 @@
        (when (not= @cursor new-cursor)
          (reset! cursor new-cursor))))))
 
-(defn setup-resize [layout viewport-ref]
-  (let [on-resize (actions/on-resize viewport-ref)]
-    (mf/use-layout-effect (mf/deps layout) on-resize)))
-
 (defn setup-keyboard [alt? ctrl? space?]
   (hooks/use-stream ms/keyboard-alt #(reset! alt? %))
   (hooks/use-stream ms/keyboard-ctrl #(reset! ctrl? %))
diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
index 3c09e952f3..fb35ba9976 100644
--- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
@@ -25,7 +25,7 @@
   (:import goog.events.EventType))
 
 (defn format-viewbox [vbox]
-  (str/join " " [(+ (:x vbox 0) (:left-offset vbox 0))
+  (str/join " " [(:x vbox 0)
                  (:y vbox 0)
                  (:width vbox 0)
                  (:height vbox 0)]))
diff --git a/frontend/src/app/main/ui/workspace/viewport/utils.cljs b/frontend/src/app/main/ui/workspace/viewport/utils.cljs
index b7c6ff280d..9c0734afaa 100644
--- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/utils.cljs
@@ -148,7 +148,7 @@
             (dom/remove-attribute node "transform")))))))
 
 (defn format-viewbox [vbox]
-  (str/join " " [(+ (:x vbox 0) (:left-offset vbox 0))
+  (str/join " " [(:x vbox 0)
                  (:y vbox 0)
                  (:width vbox 0)
                  (:height vbox 0)]))

From ada837f7e49e693ab7ea2fbf273d4718f74aa461 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 26 Jan 2022 17:26:57 +0100
Subject: [PATCH 02/11] :sparkles: New rules styles, resize pages

---
 .../styles/main/partials/sidebar-sitemap.scss | 13 ++-
 .../styles/main/partials/sidebar.scss         | 28 ++++++-
 .../styles/main/partials/tab-container.scss   |  4 -
 frontend/src/app/main/data/workspace.cljs     |  4 +-
 .../main/ui/viewer/handoff/right_sidebar.cljs |  3 +-
 frontend/src/app/main/ui/workspace.cljs       | 21 ++---
 .../app/main/ui/workspace/left_toolbar.cljs   | 21 ++---
 .../src/app/main/ui/workspace/sidebar.cljs    | 33 +++++---
 .../main/ui/workspace/sidebar/sitemap.cljs    | 18 +++-
 .../src/app/main/ui/workspace/viewport.cljs   |  2 +-
 .../app/main/ui/workspace/viewport/rules.cljs | 84 ++++++++++++-------
 frontend/src/debug.cljs                       |  5 ++
 12 files changed, 153 insertions(+), 83 deletions(-)

diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
index 3a14879f97..ffc67c1371 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
@@ -5,8 +5,8 @@
 // Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-.sitemap {
-  flex: none !important;
+#sitemap {
+  height: var(--height, 200px);
 
   .element-list {
     li {
@@ -118,6 +118,15 @@
       }
     }
   }
+
+  & .resize-area {
+    position: absolute;
+    width: 100%;
+    height: 16px;
+    bottom: -8px;
+    left: 0;
+    cursor: ns-resize;
+  }
 }
 
 .add-page,
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 74b9db8f3d..dcb069febf 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -13,6 +13,27 @@
   &.settings-bar-left {
     border-left: none;
     border-right: 1px solid $color-gray-60;
+
+    & .tab-container-tabs {
+      padding-left: 1.5rem;
+    }
+
+    & button.collapse-sidebar {
+      background: none;
+      border: none;
+      cursor: pointer;
+      height: 2.5rem;
+      padding-top: 0.75rem;
+      position: absolute;
+      width: 1rem;
+
+      & svg {
+        width: 12px;
+        height: 12px;
+        fill: $color-gray-20;
+        transform: rotate(180deg);
+      }
+    }
   }
 
   .settings-bar-inside {
@@ -59,7 +80,6 @@
       flex: 1;
       width: 100%;
       height: 100%;
-      overflow: hidden;
 
       .tool-window-bar {
         align-items: center;
@@ -148,7 +168,7 @@
     }
   }
 
-  & .resize-area {
+  & > .resize-area {
     position: absolute;
     width: 8px;
     height: 100%;
@@ -156,11 +176,11 @@
     cursor: ew-resize;
   }
 
-  &.settings-bar-left .resize-area {
+  &.settings-bar-left > .resize-area {
     right: -8px;
   }
 
-  &.settings-bar-right .resize-area {
+  &.settings-bar-right > .resize-area {
     left: -8px;
   }
 }
diff --git a/frontend/resources/styles/main/partials/tab-container.scss b/frontend/resources/styles/main/partials/tab-container.scss
index 76417795ae..13a43185c6 100644
--- a/frontend/resources/styles/main/partials/tab-container.scss
+++ b/frontend/resources/styles/main/partials/tab-container.scss
@@ -32,10 +32,6 @@
 
 .tab-container-content {
   flex: 1;
-  height: 100%;
-  max-height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .tab-element,
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index ea93b46d73..a303b31060 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -528,7 +528,9 @@
     (update [_ state]
       (update state :workspace-local
               (fn [{:keys [vport] :as local}]
-                (if (or (mth/almost-zero? width) (mth/almost-zero? height))
+                (if (or (nil? vport)
+                        (mth/almost-zero? width)
+                        (mth/almost-zero? height))
                   ;; If we have a resize to zero just keep the old value
                   local
                   (let [wprop (/ (:width vport) width)
diff --git a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs
index 53b4895a84..ac9d30d3f6 100644
--- a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs
+++ b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs
@@ -45,8 +45,7 @@
             [:*
              [:span.tool-window-bar-icon
               [:& si/element-icon {:shape first-shape}]]
-             [:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]])
-          ]
+             [:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]])]
          [:div.tool-window-content
           [:& tab-container {:on-change-tab #(do
                                                (reset! expanded false)
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index 15c01c18cb..b8ba83f55b 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -61,12 +61,12 @@
                      :selected selected
                      :layout layout}]]]
 
-     [:& left-toolbar {:layout layout}]
-
-     ;; Aside
-     [:& left-sidebar {:layout layout}]
-     [:& right-sidebar {:section options-mode
-                        :selected selected}]]))
+     (when-not (:hide-ui layout)
+       [:*
+        [:& left-toolbar {:layout layout}]
+        [:& left-sidebar {:layout layout}]
+        [:& right-sidebar {:section options-mode
+                           :selected selected}]])]))
 
 (def trimmed-page-ref (l/derived :trimmed-page st/state =))
 
@@ -125,10 +125,11 @@
       [:& (mf/provider ctx/current-project-id) {:value (:id project)}
        [:& (mf/provider ctx/current-page-id) {:value page-id}
         [:section#workspace
-         [:& header {:file file
-                     :page-id page-id
-                     :project project
-                     :layout layout}]
+         (when (not (:hide-ui layout))
+           [:& header {:file file
+                       :page-id page-id
+                       :project project
+                       :layout layout}])
 
          [:& context-menu]
 
diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
index b9f60b75e5..cb4f0c6671 100644
--- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs
+++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
@@ -120,20 +120,13 @@
 
       [:ul.left-toolbar-options.panels
        [:li.tooltip.tooltip-right
-        {:alt (tr "workspace.sidebar.layers" (sc/get-tooltip :toggle-layers))
-         :class (when (contains? layout :layers) "selected")
-         :on-click (st/emitf (dw/go-to-layout :layers))}
-        i/layers]
-       [:li.tooltip.tooltip-right
-        {:alt (tr "workspace.toolbar.assets" (sc/get-tooltip :toggle-assets))
-         :class (when (contains? layout :assets) "selected")
-         :on-click (st/emitf (dw/go-to-layout :assets))}
-        i/library]
-       [:li.tooltip.tooltip-right
-        {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
-         :class (when (contains? layout :document-history) "selected")
-         :on-click (st/emitf (dw/go-to-layout :document-history))}
-        i/recent]
+        {;;:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-textpalette))
+         :class (when (contains? layout :textpalette) "selected")
+         :on-click (do
+                     (r/set-resize-type! :bottom)
+                     (st/emitf (dw/toggle-layout-flags :textpalette)))}
+        i/palette]
+       
        [:li.tooltip.tooltip-right
         {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-palette))
          :class (when (contains? layout :colorpalette) "selected")
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 361c6f7c81..dec3a6feb8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -6,6 +6,8 @@
 
 (ns app.main.ui.workspace.sidebar
   (:require
+   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
+   [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.workspace.comments :refer [comments-sidebar]]
@@ -15,14 +17,20 @@
    [app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
    [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
    [cuerdas.core :as str]
-   [rumext.alpha :as mf]))
+   [rumext.alpha :as mf]
+   [app.main.store :as st]
+   [app.main.ui.icons :as i]
+   ))
 
 ;; --- Left Sidebar (Component)
 
 (mf/defc left-sidebar
   {:wrap [mf/memo]}
   [{:keys [layout ] :as props}]
-  (let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+  (let [section (cond (contains? layout :layers) :layers
+                      (contains? layout :assets) :assets)
+
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
         (use-resize-hook 255 255 500 :x false :left)]
 
     [:aside.settings-bar.settings-bar-left {:ref parent-ref
@@ -30,18 +38,21 @@
      [:div.resize-area {:on-pointer-down on-pointer-down
                         :on-lost-pointer-capture on-lost-pointer-capture
                         :on-mouse-move on-mouse-move}]
+
+
      [:div.settings-bar-inside
-      {:data-layout (str/join "," layout)}
-      (when (contains? layout :layers)
-        [:*
-         [:& sitemap {:layout layout}]
-         [:& layers-toolbox]])
+      [:button.collapse-sidebar i/arrow-slide]
+      [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
+                         :selected section}
 
-      (when (contains? layout :document-history)
-        [:& history-toolbox])
+       [:& tab-element {:id :layers :title "Layers"}
+        [:& sitemap {:layout layout}]
+        [:& layers-toolbox]]
 
-      (when (contains? layout :assets)
-        [:& assets-toolbox])]]))
+       [:& tab-element {:id :assets :title "Library"}
+        [:& assets-toolbox]]]]
+     
+     ]))
 
 ;; --- Right Sidebar (Component)
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index d2a65a52b5..a08eee3914 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -20,7 +20,9 @@
    [app.util.keyboard :as kbd]
    [cuerdas.core :as str]
    [okulary.core :as l]
-   [rumext.alpha :as mf]))
+   [rumext.alpha :as mf]
+   [app.main.ui.hooks.resize :refer [use-resize-hook]]
+   ))
 
 ;; --- Page Item
 
@@ -205,10 +207,14 @@
                                                   :project-id (:project-id file)}))))
         show-pages? (mf/use-state true)
 
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook 200 38 400 :y false nil)
+
         toggle-pages
         (mf/use-callback #(reset! show-pages? not))]
 
-    [:div.sitemap.tool-window
+    [:div#sitemap.tool-window {:ref parent-ref
+                               :style #js {"--height" (str size "px")}}
      [:div.tool-window-bar
       [:span (tr "workspace.sidebar.sitemap")]
       [:div.add-page {:on-click create} i/close]
@@ -216,4 +222,10 @@
 
      (when @show-pages?
        [:div.tool-window-content
-        [:& pages-list {:file file :key (:id file)}]])]))
+        [:& pages-list {:file file :key (:id file)}]])
+
+     [:div.resize-area {:on-pointer-down on-pointer-down
+                        :on-lost-pointer-capture on-lost-pointer-capture
+                        :on-mouse-move on-mouse-move}]
+
+     ]))
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index acc6cdeac1..6a233f7b7a 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -156,7 +156,7 @@
         show-selrect?            (and selrect (empty? drawing))
         show-measures?           (and (not transform) (not node-editing?) show-distances?)
         show-artboard-names?     (contains? layout :display-artboard-names)
-        show-rules?              (contains? layout :rules)
+        show-rules?              (and (contains? layout :rules) (not (contains? layout :hide-ui)))
 
         disabled-guides?         (or drawing-tool transform)]
 
diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
index 6b21452744..da40d316f3 100644
--- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
@@ -53,6 +53,21 @@
           height (- (:height vbox) (/ 21 zoom))]
       {:x x :y y :width width :height height})))
 
+(defn get-background-area
+  [vbox zoom axis]
+  (if (= axis :x)
+    (let [x      (:x vbox)
+          y      (:y vbox)
+          width  (:width vbox)
+          height (/ 22 zoom)]
+      {:x x :y y :width width :height height})
+
+    (let [x      (:x vbox)
+          y      (+ (:y vbox) (/ 22 zoom))
+          width  (/ 22 zoom)
+          height (- (:height vbox) (/ 21 zoom))]
+      {:x x :y y :width width :height height})))
+
 (defn get-rule-params
   [vbox axis]
   (if (= axis :x)
@@ -89,41 +104,48 @@
         step (calculate-step-size zoom)
         clip-id (str "clip-rule-" (d/name axis))]
 
-    [:g.rules {:clipPath (str "url(#" clip-id ")")} 
+    
+    [:*
+     (let [{:keys [x y width height]} (get-background-area vbox zoom axis)]
+       [:rect {:x x :y y :width width :height height :style {:fill "#303236"}}])
 
-     [:defs
-      [:clipPath {:id clip-id}
-       (let [{:keys [x y width height]} (get-clip-area vbox zoom axis)]
-         [:rect {:x x :y y :width width :height height}])]]
+     [:g.rules {:clipPath (str "url(#" clip-id ")")} 
 
-     (let [{:keys [start end]} (get-rule-params vbox axis)
-           minv (max (mth/round start) -100000)
-           minv (* (mth/ceil (/ minv step)) step)
-           maxv (min (mth/round end) 100000)
-           maxv (* (mth/floor (/ maxv step)) step)]
+      [:defs
+       [:clipPath {:id clip-id}
+        (let [{:keys [x y width height]} (get-clip-area vbox zoom axis)]
+          [:rect {:x x :y y :width width :height height}])]]
 
-       (for [step-val (range minv (inc maxv) step)]
-         (let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
-               (get-rule-axis step-val vbox zoom axis)]
-           [:* 
-            [:text {:key (str "text-" (d/name axis) "-" step-val)
-                    :x text-x
-                    :y text-y
-                    :text-anchor "middle"
-                    :dominant-baseline "middle"
-                    :transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
-                    :style {:font-size (/ 13 zoom)
-                            :font-family "sourcesanspro"
-                            :fill colors/gray-30}}
-             (str (mth/round step-val))]
+      
 
-            [:line {:key (str "line-" (d/name axis) "-"  step-val)
-                    :x1 line-x1
-                    :y1 line-y1
-                    :x2 line-x2
-                    :y2 line-y2
-                    :style {:stroke colors/gray-30
-                            :stroke-width rules-width}}]])))]))
+      (let [{:keys [start end]} (get-rule-params vbox axis)
+            minv (max (mth/round start) -100000)
+            minv (* (mth/ceil (/ minv step)) step)
+            maxv (min (mth/round end) 100000)
+            maxv (* (mth/floor (/ maxv step)) step)]
+
+        (for [step-val (range minv (inc maxv) step)]
+          (let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
+                (get-rule-axis step-val vbox zoom axis)]
+            [:* 
+             [:text {:key (str "text-" (d/name axis) "-" step-val)
+                     :x text-x
+                     :y text-y
+                     :text-anchor "middle"
+                     :dominant-baseline "middle"
+                     :transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
+                     :style {:font-size (/ 13 zoom)
+                             :font-family "sourcesanspro"
+                             :fill colors/gray-30}}
+              (str (mth/round step-val))]
+
+             [:line {:key (str "line-" (d/name axis) "-"  step-val)
+                     :x1 line-x1
+                     :y1 line-y1
+                     :x2 line-x2
+                     :y2 line-y2
+                     :style {:stroke colors/gray-30
+                             :stroke-width rules-width}}]])))]]))
 
 (mf/defc rules
   {::mf/wrap-props false
diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs
index ef4bb46e57..50f93a7bd7 100644
--- a/frontend/src/debug.cljs
+++ b/frontend/src/debug.cljs
@@ -278,3 +278,8 @@
    dw/reset-zoom
    (dw/update-viewport-position {:x (constantly 0) :y (constantly 0)})))
 
+
+(defn ^:export hide-ui
+  []
+  (st/emit!
+   (dw/toggle-layout-flags :hide-ui)))

From 8c3c9a8ca4f8dbc2418d68b5dea3d44edd3069a8 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 31 Jan 2022 17:50:33 +0100
Subject: [PATCH 03/11] :sparkles: Refactor workspace header

---
 CHANGES.md                                    |  1 +
 .../styles/main/partials/sidebar.scss         | 52 +++++++++++-------
 .../main/partials/workspace-header.scss       | 51 ++++++++++++++++--
 .../app/main/data/workspace/shortcuts.cljs    | 12 +++--
 frontend/src/app/main/refs.cljs               |  3 ++
 frontend/src/app/main/ui/hooks/resize.cljs    | 13 +++--
 frontend/src/app/main/ui/workspace.cljs       | 13 +++--
 .../app/main/ui/workspace/colorpalette.cljs   |  2 +-
 .../app/main/ui/workspace/context_menu.cljs   | 13 +++--
 .../src/app/main/ui/workspace/header.cljs     | 53 +++++++++++--------
 .../src/app/main/ui/workspace/sidebar.cljs    | 39 ++++++++------
 .../main/ui/workspace/sidebar/sitemap.cljs    |  7 ++-
 .../ui/workspace/viewport/scroll_bars.cljs    | 26 ++++++---
 frontend/translations/en.po                   |  5 +-
 frontend/translations/es.po                   |  5 +-
 15 files changed, 207 insertions(+), 88 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 8f5fb32edf..df9e39e4cd 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -18,6 +18,7 @@
 - Improve file menu by adding semantically groups [Github #1203](https://github.com/penpot/penpot/issues/1203)
 - Add update components in bulk option in context menu [Taiga #1975](https://tree.taiga.io/project/penpot/us/1975)
 - Create first E2E tests [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608), [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608)
+- Refactor of workspace toolbars [Taiga #2319](https://tree.taiga.io/project/penpot/us/2319)
 
 ### :bug: Bugs fixed
 ### :arrow_up: Deps updates
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index dcb069febf..b760093257 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -17,23 +17,6 @@
     & .tab-container-tabs {
       padding-left: 1.5rem;
     }
-
-    & button.collapse-sidebar {
-      background: none;
-      border: none;
-      cursor: pointer;
-      height: 2.5rem;
-      padding-top: 0.75rem;
-      position: absolute;
-      width: 1rem;
-
-      & svg {
-        width: 12px;
-        height: 12px;
-        fill: $color-gray-20;
-        transform: rotate(180deg);
-      }
-    }
   }
 
   .settings-bar-inside {
@@ -181,7 +164,7 @@
   }
 
   &.settings-bar-right > .resize-area {
-    left: -8px;
+    left: -4px;
   }
 }
 
@@ -243,3 +226,36 @@
     width: 100%;
   }
 }
+
+button.collapse-sidebar {
+  background: none;
+  border: none;
+  cursor: pointer;
+  height: 2.5rem;
+  padding-top: 0.75rem;
+  position: absolute;
+  width: 1rem;
+
+  & svg {
+    width: 12px;
+    height: 12px;
+    fill: $color-gray-20;
+    transform: rotate(180deg);
+  }
+
+  &.collapsed {
+    background: $color-black;
+    left: 48px;
+    top: 48px;
+    width: 18px;
+    height: 24px;
+    padding: 0;
+    border-radius: 0px 4px 4px 0px;
+
+    & svg {
+      width: 8px;
+      height: 8px;
+      transform: rotate(0deg);
+    }
+  }
+}
diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss
index 691ee2c6da..f2e20d65d6 100644
--- a/frontend/resources/styles/main/partials/workspace-header.scss
+++ b/frontend/resources/styles/main/partials/workspace-header.scss
@@ -13,6 +13,28 @@
   padding: $size-1 $size-4 $size-1 55px;
   justify-content: space-between;
 
+  display: grid;
+  grid-template-areas: "left center right";
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: 100%;
+  padding: 0;
+
+  .left-area {
+    grid-area: left;
+    display: flex;
+    height: 100%;
+  }
+
+  .center-area {
+    grid-area: center;
+  }
+
+  .right-area {
+    grid-area: right;
+    display: flex;
+    height: 100%;
+  }
+
   .main-icon {
     align-items: center;
     background-color: $color-gray-60;
@@ -21,9 +43,6 @@
     display: flex;
     height: 100%;
     justify-content: center;
-    left: 0;
-    position: absolute;
-    top: 0;
     width: 48px;
 
     a {
@@ -44,6 +63,7 @@
   }
 
   .menu-section {
+    margin-left: 1rem;
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -73,6 +93,8 @@
     justify-content: flex-end;
     align-items: center;
     position: relative;
+    padding-right: 1rem;
+    border-right: 1px solid black;
 
     > * {
       margin-left: $size-5;
@@ -216,7 +238,8 @@
   }
 
   .active-users {
-    align-items: center;
+    flex: 1;
+    justify-content: center;
     display: flex;
     margin: 0;
 
@@ -233,6 +256,26 @@
       }
     }
   }
+
+  & button.document-history {
+    background: $color-gray-60;
+    border-radius: 3px;
+    border: none;
+    cursor: pointer;
+    height: 24px;
+    padding: 3px;
+    width: 24px;
+
+    & svg {
+      width: 18px;
+      fill: $color-gray-20;
+      height: 18px;
+    }
+
+    &.selected svg {
+      fill: $color-primary;
+    }
+  }
 }
 
 .persistence-status-widget {
diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs
index 7c6cc2212f..eafc00e19a 100644
--- a/frontend/src/app/main/data/workspace/shortcuts.cljs
+++ b/frontend/src/app/main/data/workspace/shortcuts.cljs
@@ -338,9 +338,15 @@
                           :command (ds/c-mod "alt+l")
                           :fn #(st/emit! (dw/toggle-proportion-lock))}
 
-   :create-artboard-from-selection   {:tooltip (ds/meta (ds/alt "G"))
-                          :command (ds/c-mod "alt+g")
-                          :fn #(st/emit! (dw/create-artboard-from-selection))}})
+   :create-artboard-from-selection {:tooltip (ds/meta (ds/alt "G"))
+                                    :command (ds/c-mod "alt+g")
+                                    :fn #(st/emit! (dw/create-artboard-from-selection))}
+
+   :hide-ui {:tooltip "\\"
+             :command "\\"
+             :fn #(st/emit! (dw/toggle-layout-flags :hide-ui))}
+
+   })
 
 (def opacity-shortcuts
   (into {} (->>
diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index c2efd50d84..7478edc3fd 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -167,6 +167,9 @@
 (def workspace-layout
   (l/derived :workspace-layout st/state))
 
+(def current-file-id
+  (l/derived :current-file-id st/state))
+
 (def workspace-file
   (l/derived (fn [state]
                (let [file (:workspace-file state)
diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs
index 79b8600e13..b4ba927be0 100644
--- a/frontend/src/app/main/ui/hooks/resize.cljs
+++ b/frontend/src/app/main/ui/hooks/resize.cljs
@@ -8,7 +8,9 @@
   (:require
    [app.common.geom.point :as gpt]
    [app.common.logging :as log]
+   [app.main.refs :as refs]
    [app.util.dom :as dom]
+   [app.util.storage :refer [storage]]
    [rumext.alpha :as mf]))
 
 (log/set-level! :warn)
@@ -19,8 +21,10 @@
   (set! last-resize-type type))
 
 (defn use-resize-hook
-  [initial min-val max-val axis negate? resize-type]
-  (let [size-state (mf/use-state initial)
+  [key initial min-val max-val axis negate? resize-type]
+
+  (let [current-file-id (mf/deref refs/current-file-id)
+        size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
         parent-ref (mf/use-ref nil)
 
         dragging-ref (mf/use-ref false)
@@ -54,7 +58,8 @@
                   start-size (mf/ref-val start-size-ref)
                   new-size (-> (+ start-size delta) (max min-val) (min max-val))]
               
-              (reset! size-state new-size))))]
+              (reset! size-state new-size)
+              (swap! storage assoc-in [::saved-resize current-file-id key] new-size))))]
     {:on-pointer-down on-pointer-down
      :on-lost-pointer-capture on-lost-pointer-capture
      :on-mouse-move on-mouse-move
@@ -86,7 +91,7 @@
                         (let [size (dom/get-client-size node)]
                           (when callback (callback last-resize-type size)))))]
                  (mf/set-ref-val! current-observer-ref observer)
-                 (log/debug :action "observe"  :js/node node)
+                 (log/debug :action "observe"  :js/node node :js/observer observer)
                  (.observe observer node))))
            (mf/set-ref-val! prev-val-ref node)))]
 
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index b8ba83f55b..eba5fe8d24 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -26,6 +26,7 @@
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
+   [debug :refer [debug?]]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
 
@@ -44,6 +45,7 @@
 
         on-resize
         (mf/use-callback
+         (mf/deps (:vport local))
          (fn [resize-type size]
            (when (:vport local)
              (st/emit! (dw/update-viewport-size resize-type size)))))
@@ -54,7 +56,8 @@
 
      [:section.workspace-content {:ref node-ref}
       [:section.workspace-viewport
-       [:& coordinates/coordinates {:colorpalette? colorpalette?}]
+       (when (debug? :coordinates)
+         [:& coordinates/coordinates {:colorpalette? colorpalette?}])
 
        [:& viewport {:file file
                      :local local
@@ -64,9 +67,13 @@
      (when-not (:hide-ui layout)
        [:*
         [:& left-toolbar {:layout layout}]
-        [:& left-sidebar {:layout layout}]
+        (if (:collapse-left-sidebar layout)
+          [:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flags :collapse-left-sidebar))}
+           i/arrow-slide]
+          [:& left-sidebar {:layout layout}])
         [:& right-sidebar {:section options-mode
-                           :selected selected}]])]))
+                           :selected selected
+                           :layout layout}]])]))
 
 (def trimmed-page-ref (l/derived :trimmed-page st/state =))
 
diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index 45efa13f1d..40383d5261 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -66,7 +66,7 @@
         container  (mf/use-ref nil)
 
         {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
-        (use-resize-hook 72 54 80 :y true :bottom)
+        (use-resize-hook :palette 72 54 80 :y true :bottom)
 
         on-left-arrow-click
         (mf/use-callback
diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs
index 0406b9dfb5..5f07b7dc95 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/context_menu.cljs
@@ -436,10 +436,15 @@
 
 (mf/defc viewport-context-menu
   []
-  (let [do-paste (st/emitf dw/paste)]
-    [:& menu-entry {:title (tr "workspace.shape.menu.paste")
-                    :shortcut (sc/get-tooltip :paste)
-                    :on-click do-paste}]))
+  (let [do-paste (st/emitf dw/paste)
+        do-hide-ui (st/emitf (dw/toggle-layout-flags :hide-ui))]
+    [:*
+     [:& menu-entry {:title (tr "workspace.shape.menu.paste")
+                     :shortcut (sc/get-tooltip :paste)
+                     :on-click do-paste}]
+     [:& menu-entry {:title (tr "workspace.shape.menu.hide-ui")
+                     :shortcut (sc/get-tooltip :hide-ui)
+                     :on-click do-hide-ui}]]))
 
 (mf/defc context-menu
   []
diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs
index f400f2f7ba..7e9129ce98 100644
--- a/frontend/src/app/main/ui/workspace/header.cljs
+++ b/frontend/src/app/main/ui/workspace/header.cljs
@@ -360,31 +360,40 @@
          (st/emitf (dw/go-to-viewer params)))]
 
     [:header.workspace-header
-     [:div.main-icon
-      [:a {:on-click go-back} i/logo-icon]]
+     [:div.left-area
+      [:div.main-icon
+       [:a {:on-click go-back} i/logo-icon]]
 
-     [:& menu {:layout layout
-               :project project
-               :file file
-               :team-id team-id
-               :page-id page-id}]
+      [:& menu {:layout layout
+                :project project
+                :file file
+                :team-id team-id
+                :page-id page-id}]]
 
-     [:div.users-section
-      [:& active-sessions]]
+     [:div.center-area
+      [:div.users-section
+       [:& active-sessions]]]
 
-     [:div.options-section
-      [:& persistence-state-widget]
+     [:div.right-area
+      [:div.options-section
+       [:& persistence-state-widget]
+       [:button.document-history
+        {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
+         :class (when (contains? layout :document-history) "selected")
+         :on-click (st/emitf (dw/toggle-layout-flags :document-history))}
+        i/recent]]
 
-      [:& zoom-widget-workspace
-       {:zoom zoom
-        :on-increase #(st/emit! (dw/increase-zoom nil))
-        :on-decrease #(st/emit! (dw/decrease-zoom nil))
-        :on-zoom-reset #(st/emit! dw/reset-zoom)
-        :on-zoom-fit #(st/emit! dw/zoom-to-fit-all)
-        :on-zoom-selected #(st/emit! dw/zoom-to-selected-shape)}]
+      [:div.options-section
+       [:& zoom-widget-workspace
+        {:zoom zoom
+         :on-increase #(st/emit! (dw/increase-zoom nil))
+         :on-decrease #(st/emit! (dw/decrease-zoom nil))
+         :on-zoom-reset #(st/emit! dw/reset-zoom)
+         :on-zoom-fit #(st/emit! dw/zoom-to-fit-all)
+         :on-zoom-selected #(st/emit! dw/zoom-to-selected-shape)}]
 
-      [:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
-       {:alt (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
-        :on-click go-viewer}
-       i/play]]]))
+       [:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
+        {:alt (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
+         :on-click go-viewer}
+        i/play]]]]))
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index dec3a6feb8..3c506f61e4 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -6,21 +6,20 @@
 
 (ns app.main.ui.workspace.sidebar
   (:require
-   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
+   [app.main.ui.icons :as i]
    [app.main.ui.workspace.comments :refer [comments-sidebar]]
    [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
    [app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
    [app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
    [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
-   [cuerdas.core :as str]
-   [rumext.alpha :as mf]
-   [app.main.store :as st]
-   [app.main.ui.icons :as i]
-   ))
+   [app.util.object :as obj]
+   [rumext.alpha :as mf]))
 
 ;; --- Left Sidebar (Component)
 
@@ -31,7 +30,11 @@
                       (contains? layout :assets) :assets)
 
         {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
-        (use-resize-hook 255 255 500 :x false :left)]
+        (use-resize-hook :left-sidebar 255 255 500 :x false :left)
+
+        handle-collapse
+        (fn []
+          (st/emit! (dw/toggle-layout-flags :collapse-left-sidebar)))]
 
     [:aside.settings-bar.settings-bar-left {:ref parent-ref
                                             :style #js {"--width" (str size "px")}}
@@ -39,9 +42,10 @@
                         :on-lost-pointer-capture on-lost-pointer-capture
                         :on-mouse-move on-mouse-move}]
 
-
      [:div.settings-bar-inside
-      [:button.collapse-sidebar i/arrow-slide]
+      [:button.collapse-sidebar
+       {:on-click handle-collapse}
+       i/arrow-slide]
       [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
                          :selected section}
 
@@ -50,9 +54,7 @@
         [:& layers-toolbox]]
 
        [:& tab-element {:id :assets :title "Library"}
-        [:& assets-toolbox]]]]
-     
-     ]))
+        [:& assets-toolbox]]]]]))
 
 ;; --- Right Sidebar (Component)
 
@@ -60,8 +62,9 @@
   {::mf/wrap-props false
    ::mf/wrap [mf/memo]}
   [props]
-  (let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
-        (use-resize-hook 255 255 500 :x true :right)
+  (let [layout (obj/get props "layout")
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook :right-sidebar 255 255 500 :x true :right)
 
         drawing-tool (:tool (mf/deref refs/workspace-drawing))]
     [:aside.settings-bar.settings-bar-right {:ref parent-ref
@@ -70,7 +73,13 @@
                         :on-lost-pointer-capture on-lost-pointer-capture
                         :on-mouse-move on-mouse-move}]
      [:div.settings-bar-inside
-      (if (= drawing-tool :comments)
+      (cond
+        (= drawing-tool :comments)
         [:& comments-sidebar]
+
+        (contains? layout :document-history)
+        [:& history-toolbox]
+
+        :else
         [:> options-toolbox props])]]))
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index a08eee3914..e60ef66017 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -14,15 +14,14 @@
    [app.main.ui.components.context-menu :refer [context-menu]]
    [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]]
    [app.util.keyboard :as kbd]
    [cuerdas.core :as str]
    [okulary.core :as l]
-   [rumext.alpha :as mf]
-   [app.main.ui.hooks.resize :refer [use-resize-hook]]
-   ))
+   [rumext.alpha :as mf]))
 
 ;; --- Page Item
 
@@ -208,7 +207,7 @@
         show-pages? (mf/use-state true)
 
         {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
-        (use-resize-hook 200 38 400 :y false nil)
+        (use-resize-hook :sitemap 200 38 400 :y false nil)
 
         toggle-pages
         (mf/use-callback #(reset! show-pages? not))]
diff --git a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs
index be47a40cf8..70aa9746c2 100644
--- a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs
@@ -15,6 +15,16 @@
    [app.util.dom :as dom]
    [rumext.alpha :as mf]))
 
+(def scroll-x 10)
+(def scroll-y 10)
+(def scroll-height (+ scroll-x 4))
+(def scroll-width (+ scroll-y 4))
+(def other-x 26)
+(def other-y 26)
+(def other-width 100)
+(def other-height 100)
+
+
 (mf/defc viewport-scrollbars
   {::mf/wrap [mf/memo]}
   [{:keys [objects viewport-ref zoom vbox]}]
@@ -49,8 +59,8 @@
              (gsh/selection-rect shapes))))
 
         inv-zoom                 (/ 1 zoom)
-        vbox-height              (- (:height vbox) (* inv-zoom 44))
-        vbox-width               (- (:width vbox) (* inv-zoom 34))
+        vbox-height              (- (:height vbox) (* inv-zoom scroll-height))
+        vbox-width               (- (:width vbox) (* inv-zoom scroll-width))
 
         ;; top space hidden because of the scroll
         top-offset               (-> (- vbox-y (:y base-objects-rect))
@@ -78,28 +88,28 @@
         show-v-scroll?           (or @v-scrolling? (> top-offset 0) (> bottom-offset 0))
         show-h-scroll?           (or @h-scrolling? (> left-offset 0) (> right-offset 0))
 
-        v-scrollbar-x            (+ vbox-x (:width vbox) (* inv-zoom -32))
+        v-scrollbar-x            (+ vbox-x (:width vbox) (* inv-zoom (- scroll-x)))
         v-scrollbar-y            (+ vbox-y top-offset)
 
         h-scrollbar-x            (+ vbox-x left-offset)
-        h-scrollbar-y            (+ vbox-y (:height vbox) (* inv-zoom -40))
+        h-scrollbar-y            (+ vbox-y (:height vbox) (* inv-zoom (- scroll-y)))
 
         scrollbar-height         (-> (- (+ vbox-y vbox-height) bottom-offset v-scrollbar-y))
         scrollbar-height         (-> (cond
                                        @v-scrolling? scrollbar-height-stored
                                        :else scrollbar-height)
-                                     (max (* inv-zoom 100)))
+                                     (max (* inv-zoom other-height)))
 
         scrollbar-width          (-> (- (+ vbox-x vbox-width) right-offset h-scrollbar-x))
         scrollbar-width          (-> (cond
                                        @h-scrolling? scrollbar-width-stored
                                        :else scrollbar-width)
-                                     (max (* inv-zoom 100)))
+                                     (max (* inv-zoom other-width)))
 
         v-scrollbar-y            (-> (cond
                                        @v-scrolling? (- v-scrollbar-y-stored (- (- vbox-y (mf/ref-val vbox-y-ref))))
                                        :else v-scrollbar-y)
-                                     (max (+ vbox-y (* inv-zoom 26))))
+                                     (max (+ vbox-y (* inv-zoom other-y))))
 
         v-scrollbar-y            (if (> (+ v-scrollbar-y scrollbar-height) (+ vbox-y vbox-height)) ;; the scroll bar is stick to the bottom
                                    (-> (+ vbox-y vbox-height)
@@ -109,7 +119,7 @@
         h-scrollbar-x            (-> (cond
                                        @h-scrolling? (- h-scrollbar-x-stored (- (- vbox-x (mf/ref-val vbox-x-ref))))
                                        :else h-scrollbar-x)
-                                     (max (+ vbox-x (* inv-zoom 26))))
+                                     (max (+ vbox-x (* inv-zoom other-x))))
 
         h-scrollbar-x            (if (> (+ h-scrollbar-x scrollbar-width) (+ vbox-x vbox-width)) ;; the scroll bar is stick to the right
                                    (-> (+ vbox-x vbox-width)
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 1f575ac6e2..7d62a82447 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -3430,4 +3430,7 @@ msgid "workspace.updates.update"
 msgstr "Update"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Click to close the path"
\ No newline at end of file
+msgstr "Click to close the path"
+
+msgid "workspace.shape.menu.hide-ui"
+msgstr "Show/Hide UI"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 477b300942..512bae5487 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -3443,4 +3443,7 @@ msgid "workspace.updates.update"
 msgstr "Actualizar"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Pulsar para cerrar la ruta"
\ No newline at end of file
+msgstr "Pulsar para cerrar la ruta"
+
+msgid "workspace.shape.menu.hide-ui"
+msgstr "Mostrar/Ocultar Interfaz"

From e352c700136ff8c82cf201ed72c71039462e7536 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 1 Feb 2022 13:02:31 +0100
Subject: [PATCH 04/11] :sparkles: Move layers and assets to tabs

---
 .../styles/main/partials/sidebar.scss         | 48 ++++++-------------
 .../styles/main/partials/tab-container.scss   |  9 ++--
 .../src/app/main/ui/workspace/sidebar.cljs    |  5 +-
 frontend/src/app/util/dom.cljs                |  1 +
 4 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index b760093257..47a85e86e8 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -20,40 +20,10 @@
   }
 
   .settings-bar-inside {
-    align-items: flex-start;
     display: grid;
     grid-template-columns: 100%;
-
-    &[data-layout*="sitemap-pages"] {
-      grid-template-rows: auto;
-    }
-
-    &[data-layout*="layers"] {
-      grid-template-rows: auto 1fr;
-    }
-
-    &[data-layout*="libraries"] {
-      grid-template-rows: auto 1fr;
-    }
-
-    &[data-layout*="layers"][data-layout*="sitemap-pages"] {
-      grid-template-rows: 11.5rem 1fr;
-    }
-
-    &[data-layout*="libraries"][data-layout*="sitemap-pages"] {
-      grid-template-rows: 11.5rem 1fr;
-    }
-
-    &[data-layout*="layers"][data-layout*="libraries"] {
-      grid-template-rows: auto 30% 1fr;
-    }
-
-    &[data-layout*="layers"][data-layout*="libraries"][data-layout*="sitemap-pages"] {
-      grid-template-rows: 11.5rem 25% 1fr;
-    }
-
-    flex-direction: column;
-    height: 100%;
+    grid-template-rows: 100%;
+    height: calc(100% - 2px);
 
     .tool-window {
       position: relative;
@@ -171,9 +141,9 @@
 .tool-window-content {
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
   height: 100%;
   width: 100%;
+  overflow-y: auto;
 }
 
 .element-list {
@@ -259,3 +229,15 @@ button.collapse-sidebar {
     }
   }
 }
+
+#layers.tool-window {
+  overflow: auto;  
+}
+
+.layers-tab {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 100%;
+  height: 100%;
+  overflow: hidden;
+}
diff --git a/frontend/resources/styles/main/partials/tab-container.scss b/frontend/resources/styles/main/partials/tab-container.scss
index 13a43185c6..be52565e56 100644
--- a/frontend/resources/styles/main/partials/tab-container.scss
+++ b/frontend/resources/styles/main/partials/tab-container.scss
@@ -1,8 +1,8 @@
 .tab-container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 100%;
   height: 100%;
-  width: 100%;
 }
 
 .tab-container-tabs {
@@ -31,7 +31,8 @@
 }
 
 .tab-container-content {
-  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .tab-element,
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 3c506f61e4..bb2328ac42 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -50,8 +50,9 @@
                          :selected section}
 
        [:& tab-element {:id :layers :title "Layers"}
-        [:& sitemap {:layout layout}]
-        [:& layers-toolbox]]
+        [:div.layers-tab
+         [:& sitemap {:layout layout}]
+         [:& layers-toolbox]]]
 
        [:& tab-element {:id :assets :title "Library"}
         [:& assets-toolbox]]]]]))
diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs
index e6505c51a8..6aab30c07b 100644
--- a/frontend/src/app/util/dom.cljs
+++ b/frontend/src/app/util/dom.cljs
@@ -416,6 +416,7 @@
 
 (defn scroll-into-view-if-needed!
   ([^js element]
+   (.log js/console "SCROLL INTO VIEW" element)
    (when (some? element)
      (.scrollIntoViewIfNeeded ^js element false)))
 

From 8d4612c683de163dc456d616bdbcdad24021a9a2 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 1 Feb 2022 13:36:12 +0100
Subject: [PATCH 05/11] :bug: Fix some problems with scroll into view for
 layers

---
 frontend/src/app/main/ui/comments.cljs           |  2 +-
 .../app/main/ui/workspace/sidebar/layers.cljs    | 16 +++++++++++-----
 .../ui/workspace/sidebar/options/common.cljs     |  3 ++-
 .../app/main/ui/workspace/sidebar/sitemap.cljs   |  2 +-
 frontend/src/app/util/dom.cljs                   | 15 ++++++---------
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs
index f65abba074..7677ba4451 100644
--- a/frontend/src/app/main/ui/comments.cljs
+++ b/frontend/src/app/main/ui/comments.cljs
@@ -300,7 +300,7 @@
      (mf/deps thread comments-map)
      (fn []
        (when-let [node (mf/ref-val ref)]
-         (.scrollIntoViewIfNeeded ^js node))))
+         (dom/scroll-into-view-if-needed! node))))
 
     (when (some? comment)
       [:div.thread-content
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index 6d3fff53da..6fbc68a261 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -180,12 +180,17 @@
                               :name (:name item)})]
 
     (mf/use-effect
-     (mf/deps selected)
+     (mf/deps selected? selected)
      (fn []
-       (let [subid
-             (when (and (= (count selected) 1) selected?)
-               (ts/schedule-on-idle
-                #(.scrollIntoView (mf/ref-val dref) #js {:block "nearest", :behavior "smooth"})))]
+       (let [single? (= (count selected) 1)
+             node (mf/ref-val dref)
+
+             subid
+             (when (and single? selected?)
+               (ts/schedule
+                100
+                #(dom/scroll-into-view! node #js {:block "nearest", :behavior "smooth"})))]
+
          #(when (some? subid)
             (rx/dispose! subid)))))
 
@@ -247,6 +252,7 @@
   {::mf/wrap [#(mf/memo % =)]}
   [{:keys [objects] :as props}]
   (let [selected (mf/deref refs/selected-shapes)
+        selected (hooks/use-equal-memo selected)
         root (get objects uuid/zero)]
     [:ul.element-list
      [:& hooks/sortable-container {}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
index 733fd420b8..7e42847e26 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.workspace.sidebar.options.common
   (:require
+   [app.util.dom :as dom]
    [rumext.alpha :as mf]))
 
 (mf/defc advanced-options [{:keys [visible? children]}]
@@ -15,7 +16,7 @@
      (fn []
        (when-let [node (mf/ref-val ref)]
          (when visible?
-           (.scrollIntoViewIfNeeded ^js node)))))
+           (dom/scroll-into-view-if-needed! node)))))
 
     (when visible?
       [:div.advanced-options-wrapper {:ref ref}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index e60ef66017..cbc66fdc73 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -107,7 +107,7 @@
       (fn []
         (when selected?
           (let [node (mf/ref-val dref)]
-            (.scrollIntoViewIfNeeded ^js node)))))
+            (dom/scroll-into-view-if-needed! node)))))
 
     (mf/use-layout-effect
      (mf/deps (:edition @local))
diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs
index 6aab30c07b..b202fab0ff 100644
--- a/frontend/src/app/util/dom.cljs
+++ b/frontend/src/app/util/dom.cljs
@@ -407,22 +407,19 @@
 
 (defn scroll-into-view!
   ([^js element]
-   (when (some? element)
-     (.scrollIntoView element false)))
+   (scroll-into-view! element false))
 
-  ([^js element scroll-top]
+  ([^js element options]
    (when (some? element)
-     (.scrollIntoView element scroll-top))))
+     (.scrollIntoView element options))))
 
 (defn scroll-into-view-if-needed!
   ([^js element]
-   (.log js/console "SCROLL INTO VIEW" element)
-   (when (some? element)
-     (.scrollIntoViewIfNeeded ^js element false)))
+   (scroll-into-view-if-needed! element false))
 
-  ([^js element scroll-top]
+  ([^js element options]
    (when (some? element)
-     (.scrollIntoViewIfNeeded ^js element scroll-top))))
+     (.scrollIntoViewIfNeeded ^js element options))))
 
 (defn is-in-viewport?
   [^js element]

From b26cbeccca1808f09eb8cfcdca95b6e9fc434dbe Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 1 Feb 2022 16:52:36 +0100
Subject: [PATCH 06/11] :sparkles: Resizable color palette

---
 .../styles/main/partials/color-bullet.scss    | 89 ++++++++-----------
 .../styles/main/partials/color-palette.scss   | 17 ++--
 .../styles/main/partials/sidebar-assets.scss  | 12 ++-
 .../styles/main/partials/sidebar-layers.scss  |  7 +-
 frontend/src/app/main/data/workspace.cljs     |  9 ++
 .../app/main/data/workspace/shortcuts.cljs    | 15 +++-
 .../app/main/ui/components/color_bullet.cljs  | 22 ++---
 frontend/src/app/main/ui/workspace.cljs       | 12 ++-
 .../app/main/ui/workspace/colorpalette.cljs   | 32 +++----
 .../src/app/main/ui/workspace/header.cljs     | 22 ++++-
 .../app/main/ui/workspace/left_toolbar.cljs   | 16 ++--
 .../src/app/main/ui/workspace/sidebar.cljs    |  5 ++
 .../app/main/ui/workspace/sidebar/layers.cljs |  2 +-
 .../app/main/ui/workspace/textpalette.cljs    | 31 +++++++
 14 files changed, 181 insertions(+), 110 deletions(-)
 create mode 100644 frontend/src/app/main/ui/workspace/textpalette.cljs

diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
index c9c1acfa64..1b3b870aca 100644
--- a/frontend/resources/styles/main/partials/color-bullet.scss
+++ b/frontend/resources/styles/main/partials/color-bullet.scss
@@ -5,30 +5,26 @@
 // Copyright (c) UXBOX Labs SL
 
 .color-cell {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr auto;
+  height: 100%;
+  justify-items: center;
+  width: 65px;
+
   .color-bullet {
-    // Creates strange artifacts
     border: 2px solid $color-gray-60;
-    // box-shadow: 0 0 0 2px $color-gray-60;
-    border-radius: 50%;
+    position: relative;
+    width: var(--bullet-size);
+    height: var(--bullet-size);
 
     &:hover {
       border-color: $color-primary;
     }
   }
 
-  &.cell-big .color-bullet {
-    width: 50px;
-    height: 50px;
-  }
-
-  &.cell-small .color-bullet {
-    width: 40px;
-    height: 40px;
-  }
-
-  .color-bullet.color-big {
-    width: 50px;
-    height: 50px;
+  & > * {
+    overflow: hidden;
   }
 }
 
@@ -38,10 +34,10 @@
   }
 }
 
+
 ul.palette-menu .color-bullet {
   width: 20px;
   height: 20px;
-  border-radius: 12px;
   border: 1px solid $color-gray-10;
   margin-right: 5px;
   background-size: 8px;
@@ -67,14 +63,12 @@ ul.palette-menu .color-bullet {
   grid-area: color;
   width: 20px;
   height: 20px;
-  border-radius: 12px;
   border: 1px solid $color-gray-10;
   background-size: 8px;
 }
 
 .asset-section .asset-list-item .color-bullet {
   border: 1px solid $color-gray-20;
-  border-radius: 10px;
   height: 20px;
   margin-right: $size-1;
   width: 20px;
@@ -91,38 +85,29 @@ ul.palette-menu .color-bullet {
 .color-bullet {
   display: flex;
   flex-direction: row;
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-    left center;
-  background-color: $color-white;
+  border-radius: 50%;
 
-  & > * {
+  & .color-bullet-wrapper {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+    background-color: $color-white;
+    clip-path: circle(50%);
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+  }
+
+  &.is-gradient {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+    background-color: $color-white;
+  }
+
+  & .color-bullet-wrapper > * {
     width: 100%;
     height: 100%;
   }
 }
 
-.color-bullet.is-library-color .color-bullet-left,
-.selected-colors .color-bullet .color-bullet-left {
-  border-radius: 10px 0 0 10px;
-}
-
-.color-bullet.is-library-color .color-bullet-right,
-.selected-colors .color-bullet .color-bullet-right {
-  border-radius: 0 10px 10px 0;
-}
-
-.color-palette .color-bullet .color-bullet-left {
-  border-radius: 25px 0 0 25px;
-}
-
-.color-palette .color-bullet .color-bullet-right {
-  border-radius: 0 25px 25px 0;
-}
-
-.color-data .color-bullet.is-library-color {
-  border-radius: 50%;
-}
-
 .color-data .color-bullet.multiple {
   background: transparent;
 
@@ -133,7 +118,7 @@ ul.palette-menu .color-bullet {
 
 .color-data .color-bullet {
   border: 1px solid $color-gray-30;
-  border-radius: $br-small;
+  border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -144,10 +129,6 @@ ul.palette-menu .color-bullet {
   margin: 5px 4px 0 0;
   width: 20px;
 
-  &.color-name {
-    border-radius: 10px;
-  }
-
   &.palette-th {
     align-items: center;
     border: 1px solid $color-gray-30;
@@ -198,3 +179,11 @@ ul.palette-menu .color-bullet {
     fill: $color-black;
   }
 }
+
+.color-data .color-bullet.is-not-library-color {
+  border-radius: $br-small;
+
+  & .color-bullet-wrapper {
+    clip-path: none;
+  }
+}
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 040a24d735..f61657c1ff 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -122,6 +122,7 @@
   overflow: hidden;
   width: 100%;
   padding: 0.25rem;
+  height: 100%;
 
   &.size-small {
     height: 3.5rem;
@@ -135,6 +136,7 @@
   transition: all 0.6s ease;
   width: 100%;
   scroll-behavior: smooth;
+  height: 100%;
 }
 
 .color-cell {
@@ -145,24 +147,21 @@
   flex-shrink: 0;
   position: relative;
 
-  &.cell-big {
-    flex-basis: 66px;
-  }
-
-  &.cell-small {
-    flex-basis: 52px;
-  }
-
   .color-text {
     color: $color-gray-20;
     font-size: $fs12;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    width: 66px;
+    width: 65px;
     text-align: center;
     margin-top: 0.25rem;
+
+    .no-text & {
+      display: none;
+    }
   }
+
   &.current {
     .color-text {
       color: $color-gray-50;
diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss
index eed7e64b3e..75907e30fc 100644
--- a/frontend/resources/styles/main/partials/sidebar-assets.scss
+++ b/frontend/resources/styles/main/partials/sidebar-assets.scss
@@ -231,15 +231,23 @@
 
     .asset-grid {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-columns: repeat(4, 1fr);
       grid-auto-rows: 6vh;
       column-gap: 0.5rem;
       row-gap: 0.5rem;
 
       &.big {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(2, 1fr);
         grid-auto-rows: 10vh;
 
+        .three-row & {
+          grid-template-columns: repeat(3, 1fr);
+        }
+
+        .four-row & {
+          grid-template-columns: repeat(4, 1fr);
+        }
+
         .grid-cell {
           padding: $size-1;
 
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index ce99e46335..e8747f1325 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -207,6 +207,11 @@ span.element-name {
   margin-left: auto;
   position: relative;
   width: 32px;
+  right: 20px;
+
+  &.is-parent {
+    right: 0;
+  }
 
   svg {
     height: 13px;
@@ -242,7 +247,7 @@ span.element-name {
 }
 
 .toggle-content {
-  margin-left: auto;
+  margin-left: 8px;
   width: 12px;
 
   svg {
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index a303b31060..d36dde0638 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -432,6 +432,15 @@
                         stored
                         (d/concat-set flags)))))))
 
+(defn remove-layout-flags
+  [& flags]
+  (ptk/reify ::remove-layout-flags
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :workspace-layout
+              (fn [stored]
+                (reduce disj stored (d/concat-set flags)))))))
+
 ;; --- Set element options mode
 
 (defn set-options-mode
diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs
index eafc00e19a..44667db499 100644
--- a/frontend/src/app/main/data/workspace/shortcuts.cljs
+++ b/frontend/src/app/main/data/workspace/shortcuts.cljs
@@ -17,6 +17,7 @@
    [app.main.data.workspace.transforms :as dwt]
    [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
+   [app.main.ui.hooks.resize :as r]
    [app.util.dom :as dom]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -38,9 +39,17 @@
                        :command (ds/a-mod "h")
                        :fn #(st/emit! (dw/go-to-layout :document-history))}
 
-   :toggle-palette    {:tooltip (ds/alt "P")
-                       :command (ds/a-mod "p")
-                       :fn #(st/emit! (dw/toggle-layout-flags :colorpalette))}
+   :toggle-colorpalette {:tooltip (ds/alt "P")
+                         :command (ds/a-mod "p")
+                         :fn #(do (r/set-resize-type! :bottom)
+                                  (st/emit! (dw/remove-layout-flags :textpalette)
+                                            (dw/toggle-layout-flags :colorpalette)))}
+
+   :toggle-textpalette  {:tooltip (ds/alt "T")
+                         :command (ds/a-mod "t")
+                         :fn #(do (r/set-resize-type! :bottom)
+                                  (st/emit! (dw/remove-layout-flags :colorpalette)
+                                            (dw/toggle-layout-flags :textpalette)))}
 
    :toggle-rules      {:tooltip (ds/meta-shift "R")
                        :command (ds/c-mod "shift+r")
diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
index 62faf19f00..aa177e0947 100644
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.components.color-bullet
   (:require
    [app.util.color :as uc]
+   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
@@ -21,17 +22,18 @@
     [:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
 
     ;; No multiple selection
-    (let [color       (if (string? color) {:color color :opacity 1} color)
-          background  (if (:gradient color) (uc/color->background color) "auto")]
-      [:div.color-bullet.tooltip.tooltip-right {:class (if (:id color) "is-library-color" "is-not-library-color")
-                          :on-click #(when on-click (on-click %))
-                          :alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))
-                          :style {:background background}}
-       (when (not(:gradient color))
-         [:*
+    (let [color       (if (string? color) {:color color :opacity 1} color)]
+      [:div.color-bullet.tooltip.tooltip-right
+       {:class (dom/classnames :is-library-color (some? (:id color))
+                               :is-not-library-color (nil? (:id color))
+                               :is-gradient (some? (:gradient color)))
+        :on-click #(when on-click (on-click %))
+        :alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
+       (if  (:gradient color)
+         [:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
+         [:div.color-bullet-wrapper
           [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
-          [:div.color-bullet-right {:style {:background (uc/color->background color)}}]]
-         )])))
+          [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])])))
 
 (mf/defc color-name [{:keys [color size on-click on-double-click]}]
   (let [color (if (string? color) {:color color :opacity 1} color)
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index eba5fe8d24..88d74fbfd9 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -22,6 +22,7 @@
    [app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
    [app.main.ui.workspace.libraries]
    [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
+   [app.main.ui.workspace.textpalette :refer [textpalette]]
    [app.main.ui.workspace.viewport :refer [viewport]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -41,7 +42,10 @@
         {:keys [options-mode]} local
         file   (obj/get props "file")
         layout (obj/get props "layout")
+
         colorpalette? (:colorpalette layout)
+        textpalette? (:textpalette layout)
+        hide-ui? (:hide-ui layout)
 
         on-resize
         (mf/use-callback
@@ -52,7 +56,11 @@
 
         node-ref (use-resize-observer on-resize)]
     [:*
-     (when colorpalette? [:& colorpalette])
+     (when (and colorpalette? (not hide-ui?))
+       [:& colorpalette])
+
+     (when (and textpalette? (not hide-ui?))
+       [:& textpalette])
 
      [:section.workspace-content {:ref node-ref}
       [:section.workspace-viewport
@@ -64,7 +72,7 @@
                      :selected selected
                      :layout layout}]]]
 
-     (when-not (:hide-ui layout)
+     (when-not hide-ui?
        [:*
         [:& left-toolbar {:layout layout}]
         (if (:collapse-left-sidebar layout)
diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index 40383d5261..a5d43895cb 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.workspace.colorpalette
   (:require
+   [app.common.data :as d]
    [app.common.math :as mth]
    [app.main.data.workspace.colors :as mdc]
    [app.main.refs :as refs]
@@ -15,6 +16,7 @@
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
    [app.util.color :as uc]
+   [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
@@ -39,7 +41,7 @@
 
 ;; --- Components
 (mf/defc palette-item
-  [{:keys [color size]}]
+  [{:keys [color]}]
   (let [ids-with-children (map :id (mf/deref refs/selected-shapes-with-children))
         select-color
         (fn [event]
@@ -47,10 +49,9 @@
               (st/emit! (mdc/change-stroke ids-with-children (merge uc/empty-color color)))
               (st/emit! (mdc/change-fill ids-with-children (merge uc/empty-color color)))))]
 
-    [:div.color-cell {:class (str "cell-"(name size))
-                      :on-click select-color}
+    [:div.color-cell {:on-click select-color}
      [:& cb/color-bullet {:color color}]
-     [:& cb/color-name {:color color :size size}]]))
+     [:& cb/color-name {:color color}]]))
 
 (mf/defc palette
   [{:keys [current-colors recent-colors file-colors shared-libs selected]}]
@@ -116,7 +117,9 @@
           (events/unlistenByKey key1))))
 
     [:div.color-palette {:ref parent-ref
-                         :style #js {"--height" (str size "px")}}
+                         :class (dom/classnames :no-text (< size 72))
+                         :style #js {"--height" (str size "px")
+                                     "--bullet-size" (str (if (< size 72) (- size 15) (- size 30)) "px")}}
      [:div.resize-area {:on-pointer-down on-pointer-down
                         :on-lost-pointer-capture on-lost-pointer-capture
                         :on-mouse-move on-mouse-move}]
@@ -155,31 +158,18 @@
          (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
            [:& cb/color-bullet {:key (str "color-" idx)
                                 :color color}])]]
-
-       [:hr.dropdown-separator]
-
-       [:li
-        {:on-click #(st/emit! (mdc/change-palette-size :big))}
-        (when (= size :big) i/tick)
-        (tr "workspace.libraries.colors.big-thumbnails")]
-
-       [:li
-        {:on-click #(st/emit! (mdc/change-palette-size :small))}
-        (when (= size :small) i/tick)
-        (tr "workspace.libraries.colors.small-thumbnails")]]]
+       ]]
 
      [:div.color-palette-actions
       {:on-click #(swap! state assoc :show-menu true)}
       [:div.color-palette-actions-button i/actions]]
 
      [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
-     [:div.color-palette-content {:class (if (= size :big) "size-big" "size-small")
-                                  :ref container :on-wheel on-scroll}
+     [:div.color-palette-content {:ref container :on-wheel on-scroll}
       [:div.color-palette-inside {:style {:position "relative"
                                           :right (str (* 66 offset) "px")}}
        (for [[idx item] (map-indexed vector current-colors)]
-         [:& palette-item {:color item
-                           :key idx}])]]
+         [:& palette-item {:color item :key idx}])]]
 
      [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
 
diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs
index 7e9129ce98..038143f176 100644
--- a/frontend/src/app/main/ui/workspace/header.cljs
+++ b/frontend/src/app/main/ui/workspace/header.cljs
@@ -18,6 +18,7 @@
    [app.main.repo :as rp]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.hooks.resize :as r]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.presence :refer [active-sessions]]
    [app.util.dom :as dom]
@@ -297,12 +298,25 @@
            (tr "workspace.header.menu.show-layers"))]
         [:span.shortcut (sc/get-tooltip :toggle-layers)]]
 
-       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :colorpalette))}
+       [:li {:on-click (fn []
+                         (r/set-resize-type! :bottom)
+                         (st/emit! (dw/remove-layout-flags :textpalette)
+                                   (dw/toggle-layout-flags :colorpalette)))}
         [:span
          (if (contains? layout :colorpalette)
-           (tr "workspace.header.menu.hide-palette")
-           (tr "workspace.header.menu.show-palette"))]
-        [:span.shortcut (sc/get-tooltip :toggle-palette)]]
+           (tr "workspace.header.menu.hide-colorpalette")
+           (tr "workspace.header.menu.show-colorpalette"))]
+        [:span.shortcut (sc/get-tooltip :toggle-colorpalette)]]
+
+       [:li {:on-click (fn []
+                         (r/set-resize-type! :bottom)
+                         (st/emit! (dw/remove-layout-flags :colorpalette)
+                                   (dw/toggle-layout-flags :textpalette)))}
+        [:span
+         (if (contains? layout :textpalette)
+           (tr "workspace.header.menu.hide-textpalette")
+           (tr "workspace.header.menu.show-textpalette"))]
+        [:span.shortcut (sc/get-tooltip :toggle-textpalette)]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flags :assets))}
         [:span
diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
index cb4f0c6671..dbddf07778 100644
--- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs
+++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
@@ -120,17 +120,19 @@
 
       [:ul.left-toolbar-options.panels
        [:li.tooltip.tooltip-right
-        {;;:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-textpalette))
+        {:alt (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
          :class (when (contains? layout :textpalette) "selected")
-         :on-click (do
+         :on-click (fn []
                      (r/set-resize-type! :bottom)
-                     (st/emitf (dw/toggle-layout-flags :textpalette)))}
-        i/palette]
+                     (st/emit! (dw/remove-layout-flags :colorpalette)
+                               (dw/toggle-layout-flags :textpalette)))}
+        "Ag"]
        
        [:li.tooltip.tooltip-right
-        {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-palette))
+        {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
          :class (when (contains? layout :colorpalette) "selected")
-         :on-click (do
+         :on-click (fn []
                      (r/set-resize-type! :bottom)
-                     (st/emitf (dw/toggle-layout-flags :colorpalette)))}
+                     (st/emit! (dw/remove-layout-flags :textpalette)
+                               (dw/toggle-layout-flags :colorpalette)))}
         i/palette]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index bb2328ac42..93a66e9d22 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -18,6 +18,7 @@
    [app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
    [app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
    [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
+   [app.util.dom :as dom]
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
@@ -37,6 +38,10 @@
           (st/emit! (dw/toggle-layout-flags :collapse-left-sidebar)))]
 
     [:aside.settings-bar.settings-bar-left {:ref parent-ref
+                                            :class (dom/classnames
+                                                    :two-row   (<= size 300)
+                                                    :three-row (and (> size 300) (<= size 400))
+                                                    :four-row  (> size 400))
                                             :style #js {"--width" (str size "px")}}
      [:div.resize-area {:on-pointer-down on-pointer-down
                         :on-lost-pointer-capture on-lost-pointer-capture
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index 6fbc68a261..e18483c09f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -213,7 +213,7 @@
                       :on-start-edit #(reset! disable-drag true)
                       :on-stop-edit #(reset! disable-drag false)}]
 
-      [:div.element-actions
+      [:div.element-actions {:class (when (:shapes item) "is-parent")}
        [:div.toggle-element {:class (when (:hidden item) "selected")
                              :on-click toggle-visibility}
         (if (:hidden item) i/eye-closed i/eye)]
diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs
new file mode 100644
index 0000000000..36c0479609
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/textpalette.cljs
@@ -0,0 +1,31 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.workspace.textpalette
+  (:require
+   #_[app.util.dom :as dom]
+   #_[app.common.data :as d]
+   #_[app.common.math :as mth]
+   #_[app.main.data.workspace.colors :as mdc]
+   #_[app.main.refs :as refs]
+   #_[app.main.store :as st]
+   #_[app.main.ui.components.color-bullet :as cb]
+   #_[app.main.ui.components.dropdown :refer [dropdown]]
+   #_[app.main.ui.hooks.resize :refer [use-resize-hook]]
+   #_[app.main.ui.icons :as i]
+   #_[app.util.color :as uc]
+   #_[app.util.i18n :refer [tr]]
+   #_[app.util.keyboard :as kbd]
+   #_[app.util.object :as obj]
+   #_[cuerdas.core :as str]
+   #_[goog.events :as events]
+   #_[okulary.core :as l]
+   [rumext.alpha :as mf]
+   ))
+
+(mf/defc textpalette
+  []
+  [:div])

From 5cac5eb26bdcf762ab8a6834ef365ddfd6665da1 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 2 Feb 2022 09:18:13 +0100
Subject: [PATCH 07/11] :sparkles: New text typographies palette

---
 frontend/resources/styles/main-default.scss   |   1 +
 .../styles/main/partials/color-palette.scss   |   6 +-
 .../styles/main/partials/text-palette.scss    |  24 +++
 frontend/src/app/main/refs.cljs               |   2 +-
 .../app/main/ui/workspace/colorpalette.cljs   |   4 +-
 .../app/main/ui/workspace/textpalette.cljs    | 176 ++++++++++++++++--
 6 files changed, 188 insertions(+), 25 deletions(-)
 create mode 100644 frontend/resources/styles/main/partials/text-palette.scss

diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index ca1c5c61b7..bb6dafbfb0 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -55,6 +55,7 @@
 @import "main/partials/zoom-widget";
 @import "main/partials/activity-bar";
 @import "main/partials/color-palette";
+@import "main/partials/text-palette";
 @import "main/partials/colorpicker";
 @import "main/partials/dashboard";
 @import "main/partials/dashboard-header";
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index f61657c1ff..21939482ac 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -9,7 +9,9 @@
   align-items: center;
   background-color: $color-gray-50;
   border-top: 1px solid $color-gray-60;
-  display: flex;
+
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto;
   
   z-index: 11;
 
@@ -252,7 +254,7 @@
 ul.palette-menu {
   left: 8px;
   top: auto;
-  bottom: 4.5rem;
+  bottom: var(--height);
   color: $color-black;
 
   li {
diff --git a/frontend/resources/styles/main/partials/text-palette.scss b/frontend/resources/styles/main/partials/text-palette.scss
new file mode 100644
index 0000000000..a48fc32eb4
--- /dev/null
+++ b/frontend/resources/styles/main/partials/text-palette.scss
@@ -0,0 +1,24 @@
+.typography-item {
+  padding: 0 1rem;
+  margin-right: 1rem;
+  cursor: pointer;
+
+  & > * {
+    white-space: nowrap;
+  }
+
+  & .typography-name {
+    color: $color-white;
+  }
+
+  & .typography-font, & .typography-data {
+    font-size: 16px;
+    color: #7B7D85;
+  }
+
+  .no-text & {
+    & .typography-font, & .typography-data {
+      display: none;
+    }
+  }
+}
diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 7478edc3fd..15fdbb9367 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -92,7 +92,7 @@
   (l/derived :workspace-drawing st/state))
 
 (def selected-shapes
-  (l/derived wsh/lookup-selected st/state))
+  (l/derived wsh/lookup-selected st/state =))
 
 (defn make-selected-ref
   [id]
diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index a5d43895cb..1818909079 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -6,7 +6,6 @@
 
 (ns app.main.ui.workspace.colorpalette
   (:require
-   [app.common.data :as d]
    [app.common.math :as mth]
    [app.main.data.workspace.colors :as mdc]
    [app.main.refs :as refs]
@@ -55,7 +54,7 @@
 
 (mf/defc palette
   [{:keys [current-colors recent-colors file-colors shared-libs selected]}]
-  (let [state      (mf/use-state {:show-menu false })
+  (let [state      (mf/use-state {:show-menu false})
 
         width      (:width @state 0)
         visible    (mth/round (/ width 66))
@@ -180,6 +179,7 @@
            (vals))))
 
 (mf/defc colorpalette
+  {::mf/wrap [mf/memo]}
   []
   (let [recent-colors (mf/deref refs/workspace-recent-colors)
         file-colors   (mf/deref refs/workspace-file-colors)
diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs
index 36c0479609..c64eb2148b 100644
--- a/frontend/src/app/main/ui/workspace/textpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/textpalette.cljs
@@ -6,26 +6,162 @@
 
 (ns app.main.ui.workspace.textpalette
   (:require
-   #_[app.util.dom :as dom]
-   #_[app.common.data :as d]
-   #_[app.common.math :as mth]
-   #_[app.main.data.workspace.colors :as mdc]
-   #_[app.main.refs :as refs]
-   #_[app.main.store :as st]
-   #_[app.main.ui.components.color-bullet :as cb]
-   #_[app.main.ui.components.dropdown :refer [dropdown]]
-   #_[app.main.ui.hooks.resize :refer [use-resize-hook]]
-   #_[app.main.ui.icons :as i]
-   #_[app.util.color :as uc]
-   #_[app.util.i18n :refer [tr]]
-   #_[app.util.keyboard :as kbd]
-   #_[app.util.object :as obj]
-   #_[cuerdas.core :as str]
-   #_[goog.events :as events]
-   #_[okulary.core :as l]
-   [rumext.alpha :as mf]
-   ))
+   [app.common.data :as d]
+   [app.main.data.workspace.texts :as dwt]
+   [app.main.fonts :as f]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.hooks.resize :refer [use-resize-hook]]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :refer [tr]]
+   [cuerdas.core :as str]
+   [okulary.core :as l]
+   [rumext.alpha :as mf]))
+
+(mf/defc typography-item
+  [{:keys [local file-id selected-ids typography name-only?]}]
+  (let [font-data (f/get-font-data (:font-id typography))
+        font-variant-id (:font-variant-id typography)
+        variant-data (->> font-data :variants (d/seek #(= (:id %) font-variant-id)))
+
+        handle-click
+        (mf/use-callback
+         (mf/deps local typography selected-ids)
+         (fn []
+           (let [attrs (merge
+                        {:typography-ref-file file-id
+                         :typography-ref-id (:id typography)}
+                        (dissoc typography :id :name))]
+             (->> selected-ids
+                  (run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs})))))))]
+
+    [:div.typography-item {:on-click handle-click}
+     [:div.typography-name
+      {:style {:font-family (:font-family typography)
+               :font-weight (:font-weight typography)
+               :font-style (:font-style typography)}}
+      (:name typography)]
+     (when-not name-only?
+       [:*
+        [:div.typography-font (:name font-data)]
+        [:div.typography-data (str (:font-size typography) "pt | " (:name variant-data))]])]))
+
+(mf/defc palette
+  [{:keys [local selected-ids current-file-id file-typographies shared-libs]}]
+
+  (let [state (mf/use-state {:show-menu false})
+
+        selected (mf/use-state :file)
+
+        file-id
+        (case @selected
+          :recent nil
+          :file current-file-id
+          @selected)
+
+        current-typographies
+        (case @selected
+          :recent []
+          :file (vals file-typographies)
+          (vals (get-in shared-libs [@selected :data :typographies])))
+
+        container (mf/use-ref nil)
+
+        on-left-arrow-click
+        (mf/use-callback
+         (fn []
+           (when-let [node (mf/ref-val container)]
+             (.scrollBy node #js {:left -200 :behavior "smooth"}))))
+
+        on-right-arrow-click
+        (mf/use-callback
+         (fn []
+           (when-let [node (mf/ref-val container)]
+             (.scrollBy node #js {:left 200 :behavior "smooth"}))))
+
+        on-wheel
+        (mf/use-callback
+         (fn [event]
+           (let [delta (+ (.. event -nativeEvent -deltaY) (.. event -nativeEvent -deltaX))]
+             (if (pos? delta)
+               (on-right-arrow-click)
+               (on-left-arrow-click)))))
+
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook :palette 72 54 80 :y true :bottom)]
+    
+    [:div.color-palette {:ref parent-ref
+                         :class (dom/classnames :no-text (< size 72))
+                         :style #js {"--height" (str size "px")}}
+     [:div.resize-area {:on-pointer-down on-pointer-down
+                        :on-lost-pointer-capture on-lost-pointer-capture
+                        :on-mouse-move on-mouse-move}]
+     [:& dropdown {:show (:show-menu @state)
+                   :on-close #(swap! state assoc :show-menu false)}
+
+      [:ul.workspace-context-menu.palette-menu
+       (for [[idx cur-library] (map-indexed vector (vals shared-libs))]
+         (let [typographies (-> cur-library (get-in [:data :typographies]) vals)]
+           [:li.palette-library
+            {:key (str "library-" idx)
+             :on-click #(reset! selected (:id cur-library))}
+
+            (when (= @selected (:id cur-library)) i/tick)
+
+            [:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count typographies)))]]))
+
+       [:li.palette-library
+        {:on-click #(reset! selected :file)}
+        (when (= selected :file) i/tick)
+        [:div.library-name (str (tr "workspace.libraries.colors.file-library")
+                                (str/format " (%s)" (count file-typographies)))]]
+
+       #_[:li.palette-library
+        {:on-click #(st/emit! (mdc/change-palette-selected :recent))}
+        (when (= selected :recent) i/tick)
+        [:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
+                                (str/format " (%s)" (count recent-colors)))]
+        [:div.color-sample
+         (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
+           [:& cb/color-bullet {:key (str "color-" idx)
+                                :color color}])]]
+       ]]
+
+     [:div.color-palette-actions
+      {:on-click #(swap! state assoc :show-menu true)}
+      [:div.color-palette-actions-button i/actions]]
+
+     [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
+
+     [:div.color-palette-content {:ref container :on-wheel on-wheel}
+      [:div.color-palette-inside {:style {:position "relative"}}
+       (for [[idx item] (map-indexed vector current-typographies)]
+         [:& typography-item
+          {:key idx
+           :file-id file-id
+           :local local
+           :selected-ids selected-ids
+           :typography item}])]]
+
+     [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])
+
+  )
+
+(def local-data
+  (l/derived #(select-keys % [:editors]) refs/workspace-local =))
 
 (mf/defc textpalette
+  {::mf/wrap [mf/memo]}
   []
-  [:div])
+  (let [local             (mf/deref local-data)
+        selected-ids      (mf/deref refs/selected-shapes)
+        file-typographies (mf/deref refs/workspace-file-typography)
+        shared-libs       (mf/deref refs/workspace-libraries)
+        current-file-id   (mf/deref refs/current-file-id)]
+    [:& palette {:local local
+                 :current-file-id current-file-id
+                 :selected-ids selected-ids
+                 :file-typographies file-typographies
+                 :shared-libs shared-libs}]))

From 1dee767762faa023f99a4a424288022b09075309 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 2 Feb 2022 18:08:47 +0100
Subject: [PATCH 08/11] :sparkles: Selection area on rules

---
 CHANGES.md                                    |   2 +-
 .../styles/main/partials/color-bullet.scss    |   7 +-
 .../styles/main/partials/color-palette.scss   |   2 +-
 .../styles/main/partials/sidebar.scss         |  12 +-
 .../styles/main/partials/text-palette.scss    |   8 +-
 .../styles/main/partials/workspace.scss       |  10 +-
 .../src/app/main/ui/workspace/sidebar.cljs    |  10 +-
 .../app/main/ui/workspace/textpalette.cljs    |  20 +--
 .../src/app/main/ui/workspace/viewport.cljs   |   3 +-
 .../app/main/ui/workspace/viewport/rules.cljs | 128 ++++++++++++++++--
 10 files changed, 148 insertions(+), 54 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index df9e39e4cd..df3edd087a 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -18,7 +18,7 @@
 - Improve file menu by adding semantically groups [Github #1203](https://github.com/penpot/penpot/issues/1203)
 - Add update components in bulk option in context menu [Taiga #1975](https://tree.taiga.io/project/penpot/us/1975)
 - Create first E2E tests [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608), [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608)
-- Refactor of workspace toolbars [Taiga #2319](https://tree.taiga.io/project/penpot/us/2319)
+- Redesign of workspace toolbars [Taiga #2319](https://tree.taiga.io/project/penpot/us/2319)
 
 ### :bug: Bugs fixed
 ### :arrow_up: Deps updates
diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
index 1b3b870aca..3ee47482f1 100644
--- a/frontend/resources/styles/main/partials/color-bullet.scss
+++ b/frontend/resources/styles/main/partials/color-bullet.scss
@@ -34,7 +34,6 @@
   }
 }
 
-
 ul.palette-menu .color-bullet {
   width: 20px;
   height: 20px;
@@ -88,7 +87,8 @@ ul.palette-menu .color-bullet {
   border-radius: 50%;
 
   & .color-bullet-wrapper {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+      left center;
     background-color: $color-white;
     clip-path: circle(50%);
     display: flex;
@@ -98,7 +98,8 @@ ul.palette-menu .color-bullet {
   }
 
   &.is-gradient {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+      left center;
     background-color: $color-white;
   }
 
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 21939482ac..2edac74577 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -12,7 +12,7 @@
 
   display: grid;
   grid-template-columns: auto auto 1fr auto auto;
-  
+
   z-index: 11;
 
   & .right-arrow,
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 47a85e86e8..e086a1d06b 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -177,7 +177,6 @@
       }
     }
   }
-
 }
 
 .element-list.pages-list {
@@ -214,24 +213,23 @@ button.collapse-sidebar {
   }
 
   &.collapsed {
-    background: $color-black;
+    background: $color-gray-60;
     left: 48px;
     top: 48px;
-    width: 18px;
-    height: 24px;
+    width: 28px;
+    height: 48px;
     padding: 0;
     border-radius: 0px 4px 4px 0px;
+    border-left: 1px solid $color-gray-50;
 
     & svg {
-      width: 8px;
-      height: 8px;
       transform: rotate(0deg);
     }
   }
 }
 
 #layers.tool-window {
-  overflow: auto;  
+  overflow: auto;
 }
 
 .layers-tab {
diff --git a/frontend/resources/styles/main/partials/text-palette.scss b/frontend/resources/styles/main/partials/text-palette.scss
index a48fc32eb4..b1c223da1e 100644
--- a/frontend/resources/styles/main/partials/text-palette.scss
+++ b/frontend/resources/styles/main/partials/text-palette.scss
@@ -11,13 +11,15 @@
     color: $color-white;
   }
 
-  & .typography-font, & .typography-data {
+  & .typography-font,
+  & .typography-data {
     font-size: 16px;
-    color: #7B7D85;
+    color: $color-gray-30;
   }
 
   .no-text & {
-    & .typography-font, & .typography-data {
+    & .typography-font,
+    & .typography-data {
       display: none;
     }
   }
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index a3c3f03a71..2bba2d53af 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -21,9 +21,10 @@ $height-palette-max: 80px;
   user-select: none;
 
   display: grid;
-  grid-template-areas: "header header header header"
-                       "toolbar left-sidebar viewport right-sidebar"
-                       "toolbar left-sidebar color-palette right-sidebar";
+  grid-template-areas:
+    "header header header header"
+    "toolbar left-sidebar viewport right-sidebar"
+    "toolbar left-sidebar color-palette right-sidebar";
 
   grid-template-rows: auto 1fr auto;
   grid-template-columns: auto auto 1fr auto;
@@ -48,7 +49,7 @@ $height-palette-max: 80px;
   .settings-bar.settings-bar-right {
     min-width: $width-settings-bar;
     max-width: 500px;
-    width: var(--width, $width-settings-bar);
+    width: $width-settings-bar;
     grid-area: right-sidebar;
   }
 
@@ -68,7 +69,6 @@ $height-palette-max: 80px;
   }
 }
 
-
 .workspace-context-menu {
   background-color: $color-white;
   border-radius: $br-small;
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 93a66e9d22..06d3b986c6 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -69,15 +69,9 @@
    ::mf/wrap [mf/memo]}
   [props]
   (let [layout (obj/get props "layout")
-        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
-        (use-resize-hook :right-sidebar 255 255 500 :x true :right)
-
         drawing-tool (:tool (mf/deref refs/workspace-drawing))]
-    [:aside.settings-bar.settings-bar-right {:ref parent-ref
-                                             :style #js {"--width" (str size "px")}}
-     [:div.resize-area {:on-pointer-down on-pointer-down
-                        :on-lost-pointer-capture on-lost-pointer-capture
-                        :on-mouse-move on-mouse-move}]
+
+    [:aside.settings-bar.settings-bar-right
      [:div.settings-bar-inside
       (cond
         (= drawing-tool :comments)
diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs
index c64eb2148b..72225aa20d 100644
--- a/frontend/src/app/main/ui/workspace/textpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/textpalette.cljs
@@ -52,7 +52,6 @@
   [{:keys [local selected-ids current-file-id file-typographies shared-libs]}]
 
   (let [state (mf/use-state {:show-menu false})
-
         selected (mf/use-state :file)
 
         file-id
@@ -116,18 +115,7 @@
         {:on-click #(reset! selected :file)}
         (when (= selected :file) i/tick)
         [:div.library-name (str (tr "workspace.libraries.colors.file-library")
-                                (str/format " (%s)" (count file-typographies)))]]
-
-       #_[:li.palette-library
-        {:on-click #(st/emit! (mdc/change-palette-selected :recent))}
-        (when (= selected :recent) i/tick)
-        [:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
-                                (str/format " (%s)" (count recent-colors)))]
-        [:div.color-sample
-         (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
-           [:& cb/color-bullet {:key (str "color-" idx)
-                                :color color}])]]
-       ]]
+                                (str/format " (%s)" (count file-typographies)))]]]]
 
      [:div.color-palette-actions
       {:on-click #(swap! state assoc :show-menu true)}
@@ -136,7 +124,7 @@
      [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
 
      [:div.color-palette-content {:ref container :on-wheel on-wheel}
-      [:div.color-palette-inside {:style {:position "relative"}}
+      [:div.color-palette-inside
        (for [[idx item] (map-indexed vector current-typographies)]
          [:& typography-item
           {:key idx
@@ -145,9 +133,7 @@
            :selected-ids selected-ids
            :typography item}])]]
 
-     [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])
-
-  )
+     [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
 
 (def local-data
   (l/derived #(select-keys % [:editors]) refs/workspace-local =))
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 6a233f7b7a..35e8f44b12 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -367,7 +367,8 @@
          [:*
           [:& rules/rules
            {:zoom zoom
-            :vbox vbox}]
+            :vbox vbox
+            :selected-shapes selected-shapes}]
 
           [:& guides/viewport-guides
            {:zoom zoom
diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
index da40d316f3..fa533c1952 100644
--- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
@@ -8,7 +8,9 @@
   (:require
    [app.common.colors :as colors]
    [app.common.data :as d]
+   [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
+   [app.main.ui.hooks :as hooks]
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
@@ -16,6 +18,11 @@
 (def rules-size 4)
 (def rules-width 1)
 
+(def rule-area-size 22)
+(def rule-area-half-size (/ rule-area-size 2))
+
+(def rules-background "var(--color-gray-50)")
+
 ;; ----------------
 ;;   RULES
 ;; ----------------
@@ -59,12 +66,12 @@
     (let [x      (:x vbox)
           y      (:y vbox)
           width  (:width vbox)
-          height (/ 22 zoom)]
+          height (/ rule-area-size zoom)]
       {:x x :y y :width width :height height})
 
     (let [x      (:x vbox)
-          y      (+ (:y vbox) (/ 22 zoom))
-          width  (/ 22 zoom)
+          y      (+ (:y vbox) (/ rule-area-size zoom))
+          width  (/ rule-area-size zoom)
           height (- (:height vbox) (/ 21 zoom))]
       {:x x :y y :width width :height height})))
 
@@ -107,7 +114,7 @@
     
     [:*
      (let [{:keys [x y width height]} (get-background-area vbox zoom axis)]
-       [:rect {:x x :y y :width width :height height :style {:fill "#303236"}}])
+       [:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
 
      [:g.rules {:clipPath (str "url(#" clip-id ")")} 
 
@@ -147,13 +154,118 @@
                      :style {:stroke colors/gray-30
                              :stroke-width rules-width}}]])))]]))
 
+(def selection-area-color "var(--color-primary)")
+(def selection-area-opacity 0.3)
+(def over-number-size 50)
+(def over-number-opacity 0.7)
+
+(mf/defc selection-area
+  [{:keys [vbox zoom selection-rect]}]
+  [:g.selection-area
+   [:g
+    [:rect {:x (:x selection-rect)
+            :y (:y vbox)
+            :width (:width selection-rect)
+            :height (/ rule-area-size zoom)
+            :style {:fill selection-area-color
+                    :fill-opacity selection-area-opacity}}]
+
+    [:rect {:x (- (:x selection-rect) (/ over-number-size zoom))
+            :y (:y vbox)
+            :width (/ over-number-size zoom)
+            :height (/ rule-area-size zoom)
+            :style {:fill rules-background
+                    :fill-opacity over-number-opacity}}]
+    
+    [:text {:x (- (:x1 selection-rect) (/ 4 zoom))
+            :y (+ (:y vbox) (/ 12 zoom))
+            :text-anchor "end"
+            :dominant-baseline "middle"
+            :style {:font-size (/ 13 zoom)
+                    :font-family "sourcesanspro"
+                    :fill selection-area-color}}
+     (str (mth/round (:x1 selection-rect)))]
+
+    [:rect {:x (:x2 selection-rect)
+            :y (:y vbox)
+            :width (/ over-number-size zoom)
+            :height (/ rule-area-size zoom)
+            :style {:fill rules-background
+                    :fill-opacity over-number-opacity}}]
+
+    [:text {:x (+ (:x2 selection-rect) (/ 4 zoom))
+            :y (+ (:y vbox) (/ 12 zoom))
+            :text-anchor "start"
+            :dominant-baseline "middle"
+            :style {:font-size (/ 13 zoom)
+                    :font-family "sourcesanspro"
+                    :fill selection-area-color}}
+     (str (mth/round (:x2 selection-rect)))]]
+
+   (let [center-x (+ (:x vbox) (/ rule-area-half-size zoom))
+         center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (/ rule-area-half-size zoom))]
+     
+     [:g {:transform (str "rotate(-90 " center-x "," center-y ")")}
+      [:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom))
+              :y (- center-y (/ rule-area-half-size zoom))
+              :width (:height selection-rect)
+              :height (/ rule-area-size zoom)
+              :style {:fill selection-area-color
+                      :fill-opacity selection-area-opacity}}]
+
+      [:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom) (/ over-number-size zoom))
+              :y (- center-y (/ rule-area-half-size zoom))
+              :width (/ over-number-size zoom)
+              :height (/ rule-area-size zoom)
+              :style {:fill rules-background
+                      :fill-opacity over-number-opacity}}]
+
+      [:rect {:x (+ (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom) ) (:height selection-rect))
+              :y (- center-y (/ rule-area-half-size zoom))
+              :width (/ over-number-size zoom)
+              :height (/ rule-area-size zoom)
+              :style {:fill rules-background
+                      :fill-opacity over-number-opacity}}]
+      
+      [:text {:x (- center-x (/ (:height selection-rect) 2) (/ 15 zoom))
+              :y center-y
+              :text-anchor "end"
+              :dominant-baseline "middle"
+              :style {:font-size (/ 13 zoom)
+                      :font-family "sourcesanspro"
+                      :fill selection-area-color}}
+       (str (mth/round (:y2 selection-rect)))]
+
+      [:text {:x (+ center-x (/ (:height selection-rect) 2) )
+              :y center-y
+              :text-anchor "start"
+              :dominant-baseline "middle"
+              :style {:font-size (/ 13 zoom)
+                      :font-family "sourcesanspro"
+                      :fill selection-area-color}}
+       (str (mth/round (:y1 selection-rect)))]])])
+
 (mf/defc rules
   {::mf/wrap-props false
-   ::mf/wrap [mf/memo]}
+   ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]}
   [props]
-  (let [zoom        (obj/get props "zoom")
-        vbox        (obj/get props "vbox")]
+  (let [zoom            (obj/get props "zoom")
+        vbox            (obj/get props "vbox")
+        selected-shapes (-> (obj/get props "selected-shapes")
+                            (hooks/use-equal-memo))
+
+        selection-rect
+        (mf/use-memo
+         (mf/deps selected-shapes)
+         #(when (d/not-empty? selected-shapes)
+            (gsh/selection-rect selected-shapes)))]
+
     (when (some? vbox)
       [:g.rules {:pointer-events "none"}
        [:& rules-axis {:zoom zoom :vbox vbox :axis :x}]
-       [:& rules-axis {:zoom zoom :vbox vbox :axis :y}]])))
+       [:& rules-axis {:zoom zoom :vbox vbox :axis :y}]
+
+       (when (some? selection-rect)
+         [:& selection-area {:zoom zoom
+                             :vbox vbox
+                             :selection-rect selection-rect}])])))

From 779f685f726a872428a87c32961636a0e9727ea0 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 3 Feb 2022 11:08:37 +0100
Subject: [PATCH 09/11] :sparkles: Update strings for the new tabs

---
 .../app/main/ui/workspace/colorpalette.cljs   |  3 +-
 .../src/app/main/ui/workspace/sidebar.cljs    |  5 +--
 .../main/ui/workspace/sidebar/sitemap.cljs    |  4 +--
 .../main/ui/workspace/viewport/guides.cljs    | 13 ++++---
 .../app/main/ui/workspace/viewport/rules.cljs | 34 +++++++++----------
 frontend/translations/ca.po                   |  4 +--
 frontend/translations/de.po                   |  4 +--
 frontend/translations/el.po                   |  4 +--
 frontend/translations/en.po                   |  4 +--
 frontend/translations/es.po                   |  4 +--
 frontend/translations/fr.po                   |  4 +--
 frontend/translations/he.po                   |  4 +--
 frontend/translations/pt_BR.po                |  2 +-
 frontend/translations/ro.po                   |  4 +--
 frontend/translations/tr.po                   |  4 +--
 frontend/translations/zh_CN.po                |  4 +--
 16 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index 1818909079..86b79e0f44 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -156,8 +156,7 @@
         [:div.color-sample
          (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
            [:& cb/color-bullet {:key (str "color-" idx)
-                                :color color}])]]
-       ]]
+                                :color color}])]]]]
 
      [:div.color-palette-actions
       {:on-click #(swap! state assoc :show-menu true)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 06d3b986c6..6173862014 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -19,6 +19,7 @@
    [app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
    [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
    [app.util.dom :as dom]
+   [app.util.i18n :refer [tr]]
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
@@ -54,12 +55,12 @@
       [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
                          :selected section}
 
-       [:& tab-element {:id :layers :title "Layers"}
+       [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
         [:div.layers-tab
          [:& sitemap {:layout layout}]
          [:& layers-toolbox]]]
 
-       [:& tab-element {:id :assets :title "Library"}
+       [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
         [:& assets-toolbox]]]]]))
 
 ;; --- Right Sidebar (Component)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index cbc66fdc73..56ed2bf760 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -225,6 +225,4 @@
 
      [:div.resize-area {:on-pointer-down on-pointer-down
                         :on-lost-pointer-capture on-lost-pointer-capture
-                        :on-mouse-move on-mouse-move}]
-
-     ]))
+                        :on-mouse-move on-mouse-move}]]))
diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs
index 03b7a3bdbb..2a179628c7 100644
--- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/guides.cljs
@@ -29,6 +29,11 @@
 (def guide-pill-corner-radius 4)
 (def guide-active-area 16)
 
+(def guide-creation-margin-left 8)
+(def guide-creation-margin-top 28)
+(def guide-creation-width 16)
+(def guide-creation-height 24)
+
 (defn use-guide
   "Hooks to support drag/drop for existing guides and new guides"
   [on-guide-change get-hover-frame zoom {:keys [position axis frame-id]}]
@@ -220,15 +225,15 @@
 (defn guide-creation-area
   [vbox zoom axis]
   (if (= axis :x)
-    {:x (+ (:x vbox) (/ 8 zoom))
+    {:x (+ (:x vbox) (/ guide-creation-margin-left zoom))
      :y (:y vbox)
-     :width (/ 16 zoom)
+     :width (/ guide-creation-width zoom)
      :height (:height vbox)}
 
-    {:x (+ (:x vbox) (+ 28 zoom))
+    {:x (+ (:x vbox) (+ guide-creation-margin-top zoom))
      :y (:y vbox)
      :width (:width vbox)
-     :height (/ 24 zoom)}))
+     :height (/ guide-creation-height zoom)}))
 
 (defn is-guide-inside-frame?
   [guide frame]
diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
index fa533c1952..eac0324035 100644
--- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs
@@ -17,11 +17,16 @@
 (def rules-pos 15)
 (def rules-size 4)
 (def rules-width 1)
-
 (def rule-area-size 22)
 (def rule-area-half-size (/ rule-area-size 2))
-
 (def rules-background "var(--color-gray-50)")
+(def selection-area-color "var(--color-primary)")
+(def selection-area-opacity 0.3)
+(def over-number-size 50)
+(def over-number-opacity 0.7)
+
+(def font-size 13)
+(def font-family "sourcesanspro")
 
 ;; ----------------
 ;;   RULES
@@ -141,8 +146,8 @@
                      :text-anchor "middle"
                      :dominant-baseline "middle"
                      :transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
-                     :style {:font-size (/ 13 zoom)
-                             :font-family "sourcesanspro"
+                     :style {:font-size (/ font-size zoom)
+                             :font-family font-family
                              :fill colors/gray-30}}
               (str (mth/round step-val))]
 
@@ -154,11 +159,6 @@
                      :style {:stroke colors/gray-30
                              :stroke-width rules-width}}]])))]]))
 
-(def selection-area-color "var(--color-primary)")
-(def selection-area-opacity 0.3)
-(def over-number-size 50)
-(def over-number-opacity 0.7)
-
 (mf/defc selection-area
   [{:keys [vbox zoom selection-rect]}]
   [:g.selection-area
@@ -181,8 +181,8 @@
             :y (+ (:y vbox) (/ 12 zoom))
             :text-anchor "end"
             :dominant-baseline "middle"
-            :style {:font-size (/ 13 zoom)
-                    :font-family "sourcesanspro"
+            :style {:font-size (/ font-size zoom)
+                    :font-family font-family
                     :fill selection-area-color}}
      (str (mth/round (:x1 selection-rect)))]
 
@@ -197,8 +197,8 @@
             :y (+ (:y vbox) (/ 12 zoom))
             :text-anchor "start"
             :dominant-baseline "middle"
-            :style {:font-size (/ 13 zoom)
-                    :font-family "sourcesanspro"
+            :style {:font-size (/ font-size zoom)
+                    :font-family font-family
                     :fill selection-area-color}}
      (str (mth/round (:x2 selection-rect)))]]
 
@@ -231,8 +231,8 @@
               :y center-y
               :text-anchor "end"
               :dominant-baseline "middle"
-              :style {:font-size (/ 13 zoom)
-                      :font-family "sourcesanspro"
+              :style {:font-size (/ font-size zoom)
+                      :font-family font-family
                       :fill selection-area-color}}
        (str (mth/round (:y2 selection-rect)))]
 
@@ -240,8 +240,8 @@
               :y center-y
               :text-anchor "start"
               :dominant-baseline "middle"
-              :style {:font-size (/ 13 zoom)
-                      :font-family "sourcesanspro"
+              :style {:font-size (/ font-size zoom)
+                      :font-family font-family
                       :fill selection-area-color}}
        (str (mth/round (:y1 selection-rect)))]])])
 
diff --git a/frontend/translations/ca.po b/frontend/translations/ca.po
index af16177e50..9976f5e048 100644
--- a/frontend/translations/ca.po
+++ b/frontend/translations/ca.po
@@ -3127,7 +3127,7 @@ msgstr "Historial (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Capes (%s)"
+msgstr "Capes"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -3143,7 +3143,7 @@ msgstr "Mapa del lloc"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Recursos (%s)"
+msgstr "Recursos"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/de.po b/frontend/translations/de.po
index f9389599f6..beafaf1319 100644
--- a/frontend/translations/de.po
+++ b/frontend/translations/de.po
@@ -3032,7 +3032,7 @@ msgstr "Verlauf (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Ebenen (%s)"
+msgstr "Ebenen"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -3048,7 +3048,7 @@ msgstr "Sitemap"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Assets (%s)"
+msgstr "Assets"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/el.po b/frontend/translations/el.po
index 8ad56d4dba..f3100b1c49 100644
--- a/frontend/translations/el.po
+++ b/frontend/translations/el.po
@@ -2163,7 +2163,7 @@ msgstr "Ιστορικό (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "στρώσεις (%s)"
+msgstr "στρώσεις"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -2179,7 +2179,7 @@ msgstr "Χάρτης ιστοτόπου"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Στοιχεία (%s)"
+msgstr "Στοιχεία"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 7d62a82447..7dbf326b7e 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -3244,7 +3244,7 @@ msgstr "History (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Layers (%s)"
+msgstr "Layers"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -3260,7 +3260,7 @@ msgstr "Sitemap"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Assets (%s)"
+msgstr "Assets"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 512bae5487..ba784e4056 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -3257,7 +3257,7 @@ msgstr "Historial (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Capas (%s)"
+msgstr "Capas"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -3273,7 +3273,7 @@ msgstr "Mapa del sitio"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Recursos (%s)"
+msgstr "Recursos"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po
index 70f85c1fe9..eb704a5ac9 100644
--- a/frontend/translations/fr.po
+++ b/frontend/translations/fr.po
@@ -2535,7 +2535,7 @@ msgstr "Historique (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Calques (%s)"
+msgstr "Calques"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -2551,7 +2551,7 @@ msgstr "Plan du site"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Ressources (%s)"
+msgstr "Ressources"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/he.po b/frontend/translations/he.po
index 01956021b7..eaa620b490 100644
--- a/frontend/translations/he.po
+++ b/frontend/translations/he.po
@@ -3078,7 +3078,7 @@ msgstr "היסטוריה (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "שכבות (%s)"
+msgstr "שכבות"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -3094,7 +3094,7 @@ msgstr "מפת אתר"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "משאבים (%s)"
+msgstr "משאבים"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/pt_BR.po b/frontend/translations/pt_BR.po
index cfdf4e3207..cd0442519e 100644
--- a/frontend/translations/pt_BR.po
+++ b/frontend/translations/pt_BR.po
@@ -1844,7 +1844,7 @@ msgstr "Histórico (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Camadas (%s)"
+msgstr "Camadas"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po
index a16acbce51..26c1f7e93e 100644
--- a/frontend/translations/ro.po
+++ b/frontend/translations/ro.po
@@ -2417,7 +2417,7 @@ msgstr "Istoric (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Layere (%s)"
+msgstr "Layere"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -2433,7 +2433,7 @@ msgstr "Harta site-ului"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Obiecte (%s)"
+msgstr "Obiecte"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po
index 523f8cbd30..ff4cb091fd 100644
--- a/frontend/translations/tr.po
+++ b/frontend/translations/tr.po
@@ -3112,7 +3112,7 @@ msgstr "Geçmiş (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "Katmanlar (%s)"
+msgstr "Katmanlar"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -3128,7 +3128,7 @@ msgstr "Site haritası"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "Varlıklar(%s)"
+msgstr "Varlıklar"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"
diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po
index c01314468d..43cfecabd2 100644
--- a/frontend/translations/zh_CN.po
+++ b/frontend/translations/zh_CN.po
@@ -2527,7 +2527,7 @@ msgstr "历史（%s）"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.sidebar.layers"
-msgstr "图层（%s）"
+msgstr "图层"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs, src/app/main/ui/handoff/attributes/svg.cljs
 msgid "workspace.sidebar.options.svg-attrs.title"
@@ -2543,7 +2543,7 @@ msgstr "站点地图"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.assets"
-msgstr "素材（%s）"
+msgstr "素材"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.color-palette"

From 03052ddd28a66915e2714f8ca735a4592cdc79af Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 3 Feb 2022 11:15:50 +0100
Subject: [PATCH 10/11] :sparkles: Fixed hover on sidebar

---
 frontend/resources/styles/main/partials/left-toolbar.scss      | 3 +++
 .../styles/main/partials/sidebar-document-history.scss         | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/frontend/resources/styles/main/partials/left-toolbar.scss b/frontend/resources/styles/main/partials/left-toolbar.scss
index 29ba7bc9a5..1c787bd96b 100644
--- a/frontend/resources/styles/main/partials/left-toolbar.scss
+++ b/frontend/resources/styles/main/partials/left-toolbar.scss
@@ -35,6 +35,7 @@
     justify-content: center;
     position: relative;
     width: 48px;
+    color: $color-gray-20;
 
     svg {
       fill: $color-gray-20;
@@ -44,6 +45,7 @@
 
     &:hover {
       background-color: $color-primary;
+      color: $color-gray-50;
 
       svg {
         fill: $color-gray-50;
@@ -52,6 +54,7 @@
 
     &.selected {
       background-color: $color-gray-60;
+      color: $color-primary;
 
       svg {
         fill: $color-primary;
diff --git a/frontend/resources/styles/main/partials/sidebar-document-history.scss b/frontend/resources/styles/main/partials/sidebar-document-history.scss
index 93ea710f1a..72553e3367 100644
--- a/frontend/resources/styles/main/partials/sidebar-document-history.scss
+++ b/frontend/resources/styles/main/partials/sidebar-document-history.scss
@@ -40,6 +40,9 @@
   font-size: $fs12;
   color: $color-gray-20;
   fill: $color-gray-20;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .history-entry {

From 9789b7081a8f3a05b5910500e0aa8ea69336b6d7 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 3 Feb 2022 14:15:23 +0100
Subject: [PATCH 11/11] :sparkles: Post-review changes

---
 frontend/src/app/main/refs.cljs               |  8 ++-
 frontend/src/app/main/ui/hooks/resize.cljs    | 68 ++++++++++---------
 .../app/main/ui/workspace/sidebar/assets.cljs | 29 ++++----
 .../app/main/ui/workspace/textpalette.cljs    | 29 ++++----
 4 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 15fdbb9367..b24e1af90d 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -124,6 +124,11 @@
                               :move-overlay-index])
              workspace-local =))
 
+(def typography-data
+  (l/derived #(select-keys % [:rename-typography
+                              :edit-typography])
+             workspace-local =))
+
 (def local-displacement
   (l/derived #(select-keys % [:modifiers :selected])
              workspace-local =))
@@ -158,9 +163,6 @@
 (def current-hover-ids
   (l/derived :hover-ids context-menu))
 
-(def editors
-  (l/derived :editors workspace-local))
-
 (def selected-assets
   (l/derived :selected-assets workspace-local))
 
diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs
index b4ba927be0..742066c822 100644
--- a/frontend/src/app/main/ui/hooks/resize.cljs
+++ b/frontend/src/app/main/ui/hooks/resize.cljs
@@ -32,34 +32,38 @@
         start-ref (mf/use-ref nil)
 
         on-pointer-down
-        (fn [event]
-          (dom/capture-pointer event)
-          (mf/set-ref-val! start-size-ref @size-state)
-          (mf/set-ref-val! dragging-ref true)
-          (mf/set-ref-val! start-ref (dom/get-client-position event))
-          (set! last-resize-type resize-type))
+        (mf/use-callback
+         (mf/deps @size-state)
+         (fn [event]
+           (dom/capture-pointer event)
+           (mf/set-ref-val! start-size-ref @size-state)
+           (mf/set-ref-val! dragging-ref true)
+           (mf/set-ref-val! start-ref (dom/get-client-position event))
+           (set! last-resize-type resize-type)))
 
         on-lost-pointer-capture
-        (fn [event]
-          (dom/release-pointer event)
-          (mf/set-ref-val! start-size-ref nil)
-          (mf/set-ref-val! dragging-ref false)
-          (mf/set-ref-val! start-ref nil)
-          (set! last-resize-type nil))
+        (mf/use-callback
+         (fn [event]
+           (dom/release-pointer event)
+           (mf/set-ref-val! start-size-ref nil)
+           (mf/set-ref-val! dragging-ref false)
+           (mf/set-ref-val! start-ref nil)
+           (set! last-resize-type nil)))
 
         on-mouse-move
-        (fn [event]
-          (when (mf/ref-val dragging-ref)
-            (let [start (mf/ref-val start-ref)
-                  pos (dom/get-client-position event)
-                  delta (-> (gpt/to-vec start pos)
-                            (cond-> negate? gpt/negate)
-                            (get axis))
-                  start-size (mf/ref-val start-size-ref)
-                  new-size (-> (+ start-size delta) (max min-val) (min max-val))]
-              
-              (reset! size-state new-size)
-              (swap! storage assoc-in [::saved-resize current-file-id key] new-size))))]
+        (mf/use-callback
+         (mf/deps min-val max-val)
+         (fn [event]
+           (when (mf/ref-val dragging-ref)
+             (let [start (mf/ref-val start-ref)
+                   pos (dom/get-client-position event)
+                   delta (-> (gpt/to-vec start pos)
+                             (cond-> negate? gpt/negate)
+                             (get axis))
+                   start-size (mf/ref-val start-size-ref)
+                   new-size (-> (+ start-size delta) (max min-val) (min max-val))]
+               (reset! size-state new-size)
+               (swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))]
     {:on-pointer-down on-pointer-down
      :on-lost-pointer-capture on-lost-pointer-capture
      :on-mouse-move on-mouse-move
@@ -68,16 +72,18 @@
 
 (defn use-resize-observer
   [callback]
+  (assert (some? callback))
 
   (let [prev-val-ref (mf/use-ref nil)
         current-observer-ref (mf/use-ref nil)
 
+        ;; We use the ref as a callback when the dom node is ready (or change)
         node-ref
         (mf/use-callback
          (mf/deps callback)
-         (fn [node]
-           (let [current-observer (mf/ref-val current-observer-ref)
-                 prev-val         (mf/ref-val prev-val-ref)]
+         (fn [^js node]
+           (let [^js current-observer (mf/ref-val current-observer-ref)
+                 ^js prev-val         (mf/ref-val prev-val-ref)]
 
              (when (and (not= prev-val node) (some? current-observer))
                (log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
@@ -85,11 +91,8 @@
                (mf/set-ref-val! current-observer-ref nil))
 
              (when (and (not= prev-val node) (some? node))
-               (let [observer
-                     (js/ResizeObserver.
-                      (fn []
-                        (let [size (dom/get-client-size node)]
-                          (when callback (callback last-resize-type size)))))]
+               (let [^js observer
+                     (js/ResizeObserver. #(callback last-resize-type (dom/get-client-size node)))]
                  (mf/set-ref-val! current-observer-ref observer)
                  (log/debug :action "observe"  :js/node node :js/observer observer)
                  (.observe observer node))))
@@ -97,6 +100,7 @@
 
     (mf/use-effect
      (fn []
+       ;; On dismount we need to disconnect the current observer
        (fn []
          (let [current-observer (mf/ref-val current-observer-ref)]
            (when (some? current-observer)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index 13b6506961..ca278502c9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -1087,7 +1087,7 @@
 ;; ---- Typography box ----
 
 (mf/defc typographies-group
-  [{:keys [file-id prefix groups open-groups file local? selected-typographies local
+  [{:keys [file-id prefix groups open-groups file local? selected-typographies local-data
            editing-id on-asset-click handle-change apply-typography
            on-rename-group on-ungroup on-context-menu]}]
   (let [group-open? (get open-groups prefix true)]
@@ -1115,7 +1115,7 @@
                :on-click  #(on-asset-click % (:id typography)
                                            (partial apply-typography typography))
                :editing? (= editing-id (:id typography))
-               :focus-name? (= (:rename-typography local) (:id typography))}])])
+               :focus-name? (= (:rename-typography local-data) (:id typography))}])])
 
         (for [[path-item content] groups]
           (when-not (empty? path-item)
@@ -1127,7 +1127,7 @@
                                     :local? local?
                                     :selected-typographies selected-typographies
                                     :editing-id editing-id
-                                    :local local
+                                    :local-data local-data
                                     :on-asset-click on-asset-click
                                     :handle-change handle-change
                                     :apply-typography apply-typography
@@ -1141,11 +1141,9 @@
   (let [state (mf/use-state {:detail-open? false
                              :id nil})
 
+        local-data (mf/deref refs/typography-data)
         menu-state (mf/use-state auto-pos-menu-state)
-
-        local    (deref refs/workspace-local)
-
-        groups        (group-assets typographies reverse-sort?)
+        groups     (group-assets typographies reverse-sort?)
 
         selected-typographies (:typographies selected-assets)
         multi-typographies?   (> (count selected-typographies) 1)
@@ -1174,7 +1172,11 @@
                         {:typography-ref-file file-id
                          :typography-ref-id (:id typography)}
                         (dissoc typography :id :name))]
-            (run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs}))
+            (run! #(st/emit!
+                    (dwt/update-text-attrs
+                     {:id %
+                      :editor (get @refs/workspace-editor-state %)
+                      :attrs attrs}))
                   ids)))
 
         create-group
@@ -1273,14 +1275,15 @@
                        (dwl/sync-file file-id file-id)
                        (dwu/commit-undo-transaction)))))
 
-        editing-id (or (:rename-typography local) (:edit-typography local))]
+        editing-id (or (:rename-typography local-data)
+                       (:edit-typography local-data))]
 
     (mf/use-effect
-     (mf/deps local)
+     (mf/deps local-data)
      (fn []
-       (when (:rename-typography local)
+       (when (:rename-typography local-data)
          (st/emit! #(update % :workspace-local dissoc :rename-typography)))
-       (when (:edit-typography local)
+       (when (:edit-typography local-data)
          (st/emit! #(update % :workspace-local dissoc :edit-typography)))))
 
     [:& asset-section {:file-id file-id
@@ -1303,7 +1306,7 @@
                                 :local? local?
                                 :selected-typographies selected-typographies
                                 :editing-id editing-id
-                                :local local
+                                :local-data local-data
                                 :on-asset-click (partial on-asset-click groups)
                                 :handle-change handle-change
                                 :apply-typography apply-typography
diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs
index 72225aa20d..4d9ca61586 100644
--- a/frontend/src/app/main/ui/workspace/textpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/textpalette.cljs
@@ -12,30 +12,35 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.context :as ctx]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
-   [okulary.core :as l]
    [rumext.alpha :as mf]))
 
 (mf/defc typography-item
-  [{:keys [local file-id selected-ids typography name-only?]}]
+  [{:keys [file-id selected-ids typography name-only?]}]
   (let [font-data (f/get-font-data (:font-id typography))
         font-variant-id (:font-variant-id typography)
         variant-data (->> font-data :variants (d/seek #(= (:id %) font-variant-id)))
 
         handle-click
         (mf/use-callback
-         (mf/deps local typography selected-ids)
+         (mf/deps typography selected-ids)
          (fn []
            (let [attrs (merge
                         {:typography-ref-file file-id
                          :typography-ref-id (:id typography)}
                         (dissoc typography :id :name))]
-             (->> selected-ids
-                  (run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs})))))))]
+
+             (run! #(st/emit!
+                     (dwt/update-text-attrs
+                      {:id %
+                       :editor (get @refs/workspace-editor-state %)
+                       :attrs attrs}))
+                   selected-ids))))]
 
     [:div.typography-item {:on-click handle-click}
      [:div.typography-name
@@ -49,7 +54,7 @@
         [:div.typography-data (str (:font-size typography) "pt | " (:name variant-data))]])]))
 
 (mf/defc palette
-  [{:keys [local selected-ids current-file-id file-typographies shared-libs]}]
+  [{:keys [selected-ids current-file-id file-typographies shared-libs]}]
 
   (let [state (mf/use-state {:show-menu false})
         selected (mf/use-state :file)
@@ -129,25 +134,19 @@
          [:& typography-item
           {:key idx
            :file-id file-id
-           :local local
            :selected-ids selected-ids
            :typography item}])]]
 
      [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
 
-(def local-data
-  (l/derived #(select-keys % [:editors]) refs/workspace-local =))
-
 (mf/defc textpalette
   {::mf/wrap [mf/memo]}
   []
-  (let [local             (mf/deref local-data)
-        selected-ids      (mf/deref refs/selected-shapes)
+  (let [selected-ids      (mf/deref refs/selected-shapes)
         file-typographies (mf/deref refs/workspace-file-typography)
         shared-libs       (mf/deref refs/workspace-libraries)
-        current-file-id   (mf/deref refs/current-file-id)]
-    [:& palette {:local local
-                 :current-file-id current-file-id
+        current-file-id   (mf/use-ctx ctx/current-file-id)]
+    [:& palette {:current-file-id current-file-id
                  :selected-ids selected-ids
                  :file-typographies file-typographies
                  :shared-libs shared-libs}]))