fix preview save

packages/builder/src/builderStore/store/frontend.js

@@ -198,10 +198,11 @@ export const getFrontendStore = () => {
     preview: {
       saveSelected: async () => {
         const state = get(store)
+        const selectedAsset = get(currentAsset)
         if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
-          await store.actions.screens.save(currentAsset)
+          await store.actions.screens.save(selectedAsset)
         }
-        await store.actions.layouts.save(currentAsset)
+        await store.actions.layouts.save(selectedAsset)
       },
     },
     layouts: {
@@ -236,9 +237,10 @@ export const getFrontendStore = () => {
         await Promise.all(cssPromises)
       },
       save: async layout => {
-        const response = await api.post(`/api/layouts`, {
-          ...layout,
-        })
+        const layoutToSave = cloneDeep(layout)
+        delete layoutToSave._css
+
+        const response = await api.post(`/api/layouts`, layoutToSave)
 
         const json = await response.json()
 

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
   import { store, currentAsset } from "builderStore"
   import { FrontendTypes } from "constants"
   import api from "builderStore/api"
@@ -12,17 +13,22 @@
   const tabs = [
     {
       title: "Screens",
-      key: "SCREENS",
+      key: "screens",
     },
     {
       title: "Layouts",
-      key: "LAYOUTS",
+      key: "layouts",
     },
   ]
 
   let modal
   let routes = {}
-  let tab = "SCREENS"
+  let tab = "screens"
+
+  function reroute({ detail }) {
+    if (!detail) return
+    $goto(`./${detail.heading.key}`)
+  }
 
   onMount(() => {
     store.actions.routing.fetch()
@@ -30,8 +36,8 @@
 </script>
 
 <div class="title">
-  <Switcher headings={tabs} bind:value={tab}>
-    {#if tab === 'SCREENS'}
+  <Switcher headings={tabs} bind:value={tab} on:change={reroute}>
+    {#if tab === 'screens'}
       <i
         on:click={modal.show}
         data-cy="new-screen"
@@ -46,7 +52,7 @@
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
-    {:else if tab === 'LAYOUTS'}
+    {:else if tab === 'layouts'}
       <Layout />
     {/if}
 

packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte

@@ -0,0 +1,4 @@
+<script>
+  // import { goto } from "@sveltech/routify"
+  // $goto("../layout/main")
+</script>

packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte

@@ -8,12 +8,6 @@
   const currentScreenId = decodeURI($params.screen)
   const validScreen = $allScreens.some(screen => screen._id === currentScreenId)
 
-  console.log({ 
-    validScreen, 
-    currentScreenId,
-    componentIds
-  })
-
   if (!validScreen) {
     // Go to main layout if URL set to invalid screen
     console.error("Invalid screen", $params.screen)
@@ -28,7 +22,7 @@
     if ($leftover) {
       console.log("leftover", $params.screen)
       // Get the correct screen children.
-      const screenChildren = allScreens.find(
+      const screenChildren = $allScreens.find(
         screen =>
           screen._id === $params.screen ||
           screen._id === decodeURIComponent($params.screen)