Fix datasource navigator padding, add other user selection state to design section

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;

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;

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 -->

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",

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>

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>

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")) {

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} />