From 08d2074515cf0f0746b68c8eb39d95c9dee5127d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:04:18 +0100
Subject: [PATCH] Fix add component FAB not working when screen or navigation
 are selected

---
 .../[screenId]/_components/AppPreview.svelte      | 15 +++++----------
 .../_components/ComponentList/index.svelte        |  2 +-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 687ea2d579..e783e7b3e2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -1,12 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import {
-    store,
-    selectedComponent,
-    selectedScreen,
-    currentAsset,
-  } from "builderStore"
+  import { store, selectedScreen, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -70,7 +65,7 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(`./${$selectedComponent?._id}/new`)
+  $: isAddingComponent = $isActive(`./${selectedComponentId}/new`)
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -212,10 +207,10 @@
   }
 
   const toggleAddComponent = () => {
-    if (isAddingComponent) {
-      $goto(`./${$selectedComponent?._id}`)
+    if ($isActive(`./${selectedComponentId}/new`)) {
+      $goto(`./${selectedComponentId}`)
     } else {
-      $goto(`./${$selectedComponent?._id}/new`)
+      $goto(`./${selectedComponentId}/new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index a1735fc6f4..a667cd4e59 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -15,7 +15,7 @@
 
   const toNewComponentRoute = () => {
     if ($isActive(`./${$store.selectedComponentId}/new`)) {
-      return
+      $goto(`./${$store.selectedComponentId}`)
     } else {
       $goto(`./${$store.selectedComponentId}/new`)
     }