✨ Add resize in percentage option (#5816)

frontend/src/app/main/ui/hooks/resize.cljs

@@ -48,6 +48,14 @@
          start-size-ref (mf/use-ref nil)
          start-ref      (mf/use-ref nil)
 
+         window-height (dom/get-window-height)
+
+         max-val (mf/with-memo [max-val window-height]
+                   (let [parsed-max-val (when (string? max-val) (d/parse-double max-val))]
+                     (if parsed-max-val
+                       (* window-height parsed-max-val)
+                       max-val)))
+
          on-pointer-down
          (mf/use-fn
           (mf/deps current-size)
@@ -79,6 +87,7 @@
                               (get axis))
 
                     start-size (mf/ref-val start-size-ref)
+
                     new-size (-> (+ start-size delta) (max min-val) (min max-val))]
                 (reset! current-size* new-size)
                 (swap! storage/user update-persistent-state file-id key new-size)))))

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

@@ -78,7 +78,7 @@
          on-lost-pointer-capture-pages  :on-lost-pointer-capture
          on-pointer-move-pages :on-pointer-move
          size-pages-opened :size}
-        (use-resize-hook :sitemap 200 38 400 :y false nil)
+        (use-resize-hook :sitemap 200 38 "0.6" :y false nil)
 
         show-pages?    (mf/use-state true)
         toggle-pages   (mf/use-fn #(reset! show-pages? not))

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

@@ -365,7 +365,7 @@
          on-lost-pointer-capture-pages :on-lost-pointer-capture
          on-pointer-move-pages :on-pointer-move
          size-pages-opened :size}
-        (use-resize-hook :tokens 200 38 400 :y false nil)]
+        (use-resize-hook :tokens 200 38 "0.6" :y false nil)]
     [:div {:class (stl/css :sidebar-wrapper)}
      [:& themes-sets-tab {:resize-height size-pages-opened}]
      [:article {:class (stl/css :tokens-section-wrapper)

frontend/src/app/util/dom.cljs

@@ -457,6 +457,10 @@
   {:width (.-innerWidth ^js js/window)
    :height (.-innerHeight ^js js/window)})
 
+(defn get-window-height
+  []
+  (.-innerHeight ^js js/window))
+
 (defn get-computed-styles
   [node]
   (js/getComputedStyle node))