Make new screen a dedicated route and remove duplication. Fix some issues when deleting selected screens

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

@@ -42,11 +42,13 @@
   onDestroy(stopSyncing)
 </script>
 
-{#if routeComponentId === "screen"}
-  <ScreenSettingsPanel />
-{:else if routeComponentId === "navigation"}
-  <NavigationPanel />
-{:else}
-  <ComponentSettingsPanel />
+{#if $selectedScreen}
+  {#if routeComponentId === "screen"}
+    <ScreenSettingsPanel />
+  {:else if routeComponentId === "navigation"}
+    <NavigationPanel />
+  {:else}
+    <ComponentSettingsPanel />
+  {/if}
 {/if}
 <slot />

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

@@ -56,7 +56,7 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      notifications.success("Deleted screen successfully.")
+      notifications.success("Deleted screen successfully")
     } catch (err) {
       notifications.error("Error deleting screen")
     }

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

@@ -9,11 +9,9 @@
   import NavItem from "components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import DropdownMenu from "./DropdownMenu.svelte"
-  import NewScreen from "components/design/NewScreen/index.svelte"
   import { onMount, tick } from "svelte"
-  import { beforeUrlChange } from "@roxi/routify"
+  import { goto } from "@roxi/routify"
 
-  let newScreen = false
   let search = false
   let resizing = false
   let searchValue = ""
@@ -26,14 +24,6 @@
 
   $: 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 () => {
@@ -66,17 +56,13 @@
     if (search) {
       closeSearch()
     } else {
-      newScreen = true
+      $goto("../new")
     }
   }
 
   const onKeyDown = e => {
     if (e.key === "Escape") {
-      if (newScreen) {
-        newScreen = false
-      } else {
-        closeSearch()
-      }
+      closeSearch()
     }
   }
 
@@ -184,29 +170,7 @@
   />
 </div>
 
-<div class="newScreen" class:newScreenVisible={newScreen}>
-  <NewScreen
-    onClose={() => {
-      console.log("close")
-      newScreen = false
-    }}
-  />
-</div>
-
 <style>
-  .newScreen {
-    display: none;
-    width: 100vw;
-    bottom: 0;
-    position: absolute;
-    height: calc(100vh - 58px);
-    z-index: 2;
-    background-color: var(--background);
-  }
-  .newScreenVisible {
-    display: initial;
-  }
-
   .screens {
     display: flex;
     flex-direction: column;

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte

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

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

@@ -1,5 +1,23 @@
 <script>
-  import NewScreen from "components/design/NewScreen/index.svelte"
+  import NewScreen from "./_components/NewScreen/index.svelte"
+  import { store } from "builderStore"
+  import { goto } from "@roxi/routify"
+
+  $: onClose = getOnClose($store)
+
+  const getOnClose = ({ screens, selectedScreenId }) => {
+    if (!screens?.length) {
+      return null
+    }
+    if (selectedScreenId) {
+      return () => {
+        $goto(`./${selectedScreenId}`)
+      }
+    }
+    return () => {
+      $goto(`./${screens[0]._id}`)
+    }
+  }
 </script>
 
-<NewScreen />
+<NewScreen {onClose} />