From ed7a80ca6f75da99400125bc3bf2e2f6d984a217 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 21 Mar 2022 14:46:59 +0000
Subject: [PATCH] Support scrolling screens or folders into view when clicking

---
 packages/builder/src/components/common/NavItem.svelte | 11 ++++++++---
 .../ComponentNavigationTree/PathTree.svelte           |  5 +++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index ce641aa3fc..6b3b287704 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -20,8 +20,13 @@
   let contentRef
   $: selected && contentRef && scrollToView()
 
-  function onIconClick(event) {
-    event.stopPropagation()
+  const onClick = () => {
+    scrollToView()
+    dispatch("click")
+  }
+
+  const onIconClick = e => {
+    e.stopPropagation()
     dispatch("iconClick")
   }
 
@@ -44,7 +49,7 @@
   on:dragstart
   on:dragover
   on:drop
-  on:click
+  on:click={onClick}
   ondragover="return false"
   ondragenter="return false"
 >
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index b4a79f4e9e..df4f8b6826 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -30,7 +30,9 @@
   export let indent
   export let border
 
+  let folder
   let routeManuallyOpened = false
+
   $: selectedScreen = $currentAsset
   $: allScreens = getAllScreens(route)
   $: filteredScreens = getFilteredScreens(allScreens, $screenSearchString)
@@ -85,8 +87,7 @@
       <NavItem
         icon="WebPage"
         indentLevel={indent || 1}
-        selected={$store.selectedScreenId === screen.id &&
-          $store.currentView === "detail"}
+        selected={$store.selectedScreenId === screen.id}
         opened={$store.selectedScreenId === screen.id}
         text={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
         withArrow={route.subpaths}