Stop preview remounting

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -1,7 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import { store, selectedScreen, currentAsset } from "builderStore"
+  import { store, selectedComponent, selectedScreen, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -65,7 +65,9 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(`./new`)
+  $: isAddingComponent = $isActive(
+    `./components/${$selectedComponent?._id}/new`
+  )
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -208,9 +210,9 @@
 
   const toggleAddComponent = () => {
     if (isAddingComponent) {
-      $goto(`../`)
+      $goto(`./components/${$selectedComponent?._id}`)
     } else {
-      $goto(`./new`)
+      $goto(`./components/${$selectedComponent?._id}/new`)
     }
   }
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte

@@ -1,4 +1,5 @@
 <script>
+  import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store } from "builderStore"
@@ -20,4 +21,28 @@
   onDestroy(stopSyncing)
 </script>
 
-<slot />
+<div class="design">
+  <div class="content">
+    <AppPanel />
+    <slot />
+  </div>
+</div>
+
+<style>
+  .design {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    height: 0;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte

@@ -1,6 +1,5 @@
 <script>
   import LeftPanel from "./_components/LeftPanel/index.svelte"
-  import AppPanel from "./_components/AppPanel.svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import * as routify from "@roxi/routify"
@@ -48,38 +47,20 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="design">
+<div class="left">
-  <div class="content">
+  <LeftPanel />
-    {#if $selectedScreen}
-      <LeftPanel />
-      <AppPanel />
-      {#if routeComponentId === "screen"}
-        <ScreenSettingsPanel />
-      {:else if routeComponentId === "navigation"}
-        <NavigationPanel />
-      {:else}
-        <ComponentSettingsPanel />
-      {/if}
-      <slot />
-    {/if}
-  </div>
 </div>
+{#if routeComponentId === "screen"}
+  <ScreenSettingsPanel />
+{:else if routeComponentId === "navigation"}
+  <NavigationPanel />
+{:else}
+  <ComponentSettingsPanel />
+{/if}
+<slot />
 
 <style>
-  .design {
+  .left {
-    flex: 1 1 auto;
+    order: -1;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    height: 0;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    flex: 1 1 auto;
   }
 </style>