From 42b3893c21c828d2392685cc880a8cecab4a9592 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 20 Feb 2020 17:11:41 +0000
Subject: [PATCH] merge conflicts from peter/tweaks

---
 packages/builder/src/PackageRoot.svelte       |   4 +-
 packages/builder/src/builderStore/store.js    |  22 ++-
 packages/builder/src/common/Icons/Add.svelte  |   8 +
 .../builder/src/common/Icons/ArrowDown.svelte |   6 +-
 .../builder/src/common/Icons/Check.svelte     |  10 ++
 packages/builder/src/common/Icons/Grid.svelte |  12 ++
 .../builder/src/common/Icons/Shape.svelte     |  12 ++
 packages/builder/src/common/Icons/index.js    |   4 +
 .../ComponentSelectionList.svelte             |   9 +-
 .../userInterface/ComponentsHierarchy.svelte  |  60 ++++---
 .../ComponentsHierarchyChildren.svelte        |  44 +++---
 .../src/userInterface/MasterLayout.svelte     | 146 ++++++++++++++++++
 .../src/userInterface/PagesList.svelte        |  80 +++++-----
 .../userInterface/UserInterfaceRoot.svelte    | 103 +++++-------
 14 files changed, 369 insertions(+), 151 deletions(-)
 create mode 100644 packages/builder/src/common/Icons/Add.svelte
 create mode 100644 packages/builder/src/common/Icons/Check.svelte
 create mode 100644 packages/builder/src/common/Icons/Grid.svelte
 create mode 100644 packages/builder/src/common/Icons/Shape.svelte
 create mode 100644 packages/builder/src/userInterface/MasterLayout.svelte

diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte
index c79193f20d..fa70d0718c 100644
--- a/packages/builder/src/PackageRoot.svelte
+++ b/packages/builder/src/PackageRoot.svelte
@@ -55,7 +55,7 @@
     flex: 0 0 auto;
     height: 48px;
     background: white;
-    padding: 0px 15px;
+    padding: 0px 15px 0 1.8rem;
     width: 100%;
     display: flex;
     align-items: center;
@@ -104,7 +104,7 @@
     cursor: pointer;
     outline: none;
     height: 40px;
-    padding: 8px 10px;
+    padding: 8px 10px 8px 0;
   }
 
   .home-logo:hover {
diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index 766dac3f06..e6b5bf03d7 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -721,9 +721,27 @@ const getContainerComponent = components =>
  */
 const addChildComponent = store => (componentToAdd, presetName) => {
   store.update(state => {
+    function findSlot(component_array) {
+      for (let i = 0; i < component_array.length; i += 1) {
+        if (component_array[i]._component === "##builtin/screenslot")
+          return true
+        if (component_array[i]._children) findSlot(component_array[i])
+      }
+
+      return false
+    }
+
+    if (
+      componentToAdd.startsWith("##") &&
+      findSlot(state.pages[state.currentPageName].props._children)
+    ) {
+      return state
+    }
+
     const component = componentToAdd.startsWith("##")
       ? getBuiltin(componentToAdd)
       : state.components.find(({ name }) => name === componentToAdd)
+
     const presetProps = presetName ? component.presets[presetName] : {}
     const newComponent = createProps(component, presetProps)
 
@@ -731,7 +749,9 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       newComponent.props
     )
 
-    _savePage(state)
+    state.currentFrontEndType === "page"
+      ? _savePage(state)
+      : _saveScreenApi(state.currentPreviewItem, state)
 
     return state
   })
diff --git a/packages/builder/src/common/Icons/Add.svelte b/packages/builder/src/common/Icons/Add.svelte
new file mode 100644
index 0000000000..89b3e21b4f
--- /dev/null
+++ b/packages/builder/src/common/Icons/Add.svelte
@@ -0,0 +1,8 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
+</svg>
diff --git a/packages/builder/src/common/Icons/ArrowDown.svelte b/packages/builder/src/common/Icons/ArrowDown.svelte
index 5a0f2231ea..bc1bfd2363 100644
--- a/packages/builder/src/common/Icons/ArrowDown.svelte
+++ b/packages/builder/src/common/Icons/ArrowDown.svelte
@@ -1,10 +1,10 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  width="24"
-  height="24">
+  width="100%"
+  height="100%">
   <path fill="none" d="M0 0h24v24H0z" />
   <path
     fill="currentColor"
-    d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+    d="M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z" />
 </svg>
diff --git a/packages/builder/src/common/Icons/Check.svelte b/packages/builder/src/common/Icons/Check.svelte
new file mode 100644
index 0000000000..8293996bc9
--- /dev/null
+++ b/packages/builder/src/common/Icons/Check.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
+</svg>
diff --git a/packages/builder/src/common/Icons/Grid.svelte b/packages/builder/src/common/Icons/Grid.svelte
new file mode 100644
index 0000000000..175ba0aa11
--- /dev/null
+++ b/packages/builder/src/common/Icons/Grid.svelte
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M14 10v4h-4v-4h4zm2 0h5v4h-5v-4zm-2 11h-4v-5h4v5zm2 0v-5h5v4a1 1 0 0 1-1
+    1h-4zM14 3v5h-4V3h4zm2 0h4a1 1 0 0 1 1 1v4h-5V3zm-8 7v4H3v-4h5zm0 11H4a1 1 0
+    0 1-1-1v-4h5v5zM8 3v5H3V4a1 1 0 0 1 1-1h4z" />
+</svg>
diff --git a/packages/builder/src/common/Icons/Shape.svelte b/packages/builder/src/common/Icons/Shape.svelte
new file mode 100644
index 0000000000..e3c4d08e2e
--- /dev/null
+++ b/packages/builder/src/common/Icons/Shape.svelte
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M5 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm14 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0
+    14a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM5 22a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM9
+    4h6v2H9V4zm0 14h6v2H9v-2zM4 9h2v6H4V9zm14 0h2v6h-2V9z" />
+</svg>
diff --git a/packages/builder/src/common/Icons/index.js b/packages/builder/src/common/Icons/index.js
index 353985a59e..465c4934f0 100644
--- a/packages/builder/src/common/Icons/index.js
+++ b/packages/builder/src/common/Icons/index.js
@@ -11,3 +11,7 @@ export { default as XCircleIcon } from "./XCircle.svelte"
 export { default as ChevronUpIcon } from "./ChevronUp.svelte"
 export { default as ChevronDownIcon } from "./ChevronDown.svelte"
 export { default as CopyIcon } from "./Copy.svelte"
+export { default as CheckIcon } from "./Check.svelte"
+export { default as GridIcon } from "./Grid.svelte"
+export { default as ShapeIcon } from "./Shape.svelte"
+export { default as AddIcon } from "./Add.svelte"
diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte
index 7ceb9d7f11..19ce097775 100644
--- a/packages/builder/src/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte
@@ -60,6 +60,12 @@
     store.addTemplatedComponent(instance.props)
   }
 
+  function generate_components_list(components) {
+    return $store.currentFrontEndType === "page"
+      ? $store.builtins.concat(components)
+      : components
+  }
+
   $: {
     const newComponentLibraries = []
 
@@ -111,6 +117,7 @@
 
     {#if componentLibrary}
       {#each $store.builtins.concat(componentLibrary.components) as component}
+      {#each generate_components_list(componentLibrary.components) as component}
         <div class="component-container">
           <div
             class="component"
@@ -159,7 +166,7 @@
 
 </div>
 
-<ConfirmDialog 
+<ConfirmDialog
   bind:this={selectTemplateDialog}
   title="Choose Template"
   onCancel={() => selectedComponent = null}
diff --git a/packages/builder/src/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/userInterface/ComponentsHierarchy.svelte
index 4df058e455..0f2a19068d 100644
--- a/packages/builder/src/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/userInterface/ComponentsHierarchy.svelte
@@ -5,7 +5,7 @@
   import ConfirmDialog from "../common/ConfirmDialog.svelte"
   import { pipe } from "../common/core"
   import { store } from "../builderStore"
-  import { ArrowDownIcon } from "../common/Icons/"
+  import { ArrowDownIcon, ShapeIcon } from "../common/Icons/"
 
   export let screens = []
 
@@ -26,8 +26,7 @@
     )
 
   const lastPartOfName = c =>
-    c && 
-    last(c.name ? c.name.split("/") : c._component.split("/"))
+    c && last(c.name ? c.name.split("/") : c._component.split("/"))
 
   const isComponentSelected = (current, comp) => current === comp
 
@@ -47,7 +46,6 @@
     componentToDelete = component
     confirmDeleteDialog.show()
   }
-
 </script>
 
 <div class="root">
@@ -55,17 +53,21 @@
   {#each _screens as screen}
     <div
       class="hierarchy-item component"
-      class:selected={$store.currentPreviewItem.name === screen.title}
+      class:selected={$store.currentComponentInfo._id === screen.component.props._id}
       on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}>
 
       <span
         class="icon"
-        style="transform: rotate({$store.currentPreviewItem.name === screen.title ? 0 : -90}deg);">
+        class:rotate={$store.currentPreviewItem.name !== screen.title}>
         {#if screen.component.props._children.length}
           <ArrowDownIcon />
         {/if}
       </span>
 
+      <span class="icon">
+        <ShapeIcon />
+      </span>
+
       <span class="title">{screen.title}</span>
     </div>
 
@@ -73,41 +75,42 @@
       <ComponentsHierarchyChildren
         components={screen.component.props._children}
         currentComponent={$store.currentComponentInfo}
-        onSelect={store.selectComponent} 
+        onSelect={store.selectComponent}
         onDeleteComponent={confirmDeleteComponent}
         onMoveUpComponent={store.moveUpComponent}
         onMoveDownComponent={store.moveDownComponent}
-        onCopyComponent={store.copyComponent}/>
+        onCopyComponent={store.copyComponent} />
     {/if}
   {/each}
 
 </div>
 
-<ConfirmDialog 
-  bind:this={confirmDeleteDialog} 
-  title="Confirm Delete" 
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete._component)}' component`}
+<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)}/>
+  onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
   .root {
-    font-weight: 500;
-    font-size: 0.9rem;
-    color: #828fa5;
+    font-weight: 400;
+    font-size: 0.8rem;
+    color: #333;
   }
 
   .hierarchy-item {
     cursor: pointer;
-    padding: 11px 7px;
+    padding: 0 7px 0 3px;
+    height: 35px;
     margin: 5px 0;
-    border-radius: 5px;
+    border-radius: 0 5px 5px 0;
     display: flex;
     align-items: center;
+    font-weight: 500;
   }
 
   .hierarchy-item:hover {
-    /* color: var(--secondary); */
     background: #fafafa;
   }
 
@@ -118,12 +121,27 @@
 
   .title {
     margin-left: 10px;
+    margin-top: 2px;
   }
 
   .icon {
     display: inline-block;
     transition: 0.2s;
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    margin-top: 2px;
+    color: #333;
+  }
+
+  .icon:nth-of-type(2) {
+    width: 14px;
+    margin: 0 0 0 5px;
+  }
+
+  :global(svg) {
+    transition: 0.2s;
+  }
+
+  .rotate :global(svg) {
+    transform: rotate(-90deg);
   }
 </style>
diff --git a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
index 0246806c34..819ab6d3c6 100644
--- a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
@@ -1,7 +1,12 @@
 <script>
   import { last } from "lodash/fp"
   import { pipe } from "../common/core"
-  import { XCircleIcon, ChevronUpIcon, ChevronDownIcon, CopyIcon } from "../common/Icons"
+  import {
+    XCircleIcon,
+    ChevronUpIcon,
+    ChevronDownIcon,
+    CopyIcon,
+  } from "../common/Icons"
 
   export let components = []
   export let currentComponent
@@ -12,9 +17,8 @@
   export let onMoveDownComponent
   export let onCopyComponent
 
-  
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
-  const get_name = s => !s ? "" : last(s.split("/"))
+  const get_name = s => (!s ? "" : last(s.split("/")))
 
   const get_capitalised_name = name =>
     pipe(
@@ -22,7 +26,7 @@
       [get_name, capitalise]
     )
 
-  const moveDownComponent = component  => {
+  const moveDownComponent = component => {
     const c = component
     return () => {
       return onMoveDownComponent(c)
@@ -40,21 +44,21 @@
         <div>{get_capitalised_name(component._component)}</div>
         <div class="reorder-buttons">
           {#if index > 0}
-          <button on:click|stopPropagation={() => onMoveUpComponent(component)}>
-            <ChevronUpIcon />
-          </button>
+            <button
+              on:click|stopPropagation={() => onMoveUpComponent(component)}>
+              <ChevronUpIcon />
+            </button>
           {/if}
-          {#if index < (components.length - 1)}
-          <button on:click|stopPropagation={moveDownComponent(component)}>
-            <ChevronDownIcon />
-          </button>
+          {#if index < components.length - 1}
+            <button on:click|stopPropagation={moveDownComponent(component)}>
+              <ChevronDownIcon />
+            </button>
           {/if}
         </div>
         <button on:click|stopPropagation={() => onCopyComponent(component)}>
-            <CopyIcon />
+          <CopyIcon />
         </button>
-        <button 
-          on:click|stopPropagation={() => onDeleteComponent(component)}>
+        <button on:click|stopPropagation={() => onDeleteComponent(component)}>
           <XCircleIcon />
         </button>
       </div>
@@ -81,18 +85,16 @@
     margin: 0;
   }
 
-  li {
-    background: #fafafa;
-  }
-
   .item {
     display: grid;
     grid-template-columns: 1fr auto auto auto;
     padding: 0px 5px 0px 15px;
     margin: auto 0px;
     border-radius: 3px;
-    height: 43px;
+    height: 35px;
     align-items: center;
+    font-size: 0.8rem;
+    font-weight: normal;
   }
 
   .item button {
@@ -109,7 +111,7 @@
   }
   .item:hover button {
     border-style: none;
-    background: rgba(0,0,0,0);
+    background: rgba(0, 0, 0, 0);
     display: block;
     cursor: pointer;
   }
@@ -121,6 +123,7 @@
   .selected {
     color: var(--button-text);
     background: var(--background-button) !important;
+    font-weight: 500;
   }
 
   .reorder-buttons {
@@ -134,5 +137,4 @@
     height: 17px;
     width: 30px;
   }
-
 </style>
diff --git a/packages/builder/src/userInterface/MasterLayout.svelte b/packages/builder/src/userInterface/MasterLayout.svelte
new file mode 100644
index 0000000000..b3f2b75ee3
--- /dev/null
+++ b/packages/builder/src/userInterface/MasterLayout.svelte
@@ -0,0 +1,146 @@
+<script>
+  // import { tick } from "svelte"
+  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
+
+  import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
+  import ConfirmDialog from "../common/ConfirmDialog.svelte"
+  import { pipe } from "../common/core"
+  import { store } from "../builderStore"
+  import { ArrowDownIcon, GridIcon } from "../common/Icons/"
+
+  export let layout
+
+  let confirmDeleteDialog
+  let componentToDelete = ""
+
+  const joinPath = join("/")
+
+  const normalizedName = name =>
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
+
+  const lastPartOfName = c =>
+    c && last(c.name ? c.name.split("/") : c._component.split("/"))
+
+  const isComponentSelected = (current, comp) => current === comp
+
+  const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
+
+  $: _layout = pipe(
+    layout,
+    [c => ({ component: c, title: lastPartOfName(c) })]
+  )
+
+  const isScreenSelected = component =>
+    component.component &&
+    $store.currentPreviewItem &&
+    component.component.name === $store.currentPreviewItem.name
+
+  const confirmDeleteComponent = async component => {
+    console.log(component)
+    componentToDelete = component
+    // await tick()
+    confirmDeleteDialog.show()
+  }
+</script>
+
+<div class="root">
+  <div
+    class="hierarchy-item component"
+    class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
+    on:click|stopPropagation={() => store.setScreenType('page')}>
+
+    <span
+      class="icon"
+      class:rotate={$store.currentPreviewItem.name !== _layout.title}>
+      {#if _layout.component.props._children.length}
+        <ArrowDownIcon />
+      {/if}
+    </span>
+
+    <span class="icon">
+      <GridIcon />
+    </span>
+
+    <span class="title">Master Layout</span>
+  </div>
+
+  {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
+    <ComponentsHierarchyChildren
+      components={_layout.component.props._children}
+      currentComponent={$store.currentComponentInfo}
+      onSelect={store.selectComponent}
+      onDeleteComponent={confirmDeleteComponent}
+      onMoveUpComponent={store.moveUpComponent}
+      onMoveDownComponent={store.moveDownComponent}
+      onCopyComponent={store.copyComponent} />
+  {/if}
+</div>
+
+<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>
+  .root {
+    font-weight: 400;
+    font-size: 0.8rem;
+    color: #333;
+  }
+
+  .hierarchy-item {
+    cursor: pointer;
+    padding: 0 7px 0 3px;
+    height: 35px;
+    margin: 5px 0;
+    border-radius: 0 5px 5px 0;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+  }
+
+  .hierarchy-item:hover {
+    background: #fafafa;
+  }
+
+  .selected {
+    color: var(--button-text);
+    background: var(--background-button) !important;
+  }
+
+  .title {
+    margin-left: 10px;
+    margin-top: 2px;
+  }
+
+  .icon {
+    display: inline-block;
+    transition: 0.2s;
+    width: 20px;
+    margin-top: 2px;
+    color: #333;
+  }
+
+  .icon:nth-of-type(2) {
+    width: 14px;
+    margin: 0 0 0 5px;
+  }
+
+  :global(svg) {
+    transition: 0.2s;
+  }
+
+  .rotate :global(svg) {
+    transform: rotate(-90deg);
+  }
+</style>
diff --git a/packages/builder/src/userInterface/PagesList.svelte b/packages/builder/src/userInterface/PagesList.svelte
index dd3c66eecf..64322e48af 100644
--- a/packages/builder/src/userInterface/PagesList.svelte
+++ b/packages/builder/src/userInterface/PagesList.svelte
@@ -1,6 +1,7 @@
 <script>
   import { store } from "../builderStore"
   import getIcon from "../common/icon"
+  import { CheckIcon } from "../common/Icons"
 
   const getPage = (s, name) => {
     const props = s.pages[name]
@@ -22,19 +23,23 @@
 </script>
 
 <div class="root">
-  <select
-    id="page"
-    name="select"
-    on:change={({ target }) => store.setCurrentPage(target.value)}>
-
+  <ul>
     {#each pages as { title, id }}
-      <option value={id}>Page: {title}</option>
-    {/each}
+      <li>
+        <span class="icon">
+          {#if id === $store.currentPageName}
+            <CheckIcon />
+          {/if}
+        </span>
 
-  </select>
-  <span class="arrow">
-    {@html getIcon('chevron-down', '24')}
-  </span>
+        <button
+          class:active={id === $store.currentPageName}
+          on:click={() => store.setCurrentPage(id)}>
+          {title}
+        </button>
+      </li>
+    {/each}
+  </ul>
 </div>
 
 <style>
@@ -44,37 +49,36 @@
     color: var(--secondary50);
     font-weight: bold;
     position: relative;
+    padding-left: 1.8rem;
   }
 
-  select {
-    display: block;
-    font-size: 16px;
-    font-family: sans-serif;
-    font-weight: 700;
-    color: #444;
-    line-height: 1.3;
-    padding: 1em 2.6em 0.9em 1.4em;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
+  ul {
     margin: 0;
-    border: none;
-    border-radius: 0.5em;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: #fafafa;
+    padding: 0;
+    list-style: none;
   }
 
-  .arrow {
-    position: absolute;
-    right: 10px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    width: 30px;
-    height: 30px;
-    pointer-events: none;
-    color: var(--primary100);
+  li {
+    margin: 0.5rem 0;
+  }
+
+  button {
+    margin: 0 0 0 6px;
+    padding: 0;
+    border: none;
+    font-family: Roboto;
+    font-size: 0.8rem;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .active {
+    font-weight: 500;
+  }
+
+  .icon {
+    display: inline-block;
+    width: 14px;
+    color: #333;
   }
 </style>
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index 84b1e2728a..29064ca412 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -1,6 +1,7 @@
 <script>
   import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
+  import MasterLayout from "./MasterLayout.svelte"
   import PagesList from "./PagesList.svelte"
   import { store } from "../builderStore"
   import IconButton from "../common/IconButton.svelte"
@@ -12,6 +13,7 @@
   import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
   import ConfirmDialog from "../common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
+  import { AddIcon } from "../common/Icons"
 
   let newComponentPicker
   let confirmDeleteDialog
@@ -30,9 +32,8 @@
     componentToDelete = component
     confirmDeleteDialog.show()
   }
-  
-  const lastPartOfName = c => c ? last(c.split("/")) : ""
-  
+
+  const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
 <div class="root">
@@ -40,63 +41,32 @@
   <div class="ui-nav">
 
     <div class="pages-list-container">
-      <div class="nav-group-header">
-
+      <div class="nav-header">
         <span class="navigator-title">Navigator</span>
+        <span class="components-nav-header">Pages</span>
       </div>
+
       <div class="nav-items-container">
         <PagesList />
       </div>
     </div>
 
-    <div class="components-list-container">
-
-      <div class="nav-group-header">
-
-        <span
-          on:click={() => store.setScreenType('page')}
-          class="components-nav-header"
-          class:active={$store.currentFrontEndType === 'page'}>
-          Page
-        </span>
-      </div>
-      <div class="nav-items-container">
-        {#if $store.currentFrontEndType === 'page'}
-          <ComponentsHierarchyChildren
-            components={$store.currentPreviewItem.props._children}
-            currentComponent={$store.currentComponentInfo}
-            onDeleteComponent={confirmDeleteComponent}
-            onSelect={store.selectComponent}
-            onMoveUpComponent={store.moveUpComponent}
-            onMoveDownComponent={store.moveDownComponent}
-            onCopyComponent={store.copyComponent}
-            level={-2} />
-        {/if}
-
-      </div>
-    </div>
+    <div class="border-line" />
 
     <div class="components-list-container">
-
       <div class="nav-group-header">
-
-        <span
-          on:click={() => store.setScreenType('screen')}
-          class="components-nav-header"
-          class:active={$store.currentFrontEndType === 'screen'}>
+        <span class="components-nav-header" style="margin-top: 0;">
           Screens
         </span>
-
-        {#if $store.currentFrontEndType === 'screen'}
-          <div>
-            <button on:click={newComponent}>+</button>
-          </div>
-        {/if}
+        <div>
+          <button on:click={newComponent}>
+            <AddIcon />
+          </button>
+        </div>
       </div>
       <div class="nav-items-container">
-        {#if $store.currentFrontEndType === 'screen'}
-          <ComponentsHierarchy screens={$store.screens} />
-        {/if}
+        <MasterLayout layout={$store.pages[$store.currentPageName]} />
+        <ComponentsHierarchy screens={$store.screens} />
       </div>
     </div>
 
@@ -117,12 +87,12 @@
 <NewComponent bind:this={newComponentPicker} />
 <SettingsView bind:this={settingsView} />
 
-<ConfirmDialog 
-  bind:this={confirmDeleteDialog} 
-  title="Confirm Delete" 
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete._component)}' component`}
+<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)}/>
+  onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
   button {
@@ -130,19 +100,12 @@
     outline: none;
     border: none;
     border-radius: 5px;
-    background: var(--background-button);
-
-    width: 1.8rem;
-    height: 1.8rem;
+    width: 20px;
     padding-bottom: 10px;
-
     display: flex;
     justify-content: center;
     align-items: center;
-
-    font-size: 1.2rem;
-    font-weight: 700;
-    color: var(--button-text);
+    padding: 0;
   }
 
   .root {
@@ -157,7 +120,7 @@
     grid-column: 1;
     background-color: var(--secondary5);
     height: 100%;
-    padding: 0 1.5rem 0rem 1.5rem;
+    padding: 0 1.5rem 0rem 0;
   }
 
   .preview-pane {
@@ -179,6 +142,8 @@
     font-size: 0.75rem;
     color: #999;
     text-transform: uppercase;
+    margin-top: 1rem;
+    font-weight: 500;
   }
 
   .nav-group-header {
@@ -186,13 +151,20 @@
     padding-left: 1rem;
   }
 
+  .nav-header {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1.5rem;
+    padding: 0 1.8rem;
+  }
+
   .nav-items-container {
     padding: 1rem 0rem 0rem 0rem;
   }
 
   .nav-group-header {
     display: flex;
-    padding: 2rem 0 0 0;
+    padding: 1.5rem 0 0 1.8rem;
     font-size: 0.9rem;
     font-weight: bold;
     justify-content: space-between;
@@ -228,9 +200,12 @@
     text-transform: uppercase;
     font-weight: 400;
     color: #999;
+    font-size: 0.9rem;
   }
 
-  .active {
-    color: #333;
+  .border-line {
+    border-bottom: 1px solid #ddd;
+    margin-top: 1.5rem;
+    width: calc(100% + 1.5rem);
   }
 </style>