✨ Resize inspect on viewer

frontend/resources/styles/main/layouts/inspect.scss

@@ -104,7 +104,6 @@ $width-settings-bar: 256px;
   }
 
   .settings-bar {
-    transition: width 0.2s;
     width: $width-settings-bar;
 
     &.settings-bar-right,
@@ -119,6 +118,10 @@ $width-settings-bar: 256px;
         overflow-y: auto;
       }
     }
+
+    &.settings-bar-right, {
+      width: 100%;
+    }
   }
 
   .inspect-svg-wrapper {
@@ -139,3 +142,19 @@ $width-settings-bar: 256px;
     margin: 0 auto;
   }
 }
+
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  width: var(--width, $width-settings-bar);
+  height: 100%;
+  overflow: hidden;
+
+  & > .resize-area {
+    position: absolute;
+    width: 8px;
+    height: 100%;
+    z-index: 10;
+    cursor: ew-resize;
+  }
+}

frontend/resources/styles/main/partials/tab-container.scss

@@ -30,15 +30,6 @@
   }
 }
 
-.tab-container-content {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.inspect .tab-container-content {
-  overflow: hidden;
-}
-
 .tab-element,
 .tab-element-content {
   height: 100%;

frontend/resources/styles/main/partials/workspace.scss

@@ -48,6 +48,7 @@ $height-palette-max: 80px;
   }
 
   .settings-bar.settings-bar-right {
+    height: 100%;
     width: var(--width, $width-settings-bar);
     grid-area: right-sidebar;
 

frontend/src/app/main/ui/viewer/inspect.cljs

@@ -6,8 +6,10 @@
 
 (ns app.main.ui.viewer.inspect
   (:require
+   [app.common.data.macros :as dm]
    [app.main.data.viewer :as dv]
    [app.main.store :as st]
+   [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.viewer.inspect.left-sidebar :refer [left-sidebar]]
    [app.main.ui.viewer.inspect.render :refer [render-frame-svg]]
    [app.main.ui.viewer.inspect.right-sidebar :refer [right-sidebar]]
@@ -37,6 +39,11 @@
 (mf/defc viewport
   [{:keys [local file page frame index viewer-pagination size share-id]}]
   (let [inspect-svg-container-ref (mf/use-ref nil)
+        current-section* (mf/use-state :info)
+        current-section (deref current-section*)
+
+        can-be-expanded? (= current-section :code)
+
         on-mouse-wheel
         (fn [event]
           (when (kbd/mod? event)
@@ -55,7 +62,22 @@
           (let [key1 (events/listen goog/global EventType.WHEEL
                                     on-mouse-wheel #js {"passive" false})]
             (fn []
-              (events/unlistenByKey key1))))]
+              (events/unlistenByKey key1))))
+
+        {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move]
+         set-right-size :set-size
+         right-size :size}
+        (use-resize-hook :code 256 256 768 :x true :right)
+
+        handle-change-section
+        (mf/use-callback
+         (fn [section]
+           (reset! current-section* section)))
+
+        handle-expand
+        (mf/use-callback
+         (mf/deps right-size)
+         #(set-right-size (if (> right-size 256) 256 768)))]
 
     (mf/use-effect on-mount)
 
@@ -73,8 +95,18 @@
       [:div.inspect-svg-container {:ref inspect-svg-container-ref}
        [:& render-frame-svg {:frame frame :page page :local local :size size}]]]
 
-     [:& right-sidebar {:frame frame
-                        :selected (:selected local)
-                        :page page
-                        :file file
-                        :share-id share-id}]]))
+     [:div.sidebar-container
+      {:class (when (not can-be-expanded?) "not-expand")
+       :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}}
+      [:div.resize-area
+       {:on-pointer-down on-pointer-down
+        :on-lost-pointer-capture on-lost-pointer-capture
+        :on-pointer-move on-pointer-move}]
+      [:& right-sidebar {:frame frame
+                         :selected (:selected local)
+                         :page page
+                         :file file
+                         :on-change-section handle-change-section
+                         :on-expand handle-expand
+                         :share-id share-id
+                         }]]]))

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

@@ -22,7 +22,7 @@
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.cursors :as cur]
+   [app.main.ui.css-cursors :as cur]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.viewport.viewport-ref :as uwvv]