From dae2c0cfba52f2f1f8612eccb6c4ff80d93b93a3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 4 Jul 2023 11:28:02 +0100
Subject: [PATCH] Fix datasource navigator padding, add other user selection
 state to design section

---
 .../backend/DatasourceNavigator/DatasourceNavigator.svelte  | 2 +-
 packages/builder/src/components/common/NavItem.svelte       | 3 +++
 .../src/pages/builder/app/[application]/data/_layout.svelte | 6 ------
 .../app/[application]/design/[screenId]/_layout.svelte      | 3 +++
 .../_components/navigation/ComponentListPanel.svelte        | 3 ++-
 .../_components/navigation/ComponentTree.svelte             | 3 ++-
 .../[screenId]/components/[componentId]/_layout.svelte      | 3 +++
 .../[screenId]/screens/_components/ScreenListPanel.svelte   | 3 ++-
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index c34afce783..99d7d5285d 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -216,7 +216,7 @@
 
 <style>
   .hierarchy-items-container {
-    margin: 0 calc(-1 * var(--spacing-xl));
+    margin: 0 calc(-1 * var(--spacing-l));
   }
   .datasource-icon {
     display: grid;
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 7b999123a2..5ffc5eacf0 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -133,6 +133,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
+    position: relative;
   }
   .nav-item.scrollable {
     flex-direction: column;
@@ -172,10 +173,12 @@
     height: 28px;
     border: 2px solid var(--selected-by-color);
     left: 0;
+    top: 0;
     border-radius: 2px;
   }
   .selected-by-label {
     position: absolute;
+    top: 0;
     right: 0;
     background: var(--selected-by-color);
     padding: 2px 4px;
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index 5e51915afe..a2db33306c 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@@ -5,8 +5,6 @@
   import { isActive, goto, redirect } from "@roxi/routify"
   import BetaButton from "./_components/BetaButton.svelte"
   import { datasources } from "stores/backend"
-  import { onDestroy } from "svelte"
-  import { store } from "builderStore"
 
   $: {
     // If we ever don't have any data other than the users table, prompt the
@@ -15,10 +13,6 @@
       $redirect("./new")
     }
   }
-
-  onDestroy(() => {
-    store.actions.websocket.selectResource(null)
-  })
 </script>
 
 <!-- routify:options index=1 -->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index d0eb93466d..8bc0dcc3e5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -7,6 +7,9 @@
   import { onDestroy } from "svelte"
   const { isActive, goto } = routify
 
+  $: screenId = $store.selectedScreenId
+  $: store.actions.websocket.selectResource(screenId)
+
   // Keep URL and state in sync for selected screen ID
   const stopSyncing = syncURLToState({
     urlParam: "screenId",
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 71d0b9ae52..9513753d76 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -3,7 +3,7 @@
   import ComponentTree from "./ComponentTree.svelte"
   import { dndStore } from "./dndStore.js"
   import { goto } from "@roxi/routify"
-  import { store, selectedScreen } from "builderStore"
+  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
@@ -41,6 +41,7 @@
             $store.selectedComponentId = $selectedScreen?.props._id
           }}
           id={`component-${$selectedScreen?.props._id}`}
+          selectedBy={$userSelectedResourceMap[$selectedScreen?.props._id]}
         >
           <ScreenslotDropdownMenu component={$selectedScreen?.props} />
         </NavItem>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index 00234edc79..1ce6fbfd95 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { store } from "builderStore"
+  import { store, userSelectedResourceMap } from "builderStore"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { capitalise } from "helpers"
@@ -123,6 +123,7 @@
         selected={$store.selectedComponentId === component._id}
         {opened}
         highlighted={isChildOfSelectedComponent(component)}
+        selectedBy={$userSelectedResourceMap[component._id]}
       >
         <ComponentDropdownMenu {component} />
       </NavItem>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index e6cbbf71fe..860258c940 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -7,6 +7,9 @@
   import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
   import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 
+  $: componentId = $store.selectedComponentId
+  $: store.actions.websocket.selectResource(componentId)
+
   const cleanUrl = url => {
     // Strip trailing slashes
     if (url?.endsWith("/index")) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
index 06f9f86eb6..92a88abb13 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
@@ -2,7 +2,7 @@
   import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
   import { roles } from "stores/backend"
-  import { store, sortedScreens } from "builderStore"
+  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import ScreenWizard from "./ScreenWizard.svelte"
@@ -60,6 +60,7 @@
       on:click={() => store.actions.screens.select(screen._id)}
       rightAlignIcon
       showTooltip
+      selectedBy={$userSelectedResourceMap[screen._id]}
     >
       <ScreenDropdownMenu screenId={screen._id} />
       <RoleIndicator slot="right" roleId={screen.routing.roleId} />