tidy up

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -51,7 +51,6 @@
     const screens = screenTemplates($store, [table])
       .filter(template => defaultScreens.includes(template.id))
       .map(template => template.create())
-    store.actions.layouts.select("main")
     for (let screen of screens) {
       // Record the table that created this screen so we can link it later
       screen.autoTableId = table._id

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

@@ -28,7 +28,7 @@
   const selectComponent = component => {
     store.actions.components.select(component)
     const path = store.actions.components.findRoute(component)
-    $goto(`./:screen/${path}`)
+    // $goto(`./:screen/${path}`)
   }
 
   const moveUpComponent = () => {

packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte

@@ -2,16 +2,16 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
-  import initDragDropStore, { DropEffect, DropPosition } from "./dragDropStore"
+  import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
 
+  export let layout
   export let components = []
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
-
+  export let dragDropStore 
-  export let dragDropStore = initDragDropStore()
 
   const isScreenslot = name => name === "##builtin/screenslot"
 
@@ -23,12 +23,11 @@
     const path = store.actions.components.findRoute(component)
 
     // Go to correct URL
-    $goto(`./${path}`)
+    if (layout) {
-    // if (layout) {
+      $goto(`./layouts/${path}`)
-    //   $goto(`./layouts/:layout/${path}`)
+    } else {
-    // } else {
+      $goto(`./screens/${path}`)
-    //   $goto(`./screens/:screen/${path}`)
+    }
-    // }
   }
 
   const dragstart = component => e => {
@@ -84,6 +83,7 @@
 
       {#if component._children}
         <svelte:self
+          {layout}
           components={component._children}
           {currentComponent}
           {onSelect}

packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte

@@ -4,10 +4,12 @@
   import { store } from "builderStore"
   import instantiateStore from "./dragDropStore"
 
-  import ComponentsTree from "./ComponentTree.svelte"
+  import ComponentTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
 
+  const dragDropStore = instantiateStore();
+
   export let route
   export let path
   export let indent
@@ -37,12 +39,13 @@
       text={url === '/' ? 'Home' : url}
       withArrow={route.subpaths}
       on:click={() => changeScreen(screenId)}>
-      <ScreenDropdownMenu screenId={screenId} />
+      <ScreenDropdownMenu {screenId} />
     </NavItem>
     {#if selectedScreen?._id === screenId}
-      <ComponentsTree
+      <ComponentTree
         components={selectedScreen.props._children}
         currentComponent={$store.currentComponentInfo}
+        {dragDropStore}
       />
     {/if}
   {/each}

packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js

@@ -48,7 +48,7 @@ export default function() {
           if (mousePosition > 0.4 && mousePosition < 0.8) {
             state.dropPosition = DropPosition.INSIDE
           }
-          return
+          return state
         }
 
         // bottom half

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

@@ -27,7 +27,7 @@
   const onComponentChosen = component => {
     store.actions.components.create(component._component, component.presetProps)
     const path = store.actions.components.findRoute($store.currentComponentInfo)
-    $goto(`./:screen/${path}`)
+    // $goto(`./:screen/${path}`)
     // $goto(`./${path}`)
     close()
   }

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

@@ -2,6 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { FrontendTypes } from "constants"
   import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
+  import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
   import NavItem from "components/common/NavItem.svelte"
   import { last } from "lodash/fp"
   import { store, currentAsset } from "builderStore"
@@ -12,7 +13,7 @@
   let confirmDeleteDialog
   let componentToDelete = ""
 
-  const dragDropStore = writable({})
+  const dragDropStore = initDragDropStore();
 
   const setCurrentScreenToLayout = () => {
     store.actions.selectAssetType(FrontendTypes.LAYOUT)
@@ -31,7 +32,7 @@
 
 {#if $currentAsset._id === layout._id && layout.props._children}
   <ComponentTree
-    layout
+    layout={true}
     components={layout.props._children}
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />

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

@@ -15,7 +15,7 @@
 
   if (!$store.currentAssetId) {
     // refactor so the right layout is chosen
-    store.actions.layouts.select($params.layout || "main")
+    store.actions.layouts.select($params.layout)
   }
 
   const changeLayout = id => {