From f1121a11a339d12098ca407967ce5d74a10c7e1e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 11:18:14 +0100
Subject: [PATCH] Improve route safety

---
 .../[screenId]/[componentId]/_layout.svelte      | 14 ++++++--------
 .../[screenId]/_components/LeftPanel.svelte      |  5 +----
 .../design/[screenId]/_layout.svelte             | 16 +++++++++-------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 8c821b64d7..932a3d360a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -42,13 +42,11 @@
   onDestroy(stopSyncing)
 </script>
 
-{#if $selectedScreen}
-  {#if routeComponentId === "screen"}
-    <ScreenSettingsPanel />
-  {:else if routeComponentId === "navigation"}
-    <NavigationPanel />
-  {:else}
-    <ComponentSettingsPanel />
-  {/if}
+{#if routeComponentId === "screen"}
+  <ScreenSettingsPanel />
+{:else if routeComponentId === "navigation"}
+  <NavigationPanel />
+{:else}
+  <ComponentSettingsPanel />
 {/if}
 <slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index 977d0ff0a9..96d4579eeb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/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 />
-  {/if}
+  <ComponentList />
 </div>
 
 <style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 61514270e6..62e97829a9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/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">
-  <div class="content">
-    <LeftPanel />
-    <AppPanel />
-    <slot />
+{#if $selectedScreen}
+  <div class="design">
+    <div class="content">
+      <LeftPanel />
+      <AppPanel />
+      <slot />
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .design {