From 26cfb54a0fd2a7ef6632391752b924c7f8e0da93 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 18 Nov 2020 22:04:18 +0000
Subject: [PATCH 1/7] nested routing UI up and running, refactor drag and drop
 functionality by decoupling store from components

---
 .../src/builderStore/store/frontend.js        |   6 +-
 .../ComponentTree.svelte                      | 114 ++++++++++
 .../ComponentNavigationTree/PathTree.svelte   |  50 +++++
 .../ComponentNavigationTree/Screen.svelte     |   0
 .../ComponentNavigationTree/dragDropStore.js  |  92 ++++++++
 .../ComponentNavigationTree/index.svelte      |  17 ++
 .../ComponentsHierarchyChildren.svelte        |   8 +-
 .../userInterface/FrontendNavigatePane.svelte |  22 +-
 .../userInterface/ScreenDropdownMenu.svelte   |   2 +-
 .../design/[page]/[screen]/_layout.svelte     |   4 +-
 packages/builder/yarn.lock                    | 198 +----------------
 packages/client/package.json                  |   2 +-
 packages/client/src/render/screenRouter.js    |   2 +-
 packages/server/yarn.lock                     | 200 +-----------------
 14 files changed, 313 insertions(+), 404 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
 create mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
 create mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/Screen.svelte
 create mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
 create mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 2c1def6efb..7b34013114 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -124,9 +124,9 @@ export const getFrontendStore = () => {
       })
     },
     screens: {
-      select: screenName => {
+      select: screenId => {
         store.update(state => {
-          const screen = getExactComponent(get(allScreens), screenName, true)
+          const screen = get(allScreens).find(screen => screen._id === screenId)
           state.currentPreviewItem = screen
           state.currentFrontEndType = "screen"
           state.currentView = "detail"
@@ -378,7 +378,7 @@ export const getFrontendStore = () => {
               component._id
             )
             parent._children = parent._children.filter(
-              c => c._id !== component._id
+              child => child._id !== component._id
             )
             store.actions.components.select(parent)
           }
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
new file mode 100644
index 0000000000..e856908dfd
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
@@ -0,0 +1,114 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  import { store } from "builderStore"
+  import { last } from "lodash/fp"
+  import { DropEffect, DropPosition } from "./dragDropStore"
+  import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
+  import NavItem from "components/common/NavItem.svelte"
+  import { getComponentDefinition } from "builderStore/storeUtils"
+
+  export let components = []
+  export let currentComponent
+  export let onSelect = () => {}
+  export let level = 0
+
+  export let dragDropStore
+
+  const isScreenslot = name => name === "##builtin/screenslot"
+
+  const selectComponent = component => {
+    // Set current component
+    store.actions.components.select(component)
+
+    // Get ID path
+    const path = store.actions.components.findRoute(component)
+
+    // Go to correct URL
+    $goto(`./:page/:screen/${path}`)
+  }
+
+  const dragstart = component => e => {
+    e.dataTransfer.dropEffect = DropEffect.MOVE
+    dragDropStore.actions.dragstart(component)
+  }
+
+  const dragover = (component, index) => e => {
+    const canHaveChildrenButIsEmpty =
+      getComponentDefinition($store, component._component).children &&
+      component._children.length === 0
+
+    e.dataTransfer.dropEffect = DropEffect.COPY
+
+    // how far down the mouse pointer is on the drop target
+    const mousePosition = e.offsetY / e.currentTarget.offsetHeight
+
+    dragDropStore.actions.dragover({
+      component,
+      index,
+      canHaveChildrenButIsEmpty,
+      mousePosition,
+    })
+
+    return false
+  }
+</script>
+
+<ul>
+  {#each components as component, index (component._id)}
+    <li on:click|stopPropagation={() => selectComponent(component)}>
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
+        <div
+          on:drop={dragDropStore.actions.drop}
+          ondragover="return false"
+          ondragenter="return false"
+          class="drop-item"
+          style="margin-left: {(level + 1) * 16}px" />
+      {/if}
+
+      <NavItem
+        draggable
+        on:dragend={dragDropStore.actions.reset}
+        on:dragstart={dragstart(component)}
+        on:dragover={dragover(component, index)}
+        on:drop={dragDropStore.actions.drop}
+        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+        withArrow
+        indentLevel={level + 3}
+        selected={currentComponent === component}>
+        <ComponentDropdownMenu {component} />
+      </NavItem>
+
+      {#if component._children}
+        <svelte:self
+          components={component._children}
+          {currentComponent}
+          {onSelect}
+          {dragDropStore}
+          level={level + 1} />
+      {/if}
+
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
+        <div
+          on:drop={dragDropStore.actions.drop}
+          ondragover="return false"
+          ondragenter="return false"
+          class="drop-item"
+          style="margin-left: {(level + ($dragDropStore.dropPosition === DropPosition.INSIDE ? 3 : 1)) * 16}px" />
+      {/if}
+    </li>
+  {/each}
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  .drop-item {
+    border-radius: var(--border-radius-m);
+    height: 32px;
+    background: var(--grey-3);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
new file mode 100644
index 0000000000..b1b2abfcc5
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -0,0 +1,50 @@
+<script>
+  import { writable } from "svelte/store"
+  import { goto } from "@sveltech/routify"
+  import instantiateStore from "./dragDropStore"
+  import ComponentsTree from "./ComponentTree.svelte"
+  import NavItem from "components/common/NavItem.svelte"
+  import { store } from "builderStore"
+
+  const dragDropStore = instantiateStore() 
+
+  export let route
+  export let indent
+
+  $: console.log(route)
+  $: console.log("preview", $store.currentPreviewItem)
+  $: selectedScreen = $store.currentPreviewItem
+
+  const changeScreen = screenId => {
+    // select the route
+    store.actions.screens.select(screenId)
+    $goto(`./:page/${screenId}`)
+  }
+</script>
+
+<NavItem
+  icon="ri-route-line"
+  text={route.fullpath}
+  withArrow={route.subpaths}
+  on:click={() => console.log(route)} />
+{#each Object.keys(route.screens) as screen}
+  <NavItem
+    icon="ri-artboard-2-line"
+    indentLevel={indent || 1}
+    selected={$store.currentComponentInfo._id === route.screens[screen]}
+    opened={$store.currentPreviewItem._id === route.screens[screen]}
+    text={screen || 'DEFAULT'}
+    withArrow={route.subpaths}
+    on:click={() => changeScreen(route.screens[screen])}>
+    <!-- <ScreenDropdownMenu screen={route.screens[screen]} /> -->
+  </NavItem>
+  {#if selectedScreen?._id === route.screens[screen]}
+    <ComponentsTree
+      components={selectedScreen.props._children}
+      currentComponent={$store.currentComponentInfo}
+      {dragDropStore} />
+  {/if}
+{/each}
+{#each Object.keys(route.subpaths) as subpath}
+  <svelte:self route={route.subpaths[subpath]} indent={2} />
+{/each}
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/Screen.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/Screen.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js b/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
new file mode 100644
index 0000000000..c5e7fc8736
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
@@ -0,0 +1,92 @@
+import { writable } from "svelte/store"
+import { store as frontendStore } from "builderStore"
+
+export const DropEffect = {
+  MOVE: "move",
+  COPY: "copy",
+}
+
+export const DropPosition = {
+  ABOVE: "above",
+  BELOW: "below",
+  INSIDE: "inside",
+}
+
+export default function() {
+  const store = writable({})
+
+  store.actions = {
+    dragstart: component => {
+      store.update(state => {
+        state.dragged = component
+        return state
+      })
+    },
+    dragover: ({
+      component,
+      index,
+      canHaveChildrenButIsEmpty,
+      mousePosition,
+    }) => {
+      store.update(state => {
+        state.targetComponent = component
+        // only allow dropping inside when container is empty
+        // if container has children, drag over them
+
+        if (canHaveChildrenButIsEmpty && index === 0) {
+          // hovered above center of target
+          if (mousePosition < 0.4) {
+            state.dropPosition = DropPosition.ABOVE
+          }
+
+          // hovered around bottom of target
+          if (mousePosition > 0.8) {
+            state.dropPosition = DropPosition.BELOW
+          }
+
+          // hovered in center of target
+          if (mousePosition > 0.4 && mousePosition < 0.8) {
+            state.dropPosition = DropPosition.BELOW
+          }
+          return
+        }
+
+        // bottom half
+        if (mousePosition > 0.5) {
+          state.dropPosition = DropPosition.BELOW
+        } else {
+          state.dropPosition = canHaveChildrenButIsEmpty
+            ? DropPosition.INSIDE
+            : DropPosition.ABOVE
+        }
+
+        return state
+      })
+    },
+    reset: () => {
+      store.update(state => {
+        state.dropPosition = ""
+        state.targetComponent = null
+        state.dragged = null
+        return state
+      })
+    },
+    drop: () => {
+      store.update(state => {
+        if (state.targetComponent !== state.dragged) {
+          frontendStore.actions.components.copy(state.dragged, true)
+          frontendStore.actions.components.paste(
+            state.targetComponent,
+            state.dropPosition
+          )
+        }
+
+        store.actions.reset()
+
+        return state
+      })
+    },
+  }
+
+  return store
+}
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
new file mode 100644
index 0000000000..a80409dac0
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  import ComponentTree from "./ComponentTree.svelte"
+  import { store } from "builderStore"
+  import ScreenDropdownMenu from "../ScreenDropdownMenu.svelte"
+  import { writable } from "svelte/store"
+  import NavItem from "components/common/NavItem.svelte"
+  import PathTree from "./PathTree.svelte"
+
+  export let routes = {}
+</script>
+
+<div class="root">
+  {#each Object.keys(routes) as path}
+    <PathTree route={routes[path]} />
+  {/each}
+</div>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 1034238c0a..f1b938fdff 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -35,7 +35,11 @@
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
   const isScreenslot = name => name === "##builtin/screenslot"
 
   const selectComponent = component => {
@@ -96,7 +100,7 @@
 
   const drop = () => {
     if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
-      store.actions.components.copy($dragDropStore.componentToDrop, true)
+      store.actions.components.cut($dragDropStore.componentToDrop)
       store.actions.components.paste(
         $dragDropStore.targetComponent,
         $dragDropStore.dropPosition
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 11fc02d029..d7606190a3 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -1,12 +1,30 @@
 <script>
+  import { onMount } from "svelte"
   import { store, currentScreens } from "builderStore"
-  import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
+  import api from "builderStore/api"
+  import ComponentsHierarchy from "components/userInterface/ComponentNavigationTree/index.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
   import { Modal } from "@budibase/bbui"
 
   let modal
+
+  let routes = {}
+
+  async function fetchRoutes() {
+    // fetch the routing stuff here
+    const response = await api.get("/api/routing")
+    const json = await response.json()
+
+    console.log(json)
+
+    routes = json.routes
+  }
+
+  onMount(() => {
+    fetchRoutes()
+  })
 </script>
 
 <div class="title">
@@ -16,7 +34,7 @@
 <PagesList />
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
-  <ComponentsHierarchy screens={$currentScreens} />
+  <ComponentsHierarchy {routes} />
 </div>
 <Modal bind:this={modal}>
   <NewScreenModal />
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index e675006412..74f4654ce3 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -16,7 +16,7 @@
     store.actions.screens.delete(screen, $store.currentPageName)
     // update the page if required
     store.update(state => {
-      if (state.currentPreviewItem.name === screen.name) {
+      if (state.currentPreviewItem._id === screen._id) {
         store.actions.pages.select($store.currentPageName)
         notifier.success(`Screen ${screen.name} deleted successfully.`)
         $goto(`./:page/page-layout`)
diff --git a/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
index c3e2215029..d67f365135 100644
--- a/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
@@ -10,9 +10,7 @@
   if ($params.screen !== "page-layout") {
     const currentScreenName = decodeURI($params.screen)
     const validScreen =
-      $allScreens.findIndex(
-        screen => screen.props._instanceName === currentScreenName
-      ) !== -1
+      $allScreens.findIndex(screen => screen._id === currentScreenName) !== -1
 
     if (!validScreen) {
       // Go to main layout if URL set to invalid screen
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 7c00685aa6..811ce76f75 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -719,15 +719,6 @@
     svelte-flatpickr "^2.4.0"
     svelte-portal "^1.0.0"
 
-"@budibase/client@^0.3.8":
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.3.8.tgz#75df7e97e8f0d9b58c00e2bb0d3b4a55f8d04735"
-  integrity sha512-tnFdmCdXKS+uZGoipr69Wa0oVoFHmyoV0ydihI6q0gKQH0KutypVHAaul2qPB8t5a/mTZopC//2WdmCeX1GKVg==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1416,11 +1407,6 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1475,13 +1461,6 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1753,14 +1732,6 @@ cachedir@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
 
-call-bind@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.0.tgz#24127054bb3f9bdcb4b1fb82418186072f77b8ce"
-  integrity sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.0"
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -2456,26 +2427,6 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
-  dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2645,23 +2596,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.17.4:
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
 es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
@@ -2680,20 +2614,6 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-get-iterator@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
-  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.1"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3011,7 +2931,7 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3097,15 +3017,6 @@ get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
 
-get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
-  integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -3403,22 +3314,12 @@ is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3450,7 +3351,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3516,11 +3417,6 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -3530,11 +3426,6 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3598,11 +3489,6 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -3611,41 +3497,16 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   dependencies:
     has-symbols "^1.0.1"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3666,11 +3527,6 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4796,7 +4652,7 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-is@^1.0.1, object-is@^1.1.3:
+object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
   integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
@@ -5351,7 +5207,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
+regexp.prototype.flags@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -5359,11 +5215,6 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5777,14 +5628,6 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -6511,43 +6354,10 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/client/package.json b/packages/client/package.json
index 8968f2995f..7457adb412 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -55,7 +55,7 @@
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^4.0.4",
-    "svelte": "3.23.x",
+    "svelte": "^3.29.7",
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "e4e053cb6ff9a0ddc7115b44ccaa24b8ec41fb9a"
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 23bfa34944..0c457d4106 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -43,7 +43,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
     return sanitize(url)
   }
 
-  const routes = screens.map(s => makeRootedPath(s.routing?.route))
+  const routes = screens.map(s => makeRootedPath(s.routing && s.routing.route))
   let fallback = routes.findIndex(([p]) => p === makeRootedPath("*"))
   if (fallback < 0) fallback = 0
 
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index ee09ecd3b5..fc5223823e 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -200,15 +200,6 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.3.8":
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.3.8.tgz#75df7e97e8f0d9b58c00e2bb0d3b4a55f8d04735"
-  integrity sha512-tnFdmCdXKS+uZGoipr69Wa0oVoFHmyoV0ydihI6q0gKQH0KutypVHAaul2qPB8t5a/mTZopC//2WdmCeX1GKVg==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1236,11 +1227,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -1313,13 +1299,6 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sdk@^2.767.0:
   version "2.771.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.771.0.tgz#ff4beb0a04d6ab1ae962c85dfb42e3e9bfe2b93b"
@@ -1687,14 +1666,6 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
-call-bind@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.0.tgz#24127054bb3f9bdcb4b1fb82418186072f77b8ce"
-  integrity sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.0"
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -2200,26 +2171,6 @@ decompress@^4.2.1:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
-  dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2601,7 +2552,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.7"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
   integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
@@ -2618,7 +2569,7 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstrac
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
+es-abstract@^1.18.0-next.0:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
   integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
@@ -2636,20 +2587,6 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-get-iterator@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
-  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.1"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3327,15 +3264,6 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
-  integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -3860,21 +3788,11 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3882,11 +3800,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3923,7 +3836,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4003,11 +3916,6 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
@@ -4023,11 +3931,6 @@ is-npm@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4079,21 +3982,11 @@ is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -4110,16 +4003,6 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4130,16 +4013,6 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4165,11 +4038,6 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -5708,14 +5576,6 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-is@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
-  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -6585,19 +6445,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -6957,14 +6804,6 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7992,44 +7831,11 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

From a00bf70d2935cc5588415213581f6b1e213857ed Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 19 Nov 2020 11:15:29 +0000
Subject: [PATCH 2/7] further store tidy up, derive selected page

---
 packages/builder/src/builderStore/index.js    |  6 ++
 .../src/builderStore/store/frontend.js        | 57 ++++++++-----------
 .../ComponentTree.svelte                      |  7 +--
 .../ComponentNavigationTree/PathTree.svelte   | 11 ++--
 .../ComponentNavigationTree/Screen.svelte     |  0
 .../ScreenDropdownMenu.svelte                 | 53 +++++++++++++++++
 .../ComponentNavigationTree/dragDropStore.js  |  2 +-
 .../ComponentNavigationTree/index.svelte      |  4 --
 .../ComponentsHierarchyChildren.svelte        |  2 +-
 packages/client/src/render/screenRouter.js    |  2 +-
 10 files changed, 95 insertions(+), 49 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/Screen.svelte
 create mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte

diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 1bd86480a4..ae77889404 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -31,6 +31,12 @@ export const currentScreens = derived(store, $store => {
     : Object.values(currentScreens)
 })
 
+export const selectedPage = derived(store, $store => {
+  if (!$store.pages) return null
+
+  return $store.pages[$store.currentPageName || "main"]
+})
+
 export const initialise = async () => {
   try {
     await analytics.activate()
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 7b34013114..9c68bd814a 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -5,8 +5,7 @@ import {
   getBuiltin,
   makePropsSafe,
 } from "components/userInterface/pagesParsing/createProps"
-import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
-import { allScreens, backendUiStore } from "builderStore"
+import { allScreens, backendUiStore, selectedPage } from "builderStore"
 import { generate_screen_css } from "../generate_css"
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
@@ -112,10 +111,9 @@ export const getFrontendStore = () => {
       store.update(state => {
         state.currentFrontEndType = type
 
-        const pageOrScreen =
-          type === "page"
-            ? state.pages[state.currentPageName]
-            : state.pages[state.currentPageName]._screens[0]
+        const page = get(selectedPage)
+
+        const pageOrScreen = type === "page" ? page : page._screens[0]
 
         state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null
         state.currentPreviewItem = pageOrScreen
@@ -159,32 +157,25 @@ export const getFrontendStore = () => {
         await savePromise
       },
       save: async screen => {
-        const storeContents = get(store)
-        const pageName = storeContents.currentPageName || "main"
-        const currentPage = storeContents.pages[pageName]
-        const currentPageScreens = currentPage._screens
+        const page = get(selectedPage)
+        const currentPageScreens = page._screens
 
         const creatingNewScreen = screen._id === undefined
 
         let savePromise
-        const response = await api.post(
-          `/api/screens/${currentPage._id}`,
-          screen
-        )
+        const response = await api.post(`/api/screens/${page._id}`, screen)
         const json = await response.json()
         screen._rev = json.rev
         screen._id = json.id
-        const foundScreen = currentPageScreens.findIndex(
-          el => el._id === screen._id
-        )
+        const foundScreen = page._screens.findIndex(el => el._id === screen._id)
         if (foundScreen !== -1) {
-          currentPageScreens.splice(foundScreen, 1)
+          page._screens.splice(foundScreen, 1)
         }
-        currentPageScreens.push(screen)
+        page._screens.push(screen)
 
         // TODO: should carry out all server updates to screen in a single call
         store.update(state => {
-          state.pages[pageName]._screens = currentPageScreens
+          page._screens = currentPageScreens
 
           if (creatingNewScreen) {
             state.currentPreviewItem = screen
@@ -210,21 +201,20 @@ export const getFrontendStore = () => {
           store.actions.screens.regenerateCss(currentPreviewItem)
         }
       },
-      delete: async (screensToDelete, pageName) => {
+      delete: async screens => {
         let deletePromise
 
+        const screensToDelete = Array.isArray(screens) ? screens : [screens]
+
         store.update(state => {
-          if (pageName == null) {
-            pageName = state.pages.main.name
-          }
-          for (let screenToDelete of Array.isArray(screensToDelete)
-            ? screensToDelete
-            : [screensToDelete]) {
+          const currentPage = get(selectedPage)
+
+          for (let screenToDelete of screensToDelete) {
             // Remove screen from current page as well
             // TODO: Should be done server side
-            state.pages[pageName]._screens = state.pages[
-              pageName
-            ]._screens.filter(scr => scr._id !== screenToDelete._id)
+            currentPage._screens = currentPage._screens.filter(
+              scr => scr._id !== screenToDelete._id
+            )
             deletePromise = api.delete(
               `/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
             )
@@ -310,14 +300,13 @@ export const getFrontendStore = () => {
       create: (componentToAdd, presetProps) => {
         store.update(state => {
           function findSlot(component_array) {
-            for (let i = 0; i < component_array.length; i += 1) {
-              if (component_array[i]._component === "##builtin/screenslot") {
+            for (let component of component_array) {
+              if (component._component === "##builtin/screenslot") {
                 return true
               }
 
-              if (component_array[i]._children) findSlot(component_array[i])
+              if (component._children) findSlot(component)
             }
-
             return false
           }
 
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
index e856908dfd..ee162f0eba 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
@@ -1,11 +1,10 @@
 <script>
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
-  import { last } from "lodash/fp"
+  import { getComponentDefinition } from "builderStore/storeUtils"
   import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
-  import { getComponentDefinition } from "builderStore/storeUtils"
 
   export let components = []
   export let currentComponent
@@ -56,7 +55,7 @@
 <ul>
   {#each components as component, index (component._id)}
     <li on:click|stopPropagation={() => selectComponent(component)}>
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
+      {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
         <div
           on:drop={dragDropStore.actions.drop}
           ondragover="return false"
@@ -87,7 +86,7 @@
           level={level + 1} />
       {/if}
 
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
+      {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
         <div
           on:drop={dragDropStore.actions.drop}
           ondragover="return false"
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index b1b2abfcc5..fd62eeee58 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -1,12 +1,14 @@
 <script>
   import { writable } from "svelte/store"
   import { goto } from "@sveltech/routify"
+  import { store } from "builderStore"
   import instantiateStore from "./dragDropStore"
+
   import ComponentsTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
-  import { store } from "builderStore"
+  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
 
-  const dragDropStore = instantiateStore() 
+  const dragDropStore = instantiateStore()
 
   export let route
   export let indent
@@ -27,16 +29,17 @@
   text={route.fullpath}
   withArrow={route.subpaths}
   on:click={() => console.log(route)} />
+
 {#each Object.keys(route.screens) as screen}
   <NavItem
     icon="ri-artboard-2-line"
     indentLevel={indent || 1}
-    selected={$store.currentComponentInfo._id === route.screens[screen]}
+    selected={$store.currentPreviewItem._id === route.screens[screen]}
     opened={$store.currentPreviewItem._id === route.screens[screen]}
     text={screen || 'DEFAULT'}
     withArrow={route.subpaths}
     on:click={() => changeScreen(route.screens[screen])}>
-    <!-- <ScreenDropdownMenu screen={route.screens[screen]} /> -->
+    <ScreenDropdownMenu screen={route.screens[screen]} />
   </NavItem>
   {#if selectedScreen?._id === route.screens[screen]}
     <ComponentsTree
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/Screen.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/Screen.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
new file mode 100644
index 0000000000..de3a625b74
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  import { store } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+
+  export let screen
+
+  let confirmDeleteDialog
+  let dropdown
+  let anchor
+
+  const deleteScreen = () => {
+    store.actions.screens.delete(screen, $store.currentPageName)
+    // update the page if required
+    store.update(state => {
+      if (state.currentPreviewItem._id === screen._id) {
+        store.actions.pages.select($store.currentPageName)
+        notifier.success(`Screen ${screen.name} deleted successfully.`)
+        $goto(`./:page/page-layout`)
+      }
+      return state
+    })
+  }
+</script>
+
+<div bind:this={anchor} on:click|stopPropagation>
+  <div class="icon" on:click={() => dropdown.show()}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu bind:this={dropdown} {anchor} align="left">
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+    </DropdownContainer>
+  </DropdownMenu>
+</div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  body={'Are you sure you wish to delete this screen?'}
+  okText="Delete Screen"
+  onOk={deleteScreen} />
+
+<style>
+  .icon i {
+    font-size: 16px;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js b/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
index c5e7fc8736..1aa180e938 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
@@ -46,7 +46,7 @@ export default function() {
 
           // hovered in center of target
           if (mousePosition > 0.4 && mousePosition < 0.8) {
-            state.dropPosition = DropPosition.BELOW
+            state.dropPosition = DropPosition.INSIDE
           }
           return
         }
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
index a80409dac0..0063502dd4 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
@@ -1,10 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import ComponentTree from "./ComponentTree.svelte"
   import { store } from "builderStore"
-  import ScreenDropdownMenu from "../ScreenDropdownMenu.svelte"
-  import { writable } from "svelte/store"
-  import NavItem from "components/common/NavItem.svelte"
   import PathTree from "./PathTree.svelte"
 
   export let routes = {}
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index f1b938fdff..5e017ac349 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -100,7 +100,7 @@
 
   const drop = () => {
     if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
-      store.actions.components.cut($dragDropStore.componentToDrop)
+      store.actions.components.copy($dragDropStore.componentToDrop)
       store.actions.components.paste(
         $dragDropStore.targetComponent,
         $dragDropStore.dropPosition
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 0c457d4106..784cada80d 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -43,7 +43,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
     return sanitize(url)
   }
 
-  const routes = screens.map(s => makeRootedPath(s.routing && s.routing.route))
+  const routes = screens.map(screen => makeRootedPath(screen.routing.route))
   let fallback = routes.findIndex(([p]) => p === makeRootedPath("*"))
   if (fallback < 0) fallback = 0
 

From e5bba6b5e6c80ffced783570eca0cc846c558c8d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 19 Nov 2020 16:12:55 +0000
Subject: [PATCH 3/7] remove old files

---
 .../ComponentNavigationTree/PathTree.svelte   |  43 ++--
 .../ScreenDropdownMenu.svelte                 |   7 +-
 .../ComponentNavigationTree/index.svelte      |   2 +-
 .../userInterface/ComponentsHierarchy.svelte  |  61 ------
 .../ComponentsHierarchyChildren.svelte        | 185 ------------------
 .../design/[page]/[screen]/_layout.svelte     |   4 +-
 6 files changed, 28 insertions(+), 274 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
 delete mode 100644 packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index fd62eeee58..9283c7ec7a 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -11,10 +11,9 @@
   const dragDropStore = instantiateStore()
 
   export let route
+  export let path
   export let indent
 
-  $: console.log(route)
-  $: console.log("preview", $store.currentPreviewItem)
   $: selectedScreen = $store.currentPreviewItem
 
   const changeScreen = screenId => {
@@ -26,28 +25,28 @@
 
 <NavItem
   icon="ri-route-line"
-  text={route.fullpath}
+  text={path}
+  opened={true}
   withArrow={route.subpaths}
   on:click={() => console.log(route)} />
 
-{#each Object.keys(route.screens) as screen}
-  <NavItem
-    icon="ri-artboard-2-line"
-    indentLevel={indent || 1}
-    selected={$store.currentPreviewItem._id === route.screens[screen]}
-    opened={$store.currentPreviewItem._id === route.screens[screen]}
-    text={screen || 'DEFAULT'}
-    withArrow={route.subpaths}
-    on:click={() => changeScreen(route.screens[screen])}>
-    <ScreenDropdownMenu screen={route.screens[screen]} />
-  </NavItem>
-  {#if selectedScreen?._id === route.screens[screen]}
-    <ComponentsTree
-      components={selectedScreen.props._children}
-      currentComponent={$store.currentComponentInfo}
-      {dragDropStore} />
-  {/if}
-{/each}
 {#each Object.keys(route.subpaths) as subpath}
-  <svelte:self route={route.subpaths[subpath]} indent={2} />
+  {#each Object.keys(route.subpaths[subpath].screens) as screen}
+    <NavItem
+      icon="ri-artboard-2-line"
+      indentLevel={indent || 1}
+      selected={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
+      opened={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
+      text={subpath}
+      withArrow={route.subpaths}
+      on:click={() => changeScreen(route.subpaths[subpath].screens[screen])}>
+      <ScreenDropdownMenu screen={route.subpaths[subpath].screens[screen]} />
+    </NavItem>
+    {#if selectedScreen?._id === route.subpaths[subpath].screens[screen]}
+      <ComponentsTree
+        components={selectedScreen.props._children}
+        currentComponent={$store.currentComponentInfo}
+        {dragDropStore} />
+    {/if}
+  {/each}
 {/each}
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
index de3a625b74..bd7341be93 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { store } from "builderStore"
+  import { store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownMenu } from "@budibase/bbui"
@@ -13,12 +13,13 @@
   let anchor
 
   const deleteScreen = () => {
-    store.actions.screens.delete(screen, $store.currentPageName)
+    const screenToDelete = $allScreens.find(scr => scr._id === screen)
+    store.actions.screens.delete(screenToDelete)
     // update the page if required
     store.update(state => {
       if (state.currentPreviewItem._id === screen._id) {
         store.actions.pages.select($store.currentPageName)
-        notifier.success(`Screen ${screen.name} deleted successfully.`)
+        notifier.success(`Screen ${screenToDelete.name} deleted successfully.`)
         $goto(`./:page/page-layout`)
       }
       return state
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
index 0063502dd4..ef783b1afd 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
@@ -8,6 +8,6 @@
 
 <div class="root">
   {#each Object.keys(routes) as path}
-    <PathTree route={routes[path]} />
+    <PathTree {path} route={routes[path]} />
   {/each}
 </div>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
deleted file mode 100644
index 78f17613c5..0000000000
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import { trimCharsStart, trimChars } from "lodash/fp"
-  import { pipe } from "../../helpers"
-  import { store } from "builderStore"
-  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
-  import { writable } from "svelte/store"
-  import NavItem from "components/common/NavItem.svelte"
-
-  export let screens = []
-
-  $: sortedScreens = screens.sort((s1, s2) => {
-    const name1 = s1.props._instanceName?.toLowerCase() ?? ""
-    const name2 = s2.props._instanceName?.toLowerCase() ?? ""
-    return name1 > name2 ? 1 : -1
-  })
-  /*
-  Using a store here seems odd.... 
-  have a look in the <ComponentsHierarchyChildren /> code file to find out why. 
-  I have commented the dragDropStore parameter
-  */
-  const dragDropStore = writable({})
-
-  let confirmDeleteDialog
-  let componentToDelete = ""
-
-  const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
-
-  const changeScreen = screen => {
-    store.actions.screens.select(screen.props._instanceName)
-    $goto(`./:page/${screen.props._instanceName}`)
-  }
-</script>
-
-<div class="root">
-  {#each sortedScreens as screen}
-    <NavItem
-      icon="ri-artboard-2-line"
-      text={screen.props._instanceName}
-      withArrow={screen.props._children.length}
-      selected={$store.currentComponentInfo._id === screen.props._id}
-      opened={$store.currentPreviewItem.name === screen.props._id}
-      on:click={() => changeScreen(screen)}>
-      <ScreenDropdownMenu {screen} />
-    </NavItem>
-
-    {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
-      <ComponentsHierarchyChildren
-        components={screen.props._children}
-        currentComponent={$store.currentComponentInfo}
-        {dragDropStore} />
-    {/if}
-  {/each}
-</div>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
deleted file mode 100644
index 5e017ac349..0000000000
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ /dev/null
@@ -1,185 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import { store } from "builderStore"
-  import { last } from "lodash/fp"
-  import { pipe } from "../../helpers"
-  import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
-  import NavItem from "components/common/NavItem.svelte"
-  import { getComponentDefinition } from "builderStore/storeUtils"
-
-  export let components = []
-  export let currentComponent
-  export let onSelect = () => {}
-  export let level = 0
-
-  /*
-  "dragDropStore" is a svelte store.
-  This component is recursive... a tree.
-  Using a single, shared store, all the nodes in the tree can subscribe to state that is changed by other nodes, in the same tree.
-
-  e.g. Say i have the structure
-  - Heading 1
-  - Container 
-    - Heading 2
-    - Heading 3
-  - Heading 4
-
-  1. When I dragover "Heading 1", a placeholder drop-slot appears below it
-  2. I drag down a bit so the cursor is INSIDE the container (i.e. now in a child <ComponentsHierarchyChildren />)
-  3. Using store subscribes... the original drop-slot now knows that it should disappear, and a new one is created inside the container.
-  */
-  export let dragDropStore
-
-  let dropUnderComponent
-  let componentToDrop
-
-  const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
-  const get_name = s => (!s ? "" : last(s.split("/")))
-  const get_capitalised_name = name =>
-    pipe(
-      name,
-      [get_name, capitalise]
-    )
-  const isScreenslot = name => name === "##builtin/screenslot"
-
-  const selectComponent = component => {
-    // Set current component
-    store.actions.components.select(component)
-
-    // Get ID path
-    const path = store.actions.components.findRoute(component)
-
-    // Go to correct URL
-    $goto(`./:page/:screen/${path}`)
-  }
-
-  const dragstart = component => e => {
-    e.dataTransfer.dropEffect = "move"
-    dragDropStore.update(s => {
-      s.componentToDrop = component
-      return s
-    })
-  }
-
-  const dragover = (component, index) => e => {
-    const canHaveChildrenButIsEmpty =
-      getComponentDefinition($store, component._component).children &&
-      component._children.length === 0
-
-    e.dataTransfer.dropEffect = "copy"
-    dragDropStore.update(s => {
-      const isBottomHalf = e.offsetY > e.currentTarget.offsetHeight / 2
-      s.targetComponent = component
-      // only allow dropping inside when container type
-      // is empty. If it has children, the user can drag over
-      // it's existing children
-      if (canHaveChildrenButIsEmpty) {
-        if (index === 0) {
-          // when its the first component in the screen,
-          // we divide into 3, so we can paste above, inside or below
-          const pos = e.offsetY / e.currentTarget.offsetHeight
-          if (pos < 0.4) {
-            s.dropPosition = "above"
-          } else if (pos > 0.8) {
-            // purposely giving this the least space as it is often covered
-            // by the component below's "above" space
-            s.dropPosition = "below"
-          } else {
-            s.dropPosition = "inside"
-          }
-        } else {
-          s.dropPosition = isBottomHalf ? "below" : "inside"
-        }
-      } else {
-        s.dropPosition = isBottomHalf ? "below" : "above"
-      }
-      return s
-    })
-    return false
-  }
-
-  const drop = () => {
-    if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
-      store.actions.components.copy($dragDropStore.componentToDrop)
-      store.actions.components.paste(
-        $dragDropStore.targetComponent,
-        $dragDropStore.dropPosition
-      )
-    }
-    dragDropStore.update(s => {
-      s.dropPosition = ""
-      s.targetComponent = null
-      s.componentToDrop = null
-      return s
-    })
-  }
-
-  const dragend = () => {
-    dragDropStore.update(s => {
-      s.dropPosition = ""
-      s.targetComponent = null
-      s.componentToDrop = null
-      return s
-    })
-  }
-</script>
-
-<ul>
-  {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => selectComponent(component)}>
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === 'above'}
-        <div
-          on:drop={drop}
-          ondragover="return false"
-          ondragenter="return false"
-          class="drop-item"
-          style="margin-left: {(level + 1) * 16}px" />
-      {/if}
-
-      <NavItem
-        draggable
-        on:dragend={dragend}
-        on:dragstart={dragstart(component)}
-        on:dragover={dragover(component, index)}
-        on:drop={drop}
-        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
-        withArrow
-        indentLevel={level + 1}
-        selected={currentComponent === component}>
-        <ComponentDropdownMenu {component} />
-      </NavItem>
-
-      {#if component._children}
-        <svelte:self
-          components={component._children}
-          {currentComponent}
-          {onSelect}
-          {dragDropStore}
-          level={level + 1} />
-      {/if}
-
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === 'inside' || $dragDropStore.dropPosition === 'below')}
-        <div
-          on:drop={drop}
-          ondragover="return false"
-          ondragenter="return false"
-          class="drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 16}px" />
-      {/if}
-    </li>
-  {/each}
-</ul>
-
-<style>
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-  }
-
-  .drop-item {
-    border-radius: var(--border-radius-m);
-    height: 32px;
-    background: var(--grey-3);
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
index d67f365135..99434b7cd5 100644
--- a/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
@@ -25,8 +25,8 @@
         // Get the correct screen children.
         const screenChildren = $store.pages[$params.page]._screens.find(
           screen =>
-            screen.props._instanceName === $params.screen ||
-            screen.props._instanceName === decodeURIComponent($params.screen)
+            screen._id === $params.screen ||
+            screen._id === decodeURIComponent($params.screen)
         ).props._children
         findComponent(componentIds, screenChildren)
       }

From ab5312061bb13000d1c7c0649e4c7714270c0ce7 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 19 Nov 2020 16:41:29 +0000
Subject: [PATCH 4/7] tidy up

---
 .../src/builderStore/store/frontend.js        |  1 +
 .../ComponentNavigationTree/PathTree.svelte   | 19 +++++++++----------
 .../userInterface/FrontendNavigatePane.svelte |  7 ++-----
 .../userInterface/PageLayout.svelte           |  5 ++---
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9c68bd814a..2275dca348 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -215,6 +215,7 @@ export const getFrontendStore = () => {
             currentPage._screens = currentPage._screens.filter(
               scr => scr._id !== screenToDelete._id
             )
+
             deletePromise = api.delete(
               `/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
             )
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index 9283c7ec7a..fd27e341c3 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -27,22 +27,21 @@
   icon="ri-route-line"
   text={path}
   opened={true}
-  withArrow={route.subpaths}
-  on:click={() => console.log(route)} />
+  withArrow={route.subpaths} />
 
-{#each Object.keys(route.subpaths) as subpath}
-  {#each Object.keys(route.subpaths[subpath].screens) as screen}
+{#each Object.entries(route.subpaths) as [url, subpath]}
+  {#each Object.values(subpath.screens) as screenId}
     <NavItem
       icon="ri-artboard-2-line"
       indentLevel={indent || 1}
-      selected={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
-      opened={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
-      text={subpath}
+      selected={$store.currentPreviewItem._id === screenId}
+      opened={$store.currentPreviewItem._id === screenId}
+      text={url}
       withArrow={route.subpaths}
-      on:click={() => changeScreen(route.subpaths[subpath].screens[screen])}>
-      <ScreenDropdownMenu screen={route.subpaths[subpath].screens[screen]} />
+      on:click={() => changeScreen(screenId)}>
+      <ScreenDropdownMenu screen={screenId} />
     </NavItem>
-    {#if selectedScreen?._id === route.subpaths[subpath].screens[screen]}
+    {#if selectedScreen?._id === screenId}
       <ComponentsTree
         components={selectedScreen.props._children}
         currentComponent={$store.currentComponentInfo}
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index d7606190a3..7f8630330d 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte"
   import { store, currentScreens } from "builderStore"
   import api from "builderStore/api"
-  import ComponentsHierarchy from "components/userInterface/ComponentNavigationTree/index.svelte"
+  import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
@@ -13,12 +13,9 @@
   let routes = {}
 
   async function fetchRoutes() {
-    // fetch the routing stuff here
     const response = await api.get("/api/routing")
     const json = await response.json()
 
-    console.log(json)
-
     routes = json.routes
   }
 
@@ -34,7 +31,7 @@
 <PagesList />
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
-  <ComponentsHierarchy {routes} />
+  <ComponentNavigationTree {routes} />
 </div>
 <Modal bind:this={modal}>
   <NewScreenModal />
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 932fc0a4f0..14cb835c6b 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
+  import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { last } from "lodash/fp"
   import { store } from "builderStore"
@@ -37,8 +37,7 @@
   on:click={setCurrentScreenToLayout} />
 
 {#if $store.currentPreviewItem?.name === _layout.title && _layout.component.props._children}
-  <ComponentsHierarchyChildren
-    thisComponent={_layout.component.props}
+  <ComponentTree
     components={_layout.component.props._children}
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />

From 09bd7da1dbd37f619af057afa873451d13421296 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 19 Nov 2020 17:09:56 +0000
Subject: [PATCH 5/7] add optional chain back in

---
 packages/client/src/render/screenRouter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 784cada80d..d214fa8f21 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -43,7 +43,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
     return sanitize(url)
   }
 
-  const routes = screens.map(screen => makeRootedPath(screen.routing.route))
+  const routes = screens.map(screen => makeRootedPath(screen?.routing.route))
   let fallback = routes.findIndex(([p]) => p === makeRootedPath("*"))
   if (fallback < 0) fallback = 0
 

From 0d32dd0719c8840c5436e56477dfaa5e811ab120 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 19 Nov 2020 20:50:17 +0000
Subject: [PATCH 6/7] folders for routes, show home instead of slash

---
 .../userInterface/ComponentNavigationTree/PathTree.svelte     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index fd27e341c3..d9f86b44cd 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <NavItem
-  icon="ri-route-line"
+  icon="ri-folder-line"
   text={path}
   opened={true}
   withArrow={route.subpaths} />
@@ -36,7 +36,7 @@
       indentLevel={indent || 1}
       selected={$store.currentPreviewItem._id === screenId}
       opened={$store.currentPreviewItem._id === screenId}
-      text={url}
+      text={url === "/" ? "Home" : url}
       withArrow={route.subpaths}
       on:click={() => changeScreen(screenId)}>
       <ScreenDropdownMenu screen={screenId} />

From 6bc9c86623230ace7e08576a5c427cccc3f1bd36 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 19 Nov 2020 21:07:25 +0000
Subject: [PATCH 7/7] fix for delete screens

---
 .../src/builderStore/store/frontend.js        | 12 +++++
 .../ScreenDropdownMenu.svelte                 |  3 +-
 .../ComponentNavigationTree/index.svelte      |  6 +--
 .../userInterface/FrontendNavigatePane.svelte | 11 +---
 .../userInterface/ScreenDropdownMenu.svelte   | 53 -------------------
 5 files changed, 18 insertions(+), 67 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9d9e2f83e6..778c7f7be5 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -36,6 +36,7 @@ const INITIAL_FRONTEND_STATE = {
   hasAppPackage: false,
   libraries: null,
   appId: "",
+  routes: {},
 }
 
 export const getFrontendStore = () => {
@@ -120,6 +121,17 @@ export const getFrontendStore = () => {
         return state
       })
     },
+    routing: {
+      fetch: async () => {
+        const response = await api.get("/api/routing")
+        const json = await response.json()
+
+        store.update(state => {
+          state.routes = json.routes
+          return state
+        })
+      },
+    },
     screens: {
       select: screenId => {
         store.update(state => {
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
index bd7341be93..3ecd8ce0dc 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -15,9 +15,10 @@
   const deleteScreen = () => {
     const screenToDelete = $allScreens.find(scr => scr._id === screen)
     store.actions.screens.delete(screenToDelete)
+    store.actions.routing.fetch()
     // update the page if required
     store.update(state => {
-      if (state.currentPreviewItem._id === screen._id) {
+      if (state.currentPreviewItem._id === screen) {
         store.actions.pages.select($store.currentPageName)
         notifier.success(`Screen ${screenToDelete.name} deleted successfully.`)
         $goto(`./:page/page-layout`)
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
index ef783b1afd..dbdfad0828 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
@@ -2,12 +2,10 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import PathTree from "./PathTree.svelte"
-
-  export let routes = {}
 </script>
 
 <div class="root">
-  {#each Object.keys(routes) as path}
-    <PathTree {path} route={routes[path]} />
+  {#each Object.keys($store.routes) as path}
+    <PathTree {path} route={$store.routes[path]} />
   {/each}
 </div>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 7f8630330d..90d03e16a2 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -12,15 +12,8 @@
 
   let routes = {}
 
-  async function fetchRoutes() {
-    const response = await api.get("/api/routing")
-    const json = await response.json()
-
-    routes = json.routes
-  }
-
   onMount(() => {
-    fetchRoutes()
+    store.actions.routing.fetch()
   })
 </script>
 
@@ -31,7 +24,7 @@
 <PagesList />
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
-  <ComponentNavigationTree {routes} />
+  <ComponentNavigationTree />
 </div>
 <Modal bind:this={modal}>
   <NewScreenModal />
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
deleted file mode 100644
index 74f4654ce3..0000000000
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import { store } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
-
-  export let screen
-
-  let confirmDeleteDialog
-  let dropdown
-  let anchor
-
-  const deleteScreen = () => {
-    store.actions.screens.delete(screen, $store.currentPageName)
-    // update the page if required
-    store.update(state => {
-      if (state.currentPreviewItem._id === screen._id) {
-        store.actions.pages.select($store.currentPageName)
-        notifier.success(`Screen ${screen.name} deleted successfully.`)
-        $goto(`./:page/page-layout`)
-      }
-      return state
-    })
-  }
-</script>
-
-<div bind:this={anchor} on:click|stopPropagation>
-  <div class="icon" on:click={() => dropdown.show()}>
-    <i class="ri-more-line" />
-  </div>
-  <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={() => confirmDeleteDialog.show()} />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  body={`Are you sure you wish to delete the screen '${screen.props._instanceName}' ?`}
-  okText="Delete Screen"
-  onOk={deleteScreen} />
-
-<style>
-  .icon i {
-    font-size: 16px;
-  }
-</style>