add setup to go to page-layout screen

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(
+    pipe(name, [
-      name,
+      trimCharsStart("./"),
-      [
+      trimCharsStart("~/"),
-        trimCharsStart("./"),
+      trimCharsStart("../"),
-        trimCharsStart("~/"),
+      trimChars(" "),
-        trimCharsStart("../"),
+    ])
-        trimChars(" "),
-      ]
-    )
 
   const lastPartOfName = c => {
     if (!c) return ""
@@ -35,10 +33,10 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _screens = pipe(
+  $: _screens = pipe(screens, [
-    screens,
+    map(c => ({ component: c, title: lastPartOfName(c) })),
-    [map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
+    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"

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(
+    pipe(name, [
-      name,
+      trimCharsStart("./"),
-      [
+      trimCharsStart("~/"),
-        trimCharsStart("./"),
+      trimCharsStart("../"),
-        trimCharsStart("~/"),
+      trimChars(" "),
-        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 = pipe(layout, [c => ({ component: c, title: lastPartOfName(c) })])
-    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 {
+  .components-nav-page {
-  font-size: 13px;
+    font-size: 13px;
-  color: #000333;
+    color: #000333;
-  text-transform: uppercase;
+    text-transform: uppercase;
-  margin-bottom: 10px;
+    margin-bottom: 10px;
-  padding-left: 20px;
+    padding-left: 20px;
-  font-weight: 600;
+    font-weight: 600;
-  opacity: 0.4;
+    opacity: 0.4;
-  letter-spacing: 1px;
+    letter-spacing: 1px;
-}
+  }
-
-
-.pagelayoutSection {
-  margin: 20px 0px 20px 0px;
-}
-  .root {
 
+  .pagelayoutSection {
+    margin: 20px 0px 20px 0px;
+  }
+  .root {
   }
   .title {
     margin-left: 10px;

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!

packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte

@@ -1,7 +0,0 @@
-<script>
-  import { params } from "@sveltech/routify"
-
-  console.log($params)
-</script>
-
-<slot />