Don't show selected components unless the components tab is active and automatically route to components whenever selecting on in the preview

packages/builder/src/builderStore/store/frontend.js

@@ -5,6 +5,7 @@ import {
   mainLayout,
   selectedComponent,
   selectedAccessRole,
+  store,
 } from "builderStore"
 import {
   datasources,

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

@@ -39,7 +39,11 @@
       {#if $store.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
-      <Button cta icon="Add" on:click={() => $goto(newComponentUrl)}>
+      <Button
+        cta
+        icon="Add"
+        on:click={() => $goto(`./components/${$selectedScreen._id}/new`)}
+      >
         Component
       </Button>
     </div>

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

@@ -13,6 +13,7 @@
   } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
+  import { isActive, goto } from "@roxi/routify"
 
   let iframe
   let layout
@@ -41,7 +42,10 @@
     screen = $selectedScreen
     layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
   }
-  $: selectedComponentId = $store.selectedComponentId ?? ""
+  // Don't show selected components unless on the components tab
+  $: selectedComponentId = $isActive("./components")
+    ? $store.selectedComponentId
+    : ""
   $: previewData = {
     appId: $store.appId,
     layout,
@@ -140,10 +144,10 @@
 
     try {
       if (type === "select-component" && data.id) {
-        store.update(state => {
+        $store.selectedComponentId = data.id
-          state.selectedComponentId = data.id
+        if (!$isActive("./components")) {
-          return state
+          $goto("./components")
-        })
+        }
       } else if (type === "update-prop") {
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {