Update user avatars and selection state for collaboration

packages/builder/src/builderStore/index.js

@@ -127,8 +127,12 @@ export const selectedAutomation = derived(automationStore, $automationStore => {
 export const userSelectedResourceMap = derived(userStore, $userStore => {
   let map = {}
   $userStore.forEach(user => {
-    if (user.builderMetadata?.selectedResourceId) {
+    const resource = user.builderMetadata?.selectedResourceId
-      map[user.builderMetadata?.selectedResourceId] = user
+    if (resource) {
+      if (!map[resource]) {
+        map[resource] = []
+      }
+      map[resource].push(user)
     }
   })
   return map

packages/builder/src/components/common/NavItem.svelte

@@ -3,6 +3,7 @@
   import { createEventDispatcher, getContext } from "svelte"
   import { helpers } from "@budibase/shared-core"
   import { UserAvatar } from "@budibase/frontend-core"
+  import UserAvatars from "../../pages/builder/app/[application]/_components/UserAvatars.svelte"
 
   export let icon
   export let withArrow = false
@@ -102,7 +103,7 @@
     <div class="text" title={showTooltip ? text : null}>
       {text}
       {#if selectedBy}
-        <UserAvatar user={selectedBy} size="XS" />
+        <UserAvatars size="XS" users={selectedBy} />
       {/if}
     </div>
 
@@ -145,13 +146,16 @@
   }
   .nav-item.highlighted {
     background-color: var(--spectrum-global-color-gray-200);
+    --avatars-background: var(--spectrum-global-color-gray-200);
   }
   .nav-item.selected {
     background-color: var(--spectrum-global-color-gray-300);
+    --avatars-background: var(--spectrum-global-color-gray-300);
     color: var(--ink);
   }
   .nav-item:hover {
     background-color: var(--spectrum-global-color-gray-300);
+    --avatars-background: var(--spectrum-global-color-gray-300);
   }
   .nav-item:hover .actions {
     visibility: visible;

packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte

@@ -1,24 +1,54 @@
 <script>
   import { UserAvatar } from "@budibase/frontend-core"
-  import { TooltipPosition } from "@budibase/bbui"
+  import { TooltipPosition, Avatar } from "@budibase/bbui"
 
   export let users = []
+  export let order = "ltr"
+  export let size = "S"
 
-  $: uniqueUsers = unique(users)
+  $: uniqueUsers = unique(users, order)
+  $: avatars = getAvatars(uniqueUsers, order)
 
   const unique = users => {
     let uniqueUsers = {}
     users?.forEach(user => {
       uniqueUsers[user.email] = user
     })
-    return Object.values(uniqueUsers)
+    return Object.values(uniqueUsers).concat(Object.values(uniqueUsers))
+  }
+
+  const getAvatars = (users, order) => {
+    const avatars = users.slice(0, 3)
+    if (users.length > 3) {
+      const overflow = {
+        _id: "overflow",
+        label: `+${users.length - 3}`,
+      }
+      if (order === "ltr") {
+        avatars.push(overflow)
+      } else {
+        avatars.unshift(overflow)
+      }
+    }
+    return avatars.map((user, idx) => ({
+      ...user,
+      zIndex: order === "ltr" ? idx : uniqueUsers.length - idx,
+    }))
   }
 </script>
 
 <div class="avatars">
-  {#each uniqueUsers as user, idx}
+  {#each avatars as user}
-    <span style="z-index:{100 - idx};">
+    <span style="z-index:{user.zIndex};">
-      <UserAvatar {user} tooltipPosition={TooltipPosition.Bottom} />
+      {#if user._id === "overflow"}
+        <Avatar
+          {size}
+          initials={user.label}
+          color="var(--spectrum-global-color-gray-500)"
+        />
+      {:else}
+        <UserAvatar {size} {user} tooltipPosition={TooltipPosition.Bottom} />
+      {/if}
     </span>
   {/each}
 </div>
@@ -27,10 +57,10 @@
   .avatars {
     display: flex;
   }
-  .avatars :global(> *:not(:first-child)) {
+  span:not(:first-of-type) {
-    margin-left: -12px;
+    margin-left: -6px;
   }
   .avatars :global(.spectrum-Avatar) {
-    border: 2px solid var(--background);
+    border: 2px solid var(--avatars-background, var(--background));
   }
 </style>

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -172,7 +172,7 @@
       </div>
       <div class="toprightnav">
         <span>
-          <UserAvatars users={$userStore} />
+          <UserAvatars users={$userStore} order="rtl" />
         </span>
         <AppActions {application} {loaded} />
       </div>

packages/frontend-core/src/components/UserAvatar.svelte

@@ -3,7 +3,7 @@
   import { helpers } from "@budibase/shared-core"
 
   export let user
-  export let size
+  export let size = "S"
   export let tooltipPosition = TooltipPosition.Top
   export let showTooltip = true
 </script>