From ae8c5cb8b1251f5a8a7d1a32961592a45e9bf061 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 10:39:54 +0200
Subject: [PATCH 01/11] adds fallback page to catch params

---
 .../pages/[application]/frontend/[page]/_fallback.svelte   | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
new file mode 100644
index 0000000000..c2568469f0
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { leftover } from "@sveltech/routify"
+
+  console.log($leftover)
+</script>
+
+TEST

From d4c6e076ed6f92ffd8401c9508017f18c148d16f Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 12:04:38 +0200
Subject: [PATCH 02/11] sets up basic structure

---
 .../frontend/[page]/[screen]/_fallback.svelte            | 9 +++++++++
 .../pages/[application]/frontend/[page]/_fallback.svelte | 7 -------
 .../pages/[application]/frontend/[page]/_layout.svelte   | 7 +++++++
 .../src/pages/[application]/frontend/[page]/index.svelte | 1 +
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
 delete mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/index.svelte

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
new file mode 100644
index 0000000000..29240e41a0
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { leftover } from "@sveltech/routify"
+
+  const structure = $leftover.split("/")
+
+  console.log(structure)
+</script>
+
+CREEN FALLBACK THINGIE!
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
deleted file mode 100644
index c2568469f0..0000000000
--- a/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { leftover } from "@sveltech/routify"
-
-  console.log($leftover)
-</script>
-
-TEST
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
new file mode 100644
index 0000000000..bfcfa9be45
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { params } from "@sveltech/routify"
+
+  console.log($params)
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
new file mode 100644
index 0000000000..2a02d41ce2
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
@@ -0,0 +1 @@
+TEST

From 4b4733daa8eb262947b7a3709cc50010cc399bf8 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 13:59:29 +0200
Subject: [PATCH 03/11] moves frontend root to route component

---
 .../userInterface/UserInterfaceRoot.svelte    | 240 ------------------
 .../[application]/frontend/_layout.svelte     | 240 +++++++++++++++++-
 .../pages/[application]/frontend/index.svelte |   5 -
 3 files changed, 239 insertions(+), 246 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/UserInterfaceRoot.svelte

diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
deleted file mode 100644
index 4f32c55d24..0000000000
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ /dev/null
@@ -1,240 +0,0 @@
-<script>
-  import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import PageLayout from "./PageLayout.svelte"
-  import PagesList from "./PagesList.svelte"
-  import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
-  import NewScreen from "./NewScreen.svelte"
-  import CurrentItemPreview from "./CurrentItemPreview.svelte"
-  import SettingsView from "./SettingsView.svelte"
-  import PageView from "./PageView.svelte"
-  import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
-
-  let newScreenPicker
-  let confirmDeleteDialog
-  let componentToDelete = ""
-
-  const newScreen = () => {
-    newScreenPicker.show()
-  }
-
-  let settingsView
-  const settings = () => {
-    settingsView.show()
-  }
-
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
-  const lastPartOfName = c => (c ? last(c.split("/")) : "")
-</script>
-
-<div class="root">
-
-  <div class="ui-nav">
-
-    <div class="pages-list-container">
-      <div class="nav-header">
-        <span class="navigator-title">Navigator</span>
-        <div class="border-line" />
-
-        <span class="components-nav-page">Pages</span>
-      </div>
-
-      <div class="nav-items-container">
-        <PagesList />
-      </div>
-    </div>
-
-    <div class="border-line" />
-
-    <PageLayout layout={$store.pages[$store.currentPageName]} />
-
-    <div class="border-line" />
-
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <span class="components-nav-header" style="margin-top: 0;">
-          Screens
-        </span>
-        <div>
-          <button on:click={newScreen}>
-            <AddIcon />
-          </button>
-        </div>
-      </div>
-      <div class="nav-items-container">
-        <ComponentsHierarchy screens={$store.screens} />
-      </div>
-    </div>
-
-  </div>
-
-  <div class="preview-pane">
-    <CurrentItemPreview />
-  </div>
-
-  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
-    <div class="components-pane">
-      <ComponentsPaneSwitcher />
-    </div>
-  {/if}
-
-</div>
-
-<NewScreen bind:this={newScreenPicker} />
-<SettingsView bind:this={settingsView} />
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
-<style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    width: 20px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
-  .root {
-    display: grid;
-    grid-template-columns: 275px 1fr 275px;
-    height: 100%;
-    width: 100%;
-    background: #fafafa;
-  }
-
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr 300px;
-      height: 100%;
-      width: 100%;
-      background: #fafafa;
-    }
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-    padding: 0;
-    overflow: scroll;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .preview-pane {
-    grid-column: 2;
-    margin: 40px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-  }
-
-  .components-pane {
-    grid-column: 3;
-    background-color: var(--white);
-    min-height: 0px;
-    overflow-y: scroll;
-  }
-
-  .components-nav-page {
-    font-size: 13px;
-    color: #000333;
-    text-transform: uppercase;
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: #000333;
-    text-transform: uppercase;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .nav-group-header > div:nth-child(1) {
-    padding: 0rem 0.5rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-  }
-
-  .nav-group-header > span:nth-child(3) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
-
-  .nav-group-header > div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--primary75);
-  }
-
-  .nav-group-header > div:nth-child(3):hover {
-    color: var(--primary75);
-  }
-
-  .navigator-title {
-    font-size: 14px;
-    color: var(--secondary100);
-    font-weight: 600;
-    text-transform: uppercase;
-    padding: 0 20px 20px 20px;
-    line-height: 1rem !important;
-    letter-spacing: 1px;
-  }
-
-  .border-line {
-    border-bottom: 1px solid #d8d8d8;
-  }
-
-  .components-list-container {
-    padding: 20px 0px 0 0;
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index bead97cca4..3cdc507521 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -2,6 +2,19 @@
   import { store, backendUiStore } from "builderStore"
   import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
+  import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
+  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
+  import PageLayout from "components/userInterface/PageLayout.svelte"
+  import PagesList from "components/userInterface/PagesList.svelte"
+  import IconButton from "components/common/IconButton.svelte"
+  import NewScreen from "components/userInterface/NewScreen.svelte"
+  import CurrentItemPreview from "components/userInterface/CurrentItemPreview.svelte"
+  import SettingsView from "components/userInterface/SettingsView.svelte"
+  import PageView from "components/userInterface/PageView.svelte"
+  import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { last } from "lodash/fp"
+  import { AddIcon } from "components/common/Icons"
 
   $: instances = $store.appInstances
   $: views = $store.hierarchy.indexes
@@ -17,6 +30,231 @@
       await selectDatabase($store.appInstances[0])
     }
   })
+
+  let newScreenPicker
+  let confirmDeleteDialog
+  let componentToDelete = ""
+
+  const newScreen = () => {
+    newScreenPicker.show()
+  }
+
+  let settingsView
+  const settings = () => {
+    settingsView.show()
+  }
+
+  const confirmDeleteComponent = component => {
+    componentToDelete = component
+    confirmDeleteDialog.show()
+  }
+
+  const lastPartOfName = c => (c ? last(c.split("/")) : "")
+
+  $: console.log("Pages: ", $store.pages[$store.currentPageName])
+  $: console.log("Screens: ", $store.screens)
 </script>
 
-<slot />
+<div class="root">
+
+  <div class="ui-nav">
+
+    <div class="pages-list-container">
+      <div class="nav-header">
+        <span class="navigator-title">Navigator</span>
+        <div class="border-line" />
+
+        <span class="components-nav-page">Pages</span>
+      </div>
+
+      <div class="nav-items-container">
+        <PagesList />
+      </div>
+    </div>
+
+    <div class="border-line" />
+
+    <PageLayout layout={$store.pages[$store.currentPageName]} />
+
+    <div class="border-line" />
+
+    <div class="components-list-container">
+      <div class="nav-group-header">
+        <span class="components-nav-header" style="margin-top: 0;">
+          Screens
+        </span>
+        <div>
+          <button on:click={newScreen}>
+            <AddIcon />
+          </button>
+        </div>
+      </div>
+      <div class="nav-items-container">
+        <ComponentsHierarchy screens={$store.screens} />
+      </div>
+    </div>
+
+  </div>
+
+  <div class="preview-pane">
+    <CurrentItemPreview />
+  </div>
+
+  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
+    <div class="components-pane">
+      <ComponentsPaneSwitcher />
+    </div>
+  {/if}
+
+</div>
+
+<NewScreen bind:this={newScreenPicker} />
+<SettingsView bind:this={settingsView} />
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Delete"
+  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
+  okText="Delete Component"
+  onOk={() => store.deleteComponent(componentToDelete)} />
+
+<style>
+  button {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    width: 20px;
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+  }
+
+  .root {
+    display: grid;
+    grid-template-columns: 275px 1fr 275px;
+    height: 100%;
+    width: 100%;
+    background: #fafafa;
+  }
+
+  @media only screen and (min-width: 1800px) {
+    .root {
+      display: grid;
+      grid-template-columns: 300px 1fr 300px;
+      height: 100%;
+      width: 100%;
+      background: #fafafa;
+    }
+  }
+
+  .ui-nav {
+    grid-column: 1;
+    background-color: var(--white);
+    height: calc(100vh - 49px);
+    padding: 0;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .preview-pane {
+    grid-column: 2;
+    margin: 40px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  .components-pane {
+    grid-column: 3;
+    background-color: var(--white);
+    min-height: 0px;
+    overflow-y: scroll;
+  }
+
+  .components-nav-page {
+    font-size: 13px;
+    color: #000333;
+    text-transform: uppercase;
+    padding-left: 20px;
+    margin-top: 20px;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
+  }
+
+  .components-nav-header {
+    font-size: 13px;
+    color: #000333;
+    text-transform: uppercase;
+    margin-top: 20px;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
+  }
+
+  .nav-header {
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+  }
+
+  .nav-items-container {
+    padding: 1rem 0rem 0rem 0rem;
+  }
+
+  .nav-group-header {
+    display: flex;
+    padding: 0px 20px 0px 20px;
+    font-size: 0.9rem;
+    font-weight: bold;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .nav-group-header > div:nth-child(1) {
+    padding: 0rem 0.5rem 0rem 0rem;
+    vertical-align: bottom;
+    grid-column-start: icon;
+    margin-right: 5px;
+  }
+
+  .nav-group-header > span:nth-child(3) {
+    margin-left: 5px;
+    vertical-align: bottom;
+    grid-column-start: title;
+    margin-top: auto;
+  }
+
+  .nav-group-header > div:nth-child(3) {
+    vertical-align: bottom;
+    grid-column-start: button;
+    cursor: pointer;
+    color: var(--primary75);
+  }
+
+  .nav-group-header > div:nth-child(3):hover {
+    color: var(--primary75);
+  }
+
+  .navigator-title {
+    font-size: 14px;
+    color: var(--secondary100);
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0 20px 20px 20px;
+    line-height: 1rem !important;
+    letter-spacing: 1px;
+  }
+
+  .border-line {
+    border-bottom: 1px solid #d8d8d8;
+  }
+
+  .components-list-container {
+    padding: 20px 0px 0 0;
+  }
+</style>
diff --git a/packages/builder/src/pages/[application]/frontend/index.svelte b/packages/builder/src/pages/[application]/frontend/index.svelte
index 89b0a83720..e69de29bb2 100644
--- a/packages/builder/src/pages/[application]/frontend/index.svelte
+++ b/packages/builder/src/pages/[application]/frontend/index.svelte
@@ -1,5 +0,0 @@
-<script>
-  import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte"
-</script>
-
-<UserInterfaceRoot />

From 56ca7dd2b85c88fc1b293f5d10fe2a25aefec690 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 14:21:40 +0200
Subject: [PATCH 04/11] adds default navigation to main page

---
 .../builder/src/components/userInterface/PagesList.svelte   | 3 ++-
 .../builder/src/pages/[application]/frontend/_layout.svelte | 2 ++
 .../builder/src/pages/[application]/frontend/index.svelte   | 6 ++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 56b5fe7874..7b70e55183 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { params } from "@sveltech/routify"
   import { store } from "builderStore"
   import getIcon from "components/common/icon"
   import { CheckIcon } from "components/common/Icons"
@@ -19,7 +20,7 @@
     },
   ]
 
-  store.setCurrentPage("main")
+  store.setCurrentPage($params.page ? $params.page : "main")
 </script>
 
 <div class="root">
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 3cdc507521..d33b42c3fc 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -118,6 +118,8 @@
   okText="Delete Component"
   onOk={() => store.deleteComponent(componentToDelete)} />
 
+<slot />
+
 <style>
   button {
     cursor: pointer;
diff --git a/packages/builder/src/pages/[application]/frontend/index.svelte b/packages/builder/src/pages/[application]/frontend/index.svelte
index e69de29bb2..aa7968b989 100644
--- a/packages/builder/src/pages/[application]/frontend/index.svelte
+++ b/packages/builder/src/pages/[application]/frontend/index.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  $goto("../main")
+</script>
+
+<!-- routify:options index=false -->

From 8784cab51744bda65f0fc31fc6a90f655d8ca545 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 14:28:23 +0200
Subject: [PATCH 05/11] corrects page switching behaviour in page selection
 component

---
 .../src/components/userInterface/PagesList.svelte   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 7b70e55183..33b93719a0 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { params } from "@sveltech/routify"
+  import { params, goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import getIcon from "components/common/icon"
   import { CheckIcon } from "components/common/Icons"
@@ -21,6 +21,11 @@
   ]
 
   store.setCurrentPage($params.page ? $params.page : "main")
+
+  const changePage = id => {
+    store.setCurrentPage(id)
+    $goto(`./${id}`)
+  }
 </script>
 
 <div class="root">
@@ -28,14 +33,14 @@
     {#each pages as { title, id }}
       <li>
         <span class="icon">
-          {#if id === $store.currentPageName}
+          {#if id === $params.page}
             <CheckIcon />
           {/if}
         </span>
 
         <button
-          class:active={id === $store.currentPageName}
-          on:click={() => store.setCurrentPage(id)}>
+          class:active={id === $params.page}
+          on:click={() => changePage(id)}>
           {title}
         </button>
       </li>

From 95660af4998a6e05b517f94ab1229f03dc03b27e Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 15:28:31 +0200
Subject: [PATCH 06/11] add setup to go to page-layout screen

---
 .../userInterface/ComponentsHierarchy.svelte  | 34 ++++++-----
 .../userInterface/PageLayout.svelte           | 56 +++++++++----------
 .../frontend/[page]/[screen]/_fallback.svelte |  9 ---
 .../frontend/[page]/_layout.svelte            |  7 ---
 4 files changed, 47 insertions(+), 59 deletions(-)
 delete mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 2df4f8feef..cdacd5b38f 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { params, goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
 
   import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
@@ -15,15 +16,12 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(
-      name,
-      [
-        trimCharsStart("./"),
-        trimCharsStart("~/"),
-        trimCharsStart("../"),
-        trimChars(" "),
-      ]
-    )
+    pipe(name, [
+      trimCharsStart("./"),
+      trimCharsStart("~/"),
+      trimCharsStart("../"),
+      trimChars(" "),
+    ])
 
   const lastPartOfName = c => {
     if (!c) return ""
@@ -35,10 +33,10 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _screens = pipe(
-    screens,
-    [map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
-  )
+  $: _screens = pipe(screens, [
+    map(c => ({ component: c, title: lastPartOfName(c) })),
+    sortBy("title"),
+  ])
 
   const isScreenSelected = component =>
     component.component &&
@@ -49,6 +47,14 @@
     componentToDelete = component
     confirmDeleteDialog.show()
   }
+
+  const changeScreen = screen => {
+    console.log("Screen: ", screen)
+    store.setCurrentScreen(screen.title)
+    $goto(`./:page/${screen.title}`)
+  }
+
+  $: console.log("Params: ", $params)
 </script>
 
 <div class="root">
@@ -57,7 +63,7 @@
     <div
       class="budibase__nav-item component"
       class:selected={$store.currentComponentInfo._id === screen.component.props._id}
-      on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}>
+      on:click|stopPropagation={() => changeScreen(screen)}>
 
       <span
         class="icon"
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 56d8cf8a2e..948f2c20e0 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   // import { tick } from "svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
 
@@ -16,15 +17,12 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(
-      name,
-      [
-        trimCharsStart("./"),
-        trimCharsStart("~/"),
-        trimCharsStart("../"),
-        trimChars(" "),
-      ]
-    )
+    pipe(name, [
+      trimCharsStart("./"),
+      trimCharsStart("~/"),
+      trimCharsStart("../"),
+      trimChars(" "),
+    ])
 
   const lastPartOfName = c =>
     c && last(c.name ? c.name.split("/") : c._component.split("/"))
@@ -33,10 +31,7 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _layout = pipe(
-    layout,
-    [c => ({ component: c, title: lastPartOfName(c) })]
-  )
+  $: _layout = pipe(layout, [c => ({ component: c, title: lastPartOfName(c) })])
 
   const isScreenSelected = component =>
     component.component &&
@@ -48,6 +43,11 @@
     // await tick()
     confirmDeleteDialog.show()
   }
+
+  const setCurrentScreenToLayout = () => {
+    store.setScreenType("page")
+    $goto("./:page/page-layout")
+  }
 </script>
 
 <div class="pagelayoutSection">
@@ -55,7 +55,7 @@
   <div
     class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
-    on:click|stopPropagation={() => store.setScreenType('page')}>
+    on:click|stopPropagation={setCurrentScreenToLayout}>
     <span
       class="icon"
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
@@ -89,23 +89,21 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
-.components-nav-page {
-  font-size: 13px;
-  color: #000333;
-  text-transform: uppercase;
-  margin-bottom: 10px;
-  padding-left: 20px;
-  font-weight: 600;
-  opacity: 0.4;
-  letter-spacing: 1px;
-}
+  .components-nav-page {
+    font-size: 13px;
+    color: #000333;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    padding-left: 20px;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
+  }
 
-
-.pagelayoutSection {
-  margin: 20px 0px 20px 0px;
-}
+  .pagelayoutSection {
+    margin: 20px 0px 20px 0px;
+  }
   .root {
-
   }
   .title {
     margin-left: 10px;
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
index 29240e41a0..e69de29bb2 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
@@ -1,9 +0,0 @@
-<script>
-  import { leftover } from "@sveltech/routify"
-
-  const structure = $leftover.split("/")
-
-  console.log(structure)
-</script>
-
-CREEN FALLBACK THINGIE!
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
deleted file mode 100644
index bfcfa9be45..0000000000
--- a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { params } from "@sveltech/routify"
-
-  console.log($params)
-</script>
-
-<slot />

From 02b9747ffd3d2864f45a7c170956a66f1c47d372 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 29 Apr 2020 13:07:21 +0200
Subject: [PATCH 07/11] adds functionality to navigate to screens and layouts

---
 .../userInterface/ComponentsHierarchy.svelte       |  2 --
 .../frontend/[page]/[screen]/_layout.svelte        | 14 ++++++++++++++
 .../[application]/frontend/[page]/_layout.svelte   |  8 ++++++++
 .../[application]/frontend/[page]/index.svelte     |  1 -
 .../pages/[application]/frontend/_layout.svelte    |  3 ---
 5 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index cdacd5b38f..05a3163911 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -53,8 +53,6 @@
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
   }
-
-  $: console.log("Params: ", $params)
 </script>
 
 <div class="root">
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
new file mode 100644
index 0000000000..5281705434
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { onMount } from "svelte"
+  import { params } from "@sveltech/routify"
+  import { store } from "builderStore"
+
+  if ($params.screen !== "page-layout") {
+    store.setCurrentScreen($params.screen)
+  } else {
+    store.setScreenType("page")
+  }
+</script>
+
+<slot />
+store.setScreenType("page")
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
new file mode 100644
index 0000000000..d379bba574
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { params } from "@sveltech/routify"
+  import { store } from "builderStore"
+
+  store.setCurrentPage($params.page)
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
index 2a02d41ce2..e69de29bb2 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
@@ -1 +0,0 @@
-TEST
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index d33b42c3fc..24a9821cc2 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -50,9 +50,6 @@
   }
 
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
-
-  $: console.log("Pages: ", $store.pages[$store.currentPageName])
-  $: console.log("Screens: ", $store.screens)
 </script>
 
 <div class="root">

From 09248d4d220daa5a65273b3dab3a1ccd213dd034 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 1 May 2020 16:20:25 +0200
Subject: [PATCH 08/11] adds functionality to navigate to specific component
 via URL

---
 .../frontend/[page]/[screen]/_layout.svelte   | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
index 5281705434..0110148f54 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -1,14 +1,51 @@
 <script>
   import { onMount } from "svelte"
-  import { params } from "@sveltech/routify"
+  import { params, leftover } from "@sveltech/routify"
   import { store } from "builderStore"
 
+  // Get any leftover params not caught by Routifys params store.
+  const componentIds = $leftover.split("/").filter(id => id !== "")
+
+  // It's a screen, set it to that screen
   if ($params.screen !== "page-layout") {
     store.setCurrentScreen($params.screen)
+
+    // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
+    if ($leftover) {
+      // Get the correct screen children.
+      const screenChildren = $store.pages[$params.page]._screens.find(
+        screen => screen.name === $params.screen
+      ).props._children
+      findComponent(componentIds, screenChildren)
+    }
   } else {
+    // It's a page, so set the screentype to page.
     store.setScreenType("page")
+
+    // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
+    if ($leftover) {
+      findComponent(componentIds, $store.pages[$params.page].props._children)
+    }
+  }
+
+  // Find Component with ID and continue
+  function findComponent(ids, children) {
+    // Setup stuff
+    let componentToSelect
+    let currentChildren = children
+
+    // Loop through each ID
+    ids.forEach(id => {
+      // Find ID and select it
+      componentToSelect = currentChildren.find(child => child._id === id)
+
+      // Update childrens array to selected components children
+      currentChildren = componentToSelect._children
+    })
+
+    // Select Component!
+    store.selectComponent(componentToSelect)
   }
 </script>
 
 <slot />
-store.setScreenType("page")

From 59624741dea01c37ee19954b3f35feba432b35a1 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 1 May 2020 17:39:50 +0200
Subject: [PATCH 09/11] move onSelect method ComponentsHierarchyChildren

---
 .../components/userInterface/ComponentsHierarchy.svelte   | 2 --
 .../userInterface/ComponentsHierarchyChildren.svelte      | 8 +++++++-
 .../src/components/userInterface/PageLayout.svelte        | 3 ---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 05a3163911..72e91d0600 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -49,7 +49,6 @@
   }
 
   const changeScreen = screen => {
-    console.log("Screen: ", screen)
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
   }
@@ -82,7 +81,6 @@
       <ComponentsHierarchyChildren
         components={screen.component.props._children}
         currentComponent={$store.currentComponentInfo}
-        onSelect={store.selectComponent}
         onDeleteComponent={confirmDeleteComponent}
         onMoveUpComponent={store.moveUpComponent}
         onMoveDownComponent={store.moveDownComponent}
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index f1d72da457..51301a32c1 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "../common/core"
   import {
@@ -16,6 +17,7 @@
   export let onMoveUpComponent
   export let onMoveDownComponent
   export let onCopyComponent
+  export let ids = []
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
@@ -28,11 +30,15 @@
       return onMoveDownComponent(c)
     }
   }
+
+  const selectComponent = (ids, component) => {
+    store.selectComponent(component)
+  }
 </script>
 
 <ul>
   {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => onSelect(component)}>
+    <li on:click|stopPropagation={() => selectComponent(ids, component)}>
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 948f2c20e0..fb56e142bd 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -73,7 +73,6 @@
     <ComponentsHierarchyChildren
       components={_layout.component.props._children}
       currentComponent={$store.currentComponentInfo}
-      onSelect={store.selectComponent}
       onDeleteComponent={confirmDeleteComponent}
       onMoveUpComponent={store.moveUpComponent}
       onMoveDownComponent={store.moveDownComponent}
@@ -103,8 +102,6 @@
   .pagelayoutSection {
     margin: 20px 0px 20px 0px;
   }
-  .root {
-  }
   .title {
     margin-left: 10px;
     font-size: 13px;

From 1be5a248cb44cc9ec04f462c0ed43daa3d76df37 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 4 May 2020 10:26:38 +0200
Subject: [PATCH 10/11] adds method on store to get path of IDs to component

---
 .../builder/src/builderStore/store/index.js   | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 8c1538e098..81b1109a07 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -2,7 +2,7 @@
 import { filter, cloneDeep, last, concat, isEmpty, values } from "lodash/fp"
 import { pipe, getNode, constructHierarchy } from "components/common/core"
 import * as backendStoreActions from "./backend"
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 import { defaultPagesObject } from "components/userInterface/pagesParsing/defaultPagesObject"
 import api from "../api"
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
@@ -92,6 +92,7 @@ export const getStore = () => {
   store.moveUpComponent = moveUpComponent(store)
   store.moveDownComponent = moveDownComponent(store)
   store.copyComponent = copyComponent(store)
+  store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
   return store
@@ -667,6 +668,38 @@ const copyComponent = store => component => {
   })
 }
 
+const getPathToComponent = store => component => {
+
+  // Gets all the components to needed to construct a path.
+  const tempStore = get(store)
+  let pathComponents = []
+  let parent = component;
+  let root = false
+  while (!root) {
+    parent = getParent(tempStore.currentPreviewItem.props, parent)
+    if (!parent) {
+      root = true
+    } else {
+      pathComponents.push(parent)
+    }
+  }
+
+  // Remove root entry since it's the screen or page layout.
+  // Reverse array since we need the correct order of the IDs
+  const reversedComponents = pathComponents.reverse().slice(1)
+
+  // Add component
+  const allComponents = [...reversedComponents, component]
+
+  // Map IDs
+  const IdList = allComponents.map(c => c._id)
+
+  // Construct ID Path:
+  const path = IdList.join('/')
+
+  return path
+}
+
 const getParent = (rootProps, child) => {
   let parent
   walkProps(rootProps, (p, breakWalk) => {

From 99015ca67607a0578a2c3855170d08e67bfc7fcf Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 4 May 2020 10:32:25 +0200
Subject: [PATCH 11/11] adds working routing for clicking on components

---
 .../ComponentsHierarchyChildren.svelte              | 13 ++++++++++---
 .../src/components/userInterface/PageLayout.svelte  |  1 +
 .../src/components/userInterface/PagesList.svelte   |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 51301a32c1..18f9ec7ea9 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "../common/core"
@@ -17,7 +18,6 @@
   export let onMoveUpComponent
   export let onMoveDownComponent
   export let onCopyComponent
-  export let ids = []
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
@@ -31,14 +31,21 @@
     }
   }
 
-  const selectComponent = (ids, component) => {
+  const selectComponent = component => {
+    // Set current component
     store.selectComponent(component)
+
+    // Get ID path
+    const path = store.getPathToComponent(component)
+
+    // Go to correct URL
+    $goto(`./:page/:screen/${path}`)
   }
 </script>
 
 <ul>
   {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => selectComponent(ids, component)}>
+    <li on:click|stopPropagation={() => selectComponent(component)}>
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index fb56e142bd..4f55fcd992 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -71,6 +71,7 @@
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
     <ComponentsHierarchyChildren
+      thisComponent={_layout.component.props}
       components={_layout.component.props._children}
       currentComponent={$store.currentComponentInfo}
       onDeleteComponent={confirmDeleteComponent}
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 33b93719a0..562c813865 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -24,7 +24,7 @@
 
   const changePage = id => {
     store.setCurrentPage(id)
-    $goto(`./${id}`)
+    $goto(`./${id}/page-layout`)
   }
 </script>