UBERF-4360: rewrite chat (#4265)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

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

@@ -0,0 +1,41 @@
+<!--
+// Copyright © 2023 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 { type AnySvelteComponent, Icon, IconSize } from '@hcengineering/ui'
+  import { getClient } from '@hcengineering/presentation'
+  import { Doc } from '@hcengineering/core'
+  import { Asset } from '@hcengineering/platform'
+
+  import { classIcon, getDocLinkTitle } from '../utils'
+
+  export let object: Doc | undefined = undefined
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let size: IconSize = 'small'
+
+  const client = getClient()
+</script>
+
+{#if object}
+  {@const objectIcon = icon ?? classIcon(client, object._class)}
+  <div class="flex-presenter">
+    {#if objectIcon}
+      <Icon icon={objectIcon} {size} />
+      <div class="mr-4" />
+    {/if}
+    {#await getDocLinkTitle(client, object._id, object._class, object) then title}
+      {title}
+    {/await}
+  </div>
+{/if}

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

@@ -16,18 +16,28 @@
   import { Doc, Mixin } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
   import setting from '@hcengineering/setting'
+
   import ClassAttributeBar from './ClassAttributeBar.svelte'
 
   export let object: Doc
   export let mixins: Array<Mixin<Doc>> = []
   export let ignoreKeys: string[]
   export let allowedCollections: string[] = []
+  export let showHeader: boolean = true
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
 </script>
 
-<ClassAttributeBar _class={object._class} {object} {ignoreKeys} to={undefined} {allowedCollections} on:update />
+<ClassAttributeBar
+  _class={object._class}
+  {object}
+  {ignoreKeys}
+  to={undefined}
+  {allowedCollections}
+  {showHeader}
+  on:update
+/>
 {#each mixins as mixin}
   {@const to = !hierarchy.hasMixin(mixin, setting.mixin.UserMixin) ? object._class : mixin.extends}
   {#if !hierarchy.hasMixin(mixin, setting.mixin.Editable) || hierarchy.as(mixin, setting.mixin.Editable).value}
@@ -38,6 +48,7 @@
         {ignoreKeys}
         {to}
         {allowedCollections}
+        {showHeader}
         on:update
       />
     {/key}

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

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { createEventDispatcher, onDestroy } from 'svelte'
-  import core, { Class, ClassifierKind, Doc, Mixin, Ref } from '@hcengineering/core'
+  import { Class, Doc, Mixin, Ref } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
   import { Panel } from '@hcengineering/panel'
   import { getResource } from '@hcengineering/platform'
@@ -33,7 +33,7 @@
   import { AnyComponent, Button, Component, IconMixin, IconMoreH, showPopup } from '@hcengineering/ui'
   import view from '@hcengineering/view'
 
-  import { ContextMenu, ParentsNavigator, DocNavLink, getDocLabel } from '..'
+  import { ContextMenu, ParentsNavigator, DocNavLink, getDocLabel, getDocMixins } from '..'
   import { categorizeFields, getCollectionCounter, getFiltredKeys } from '../utils'
   import DocAttributeBar from './DocAttributeBar.svelte'
 
@@ -47,22 +47,22 @@
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
-  const notificationClient = getResource(notification.function.GetNotificationClient).then((res) => res())
+  const inboxClient = getResource(notification.function.GetInboxNotificationsClient).then((res) => res())
 
   $: read(_id)
   function read (_id: Ref<Doc>) {
     if (lastId !== _id) {
       const prev = lastId
       lastId = _id
-      notificationClient.then(async (client) => {
-        await client.read(prev)
+      inboxClient.then(async (client) => {
+        await client.readDoc(prev)
       })
     }
   }
 
   onDestroy(async () => {
-    await notificationClient.then(async (client) => {
-      await client.read(_id)
+    await inboxClient.then(async (client) => {
+      await client.readDoc(_id)
     })
   })
 
@@ -93,28 +93,12 @@
   let fieldEditors: Array<{ key: KeyedAttribute, editor: AnyComponent, category: AttributeCategory }> = []
 
   let mixins: Array<Mixin<Doc>> = []
-
   let showAllMixins = false
 
+  $: mixins = getDocMixins(object, showAllMixins, ignoreMixins, realObjectClass)
+
   const dispatch = createEventDispatcher()
 
-  function getMixins (object: Doc, showAllMixins: boolean): void {
-    if (object === undefined) return
-    const descendants = hierarchy.getDescendants(core.class.Doc).map((p) => hierarchy.getClass(p))
-
-    mixins = descendants.filter(
-      (m) =>
-        m.kind === ClassifierKind.MIXIN &&
-        !ignoreMixins.has(m._id) &&
-        (hierarchy.hasMixin(object, m._id) ||
-          (showAllMixins &&
-            hierarchy.isDerived(realObjectClass, hierarchy.getBaseClass(m._id)) &&
-            (m.extends && hierarchy.isMixin(m.extends) ? hierarchy.hasMixin(object, m.extends) : true)))
-    )
-  }
-
-  $: getMixins(object, showAllMixins)
-
   let ignoreKeys: string[] = []
   let activityOptions = { enabled: true, showInput: true }
   let allowedCollections: string[] = []
@@ -255,7 +239,7 @@
     allowedCollections = ev.detail.allowedCollections ?? []
     collectionArrays = ev.detail.collectionArrays ?? []
     title = ev.detail.title
-    getMixins(object, showAllMixins)
+    mixins = getDocMixins(object, showAllMixins, ignoreMixins, realObjectClass)
     updateKeys()
   }
 

plugins/view-resources/src/components/navigator/TreeElement.svelte

@@ -45,6 +45,7 @@
   export let collapsed: boolean = getTreeCollapsed(_id)
   export let selected: boolean = false
   export let bold: boolean = false
+  export let showNotify: boolean = false
   export let actions: (originalEvent?: MouseEvent) => Promise<Action[]> = async () => []
 
   let hovered = false
@@ -75,7 +76,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="antiNav-element"
+  class="antiNav-element relative"
   class:selected
   class:hovered
   class:parent
@@ -86,6 +87,9 @@
     dispatch('click')
   }}
 >
+  {#if showNotify}
+    <div class="notify" />
+  {/if}
   {#if icon && !node}
     <div class="an-element__icon" class:folder>
       <Icon {icon} {iconProps} size={'small'} />
@@ -143,3 +147,15 @@
 {#if parent && !collapsed}
   <div class="antiNav-element__dropbox"><slot /></div>
 {/if}
+
+<style lang="scss">
+  .notify {
+    position: absolute;
+    top: 0.5rem;
+    left: 1.5rem;
+    height: 0.5rem;
+    width: 0.5rem;
+    background-color: var(--theme-inbox-notify);
+    border-radius: 50%;
+  }
+</style>

plugins/view-resources/src/components/navigator/TreeItem.svelte

@@ -17,15 +17,31 @@
   import type { Asset } from '@hcengineering/platform'
   import type { Action } from '@hcengineering/ui'
   import TreeElement from './TreeElement.svelte'
+  import { AnySvelteComponent } from '@hcengineering/ui'
 
   export let _id: Ref<Doc>
-  export let icon: Asset | undefined = undefined
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let iconProps: Record<string, any> | undefined = undefined
   export let title: string
   export let notifications = 0
   export let actions: (originalEvent?: MouseEvent) => Promise<Action[]> = async () => []
   export let selected: boolean = false
   export let bold: boolean = false
   export let indent: boolean = false
+  export let showNotify: boolean = false
 </script>
 
-<TreeElement {_id} {icon} {title} {notifications} {selected} {actions} {bold} {indent} collapsed on:click />
+<TreeElement
+  {_id}
+  {icon}
+  {title}
+  {notifications}
+  {selected}
+  {actions}
+  {iconProps}
+  {bold}
+  {indent}
+  {showNotify}
+  collapsed
+  on:click
+/>