fix: combine presence avatars

Signed-off-by: Alexander Onnikov <[email protected]>

dev/prod/public/config-dev.json

@@ -7,5 +7,6 @@
   "CALENDAR_URL": "https://calendar.hc.engineering",
   "REKONI_URL": "https://rekoni.hc.engineering",
   "COLLABORATOR_URL": "wss://collaborator.hc.engineering",
-  "STATS_URL": "https://stats.hc.engineering"
+  "STATS_URL": "https://stats.hc.engineering",
+  "PRESENCE_URL": "wss://presence.hc.engineering"
 }

plugins/presence-resources/src/components/PresenceAvatars.svelte

@@ -15,36 +15,34 @@
 
 <script lang="ts">
   import { type Doc } from '@hcengineering/core'
-  import contact, { formatName } from '@hcengineering/contact'
-  import { Avatar, CombineAvatars, personByIdStore } from '@hcengineering/contact-resources'
-  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { Avatar, personByIdStore } from '@hcengineering/contact-resources'
   import { IconSize, tooltip } from '@hcengineering/ui'
+  import PresenceList from './PresenceList.svelte'
   import { presenceByObjectId } from '../store'
 
   export let object: Doc
 
   export let size: IconSize = 'small'
   export let limit: number = 5
-  export let hideLimit: boolean = false
-  export let combine = false
 
   $: presence = $presenceByObjectId?.get(object._id) ?? []
   $: items = presence.map((it) => it.person)
+  $: overLimit = items.length > limit
 </script>
 
 {#if items.length > 0}
-  {#if combine}
-    <CombineAvatars _class={contact.mixin.Employee} {items} {size} {limit} {hideLimit} />
-  {:else}
-    <div class="flex-row-center flex-gap-0-5">
-      {#each items as item}
-        {@const person = $personByIdStore.get(item)}
-        {#if person}
-          <div use:tooltip={{ label: getEmbeddedLabel(formatName(person.name)) }}>
-            <Avatar name={person.name} {size} {person} />
-          </div>
-        {/if}
-      {/each}
-    </div>
-  {/if}
+  <div
+    class="hulyCombineAvatars-container"
+    use:tooltip={{ component: PresenceList, props: { items, size }, direction: 'bottom' }}
+  >
+    {#each items as item, i}
+      {@const person = $personByIdStore.get(item)}
+      <div
+        class="hulyCombineAvatar tiny"
+        data-over={i === limit - 1 && overLimit ? `+${items.length - limit + 1}` : undefined}
+      >
+        <Avatar name={person.name} {size} {person} />
+      </div>
+    {/each}
+  </div>
 {/if}

plugins/presence-resources/src/components/PresenceList.svelte

@@ -0,0 +1,35 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Ref } from '@hcengineering/core'
+  import { Person, formatName } from '@hcengineering/contact'
+  import { Avatar, personByIdStore } from '@hcengineering/contact-resources'
+  import { IconSize, Scroller } from '@hcengineering/ui'
+
+  export let items: Ref<Person>[]
+  export let size: IconSize
+</script>
+
+<Scroller padding={'.25rem'} gap={'flex-gap-2'}>
+  {#each items as item}
+    {@const person = $personByIdStore.get(item)}
+    <div class="flex-row-center flex-no-shrink flex-gap-2">
+      <div class="min-w-6">
+        <Avatar name={person.name} {size} {person} />
+      </div>
+      {formatName(person.name)}
+    </div>
+  {/each}
+</Scroller>