From c375aa41838bc30c72562b8010e9f8be69c43344 Mon Sep 17 00:00:00 2001
From: Kristina Fefelova <kristin.fefelova@gmail.com>
Date: Tue, 23 Apr 2024 18:24:52 +0400
Subject: [PATCH 1/3] UBERF-6677: add user online/offline status

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 packages/theme/styles/_lumia-colors.scss      |  6 ++
 .../src/components/ChannelHeader.svelte       |  2 +-
 .../src/components/ChannelMembers.svelte      |  2 +-
 .../src/components/DirectIcon.svelte          | 20 ++++-
 .../src/components/chat/ChannelAside.svelte   |  3 +-
 .../chat/create/CreateDirectChat.svelte       |  3 +-
 .../chat/navigator/ChatNavItem.svelte         |  2 +-
 .../chat/navigator/ChatNavSection.svelte      |  1 +
 .../src/components/chat/types.ts              |  1 +
 .../src/components/Avatar.svelte              | 36 +++++++-
 .../src/components/SelectUsersPopup.svelte    |  9 +-
 .../src/components/UserDetails.svelte         | 20 ++++-
 .../src/components/UsersList.svelte           |  4 +-
 .../src/components/UserStatus.svelte          | 85 +++++++++++++++++++
 plugins/view-resources/src/index.ts           |  4 +-
 server/ws/src/server.ts                       |  4 +-
 16 files changed, 183 insertions(+), 19 deletions(-)
 create mode 100644 plugins/view-resources/src/components/UserStatus.svelte

diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss
index dc2cb7f7ae..f6f2b1ffb7 100644
--- a/packages/theme/styles/_lumia-colors.scss
+++ b/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;
 }
diff --git a/plugins/chunter-resources/src/components/ChannelHeader.svelte b/plugins/chunter-resources/src/components/ChannelHeader.svelte
index b601edd911..3802f07f6c 100644
--- a/plugins/chunter-resources/src/components/ChannelHeader.svelte
+++ b/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}
diff --git a/plugins/chunter-resources/src/components/ChannelMembers.svelte b/plugins/chunter-resources/src/components/ChannelMembers.svelte
index 2a86c8dc52..5796ec86ed 100644
--- a/plugins/chunter-resources/src/components/ChannelMembers.svelte
+++ b/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
diff --git a/plugins/chunter-resources/src/components/DirectIcon.svelte b/plugins/chunter-resources/src/components/DirectIcon.svelte
index dd3fd19108..53af0fca95 100644
--- a/plugins/chunter-resources/src/components/DirectIcon.svelte
+++ b/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,6 +44,10 @@
   $: 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}
@@ -48,7 +55,14 @@
 {/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'}
diff --git a/plugins/chunter-resources/src/components/chat/ChannelAside.svelte b/plugins/chunter-resources/src/components/chat/ChannelAside.svelte
index 4c3947502d..1ead45d395 100644
--- a/plugins/chunter-resources/src/components/chat/ChannelAside.svelte
+++ b/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>[]) => {
diff --git a/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte b/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
index 0fd678409e..fdfa5cda42 100644
--- a/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
+++ b/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>[]) => {
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte
index 7a798e377e..06d1530093 100644
--- a/plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte
+++ b/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}
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatNavSection.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatNavSection.svelte
index df39746123..2709ad133c 100644
--- a/plugins/chunter-resources/src/components/chat/navigator/ChatNavSection.svelte
+++ b/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
diff --git a/plugins/chunter-resources/src/components/chat/types.ts b/plugins/chunter-resources/src/components/chat/types.ts
index 0622e05947..f959aae816 100644
--- a/plugins/chunter-resources/src/components/chat/types.ts
+++ b/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
 }
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index aceca3b95f..812e541ca9 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/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,6 +209,11 @@
         <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}
 
@@ -192,7 +221,6 @@
   .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>
diff --git a/plugins/contact-resources/src/components/SelectUsersPopup.svelte b/plugins/contact-resources/src/components/SelectUsersPopup.svelte
index ddcc8dccdc..ff1f3fe5b8 100644
--- a/plugins/contact-resources/src/components/SelectUsersPopup.svelte
+++ b/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>
diff --git a/plugins/contact-resources/src/components/UserDetails.svelte b/plugins/contact-resources/src/components/UserDetails.svelte
index 1cef5c0161..5ecdd8a764 100644
--- a/plugins/contact-resources/src/components/UserDetails.svelte
+++ b/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>
diff --git a/plugins/contact-resources/src/components/UsersList.svelte b/plugins/contact-resources/src/components/UsersList.svelte
index b6c5e9582c..dbbaca8854 100644
--- a/plugins/contact-resources/src/components/UsersList.svelte
+++ b/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}
diff --git a/plugins/view-resources/src/components/UserStatus.svelte b/plugins/view-resources/src/components/UserStatus.svelte
new file mode 100644
index 0000000000..0568ebdabc
--- /dev/null
+++ b/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>
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index 8dfc79101c..2aa394deef 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -93,6 +93,7 @@ import ViewletContentView from './components/ViewletContentView.svelte'
 import ViewletSettingButton from './components/ViewletSettingButton.svelte'
 import DocReferencePresenter from './components/DocReferencePresenter.svelte'
 import ObjectIcon from './components/ObjectIcon.svelte'
+import UserStatus from './components/UserStatus.svelte'
 
 import {
   afterResult,
@@ -205,7 +206,8 @@ export {
   ViewletContentView,
   ViewletSettingButton,
   DocReferencePresenter,
-  ObjectIcon
+  ObjectIcon,
+  UserStatus
 }
 
 function PositionElementAlignment (e?: Event): PopupAlignment | undefined {
diff --git a/server/ws/src/server.ts b/server/ws/src/server.ts
index cb4cd5ae64..f1e061eaa0 100644
--- a/server/ws/src/server.ts
+++ b/server/ws/src/server.ts
@@ -23,8 +23,6 @@ import core, {
   versionToString,
   type BaseWorkspaceInfo,
   type MeasureContext,
-  type Ref,
-  type Space,
   type Tx,
   type TxWorkspaceEvent,
   type WorkspaceId
@@ -524,7 +522,7 @@ class TSessionManager implements SessionManager {
       const status = (await session.findAll(ctx, core.class.UserStatus, { user: user._id }, { limit: 1 }))[0]
       const txFactory = new TxFactory(user._id, true)
       if (status === undefined) {
-        const tx = txFactory.createTxCreateDoc(core.class.UserStatus, user._id as string as Ref<Space>, {
+        const tx = txFactory.createTxCreateDoc(core.class.UserStatus, core.space.Space, {
           online,
           user: user._id
         })

From 72a8d136c742f42a0485efca88dbf31e809c7118 Mon Sep 17 00:00:00 2001
From: Kristina Fefelova <kristin.fefelova@gmail.com>
Date: Tue, 23 Apr 2024 20:18:42 +0400
Subject: [PATCH 2/3] Fix typo

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 plugins/contact-resources/src/components/Avatar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index 812e541ca9..0a0a1901f8 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/plugins/contact-resources/src/components/Avatar.svelte
@@ -395,7 +395,7 @@
 
   .status {
     position: absolute;
-    bottom: -0.125ren;
+    bottom: -0.125rem;
     right: -0.25rem;
   }
 </style>

From fdf9f8f0a430b143b716e1263af12c89ac7df990 Mon Sep 17 00:00:00 2001
From: Kristina Fefelova <kristin.fefelova@gmail.com>
Date: Tue, 23 Apr 2024 20:41:22 +0400
Subject: [PATCH 3/3] User global store for statuses

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 .../src/components/Avatar.svelte              |  2 +-
 .../src/components/UserStatus.svelte          | 24 +++++++------------
 plugins/contact-resources/src/utils.ts        | 16 +++++++++++--
 plugins/view-resources/src/index.ts           |  4 +---
 4 files changed, 25 insertions(+), 21 deletions(-)
 rename plugins/{view-resources => contact-resources}/src/components/UserStatus.svelte (79%)

diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index 0a0a1901f8..d561452494 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/plugins/contact-resources/src/components/Avatar.svelte
@@ -46,10 +46,10 @@
     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'
+  import UserStatus from './UserStatus.svelte'
 
   export let avatar: string | null | undefined = undefined
   export let name: string | null | undefined = undefined
diff --git a/plugins/view-resources/src/components/UserStatus.svelte b/plugins/contact-resources/src/components/UserStatus.svelte
similarity index 79%
rename from plugins/view-resources/src/components/UserStatus.svelte
rename to plugins/contact-resources/src/components/UserStatus.svelte
index 0568ebdabc..fc423c1158 100644
--- a/plugins/view-resources/src/components/UserStatus.svelte
+++ b/plugins/contact-resources/src/components/UserStatus.svelte
@@ -13,33 +13,27 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createQuery } from '@hcengineering/presentation'
-  import core, { Account, Ref, UserStatus } from '@hcengineering/core'
+  import { Account, Ref } from '@hcengineering/core'
+  import { onMount } from 'svelte'
+  import { loadUsersStatus, statusByUserStore } from '../utils'
 
   export let user: Ref<Account>
   export let size: 'small' | 'medium' = 'small'
   export let background: string = 'red'
 
-  const query = createQuery()
+  onMount(() => {
+    loadUsersStatus()
+  })
 
-  let status: UserStatus | undefined = undefined
-
-  $: query.query(
-    core.class.UserStatus,
-    { user },
-    (res) => {
-      status = res[0]
-    },
-    { limit: 1 }
-  )
+  $: userStatus = $statusByUserStore.get(user)
 </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}
+    class:online={userStatus?.online}
+    class:offline={!userStatus?.online}
   />
 </div>
 
diff --git a/plugins/contact-resources/src/utils.ts b/plugins/contact-resources/src/utils.ts
index d156b3f70a..855aed6cfa 100644
--- a/plugins/contact-resources/src/utils.ts
+++ b/plugins/contact-resources/src/utils.ts
@@ -28,7 +28,7 @@ import {
   type Person,
   type PersonAccount
 } from '@hcengineering/contact'
-import {
+import core, {
   getCurrentAccount,
   toIdMap,
   type Class,
@@ -38,7 +38,9 @@ import {
   type ObjQueryType,
   type Ref,
   type Timestamp,
-  type TxOperations
+  type TxOperations,
+  type Account,
+  type UserStatus
 } from '@hcengineering/core'
 import notification, { type DocNotifyContext, type InboxNotification } from '@hcengineering/notification'
 import { getEmbeddedLabel, getResource, translate } from '@hcengineering/platform'
@@ -294,6 +296,8 @@ export const channelProviders = writable<ChannelProvider[]>([])
 
 export const personAccountPersonByIdStore = writable<IdMap<Person>>(new Map())
 
+export const statusByUserStore = writable<Map<Ref<Account>, UserStatus>>(new Map())
+
 export const personByIdStore = derived([personAccountPersonByIdStore, employeeByIdStore], (vals) => {
   const m1 = Array.from(vals[0].entries())
   const m2 = Array.from(vals[1].entries())
@@ -340,6 +344,14 @@ function fillStores (): void {
 
 fillStores()
 
+const userStatusesQuery = createQuery(true)
+
+export function loadUsersStatus (): void {
+  userStatusesQuery.query(core.class.UserStatus, {}, (res) => {
+    statusByUserStore.set(new Map(res.map((it) => [it.user, it])))
+  })
+}
+
 export function getAvatarTypeDropdownItems (hasGravatar: boolean, imageOnly?: boolean): TabItem[] {
   if (imageOnly === true) {
     return [
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index 2aa394deef..8dfc79101c 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -93,7 +93,6 @@ import ViewletContentView from './components/ViewletContentView.svelte'
 import ViewletSettingButton from './components/ViewletSettingButton.svelte'
 import DocReferencePresenter from './components/DocReferencePresenter.svelte'
 import ObjectIcon from './components/ObjectIcon.svelte'
-import UserStatus from './components/UserStatus.svelte'
 
 import {
   afterResult,
@@ -206,8 +205,7 @@ export {
   ViewletContentView,
   ViewletSettingButton,
   DocReferencePresenter,
-  ObjectIcon,
-  UserStatus
+  ObjectIcon
 }
 
 function PositionElementAlignment (e?: Event): PopupAlignment | undefined {