UBERF-6677: add user online/offline status

packages/theme/styles/_lumia-colors.scss

@@ -122,6 +122,9 @@
   --love-active-call-color-2: #F47758;
   --love-active-call-transform: scaleY(0.25) scaleX(0.4);
   --love-active-call-filter: blur(17px);
+
+  --global-online-color: #49a26b;
+  --global-offline-color: #d1d5de;
 }
 
 /* Light Theme */
@@ -213,4 +216,7 @@
   --love-active-call-color-2: #e34748;
   --love-active-call-filter: blur(10px);
   --love-active-call-transform: scaleY(0.3) scaleX(0.42);
+
+  --global-online-color: #49a26b;
+  --global-offline-color: #5A667E;
 }

plugins/chunter-resources/src/components/ChannelHeader.svelte

@@ -66,7 +66,7 @@
     bind:filters
     {object}
     icon={getObjectIcon(_class)}
-    iconProps={{ value: object }}
+    iconProps={{ value: object, showStatus: true, background: 'var(--theme-comp-header-color)' }}
     label={title}
     intlLabel={chunter.string.Channel}
     {description}

plugins/chunter-resources/src/components/ChannelMembers.svelte

@@ -50,7 +50,7 @@
     {#each persons as person, index}
       <div class="item" class:withoutBorder={index === persons.length - 1}>
         <div class="item__content" class:disabled={disableRemoveFor.includes(person._id)}>
-          <UserDetails {person} />
+          <UserDetails {person} showStatus background="var(--global-surface-01-BackgroundColor)" />
           {#if !disableRemoveFor.includes(person._id)}
             <div class="item__action">
               <ButtonIcon

plugins/chunter-resources/src/components/DirectIcon.svelte

@@ -14,17 +14,20 @@
 -->
 <script lang="ts">
   import { DirectMessage } from '@hcengineering/chunter'
-  import { Avatar, CombineAvatars } from '@hcengineering/contact-resources'
+  import { Avatar, CombineAvatars, personAccountByIdStore } from '@hcengineering/contact-resources'
   import { Icon, IconSize } from '@hcengineering/ui'
-  import contact, { Person } from '@hcengineering/contact'
+  import contact, { Person, PersonAccount } from '@hcengineering/contact'
   import { classIcon } from '@hcengineering/view-resources'
   import { getClient } from '@hcengineering/presentation'
+  import { Account, IdMap } from '@hcengineering/core'
 
   import chunter from '../plugin'
   import { getDmPersons } from '../utils'
 
   export let value: DirectMessage | undefined
   export let size: IconSize = 'small'
+  export let showStatus = false
+  export let background: string = 'var(--global-ui-BackgroundColor)'
 
   const visiblePersons = 4
   const client = getClient()
@@ -41,14 +44,25 @@
   $: if (size === 'small') {
     avatarSize = 'tiny'
   }
+
+  function getAccountByPerson (accountById: IdMap<PersonAccount>, person: Person): Account | undefined {
+    return Array.from(accountById.values()).find((account) => account.person === person._id)
+  }
 </script>
 
 {#if persons.length === 0 && value}
   <Icon icon={classIcon(client, value._class) ?? chunter.icon.Chunter} {size} />
 {/if}
 
 {#if persons.length === 1}
-  <Avatar avatar={persons[0].avatar} size={avatarSize} name={persons[0].name} />
+  <Avatar
+    avatar={persons[0].avatar}
+    size={avatarSize}
+    name={persons[0].name}
+    {showStatus}
+    account={getAccountByPerson($personAccountByIdStore, persons[0])?._id}
+    {background}
+  />
 {/if}
 
 {#if persons.length > 1 && size === 'medium'}

plugins/chunter-resources/src/components/chat/ChannelAside.svelte

@@ -103,7 +103,8 @@
       {
         okLabel: presentation.string.Add,
         disableDeselectFor: disabledRemoveFor,
-        selected: members
+        selected: members,
+        showStatus: true
       },
       'top',
       (result?: Ref<Person>[]) => {

plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte

@@ -115,7 +115,8 @@
       {
         okLabel: presentation.string.Next,
         skipCurrentAccount: true,
-        selected: employeeIds
+        selected: employeeIds,
+        showStatus: true
       },
       'top',
       (result?: Ref<Employee>[]) => {

plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte

@@ -120,7 +120,7 @@
   isSecondary={item.isSecondary}
   iconSize={item.iconSize}
   {isSelected}
-  iconProps={{ value: item.object }}
+  iconProps={{ ...item.iconProps, value: item.object }}
   {notificationsCount}
   title={item.title}
   description={item.description}

plugins/chunter-resources/src/components/chat/navigator/ChatNavSection.svelte

@@ -80,6 +80,7 @@
         title: (await getChannelName(object._id, object._class, object)) ?? (await translate(titleIntl, {})),
         description: isDocChat && !isPerson ? await getDocTitle(client, object._id, object._class, object) : undefined,
         icon: icon ?? getObjectIcon(_class),
+        iconProps: { showStatus: true, background: 'var(--global-surface-01-BackgroundColor)' },
         iconSize,
         withIconBackground: !isDirect && !isPerson,
         isSecondary: isDocChat && !isPerson

plugins/chunter-resources/src/components/chat/types.ts

@@ -36,6 +36,7 @@ export interface ChatNavItemModel {
   description?: string
   icon: Asset | AnySvelteComponent | undefined
   iconSize?: IconSize
+  iconProps: Record<string, any>
   isSecondary: boolean
   withIconBackground: boolean
 }

plugins/contact-resources/src/components/Avatar.svelte

@@ -46,6 +46,9 @@
     themeStore
   } from '@hcengineering/ui'
   import { onMount } from 'svelte'
+  import { UserStatus } from '@hcengineering/view-resources'
+  import { Account } from '@hcengineering/core'
+
   import AvatarIcon from './icons/Avatar.svelte'
 
   export let avatar: string | null | undefined = undefined
@@ -56,6 +59,9 @@
   export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
   export let borderColor: number | undefined = undefined
   export let standby: boolean = false
+  export let showStatus = false
+  export let account: Ref<Account> | undefined = undefined
+  export let background: string | undefined = undefined
 
   export function pulse (): void {
     if (element) element.animate(pulsating, { duration: 150, easing: 'ease-out' })
@@ -136,6 +142,24 @@
       fontSize = element.clientWidth * 0.6
     }
   })
+
+  function getStatusSize (avaSize: IconSize): 'small' | 'medium' {
+    switch (avaSize) {
+      case 'inline':
+      case 'tiny':
+      case 'card':
+      case 'x-small':
+        return 'small'
+      case 'small':
+      case 'medium':
+      case 'large':
+      case 'x-large':
+      case '2x-large':
+        return 'medium'
+      default:
+        return 'small'
+    }
+  }
 </script>
 
 {#if size === 'full' && !url && name && displayName && displayName !== ''}
@@ -185,14 +209,18 @@
         <Icon icon={icon ?? AvatarIcon} size={'full'} />
       </div>
     {/if}
+    {#if showStatus && account}
+      <span class="status">
+        <UserStatus user={account} size={getStatusSize(size)} {background} />
+      </span>
+    {/if}
   </div>
 {/if}
 
 <style lang="scss">
   .avatar-container {
     flex-shrink: 0;
     position: relative;
-    overflow: hidden;
     background-color: var(--theme-button-default);
     pointer-events: none;
 
@@ -364,4 +392,10 @@
       font-size: inherit;
     }
   }
+
+  .status {
+    position: absolute;
+    bottom: -0.125ren;
+    right: -0.25rem;
+  }
 </style>

plugins/contact-resources/src/components/SelectUsersPopup.svelte

@@ -32,21 +32,22 @@
   export let selected: Ref<Employee>[] = []
   export let skipCurrentAccount = false
   export let disableDeselectFor: Ref<Employee>[] = []
+  export let showStatus = false
 
   const dispatch = createEventDispatcher()
 
   let search: string = ''
   let selectedIds: Ref<Employee>[] = selected
 
-  function handleCancel () {
+  function handleCancel (): void {
     dispatch('close')
   }
 
-  function okAction () {
+  function okAction (): void {
     dispatch('close', selectedIds)
   }
 
-  function handleSelectionChanged (event: CustomEvent) {
+  function handleSelectionChanged (event: CustomEvent): void {
     selectedIds = event.detail ?? []
   }
 </script>
@@ -86,8 +87,10 @@
           {search}
           {groupBy}
           selected={selectedIds}
+          {showStatus}
           {disableDeselectFor}
           {skipCurrentAccount}
+          background="var(--theme-popup-color)"
           on:select={handleSelectionChanged}
         />
       </Scroller>

plugins/contact-resources/src/components/UserDetails.svelte

@@ -15,21 +15,37 @@
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
   import { IconSize } from '@hcengineering/ui'
-  import { Person, getName } from '@hcengineering/contact'
+  import { Person, getName, PersonAccount } from '@hcengineering/contact'
+  import { Account, IdMap } from '@hcengineering/core'
 
   import Avatar from './Avatar.svelte'
+  import { personAccountByIdStore } from '../utils'
 
   export let person: Person
   export let avatarSize: IconSize = 'x-small'
+  export let showStatus = false
+  export let background: string | undefined = undefined
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
+
+  function getAccountByPerson (accountById: IdMap<PersonAccount>, person: Person): Account | undefined {
+    return Array.from(accountById.values()).find((account) => account.person === person._id)
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="flex-row-center" on:click>
-  <Avatar avatar={person.avatar} size={avatarSize} name={person.name} on:accent-color />
+  <Avatar
+    avatar={person.avatar}
+    size={avatarSize}
+    name={person.name}
+    on:accent-color
+    {showStatus}
+    account={getAccountByPerson($personAccountByIdStore, person)?._id}
+    {background}
+  />
   <div class="flex-col min-w-0 {avatarSize === 'tiny' || avatarSize === 'inline' ? 'ml-1' : 'ml-3'}">
     <div class="label overflow-label text-left">{getName(hierarchy, person)}</div>
   </div>

plugins/contact-resources/src/components/UsersList.svelte

@@ -30,6 +30,8 @@
   export let selected: Ref<Employee>[] = []
   export let skipCurrentAccount = false
   export let disableDeselectFor: Ref<Employee>[] = []
+  export let showStatus = false
+  export let background: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const query = createQuery()
@@ -114,7 +116,7 @@
           handleSelection(persons, index)
         }}
       >
-        <UserDetails avatarSize="small" {person} />
+        <UserDetails avatarSize="small" {person} {showStatus} {background} />
         <CheckBox
           checked={selectedItems.has(person._id)}
           readonly={disabled}

plugins/view-resources/src/components/UserStatus.svelte

@@ -0,0 +1,85 @@
+<!--
+// 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 { createQuery } from '@hcengineering/presentation'
+  import core, { Account, Ref, UserStatus } from '@hcengineering/core'
+
+  export let user: Ref<Account>
+  export let size: 'small' | 'medium' = 'small'
+  export let background: string = 'red'
+
+  const query = createQuery()
+
+  let status: UserStatus | undefined = undefined
+
+  $: query.query(
+    core.class.UserStatus,
+    { user },
+    (res) => {
+      status = res[0]
+    },
+    { limit: 1 }
+  )
+</script>
+
+<div class="container {size}" style="background-color: {background}">
+  <div
+    class="status {size}"
+    style="background-color: {background}"
+    class:online={status?.online}
+    class:offline={!status?.online}
+  />
+</div>
+
+<style lang="scss">
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+
+    &.small {
+      width: 0.625rem;
+      height: 0.625rem;
+    }
+
+    &.medium {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+  .status {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+
+    &.online {
+      background-color: var(--global-online-color) !important;
+    }
+
+    &.offline {
+      border: 1px solid var(--global-offline-color);
+    }
+    &.small {
+      width: 0.375rem;
+      height: 0.375rem;
+    }
+
+    &.medium {
+      width: 0.625rem;
+      height: 0.625rem;
+    }
+  }
+</style>