feat: make panels resizable

packages/@dcl/inspector/package.json

@@ -32,6 +32,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
     "react-modal": "^3.16.1",
+    "react-resizable-panels": "^0.0.48",
     "typescript": "^5.0.2"
   },
   "files": [

packages/@dcl/inspector/src/components/App/App.css

@@ -34,7 +34,7 @@ code {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background: var(--main-bg-color);
 }
 
@@ -54,3 +54,16 @@ code {
   top: -30px;
   position: absolute !important;
 }
+
+.App {
+  width: 100%;
+  height: 100%;
+}
+
+.App .horizontal-handle {
+  width: 4px;
+}
+
+.App .vertical-handle {
+  height: 4px;
+}

packages/@dcl/inspector/src/components/App/App.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels'
 
 import { EntityInspector } from '../EntityInspector'
 import { Hierarchy } from '../Hierarchy'
@@ -7,31 +8,53 @@ import { Box } from '../Box'
 import { Toolbar } from '../Toolbar'
 
 import './App.css'
-import { Resizable } from '../Resizable'
 import Assets from '../Assets'
+import { useSelectedEntity } from '../../hooks/sdk/useSelectedEntity'
+import { useWindowSize } from '../../hooks/useWindowSize'
 
 const App = () => {
+  const selectedEntity = useSelectedEntity()
+
+  const { height } = useWindowSize()
+
+  // Footer's height is 48 pixels, so we need to calculate the percentage of the screen that it takes to pass as the minSize prop for the Panel
+  const footerMin = (48 / height!) * 100
+
   return (
-    <Resizable type="horizontal" min={300} initial={300}>
-      <Box>
-        <div
-          className="sidebar"
-          data-vscode-context='{"webviewSection": "sidebar", "preventDefaultContextMenuItems": true}'
-        >
-          <Resizable type="vertical" min={130} initial={130} max={730}>
-            <Hierarchy />
-            <EntityInspector />
-          </Resizable>
-        </div>
-      </Box>
-      <div className="editor">
-        <Box className="composite-renderer">
-          <Toolbar />
-          <Renderer />
-        </Box>
-        <Assets />
-      </div>
-    </Resizable>
+    <div className="App">
+      <PanelGroup direction="vertical" autoSaveId="vertical">
+        <Panel>
+          <PanelGroup direction="horizontal" autoSaveId="horizontal">
+            <Panel defaultSize={20} minSize={12} order={1}>
+              <Box className="composite-inspector">
+                <Hierarchy />
+              </Box>
+            </Panel>
+            <PanelResizeHandle className="horizontal-handle" />
+            <Panel minSize={30} order={2}>
+              <Box className="composite-renderer">
+                <Toolbar />
+                <Renderer />
+              </Box>
+            </Panel>
+            <PanelResizeHandle className="horizontal-handle" />
+            {selectedEntity !== null && (
+              <Panel defaultSize={20} minSize={15} order={3}>
+                <Box className="entity-inspector">
+                  <EntityInspector />
+                </Box>
+              </Panel>
+            )}
+          </PanelGroup>
+        </Panel>
+        <PanelResizeHandle className="vertical-handle" />
+        <Panel minSize={footerMin} defaultSize={30}>
+          <Box className="composite-renderer">
+            <Assets />
+          </Box>
+        </Panel>
+      </PanelGroup>
+    </div>
   )
 }
 

packages/@dcl/inspector/src/components/Assets/Assets.css

@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   flex: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 .Assets .Assets-buttons span {
@@ -62,5 +65,5 @@
 
 .Assets .Assets-content {
   background: var(--tree-bg-color) !important;
-  height: 250px !important;
-}
+  height: calc(100% - 36px);
+}

packages/@dcl/inspector/src/components/Assets/Assets.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useState } from 'react'
 import cx from 'classnames'
 
 import { AssetsTab } from './types'
-import { Box } from '../Box'
 import { FolderOpen } from '../Icons/Folder'
 import { MdImageSearch } from 'react-icons/md'
 import { HiOutlinePlus } from 'react-icons/hi'
@@ -14,11 +13,11 @@ import ImportAsset from '../ImportAsset'
 import './Assets.css'
 
 function Assets() {
-  const [tab, setTab] = useState<AssetsTab | undefined>(undefined)
+  const [tab, setTab] = useState<AssetsTab>(AssetsTab.FileSystem)
 
   const handleTabClick = useCallback(
     (value: AssetsTab) => () => {
-      setTab(tab === value ? undefined : value)
+      setTab(value)
     },
     [tab]
   )
@@ -29,7 +28,7 @@ function Assets() {
   }, [])
 
   return (
-    <Box className="Assets">
+    <div className="Assets">
       <div className="Assets-buttons">
         <div onClick={handleTabClick(AssetsTab.FileSystem)}>
           <div className={cx({ underlined: tab === AssetsTab.FileSystem })}>
@@ -49,14 +48,12 @@ function Assets() {
           </div>
         </div>
       </div>
-      {tab && (
-        <div className="Assets-content">
-          {tab === AssetsTab.AssetsPack && <AssetsCatalog />}
-          {tab === AssetsTab.FileSystem && <ProjectAssetExplorer onImportAsset={handleTabClick(AssetsTab.Import)} />}
-          {tab === AssetsTab.Import && <ImportAsset onSave={handleSave} />}
-        </div>
-      )}
-    </Box>
+      <div className="Assets-content">
+        {tab === AssetsTab.AssetsPack && <AssetsCatalog />}
+        {tab === AssetsTab.FileSystem && <ProjectAssetExplorer onImportAsset={handleTabClick(AssetsTab.Import)} />}
+        {tab === AssetsTab.Import && <ImportAsset onSave={handleSave} />}
+      </div>
+    </div>
   )
 }
 

packages/@dcl/inspector/src/components/Box/Box.css

@@ -1,3 +1,7 @@
+.Box {
+  height: calc(100% - 4.8px);
+}
+
 .Box.with-border {
   margin: 2.4px;
   padding: 3.2px;
@@ -14,4 +18,5 @@
   background: var(--main-bg-color);
   width: 100%;
   height: 100%;
+  position: relative;
 }

packages/@dcl/inspector/src/components/Container/Container.css

@@ -2,11 +2,9 @@
   display: flex;
   flex-direction: column;
   padding: 12px;
-  background-color: var(--modal);
-  border-radius: 8px;
-  margin: 12px;
   height: 100%;
   overflow-y: auto;
+  border-bottom: 1px solid var(--border-gray);
 }
 
 .Container.hover {
@@ -27,10 +25,10 @@
   margin-right: 4px;
 }
 
-.Container > span {
+.Container>span {
   margin: 0px 0px 4px 0px;
   color: var(--text);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-}
+}

packages/@dcl/inspector/src/components/EntityInspector/EntityInspector.css

@@ -0,0 +1,6 @@
+.EntityInspector {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--tree-bg-color);
+}

packages/@dcl/inspector/src/components/EntityInspector/EntityInspector.tsx

@@ -3,6 +3,7 @@ import { useSelectedEntity } from '../../hooks/sdk/useSelectedEntity'
 import { SceneInspector } from './SceneInspector'
 import { TransformInspector } from './TransformInspector'
 import { GltfInspector } from './GltfInspector'
+import './EntityInspector.css'
 
 export const EntityInspector: React.FC = () => {
   const entity = useSelectedEntity()

packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.css

@@ -0,0 +1,4 @@
+.Hierarchy {
+  height: 100%;
+  background: var(--tree-bg-color);
+}

packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx

@@ -6,9 +6,9 @@ import { FiHexagon } from 'react-icons/fi'
 import { ROOT } from '../../lib/sdk/tree'
 import { useSelectedEntity } from '../../hooks/sdk/useSelectedEntity'
 import { useTree } from '../../hooks/sdk/useTree'
-import { Container } from '../Container'
 import { Tree } from '../Tree'
 import { ContextMenu } from './ContextMenu'
+import './Hierarchy.css'
 
 function HierarchyIcon({ value, hasChildrens, isOpen }: { value: Entity; hasChildrens: boolean; isOpen: boolean }) {
   if (value === ROOT) {
@@ -45,7 +45,7 @@ const Hierarchy: React.FC = () => {
     [selectedEntity]
   )
   return (
-    <Container>
+    <div className="Hierarchy">
       <EntityTree
         value={ROOT}
         getExtraContextMenu={ContextMenu}
@@ -65,7 +65,7 @@ const Hierarchy: React.FC = () => {
         canRename={canRename}
         canRemove={canRemove}
       />
-    </Container>
+    </div>
   )
 }