Fix empty screen list when navigating between roles

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

@@ -1,82 +0,0 @@
-<script>
-  import { store, allScreens } from "builderStore"
-  import { FrontendTypes } from "constants"
-  import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
-  import ComponentSelectionList from "./ComponentSelectionList.svelte"
-
-  const PROPERTIES_TAB = "properties"
-  const COMPONENT_SELECTION_TAB = "components"
-
-  let selected = PROPERTIES_TAB
-
-  const isSelected = tab => selected === tab
-
-  const selectTab = tab => (selected = tab)
-
-  const toggleTab = () =>
-    (selected =
-      selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
-</script>
-
-<div class="root">
-  {#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
-    <div class="switcher">
-      <button
-        class:selected={selected === COMPONENT_SELECTION_TAB}
-        on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
-        Add
-      </button>
-
-      <button
-        class:selected={selected === PROPERTIES_TAB}
-        on:click={() => selectTab(PROPERTIES_TAB)}>
-        Edit
-      </button>
-    </div>
-
-    <div class="panel">
-      {#if selected === PROPERTIES_TAB}
-        <ComponentPropertiesPanel {toggleTab} />
-      {/if}
-
-      {#if selected === COMPONENT_SELECTION_TAB}
-        <ComponentSelectionList {toggleTab} />
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 5px 20px 10px;
-    border-left: solid 1px var(--grey-2);
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--grey-5);
-    margin-right: 20px;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-
-  .panel {
-    height: 100%;
-  }
-</style>

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

@@ -1,7 +1,11 @@
 <script>
-  import { store, backendUiStore, currentAsset } from "builderStore"
+  import {
+    store,
+    backendUiStore,
+    currentAsset,
+    selectedComponent,
+  } from "builderStore"
   import { onMount } from "svelte"
-  import { FrontendTypes } from "constants"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
@@ -43,7 +47,7 @@
     {/if}
   </div>
 
-  {#if $store.currentFrontEndType === FrontendTypes.SCREEN || $store.currentFrontEndType === FrontendTypes.LAYOUT}
+  {#if $selectedComponent != null}
     <div class="components-pane">
       <ComponentPropertiesPanel />
     </div>