Improve route handling when creating new components and screens

packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte

@@ -67,7 +67,8 @@
         }
       }
 
-      $goto(`./${screenId}`)
+      // Select and go to new screen
+      store.actions.screens.select(screenId)
     } catch (error) {
       console.log(error)
       notifications.error("Error creating screens")

packages/builder/src/helpers/urlStateSync.js

@@ -56,6 +56,11 @@ export const syncURLToState = options => {
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
+    // Clean URL
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
+    // Allow custom URL handling
     if (beforeNavigate) {
       const res = beforeNavigate(url, params)
       if (res?.url) {
@@ -65,10 +70,6 @@ export const syncURLToState = options => {
         params = res.params
       }
     }
-    // Clean URL
-    if (url?.endsWith("/index")) {
-      url = url.replace("/index", "")
-    }
     log("Navigating to", url, "with params", params)
     cachedGoto(url, params)
   }

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

@@ -1,12 +1,12 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
-  import { isActive } from "@roxi/routify"
+  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <ScreenList />
-  {#if $isActive("./:componentId")}
+  {#if $selectedScreen}
     <ComponentList />
   {/if}
 </div>

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

@@ -11,6 +11,7 @@
   import DropdownMenu from "./DropdownMenu.svelte"
   import NewScreen from "components/design/NewScreen/index.svelte"
   import { onMount, tick } from "svelte"
+  import { beforeUrlChange } from "@roxi/routify"
 
   let newScreen = false
   let search = false
@@ -25,6 +26,14 @@
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
+  // Close new screen when URL changes
+  $beforeUrlChange(() => {
+    if (newScreen) {
+      newScreen = false
+    }
+    return true
+  })
+
   const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
   const openSearch = async () => {
@@ -176,7 +185,12 @@
 </div>
 
 <div class="newScreen" class:newScreenVisible={newScreen}>
-  <NewScreen onClose={() => (newScreen = false)} />
+  <NewScreen
+    onClose={() => {
+      console.log("close")
+      newScreen = false
+    }}
+  />
 </div>
 
 <style>