From 6886a312c5dbfa07905ca3124d0a23d610dcfe10 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 14 Aug 2023 13:31:12 +0100
Subject: [PATCH 01/50] New Left Panel for Design

---
 packages/builder/src/builderStore/index.js    |   6 +
 .../src/builderStore/store/frontend.js        |   6 +-
 .../NewScreen}/CreateScreenModal.svelte       |   0
 .../design/NewScreen}/DatasourceModal.svelte  |   0
 .../design/NewScreen}/ScreenRoleModal.svelte  |   0
 .../design/NewScreen}/blank.png               | Bin
 .../components/design/NewScreen/index.svelte  | 105 +++++++
 .../design/NewScreen}/table.png               | Bin
 .../design/[screenId]/_fallback.svelte        |   5 -
 .../design/[screenId]/_layout.svelte          |  86 +-----
 .../_components/AppPanel.svelte               |  46 +---
 .../_components/AppPreview.svelte             |  55 +---
 .../ComponentInfoSection.svelte               |   0
 .../ComponentSettingsPanel.svelte             |   0
 .../ComponentSettingsSection.svelte           |   0
 .../ConditionalUIDrawer.svelte                |   0
 .../ConditionalUISection.svelte               |   0
 .../CustomStylesSection.svelte                |   0
 .../DesignSection.svelte                      |   0
 .../StyleSection.svelte                       |   0
 .../componentStyles.js                        |   0
 .../_components/DevicePreviewSelect.svelte    |   0
 .../Components}/ComponentDropdownMenu.svelte  |   0
 .../Components}/ComponentKeyHandler.svelte    |  17 +-
 .../Components}/ComponentScrollWrapper.svelte |  19 +-
 .../Components}/ComponentTree.svelte          |   0
 .../Components}/DNDPositionIndicator.svelte   |   0
 .../Components}/ScreenslotDropdownMenu.svelte |   0
 .../Components}/dndStore.js                   |   0
 .../LeftPanel/Components/index.svelte         | 156 +++++++++++
 .../LeftPanel/Screens/DropdownMenu.svelte}    |   0
 .../LeftPanel/Screens}/RoleIndicator.svelte   |   8 +-
 .../LeftPanel/Screens/index.svelte            | 233 ++++++++++++++++
 .../_components/LeftPanel/index.svelte        |  24 ++
 .../_components/Navigation/index.svelte       | 260 ++++++++++++++++++
 .../_components/Screen/SettingsPanel.svelte}  |   0
 .../navigation/ComponentListPanel.svelte      |  90 ------
 .../components/[componentId]/_layout.svelte   |  56 +++-
 .../design/[screenId]/components/index.svelte |  12 +-
 .../design/[screenId]/index.svelte            |   5 +-
 .../_components/LayoutDropdownMenu.svelte     |  41 ---
 .../_components/LayoutListPanel.svelte        |  29 --
 .../_components/LayoutSettingsPanel.svelte    |  53 ----
 .../layouts/[layoutId]/_layout.svelte         |  20 --
 .../layouts/[layoutId]/index.svelte           |   7 -
 .../design/[screenId]/layouts/_layout.svelte  |  12 -
 .../design/[screenId]/layouts/index.svelte    |  12 -
 .../NavigationInfoPanel/CustomizePane.svelte  | 176 ------------
 .../NavigationInfoPanel/SettingsPane.svelte   |  31 ---
 .../NavigationInfoPanel/index.svelte          |  10 -
 .../_components/NavigationLinksDrawer.svelte  | 130 ---------
 .../_components/NavigationLinksEditor.svelte  |  34 ---
 .../NavigationSettingsPanel.svelte            | 110 --------
 .../design/[screenId]/navigation/index.svelte |   7 -
 .../_components/ScreenListPanel.svelte        |  75 -----
 .../design/[screenId]/screens/index.svelte    |  12 -
 .../theme/_components/AppThemeSelect.svelte   |  64 -----
 .../_components/ButtonRoundnessSelect.svelte  |  38 ---
 .../theme/_components/ThemeInfoPanel.svelte   |  12 -
 .../_components/ThemeSettingsPanel.svelte     |  55 ----
 .../design/[screenId]/theme/index.svelte      |   7 -
 .../app/[application]/design/index.svelte     |   2 +-
 .../app/[application]/design/new.svelte       | 103 +------
 .../client/src/components/Component.svelte    |  10 +-
 packages/client/src/components/Screen.svelte  |   2 +-
 .../client/src/components/app/Layout.svelte   |  11 +-
 .../src/components/preview/SettingsBar.svelte |   6 +-
 67 files changed, 916 insertions(+), 1342 deletions(-)
 rename packages/builder/src/{pages/builder/app/[application]/design/_components => components/design/NewScreen}/CreateScreenModal.svelte (100%)
 rename packages/builder/src/{pages/builder/app/[application]/design/_components => components/design/NewScreen}/DatasourceModal.svelte (100%)
 rename packages/builder/src/{pages/builder/app/[application]/design/_components => components/design/NewScreen}/ScreenRoleModal.svelte (100%)
 rename packages/builder/src/{pages/builder/app/[application]/design => components/design/NewScreen}/blank.png (100%)
 create mode 100644 packages/builder/src/components/design/NewScreen/index.svelte
 rename packages/builder/src/{pages/builder/app/[application]/design => components/design/NewScreen}/table.png (100%)
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{ => components/[componentId]}/_components/AppPanel.svelte (52%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{ => components/[componentId]}/_components/AppPreview.svelte (86%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/ComponentInfoSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/ComponentSettingsPanel.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/ComponentSettingsSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/ConditionalUIDrawer.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/ConditionalUISection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/CustomStylesSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/DesignSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/StyleSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{settings => Component}/componentStyles.js (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{ => components/[componentId]}/_components/DevicePreviewSelect.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{navigation => LeftPanel/Components}/ComponentDropdownMenu.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{navigation => LeftPanel/Components}/ComponentKeyHandler.svelte (91%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{navigation => LeftPanel/Components}/ComponentScrollWrapper.svelte (84%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{navigation => LeftPanel/Components}/ComponentTree.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{navigation => LeftPanel/Components}/DNDPositionIndicator.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{navigation => LeftPanel/Components}/ScreenslotDropdownMenu.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/{navigation => LeftPanel/Components}/dndStore.js (100%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{screens/_components/ScreenDropdownMenu.svelte => components/[componentId]/_components/LeftPanel/Screens/DropdownMenu.svelte} (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{screens/_components => components/[componentId]/_components/LeftPanel/Screens}/RoleIndicator.svelte (87%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{screens/_components/ScreenSettingsPanel.svelte => components/[componentId]/_components/Screen/SettingsPanel.svelte} (100%)
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte

diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 2ca8057b48..3cd387fe95 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -61,6 +61,12 @@ export const selectedLayout = derived(store, $store => {
 export const selectedComponent = derived(
   [store, selectedScreen],
   ([$store, $selectedScreen]) => {
+    if (
+      $selectedScreen &&
+      ["navigation", "screen"].includes($store.selectedComponentId)
+    ) {
+      return findComponent($selectedScreen?.props, $selectedScreen?.props._id)
+    }
     if (!$selectedScreen || !$store.selectedComponentId) {
       return null
     }
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index f312a58e97..038fb661b9 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -769,9 +769,13 @@ export const getFrontendStore = () => {
         else {
           await store.actions.screens.patch(screen => {
             // Find the selected component
+            let selectedComponentId = state.selectedComponentId
+            if (["navigation", "screen"].includes(selectedComponentId)) {
+              selectedComponentId = screen?.props._id
+            }
             const currentComponent = findComponent(
               screen.props,
-              state.selectedComponentId
+              selectedComponentId
             )
             if (!currentComponent) {
               return false
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte b/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
rename to packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte b/packages/builder/src/components/design/NewScreen/DatasourceModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte
rename to packages/builder/src/components/design/NewScreen/DatasourceModal.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte b/packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte
rename to packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/blank.png b/packages/builder/src/components/design/NewScreen/blank.png
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/blank.png
rename to packages/builder/src/components/design/NewScreen/blank.png
diff --git a/packages/builder/src/components/design/NewScreen/index.svelte b/packages/builder/src/components/design/NewScreen/index.svelte
new file mode 100644
index 0000000000..b504940ca7
--- /dev/null
+++ b/packages/builder/src/components/design/NewScreen/index.svelte
@@ -0,0 +1,105 @@
+<script>
+  import { Body } from "@budibase/bbui"
+  import CreationPage from "components/common/CreationPage.svelte"
+  import blankImage from "./blank.png"
+  import tableImage from "./table.png"
+  import CreateScreenModal from "./CreateScreenModal.svelte"
+  import { store } from "builderStore"
+
+  export let onClose = null
+
+  let createScreenModal
+
+  $: hasScreens = $store.screens?.length
+</script>
+
+<div class="page">
+  <CreationPage
+    showClose={!!onClose}
+    {onClose}
+    heading={hasScreens ? "Create new screen" : "Create your first screen"}
+  >
+    <div class="subHeading">
+      <Body>Start from scratch or create screens from your data</Body>
+    </div>
+
+    <div class="cards">
+      <div class="card" on:click={() => createScreenModal.show("blank")}>
+        <div class="image">
+          <img alt="" src={blankImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Blank screen</Body>
+          <Body size="XS">Add an empty blank screen</Body>
+        </div>
+      </div>
+
+      <div class="card" on:click={() => createScreenModal.show("table")}>
+        <div class="image">
+          <img alt="" src={tableImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Table</Body>
+          <Body size="XS">View, edit and delete rows on a table</Body>
+        </div>
+      </div>
+    </div>
+  </CreationPage>
+</div>
+
+<CreateScreenModal bind:this={createScreenModal} />
+
+<style>
+  .page {
+    padding: 28px 40px 40px 40px;
+  }
+
+  .subHeading :global(p) {
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 36px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  .card {
+    max-width: 235px;
+    transition: filter 150ms;
+  }
+
+  .card:hover {
+    filter: brightness(1.1);
+    cursor: pointer;
+  }
+
+  .image {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    max-height: 127px;
+    overflow: hidden;
+  }
+
+  .image img {
+    width: 100%;
+  }
+
+  .text {
+    border: 1px solid var(--grey-4);
+    border-radius: 0 0 4px 4px;
+    padding: 8px 16px 13px 16px;
+  }
+
+  .text :global(p:nth-child(1)) {
+    margin-bottom: 6px;
+  }
+
+  .text :global(p:nth-child(2)) {
+    color: var(--grey-6);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/table.png b/packages/builder/src/components/design/NewScreen/table.png
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/table.png
rename to packages/builder/src/components/design/NewScreen/table.png
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
deleted file mode 100644
index 00165e4ee9..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import { redirect } from "@roxi/routify"
-
-  $redirect("../screens")
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 8bc0dcc3e5..77510951b1 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -1,11 +1,8 @@
 <script>
-  import { IconSideNav, IconSideNavItem } from "@budibase/bbui"
   import * as routify from "@roxi/routify"
-  import AppPanel from "./_components/AppPanel.svelte"
   import { syncURLToState } from "helpers/urlStateSync"
-  import { store, selectedScreen } from "builderStore"
+  import { store } from "builderStore"
   import { onDestroy } from "svelte"
-  const { isActive, goto } = routify
 
   $: screenId = $store.selectedScreenId
   $: store.actions.websocket.selectResource(screenId)
@@ -23,83 +20,4 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="design">
-  <div class="icon-nav">
-    <IconSideNav>
-      <IconSideNavItem
-        icon="WebPage"
-        tooltip="Screens"
-        active={$isActive("./screens")}
-        on:click={() => $goto("./screens")}
-      />
-      <IconSideNavItem
-        icon="ViewList"
-        tooltip="Components"
-        active={$isActive("./components")}
-        on:click={() => $goto("./components")}
-      />
-      <IconSideNavItem
-        icon="Brush"
-        tooltip="Theme"
-        active={$isActive("./theme")}
-        on:click={() => $goto("./theme")}
-      />
-      <IconSideNavItem
-        icon="Link"
-        tooltip="Navigation"
-        active={$isActive("./navigation")}
-        on:click={() => $goto("./navigation")}
-      />
-      {#if $store.layouts?.length}
-        <IconSideNavItem
-          icon="Experience"
-          tooltip="Layouts"
-          active={$isActive("./layouts")}
-          on:click={() => $goto("./layouts")}
-        />
-      {/if}
-    </IconSideNav>
-  </div>
-
-  <div class="content">
-    {#if $selectedScreen}
-      <slot />
-      <AppPanel />
-    {/if}
-  </div>
-</div>
-
-<style>
-  .design {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    height: 0;
-  }
-  .icon-nav {
-    background: var(--background);
-    border-right: var(--border-light);
-  }
-  .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    flex: 1 1 auto;
-  }
-  /*
-    This is hacky, yes, but it's the only way to prevent routify from
-    remounting the iframe on route changes.
-  */
-  .content :global(> *:last-child) {
-    order: 1;
-  }
-  .content :global(> *:first-child) {
-    order: 0;
-  }
-  .content :global(> *:nth-child(2)) {
-    order: 2;
-  }
-</style>
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte
similarity index 52%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte
index 785b221239..379cebca37 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte
@@ -1,9 +1,7 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { store, sortedScreens, screenHistoryStore } from "builderStore"
-  import { Select } from "@budibase/bbui"
-  import { RoleUtils } from "@budibase/frontend-core"
+  import { store, screenHistoryStore } from "builderStore"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
   import { isActive } from "@roxi/routify"
 </script>
@@ -11,22 +9,11 @@
 <div class="app-panel">
   <div class="header">
     <div class="header-left">
-      <Select
-        placeholder={null}
-        options={$sortedScreens}
-        getOptionLabel={x => x.routing.route}
-        getOptionValue={x => x._id}
-        getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
-        value={$store.selectedScreenId}
-        on:change={e => store.actions.screens.select(e.detail)}
-        quiet
-        autoWidth
-      />
-    </div>
-    <div class="header-right">
       {#if $isActive("./screens") || $isActive("./components")}
         <UndoRedoControl store={screenHistoryStore} />
       {/if}
+    </div>
+    <div class="header-right">
       {#if $store.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
@@ -47,37 +34,24 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-m);
-    padding: var(--spacing-l) var(--spacing-xl);
+    padding: 9px var(--spacing-m);
   }
   .header {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-l);
-    margin: 0 2px;
-    z-index: 1;
+    margin-bottom: 9px;
+  }
+
+  .header-left :global(div) {
+    border-right: none;
   }
-  .header-left,
   .header-right {
+    margin-left: auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xl);
   }
-  .header-left {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  .header-left :global(> *) {
-    max-width: 100%;
-  }
-  .header-left :global(.spectrum-Picker) {
-    font-weight: 600;
-    color: var(--spectrum-global-color-gray-900);
-  }
   .content {
     flex: 1 1 auto;
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPreview.svelte
similarity index 86%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPreview.svelte
index 23b6ff5586..95a6418afa 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPreview.svelte
@@ -1,13 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import {
-    store,
-    selectedComponent,
-    selectedScreen,
-    selectedLayout,
-    currentAsset,
-  } from "builderStore"
+  import { store, selectedScreen, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -20,12 +14,10 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
   import { isActive, goto } from "@roxi/routify"
-  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
 
   let iframe
   let layout
   let screen
-  let selectedComponentId
   let confirmDeleteDialog
   let idToDelete
   let loading = true
@@ -39,36 +31,11 @@
     BUDIBASE: "type",
   }
 
-  const placeholderScreen = new Screen()
-    .name("Screen Placeholder")
-    .route("/")
-    .component("@budibase/standard-components/screenslot")
-    .instanceName("Content Placeholder")
-    .normalStyle({ flex: "1 1 auto" })
-    .json()
-
   // Extract data to pass to the iframe
-  $: {
-    // If viewing legacy layouts, always show the custom layout
-    if ($isActive("./layouts")) {
-      screen = placeholderScreen
-      layout = $selectedLayout
-    } else {
-      screen = $selectedScreen
-      layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
-    }
-  }
+  $: screen = $selectedScreen
 
   // Determine selected component ID
-  $: {
-    if ($isActive("./components")) {
-      selectedComponentId = $store.selectedComponentId
-    } else if ($isActive("./navigation")) {
-      selectedComponentId = "navigation"
-    } else {
-      selectedComponentId = null
-    }
-  }
+  $: selectedComponentId = $store.selectedComponentId
 
   $: previewData = {
     appId: $store.appId,
@@ -98,9 +65,7 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(
-    `./components/${$selectedComponent?._id}/new`
-  )
+  $: isAddingComponent = $isActive(`./new`)
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -152,9 +117,6 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       $store.selectedComponentId = data.id
-      if (!$isActive("./components")) {
-        $goto("./components")
-      }
     } else if (type === "update-prop") {
       await store.actions.components.updateSetting(data.prop, data.value)
     } else if (type === "update-styles") {
@@ -195,9 +157,7 @@
         await store.actions.components.paste(destination, data.mode)
       }
     } else if (type === "click-nav") {
-      if (!$isActive("./navigation")) {
-        $goto("./navigation")
-      }
+      $store.selectedComponentId = "navigation"
     } else if (type === "request-add-component") {
       toggleAddComponent()
     } else if (type === "highlight-setting") {
@@ -248,10 +208,9 @@
 
   const toggleAddComponent = () => {
     if (isAddingComponent) {
-      $goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
+      $goto(`../`)
     } else {
-      const id = $selectedComponent?._id || $selectedScreen?.props?._id
-      $goto(`../${$selectedScreen._id}/components/${id}/new`)
+      $goto(`./new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentInfoSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentInfoSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsPanel.svelte
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/Component/ComponentSettingsSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUIDrawer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUIDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUISection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUISection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/CustomStylesSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/CustomStylesSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/DesignSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/DesignSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/StyleSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/StyleSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/componentStyles.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/componentStyles.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/DevicePreviewSelect.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/DevicePreviewSelect.svelte
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/LeftPanel/Components/ComponentDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentDropdownMenu.svelte
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/LeftPanel/Components/ComponentKeyHandler.svelte
similarity index 91%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentKeyHandler.svelte
index 4813757727..61419dd457 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/LeftPanel/Components/ComponentKeyHandler.svelte
@@ -5,7 +5,6 @@
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { isBuilderInputFocused } from "helpers"
 
   let confirmDeleteDialog
   let confirmEjectDialog
@@ -55,6 +54,9 @@
     },
     ["Escape"]: () => {
       if ($isActive("./new")) {
+        event.preventDefault()
+        event.stopPropagation()
+
         $goto("./")
       }
     },
@@ -85,10 +87,13 @@
       const handler = keyHandlers[key]
       if (!handler) {
         return false
-      } else if (event) {
+      }
+
+      if (event && key !== "Escape") {
         event.preventDefault()
         event.stopPropagation()
       }
+
       return await handler(component)
     } catch (error) {
       notifications.error(error || "Error handling key press")
@@ -101,7 +106,13 @@
       return
     }
     // Ignore events when typing
-    if (isBuilderInputFocused(e)) {
+    const activeTag = document.activeElement?.tagName.toLowerCase()
+    const inCodeEditor =
+      document.activeElement?.classList?.contains("cm-content")
+    if (
+      (inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
+      e.key !== "Escape"
+    ) {
       return
     }
     // Key events are always for the selected component
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/LeftPanel/Components/ComponentScrollWrapper.svelte
similarity index 84%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentScrollWrapper.svelte
index 15ba7acecf..226aff88ab 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/LeftPanel/Components/ComponentScrollWrapper.svelte
@@ -9,7 +9,7 @@
     if (!bounds) {
       return
     }
-    const sidebarWidth = 259
+    const sidebarWidth = 310
     const navItemHeight = 32
     const { scrollLeft, scrollTop, offsetHeight } = scrollRef
     let scrollBounds = scrollRef.getBoundingClientRect()
@@ -64,6 +64,7 @@
 </script>
 
 <div
+  on:scroll
   bind:this={scrollRef}
   on:drop={onDrop}
   ondragover="return false"
@@ -74,9 +75,23 @@
 
 <style>
   div {
-    padding: var(--spacing-xl) 0;
     flex: 1 1 auto;
     overflow: auto;
     height: 0;
   }
+
+  div::-webkit-scrollbar-track {
+    background: var(--background-alt);
+  }
+
+  div::-webkit-scrollbar {
+    width: 18px;
+  }
+
+  div::-webkit-scrollbar-thumb {
+    background-color: var(--grey-3);
+    border-radius: 20px;
+    border: 1px solid var(--background-alt);
+    border-width: 5px 5px;
+  }
 </style>
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/LeftPanel/Components/ComponentTree.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/DNDPositionIndicator.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/DNDPositionIndicator.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ScreenslotDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ScreenslotDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/dndStore.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/dndStore.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
new file mode 100644
index 0000000000..502ded853e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
@@ -0,0 +1,156 @@
+<script>
+  import { notifications, Icon, Body } from "@budibase/bbui"
+  import { isActive, goto } from "@roxi/routify"
+  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import ComponentTree from "./ComponentTree.svelte"
+  import { dndStore } from "./dndStore.js"
+  import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
+  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
+  import { DropPosition } from "./dndStore"
+  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
+  import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
+
+  let scrolling = false
+
+  const toNewComponentRoute = () => {
+    if ($isActive("./new")) {
+      return
+    } else {
+      $goto(`./new`)
+    }
+  }
+
+  const onDrop = async () => {
+    try {
+      await dndStore.actions.drop()
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error saving component")
+    }
+  }
+
+  const handleScroll = e => {
+    if (e.target.scrollTop === 0) {
+      scrolling = false
+    } else {
+      scrolling = true
+    }
+  }
+</script>
+
+<div class="components">
+  <div class="header" class:headerScrolling={scrolling}>
+    <Body size="S">Components</Body>
+    <div on:click={toNewComponentRoute} class="addButton">
+      <Icon name="Add" />
+    </div>
+  </div>
+  <div class="list-panel">
+    <ComponentScrollWrapper on:scroll={handleScroll}>
+      <ul>
+        <li>
+          <NavItem
+            text="Screen"
+            indentLevel={0}
+            selected={$store.selectedComponentId === "screen"}
+            opened
+            scrollable
+            icon="WebPage"
+            on:drop={onDrop}
+            on:click={() => {
+              $store.selectedComponentId = "screen"
+            }}
+            id={`component-screen`}
+            selectedBy={$userSelectedResourceMap["screen"]}
+          >
+            <ScreenslotDropdownMenu component={$selectedScreen?.props} />
+          </NavItem>
+          <NavItem
+            text="Navigation"
+            indentLevel={0}
+            selected={$store.selectedComponentId === "navigation"}
+            opened
+            scrollable
+            icon={$selectedScreen.showNavigation
+              ? "Visibility"
+              : "VisibilityOff"}
+            on:drop={onDrop}
+            on:click={() => {
+              $store.selectedComponentId = "navigation"
+            }}
+            id={`component-nav`}
+            selectedBy={$userSelectedResourceMap["navigation"]}
+          />
+          <ComponentTree
+            level={0}
+            components={$selectedScreen?.props._children}
+          />
+
+          <!-- Show drop indicators for the target and the parent -->
+          {#if $dndStore.dragging && $dndStore.valid}
+            <DNDPositionIndicator
+              component={$dndStore.target}
+              position={$dndStore.dropPosition}
+            />
+            {#if $dndStore.dropPosition !== DropPosition.INSIDE}
+              <DNDPositionIndicator
+                component={$dndStore.targetParent}
+                position={DropPosition.INSIDE}
+              />
+            {/if}
+          {/if}
+        </li>
+      </ul>
+    </ComponentScrollWrapper>
+  </div>
+  <ComponentKeyHandler />
+</div>
+
+<style>
+  .components {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .header {
+    padding: 15px 12px;
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+    transition: border-bottom 300ms;
+  }
+
+  .headerScrolling {
+    border-bottom: 2px solid var(--grey-2);
+  }
+
+  .components :global(.nav-item) {
+    padding-right: 8px !important;
+  }
+
+  .addButton {
+    margin-left: auto;
+    color: var(--ink);
+    cursor: pointer;
+  }
+
+  .list-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    position: relative;
+  }
+  ul,
+  li {
+    min-width: max-content;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/DropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/DropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/RoleIndicator.svelte
similarity index 87%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/RoleIndicator.svelte
index 2555b0b2a2..694abe444a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/RoleIndicator.svelte
@@ -26,7 +26,7 @@
   <StatusLight square {color} />
   {#if showTooltip}
     <div class="tooltip">
-      <Tooltip textWrapping text={tooltip} direction="left" />
+      <Tooltip textWrapping text={tooltip} direction="right" />
     </div>
   {/if}
 </div>
@@ -38,13 +38,11 @@
   .tooltip {
     z-index: 1;
     position: absolute;
-    top: 50%;
-    left: calc(50% - 8px);
-    transform: translateX(-100%) translateY(-50%);
+    bottom: -5px;
+    left: 13px;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    width: 200px;
     pointer-events: none;
   }
   .tooltip :global(.spectrum-Tooltip) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
new file mode 100644
index 0000000000..19c19c49df
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -0,0 +1,233 @@
+<script>
+  import { Icon, Layout, Body } from "@budibase/bbui"
+  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import RoleIndicator from "./RoleIndicator.svelte"
+  import DropdownMenu from "./DropdownMenu.svelte"
+  import NewScreen from "components/design/NewScreen/index.svelte"
+
+  let newScreen = false
+  let search = false
+  let searchValue = ""
+  let searchInput
+  let screensContainer
+  let scrolling = false
+
+  $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
+
+  const openSearch = () => {
+    search = true
+    searchInput.focus()
+    screensContainer.scroll({ top: 0, behavior: "smooth" })
+  }
+
+  const closeSearch = () => {
+    search = false
+    searchValue = ""
+  }
+
+  const getFilteredScreens = (screens, search) => {
+    return screens.filter(screen => {
+      const searchMatch = !search || screen.routing.route.includes(search)
+      return searchMatch
+    })
+  }
+
+  const handleAddButton = () => {
+    if (search) {
+      closeSearch()
+    } else {
+      newScreen = true
+    }
+  }
+
+  const onKeyDown = e => {
+    if (e.key === "Escape") {
+      if (newScreen) {
+        newScreen = false
+      } else {
+        closeSearch()
+      }
+    }
+  }
+
+  const handleScroll = e => {
+    if (e.target.scrollTop === 0) {
+      scrolling = false
+    } else {
+      scrolling = true
+    }
+  }
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+<div class="screens" class:screenSearch={search}>
+  <div class="header" class:headerScrolling={scrolling}>
+    <input
+      readonly={!search}
+      bind:value={searchValue}
+      bind:this={searchInput}
+      class="input"
+      placeholder="Search for screens"
+    />
+    <div class="title" class:hide={search}>
+      <Body size="S">Screens</Body>
+    </div>
+    <div on:click={openSearch} class="searchButton" class:hide={search}>
+      <Icon name="Search" />
+    </div>
+    <div
+      on:click={handleAddButton}
+      class="addButton"
+      class:closeButton={search}
+    >
+      <Icon name="Add" />
+    </div>
+  </div>
+  <div on:scroll={handleScroll} bind:this={screensContainer} class="content">
+    {#each filteredScreens as screen (screen._id)}
+      <NavItem
+        icon={screen.routing.homeScreen ? "Home" : null}
+        indentLevel={0}
+        selected={$store.selectedScreenId === screen._id}
+        text={screen.routing.route}
+        on:click={() => store.actions.screens.select(screen._id)}
+        rightAlignIcon
+        showTooltip
+        selectedBy={$userSelectedResourceMap[screen._id]}
+      >
+        <DropdownMenu screenId={screen._id} />
+        <RoleIndicator slot="icon" roleId={screen.routing.roleId} />
+      </NavItem>
+    {/each}
+  </div>
+  {#if !filteredScreens?.length}
+    <Layout paddingY="" paddingX="L">
+      <Body size="S">
+        There aren't any screens matching the current filters
+      </Body>
+    </Layout>
+  {/if}
+</div>
+
+<div class="newScreen" class:newScreenVisible={newScreen}>
+  <NewScreen onClose={() => (newScreen = false)} />
+</div>
+
+<style>
+  .newScreen {
+    width: 100vw;
+    height: 0;
+    bottom: 0;
+    overflow: hidden;
+    position: absolute;
+    background-color: var(--background);
+    z-index: 2;
+    transition: height 350ms ease-in-out;
+  }
+
+  .newScreenVisible {
+    height: calc(100vh - 58px);
+  }
+  .screens {
+    height: 196px;
+    display: flex;
+    flex-direction: column;
+    transition: height 300ms;
+  }
+
+  .screenSearch {
+    height: 100%;
+  }
+
+  .header {
+    flex-shrink: 0;
+    position: relative;
+    height: 51px;
+    box-sizing: border-box;
+    padding: 0 12px 0 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+    transition: border-bottom 300ms;
+  }
+
+  .headerScrolling {
+    border-bottom: 2px solid var(--grey-2);
+  }
+
+  .input {
+    position: absolute;
+    padding-left: 12px;
+    color: var(--ink);
+    background-color: var(--background-alt);
+    border: none;
+    font-size: var(--spectrum-alias-font-size-default);
+    width: 260px;
+    box-sizing: border-box;
+  }
+
+  .input:focus {
+    outline: none;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+    padding-left: 12px;
+    flex: 1;
+    opacity: 1;
+    transition: opacity 300ms;
+    background-color: var(--background-alt);
+    z-index: 1;
+  }
+
+  .content {
+    overflow-y: scroll;
+    flex-grow: 1;
+  }
+
+  .content::-webkit-scrollbar-track {
+    background: var(--background-alt);
+  }
+
+  .content::-webkit-scrollbar {
+    width: 18px;
+  }
+
+  .content::-webkit-scrollbar-thumb {
+    background-color: var(--grey-3);
+    border-radius: 20px;
+    border: 1px solid var(--background-alt);
+    border-width: 5px 5px;
+  }
+
+  .screens :global(.nav-item) {
+    padding-right: 8px !important;
+  }
+
+  .searchButton {
+    color: var(--ink);
+    cursor: pointer;
+    margin-right: 10px;
+    opacity: 1;
+    transition: opacity 300ms;
+  }
+
+  .hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .addButton {
+    color: var(--ink);
+    cursor: pointer;
+    transition: transform 300ms;
+  }
+
+  .closeButton {
+    transform: rotate(45deg);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
new file mode 100644
index 0000000000..3f521b23c7
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
@@ -0,0 +1,24 @@
+<script>
+  import Screens from "./Screens/index.svelte"
+  import Components from "./Components/index.svelte"
+</script>
+
+<div class="panel">
+  <Screens />
+  <div class="divider" />
+  <Components />
+</div>
+
+<style>
+  .panel {
+    width: 310px;
+    height: 100%;
+    border-right: 1px solid var(--grey-2);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .divider {
+    border-bottom: 1px solid var(--grey-2);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
new file mode 100644
index 0000000000..f442e3a275
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
@@ -0,0 +1,260 @@
+<script>
+  import { get } from "svelte/store"
+  import {
+    Detail,
+    Toggle,
+    Body,
+    Icon,
+    Button,
+    ColorPicker,
+    Input,
+    Label,
+    ActionGroup,
+    ActionButton,
+    Checkbox,
+    notifications,
+    Select,
+  } from "@budibase/bbui"
+  import { selectedScreen, store } from "builderStore"
+  import { DefaultAppTheme } from "constants"
+
+  const updateShowNavigation = async e => {
+    await store.actions.screens.updateSetting(
+      get(selectedScreen),
+      "showNavigation",
+      e.detail
+    )
+  }
+  const update = async (key, value) => {
+    try {
+      let navigation = $store.navigation
+      navigation[key] = value
+      await store.actions.navigation.save(navigation)
+    } catch (error) {
+      notifications.error("Error updating navigation settings")
+    }
+  }
+</script>
+
+<div class="panel">
+  <div class="header">
+    <div class="icon">
+      <Icon
+        name={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
+      />
+    </div>
+    <Body>Navigation</Body>
+  </div>
+  <div class="divider" />
+  <div class="generalSection">
+    <div class="subheading">
+      <Detail>General</Detail>
+    </div>
+    <div class="toggle">
+      <Toggle
+        on:change={updateShowNavigation}
+        value={$selectedScreen.showNavigation}
+      />
+      <Body size="S">Show nav on this screen</Body>
+    </div>
+  </div>
+  <div class="divider" />
+  <div class="customizeSection">
+    <div class="subheading">
+      <Detail>Customize</Detail>
+    </div>
+    <div class="info">
+      <div class="infoHeader">
+        <Icon name="InfoOutline" />
+        <Body size="S">These settings apply to all screens</Body>
+      </div>
+    </div>
+    <div class="configureLinks">
+      <Button cta>Configure Links</Button>
+    </div>
+    <div class="controls">
+      <div class="label">
+        <Label size="M">Position</Label>
+      </div>
+      <ActionGroup quiet>
+        <ActionButton
+          selected={$store.navigation.navigation === "Top"}
+          quiet={$store.navigation.navigation !== "Top"}
+          icon="PaddingTop"
+          on:click={() => update("navigation", "Top")}
+        />
+        <ActionButton
+          selected={$store.navigation.navigation === "Left"}
+          quiet={$store.navigation.navigation !== "Left"}
+          icon="PaddingLeft"
+          on:click={() => update("navigation", "Left")}
+        />
+      </ActionGroup>
+
+      {#if $store.navigation.navigation === "Top"}
+        <div class="label">
+          <Label size="M">Sticky header</Label>
+        </div>
+        <Checkbox
+          value={$store.navigation.sticky}
+          on:change={e => update("sticky", e.detail)}
+        />
+        <div class="label">
+          <Label size="M">Width</Label>
+        </div>
+        <Select
+          options={["Max", "Large", "Medium", "Small"]}
+          plaveholder={null}
+          value={$store.navigation.navWidth}
+          on:change={e => update("navWidth", e.detail)}
+        />
+      {/if}
+      <div class="label">
+        <Label size="M">Show logo</Label>
+      </div>
+      <Checkbox
+        value={!$store.navigation.hideLogo}
+        on:change={e => update("hideLogo", !e.detail)}
+      />
+      {#if !$store.navigation.hideLogo}
+        <div class="label">
+          <Label size="M">Logo URL</Label>
+        </div>
+        <Input
+          value={$store.navigation.logoUrl}
+          on:change={e => update("logoUrl", e.detail)}
+          updateOnChange={false}
+        />
+      {/if}
+      <div class="label">
+        <Label size="M">Show title</Label>
+      </div>
+      <Checkbox
+        value={!$store.navigation.hideTitle}
+        on:change={e => update("hideTitle", !e.detail)}
+      />
+      {#if !$store.navigation.hideTitle}
+        <div class="label">
+          <Label size="M">Title</Label>
+        </div>
+        <Input
+          value={$store.navigation.title}
+          on:change={e => update("title", e.detail)}
+          updateOnChange={false}
+        />
+      {/if}
+      <div class="label">
+        <Label>Background</Label>
+      </div>
+      <ColorPicker
+        spectrumTheme={$store.theme}
+        value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
+        on:change={e => update("navBackground", e.detail)}
+      />
+      <div class="label">
+        <Label>Text</Label>
+      </div>
+      <ColorPicker
+        spectrumTheme={$store.theme}
+        value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
+        on:change={e => update("navTextColor", e.detail)}
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .panel {
+    overflow: hidden;
+    width: 310px;
+    background: var(--background);
+    border-left: 2px solid var(--grey-2);
+  }
+
+  .generalSection {
+    padding: 13px 13px 25px;
+  }
+
+  .customizeSection {
+    padding: 13px 13px 25px;
+  }
+
+  .header {
+    display: flex;
+    padding: 16px 14px;
+    align-items: center;
+  }
+
+  .header :global(p) {
+    font-size: 12px;
+  }
+
+  .subheading {
+    margin-bottom: 10px;
+  }
+
+  .subheading :global(p) {
+    color: var(--grey-6);
+  }
+
+  .icon {
+    color: var(--grey-6);
+    margin-right: 8px;
+  }
+
+  .icon :global(svg) {
+    height: 16px;
+  }
+
+  .toggle {
+    display: flex;
+    align-items: center;
+  }
+
+  .divider {
+    border-top: 1px solid var(--grey-3);
+  }
+
+  .controls {
+    position: relative;
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    align-items: start;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    border-left: 4px solid transparent;
+    margin: 0 calc(-1 * var(--spacing-xl));
+    padding: 0 var(--spacing-xl) 0 calc(var(--spacing-xl) - 4px);
+    gap: 12px;
+  }
+
+  .label {
+    margin-top: 16px;
+    transform: translateY(-50%);
+  }
+
+  .info {
+    background-color: var(--background-alt);
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+
+  .infoHeader {
+    display: flex;
+    margin-bottom: 5px;
+    border-radius: 4px;
+  }
+
+  .infoHeader :global(svg) {
+    margin-right: 5px;
+    color: var(--grey-6);
+  }
+
+  .infoHeader :global(p) {
+    color: var(--grey-7);
+  }
+
+  .configureLinks :global(button) {
+    margin-bottom: 20px;
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte
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
deleted file mode 100644
index 9513753d76..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import ComponentTree from "./ComponentTree.svelte"
-  import { dndStore } from "./dndStore.js"
-  import { goto } from "@roxi/routify"
-  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
-  import NavItem from "components/common/NavItem.svelte"
-  import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
-  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import { DropPosition } from "./dndStore"
-  import { notifications, Button } from "@budibase/bbui"
-  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
-  import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
-
-  const onDrop = async () => {
-    try {
-      await dndStore.actions.drop()
-    } catch (error) {
-      console.error(error)
-      notifications.error("Error saving component")
-    }
-  }
-</script>
-
-<Panel title="Components" showExpandIcon borderRight>
-  <div class="add-component">
-    <Button on:click={() => $goto("./new")} cta>Add component</Button>
-  </div>
-  <ComponentScrollWrapper>
-    <ul>
-      <li>
-        <NavItem
-          text="Screen"
-          indentLevel={0}
-          selected={$store.selectedComponentId === $selectedScreen?.props._id}
-          opened
-          scrollable
-          icon="WebPage"
-          on:drop={onDrop}
-          on:click={() => {
-            $store.selectedComponentId = $selectedScreen?.props._id
-          }}
-          id={`component-${$selectedScreen?.props._id}`}
-          selectedBy={$userSelectedResourceMap[$selectedScreen?.props._id]}
-        >
-          <ScreenslotDropdownMenu component={$selectedScreen?.props} />
-        </NavItem>
-        <ComponentTree
-          level={0}
-          components={$selectedScreen?.props._children}
-        />
-
-        <!-- Show drop indicators for the target and the parent -->
-        {#if $dndStore.dragging && $dndStore.valid}
-          <DNDPositionIndicator
-            component={$dndStore.target}
-            position={$dndStore.dropPosition}
-          />
-          {#if $dndStore.dropPosition !== DropPosition.INSIDE}
-            <DNDPositionIndicator
-              component={$dndStore.targetParent}
-              position={DropPosition.INSIDE}
-            />
-          {/if}
-        {/if}
-      </li>
-    </ul>
-  </ComponentScrollWrapper>
-</Panel>
-<ComponentKeyHandler />
-
-<style>
-  .add-component {
-    padding: var(--spacing-xl) var(--spacing-l);
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    position: relative;
-  }
-  ul,
-  li {
-    min-width: max-content;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 860258c940..1dcf40a3c5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -1,14 +1,19 @@
 <script>
+  import LeftPanel from "./_components/LeftPanel/index.svelte"
+  import AppPanel from "./_components/AppPanel.svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
   import { findComponent } from "builderStore/componentUtils"
-  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
-  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
+  import ComponentSettingsPanel from "./_components/Component/ComponentSettingsPanel.svelte"
+  import NavigationPanel from "./_components/Navigation/index.svelte"
+  import ScreenSettingsPanel from "./_components/Screen/SettingsPanel.svelte"
 
   $: componentId = $store.selectedComponentId
   $: store.actions.websocket.selectResource(componentId)
+  $: params = routify.params
+  $: routeComponentId = $params.componentId
 
   const cleanUrl = url => {
     // Strip trailing slashes
@@ -22,11 +27,18 @@
     return { url }
   }
 
+  const validate = id => {
+    if (id === "screen") return true
+    if (id === "navigation") return true
+
+    return !!findComponent($selectedScreen.props, id)
+  }
+
   // Keep URL and state in sync for selected component ID
   const stopSyncing = syncURLToState({
     urlParam: "componentId",
     stateKey: "selectedComponentId",
-    validate: id => !!findComponent($selectedScreen.props, id),
+    validate,
     fallbackUrl: "../",
     store,
     routify,
@@ -36,6 +48,38 @@
   onDestroy(stopSyncing)
 </script>
 
-<ComponentListPanel />
-<ComponentSettingsPanel />
-<slot />
+<div class="design">
+  <div class="content">
+    {#if $selectedScreen}
+      <LeftPanel />
+      <AppPanel />
+      {#if routeComponentId === "screen"}
+        <ScreenSettingsPanel />
+      {:else if routeComponentId === "navigation"}
+        <NavigationPanel />
+      {:else}
+        <ComponentSettingsPanel />
+      {/if}
+      <slot />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .design {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    height: 0;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
index f8c4cc0868..9361415cb7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
@@ -1,18 +1,8 @@
 <script>
-  import { selectedScreen, selectedComponent } from "builderStore"
   import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
 
   onMount(() => {
-    if ($selectedComponent) {
-      // Navigate to the selected component if one exists
-      $redirect(`./${$selectedComponent._id}`)
-    } else if ($selectedScreen) {
-      // Otherwise the screen slot if a screen exists
-      $redirect(`./${$selectedScreen.props._id}`)
-    } else {
-      // Otherwise go up so we can select a new valid screen
-      $redirect("../")
-    }
+    $redirect(`./screen`)
   })
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
index f5e3806bd6..496467c546 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
@@ -1,5 +1,8 @@
 <script>
+  import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
 
-  $redirect("./screens")
+  onMount(() => {
+    $redirect("./components/screen")
+  })
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
deleted file mode 100644
index cba68f899d..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { notifications } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
-
-  export let layout
-
-  let confirmDeleteDialog
-
-  const deleteLayout = async () => {
-    try {
-      await store.actions.layouts.delete(layout)
-      notifications.success("Layout deleted successfully")
-    } catch (err) {
-      notifications.error(err?.message || "Error deleting layout")
-    }
-  }
-</script>
-
-<ActionMenu>
-  <div slot="control" class="icon">
-    <Icon size="S" hoverable name="MoreSmallList" />
-  </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
-</ActionMenu>
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  body={"Are you sure you wish to delete this layout?"}
-  okText="Delete layout"
-  onOk={deleteLayout}
-/>
-
-<style>
-  .icon {
-    display: grid;
-    place-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
deleted file mode 100644
index cc895317fd..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import NavItem from "components/common/NavItem.svelte"
-  import { store } from "builderStore"
-  import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
-</script>
-
-<Panel title="Layouts" borderRight>
-  <div class="layouts">
-    {#each $store.layouts as layout (layout._id)}
-      <NavItem
-        icon="Experience"
-        indentLevel={0}
-        selected={$store.selectedLayoutId === layout._id}
-        text={layout.name}
-        on:click={() => store.actions.layouts.select(layout._id)}
-      >
-        <LayoutDropdownMenu {layout} />
-      </NavItem>
-    {/each}
-  </div>
-</Panel>
-
-<style>
-  .layouts {
-    margin-top: var(--spacing-xl);
-    overflow: hidden;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
deleted file mode 100644
index bfc2f94f43..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { store, selectedLayout } from "builderStore"
-  import { Layout, Body, Button, Banner, notifications } from "@budibase/bbui"
-  import { Component } from "builderStore/store/screenTemplates/utils/Component"
-
-  const copyLayout = () => {
-    // Build an outer container component to put layout contents inside
-    let container = new Component("@budibase/standard-components/container")
-      .instanceName($selectedLayout.name)
-      .customProps({
-        gap: "M",
-        direction: "column",
-        hAlign: "stretch",
-        vAlign: "top",
-        size: "shrink",
-      })
-      .json()
-
-    // Attach layout components
-    container._children = $selectedLayout.props._children
-
-    // Replace the screenslot component with a container. This is better than
-    // simply removing it as it still shows its position.
-    container = JSON.parse(
-      JSON.stringify(container).replace(
-        "@budibase/standard-components/screenslot",
-        "@budibase/standard-components/container"
-      )
-    )
-
-    // Copy new component structure
-    store.actions.components.copy(container)
-    notifications.success("Components copied successfully")
-  }
-</script>
-
-<Panel title={$selectedLayout?.name} icon="Experience" borderLeft wide>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Banner type="warning" showCloseButton={false}>
-      Custom layouts are being deprecated. They will be removed in a future
-      release.
-    </Banner>
-    <Body size="S">
-      You can save the content of this layout by pressing the button below.
-    </Body>
-    <Body size="S">
-      This will copy all components inside your layout, which you can then paste
-      into a screen.
-    </Body>
-    <Button cta on:click={copyLayout}>Copy components</Button>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
deleted file mode 100644
index c82fefab3e..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { syncURLToState } from "helpers/urlStateSync"
-  import { store } from "builderStore"
-  import * as routify from "@roxi/routify"
-  import { onDestroy } from "svelte"
-
-  // Keep URL and state in sync for selected component ID
-  const stopSyncing = syncURLToState({
-    urlParam: "layoutId",
-    stateKey: "selectedLayoutId",
-    validate: id => $store.layouts?.some(layout => layout._id === id),
-    fallbackUrl: "../",
-    store,
-    routify,
-  })
-
-  onDestroy(stopSyncing)
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
deleted file mode 100644
index 4d39403bc3..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import LayoutListPanel from "./_components/LayoutListPanel.svelte"
-  import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
-</script>
-
-<LayoutListPanel />
-<LayoutSettingsPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
deleted file mode 100644
index 1333c6afe3..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { redirect } from "@roxi/routify"
-
-  $: {
-    if (!$store.layouts?.length) {
-      $redirect("../")
-    }
-  }
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
deleted file mode 100644
index 09d45f8fde..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { onMount } from "svelte"
-  import { redirect } from "@roxi/routify"
-
-  onMount(() => {
-    if ($store.layouts?.length) {
-      $redirect(`./${$store.layouts[0]._id}`)
-    }
-    // The redirection when no layouts exist is handled by the routify layout
-  })
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte
deleted file mode 100644
index 05108b1736..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte
+++ /dev/null
@@ -1,176 +0,0 @@
-<script>
-  import Pane from "components/design/Pane.svelte"
-  import {
-    ColorPicker,
-    Input,
-    Label,
-    ActionGroup,
-    ActionButton,
-    Checkbox,
-    notifications,
-    Icon,
-    Body,
-    Button,
-    Select,
-  } from "@budibase/bbui"
-  import { DefaultAppTheme } from "constants"
-  import { store } from "builderStore"
-
-  const update = async (key, value) => {
-    try {
-      let navigation = $store.navigation
-      navigation[key] = value
-      await store.actions.navigation.save(navigation)
-    } catch (error) {
-      notifications.error("Error updating navigation settings")
-    }
-  }
-</script>
-
-<Pane title="Customize">
-  <div class="info">
-    <div class="infoHeader">
-      <Icon name="InfoOutline" />
-      <Body size="S">CHANGES WILL APPLY TO ALL SCREENS</Body>
-    </div>
-    <Body>
-      Your navigation is configured for all the screens within your app.
-    </Body>
-  </div>
-  <div class="configureLinks">
-    <Button cta>Configure Links</Button>
-  </div>
-  <div class="controls">
-    <div class="label">
-      <Label size="M">Position</Label>
-    </div>
-    <ActionGroup quiet>
-      <ActionButton
-        selected={$store.navigation.navigation === "Top"}
-        quiet={$store.navigation.navigation !== "Top"}
-        icon="PaddingTop"
-        on:click={() => update("navigation", "Top")}
-      />
-      <ActionButton
-        selected={$store.navigation.navigation === "Left"}
-        quiet={$store.navigation.navigation !== "Left"}
-        icon="PaddingLeft"
-        on:click={() => update("navigation", "Left")}
-      />
-    </ActionGroup>
-
-    {#if $store.navigation.navigation === "Top"}
-      <div class="label">
-        <Label size="M">Sticky header</Label>
-      </div>
-      <Checkbox
-        value={$store.navigation.sticky}
-        on:change={e => update("sticky", e.detail)}
-      />
-      <div class="label">
-        <Label size="M">Width</Label>
-      </div>
-      <Select
-        options={["Max", "Large", "Medium", "Small"]}
-        plaveholder={null}
-        value={$store.navigation.navWidth}
-        on:change={e => update("navWidth", e.detail)}
-      />
-    {/if}
-    <div class="label">
-      <Label size="M">Show logo</Label>
-    </div>
-    <Checkbox
-      value={!$store.navigation.hideLogo}
-      on:change={e => update("hideLogo", !e.detail)}
-    />
-    {#if !$store.navigation.hideLogo}
-      <div class="label">
-        <Label size="M">Logo URL</Label>
-      </div>
-      <Input
-        value={$store.navigation.logoUrl}
-        on:change={e => update("logoUrl", e.detail)}
-        updateOnChange={false}
-      />
-    {/if}
-    <div class="label">
-      <Label size="M">Show title</Label>
-    </div>
-    <Checkbox
-      value={!$store.navigation.hideTitle}
-      on:change={e => update("hideTitle", !e.detail)}
-    />
-    {#if !$store.navigation.hideTitle}
-      <div class="label">
-        <Label size="M">Title</Label>
-      </div>
-      <Input
-        value={$store.navigation.title}
-        on:change={e => update("title", e.detail)}
-        updateOnChange={false}
-      />
-    {/if}
-    <div class="label">
-      <Label>Background</Label>
-    </div>
-    <ColorPicker
-      spectrumTheme={$store.theme}
-      value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
-      on:change={e => update("navBackground", e.detail)}
-    />
-    <div class="label">
-      <Label>Text</Label>
-    </div>
-    <ColorPicker
-      spectrumTheme={$store.theme}
-      value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
-      on:change={e => update("navTextColor", e.detail)}
-    />
-  </div>
-</Pane>
-
-<style>
-  .controls {
-    position: relative;
-    display: grid;
-    grid-template-columns: 90px 1fr;
-    align-items: start;
-    transition: background 130ms ease-out, border-color 130ms ease-out;
-    border-left: 4px solid transparent;
-    margin: 0 calc(-1 * var(--spacing-xl));
-    padding: 0 var(--spacing-xl) 0 calc(var(--spacing-xl) - 4px);
-    gap: 12px;
-  }
-
-  .label {
-    margin-top: 16px;
-    transform: translateY(-50%);
-  }
-
-  .info {
-    background-color: var(--background-alt);
-    padding: 12px;
-    margin-bottom: 12px;
-  }
-
-  .infoHeader {
-    display: flex;
-    margin-bottom: 5px;
-    border-radius: 4px;
-  }
-
-  .infoHeader :global(svg) {
-    margin-right: 5px;
-    color: var(--grey-6);
-  }
-
-  .infoHeader :global(p) {
-    color: var(--grey-6);
-  }
-
-  .configureLinks :global(button) {
-    margin-bottom: 20px;
-    width: 100%;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte
deleted file mode 100644
index d3ce720994..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-  import Pane from "components/design/Pane.svelte"
-  import { get } from "svelte/store"
-  import { Toggle, Body } from "@budibase/bbui"
-  import { selectedScreen, store } from "builderStore"
-
-  const updateShowNavigation = async e => {
-    await store.actions.screens.updateSetting(
-      get(selectedScreen),
-      "showNavigation",
-      e.detail
-    )
-  }
-</script>
-
-<Pane title="Settings">
-  <div class="toggle">
-    <Toggle
-      on:change={updateShowNavigation}
-      value={$selectedScreen.showNavigation}
-    />
-    <Body size="S">Show nav on this screen</Body>
-  </div>
-</Pane>
-
-<style>
-  .toggle {
-    display: flex;
-    align-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte
deleted file mode 100644
index 6ce5405f93..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-  import RightPanel from "components/design/RightPanel.svelte"
-  import CustomizePane from "./CustomizePane.svelte"
-  import SettingsPane from "./SettingsPane.svelte"
-</script>
-
-<RightPanel title="Screen" icon="WebPage">
-  <SettingsPane />
-  <CustomizePane />
-</RightPanel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
deleted file mode 100644
index 5ffccc5800..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
+++ /dev/null
@@ -1,130 +0,0 @@
-<script>
-  import {
-    Button,
-    Icon,
-    DrawerContent,
-    Layout,
-    Input,
-    Combobox,
-  } from "@budibase/bbui"
-  import { flip } from "svelte/animate"
-  import { dndzone } from "svelte-dnd-action"
-  import { generate } from "shortid"
-  import { store } from "builderStore"
-  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
-
-  export let links = []
-
-  const flipDurationMs = 150
-  let dragDisabled = true
-
-  $: links.forEach(link => {
-    if (!link.id) {
-      link.id = generate()
-    }
-  })
-  $: urlOptions = $store.screens
-    .map(screen => screen.routing?.route)
-    .filter(x => x != null)
-
-  const addLink = () => {
-    links = [...links, {}]
-  }
-
-  const removeLink = id => {
-    links = links.filter(link => link.id !== id)
-  }
-
-  const updateLinks = e => {
-    links = e.detail.items
-  }
-
-  const handleFinalize = e => {
-    updateLinks(e)
-    dragDisabled = true
-  }
-</script>
-
-<DrawerContent>
-  <div class="container">
-    <Layout noPadding gap="S">
-      {#if links?.length}
-        <div
-          class="links"
-          use:dndzone={{
-            items: links,
-            flipDurationMs,
-            dropTargetStyle: { outline: "none" },
-            dragDisabled,
-          }}
-          on:finalize={handleFinalize}
-          on:consider={updateLinks}
-        >
-          {#each links as link (link.id)}
-            <div class="link" animate:flip={{ duration: flipDurationMs }}>
-              <div
-                class="handle"
-                aria-label="drag-handle"
-                style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
-                on:mousedown={() => (dragDisabled = false)}
-              >
-                <Icon name="DragHandle" size="XL" />
-              </div>
-              <Input bind:value={link.text} placeholder="Text" />
-              <Combobox
-                bind:value={link.url}
-                placeholder="URL"
-                options={urlOptions}
-              />
-              <RoleSelect bind:value={link.roleId} placeholder="Minimum role" />
-              <Icon
-                name="Close"
-                hoverable
-                size="S"
-                on:click={() => removeLink(link.id)}
-              />
-            </div>
-          {/each}
-        </div>
-      {/if}
-      <div>
-        <Button secondary icon="Add" on:click={addLink}>Add Link</Button>
-      </div>
-    </Layout>
-  </div>
-</DrawerContent>
-
-<style>
-  .container {
-    width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-  .links {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-m);
-  }
-  .link {
-    gap: var(--spacing-l);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: var(--border-radius-s);
-    transition: background-color ease-in-out 130ms;
-  }
-  .link:hover {
-    background-color: var(--spectrum-global-color-gray-100);
-  }
-  .link > :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  .handle {
-    display: grid;
-    place-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
deleted file mode 100644
index 895c82495d..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-  import { Button, Drawer } from "@budibase/bbui"
-  import NavigationLinksDrawer from "./NavigationLinksDrawer.svelte"
-  import { cloneDeep } from "lodash/fp"
-  import { store } from "builderStore"
-
-  let drawer
-  let links
-
-  const openDrawer = () => {
-    links = cloneDeep($store.navigation.links || [])
-    drawer.show()
-  }
-
-  const save = async () => {
-    let navigation = $store.navigation
-    navigation.links = links
-    await store.actions.navigation.save(navigation)
-    drawer.hide()
-  }
-</script>
-
-<Button cta on:click={openDrawer}>Configure links</Button>
-<Drawer
-  bind:this={drawer}
-  title={"Navigation Links"}
-  width="calc(100% - 334px)"
->
-  <svelte:fragment slot="description">
-    Configure the links in your navigation bar.
-  </svelte:fragment>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <NavigationLinksDrawer slot="body" bind:links />
-</Drawer>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
deleted file mode 100644
index c6d43984b2..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import {
-    Layout,
-    Label,
-    ActionGroup,
-    ActionButton,
-    Checkbox,
-    Select,
-    ColorPicker,
-    Input,
-    notifications,
-  } from "@budibase/bbui"
-  import NavigationLinksEditor from "./NavigationLinksEditor.svelte"
-  import { store } from "builderStore"
-  import { DefaultAppTheme } from "constants"
-
-  const update = async (key, value) => {
-    try {
-      let navigation = $store.navigation
-      navigation[key] = value
-      await store.actions.navigation.save(navigation)
-    } catch (error) {
-      notifications.error("Error updating navigation settings")
-    }
-  }
-</script>
-
-<Panel title="Navigation" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <NavigationLinksEditor />
-    <Layout noPadding gap="XS">
-      <Label>Position</Label>
-      <ActionGroup quiet>
-        <ActionButton
-          selected={$store.navigation.navigation === "Top"}
-          quiet={$store.navigation.navigation !== "Top"}
-          icon="PaddingTop"
-          on:click={() => update("navigation", "Top")}
-        />
-        <ActionButton
-          selected={$store.navigation.navigation === "Left"}
-          quiet={$store.navigation.navigation !== "Left"}
-          icon="PaddingLeft"
-          on:click={() => update("navigation", "Left")}
-        />
-      </ActionGroup>
-    </Layout>
-    {#if $store.navigation.navigation === "Top"}
-      <Checkbox
-        text="Sticky header"
-        value={$store.navigation.sticky}
-        on:change={e => update("sticky", e.detail)}
-      />
-      <Select
-        label="Width"
-        options={["Max", "Large", "Medium", "Small"]}
-        plaveholder={null}
-        value={$store.navigation.navWidth}
-        on:change={e => update("navWidth", e.detail)}
-      />
-    {/if}
-    <Layout noPadding gap="XS">
-      <Checkbox
-        text="Logo"
-        value={!$store.navigation.hideLogo}
-        on:change={e => update("hideLogo", !e.detail)}
-      />
-      {#if !$store.navigation.hideLogo}
-        <Input
-          value={$store.navigation.logoUrl}
-          on:change={e => update("logoUrl", e.detail)}
-          placeholder="Add logo URL"
-          updateOnChange={false}
-        />
-      {/if}
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Checkbox
-        text="Title"
-        value={!$store.navigation.hideTitle}
-        on:change={e => update("hideTitle", !e.detail)}
-      />
-      {#if !$store.navigation.hideTitle}
-        <Input
-          value={$store.navigation.title}
-          on:change={e => update("title", e.detail)}
-          placeholder="Add title"
-          updateOnChange={false}
-        />
-      {/if}
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Background color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
-        on:change={e => update("navBackground", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Text color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
-        on:change={e => update("navTextColor", e.detail)}
-      />
-    </Layout>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
deleted file mode 100644
index 2331d8b285..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import NavigationSettingsPanel from "./_components/NavigationSettingsPanel.svelte"
-  import NavigationInfoPanel from "./_components/NavigationInfoPanel/index.svelte"
-</script>
-
-<NavigationSettingsPanel />
-<NavigationInfoPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
deleted file mode 100644
index 6362af3073..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-  import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
-  import Panel from "components/design/Panel.svelte"
-  import { goto } from "@roxi/routify"
-  import { roles } from "stores/backend"
-  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
-  import NavItem from "components/common/NavItem.svelte"
-  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
-  import RoleIndicator from "./RoleIndicator.svelte"
-  import { RoleUtils } from "@budibase/frontend-core"
-
-  let searchString
-  let accessRole = "all"
-
-  $: filteredScreens = getFilteredScreens(
-    $sortedScreens,
-    searchString,
-    accessRole
-  )
-
-  const getFilteredScreens = (screens, search, role) => {
-    return screens.filter(screen => {
-      const searchMatch = !search || screen.routing.route.includes(search)
-      const roleMatch =
-        !role || role === "all" || screen.routing.roleId === role
-      return searchMatch && roleMatch
-    })
-  }
-</script>
-
-<Panel title="Screens" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button on:click={() => $goto("../../new")} cta>Add screen</Button>
-    <Search
-      placeholder="Search"
-      value={searchString}
-      on:change={e => (searchString = e.detail)}
-    />
-    <Select
-      bind:value={accessRole}
-      placeholder={null}
-      getOptionLabel={role => role.name}
-      getOptionValue={role => role._id}
-      getOptionColour={role => {
-        if (role?._id === "all") {
-          return null
-        }
-        return RoleUtils.getRoleColour(role._id)
-      }}
-      options={[{ name: "All screens", _id: "all" }, ...$roles]}
-    />
-  </Layout>
-  {#each filteredScreens as screen (screen._id)}
-    <NavItem
-      icon={screen.routing.homeScreen ? "Home" : null}
-      indentLevel={0}
-      selected={$store.selectedScreenId === screen._id}
-      text={screen.routing.route}
-      on:click={() => store.actions.screens.select(screen._id)}
-      rightAlignIcon
-      showTooltip
-      selectedBy={$userSelectedResourceMap[screen._id]}
-    >
-      <ScreenDropdownMenu screenId={screen._id} />
-      <RoleIndicator slot="right" roleId={screen.routing.roleId} />
-    </NavItem>
-  {/each}
-  {#if !filteredScreens?.length}
-    <Layout paddingY="" paddingX="L">
-      <Body size="S">
-        There aren't any screens matching the current filters
-      </Body>
-    </Layout>
-  {/if}
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
deleted file mode 100644
index 6236721e1a..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { selectedScreen } from "builderStore"
-  import ScreenListPanel from "./_components/ScreenListPanel.svelte"
-  import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
-</script>
-
-<ScreenListPanel />
-{#if $selectedScreen}
-  {#key $selectedScreen._id}
-    <ScreenSettingsPanel />
-  {/key}
-{/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
deleted file mode 100644
index 86a897bf60..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-  import { notifications } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import { Constants } from "@budibase/frontend-core"
-
-  const onChangeTheme = async theme => {
-    try {
-      await store.actions.theme.save(`spectrum--${theme}`)
-    } catch (error) {
-      notifications.error("Error updating theme")
-    }
-  }
-</script>
-
-<div class="container">
-  {#each Constants.Themes as theme}
-    <div
-      class="theme"
-      class:selected={`spectrum--${theme.class}` === $store.theme}
-      on:click={() => onChangeTheme(theme.class)}
-    >
-      <div
-        style="background: {theme.preview}"
-        class="color spectrum--{theme.class}"
-      />
-      {theme.name}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-xs);
-  }
-  .color {
-    width: 20px;
-    height: 20px;
-    border-radius: 50px;
-    background: var(--spectrum-global-color-gray-200);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .theme {
-    border-radius: 4px;
-    padding: var(--spacing-s) var(--spacing-m);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-xl);
-    transition: background 130ms ease-out;
-    font-weight: 600;
-    color: var(--spectrum-global-color-gray-900);
-  }
-  .theme:hover {
-    cursor: pointer;
-  }
-  .theme.selected,
-  .theme:hover {
-    background: var(--spectrum-global-color-gray-50);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
deleted file mode 100644
index 6e0fc39029..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import { Slider, Button } from "@budibase/bbui"
-
-  export let customTheme
-
-  const dispatch = createEventDispatcher()
-  const options = ["0", "4px", "8px", "16px"]
-
-  $: index = options.indexOf(customTheme.buttonBorderRadius) ?? 2
-
-  const onChange = async e => {
-    dispatch("change", options[e.detail])
-  }
-</script>
-
-<div class="container">
-  <Slider min={0} max={3} step={1} value={index} on:change={onChange} />
-  <div class="button" style="--radius: {customTheme.buttonBorderRadius};">
-    <Button primary>Button</Button>
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xl);
-  }
-  .container :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
-  }
-  .button :global(.spectrum-Button) {
-    border-radius: var(--radius) !important;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
deleted file mode 100644
index c3325852c8..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
-</script>
-
-<Panel borderLeft title="Theme" icon="InfoOutline" wide>
-  <Layout paddingX="L" paddingY="XL">
-    <Body size="S">
-      Your theme is set across all the screens within your app.
-    </Body>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
deleted file mode 100644
index 1c86a51f67..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Layout, Label, ColorPicker, notifications } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import { get } from "svelte/store"
-  import { DefaultAppTheme } from "constants"
-  import AppThemeSelect from "./AppThemeSelect.svelte"
-  import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
-
-  $: customTheme = $store.customTheme || {}
-
-  const update = async (property, value) => {
-    try {
-      store.actions.customTheme.save({
-        ...get(store).customTheme,
-        [property]: value,
-      })
-    } catch (error) {
-      notifications.error("Error updating custom theme")
-    }
-  }
-</script>
-
-<Panel title="Theme" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Layout noPadding gap="XS">
-      <Label>Theme</Label>
-      <AppThemeSelect />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Button roundness</Label>
-      <ButtonRoundnessSelect
-        {customTheme}
-        on:change={e => update("buttonBorderRadius", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Accent color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
-        on:change={e => update("primaryColor", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Accent color (hover)</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={customTheme.primaryColorHover ||
-          DefaultAppTheme.primaryColorHover}
-        on:change={e => update("primaryColorHover", e.detail)}
-      />
-    </Layout>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
deleted file mode 100644
index 013257d8e1..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import ThemeSettingsPanel from "./_components/ThemeSettingsPanel.svelte"
-  import ThemeInfoPanel from "./_components/ThemeInfoPanel.svelte"
-</script>
-
-<ThemeSettingsPanel />
-<ThemeInfoPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index e9c72a6e1f..470c81b88c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
@@ -4,7 +4,7 @@
 
   $: {
     if ($frontendStore.screens.length > 0) {
-      $redirect(`./${$frontendStore.screens[0]._id}`)
+      $redirect(`./${$frontendStore.screens[0]._id}/components/screen`)
     } else {
       $redirect("./new")
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
index ab9c8eb91d..5a6c11107c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -1,104 +1,5 @@
 <script>
-  import { Body } from "@budibase/bbui"
-  import CreationPage from "components/common/CreationPage.svelte"
-  import blankImage from "./blank.png"
-  import tableImage from "./table.png"
-  import CreateScreenModal from "./_components/CreateScreenModal.svelte"
-  import { store } from "builderStore"
-  import { goto } from "@roxi/routify"
-
-  let createScreenModal
-
-  $: hasScreens = $store.screens?.length
+  import NewScreen from "components/design/NewScreen/index.svelte"
 </script>
 
-<div class="page">
-  <CreationPage
-    showClose={$store.screens.length > 0}
-    onClose={() => $goto(`./${$store.screens[0]._id}`)}
-    heading={hasScreens ? "Create new screen" : "Create your first screen"}
-  >
-    <div class="subHeading">
-      <Body>Start from scratch or create screens from your data</Body>
-    </div>
-
-    <div class="cards">
-      <div class="card" on:click={() => createScreenModal.show("blank")}>
-        <div class="image">
-          <img alt="" src={blankImage} />
-        </div>
-        <div class="text">
-          <Body size="S">Blank screen</Body>
-          <Body size="XS">Add an empty blank screen</Body>
-        </div>
-      </div>
-
-      <div class="card" on:click={() => createScreenModal.show("table")}>
-        <div class="image">
-          <img alt="" src={tableImage} />
-        </div>
-        <div class="text">
-          <Body size="S">Table</Body>
-          <Body size="XS">View, edit and delete rows on a table</Body>
-        </div>
-      </div>
-    </div>
-  </CreationPage>
-</div>
-
-<CreateScreenModal bind:this={createScreenModal} />
-
-<style>
-  .page {
-    padding: 28px 40px 40px 40px;
-  }
-
-  .subHeading :global(p) {
-    text-align: center;
-    margin-top: 12px;
-    margin-bottom: 36px;
-    color: var(--spectrum-global-color-gray-600);
-  }
-
-  .cards {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 24px;
-  }
-
-  .card {
-    max-width: 235px;
-    transition: filter 150ms;
-  }
-
-  .card:hover {
-    filter: brightness(1.1);
-    cursor: pointer;
-  }
-
-  .image {
-    border-radius: 4px 4px 0 0;
-    width: 100%;
-    max-height: 127px;
-    overflow: hidden;
-  }
-
-  .image img {
-    width: 100%;
-  }
-
-  .text {
-    border: 1px solid var(--grey-4);
-    border-radius: 0 0 4px 4px;
-    padding: 8px 16px 13px 16px;
-  }
-
-  .text :global(p:nth-child(1)) {
-    margin-bottom: 6px;
-  }
-
-  .text :global(p:nth-child(2)) {
-    color: var(--grey-6);
-  }
-</style>
+<NewScreen />
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f17a8db0c9..31f3cc3db6 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -33,7 +33,7 @@
 
   export let instance = {}
   export let isLayout = false
-  export let isScreen = false
+  export let isRoot = false
   export let isBlock = false
 
   // Get parent contexts
@@ -104,7 +104,7 @@
   // Extract component instance info
   $: children = instance._children || []
   $: id = instance._id
-  $: name = isScreen ? "Screen" : instance._instanceName
+  $: name = isRoot ? "Screen" : instance._instanceName
   $: icon = definition?.icon
 
   // Determine if the component is selected or is part of the critical path
@@ -133,13 +133,13 @@
   $: builderInteractive =
     $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
-  $: interactive = builderInteractive || devToolsInteractive
+  $: interactive = !isRoot && (builderInteractive || devToolsInteractive)
   $: editing = editable && selected && $builderStore.editMode
   $: draggable =
     !inDragPath &&
     interactive &&
     !isLayout &&
-    !isScreen &&
+    !isRoot &&
     definition?.draggable !== false
   $: droppable = interactive
   $: builderHidden =
@@ -538,7 +538,7 @@
             <svelte:self instance={child} />
           {/each}
         {:else if emptyState}
-          {#if isScreen}
+          {#if isRoot}
             <ScreenPlaceholder />
           {:else}
             <EmptyPlaceholder />
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index f6f9a932f0..4b3acb2019 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -44,7 +44,7 @@
 {#if $routeStore.routerLoaded}
   {#key screenDefinition?._id}
     <Provider key="url" data={params}>
-      <Component isScreen instance={screenDefinition} />
+      <Component isRoot instance={screenDefinition} />
     </Provider>
   {/key}
 {/if}
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index c1dec0b119..b7aff4047a 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -146,21 +146,24 @@
 </script>
 
 <div
-  class="layout layout--{typeClass}"
+  class="component screen layout layout--{typeClass}"
   use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
+  data-id="screen"
+  data-name="Screen"
+  data-icon="WebPage"
 >
-  <div class="layout-body">
+  <div class="screen-dom screen-wrapper layout-body">
     {#if typeClass !== "none"}
       <div
         class="interactive component navigation"
         data-id="navigation"
         data-name="Navigation"
-        data-icon="Link"
+        data-icon="Visibility"
       >
         <div
-          class="nav-wrapper"
+          class="nav-wrapper navigation-dom"
           class:sticky
           class:hidden={$routeStore.queryParams?.peek}
           class:clickable={$builderStore.inBuilder}
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index e1bfe4f7e5..b69b8ce050 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -30,7 +30,7 @@
     }
   }
   $: settings = getBarSettings(definition)
-  $: isScreen = id === $builderStore.screen?.props?._id
+  $: isRoot = id === $builderStore.screen?.props?._id
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -160,11 +160,11 @@
       {:else if setting.type === "color"}
         <SettingsColorPicker prop={setting.key} />
       {/if}
-      {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isScreen)}
+      {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
         <div class="divider" />
       {/if}
     {/each}
-    {#if !isScreen}
+    {#if !isRoot}
       <SettingsButton
         icon="Duplicate"
         on:click={() => {

From e5f818a0ced76a67401c432ae5ab7a55392292b7 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 16 Aug 2023 12:14:35 +0100
Subject: [PATCH 02/50] Reuse Component Panel

---
 .../builder/src/components/design/Pane.svelte |  21 ----
 .../src/components/design/RightPanel.svelte   | 112 ------------------
 .../_components/Navigation/index.svelte       |  47 ++------
 3 files changed, 9 insertions(+), 171 deletions(-)
 delete mode 100644 packages/builder/src/components/design/Pane.svelte
 delete mode 100644 packages/builder/src/components/design/RightPanel.svelte

diff --git a/packages/builder/src/components/design/Pane.svelte b/packages/builder/src/components/design/Pane.svelte
deleted file mode 100644
index 88b6ea1c05..0000000000
--- a/packages/builder/src/components/design/Pane.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  export let title
-
-  const createPaneStore = getContext("createPaneStore")
-
-  $: paneStore = createPaneStore(title)
-</script>
-
-{#if $paneStore}
-  <div class="pane">
-    <slot />
-  </div>
-{/if}
-
-<style>
-  .pane {
-    padding: 13px;
-  }
-</style>
diff --git a/packages/builder/src/components/design/RightPanel.svelte b/packages/builder/src/components/design/RightPanel.svelte
deleted file mode 100644
index f9075600f9..0000000000
--- a/packages/builder/src/components/design/RightPanel.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import { writable, get } from "svelte/store"
-  import { Icon, Body, Button } from "@budibase/bbui"
-
-  export let icon
-  export let title
-
-  let panes = {}
-  let selectedPaneIdStore = writable(null)
-
-  const createPaneStore = pane => {
-    const id = crypto.randomUUID()
-
-    return {
-      subscribe: callback => {
-        panes[id] = pane
-
-        if (get(selectedPaneIdStore) === null) {
-          selectedPaneIdStore.set(id)
-        }
-
-        const unsubscribeSelectedPaneIdStore = selectedPaneIdStore.subscribe(
-          selectedPaneId => callback(selectedPaneId === id)
-        )
-
-        return () => {
-          delete panes[id]
-          panes = panes
-          unsubscribeSelectedPaneIdStore()
-
-          if (get(selectedPaneIdStore) === id) {
-            const ids = Object.keys(panes)
-
-            if (ids.length > 0) {
-              selectedPaneIdStore.set(ids[0])
-            } else {
-              selectedPaneIdStore.set(null)
-            }
-          }
-        }
-      },
-    }
-  }
-
-  setContext("createPaneStore", createPaneStore)
-</script>
-
-<div class="panel">
-  <div class="header">
-    <div class="icon">
-      <Icon name={icon} />
-    </div>
-    <Body>{title}</Body>
-  </div>
-  <div class="controls">
-    {#each Object.entries(panes) as [id, pane]}
-      <div class="button" class:active={$selectedPaneIdStore === id}>
-        <Button on:click={() => selectedPaneIdStore.set(id)}>{pane}</Button>
-      </div>
-    {/each}
-  </div>
-  <div class="divider" />
-
-  <slot />
-</div>
-
-<style>
-  .panel {
-    width: 310px;
-    background: var(--background);
-  }
-
-  .header {
-    display: flex;
-    padding: 16px 14px;
-    align-items: center;
-  }
-
-  .icon {
-    color: var(--grey-6);
-    margin-right: 8px;
-  }
-
-  .controls {
-    padding: 0 14px 16px;
-    display: flex;
-  }
-
-  .button:first-child {
-    margin-right: 8px;
-  }
-
-  .button :global(button) {
-    border-radius: 4px;
-    border: none;
-    background-color: var(--grey-1);
-    color: var(--ink);
-  }
-
-  .button :global(button):hover {
-    background-color: var(--grey-2);
-  }
-
-  .button.active :global(button) {
-    background-color: var(--grey-2);
-  }
-
-  .divider {
-    border-top: 1px solid var(--grey-3);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
index f442e3a275..6da744a44a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { get } from "svelte/store"
+  import Panel from "components/design/Panel.svelte"
   import {
     Detail,
     Toggle,
@@ -25,6 +26,7 @@
       e.detail
     )
   }
+
   const update = async (key, value) => {
     try {
       let navigation = $store.navigation
@@ -36,16 +38,12 @@
   }
 </script>
 
-<div class="panel">
-  <div class="header">
-    <div class="icon">
-      <Icon
-        name={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
-      />
-    </div>
-    <Body>Navigation</Body>
-  </div>
-  <div class="divider" />
+<Panel
+  title="Navigation"
+  icon={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
+  borderLeft
+  wide
+>
   <div class="generalSection">
     <div class="subheading">
       <Detail>General</Detail>
@@ -161,16 +159,9 @@
       />
     </div>
   </div>
-</div>
+</Panel>
 
 <style>
-  .panel {
-    overflow: hidden;
-    width: 310px;
-    background: var(--background);
-    border-left: 2px solid var(--grey-2);
-  }
-
   .generalSection {
     padding: 13px 13px 25px;
   }
@@ -178,17 +169,6 @@
   .customizeSection {
     padding: 13px 13px 25px;
   }
-
-  .header {
-    display: flex;
-    padding: 16px 14px;
-    align-items: center;
-  }
-
-  .header :global(p) {
-    font-size: 12px;
-  }
-
   .subheading {
     margin-bottom: 10px;
   }
@@ -197,15 +177,6 @@
     color: var(--grey-6);
   }
 
-  .icon {
-    color: var(--grey-6);
-    margin-right: 8px;
-  }
-
-  .icon :global(svg) {
-    height: 16px;
-  }
-
   .toggle {
     display: flex;
     align-items: center;

From 5aea392616748c0ca8f0c6a693780e4858079f04 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 18 Aug 2023 12:23:35 +0100
Subject: [PATCH 03/50] hotkeys

---
 .../builder/src/builderStore/store/frontend.js   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 038fb661b9..76e38a8b94 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -998,12 +998,17 @@ export const getFrontendStore = () => {
         const componentId = state.selectedComponentId
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
-
-        // Check we aren't right at the top of the tree
         const index = parent?._children.findIndex(x => x._id === componentId)
-        if (!parent || componentId === screen.props._id) {
+
+        if (componentId === 'screen') {
           return null
         }
+        if (componentId === 'navigation') {
+          return "screen"
+        }
+        if (parent._id === screen.props._id && index === 0) {
+          return "navigation"
+        }
 
         // If we have siblings above us, choose the sibling or a descendant
         if (index > 0) {
@@ -1025,12 +1030,17 @@ export const getFrontendStore = () => {
         return parent._id
       },
       getNext: () => {
+        const state = get(store)
         const component = get(selectedComponent)
         const componentId = component?._id
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
+        if (state.selectedComponentId === 'screen') {
+          return 'navigation'
+        }
+
         // If we have children, select first child
         if (component._children?.length) {
           return component._children[0]._id

From 6f4d92c3af04b95e7b8a045c2c1daa2eb55484ca Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 20 Aug 2023 15:04:18 +0100
Subject: [PATCH 04/50] border changes

---
 .../[componentId]/_components/LeftPanel/index.svelte          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
index 3f521b23c7..b7591253be 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
@@ -13,12 +13,12 @@
   .panel {
     width: 310px;
     height: 100%;
-    border-right: 1px solid var(--grey-2);
+    border-right: 2px solid var(--grey-2);
     display: flex;
     flex-direction: column;
   }
 
   .divider {
-    border-bottom: 1px solid var(--grey-2);
+    border-bottom: 2px solid var(--grey-2);
   }
 </style>

From d4f635982093792e9e04d718bcae9a288b93c0cc Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 20 Aug 2023 15:13:27 +0100
Subject: [PATCH 05/50] screen scrollbar and screen panel height

---
 .../[componentId]/_components/LeftPanel/Screens/index.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 19c19c49df..3011579c63 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -130,7 +130,7 @@
     height: calc(100vh - 58px);
   }
   .screens {
-    height: 196px;
+    height: 212px;
     display: flex;
     flex-direction: column;
     transition: height 300ms;
@@ -185,7 +185,7 @@
   }
 
   .content {
-    overflow-y: scroll;
+    overflow: auto;
     flex-grow: 1;
   }
 

From a34390c9868888432480f29e39126f2fcc8ff085 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 20 Aug 2023 23:33:09 +0100
Subject: [PATCH 06/50] Stop preview remounting

---
 .../_components/AppPanel.svelte               |  0
 .../_components/AppPreview.svelte             | 10 +++--
 .../_components/DevicePreviewSelect.svelte    |  0
 .../design/[screenId]/_layout.svelte          | 27 +++++++++++-
 .../components/[componentId]/_layout.svelte   | 43 ++++++-------------
 5 files changed, 44 insertions(+), 36 deletions(-)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId] => }/_components/AppPanel.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId] => }/_components/AppPreview.svelte (96%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId] => }/_components/DevicePreviewSelect.svelte (100%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
similarity index 96%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPreview.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 95a6418afa..a7c2003741 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -1,7 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import { store, selectedScreen, currentAsset } from "builderStore"
+  import { store, selectedComponent, selectedScreen, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -65,7 +65,9 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(`./new`)
+  $: isAddingComponent = $isActive(
+    `./components/${$selectedComponent?._id}/new`
+  )
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -208,9 +210,9 @@
 
   const toggleAddComponent = () => {
     if (isAddingComponent) {
-      $goto(`../`)
+      $goto(`./components/${$selectedComponent?._id}`)
     } else {
-      $goto(`./new`)
+      $goto(`./components/${$selectedComponent?._id}/new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/DevicePreviewSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 77510951b1..9bc1806349 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -1,4 +1,5 @@
 <script>
+  import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store } from "builderStore"
@@ -20,4 +21,28 @@
   onDestroy(stopSyncing)
 </script>
 
-<slot />
+<div class="design">
+  <div class="content">
+    <AppPanel />
+    <slot />
+  </div>
+</div>
+
+<style>
+  .design {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    height: 0;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 1dcf40a3c5..807109326a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -1,6 +1,5 @@
 <script>
   import LeftPanel from "./_components/LeftPanel/index.svelte"
-  import AppPanel from "./_components/AppPanel.svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import * as routify from "@roxi/routify"
@@ -48,38 +47,20 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="design">
-  <div class="content">
-    {#if $selectedScreen}
-      <LeftPanel />
-      <AppPanel />
-      {#if routeComponentId === "screen"}
-        <ScreenSettingsPanel />
-      {:else if routeComponentId === "navigation"}
-        <NavigationPanel />
-      {:else}
-        <ComponentSettingsPanel />
-      {/if}
-      <slot />
-    {/if}
-  </div>
+<div class="left">
+  <LeftPanel />
 </div>
+{#if routeComponentId === "screen"}
+  <ScreenSettingsPanel />
+{:else if routeComponentId === "navigation"}
+  <NavigationPanel />
+{:else}
+  <ComponentSettingsPanel />
+{/if}
+<slot />
 
 <style>
-  .design {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    height: 0;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    flex: 1 1 auto;
+  .left {
+    order: -1;
   }
 </style>

From e6a712f8806a11f8e78911f17cf54cf8d0e2d8c1 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 07:37:16 +0100
Subject: [PATCH 07/50] component ndentation

---
 .../builder/src/components/common/NavItem.svelte    | 13 +++++++++++--
 .../LeftPanel/Components/ComponentTree.svelte       |  3 ++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 6590463408..3b608e4860 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -21,6 +21,7 @@
   export let id
   export let showTooltip = false
   export let selectedBy = null
+  export let compact = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -80,8 +81,9 @@
     {#if withArrow}
       <div
         class:opened
-        class:relative={indentLevel === 0}
-        class:absolute={indentLevel > 0}
+        class:relative={indentLevel === 0 && !compact}
+        class:absolute={indentLevel > 0 && !compact}
+        class:compact
         class="icon arrow"
         on:click={onIconClick}
       >
@@ -194,6 +196,13 @@
     padding: 8px;
     margin-left: -8px;
   }
+
+  .compact {
+    position: absolute;
+    left: 4px;
+    padding: 8px;
+    margin-left: -8px;
+  }
   .icon.arrow :global(svg) {
     width: 12px;
     height: 12px;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
index 18319e4b33..636d69192a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
@@ -107,6 +107,7 @@
       id={`component-${component._id}`}
     >
       <NavItem
+          compact
         scrollable
         draggable
         on:dragend={dndStore.actions.reset}
@@ -117,7 +118,7 @@
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
         withArrow={componentHasChildren(component)}
-        indentLevel={level + 1}
+        indentLevel={level}
         selected={$store.selectedComponentId === component._id}
         {opened}
         highlighted={isChildOfSelectedComponent(component)}

From cc5a1be2a891f264e5b5c1e91b0fae0095b52e12 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 07:40:45 +0100
Subject: [PATCH 08/50] screen list alignment

---
 .../_components/LeftPanel/Screens/index.svelte           | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 3011579c63..07f4ffccaf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -97,7 +97,9 @@
         selectedBy={$userSelectedResourceMap[screen._id]}
       >
         <DropdownMenu screenId={screen._id} />
-        <RoleIndicator slot="icon" roleId={screen.routing.roleId} />
+        <div slot="icon" class="icon">
+          <RoleIndicator roleId={screen.routing.roleId} />
+        </div>
       </NavItem>
     {/each}
   </div>
@@ -230,4 +232,9 @@
   .closeButton {
     transform: rotate(45deg);
   }
+
+  .icon {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
 </style>

From 4ddf7974256e55dfe59579ed895dd870e669e3a8 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 07:49:32 +0100
Subject: [PATCH 09/50] left panel icon color

---
 .../_components/LeftPanel/Components/index.svelte             | 2 +-
 .../[componentId]/_components/LeftPanel/Screens/index.svelte  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
index 502ded853e..2155c2dbe3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
@@ -133,7 +133,7 @@
 
   .addButton {
     margin-left: auto;
-    color: var(--ink);
+    color: var(--grey-7);
     cursor: pointer;
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 07f4ffccaf..06454f3e25 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -211,7 +211,7 @@
   }
 
   .searchButton {
-    color: var(--ink);
+    color: var(--grey-7);
     cursor: pointer;
     margin-right: 10px;
     opacity: 1;
@@ -224,7 +224,7 @@
   }
 
   .addButton {
-    color: var(--ink);
+    color: var(--grey-7);
     cursor: pointer;
     transition: transform 300ms;
   }

From e267e71b68cb448e7a03b008ea3732e448be00f8 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 07:54:36 +0100
Subject: [PATCH 10/50] icon hover states

---
 .../_components/LeftPanel/Components/index.svelte      |  4 ++++
 .../_components/LeftPanel/Screens/index.svelte         | 10 +++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
index 2155c2dbe3..ddda5afbe9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
@@ -137,6 +137,10 @@
     cursor: pointer;
   }
 
+  .addButton:hover {
+    color: var(--ink);
+  }
+
   .list-panel {
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 06454f3e25..4566be423e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -74,7 +74,7 @@
       <Body size="S">Screens</Body>
     </div>
     <div on:click={openSearch} class="searchButton" class:hide={search}>
-      <Icon name="Search" />
+      <Icon size="S" name="Search" />
     </div>
     <div
       on:click={handleAddButton}
@@ -218,6 +218,10 @@
     transition: opacity 300ms;
   }
 
+  .searchButton:hover {
+    color: var(--ink);
+  }
+
   .hide {
     opacity: 0;
     pointer-events: none;
@@ -233,6 +237,10 @@
     transform: rotate(45deg);
   }
 
+  .addButton:hover {
+    color: var(--ink);
+  }
+
   .icon {
     margin-left: 4px;
     margin-right: 4px;

From a577b706d1ac0014db4bacf126fb25b618c2dc8d Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 07:57:06 +0100
Subject: [PATCH 11/50] change navitem chevron to be smaller for compact

---
 packages/builder/src/components/common/NavItem.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 3b608e4860..a65da55c8f 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -199,7 +199,7 @@
 
   .compact {
     position: absolute;
-    left: 4px;
+    left: 6px;
     padding: 8px;
     margin-left: -8px;
   }
@@ -207,6 +207,10 @@
     width: 12px;
     height: 12px;
   }
+  .icon.arrow.compact :global(svg) {
+    width: 9px;
+    height: 9px;
+  }
   .icon.arrow.relative {
     position: relative;
     margin: 0 -6px 0 -4px;

From 4a60cb1d8ecd64b6d5dcadfdcdeb29edff36eb6f Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 07:58:18 +0100
Subject: [PATCH 12/50] font family for input

---
 .../[componentId]/_components/LeftPanel/Screens/index.svelte    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 4566be423e..4a5695ba4b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -131,6 +131,7 @@
   .newScreenVisible {
     height: calc(100vh - 58px);
   }
+
   .screens {
     height: 212px;
     display: flex;
@@ -159,6 +160,7 @@
   }
 
   .input {
+    font-family: var(--font-sans);
     position: absolute;
     padding-left: 12px;
     color: var(--ink);

From 0582c74ba0eb78b7f4a913e6c374fd770b8831fb Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 08:06:49 +0100
Subject: [PATCH 13/50] links editor

---
 .../_components/Navigation/LinksDrawer.svelte | 130 ++++++++++++++++++
 .../_components/Navigation/LinksEditor.svelte |  34 +++++
 .../_components/Navigation/index.svelte       |   3 +-
 3 files changed, 166 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte
new file mode 100644
index 0000000000..5ffccc5800
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte
@@ -0,0 +1,130 @@
+<script>
+  import {
+    Button,
+    Icon,
+    DrawerContent,
+    Layout,
+    Input,
+    Combobox,
+  } from "@budibase/bbui"
+  import { flip } from "svelte/animate"
+  import { dndzone } from "svelte-dnd-action"
+  import { generate } from "shortid"
+  import { store } from "builderStore"
+  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
+
+  export let links = []
+
+  const flipDurationMs = 150
+  let dragDisabled = true
+
+  $: links.forEach(link => {
+    if (!link.id) {
+      link.id = generate()
+    }
+  })
+  $: urlOptions = $store.screens
+    .map(screen => screen.routing?.route)
+    .filter(x => x != null)
+
+  const addLink = () => {
+    links = [...links, {}]
+  }
+
+  const removeLink = id => {
+    links = links.filter(link => link.id !== id)
+  }
+
+  const updateLinks = e => {
+    links = e.detail.items
+  }
+
+  const handleFinalize = e => {
+    updateLinks(e)
+    dragDisabled = true
+  }
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding gap="S">
+      {#if links?.length}
+        <div
+          class="links"
+          use:dndzone={{
+            items: links,
+            flipDurationMs,
+            dropTargetStyle: { outline: "none" },
+            dragDisabled,
+          }}
+          on:finalize={handleFinalize}
+          on:consider={updateLinks}
+        >
+          {#each links as link (link.id)}
+            <div class="link" animate:flip={{ duration: flipDurationMs }}>
+              <div
+                class="handle"
+                aria-label="drag-handle"
+                style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                on:mousedown={() => (dragDisabled = false)}
+              >
+                <Icon name="DragHandle" size="XL" />
+              </div>
+              <Input bind:value={link.text} placeholder="Text" />
+              <Combobox
+                bind:value={link.url}
+                placeholder="URL"
+                options={urlOptions}
+              />
+              <RoleSelect bind:value={link.roleId} placeholder="Minimum role" />
+              <Icon
+                name="Close"
+                hoverable
+                size="S"
+                on:click={() => removeLink(link.id)}
+              />
+            </div>
+          {/each}
+        </div>
+      {/if}
+      <div>
+        <Button secondary icon="Add" on:click={addLink}>Add Link</Button>
+      </div>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .links {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .link {
+    gap: var(--spacing-l);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--border-radius-s);
+    transition: background-color ease-in-out 130ms;
+  }
+  .link:hover {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+  .link > :global(.spectrum-Form-item) {
+    flex: 1 1 auto;
+    width: 0;
+  }
+  .handle {
+    display: grid;
+    place-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte
new file mode 100644
index 0000000000..9ab6681273
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { Button, Drawer } from "@budibase/bbui"
+  import NavigationLinksDrawer from "./LinksDrawer.svelte"
+  import { cloneDeep } from "lodash/fp"
+  import { store } from "builderStore"
+
+  let drawer
+  let links
+
+  const openDrawer = () => {
+    links = cloneDeep($store.navigation.links || [])
+    drawer.show()
+  }
+
+  const save = async () => {
+    let navigation = $store.navigation
+    navigation.links = links
+    await store.actions.navigation.save(navigation)
+    drawer.hide()
+  }
+</script>
+
+<Button cta on:click={openDrawer}>Configure Links</Button>
+<Drawer
+  bind:this={drawer}
+  title={"Navigation Links"}
+  width="calc(100% - 334px)"
+>
+  <svelte:fragment slot="description">
+    Configure the links in your navigation bar.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <NavigationLinksDrawer slot="body" bind:links />
+</Drawer>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
index 6da744a44a..16baa3bfff 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
@@ -1,4 +1,5 @@
 <script>
+  import LinksEditor from './LinksEditor.svelte'
   import { get } from "svelte/store"
   import Panel from "components/design/Panel.svelte"
   import {
@@ -68,7 +69,7 @@
       </div>
     </div>
     <div class="configureLinks">
-      <Button cta>Configure Links</Button>
+      <LinksEditor />
     </div>
     <div class="controls">
       <div class="label">

From a5044ea85a5e0bb6a5913dabae81be608c3ccc65 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 08:08:53 +0100
Subject: [PATCH 14/50] conditional nav panel customize

---
 .../[componentId]/_components/Navigation/index.svelte        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
index 16baa3bfff..6a70b38697 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
@@ -57,6 +57,10 @@
       <Body size="S">Show nav on this screen</Body>
     </div>
   </div>
+
+
+
+  {#if $selectedScreen.showNavigation}
   <div class="divider" />
   <div class="customizeSection">
     <div class="subheading">
@@ -160,6 +164,7 @@
       />
     </div>
   </div>
+  {/if}
 </Panel>
 
 <style>

From c11cd9c3e2b296efbe2829f438e01bde70804235 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 08:12:49 +0100
Subject: [PATCH 15/50] remove new screen animation

---
 .../_components/LeftPanel/Screens/index.svelte           | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 4a5695ba4b..47318c8530 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -118,18 +118,17 @@
 
 <style>
   .newScreen {
+    display: none;
     width: 100vw;
-    height: 0;
     bottom: 0;
-    overflow: hidden;
     position: absolute;
-    background-color: var(--background);
+    height: calc(100vh - 58px);
     z-index: 2;
-    transition: height 350ms ease-in-out;
+    background-color: var(--background);
   }
 
   .newScreenVisible {
-    height: calc(100vh - 58px);
+    display: initial;
   }
 
   .screens {

From 67d5eef29360fa8cb525e677cfde085a7d18be87 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 08:16:42 +0100
Subject: [PATCH 16/50] screen search text

---
 .../LeftPanel/Screens/index.svelte            | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 47318c8530..2e993a5d93 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -85,31 +85,32 @@
     </div>
   </div>
   <div on:scroll={handleScroll} bind:this={screensContainer} class="content">
-    {#each filteredScreens as screen (screen._id)}
-      <NavItem
-        icon={screen.routing.homeScreen ? "Home" : null}
-        indentLevel={0}
-        selected={$store.selectedScreenId === screen._id}
-        text={screen.routing.route}
-        on:click={() => store.actions.screens.select(screen._id)}
-        rightAlignIcon
-        showTooltip
-        selectedBy={$userSelectedResourceMap[screen._id]}
-      >
-        <DropdownMenu screenId={screen._id} />
-        <div slot="icon" class="icon">
-          <RoleIndicator roleId={screen.routing.roleId} />
-        </div>
-      </NavItem>
-    {/each}
+    {#if filteredScreens?.length}
+      {#each filteredScreens as screen (screen._id)}
+        <NavItem
+          icon={screen.routing.homeScreen ? "Home" : null}
+          indentLevel={0}
+          selected={$store.selectedScreenId === screen._id}
+          text={screen.routing.route}
+          on:click={() => store.actions.screens.select(screen._id)}
+          rightAlignIcon
+          showTooltip
+          selectedBy={$userSelectedResourceMap[screen._id]}
+        >
+          <DropdownMenu screenId={screen._id} />
+          <div slot="icon" class="icon">
+            <RoleIndicator roleId={screen.routing.roleId} />
+          </div>
+        </NavItem>
+      {/each}
+    {:else}
+      <Layout paddingY="L" paddingX="L">
+        <Body size="S">
+          There aren't any screens matching the current filters
+        </Body>
+      </Layout>
+    {/if}
   </div>
-  {#if !filteredScreens?.length}
-    <Layout paddingY="" paddingX="L">
-      <Body size="S">
-        There aren't any screens matching the current filters
-      </Body>
-    </Layout>
-  {/if}
 </div>
 
 <div class="newScreen" class:newScreenVisible={newScreen}>

From d0f9694d24c00e60848edb6078a7e4afa8224219 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 08:33:53 +0100
Subject: [PATCH 17/50] linting

---
 .../src/builderStore/store/frontend.js        |   8 +-
 .../[screenId]/_components/AppPreview.svelte  |   7 +-
 .../LeftPanel/Components/ComponentTree.svelte |   2 +-
 .../_components/Navigation/index.svelte       | 190 +++++++++---------
 4 files changed, 105 insertions(+), 102 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 76e38a8b94..164fda4440 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -1000,10 +1000,10 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (componentId === 'screen') {
+        if (componentId === "screen") {
           return null
         }
-        if (componentId === 'navigation') {
+        if (componentId === "navigation") {
           return "screen"
         }
         if (parent._id === screen.props._id && index === 0) {
@@ -1037,8 +1037,8 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (state.selectedComponentId === 'screen') {
-          return 'navigation'
+        if (state.selectedComponentId === "screen") {
+          return "navigation"
         }
 
         // If we have children, select first child
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index a7c2003741..29c7dbe060 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -1,7 +1,12 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import { store, selectedComponent, selectedScreen, currentAsset } from "builderStore"
+  import {
+    store,
+    selectedComponent,
+    selectedScreen,
+    currentAsset,
+  } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
index 636d69192a..0e23f82946 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
@@ -107,7 +107,7 @@
       id={`component-${component._id}`}
     >
       <NavItem
-          compact
+        compact
         scrollable
         draggable
         on:dragend={dndStore.actions.reset}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
index 6a70b38697..97622098cd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import LinksEditor from './LinksEditor.svelte'
+  import LinksEditor from "./LinksEditor.svelte"
   import { get } from "svelte/store"
   import Panel from "components/design/Panel.svelte"
   import {
@@ -7,7 +7,6 @@
     Toggle,
     Body,
     Icon,
-    Button,
     ColorPicker,
     Input,
     Label,
@@ -58,112 +57,111 @@
     </div>
   </div>
 
-
-
   {#if $selectedScreen.showNavigation}
-  <div class="divider" />
-  <div class="customizeSection">
-    <div class="subheading">
-      <Detail>Customize</Detail>
-    </div>
-    <div class="info">
-      <div class="infoHeader">
-        <Icon name="InfoOutline" />
-        <Body size="S">These settings apply to all screens</Body>
+    <div class="divider" />
+    <div class="customizeSection">
+      <div class="subheading">
+        <Detail>Customize</Detail>
       </div>
-    </div>
-    <div class="configureLinks">
-      <LinksEditor />
-    </div>
-    <div class="controls">
-      <div class="label">
-        <Label size="M">Position</Label>
+      <div class="info">
+        <div class="infoHeader">
+          <Icon name="InfoOutline" />
+          <Body size="S">These settings apply to all screens</Body>
+        </div>
       </div>
-      <ActionGroup quiet>
-        <ActionButton
-          selected={$store.navigation.navigation === "Top"}
-          quiet={$store.navigation.navigation !== "Top"}
-          icon="PaddingTop"
-          on:click={() => update("navigation", "Top")}
-        />
-        <ActionButton
-          selected={$store.navigation.navigation === "Left"}
-          quiet={$store.navigation.navigation !== "Left"}
-          icon="PaddingLeft"
-          on:click={() => update("navigation", "Left")}
-        />
-      </ActionGroup>
-
-      {#if $store.navigation.navigation === "Top"}
+      <div class="configureLinks">
+        <LinksEditor />
+      </div>
+      <div class="controls">
         <div class="label">
-          <Label size="M">Sticky header</Label>
+          <Label size="M">Position</Label>
+        </div>
+        <ActionGroup quiet>
+          <ActionButton
+            selected={$store.navigation.navigation === "Top"}
+            quiet={$store.navigation.navigation !== "Top"}
+            icon="PaddingTop"
+            on:click={() => update("navigation", "Top")}
+          />
+          <ActionButton
+            selected={$store.navigation.navigation === "Left"}
+            quiet={$store.navigation.navigation !== "Left"}
+            icon="PaddingLeft"
+            on:click={() => update("navigation", "Left")}
+          />
+        </ActionGroup>
+
+        {#if $store.navigation.navigation === "Top"}
+          <div class="label">
+            <Label size="M">Sticky header</Label>
+          </div>
+          <Checkbox
+            value={$store.navigation.sticky}
+            on:change={e => update("sticky", e.detail)}
+          />
+          <div class="label">
+            <Label size="M">Width</Label>
+          </div>
+          <Select
+            options={["Max", "Large", "Medium", "Small"]}
+            plaveholder={null}
+            value={$store.navigation.navWidth}
+            on:change={e => update("navWidth", e.detail)}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show logo</Label>
         </div>
         <Checkbox
-          value={$store.navigation.sticky}
-          on:change={e => update("sticky", e.detail)}
+          value={!$store.navigation.hideLogo}
+          on:change={e => update("hideLogo", !e.detail)}
+        />
+        {#if !$store.navigation.hideLogo}
+          <div class="label">
+            <Label size="M">Logo URL</Label>
+          </div>
+          <Input
+            value={$store.navigation.logoUrl}
+            on:change={e => update("logoUrl", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show title</Label>
+        </div>
+        <Checkbox
+          value={!$store.navigation.hideTitle}
+          on:change={e => update("hideTitle", !e.detail)}
+        />
+        {#if !$store.navigation.hideTitle}
+          <div class="label">
+            <Label size="M">Title</Label>
+          </div>
+          <Input
+            value={$store.navigation.title}
+            on:change={e => update("title", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label>Background</Label>
+        </div>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navBackground ||
+            DefaultAppTheme.navBackground}
+          on:change={e => update("navBackground", e.detail)}
         />
         <div class="label">
-          <Label size="M">Width</Label>
+          <Label>Text</Label>
         </div>
-        <Select
-          options={["Max", "Large", "Medium", "Small"]}
-          plaveholder={null}
-          value={$store.navigation.navWidth}
-          on:change={e => update("navWidth", e.detail)}
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
+          on:change={e => update("navTextColor", e.detail)}
         />
-      {/if}
-      <div class="label">
-        <Label size="M">Show logo</Label>
       </div>
-      <Checkbox
-        value={!$store.navigation.hideLogo}
-        on:change={e => update("hideLogo", !e.detail)}
-      />
-      {#if !$store.navigation.hideLogo}
-        <div class="label">
-          <Label size="M">Logo URL</Label>
-        </div>
-        <Input
-          value={$store.navigation.logoUrl}
-          on:change={e => update("logoUrl", e.detail)}
-          updateOnChange={false}
-        />
-      {/if}
-      <div class="label">
-        <Label size="M">Show title</Label>
-      </div>
-      <Checkbox
-        value={!$store.navigation.hideTitle}
-        on:change={e => update("hideTitle", !e.detail)}
-      />
-      {#if !$store.navigation.hideTitle}
-        <div class="label">
-          <Label size="M">Title</Label>
-        </div>
-        <Input
-          value={$store.navigation.title}
-          on:change={e => update("title", e.detail)}
-          updateOnChange={false}
-        />
-      {/if}
-      <div class="label">
-        <Label>Background</Label>
-      </div>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
-        on:change={e => update("navBackground", e.detail)}
-      />
-      <div class="label">
-        <Label>Text</Label>
-      </div>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
-        on:change={e => update("navTextColor", e.detail)}
-      />
     </div>
-  </div>
   {/if}
 </Panel>
 

From ec9f0a25ec071ac57ccc306a8e7b343db3162185 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:16:22 +0100
Subject: [PATCH 18/50] Add background color to left panel

---
 .../components/[componentId]/_components/LeftPanel/index.svelte  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
index b7591253be..86c0df8cac 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
@@ -16,6 +16,7 @@
     border-right: 2px solid var(--grey-2);
     display: flex;
     flex-direction: column;
+    background: var(--background);
   }
 
   .divider {

From 919158cf78d3ba322253827e36deadd90d3a9076 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:16:35 +0100
Subject: [PATCH 19/50] Use normal scrollbar for screen list

---
 .../LeftPanel/Screens/index.svelte            | 38 +++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 2e993a5d93..0ce66707f9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -5,6 +5,7 @@
   import RoleIndicator from "./RoleIndicator.svelte"
   import DropdownMenu from "./DropdownMenu.svelte"
   import NewScreen from "components/design/NewScreen/index.svelte"
+  import { tick } from "svelte"
 
   let newScreen = false
   let search = false
@@ -15,8 +16,9 @@
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
-  const openSearch = () => {
+  const openSearch = async () => {
     search = true
+    await tick()
     searchInput.focus()
     screensContainer.scroll({ top: 0, behavior: "smooth" })
   }
@@ -136,7 +138,7 @@
     height: 212px;
     display: flex;
     flex-direction: column;
-    transition: height 300ms;
+    transition: height 300ms ease-out;
   }
 
   .screenSearch {
@@ -152,7 +154,7 @@
     display: flex;
     align-items: center;
     border-bottom: 2px solid transparent;
-    transition: border-bottom 300ms;
+    transition: border-bottom 300ms ease-out;
   }
 
   .headerScrolling {
@@ -164,17 +166,21 @@
     position: absolute;
     padding-left: 12px;
     color: var(--ink);
-    background-color: var(--background-alt);
+    background-color: transparent;
     border: none;
     font-size: var(--spectrum-alias-font-size-default);
     width: 260px;
     box-sizing: border-box;
+    display: none;
   }
-
   .input:focus {
     outline: none;
   }
 
+  .screenSearch input {
+    display: block;
+  }
+
   .title {
     display: flex;
     align-items: center;
@@ -183,8 +189,7 @@
     padding-left: 12px;
     flex: 1;
     opacity: 1;
-    transition: opacity 300ms;
-    background-color: var(--background-alt);
+    transition: opacity 300ms ease-out;
     z-index: 1;
   }
 
@@ -193,21 +198,6 @@
     flex-grow: 1;
   }
 
-  .content::-webkit-scrollbar-track {
-    background: var(--background-alt);
-  }
-
-  .content::-webkit-scrollbar {
-    width: 18px;
-  }
-
-  .content::-webkit-scrollbar-thumb {
-    background-color: var(--grey-3);
-    border-radius: 20px;
-    border: 1px solid var(--background-alt);
-    border-width: 5px 5px;
-  }
-
   .screens :global(.nav-item) {
     padding-right: 8px !important;
   }
@@ -217,7 +207,7 @@
     cursor: pointer;
     margin-right: 10px;
     opacity: 1;
-    transition: opacity 300ms;
+    transition: opacity 300ms ease-out;
   }
 
   .searchButton:hover {
@@ -232,7 +222,7 @@
   .addButton {
     color: var(--grey-7);
     cursor: pointer;
-    transition: transform 300ms;
+    transition: transform 300ms ease-out;
   }
 
   .closeButton {

From 909941aa6e4fb1253ae0046c7559d074209a6a55 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:17:05 +0100
Subject: [PATCH 20/50] Use normal spectrum color for screen search placeholder

---
 .../[componentId]/_components/LeftPanel/Screens/index.svelte   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 0ce66707f9..203891418b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -176,6 +176,9 @@
   .input:focus {
     outline: none;
   }
+  .input::placeholder {
+    color: var(--spectrum-global-color-gray-600);
+  }
 
   .screenSearch input {
     display: block;

From 7e706c403a160e0ac4496c3f65058d2340d20551 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:21:48 +0100
Subject: [PATCH 21/50] Adjust no results text when searching for screens

---
 .../_components/LeftPanel/Screens/index.svelte       | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 203891418b..15b956d669 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -106,10 +106,10 @@
         </NavItem>
       {/each}
     {:else}
-      <Layout paddingY="L" paddingX="L">
-        <Body size="S">
-          There aren't any screens matching the current filters
-        </Body>
+      <Layout paddingY="none" paddingX="L">
+        <div class="no-results">
+          There aren't any screens matching that route
+        </div>
       </Layout>
     {/if}
   </div>
@@ -240,4 +240,8 @@
     margin-left: 4px;
     margin-right: 4px;
   }
+
+  .no-results {
+    color: var(--spectrum-global-color-gray-600);
+  }
 </style>

From 0c57699d998113e02dab618169bb85beac335ade Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:23:11 +0100
Subject: [PATCH 22/50] Remove deprecated settings from screen settings

---
 .../_components/Screen/SettingsPanel.svelte       | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte
index 8982cd20de..e6200272be 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte
@@ -5,8 +5,6 @@
   import {
     Input,
     Layout,
-    Button,
-    Toggle,
     Checkbox,
     Banner,
     Select,
@@ -16,7 +14,6 @@
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import { selectedScreen, store } from "builderStore"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { goto } from "@roxi/routify"
   import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
   import { getBindableProperties } from "builderStore/dataBinding"
 
@@ -119,15 +116,6 @@
       label: "On screen load",
       control: ButtonActionEditor,
     },
-    {
-      key: "showNavigation",
-      label: "Navigation",
-      control: Toggle,
-      props: {
-        text: "Show nav",
-        disabled: !!$selectedScreen.layoutId,
-      },
-    },
     {
       key: "width",
       label: "Width",
@@ -173,8 +161,5 @@
         {bindings}
       />
     {/each}
-    <Button secondary on:click={() => $goto("../components")}>
-      View components
-    </Button>
   </Layout>
 </Panel>

From 96e67c680b31dda110774dc682899d4c3ac2cb3a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:24:00 +0100
Subject: [PATCH 23/50] Fix navigation links drawer width

---
 .../[componentId]/_components/Navigation/LinksEditor.svelte | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte
index 9ab6681273..b081ea6d72 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte
@@ -21,11 +21,7 @@
 </script>
 
 <Button cta on:click={openDrawer}>Configure Links</Button>
-<Drawer
-  bind:this={drawer}
-  title={"Navigation Links"}
-  width="calc(100% - 334px)"
->
+<Drawer bind:this={drawer} title={"Navigation Links"}>
   <svelte:fragment slot="description">
     Configure the links in your navigation bar.
   </svelte:fragment>

From 0ea81f98d6fd317367b60e76d9ac14f8f602a9bc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:29:40 +0100
Subject: [PATCH 24/50] Update panel headings to match new designs

---
 packages/builder/src/components/design/Panel.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 3968292ba9..db8d9b9096 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Heading } from "@budibase/bbui"
+  import { Icon, Heading, Body } from "@budibase/bbui"
 
   export let title
   export let icon
@@ -25,7 +25,7 @@
       <Icon name={icon} />
     {/if}
     <div class="title">
-      <Heading size="XXS">{title || ""}</Heading>
+      <Body size="S">{title}</Body>
     </div>
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
@@ -78,15 +78,14 @@
     align-items: center;
     padding: 0 var(--spacing-l);
     border-bottom: var(--border-light);
-    gap: var(--spacing-l);
+    gap: var(--spacing-m);
   }
   .title {
     flex: 1 1 auto;
     width: 0;
   }
-  .title :global(h1) {
+  .title :global(p) {
     overflow: hidden;
-    font-weight: 600;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

From a6a6eb0ffe9ffab906e6b26d35451ad2b2a82636 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:37:03 +0100
Subject: [PATCH 25/50] Update screen panel heading to match designs

---
 .../_components/LeftPanel/Screens/index.svelte            | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index 15b956d669..a3762b81ed 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -148,9 +148,9 @@
   .header {
     flex-shrink: 0;
     position: relative;
-    height: 51px;
+    height: 50px;
     box-sizing: border-box;
-    padding: 0 12px 0 0;
+    padding: 0 var(--spacing-l);
     display: flex;
     align-items: center;
     border-bottom: 2px solid transparent;
@@ -164,7 +164,6 @@
   .input {
     font-family: var(--font-sans);
     position: absolute;
-    padding-left: 12px;
     color: var(--ink);
     background-color: transparent;
     border: none;
@@ -189,10 +188,8 @@
     align-items: center;
     height: 100%;
     box-sizing: border-box;
-    padding-left: 12px;
     flex: 1;
     opacity: 1;
-    transition: opacity 300ms ease-out;
     z-index: 1;
   }
 
@@ -210,7 +207,6 @@
     cursor: pointer;
     margin-right: 10px;
     opacity: 1;
-    transition: opacity 300ms ease-out;
   }
 
   .searchButton:hover {

From eba2fb0f130b9ea935cf1d7f5633821194b949c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:41:15 +0100
Subject: [PATCH 26/50] Update component list header to be consistent

---
 .../_components/LeftPanel/Components/index.svelte   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
index ddda5afbe9..c13d0852ce 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <div class="components">
-  <div class="header" class:headerScrolling={scrolling}>
+  <div class="header" class:scrolling>
     <Body size="S">Components</Body>
     <div on:click={toNewComponentRoute} class="addButton">
       <Icon name="Add" />
@@ -116,15 +116,16 @@
   }
 
   .header {
-    padding: 15px 12px;
+    height: 50px;
+    box-sizing: border-box;
+    padding: var(--spacing-l);
     display: flex;
     align-items: center;
     border-bottom: 2px solid transparent;
-    transition: border-bottom 300ms;
+    transition: border-bottom 130ms ease-out;
   }
-
-  .headerScrolling {
-    border-bottom: 2px solid var(--grey-2);
+  .header.scrolling {
+    border-bottom: var(--border-light);
   }
 
   .components :global(.nav-item) {

From a07f343f839323f9149ebc01cc5ec6388f86bdb0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:45:37 +0100
Subject: [PATCH 27/50] Fix component scroll offsets not working

---
 .../Components/ComponentScrollWrapper.svelte    | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentScrollWrapper.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentScrollWrapper.svelte
index 226aff88ab..484b56f21c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentScrollWrapper.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentScrollWrapper.svelte
@@ -16,7 +16,7 @@
     let newOffsets = {}
 
     // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollLeft - 36
+    const offsetX = bounds.left + bounds.width + scrollLeft + 16
     if (offsetX > sidebarWidth) {
       newOffsets.left = offsetX - sidebarWidth
     } else {
@@ -79,19 +79,4 @@
     overflow: auto;
     height: 0;
   }
-
-  div::-webkit-scrollbar-track {
-    background: var(--background-alt);
-  }
-
-  div::-webkit-scrollbar {
-    width: 18px;
-  }
-
-  div::-webkit-scrollbar-thumb {
-    background-color: var(--grey-3);
-    border-radius: 20px;
-    border: 1px solid var(--background-alt);
-    border-width: 5px 5px;
-  }
 </style>

From a4a639c2ba98e088a8cc4a0e1fba496ac440f155 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 16:49:04 +0100
Subject: [PATCH 28/50] Update screen list size slightly

---
 .../[componentId]/_components/LeftPanel/Screens/index.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
index a3762b81ed..c11e933624 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
@@ -135,7 +135,7 @@
   }
 
   .screens {
-    height: 212px;
+    height: 210px;
     display: flex;
     flex-direction: column;
     transition: height 300ms ease-out;

From d0414812cf6f90e6be635b2d7feeff972f28015b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 17:51:47 +0100
Subject: [PATCH 29/50] Adjust design section page layouts to stop remounting
 left nav on screen change

---
 .../app/[application]/design/[screenId]/_layout.svelte |  2 ++
 .../[componentId]/_components/LeftPanel/index.svelte   |  9 ++++++---
 .../[screenId]/components/[componentId]/_layout.svelte | 10 ----------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 9bc1806349..8471cc03ed 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -4,6 +4,7 @@
   import { syncURLToState } from "helpers/urlStateSync"
   import { store } from "builderStore"
   import { onDestroy } from "svelte"
+  import LeftPanel from "./components/[componentId]/_components/LeftPanel/index.svelte"
 
   $: screenId = $store.selectedScreenId
   $: store.actions.websocket.selectResource(screenId)
@@ -23,6 +24,7 @@
 
 <div class="design">
   <div class="content">
+    <LeftPanel />
     <AppPanel />
     <slot />
   </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
index 86c0df8cac..c1fe15f625 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
@@ -1,25 +1,28 @@
 <script>
   import Screens from "./Screens/index.svelte"
   import Components from "./Components/index.svelte"
+  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <Screens />
   <div class="divider" />
-  <Components />
+  {#if $selectedScreen}
+    <Components />
+  {/if}
 </div>
 
 <style>
   .panel {
     width: 310px;
     height: 100%;
-    border-right: 2px solid var(--grey-2);
+    border-right: var(--border-light);
     display: flex;
     flex-direction: column;
     background: var(--background);
   }
 
   .divider {
-    border-bottom: 2px solid var(--grey-2);
+    border-bottom: var(--border-light);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 807109326a..51c3c64321 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -1,5 +1,4 @@
 <script>
-  import LeftPanel from "./_components/LeftPanel/index.svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import * as routify from "@roxi/routify"
@@ -47,9 +46,6 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="left">
-  <LeftPanel />
-</div>
 {#if routeComponentId === "screen"}
   <ScreenSettingsPanel />
 {:else if routeComponentId === "navigation"}
@@ -58,9 +54,3 @@
   <ComponentSettingsPanel />
 {/if}
 <slot />
-
-<style>
-  .left {
-    order: -1;
-  }
-</style>

From a83e987dcdeeb81d968fb93dcb6d38d665782f3b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 18:55:36 +0100
Subject: [PATCH 30/50] Stop preview jumping when scrolling to components, and
 improve scrolling behaviour

---
 packages/client/src/components/Component.svelte  |  2 +-
 packages/client/src/components/app/Layout.svelte | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 31f3cc3db6..94e7587010 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -475,7 +475,7 @@
     node.style.scrollMargin = "100px"
     node.scrollIntoView({
       behavior: "smooth",
-      block: "start",
+      block: "nearest",
       inline: "start",
     })
   }
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index b7aff4047a..5207892e42 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -73,18 +73,20 @@
   )
   $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
 
-  // Scroll navigation into view if selected
+  // Scroll navigation into view if selected.
+  // Memoize into a primitive to avoid spamming this whenever builder store
+  // changes.
+  $: selected =
+    $builderStore.inBuilder &&
+    $builderStore.selectedComponentId === "navigation"
   $: {
-    if (
-      $builderStore.inBuilder &&
-      $builderStore.selectedComponentId === "navigation"
-    ) {
+    if (selected) {
       const node = document.getElementsByClassName("nav-wrapper")?.[0]
       if (node) {
         node.style.scrollMargin = "100px"
         node.scrollIntoView({
           behavior: "smooth",
-          block: "start",
+          block: "nearest",
           inline: "start",
         })
       }

From a54c5b7222edc4b5cc75f6ec901f2eacd99ddcb6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 10:27:56 +0100
Subject: [PATCH 31/50] Add resizable screen/component sections and remove
 redundant /components route

---
 .../src/builderStore/store/frontend.js        |   2 +-
 .../Component/ComponentInfoSection.svelte     |   0
 .../Component/ComponentSettingsPanel.svelte   |   0
 .../Component/ComponentSettingsSection.svelte |   0
 .../Component/ConditionalUIDrawer.svelte      |   0
 .../Component/ConditionalUISection.svelte     |   0
 .../Component/CustomStylesSection.svelte      |   0
 .../Component/DesignSection.svelte            |   0
 .../_components/Component/StyleSection.svelte |   0
 .../_components/Component/componentStyles.js  |   0
 .../_components/Navigation/LinksDrawer.svelte |   0
 .../_components/Navigation/LinksEditor.svelte |   0
 .../_components/Navigation/index.svelte       |   0
 .../_components/Screen/SettingsPanel.svelte   |   0
 .../[componentId]/_layout.svelte              |   0
 .../[screenId]/[componentId]/index.svelte     |   1 +
 .../new/_components/NewComponentPanel.svelte  |   2 +-
 .../new/_components/componentStructure.json   |   0
 .../[componentId]/new/index.svelte            |   0
 .../[screenId]/_components/AppPanel.svelte    |   4 +-
 .../[screenId]/_components/AppPreview.svelte  |   8 +-
 .../ComponentDropdownMenu.svelte              |   0
 .../ComponentList}/ComponentKeyHandler.svelte |   0
 .../ComponentScrollWrapper.svelte             |   0
 .../ComponentList}/ComponentTree.svelte       |   0
 .../DNDPositionIndicator.svelte               |   0
 .../ScreenslotDropdownMenu.svelte             |   0
 .../ComponentList}/dndStore.js                |   0
 .../ComponentList}/index.svelte               |  10 +-
 .../[screenId]/_components/LeftPanel.svelte   |  24 ++++
 .../ScreenList}/DropdownMenu.svelte           |   0
 .../ScreenList}/RoleIndicator.svelte          |   0
 .../ScreenList}/index.svelte                  | 106 +++++++++++++-----
 .../design/[screenId]/_layout.svelte          |   2 +-
 .../_components/LeftPanel/index.svelte        |  28 -----
 .../components/[componentId]/index.svelte     |   4 -
 .../design/[screenId]/components/index.svelte |   8 --
 .../design/[screenId]/index.svelte            |   5 +-
 .../app/[application]/design/index.svelte     |   2 +-
 39 files changed, 117 insertions(+), 89 deletions(-)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/ComponentInfoSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/ComponentSettingsPanel.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/ComponentSettingsSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/ConditionalUIDrawer.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/ConditionalUISection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/CustomStylesSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/DesignSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/StyleSection.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Component/componentStyles.js (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Navigation/LinksDrawer.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Navigation/LinksEditor.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Navigation/index.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_components/Screen/SettingsPanel.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/_layout.svelte (100%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/new/_components/NewComponentPanel.svelte (99%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/new/_components/componentStructure.json (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components => }/[componentId]/new/index.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/ComponentDropdownMenu.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/ComponentKeyHandler.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/ComponentScrollWrapper.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/ComponentTree.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/DNDPositionIndicator.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/ScreenslotDropdownMenu.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/dndStore.js (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Components => _components/ComponentList}/index.svelte (96%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Screens => _components/ScreenList}/DropdownMenu.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Screens => _components/ScreenList}/RoleIndicator.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/{components/[componentId]/_components/LeftPanel/Screens => _components/ScreenList}/index.svelte (70%)
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 164fda4440..46b4bab6c0 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -225,7 +225,7 @@ export const getFrontendStore = () => {
         // Select new screen
         store.update(state => {
           state.selectedScreenId = screen._id
-          state.selectedComponentId = screen.props?._id
+          state.selectedComponentId = "screen"
           return state
         })
       },
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentInfoSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUIDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUISection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/CustomStylesSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/DesignSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/StyleSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/componentStyles.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/SettingsPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/SettingsPanel.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte
new file mode 100644
index 0000000000..0ff63d1ead
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte
@@ -0,0 +1 @@
+<!-- Required to make Routify happy -->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
similarity index 99%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index 7dca5b792b..4500723027 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import { goto } from "@roxi/routify"
+  import { goto, url } from "@roxi/routify"
   import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
   import structure from "./componentStructure.json"
   import { store, selectedComponent, selectedScreen } from "builderStore"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/index.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/index.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 379cebca37..cbb50d96bd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -9,9 +9,7 @@
 <div class="app-panel">
   <div class="header">
     <div class="header-left">
-      {#if $isActive("./screens") || $isActive("./components")}
-        <UndoRedoControl store={screenHistoryStore} />
-      {/if}
+      <UndoRedoControl store={screenHistoryStore} />
     </div>
     <div class="header-right">
       {#if $store.clientFeatures.devicePreview}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 29c7dbe060..687ea2d579 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -70,9 +70,7 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(
-    `./components/${$selectedComponent?._id}/new`
-  )
+  $: isAddingComponent = $isActive(`./${$selectedComponent?._id}/new`)
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -215,9 +213,9 @@
 
   const toggleAddComponent = () => {
     if (isAddingComponent) {
-      $goto(`./components/${$selectedComponent?._id}`)
+      $goto(`./${$selectedComponent?._id}`)
     } else {
-      $goto(`./components/${$selectedComponent?._id}/new`)
+      $goto(`./${$selectedComponent?._id}/new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentKeyHandler.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentScrollWrapper.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentScrollWrapper.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/DNDPositionIndicator.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/DNDPositionIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/DNDPositionIndicator.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ScreenslotDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ScreenslotDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ScreenslotDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ScreenslotDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/dndStore.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/dndStore.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
similarity index 96%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index c13d0852ce..eb186dfed5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -14,10 +14,10 @@
   let scrolling = false
 
   const toNewComponentRoute = () => {
-    if ($isActive("./new")) {
+    if ($isActive(`./${$store.selectedComponentId}/new`)) {
       return
     } else {
-      $goto(`./new`)
+      $goto(`./${$store.selectedComponentId}/new`)
     }
   }
 
@@ -31,11 +31,7 @@
   }
 
   const handleScroll = e => {
-    if (e.target.scrollTop === 0) {
-      scrolling = false
-    } else {
-      scrolling = true
-    }
+    scrolling = e.target.scrollTop !== 0
   }
 </script>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
new file mode 100644
index 0000000000..32150ef921
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -0,0 +1,24 @@
+<script>
+  import ScreenList from "./ScreenList/index.svelte"
+  import ComponentList from "./ComponentList/index.svelte"
+  import { isActive } from "@roxi/routify"
+</script>
+
+<div class="panel">
+  <ScreenList />
+  {#if $isActive("./:componentId")}
+    <ComponentList />
+  {/if}
+</div>
+
+<style>
+  .panel {
+    width: 310px;
+    height: 100%;
+    border-right: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    background: var(--background);
+    position: relative;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/DropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/DropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/RoleIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
similarity index 70%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index c11e933624..9324b2073d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -9,29 +9,42 @@
 
   let newScreen = false
   let search = false
+  let resizing = false
   let searchValue = ""
   let searchInput
   let screensContainer
   let scrolling = false
+  let height = "210px"
+  let previousHeight = null
+  let dragOffset
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
+  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
   const openSearch = async () => {
     search = true
     await tick()
     searchInput.focus()
     screensContainer.scroll({ top: 0, behavior: "smooth" })
+    previousHeight = height
+    height = "calc(100% + 1px)"
   }
 
-  const closeSearch = () => {
+  const closeSearch = async () => {
+    if (previousHeight) {
+      // Restore previous height and wait for animation
+      height = previousHeight
+      previousHeight = null
+      await sleep(300)
+    }
     search = false
     searchValue = ""
   }
 
   const getFilteredScreens = (screens, search) => {
     return screens.filter(screen => {
-      const searchMatch = !search || screen.routing.route.includes(search)
-      return searchMatch
+      return !search || screen.routing.route.includes(search)
     })
   }
 
@@ -54,17 +67,33 @@
   }
 
   const handleScroll = e => {
-    if (e.target.scrollTop === 0) {
-      scrolling = false
-    } else {
-      scrolling = true
+    scrolling = e.target.scrollTop !== 0
+  }
+
+  const startResizing = e => {
+    resizing = true
+    dragOffset = parseInt(height) - e.clientY
+    document.addEventListener("mousemove", resize)
+    document.addEventListener("mouseup", stopResizing)
+  }
+
+  const resize = e => {
+    const newHeight = Math.max(0, e.clientY + dragOffset)
+    if (newHeight == null || isNaN(newHeight)) {
+      return
     }
+    height = `${newHeight}px`
+  }
+
+  const stopResizing = () => {
+    resizing = false
+    document.removeEventListener("mousemove", resize)
   }
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
-<div class="screens" class:screenSearch={search}>
-  <div class="header" class:headerScrolling={scrolling}>
+<div class="screens" class:search class:resizing style={`height:${height};`}>
+  <div class="header" class:scrolling>
     <input
       readonly={!search}
       bind:value={searchValue}
@@ -113,6 +142,8 @@
       </Layout>
     {/if}
   </div>
+
+  <div class="divider" on:mousedown={startResizing} />
 </div>
 
 <div class="newScreen" class:newScreenVisible={newScreen}>
@@ -129,20 +160,24 @@
     z-index: 2;
     background-color: var(--background);
   }
-
   .newScreenVisible {
     display: initial;
   }
 
   .screens {
-    height: 210px;
     display: flex;
     flex-direction: column;
-    transition: height 300ms ease-out;
+    min-height: 147px;
+    max-height: calc(100% - 147px);
+    position: relative;
   }
-
-  .screenSearch {
-    height: 100%;
+  .screens.search {
+    transition: height 300ms ease-out;
+    max-height: none;
+  }
+  .screens.resizing {
+    user-select: none;
+    cursor: row-resize;
   }
 
   .header {
@@ -154,11 +189,10 @@
     display: flex;
     align-items: center;
     border-bottom: 2px solid transparent;
-    transition: border-bottom 300ms ease-out;
+    transition: border-bottom 130ms ease-out;
   }
-
-  .headerScrolling {
-    border-bottom: 2px solid var(--grey-2);
+  .header.scrolling {
+    border-bottom: var(--border-light);
   }
 
   .input {
@@ -178,8 +212,7 @@
   .input::placeholder {
     color: var(--spectrum-global-color-gray-600);
   }
-
-  .screenSearch input {
+  .screens.search input {
     display: block;
   }
 
@@ -197,6 +230,9 @@
     overflow: auto;
     flex-grow: 1;
   }
+  .screens.resizing .content {
+    pointer-events: none;
+  }
 
   .screens :global(.nav-item) {
     padding-right: 8px !important;
@@ -208,7 +244,6 @@
     margin-right: 10px;
     opacity: 1;
   }
-
   .searchButton:hover {
     color: var(--ink);
   }
@@ -223,15 +258,14 @@
     cursor: pointer;
     transition: transform 300ms ease-out;
   }
+  .addButton:hover {
+    color: var(--ink);
+  }
 
   .closeButton {
     transform: rotate(45deg);
   }
 
-  .addButton:hover {
-    color: var(--ink);
-  }
-
   .icon {
     margin-left: 4px;
     margin-right: 4px;
@@ -240,4 +274,24 @@
   .no-results {
     color: var(--spectrum-global-color-gray-600);
   }
+
+  .divider {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    height: 16px;
+    width: 100%;
+  }
+  .divider:after {
+    content: "";
+    position: absolute;
+    background: var(--spectrum-global-color-gray-200);
+    height: 2px;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .divider:hover {
+    cursor: row-resize;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 8471cc03ed..61514270e6 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -4,7 +4,7 @@
   import { syncURLToState } from "helpers/urlStateSync"
   import { store } from "builderStore"
   import { onDestroy } from "svelte"
-  import LeftPanel from "./components/[componentId]/_components/LeftPanel/index.svelte"
+  import LeftPanel from "./_components/LeftPanel.svelte"
 
   $: screenId = $store.selectedScreenId
   $: store.actions.websocket.selectResource(screenId)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
deleted file mode 100644
index c1fe15f625..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-  import Screens from "./Screens/index.svelte"
-  import Components from "./Components/index.svelte"
-  import { selectedScreen } from "builderStore"
-</script>
-
-<div class="panel">
-  <Screens />
-  <div class="divider" />
-  {#if $selectedScreen}
-    <Components />
-  {/if}
-</div>
-
-<style>
-  .panel {
-    width: 310px;
-    height: 100%;
-    border-right: var(--border-light);
-    display: flex;
-    flex-direction: column;
-    background: var(--background);
-  }
-
-  .divider {
-    border-bottom: var(--border-light);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
deleted file mode 100644
index 9b5d05fe57..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--
-  Placeholder file so that routify works.
-  No unique content is needed in this index page.
--->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
deleted file mode 100644
index 9361415cb7..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { redirect } from "@roxi/routify"
-
-  onMount(() => {
-    $redirect(`./screen`)
-  })
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
index 496467c546..c3951eab5d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
@@ -1,8 +1,5 @@
 <script>
-  import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
 
-  onMount(() => {
-    $redirect("./components/screen")
-  })
+  $redirect("./screen")
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index 470c81b88c..79d264d120 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
@@ -4,7 +4,7 @@
 
   $: {
     if ($frontendStore.screens.length > 0) {
-      $redirect(`./${$frontendStore.screens[0]._id}/components/screen`)
+      $redirect(`./${$frontendStore.screens[0]._id}/screen`)
     } else {
       $redirect("./new")
     }

From d486a89ee786b0312de5e5031b8401f1c90632a1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 10:32:24 +0100
Subject: [PATCH 32/50] Clean all URLs by default in URL state sync

---
 packages/builder/src/helpers/urlStateSync.js           |  4 ++++
 .../design/[screenId]/[componentId]/_layout.svelte     | 10 +++-------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index c4c48fb3fb..04c639b3ec 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -65,6 +65,10 @@ export const syncURLToState = options => {
         params = res.params
       }
     }
+    // Clean URL
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
     log("Navigating to", url, "with params", params)
     cachedGoto(url, params)
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 51c3c64321..932a3d360a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -13,12 +13,8 @@
   $: params = routify.params
   $: routeComponentId = $params.componentId
 
-  const cleanUrl = url => {
-    // Strip trailing slashes
-    if (url?.endsWith("/index")) {
-      url = url.replace("/index", "")
-    }
-    // Hide new component panel whenever component ID changes
+  // Hide new component panel whenever component ID changes
+  const closeNewComponentPanel = url => {
     if (url?.endsWith("/new")) {
       url = url.replace("/new", "")
     }
@@ -40,7 +36,7 @@
     fallbackUrl: "../",
     store,
     routify,
-    beforeNavigate: cleanUrl,
+    beforeNavigate: closeNewComponentPanel,
   })
 
   onDestroy(stopSyncing)

From f72f3f88f7a8dff5749d4e2156c900af7114b02e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 10:49:48 +0100
Subject: [PATCH 33/50] Improve UX when resizing screen/component lists

---
 packages/builder/src/builderStore/index.js    |  4 +-
 .../_components/ScreenList/index.svelte       | 49 +++++++++++++++----
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 3cd387fe95..dfb8609e65 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -4,7 +4,7 @@ import { getTemporalStore } from "./store/temporal"
 import { getThemeStore } from "./store/theme"
 import { getUserStore } from "./store/users"
 import { getDeploymentStore } from "./store/deployments"
-import { derived } from "svelte/store"
+import { derived, writable } from "svelte/store"
 import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
 import { createHistoryStore } from "builderStore/store/history"
@@ -147,3 +147,5 @@ export const userSelectedResourceMap = derived(userStore, $userStore => {
 export const isOnlyUser = derived(userStore, $userStore => {
   return $userStore.length < 2
 })
+
+export const screensHeight = writable("210px")
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index 9324b2073d..0ecc9b76bf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -1,20 +1,25 @@
 <script>
   import { Icon, Layout, Body } from "@budibase/bbui"
-  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
+  import {
+    store,
+    sortedScreens,
+    userSelectedResourceMap,
+    screensHeight,
+  } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import DropdownMenu from "./DropdownMenu.svelte"
   import NewScreen from "components/design/NewScreen/index.svelte"
-  import { tick } from "svelte"
+  import { onMount, tick } from "svelte"
 
   let newScreen = false
   let search = false
   let resizing = false
   let searchValue = ""
   let searchInput
+  let container
   let screensContainer
   let scrolling = false
-  let height = "210px"
   let previousHeight = null
   let dragOffset
 
@@ -27,14 +32,14 @@
     await tick()
     searchInput.focus()
     screensContainer.scroll({ top: 0, behavior: "smooth" })
-    previousHeight = height
-    height = "calc(100% + 1px)"
+    previousHeight = $screensHeight
+    $screensHeight = "calc(100% + 1px)"
   }
 
   const closeSearch = async () => {
     if (previousHeight) {
       // Restore previous height and wait for animation
-      height = previousHeight
+      $screensHeight = previousHeight
       previousHeight = null
       await sleep(300)
     }
@@ -71,28 +76,48 @@
   }
 
   const startResizing = e => {
+    // Reset the height store to match the true height
+    $screensHeight = `${container.getBoundingClientRect().height}px`
+
+    // Store an offset to easily compute new height when moving the mouse
+    dragOffset = parseInt($screensHeight) - e.clientY
+
+    // Add event listeners
     resizing = true
-    dragOffset = parseInt(height) - e.clientY
     document.addEventListener("mousemove", resize)
     document.addEventListener("mouseup", stopResizing)
   }
 
   const resize = e => {
+    // Prevent negative heights as this screws with layout
     const newHeight = Math.max(0, e.clientY + dragOffset)
     if (newHeight == null || isNaN(newHeight)) {
       return
     }
-    height = `${newHeight}px`
+    $screensHeight = `${newHeight}px`
   }
 
   const stopResizing = () => {
     resizing = false
     document.removeEventListener("mousemove", resize)
   }
+
+  onMount(() => {
+    // Ensure we aren't stuck at 100% height from leaving while searching
+    if ($screensHeight == null || isNaN(parseInt($screensHeight))) {
+      $screensHeight = "210px"
+    }
+  })
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
-<div class="screens" class:search class:resizing style={`height:${height};`}>
+<div
+  class="screens"
+  class:search
+  class:resizing
+  style={`height:${$screensHeight};`}
+  bind:this={container}
+>
   <div class="header" class:scrolling>
     <input
       readonly={!search}
@@ -143,7 +168,11 @@
     {/if}
   </div>
 
-  <div class="divider" on:mousedown={startResizing} />
+  <div
+    class="divider"
+    on:mousedown={startResizing}
+    on:dblclick={() => screensHeight.set("210px")}
+  />
 </div>
 
 <div class="newScreen" class:newScreenVisible={newScreen}>

From 607a36e2e4822bb91f30578d61196a8a1c1a14b6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 11:03:00 +0100
Subject: [PATCH 34/50] Improve route handling when creating new components and
 screens

---
 .../design/NewScreen/CreateScreenModal.svelte    |  3 ++-
 packages/builder/src/helpers/urlStateSync.js     |  9 +++++----
 .../[screenId]/_components/LeftPanel.svelte      |  4 ++--
 .../_components/ScreenList/index.svelte          | 16 +++++++++++++++-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte b/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
index 3ca3e6b419..300906eaf6 100644
--- a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
@@ -67,7 +67,8 @@
         }
       }
 
-      $goto(`./${screenId}`)
+      // Select and go to new screen
+      store.actions.screens.select(screenId)
     } catch (error) {
       console.log(error)
       notifications.error("Error creating screens")
diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index 04c639b3ec..2408dde2f1 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -56,6 +56,11 @@ export const syncURLToState = options => {
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
+    // Clean URL
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
+    // Allow custom URL handling
     if (beforeNavigate) {
       const res = beforeNavigate(url, params)
       if (res?.url) {
@@ -65,10 +70,6 @@ export const syncURLToState = options => {
         params = res.params
       }
     }
-    // Clean URL
-    if (url?.endsWith("/index")) {
-      url = url.replace("/index", "")
-    }
     log("Navigating to", url, "with params", params)
     cachedGoto(url, params)
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index 32150ef921..977d0ff0a9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -1,12 +1,12 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
-  import { isActive } from "@roxi/routify"
+  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <ScreenList />
-  {#if $isActive("./:componentId")}
+  {#if $selectedScreen}
     <ComponentList />
   {/if}
 </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index 0ecc9b76bf..b4a97fbf09 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -11,6 +11,7 @@
   import DropdownMenu from "./DropdownMenu.svelte"
   import NewScreen from "components/design/NewScreen/index.svelte"
   import { onMount, tick } from "svelte"
+  import { beforeUrlChange } from "@roxi/routify"
 
   let newScreen = false
   let search = false
@@ -25,6 +26,14 @@
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
+  // Close new screen when URL changes
+  $beforeUrlChange(() => {
+    if (newScreen) {
+      newScreen = false
+    }
+    return true
+  })
+
   const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
   const openSearch = async () => {
@@ -176,7 +185,12 @@
 </div>
 
 <div class="newScreen" class:newScreenVisible={newScreen}>
-  <NewScreen onClose={() => (newScreen = false)} />
+  <NewScreen
+    onClose={() => {
+      console.log("close")
+      newScreen = false
+    }}
+  />
 </div>
 
 <style>

From 38e8ff879ac0430853a3d77241c4935f7b036ae5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 11:14:04 +0100
Subject: [PATCH 35/50] Make new screen a dedicated route and remove
 duplication. Fix some issues when deleting selected screens

---
 .../[screenId]/[componentId]/_layout.svelte   |  14 +++---
 .../ScreenList/DropdownMenu.svelte            |   2 +-
 .../_components/ScreenList/index.svelte       |  42 ++----------------
 .../NewScreen/CreateScreenModal.svelte        |   3 +-
 .../NewScreen/DatasourceModal.svelte          |   0
 .../NewScreen/ScreenRoleModal.svelte          |   0
 .../design/_components}/NewScreen/blank.png   | Bin
 .../_components}/NewScreen/index.svelte       |   0
 .../design/_components}/NewScreen/table.png   | Bin
 .../app/[application]/design/new.svelte       |  22 ++++++++-
 10 files changed, 34 insertions(+), 49 deletions(-)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/CreateScreenModal.svelte (99%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/DatasourceModal.svelte (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/ScreenRoleModal.svelte (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/blank.png (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/index.svelte (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/table.png (100%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 932a3d360a..8c821b64d7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -42,11 +42,13 @@
   onDestroy(stopSyncing)
 </script>
 
-{#if routeComponentId === "screen"}
-  <ScreenSettingsPanel />
-{:else if routeComponentId === "navigation"}
-  <NavigationPanel />
-{:else}
-  <ComponentSettingsPanel />
+{#if $selectedScreen}
+  {#if routeComponentId === "screen"}
+    <ScreenSettingsPanel />
+  {:else if routeComponentId === "navigation"}
+    <NavigationPanel />
+  {:else}
+    <ComponentSettingsPanel />
+  {/if}
 {/if}
 <slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
index fd5ddd9459..c117c7e9dd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
@@ -56,7 +56,7 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      notifications.success("Deleted screen successfully.")
+      notifications.success("Deleted screen successfully")
     } catch (err) {
       notifications.error("Error deleting screen")
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index b4a97fbf09..c5475b9c16 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -9,11 +9,9 @@
   import NavItem from "components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import DropdownMenu from "./DropdownMenu.svelte"
-  import NewScreen from "components/design/NewScreen/index.svelte"
   import { onMount, tick } from "svelte"
-  import { beforeUrlChange } from "@roxi/routify"
+  import { goto } from "@roxi/routify"
 
-  let newScreen = false
   let search = false
   let resizing = false
   let searchValue = ""
@@ -26,14 +24,6 @@
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
-  // Close new screen when URL changes
-  $beforeUrlChange(() => {
-    if (newScreen) {
-      newScreen = false
-    }
-    return true
-  })
-
   const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
   const openSearch = async () => {
@@ -66,17 +56,13 @@
     if (search) {
       closeSearch()
     } else {
-      newScreen = true
+      $goto("../new")
     }
   }
 
   const onKeyDown = e => {
     if (e.key === "Escape") {
-      if (newScreen) {
-        newScreen = false
-      } else {
-        closeSearch()
-      }
+      closeSearch()
     }
   }
 
@@ -184,29 +170,7 @@
   />
 </div>
 
-<div class="newScreen" class:newScreenVisible={newScreen}>
-  <NewScreen
-    onClose={() => {
-      console.log("close")
-      newScreen = false
-    }}
-  />
-</div>
-
 <style>
-  .newScreen {
-    display: none;
-    width: 100vw;
-    bottom: 0;
-    position: absolute;
-    height: calc(100vh - 58px);
-    z-index: 2;
-    background-color: var(--background);
-  }
-  .newScreenVisible {
-    display: initial;
-  }
-
   .screens {
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
similarity index 99%
rename from packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index 300906eaf6..ad4fd6e0ac 100644
--- a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -67,7 +67,8 @@
         }
       }
 
-      // Select and go to new screen
+      // Go to new screen
+      $goto(`./${screenId}`)
       store.actions.screens.select(screenId)
     } catch (error) {
       console.log(error)
diff --git a/packages/builder/src/components/design/NewScreen/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/DatasourceModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
diff --git a/packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
diff --git a/packages/builder/src/components/design/NewScreen/blank.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/blank.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
diff --git a/packages/builder/src/components/design/NewScreen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
diff --git a/packages/builder/src/components/design/NewScreen/table.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/table.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
index 5a6c11107c..6fd08447b2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -1,5 +1,23 @@
 <script>
-  import NewScreen from "components/design/NewScreen/index.svelte"
+  import NewScreen from "./_components/NewScreen/index.svelte"
+  import { store } from "builderStore"
+  import { goto } from "@roxi/routify"
+
+  $: onClose = getOnClose($store)
+
+  const getOnClose = ({ screens, selectedScreenId }) => {
+    if (!screens?.length) {
+      return null
+    }
+    if (selectedScreenId) {
+      return () => {
+        $goto(`./${selectedScreenId}`)
+      }
+    }
+    return () => {
+      $goto(`./${screens[0]._id}`)
+    }
+  }
 </script>
 
-<NewScreen />
+<NewScreen {onClose} />

From f1121a11a339d12098ca407967ce5d74a10c7e1e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 11:18:14 +0100
Subject: [PATCH 36/50] Improve route safety

---
 .../[screenId]/[componentId]/_layout.svelte      | 14 ++++++--------
 .../[screenId]/_components/LeftPanel.svelte      |  5 +----
 .../design/[screenId]/_layout.svelte             | 16 +++++++++-------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 8c821b64d7..932a3d360a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -42,13 +42,11 @@
   onDestroy(stopSyncing)
 </script>
 
-{#if $selectedScreen}
-  {#if routeComponentId === "screen"}
-    <ScreenSettingsPanel />
-  {:else if routeComponentId === "navigation"}
-    <NavigationPanel />
-  {:else}
-    <ComponentSettingsPanel />
-  {/if}
+{#if routeComponentId === "screen"}
+  <ScreenSettingsPanel />
+{:else if routeComponentId === "navigation"}
+  <NavigationPanel />
+{:else}
+  <ComponentSettingsPanel />
 {/if}
 <slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index 977d0ff0a9..96d4579eeb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -1,14 +1,11 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
-  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <ScreenList />
-  {#if $selectedScreen}
-    <ComponentList />
-  {/if}
+  <ComponentList />
 </div>
 
 <style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 61514270e6..62e97829a9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -2,7 +2,7 @@
   import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
-  import { store } from "builderStore"
+  import { store, selectedScreen } from "builderStore"
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 
@@ -22,13 +22,15 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="design">
-  <div class="content">
-    <LeftPanel />
-    <AppPanel />
-    <slot />
+{#if $selectedScreen}
+  <div class="design">
+    <div class="content">
+      <LeftPanel />
+      <AppPanel />
+      <slot />
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .design {

From a7de2d8aca7b32f5b11d184165b9194a0d6ef62f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 11:21:53 +0100
Subject: [PATCH 37/50] Always create nav link for new screens

---
 .../_components/NewScreen/CreateScreenModal.svelte  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index ad4fd6e0ac..cc4415ce2c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -58,13 +58,12 @@
         const response = await store.actions.screens.save(screen)
         screenId = response._id
 
-        // Add link in layout for list screens
-        if (screen.props._instanceName.endsWith("List")) {
-          await store.actions.links.save(
-            screen.routing.route,
-            capitalise(screen.routing.route.split("/")[1])
-          )
-        }
+        // Add link in layout. We only ever actually create 1 screen now, even
+        // for autoscreens, so it's always safe to do this.
+        await store.actions.links.save(
+          screen.routing.route,
+          capitalise(screen.routing.route.split("/")[1])
+        )
       }
 
       // Go to new screen

From 087812011f761fb59c28576557a5f416a2445dd8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 14:45:23 +0100
Subject: [PATCH 38/50] WIP for fixing collaboration in new left panel

---
 .../[screenId]/[componentId]/_layout.svelte    |  8 ++++----
 .../_components/ComponentList/index.svelte     | 18 ++++++++++++------
 .../design/[screenId]/index.svelte             |  3 ++-
 .../app/[application]/design/index.svelte      |  2 +-
 .../client/src/components/app/Layout.svelte    |  4 ++--
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 932a3d360a..03a0aad9ba 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -22,8 +22,8 @@
   }
 
   const validate = id => {
-    if (id === "screen") return true
-    if (id === "navigation") return true
+    if (id === `${$store.selectedScreenId}-screen`) return true
+    if (id === `${$store.selectedScreenId}-navigation`) return true
 
     return !!findComponent($selectedScreen.props, id)
   }
@@ -42,9 +42,9 @@
   onDestroy(stopSyncing)
 </script>
 
-{#if routeComponentId === "screen"}
+{#if routeComponentId === `${$store.selectedScreenId}-screen`}
   <ScreenSettingsPanel />
-{:else if routeComponentId === "navigation"}
+{:else if routeComponentId === `${$store.selectedScreenId}-navigation`}
   <NavigationPanel />
 {:else}
   <ComponentSettingsPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index eb186dfed5..a1735fc6f4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -49,23 +49,27 @@
           <NavItem
             text="Screen"
             indentLevel={0}
-            selected={$store.selectedComponentId === "screen"}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-screen`}
             opened
             scrollable
             icon="WebPage"
             on:drop={onDrop}
             on:click={() => {
-              $store.selectedComponentId = "screen"
+              $store.selectedComponentId = `${$store.selectedScreenId}-screen`
             }}
             id={`component-screen`}
-            selectedBy={$userSelectedResourceMap["screen"]}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-screen`
+            ]}
           >
             <ScreenslotDropdownMenu component={$selectedScreen?.props} />
           </NavItem>
           <NavItem
             text="Navigation"
             indentLevel={0}
-            selected={$store.selectedComponentId === "navigation"}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-navigation`}
             opened
             scrollable
             icon={$selectedScreen.showNavigation
@@ -73,10 +77,12 @@
               : "VisibilityOff"}
             on:drop={onDrop}
             on:click={() => {
-              $store.selectedComponentId = "navigation"
+              $store.selectedComponentId = `${$store.selectedScreenId}-navigation`
             }}
             id={`component-nav`}
-            selectedBy={$userSelectedResourceMap["navigation"]}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-navigation`
+            ]}
           />
           <ComponentTree
             level={0}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
index c3951eab5d..c4ed7d949c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
+  import { store } from "builderStore"
 
-  $redirect("./screen")
+  $redirect(`./${$store.selectedScreenId}-screen`)
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index 79d264d120..e9c72a6e1f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
@@ -4,7 +4,7 @@
 
   $: {
     if ($frontendStore.screens.length > 0) {
-      $redirect(`./${$frontendStore.screens[0]._id}/screen`)
+      $redirect(`./${$frontendStore.screens[0]._id}`)
     } else {
       $redirect("./new")
     }
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 5207892e42..089ce8e7de 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -78,7 +78,7 @@
   // changes.
   $: selected =
     $builderStore.inBuilder &&
-    $builderStore.selectedComponentId === "navigation"
+    $builderStore.selectedComponentId?.endsWith("-navigation")
   $: {
     if (selected) {
       const node = document.getElementsByClassName("nav-wrapper")?.[0]
@@ -152,7 +152,7 @@
   use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
-  data-id="screen"
+  data-id={`${$builderStore.screen?._id}-screen`}
   data-name="Screen"
   data-icon="WebPage"
 >

From 899a1dd7547497f77819a7dc41c68161f6802681 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:00:26 +0100
Subject: [PATCH 39/50] Restore being able to select the screen and nav, now
 with unique IDs

---
 .../client/src/components/app/Layout.svelte   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 089ce8e7de..3d9668ea97 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -72,6 +72,12 @@
     $context.device.height
   )
   $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
+  $: screenId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-screen`
+    : "screen"
+  $: navigationId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-navigation`
+    : "navigation"
 
   // Scroll navigation into view if selected.
   // Memoize into a primitive to avoid spamming this whenever builder store
@@ -145,27 +151,29 @@
     }
     return style
   }
+
+  $: console.log($builderStore.selectedComponentId)
 </script>
 
 <div
-  class="component screen layout layout--{typeClass}"
+  class="component {screenId} layout layout--{typeClass}"
   use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
-  data-id={`${$builderStore.screen?._id}-screen`}
+  data-id={screenId}
   data-name="Screen"
   data-icon="WebPage"
 >
-  <div class="screen-dom screen-wrapper layout-body">
+  <div class="{screenId}-dom screen-wrapper layout-body">
     {#if typeClass !== "none"}
       <div
-        class="interactive component navigation"
-        data-id="navigation"
+        class="interactive component {navigationId}"
+        data-id={navigationId}
         data-name="Navigation"
         data-icon="Visibility"
       >
         <div
-          class="nav-wrapper navigation-dom"
+          class="nav-wrapper {navigationId}-dom"
           class:sticky
           class:hidden={$routeStore.queryParams?.peek}
           class:clickable={$builderStore.inBuilder}

From 08d2074515cf0f0746b68c8eb39d95c9dee5127d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:04:18 +0100
Subject: [PATCH 40/50] Fix add component FAB not working when screen or
 navigation are selected

---
 .../[screenId]/_components/AppPreview.svelte      | 15 +++++----------
 .../_components/ComponentList/index.svelte        |  2 +-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 687ea2d579..e783e7b3e2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -1,12 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import {
-    store,
-    selectedComponent,
-    selectedScreen,
-    currentAsset,
-  } from "builderStore"
+  import { store, selectedScreen, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -70,7 +65,7 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(`./${$selectedComponent?._id}/new`)
+  $: isAddingComponent = $isActive(`./${selectedComponentId}/new`)
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -212,10 +207,10 @@
   }
 
   const toggleAddComponent = () => {
-    if (isAddingComponent) {
-      $goto(`./${$selectedComponent?._id}`)
+    if ($isActive(`./${selectedComponentId}/new`)) {
+      $goto(`./${selectedComponentId}`)
     } else {
-      $goto(`./${$selectedComponent?._id}/new`)
+      $goto(`./${selectedComponentId}/new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index a1735fc6f4..a667cd4e59 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -15,7 +15,7 @@
 
   const toNewComponentRoute = () => {
     if ($isActive(`./${$store.selectedComponentId}/new`)) {
-      return
+      $goto(`./${$store.selectedComponentId}`)
     } else {
       $goto(`./${$store.selectedComponentId}/new`)
     }

From 4847cafd81b31fcc46e6e35286f753a84a956026 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:14:22 +0100
Subject: [PATCH 41/50] Fix navigating while moving between screens

---
 packages/builder/src/builderStore/store/frontend.js | 1 -
 packages/client/src/components/app/Layout.svelte    | 2 --
 2 files changed, 3 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 46b4bab6c0..d1dffbb8b4 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -225,7 +225,6 @@ export const getFrontendStore = () => {
         // Select new screen
         store.update(state => {
           state.selectedScreenId = screen._id
-          state.selectedComponentId = "screen"
           return state
         })
       },
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 3d9668ea97..e736e768f9 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -151,8 +151,6 @@
     }
     return style
   }
-
-  $: console.log($builderStore.selectedComponentId)
 </script>
 
 <div

From 9883157f30603b12f8904a8988c82c9c9e5c3379 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:19:53 +0100
Subject: [PATCH 42/50] Fix not being able to add components when either the
 screen or layout are selected

---
 packages/builder/src/builderStore/store/frontend.js         | 2 +-
 .../[componentId]/new/_components/NewComponentPanel.svelte  | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index d1dffbb8b4..1200cebeb2 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -769,7 +769,7 @@ export const getFrontendStore = () => {
           await store.actions.screens.patch(screen => {
             // Find the selected component
             let selectedComponentId = state.selectedComponentId
-            if (["navigation", "screen"].includes(selectedComponentId)) {
+            if (selectedComponentId.startsWith(`${screen._id}-`)) {
               selectedComponentId = screen?.props._id
             }
             const currentComponent = findComponent(
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index 4500723027..248bbc8141 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import { goto, url } from "@roxi/routify"
+  import { goto } from "@roxi/routify"
   import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
   import structure from "./componentStructure.json"
   import { store, selectedComponent, selectedScreen } from "builderStore"
@@ -31,6 +31,10 @@
   $: orderMap = createComponentOrderMap(componentList)
 
   const getAllowedComponents = (allComponents, screen, component) => {
+    // Default to using the root screen container if no component specified
+    if (!component) {
+      component = screen.props
+    }
     const path = findComponentPath(screen?.props, component?._id)
     if (!path?.length) {
       return []

From 4759cdffe73f913bb483928480d25b032ddd4e05 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:21:18 +0100
Subject: [PATCH 43/50] Fix add component keyboard shortcut

---
 .../_components/ComponentList/ComponentKeyHandler.svelte        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index 61419dd457..ebeaa235b5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -36,7 +36,7 @@
       confirmEjectDialog.show()
     },
     ["Ctrl+Enter"]: () => {
-      $goto("./new")
+      $goto(`./${$store.selectedComponentId}/new`)
     },
     ["Delete"]: component => {
       // Don't show confirmation for the screen itself

From 38044cdaea2e0dc85d81b0538efd091bf5ad3c73 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:22:56 +0100
Subject: [PATCH 44/50] Fix escape keybind

---
 .../_components/ComponentList/ComponentKeyHandler.svelte   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index ebeaa235b5..749d4020c0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -53,11 +53,8 @@
       store.actions.components.selectNext()
     },
     ["Escape"]: () => {
-      if ($isActive("./new")) {
-        event.preventDefault()
-        event.stopPropagation()
-
-        $goto("./")
+      if ($isActive(`./:componentId/new`)) {
+        $goto(`./${$store.selectedComponentId}`)
       }
     },
   }

From 80e622d2e082a074d998c564e6d4882a3c35d167 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:28:23 +0100
Subject: [PATCH 45/50] Simply navigation URLs

---
 .../src/components/commandPalette/CommandPalette.svelte     | 2 +-
 .../design/[screenId]/_components/AppPreview.svelte         | 6 +++---
 .../_components/ComponentList/ComponentKeyHandler.svelte    | 2 +-
 .../[screenId]/_components/ComponentList/index.svelte       | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 3c95dbbd0b..7174158fbf 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -121,7 +121,7 @@
       type: "Screen",
       name: screen.routing.route,
       icon: "WebPage",
-      action: () => $goto(`./design/${screen._id}/components`),
+      action: () => $goto(`./design/${screen._id}`),
     })),
     ...($automationStore?.automations?.map(automation => ({
       type: "Automation",
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index e783e7b3e2..6aaf7ae407 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -207,10 +207,10 @@
   }
 
   const toggleAddComponent = () => {
-    if ($isActive(`./${selectedComponentId}/new`)) {
-      $goto(`./${selectedComponentId}`)
+    if ($isActive(`./:componentId/new`)) {
+      $goto(`./:componentId`)
     } else {
-      $goto(`./${selectedComponentId}/new`)
+      $goto(`./:componentId/new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index 749d4020c0..b6957f64f3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -36,7 +36,7 @@
       confirmEjectDialog.show()
     },
     ["Ctrl+Enter"]: () => {
-      $goto(`./${$store.selectedComponentId}/new`)
+      $goto(`./:componentId/new`)
     },
     ["Delete"]: component => {
       // Don't show confirmation for the screen itself
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index a667cd4e59..7851fe61f8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -14,10 +14,10 @@
   let scrolling = false
 
   const toNewComponentRoute = () => {
-    if ($isActive(`./${$store.selectedComponentId}/new`)) {
-      $goto(`./${$store.selectedComponentId}`)
+    if ($isActive(`./:componentId/new`)) {
+      $goto(`./:componentId`)
     } else {
-      $goto(`./${$store.selectedComponentId}/new`)
+      $goto(`./:componentId/new`)
     }
   }
 

From 0ef0e58e5e253ca70d6a0ccf8e35d5acb950c26c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:37:13 +0100
Subject: [PATCH 46/50] Fix click on navigation not selecting it

---
 .../src/builderStore/store/frontend.js        | 21 +++++++++++++------
 .../[screenId]/_components/AppPreview.svelte  |  2 --
 .../client/src/components/app/Layout.svelte   |  2 +-
 packages/client/src/stores/builder.js         |  3 ---
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 1200cebeb2..9c52a52b47 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -999,14 +999,18 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (componentId === "screen") {
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        console.log(componentId, screenComponentId, navComponentId)
+        if (componentId === screenComponentId) {
           return null
         }
-        if (componentId === "navigation") {
-          return "screen"
+        if (componentId === navComponentId) {
+          return screenComponentId
         }
         if (parent._id === screen.props._id && index === 0) {
-          return "navigation"
+          return navComponentId
         }
 
         // If we have siblings above us, choose the sibling or a descendant
@@ -1036,8 +1040,11 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (state.selectedComponentId === "screen") {
-          return "navigation"
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        if (state.selectedComponentId === screenComponentId) {
+          return navComponentId
         }
 
         // If we have children, select first child
@@ -1076,6 +1083,7 @@ export const getFrontendStore = () => {
         }
       },
       selectPrevious: () => {
+        console.log("prev")
         const previousId = store.actions.components.getPrevious()
         if (previousId) {
           store.update(state => {
@@ -1085,6 +1093,7 @@ export const getFrontendStore = () => {
         }
       },
       selectNext: () => {
+        console.log("next")
         const nextId = store.actions.components.getNext()
         if (nextId) {
           store.update(state => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 6aaf7ae407..45fe005ceb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -156,8 +156,6 @@
         store.actions.components.copy(source, true, false)
         await store.actions.components.paste(destination, data.mode)
       }
-    } else if (type === "click-nav") {
-      $store.selectedComponentId = "navigation"
     } else if (type === "request-add-component") {
       toggleAddComponent()
     } else if (type === "highlight-setting") {
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index e736e768f9..e557874edb 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -176,7 +176,7 @@
           class:hidden={$routeStore.queryParams?.peek}
           class:clickable={$builderStore.inBuilder}
           on:click={$builderStore.inBuilder
-            ? builderStore.actions.clickNav
+            ? builderStore.actions.selectComponent(navigationId)
             : null}
           style={navStyle}
         >
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 23d789dc2c..036558e8b2 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -80,9 +80,6 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
-    clickNav: () => {
-      eventStore.actions.dispatchEvent("click-nav")
-    },
     requestAddComponent: () => {
       eventStore.actions.dispatchEvent("request-add-component")
     },

From 277aa30b07544fe362f851c9d8ad17172ce70097 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:41:45 +0100
Subject: [PATCH 47/50] Fix keyboard actions for screen and nav

---
 packages/builder/src/builderStore/index.js          | 4 ++--
 packages/builder/src/builderStore/store/frontend.js | 3 ---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index dfb8609e65..eecccab7a6 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -63,9 +63,9 @@ export const selectedComponent = derived(
   ([$store, $selectedScreen]) => {
     if (
       $selectedScreen &&
-      ["navigation", "screen"].includes($store.selectedComponentId)
+      $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
     ) {
-      return findComponent($selectedScreen?.props, $selectedScreen?.props._id)
+      return $selectedScreen?.props
     }
     if (!$selectedScreen || !$store.selectedComponentId) {
       return null
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9c52a52b47..8f4f6cc2c4 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -1002,7 +1002,6 @@ export const getFrontendStore = () => {
         // Check for screen and navigation component edge cases
         const screenComponentId = `${screen._id}-screen`
         const navComponentId = `${screen._id}-navigation`
-        console.log(componentId, screenComponentId, navComponentId)
         if (componentId === screenComponentId) {
           return null
         }
@@ -1083,7 +1082,6 @@ export const getFrontendStore = () => {
         }
       },
       selectPrevious: () => {
-        console.log("prev")
         const previousId = store.actions.components.getPrevious()
         if (previousId) {
           store.update(state => {
@@ -1093,7 +1091,6 @@ export const getFrontendStore = () => {
         }
       },
       selectNext: () => {
-        console.log("next")
         const nextId = store.actions.components.getNext()
         if (nextId) {
           store.update(state => {

From 94d97693102e1b4d8543361ec41c66af15788847 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:46:41 +0100
Subject: [PATCH 48/50] Fix command palette navigating to screens

---
 .../src/components/commandPalette/CommandPalette.svelte       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 7174158fbf..92fbe9445c 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -121,7 +121,9 @@
       type: "Screen",
       name: screen.routing.route,
       icon: "WebPage",
-      action: () => $goto(`./design/${screen._id}`),
+      action: () => {
+        $goto(`./design/${screen._id}/${screen._id}-screen`)
+      },
     })),
     ...($automationStore?.automations?.map(automation => ({
       type: "Automation",

From 9869b0cbc830115b7b2d6b7aa2c2a3599a322ebd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:50:00 +0100
Subject: [PATCH 49/50] Lint

---
 packages/builder/src/components/design/Panel.svelte             | 2 +-
 .../[application]/design/[screenId]/_components/AppPanel.svelte | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index db8d9b9096..f649a9bd06 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Heading, Body } from "@budibase/bbui"
+  import { Icon, Body } from "@budibase/bbui"
 
   export let title
   export let icon
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index cbb50d96bd..09f97302fd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -3,7 +3,6 @@
   import AppPreview from "./AppPreview.svelte"
   import { store, screenHistoryStore } from "builderStore"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
-  import { isActive } from "@roxi/routify"
 </script>
 
 <div class="app-panel">

From e1ffd6107c37607b934d6f164d434ba484d1d3f8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:53:15 +0100
Subject: [PATCH 50/50] Don't select screens as resources as they have no
 dedicated route

---
 .../builder/app/[application]/design/[screenId]/_layout.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 62e97829a9..0e630b4f39 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -6,9 +6,6 @@
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 
-  $: screenId = $store.selectedScreenId
-  $: store.actions.websocket.selectResource(screenId)
-
   // Keep URL and state in sync for selected screen ID
   const stopSyncing = syncURLToState({
     urlParam: "screenId",