Improve route safety

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

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

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

@@ -1,14 +1,11 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
-  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <ScreenList />
-  {#if $selectedScreen}
+  <ComponentList />
-    <ComponentList />
-  {/if}
 </div>
 
 <style>

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

@@ -2,7 +2,7 @@
   import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
-  import { store } from "builderStore"
+  import { store, selectedScreen } from "builderStore"
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 
@@ -22,13 +22,15 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="design">
+{#if $selectedScreen}
-  <div class="content">
+  <div class="design">
-    <LeftPanel />
+    <div class="content">
-    <AppPanel />
+      <LeftPanel />
-    <slot />
+      <AppPanel />
+      <slot />
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .design {