Fix doc aside in chat (#5006)

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

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

@@ -364,10 +364,15 @@
     }
   }
 
-  $: void initializeScroll($isLoadingStore, separatorElement, $newTimestampStore)
+  $: newTimestamp = $newTimestampStore
+  $: separatorIndex =
+    newTimestamp !== undefined
+      ? displayMessages.findIndex((message) => (message.createdOn ?? 0) >= (newTimestamp ?? 0))
+      : -1
+  $: void initializeScroll($isLoadingStore, separatorElement, separatorIndex)
 
   let isInitialScrolling = true
-  async function initializeScroll (isLoading: boolean, separatorElement?: HTMLDivElement, newTimestamp?: Timestamp) {
+  async function initializeScroll (isLoading: boolean, separatorElement?: HTMLDivElement, separatorIndex?: number) {
     if (isLoading || isScrollInitialized) {
       return
     }
@@ -379,7 +384,7 @@
       await wait()
       scrollToMessage()
       isInitialScrolling = false
-    } else if (newTimestamp === undefined) {
+    } else if (separatorIndex === -1) {
       isScrollInitialized = true
       shouldWaitAndRead = true
       autoscroll = true
@@ -564,10 +569,10 @@
       {/if}
       <slot name="header" />
 
-      {#each displayMessages as message (message._id)}
+      {#each displayMessages as message, index (message._id)}
         {@const isSelected = message._id === selectedMessageId}
 
-        {#if message.createdOn === $newTimestampStore}
+        {#if separatorIndex === index}
           <ActivityMessagesSeparator bind:element={separatorElement} label={activity.string.New} />
         {/if}
 

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

@@ -47,14 +47,10 @@
   $: withAside =
     !embedded && !isThreadOpened && !hierarchy.isDerived(context.attachedToClass, chunter.class.DirectMessage)
 
-  function toChannel (object?: Doc) {
+  function toChannel (object?: Doc): Channel | undefined {
     return object as Channel | undefined
   }
 
-  function toChannelRef (ref: Ref<Doc>) {
-    return ref as Ref<Channel>
-  }
-
   defineSeparators('aside', panelSeparators)
 </script>
 
@@ -87,13 +83,9 @@
         <Separator name="aside" float index={0} />
         <div class="antiPanel-wrap__content">
           {#if hierarchy.isDerived(context.attachedToClass, chunter.class.Channel)}
-            <ChannelAside
-              _id={toChannelRef(context.attachedTo)}
-              _class={context.attachedToClass}
-              object={toChannel(object)}
-            />
+            <ChannelAside _class={context.attachedToClass} object={toChannel(object)} />
           {:else}
-            <DocAside _id={context.attachedTo} _class={context.attachedToClass} {object} />
+            <DocAside _class={context.attachedToClass} {object} />
           {/if}
         </div>
       </div>

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

@@ -25,7 +25,6 @@
   import DocAside from './DocAside.svelte'
   import { joinChannel, leaveChannel } from '../../utils'
 
-  export let _id: Ref<ChunterSpace>
   export let _class: Ref<Class<ChunterSpace>>
   export let object: ChunterSpace | undefined
 
@@ -116,7 +115,7 @@
   }
 </script>
 
-<DocAside {_id} {_class} {object}>
+<DocAside {_class} {object}>
   {#if object && creatorPersonRef}
     <div class="popupPanel-body__aside-grid" style:margin-top="0">
       <span

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

@@ -14,13 +14,18 @@
 -->
 <script lang="ts">
   import { Class, Doc, Mixin, Ref } from '@hcengineering/core'
-  import { getClient } from '@hcengineering/presentation'
-  import { Label, Scroller } from '@hcengineering/ui'
-  import { DocAttributeBar, DocNavLink, getDocLinkTitle, getDocMixins } from '@hcengineering/view-resources'
+  import {
+    AttributeBarEditor,
+    getClient,
+    getFiltredKeys,
+    isCollectionAttr,
+    KeyedAttribute
+  } from '@hcengineering/presentation'
+  import { Scroller } from '@hcengineering/ui'
+  import { ClassAttributeBar, getDocMixins } from '@hcengineering/view-resources'
 
   import chunter from '../../plugin'
 
-  export let _id: Ref<Doc>
   export let _class: Ref<Class<Doc>>
   export let object: Doc | undefined
 
@@ -28,41 +33,53 @@
   const hierarchy = client.getHierarchy()
 
   let mixins: Array<Mixin<Doc>> = []
-  let objectLinkTitle: string | undefined = undefined
 
-  $: clazz = hierarchy.getClass(_class)
   $: objectChatPanel = hierarchy.classHierarchyMixin(_class, chunter.mixin.ObjectChatPanel)
 
   $: mixins = object ? getDocMixins(object) : []
 
-  $: getDocLinkTitle(client, _id, _class, object).then((res) => {
-    objectLinkTitle = res
-  })
+  function getMixinKeys (mixin: Ref<Mixin<Doc>>): KeyedAttribute[] {
+    if (object === undefined) return []
+
+    const mixinClass = hierarchy.getClass(mixin)
+    const filtredKeys = getFiltredKeys(
+      hierarchy,
+      mixin,
+      objectChatPanel?.ignoreKeys ?? [],
+      hierarchy.isMixin(mixinClass.extends as Ref<Class<Doc>>) ? mixinClass.extends : object._class
+    )
+    return filtredKeys.filter((key) => !isCollectionAttr(hierarchy, key))
+  }
 </script>
 
 <Scroller>
   {#if object}
-    <DocAttributeBar {object} {mixins} ignoreKeys={objectChatPanel?.ignoreKeys ?? []} showHeader={false} />
+    <ClassAttributeBar
+      _class={object._class}
+      {object}
+      ignoreKeys={objectChatPanel?.ignoreKeys ?? []}
+      showHeader={false}
+      readonly={false}
+      on:update
+    />
+    <div class="popupPanel-body__aside-grid">
+      {#each mixins as mixin}
+        {@const mixinKeys = getMixinKeys(mixin._id)}
+        {#if mixinKeys.length}
+          <div class="divider" />
+          {#each mixinKeys as key (typeof key === 'string' ? key : key.key)}
+            <AttributeBarEditor
+              {key}
+              _class={mixin._id}
+              readonly={false}
+              object={hierarchy.as(object, mixin._id)}
+              showHeader={true}
+              size={'medium'}
+            />
+          {/each}
+        {/if}
+      {/each}
+    </div>
   {/if}
   <slot />
 </Scroller>
-
-<style lang="scss">
-  .header {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    flex-shrink: 0;
-    margin: 0.75rem;
-    padding: 0 0.75rem;
-    color: var(--theme-content-color);
-    margin-bottom: 0;
-  }
-
-  .identifier {
-    display: flex;
-    gap: 0.25rem;
-    color: var(--theme-halfcontent-color);
-    font-size: 0.75rem;
-  }
-</style>