From 0ef0e58e5e253ca70d6a0ccf8e35d5acb950c26c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:37:13 +0100
Subject: [PATCH] Fix click on navigation not selecting it

---
 .../src/builderStore/store/frontend.js        | 21 +++++++++++++------
 .../[screenId]/_components/AppPreview.svelte  |  2 --
 .../client/src/components/app/Layout.svelte   |  2 +-
 packages/client/src/stores/builder.js         |  3 ---
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 1200cebeb2..9c52a52b47 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -999,14 +999,18 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (componentId === "screen") {
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        console.log(componentId, screenComponentId, navComponentId)
+        if (componentId === screenComponentId) {
           return null
         }
-        if (componentId === "navigation") {
-          return "screen"
+        if (componentId === navComponentId) {
+          return screenComponentId
         }
         if (parent._id === screen.props._id && index === 0) {
-          return "navigation"
+          return navComponentId
         }
 
         // If we have siblings above us, choose the sibling or a descendant
@@ -1036,8 +1040,11 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (state.selectedComponentId === "screen") {
-          return "navigation"
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        if (state.selectedComponentId === screenComponentId) {
+          return navComponentId
         }
 
         // If we have children, select first child
@@ -1076,6 +1083,7 @@ export const getFrontendStore = () => {
         }
       },
       selectPrevious: () => {
+        console.log("prev")
         const previousId = store.actions.components.getPrevious()
         if (previousId) {
           store.update(state => {
@@ -1085,6 +1093,7 @@ export const getFrontendStore = () => {
         }
       },
       selectNext: () => {
+        console.log("next")
         const nextId = store.actions.components.getNext()
         if (nextId) {
           store.update(state => {
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 6aaf7ae407..45fe005ceb 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
@@ -156,8 +156,6 @@
         store.actions.components.copy(source, true, false)
         await store.actions.components.paste(destination, data.mode)
       }
-    } else if (type === "click-nav") {
-      $store.selectedComponentId = "navigation"
     } else if (type === "request-add-component") {
       toggleAddComponent()
     } else if (type === "highlight-setting") {
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index e736e768f9..e557874edb 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -176,7 +176,7 @@
           class:hidden={$routeStore.queryParams?.peek}
           class:clickable={$builderStore.inBuilder}
           on:click={$builderStore.inBuilder
-            ? builderStore.actions.clickNav
+            ? builderStore.actions.selectComponent(navigationId)
             : null}
           style={navStyle}
         >
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 23d789dc2c..036558e8b2 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -80,9 +80,6 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
-    clickNav: () => {
-      eventStore.actions.dispatchEvent("click-nav")
-    },
     requestAddComponent: () => {
       eventStore.actions.dispatchEvent("request-add-component")
     },