From 8a94ee620bd612c21c4f958580a7fe5075df9b9a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Aug 2022 12:57:29 +0100
Subject: [PATCH 1/5] Add confirmation for ejecting blocks and component target
 when using context menu

---
 .../navigation/ComponentDropdownMenu.svelte   |  15 +-
 .../navigation/ComponentListPanel.svelte      | 157 +++++++++++-------
 2 files changed, 108 insertions(+), 64 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
index 5add1fedac..c19cba1aac 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
@@ -7,14 +7,15 @@
   $: noPaste = !$store.componentToPaste
 
   const keyboardEvent = (key, ctrlKey = false) => {
-    // Ensure this component is selected first
-    if (component._id !== $store.selectedComponentId) {
-      store.update(state => {
-        state.selectedComponentId = component._id
-        return state
+    document.dispatchEvent(
+      new CustomEvent("component-menu", {
+        detail: {
+          key,
+          ctrlKey,
+          id: component?._id,
+        },
       })
-    }
-    document.dispatchEvent(new KeyboardEvent("keydown", { key, ctrlKey }))
+    )
   }
 </script>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 0c292d1db4..86b71b9785 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -7,14 +7,66 @@
   import NavItem from "components/common/NavItem.svelte"
   import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
   import { setContext, onMount } from "svelte"
-  import { get } from "svelte/store"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { DropPosition } from "./dndStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { notifications, Button } from "@budibase/bbui"
+  import { findComponent } from "builderStore/componentUtils"
 
   let scrollRef
   let confirmDeleteDialog
+  let confirmEjectDialog
+  let componentToDelete
+  let componentToEject
+
+  const keyHandlers = {
+    ["^ArrowUp"]: async component => {
+      await store.actions.components.moveUp(component)
+    },
+    ["^ArrowDown"]: async component => {
+      await store.actions.components.moveDown(component)
+    },
+    ["^c"]: component => {
+      store.actions.components.copy(component, false)
+    },
+    ["^x"]: component => {
+      store.actions.components.copy(component, true)
+    },
+    ["^v"]: async component => {
+      await store.actions.components.paste(component, "inside")
+    },
+    ["^d"]: async component => {
+      store.actions.components.copy(component)
+      await store.actions.components.paste(component, "below")
+    },
+    ["^e"]: component => {
+      componentToEject = component
+      confirmEjectDialog.show()
+    },
+    ["^Enter"]: () => {
+      $goto("./new")
+    },
+    ["Delete"]: component => {
+      // Don't show confirmation for the screen itself
+      if (component?._id === $selectedScreen.props._id) {
+        return false
+      }
+      componentToDelete = component
+      confirmDeleteDialog.show()
+    },
+    ["ArrowUp"]: () => {
+      store.actions.components.selectPrevious()
+    },
+    ["ArrowDown"]: () => {
+      store.actions.components.selectNext()
+    },
+    ["Escape"]: () => {
+      if (!$isActive("/new")) {
+        return false
+      }
+      $goto("./")
+    },
+  }
 
   const scrollTo = bounds => {
     if (!bounds) {
@@ -59,6 +111,11 @@
     })
   }
 
+  // Set scroll context so components can invoke scrolling when selected
+  setContext("scroll", {
+    scrollTo,
+  })
+
   const onDrop = async () => {
     try {
       await dndStore.actions.drop()
@@ -68,13 +125,28 @@
     }
   }
 
-  // Set scroll context so components can invoke scrolling when selected
-  setContext("scroll", {
-    scrollTo,
-  })
-
-  const deleteComponent = async () => {
-    await store.actions.components.delete(get(selectedComponent))
+  const handleKeyAction = async (component, key, ctrlKey = false) => {
+    if (!component || !key) {
+      return false
+    }
+    try {
+      // Delete and backspace are the same
+      if (key === "Backspace") {
+        key = "Delete"
+      }
+      // Prefix key with a caret for ctrl modifier
+      if (ctrlKey) {
+        key = "^" + key
+      }
+      const handler = keyHandlers[key]
+      if (!handler) {
+        return false
+      }
+      return handler(component)
+    } catch (error) {
+      console.log(error)
+      notifications.error("Error handling key press")
+    }
   }
 
   const handleKeyPress = async e => {
@@ -87,59 +159,23 @@
     if (["input", "textarea"].indexOf(activeTag) !== -1 && e.key !== "Escape") {
       return
     }
-    const component = get(selectedComponent)
-    try {
-      if (e.ctrlKey || e.metaKey) {
-        if (e.key === "ArrowUp") {
-          e.preventDefault()
-          await store.actions.components.moveUp(component)
-        } else if (e.key === "ArrowDown") {
-          e.preventDefault()
-          await store.actions.components.moveDown(component)
-        } else if (e.key === "c") {
-          e.preventDefault()
-          await store.actions.components.copy(component, false)
-        } else if (e.key === "x") {
-          e.preventDefault()
-          store.actions.components.copy(component, true)
-        } else if (e.key === "v") {
-          e.preventDefault()
-          await store.actions.components.paste(component, "inside")
-        } else if (e.key === "d") {
-          e.preventDefault()
-          await store.actions.components.copy(component)
-          await store.actions.components.paste(component, "below")
-        } else if (e.key === "Enter") {
-          e.preventDefault()
-          $goto("./new")
-        }
-      } else if (e.key === "Backspace" || e.key === "Delete") {
-        // Don't show confirmation for the screen itself
-        if (component._id === get(selectedScreen).props._id) {
-          return
-        }
-        e.preventDefault()
-        confirmDeleteDialog.show()
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault()
-        await store.actions.components.selectPrevious()
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault()
-        await store.actions.components.selectNext()
-      } else if (e.key === "Escape" && $isActive("./new")) {
-        e.preventDefault()
-        $goto("./")
-      }
-    } catch (error) {
-      console.log(error)
-      notifications.error("Error handling key press")
-    }
+    // Key events are always for the selected component
+    return handleKeyAction($selectedComponent, e.key, e.ctrlKey || e.metaKey)
+  }
+
+  const handleComponentMenu = async e => {
+    // Menu events can be for any component
+    const { id, key, ctrlKey } = e.detail
+    const component = findComponent($selectedScreen.props, id)
+    return await handleKeyAction(component, key, ctrlKey)
   }
 
   onMount(() => {
     document.addEventListener("keydown", handleKeyPress)
+    document.addEventListener("component-menu", handleComponentMenu)
     return () => {
       document.removeEventListener("keydown", handleKeyPress)
+      document.removeEventListener("component-menu", handleComponentMenu)
     }
   })
 </script>
@@ -192,9 +228,16 @@
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Deletion"
-  body={`Are you sure you want to delete "${$selectedComponent?._instanceName}"?`}
+  body={`Are you sure you want to delete "${componentToDelete?._instanceName}"?`}
   okText="Delete Component"
-  onOk={deleteComponent}
+  onOk={() => store.actions.components.delete(componentToDelete)}
+/>
+<ConfirmDialog
+  bind:this={confirmEjectDialog}
+  title="Eject block"
+  body={`Ejecting a block breaks it down into multiple components. Are you sure you want to eject "${componentToEject?._instanceName}"?`}
+  onOk={() => store.actions.components.requestEjectBlock(componentToEject?._id)}
+  okText="Eject block"
 />
 
 <style>

From 412ee0b35f115ec87f45244930f6afecbfdb504f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Aug 2022 13:23:12 +0100
Subject: [PATCH 2/5] Tidy up component list panel monolith

---
 .../src/components/common/NavItem.svelte      |   2 +
 .../navigation/ComponentKeyHandler.svelte     | 131 ++++++++++++
 .../navigation/ComponentListPanel.svelte      | 202 ++----------------
 .../navigation/ComponentScrollWrapper.svelte  |  66 ++++++
 .../settings/ComponentSettingsSection.svelte  |  12 --
 5 files changed, 211 insertions(+), 202 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index b319560ddd..1fd43e2c70 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -16,6 +16,7 @@
   export let scrollable = false
   export let highlighted = false
   export let rightAlignIcon = false
+  export let id
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -58,6 +59,7 @@
   on:click={onClick}
   ondragover="return false"
   ondragenter="return false"
+  {id}
 >
   <div class="nav-item-content" bind:this={contentRef}>
     {#if withArrow}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
new file mode 100644
index 0000000000..004db799d0
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
@@ -0,0 +1,131 @@
+<script>
+  import { onMount } from "svelte"
+  import { selectedComponent, selectedScreen, store } from "builderStore"
+  import { findComponent } from "builderStore/componentUtils"
+  import { goto, isActive } from "@roxi/routify"
+  import { notifications } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  let confirmDeleteDialog
+  let confirmEjectDialog
+  let componentToDelete
+  let componentToEject
+
+  const keyHandlers = {
+    ["^ArrowUp"]: async component => {
+      await store.actions.components.moveUp(component)
+    },
+    ["^ArrowDown"]: async component => {
+      await store.actions.components.moveDown(component)
+    },
+    ["^c"]: component => {
+      store.actions.components.copy(component, false)
+    },
+    ["^x"]: component => {
+      store.actions.components.copy(component, true)
+    },
+    ["^v"]: async component => {
+      await store.actions.components.paste(component, "inside")
+    },
+    ["^d"]: async component => {
+      store.actions.components.copy(component)
+      await store.actions.components.paste(component, "below")
+    },
+    ["^e"]: component => {
+      componentToEject = component
+      confirmEjectDialog.show()
+    },
+    ["^Enter"]: () => {
+      $goto("./new")
+    },
+    ["Delete"]: component => {
+      // Don't show confirmation for the screen itself
+      if (component?._id === $selectedScreen.props._id) {
+        return false
+      }
+      componentToDelete = component
+      confirmDeleteDialog.show()
+    },
+    ["ArrowUp"]: () => {
+      store.actions.components.selectPrevious()
+    },
+    ["ArrowDown"]: () => {
+      store.actions.components.selectNext()
+    },
+    ["Escape"]: () => {
+      if (!$isActive("/new")) {
+        return false
+      }
+      $goto("./")
+    },
+  }
+
+  const handleKeyAction = async (component, key, ctrlKey = false) => {
+    if (!component || !key) {
+      return false
+    }
+    try {
+      // Delete and backspace are the same
+      if (key === "Backspace") {
+        key = "Delete"
+      }
+      // Prefix key with a caret for ctrl modifier
+      if (ctrlKey) {
+        key = "^" + key
+      }
+      const handler = keyHandlers[key]
+      if (!handler) {
+        return false
+      }
+      return handler(component)
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error handling key press")
+    }
+  }
+
+  const handleKeyPress = async e => {
+    // Ignore repeating events
+    if (e.repeat) {
+      return
+    }
+    // Ignore events when typing
+    const activeTag = document.activeElement?.tagName.toLowerCase()
+    if (["input", "textarea"].indexOf(activeTag) !== -1 && e.key !== "Escape") {
+      return
+    }
+    // Key events are always for the selected component
+    return handleKeyAction($selectedComponent, e.key, e.ctrlKey || e.metaKey)
+  }
+
+  const handleComponentMenu = async e => {
+    // Menu events can be for any component
+    const { id, key, ctrlKey } = e.detail
+    const component = findComponent($selectedScreen.props, id)
+    return await handleKeyAction(component, key, ctrlKey)
+  }
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKeyPress)
+    document.addEventListener("component-menu", handleComponentMenu)
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress)
+      document.removeEventListener("component-menu", handleComponentMenu)
+    }
+  })
+</script>
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  body={`Are you sure you want to delete "${componentToDelete?._instanceName}"?`}
+  okText="Delete Component"
+  onOk={() => store.actions.components.delete(componentToDelete)}
+/>
+<ConfirmDialog
+  bind:this={confirmEjectDialog}
+  title="Eject block"
+  body={`Ejecting a block breaks it down into multiple components. Are you sure you want to eject "${componentToEject?._instanceName}"?`}
+  onOk={() => store.actions.components.requestEjectBlock(componentToEject?._id)}
+  okText="Eject block"
+/>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 86b71b9785..71d0b9ae52 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -2,119 +2,15 @@
   import Panel from "components/design/Panel.svelte"
   import ComponentTree from "./ComponentTree.svelte"
   import { dndStore } from "./dndStore.js"
-  import { goto, isActive } from "@roxi/routify"
-  import { store, selectedScreen, selectedComponent } from "builderStore"
+  import { goto } from "@roxi/routify"
+  import { store, selectedScreen } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
-  import { setContext, onMount } from "svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { DropPosition } from "./dndStore"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { notifications, Button } from "@budibase/bbui"
-  import { findComponent } from "builderStore/componentUtils"
-
-  let scrollRef
-  let confirmDeleteDialog
-  let confirmEjectDialog
-  let componentToDelete
-  let componentToEject
-
-  const keyHandlers = {
-    ["^ArrowUp"]: async component => {
-      await store.actions.components.moveUp(component)
-    },
-    ["^ArrowDown"]: async component => {
-      await store.actions.components.moveDown(component)
-    },
-    ["^c"]: component => {
-      store.actions.components.copy(component, false)
-    },
-    ["^x"]: component => {
-      store.actions.components.copy(component, true)
-    },
-    ["^v"]: async component => {
-      await store.actions.components.paste(component, "inside")
-    },
-    ["^d"]: async component => {
-      store.actions.components.copy(component)
-      await store.actions.components.paste(component, "below")
-    },
-    ["^e"]: component => {
-      componentToEject = component
-      confirmEjectDialog.show()
-    },
-    ["^Enter"]: () => {
-      $goto("./new")
-    },
-    ["Delete"]: component => {
-      // Don't show confirmation for the screen itself
-      if (component?._id === $selectedScreen.props._id) {
-        return false
-      }
-      componentToDelete = component
-      confirmDeleteDialog.show()
-    },
-    ["ArrowUp"]: () => {
-      store.actions.components.selectPrevious()
-    },
-    ["ArrowDown"]: () => {
-      store.actions.components.selectNext()
-    },
-    ["Escape"]: () => {
-      if (!$isActive("/new")) {
-        return false
-      }
-      $goto("./")
-    },
-  }
-
-  const scrollTo = bounds => {
-    if (!bounds) {
-      return
-    }
-    const sidebarWidth = 259
-    const navItemHeight = 32
-    const { scrollLeft, scrollTop, offsetHeight } = scrollRef
-    let scrollBounds = scrollRef.getBoundingClientRect()
-    let newOffsets = {}
-
-    // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollLeft - 36
-    if (offsetX > sidebarWidth) {
-      newOffsets.left = offsetX - sidebarWidth
-    } else {
-      newOffsets.left = 0
-    }
-    if (newOffsets.left === scrollLeft) {
-      delete newOffsets.left
-    }
-
-    // Calculate top offset
-    const offsetY = bounds.top - scrollBounds?.top + scrollTop
-    if (offsetY > scrollTop + offsetHeight - 2 * navItemHeight) {
-      newOffsets.top = offsetY - offsetHeight + 2 * navItemHeight
-    } else if (offsetY < scrollTop + navItemHeight) {
-      newOffsets.top = offsetY - navItemHeight
-    } else {
-      delete newOffsets.top
-    }
-
-    // Skip if offset is unchanged
-    if (newOffsets.left == null && newOffsets.top == null) {
-      return
-    }
-
-    // Smoothly scroll to the offset
-    scrollRef.scroll({
-      ...newOffsets,
-      behavior: "smooth",
-    })
-  }
-
-  // Set scroll context so components can invoke scrolling when selected
-  setContext("scroll", {
-    scrollTo,
-  })
+  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
+  import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
 
   const onDrop = async () => {
     try {
@@ -124,74 +20,15 @@
       notifications.error("Error saving component")
     }
   }
-
-  const handleKeyAction = async (component, key, ctrlKey = false) => {
-    if (!component || !key) {
-      return false
-    }
-    try {
-      // Delete and backspace are the same
-      if (key === "Backspace") {
-        key = "Delete"
-      }
-      // Prefix key with a caret for ctrl modifier
-      if (ctrlKey) {
-        key = "^" + key
-      }
-      const handler = keyHandlers[key]
-      if (!handler) {
-        return false
-      }
-      return handler(component)
-    } catch (error) {
-      console.log(error)
-      notifications.error("Error handling key press")
-    }
-  }
-
-  const handleKeyPress = async e => {
-    // Ignore repeating events
-    if (e.repeat) {
-      return
-    }
-    // Ignore events when typing
-    const activeTag = document.activeElement?.tagName.toLowerCase()
-    if (["input", "textarea"].indexOf(activeTag) !== -1 && e.key !== "Escape") {
-      return
-    }
-    // Key events are always for the selected component
-    return handleKeyAction($selectedComponent, e.key, e.ctrlKey || e.metaKey)
-  }
-
-  const handleComponentMenu = async e => {
-    // Menu events can be for any component
-    const { id, key, ctrlKey } = e.detail
-    const component = findComponent($selectedScreen.props, id)
-    return await handleKeyAction(component, key, ctrlKey)
-  }
-
-  onMount(() => {
-    document.addEventListener("keydown", handleKeyPress)
-    document.addEventListener("component-menu", handleComponentMenu)
-    return () => {
-      document.removeEventListener("keydown", handleKeyPress)
-      document.removeEventListener("component-menu", handleComponentMenu)
-    }
-  })
 </script>
 
 <Panel title="Components" showExpandIcon borderRight>
   <div class="add-component">
     <Button on:click={() => $goto("./new")} cta>Add component</Button>
   </div>
-  <div class="nav-items-container" bind:this={scrollRef}>
+  <ComponentScrollWrapper>
     <ul>
-      <li
-        on:click={() => {
-          $store.selectedComponentId = $selectedScreen?.props._id
-        }}
-        id={`component-${$selectedScreen?.props._id}`}
-      >
+      <li>
         <NavItem
           text="Screen"
           indentLevel={0}
@@ -200,6 +37,10 @@
           scrollable
           icon="WebPage"
           on:drop={onDrop}
+          on:click={() => {
+            $store.selectedComponentId = $selectedScreen?.props._id
+          }}
+          id={`component-${$selectedScreen?.props._id}`}
         >
           <ScreenslotDropdownMenu component={$selectedScreen?.props} />
         </NavItem>
@@ -223,22 +64,9 @@
         {/if}
       </li>
     </ul>
-  </div>
+  </ComponentScrollWrapper>
 </Panel>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  body={`Are you sure you want to delete "${componentToDelete?._instanceName}"?`}
-  okText="Delete Component"
-  onOk={() => store.actions.components.delete(componentToDelete)}
-/>
-<ConfirmDialog
-  bind:this={confirmEjectDialog}
-  title="Eject block"
-  body={`Ejecting a block breaks it down into multiple components. Are you sure you want to eject "${componentToEject?._instanceName}"?`}
-  onOk={() => store.actions.components.requestEjectBlock(componentToEject?._id)}
-  okText="Eject block"
-/>
+<ComponentKeyHandler />
 
 <style>
   .add-component {
@@ -248,12 +76,6 @@
     flex-direction: column;
     align-items: stretch;
   }
-  .nav-items-container {
-    padding: var(--spacing-xl) 0;
-    flex: 1 1 auto;
-    overflow: auto;
-    height: 0;
-  }
   ul {
     list-style: none;
     padding-left: 0;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
new file mode 100644
index 0000000000..65352a5dda
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { setContext } from "svelte"
+
+  let scrollRef
+
+  const scrollTo = bounds => {
+    if (!bounds) {
+      return
+    }
+    const sidebarWidth = 259
+    const navItemHeight = 32
+    const { scrollLeft, scrollTop, offsetHeight } = scrollRef
+    let scrollBounds = scrollRef.getBoundingClientRect()
+    let newOffsets = {}
+
+    // Calculate left offset
+    const offsetX = bounds.left + bounds.width + scrollLeft - 36
+    if (offsetX > sidebarWidth) {
+      newOffsets.left = offsetX - sidebarWidth
+    } else {
+      newOffsets.left = 0
+    }
+    if (newOffsets.left === scrollLeft) {
+      delete newOffsets.left
+    }
+
+    // Calculate top offset
+    const offsetY = bounds.top - scrollBounds?.top + scrollTop
+    if (offsetY > scrollTop + offsetHeight - 2 * navItemHeight) {
+      newOffsets.top = offsetY - offsetHeight + 2 * navItemHeight
+    } else if (offsetY < scrollTop + navItemHeight) {
+      newOffsets.top = offsetY - navItemHeight
+    } else {
+      delete newOffsets.top
+    }
+
+    // Skip if offset is unchanged
+    if (newOffsets.left == null && newOffsets.top == null) {
+      return
+    }
+
+    // Smoothly scroll to the offset
+    scrollRef.scroll({
+      ...newOffsets,
+      behavior: "smooth",
+    })
+  }
+
+  // Set scroll context so components can invoke scrolling when selected
+  setContext("scroll", {
+    scrollTo,
+  })
+</script>
+
+<div bind:this={scrollRef}>
+  <slot />
+</div>
+
+<style>
+  div {
+    padding: var(--spacing-xl) 0;
+    flex: 1 1 auto;
+    overflow: auto;
+    height: 0;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index b4c8e7abad..399ceab4a9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -124,17 +124,5 @@
     {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
       <ResetFieldsButton {componentInstance} />
     {/if}
-    {#if section?.info}
-      <div class="text">
-        {@html section.info}
-      </div>
-    {/if}
   </DetailSummary>
 {/each}
-
-<style>
-  .text {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--grey-6);
-  }
-</style>

From 01cc14a6ee5e9c785504a8c10cb45d4c995d40ba Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Aug 2022 13:32:52 +0100
Subject: [PATCH 3/5] Allow dropping on empty space below tree

---
 .../navigation/ComponentScrollWrapper.svelte   | 18 +++++++++++++++++-
 .../navigation/ComponentTree.svelte            |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
index 65352a5dda..15ba7acecf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
@@ -1,5 +1,7 @@
 <script>
   import { setContext } from "svelte"
+  import { dndStore } from "./dndStore"
+  import { notifications } from "@budibase/bbui"
 
   let scrollRef
 
@@ -50,9 +52,23 @@
   setContext("scroll", {
     scrollTo,
   })
+
+  const onDrop = async () => {
+    try {
+      await dndStore.actions.drop()
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error saving component")
+    }
+  }
 </script>
 
-<div bind:this={scrollRef}>
+<div
+  bind:this={scrollRef}
+  on:drop={onDrop}
+  ondragover="return false"
+  ondragenter="return false"
+>
   <slot />
 </div>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index 6704027f35..31d6eb132b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -68,7 +68,8 @@
     closedNodes = closedNodes
   }
 
-  const onDrop = async () => {
+  const onDrop = async e => {
+    e.stopPropagation()
     try {
       await dndStore.actions.drop()
     } catch (error) {

From bae76a5d5cea69042a3954fb1feb0a2ec9f7fabd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Sep 2022 13:14:25 +0100
Subject: [PATCH 4/5] Revert some cherry pick changes

---
 .../settings/ComponentSettingsSection.svelte         | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index 399ceab4a9..b4c8e7abad 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -124,5 +124,17 @@
     {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
       <ResetFieldsButton {componentInstance} />
     {/if}
+    {#if section?.info}
+      <div class="text">
+        {@html section.info}
+      </div>
+    {/if}
   </DetailSummary>
 {/each}
+
+<style>
+  .text {
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    color: var(--grey-6);
+  }
+</style>

From d45cfc356426b0446b24bdc76b57b1d9f63a11c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Sep 2022 13:59:55 +0100
Subject: [PATCH 5/5] Remove lingering mentions of block ejection

---
 .../navigation/ComponentKeyHandler.svelte           | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
index 004db799d0..467d9a5a2f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
@@ -7,9 +7,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   let confirmDeleteDialog
-  let confirmEjectDialog
   let componentToDelete
-  let componentToEject
 
   const keyHandlers = {
     ["^ArrowUp"]: async component => {
@@ -31,10 +29,6 @@
       store.actions.components.copy(component)
       await store.actions.components.paste(component, "below")
     },
-    ["^e"]: component => {
-      componentToEject = component
-      confirmEjectDialog.show()
-    },
     ["^Enter"]: () => {
       $goto("./new")
     },
@@ -122,10 +116,3 @@
   okText="Delete Component"
   onOk={() => store.actions.components.delete(componentToDelete)}
 />
-<ConfirmDialog
-  bind:this={confirmEjectDialog}
-  title="Eject block"
-  body={`Ejecting a block breaks it down into multiple components. Are you sure you want to eject "${componentToEject?._instanceName}"?`}
-  onOk={() => store.actions.components.requestEjectBlock(componentToEject?._id)}
-  okText="Eject block"
-/>