Inbox UI & chat fixes (#9165)

Signed-off-by: Kristina Fefelova <[email protected]>

Author: kristina-fefelova

common/config/rush/pnpm-lock.yaml

@@ -66,7 +66,6 @@
   "dependencies": {
     "@hcengineering/platform": "^0.6.11",
     "@hcengineering/ui": "^0.6.15",
-    "@hcengineering/ui-next": "^0.6.0",
     "@hcengineering/theme": "^0.6.5",
     "@hcengineering/login": "^0.6.12",
     "@hcengineering/login-assets": "^0.6.0",

desktop/package.json

@@ -2,7 +2,7 @@ import { getPersonBySocialId, formatName } from '@hcengineering/contact'
 import { Ref, TxOperations } from '@hcengineering/core'
 import notification, { DocNotifyContext, CommonInboxNotification, ActivityInboxNotification, InboxNotification } from '@hcengineering/notification'
 import { IntlString, addEventListener, translate } from '@hcengineering/platform'
-import { getClient } from '@hcengineering/presentation'
+import { getClient, createNotificationsQuery } from '@hcengineering/presentation'
 import { location } from '@hcengineering/ui'
 import workbench, { workbenchId } from '@hcengineering/workbench'
 import desktopPreferences, { defaultNotificationPreference } from '@hcengineering/desktop-preferences'
@@ -13,6 +13,8 @@ import { IPCMainExposed } from './types'
 
 let client: TxOperations
 
+const notificationsQuery = createNotificationsQuery()
+
 async function hydrateNotificationAsYouCan (lastNotification: InboxNotification): Promise<{ title: string, body: string } | undefined> {
   // Let's try to do our best and figure out from who we have an notification
 
@@ -114,13 +116,19 @@ export function configureNotifications (): void {
   // because we generate them on a client
   let initTimestamp = 0
   const notificationHistory = new Map<string, number>()
+  let newUnreadNotifications = 0
 
   addEventListener(workbench.event.NotifyConnection, async () => {
     client = getClient()
     const electronAPI: IPCMainExposed = (window as any).electron
 
     const inboxClient = InboxNotificationsClientImpl.getClient()
 
+    notificationsQuery.query({ read: false, limit: 1000 }, res => {
+      newUnreadNotifications = res.getResult().length
+      electronAPI.setBadge(prevUnViewdNotificationsCount + newUnreadNotifications)
+    })
+
     async function handleNotifications (notificationsByContext: Map<Ref<DocNotifyContext>, InboxNotification[]>): Promise<void> {
       const inboxData = await getDisplayInboxData(notificationsByContext)
 
@@ -138,7 +146,7 @@ export function configureNotifications (): void {
 
       if (prevUnViewdNotificationsCount !== unViewedNotifications.length) {
         if (preferences.showUnreadCounter) {
-          electronAPI.setBadge(unViewedNotifications.length)
+          electronAPI.setBadge(unViewedNotifications.length + newUnreadNotifications)
         }
         if (preferences.bounceAppIcon) {
           electronAPI.dockBounce()
@@ -179,7 +187,7 @@ export function configureNotifications (): void {
         electronAPI.setBadge(0)
       }
       if (!preferences.showUnreadCounter && newPreferences.showUnreadCounter) {
-        electronAPI.setBadge(prevUnViewdNotificationsCount)
+        electronAPI.setBadge(prevUnViewdNotificationsCount + newUnreadNotifications)
       }
       preferences = newPreferences
     })

desktop/src/ui/notifications.ts

@@ -56,7 +56,6 @@ import { timeId } from '@hcengineering/time'
 import tracker, { trackerId } from '@hcengineering/tracker'
 import { trainingId } from '@hcengineering/training'
 import uiPlugin, { getCurrentLocation, locationStorageKeyId, navigate, setLocationStorageKey } from '@hcengineering/ui'
-import { uiNextId } from '@hcengineering/ui-next'
 import { mediaId } from '@hcengineering/media'
 import { uploaderId } from '@hcengineering/uploader'
 import recorder, { recorderId } from '@hcengineering/recorder'
@@ -160,7 +159,6 @@ function configureI18n (): void {
   )
   addStringsLoader(textEditorId, async (lang: string) => await import(`@hcengineering/text-editor-assets/lang/${lang}.json`))
   addStringsLoader(uiId, async (lang: string) => await import(`@hcengineering/ui/lang/${lang}.json`))
-  addStringsLoader(uiNextId, async (lang: string) => await import(`@hcengineering/ui-next/lang/${lang}.json`))
   addStringsLoader(mediaId, async (lang: string) => await import(`@hcengineering/media-assets/lang/${lang}.json`))
   addStringsLoader(uploaderId, async (lang: string) => await import(`@hcengineering/uploader-assets/lang/${lang}.json`))
   addStringsLoader(recorderId, async (lang: string) => await import(`@hcengineering/recorder-assets/lang/${lang}.json`))

desktop/src/ui/platform.ts

@@ -254,7 +254,6 @@
     "@hcengineering/training-assets": "^0.1.0",
     "@hcengineering/training-resources": "^0.1.0",
     "@hcengineering/ui": "^0.6.15",
-    "@hcengineering/ui-next": "^0.6.0",
     "@hcengineering/media": "^0.6.0",
     "@hcengineering/media-assets": "^0.6.0",
     "@hcengineering/media-resources": "^0.6.0",

dev/prod/package.json

@@ -63,7 +63,6 @@ import { timeId } from '@hcengineering/time'
 import tracker, { trackerId } from '@hcengineering/tracker'
 import { trainingId } from '@hcengineering/training'
 import uiPlugin from '@hcengineering/ui'
-import {uiNextId} from '@hcengineering/ui-next'
 import { uploaderId } from '@hcengineering/uploader'
 import { mediaId } from '@hcengineering/media'
 import recorder, { recorderId } from '@hcengineering/recorder'
@@ -281,7 +280,6 @@ function configureI18n(): void {
     async (lang: string) => await import(`@hcengineering/text-editor-assets/lang/${lang}.json`)
   )
   addStringsLoader(uiId, async (lang: string) => await import(`@hcengineering/ui/lang/${lang}.json`))
-  addStringsLoader(uiNextId, async (lang: string) => await import(`@hcengineering/ui-next/lang/${lang}.json`))
   addStringsLoader(uploaderId, async (lang: string) => await import(`@hcengineering/uploader-assets/lang/${lang}.json`))
   addStringsLoader(recorderId, async (lang: string) => await import(`@hcengineering/recorder-assets/lang/${lang}.json`))
   addStringsLoader(mediaId, async (lang: string) => await import(`@hcengineering/media-assets/lang/${lang}.json`))

dev/prod/src/platform.ts

@@ -44,9 +44,9 @@
     "@hcengineering/client": "^0.6.18",
     "@hcengineering/contact": "^0.6.24",
     "@hcengineering/collaborator-client": "^0.6.4",
-    "@hcengineering/communication-client-query": "0.1.194",
-    "@hcengineering/communication-sdk-types": "0.1.194",
-    "@hcengineering/communication-types": "0.1.194",
+    "@hcengineering/communication-client-query": "0.1.195",
+    "@hcengineering/communication-sdk-types": "0.1.195",
+    "@hcengineering/communication-types": "0.1.195",
     "@hcengineering/core": "^0.6.32",
     "@hcengineering/diffview": "^0.6.0",
     "@hcengineering/notification": "^0.6.23",

packages/presentation/package.json

@@ -23,6 +23,7 @@
   export let width: number
   export let height: number
   export let responsive: boolean = false
+  export let loading: 'lazy' | 'eager' = 'eager'
 
   let blobSrc: { src: string, srcset: string } | undefined
 
@@ -37,6 +38,7 @@
   {alt}
   width={responsive ? '100%' : width}
   height={responsive ? '100%' : height}
+  {loading}
   {fit}
   on:load
   on:error

packages/presentation/src/components/Image.svelte

@@ -13,12 +13,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { markupToJSON } from '@hcengineering/text'
+  import { MarkupNode, markupToJSON } from '@hcengineering/text'
+  import { Markup } from '@hcengineering/core'
   import LiteNode from './markup/lite/LiteNode.svelte'
 
-  export let message: string
+  export let message: Markup | MarkupNode
 
-  $: node = markupToJSON(message)
+  $: node = typeof message === 'string' ? markupToJSON(message) : message
 </script>
 
 <div class="text-markup-view">

packages/presentation/src/components/LiteMessageViewer.svelte

@@ -13,15 +13,20 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class, Doc, Ref } from '@hcengineering/core'
+  import { Blob, Class, Doc, Ref } from '@hcengineering/core'
   import { AttrValue, MarkupNode, MarkupNodeType, MarkupMarkType } from '@hcengineering/text'
 
   import LiteNodes from './LiteNodes.svelte'
   import ObjectNode from '../ObjectNode.svelte'
   import NodeMarks from '../NodeMarks.svelte'
+  import { getBlobRef } from '../../../preview'
 
   export let node: MarkupNode
 
+  function toRefBlob (blobId: AttrValue): Ref<Blob> {
+    return blobId as Ref<Blob>
+  }
+
   function toRef (objectId: string): Ref<Doc> {
     return objectId as Ref<Doc>
   }
@@ -36,14 +41,6 @@
   function toString (value: AttrValue | undefined): string | undefined {
     return value != null ? `${value}` : undefined
   }
-
-  function toNumber (value: AttrValue | undefined): number | undefined {
-    if (typeof value === 'boolean') {
-      return value ? 1 : 0
-    }
-
-    return value != null ? (typeof value === 'string' ? parseInt(value) : value) : undefined
-  }
 </script>
 
 {#if node}
@@ -85,6 +82,18 @@
     {:else}
       <LiteNodes {nodes} />
     {/if}
+  {:else if node.type === MarkupNodeType.emoji}
+    <span class="emoji">
+      {#if node.attrs?.kind === 'image'}
+        {@const blob = toRefBlob(attrs.image)}
+        {@const alt = toString(attrs.emoji)}
+        {#await getBlobRef(blob) then blobSrc}
+          <img src={blobSrc.src} {alt} />
+        {/await}
+      {:else}
+        {node.attrs?.emoji}
+      {/if}
+    </span>
   {:else if node.type === MarkupNodeType.taskList}
     <!-- TODO not implemented -->
   {:else if node.type === MarkupNodeType.taskItem}