From f2c961c5d5d00a7ca923dbfe9d6abcb0ecb195c9 Mon Sep 17 00:00:00 2001
From: Kristina <kristin.fefelova@gmail.com>
Date: Fri, 20 Sep 2024 19:07:04 +0400
Subject: [PATCH] [Part 2]: Sidebar and chat fixes (#6656)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 models/activity/src/index.ts                  |  3 +
 models/chunter/src/types.ts                   |  5 +-
 packages/theme/styles/components.scss         |  1 +
 packages/ui/src/components/Header.svelte      | 11 ++-
 packages/ui/src/components/ModernTab.svelte   |  1 +
 packages/ui/src/types.ts                      |  1 +
 .../ActivityMessageTemplate.svelte            |  4 ++
 plugins/activity/src/index.ts                 |  2 +
 .../components/CalendarWidgetHeader.svelte    |  1 +
 .../src/components/Channel.svelte             |  2 +
 .../src/components/ChannelHeader.svelte       |  2 +
 .../src/components/ChannelScrollView.svelte   | 70 ++++++++++++-------
 .../src/components/ChannelSidebarView.svelte  | 12 +++-
 .../src/components/ChannelView.svelte         |  2 +-
 .../src/components/ChatWidget.svelte          | 11 +--
 .../src/components/ChatWidgetTab.svelte       |  2 +-
 .../src/components/Header.svelte              |  2 +
 .../src/components/JumpToDateSelector.svelte  | 12 ++--
 .../chat-message/ChatMessageHeader.svelte     |  5 --
 .../chat-message/ChatMessagePresenter.svelte  |  2 +-
 .../chat/create/CreateDirectChat.svelte       |  2 +-
 .../threads/ThreadSidebarView.svelte          |  2 +-
 .../src/components/threads/ThreadView.svelte  | 30 ++++++--
 plugins/chunter-resources/src/index.ts        |  4 +-
 plugins/chunter-resources/src/navigation.ts   | 45 +++++++-----
 plugins/chunter-resources/src/utils.ts        | 13 ++--
 plugins/chunter/src/index.ts                  |  4 +-
 .../src/components/inbox/Inbox.svelte         |  7 ++
 plugins/notification-resources/src/utils.ts   | 13 +++-
 .../components/sidebar/SidebarExpanded.svelte |  2 +
 plugins/workbench-resources/src/sidebar.ts    |  7 +-
 31 files changed, 185 insertions(+), 95 deletions(-)

diff --git a/models/activity/src/index.ts b/models/activity/src/index.ts
index 14d804a652..c14f33b646 100644
--- a/models/activity/src/index.ts
+++ b/models/activity/src/index.ts
@@ -152,6 +152,9 @@ export class TActivityReference extends TActivityMessage implements ActivityRefe
   @Prop(TypeMarkup(), activity.string.Message)
   @Index(IndexKind.FullText)
     message!: string
+
+  @Prop(TypeTimestamp(), activity.string.Edit)
+    editedOn?: Timestamp
 }
 
 @Model(activity.class.ActivityInfoMessage, activity.class.ActivityMessage)
diff --git a/models/chunter/src/types.ts b/models/chunter/src/types.ts
index c24f2e086e..bfe87f2bf9 100644
--- a/models/chunter/src/types.ts
+++ b/models/chunter/src/types.ts
@@ -22,7 +22,6 @@ import {
   TypeMarkup,
   TypeRef,
   TypeString,
-  TypeTimestamp,
   UX
 } from '@hcengineering/model'
 import core, { TAttachedDoc, TClass, TDoc, TSpace } from '@hcengineering/model-core'
@@ -59,6 +58,7 @@ import type { DocNotifyContext } from '@hcengineering/notification'
 import chunter from './plugin'
 
 export const DOMAIN_CHUNTER = 'chunter' as Domain
+
 @Model(chunter.class.ChunterSpace, core.class.Space)
 export class TChunterSpace extends TSpace implements ChunterSpace {
   @Prop(PropCollection(activity.class.ActivityMessage), chunter.string.Messages)
@@ -84,9 +84,6 @@ export class TChatMessage extends TActivityMessage implements ChatMessage {
   @Index(IndexKind.FullText)
     message!: string
 
-  @Prop(TypeTimestamp(), chunter.string.Edit)
-    editedOn?: Timestamp
-
   @Prop(PropCollection(attachment.class.Attachment), attachment.string.Attachments, {
     shortLabel: attachment.string.Files
   })
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 72607215e4..162151088a 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -321,6 +321,7 @@
   width: 100%;
   min-width: 0;
   min-height: var(--spacing-6_5);
+  overflow: hidden;
   
   &.clearPadding > .hulyHeader-row {
     padding: 0;
diff --git a/packages/ui/src/components/Header.svelte b/packages/ui/src/components/Header.svelte
index 250b517774..edf9ae97d5 100644
--- a/packages/ui/src/components/Header.svelte
+++ b/packages/ui/src/components/Header.svelte
@@ -39,6 +39,7 @@
   export let noPrint: boolean = false
   export let freezeBefore: boolean = false
   export let doubleRowWidth = 768
+  export let closeOnEscape: boolean = true
 
   const dispatch = createEventDispatcher()
 
@@ -61,7 +62,7 @@
   })
 
   function _close (ev: KeyboardEvent): void {
-    if (closeButton && ev.key === 'Escape') {
+    if (closeButton && ev.key === 'Escape' && closeOnEscape) {
       ev.preventDefault()
       ev.stopPropagation()
 
@@ -138,7 +139,9 @@
       {/if}
       {#if closeButton}
         {#if type !== 'type-popup'}<div class="hulyHeader-divider no-print" />{/if}
-        <div class="hulyHotKey-item no-print">Esc</div>
+        {#if closeOnEscape}
+          <div class="hulyHotKey-item no-print">Esc</div>
+        {/if}
         <ButtonIcon icon={IconClose} kind={'tertiary'} size={'small'} noPrint on:click={() => dispatch('close')} />
       {/if}
     </div>
@@ -233,7 +236,9 @@
     {/if}
     {#if closeButton}
       {#if type !== 'type-popup'}<div class="hulyHeader-divider no-print" />{/if}
-      <div class="hulyHotKey-item no-print">Esc</div>
+      {#if closeOnEscape}
+        <div class="hulyHotKey-item no-print">Esc</div>
+      {/if}
       <ButtonIcon icon={IconClose} kind={'tertiary'} size={'small'} noPrint on:click={() => dispatch('close')} />
     {/if}
   {/if}
diff --git a/packages/ui/src/components/ModernTab.svelte b/packages/ui/src/components/ModernTab.svelte
index 2be4c7f9cb..90b552fbf1 100644
--- a/packages/ui/src/components/ModernTab.svelte
+++ b/packages/ui/src/components/ModernTab.svelte
@@ -85,6 +85,7 @@
     border-radius: 0.25rem;
     cursor: pointer;
     overflow: hidden;
+    color: var(--theme-content-color);
 
     &.primary {
       background-color: var(--theme-button-pressed);
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 555e14935f..178a4ff5ac 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -126,6 +126,7 @@ export interface TabItem {
 }
 
 export interface BreadcrumbItem {
+  id?: string
   icon?: Asset | AnySvelteComponent | ComponentType
   iconProps?: any
   iconWidth?: string
diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte b/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
index 2b84bf79ac..9578c9f193 100644
--- a/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
+++ b/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
@@ -26,6 +26,7 @@
   import { getActions, restrictionStore, showMenu } from '@hcengineering/view-resources'
   import { Asset } from '@hcengineering/platform'
   import { Action as ViewAction } from '@hcengineering/view'
+  import notification from '@hcengineering/notification'
 
   import ReactionsPresenter from '../reactions/ReactionsPresenter.svelte'
   import ActivityMessagePresenter from './ActivityMessagePresenter.svelte'
@@ -228,6 +229,9 @@
             <span class="text-sm lower">
               <MessageTimestamp date={message.createdOn ?? message.modifiedOn} />
             </span>
+            {#if message.editedOn}
+              <span class="text-sm lower">(<Label label={notification.string.Edited} />)</span>
+            {/if}
 
             {#if withActions && inlineActions.length > 0 && !readonly}
               <div class="flex-presenter flex-gap-2 ml-2">
diff --git a/plugins/activity/src/index.ts b/plugins/activity/src/index.ts
index bc087b7bb3..b0b18aa027 100644
--- a/plugins/activity/src/index.ts
+++ b/plugins/activity/src/index.ts
@@ -46,6 +46,7 @@ export interface ActivityMessage extends AttachedDoc {
 
   replies?: number
   reactions?: number
+  editedOn?: Timestamp
 }
 
 export type DisplayActivityMessage = DisplayDocUpdateMessage | ActivityMessage
@@ -81,6 +82,7 @@ export interface ActivityInfoMessage extends ActivityMessage {
   props?: Record<string, any>
   icon?: Asset
   iconProps?: Record<string, any>
+  editedOn?: Timestamp
 
   // A possible set of links to some platform resources.
   links?: { _class: Ref<Class<Doc>>, _id: Ref<Doc> }[]
diff --git a/plugins/calendar-resources/src/components/CalendarWidgetHeader.svelte b/plugins/calendar-resources/src/components/CalendarWidgetHeader.svelte
index a00fbb52d4..da02fe2841 100644
--- a/plugins/calendar-resources/src/components/CalendarWidgetHeader.svelte
+++ b/plugins/calendar-resources/src/components/CalendarWidgetHeader.svelte
@@ -42,6 +42,7 @@
   hideExtra={false}
   adaptive="autoExtra"
   doubleRowWidth={350}
+  closeOnEscape={false}
   on:close
 >
   <div class="title">
diff --git a/plugins/chunter-resources/src/components/Channel.svelte b/plugins/chunter-resources/src/components/Channel.svelte
index cf9f74ac77..eb43c295af 100644
--- a/plugins/chunter-resources/src/components/Channel.svelte
+++ b/plugins/chunter-resources/src/components/Channel.svelte
@@ -30,6 +30,7 @@
   export let filters: Ref<ActivityMessagesFilter>[] = []
   export let isAsideOpened = false
   export let syncLocation = true
+  export let freeze = false
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -111,5 +112,6 @@
     provider={dataProvider}
     {isAsideOpened}
     loadMoreAllowed={!isDocChannel}
+    {freeze}
   />
 {/if}
diff --git a/plugins/chunter-resources/src/components/ChannelHeader.svelte b/plugins/chunter-resources/src/components/ChannelHeader.svelte
index 37fd340167..284153a4eb 100644
--- a/plugins/chunter-resources/src/components/ChannelHeader.svelte
+++ b/plugins/chunter-resources/src/components/ChannelHeader.svelte
@@ -36,6 +36,7 @@
   export let isAsideShown: boolean = false
   export let filters: Ref<ActivityMessagesFilter>[] = []
   export let canOpenInSidebar: boolean = false
+  export let closeOnEscape: boolean = true
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -80,6 +81,7 @@
   {isAsideShown}
   {withSearch}
   {canOpenInSidebar}
+  {closeOnEscape}
   on:aside-toggled
   on:close
 >
diff --git a/plugins/chunter-resources/src/components/ChannelScrollView.svelte b/plugins/chunter-resources/src/components/ChannelScrollView.svelte
index c41d057f07..5dffbc7151 100644
--- a/plugins/chunter-resources/src/components/ChannelScrollView.svelte
+++ b/plugins/chunter-resources/src/components/ChannelScrollView.svelte
@@ -61,8 +61,9 @@
   export let skipLabels = false
   export let loadMoreAllowed = true
   export let isAsideOpened = false
-  export let initialScrollBottom = true
   export let fullHeight = true
+  export let fixedInput = true
+  export let freeze = false
 
   const doc = object
 
@@ -130,17 +131,21 @@
       }
     })
 
+  function isFreeze (): boolean {
+    return freeze
+  }
+
   $: displayMessages = filterChatMessages(messages, filters, filterResources, doc._class, selectedFilters)
 
   const unsubscribe = inboxClient.inboxNotificationsByContext.subscribe(() => {
-    if (notifyContext !== undefined) {
+    if (notifyContext !== undefined && !isFreeze()) {
       recheckNotifications(notifyContext)
       readViewportMessages()
     }
   })
 
   function scrollToBottom (afterScrollFn?: () => void): void {
-    if (scroller != null && scrollElement != null) {
+    if (scroller != null && scrollElement != null && !isFreeze()) {
       scroller.scrollBy(scrollElement.scrollHeight)
       updateSelectedDate()
       afterScrollFn?.()
@@ -338,7 +343,7 @@
   let messagesToReadAccumulatorTimer: any
 
   function readViewportMessages (): void {
-    if (!scrollElement || !scrollContentBox) {
+    if (!scrollElement || !scrollContentBox || isFreeze()) {
       return
     }
 
@@ -452,22 +457,14 @@
       isInitialScrolling = false
     } else if (separatorIndex === -1) {
       await wait()
-      if (initialScrollBottom) {
-        isScrollInitialized = true
-        shouldWaitAndRead = true
-        autoscroll = true
-        shouldScrollToNew = true
-        isInitialScrolling = false
-        waitLastMessageRenderAndRead(() => {
-          autoscroll = false
-        })
-      } else {
-        isScrollInitialized = true
+      isScrollInitialized = true
+      shouldWaitAndRead = true
+      autoscroll = true
+      shouldScrollToNew = true
+      isInitialScrolling = false
+      waitLastMessageRenderAndRead(() => {
         autoscroll = false
-        updateShouldScrollToNew()
-        isInitialScrolling = false
-        readViewportMessages()
-      }
+      })
     } else if (separatorElement) {
       await wait()
       scrollToSeparator()
@@ -519,6 +516,7 @@
 
   function scrollToNewMessages (): void {
     if (!scrollElement || !shouldScrollToNew) {
+      readViewportMessages()
       return
     }
 
@@ -557,14 +555,22 @@
       return
     }
 
+    if (isFreeze()) {
+      messagesCount = newCount
+      return
+    }
+
     if (scrollToRestore > 0) {
       void restoreScroll()
     } else if (dateToJump !== undefined) {
       await wait()
       scrollToDate(dateToJump)
-    } else if (messagesCount > 0 && newCount > messagesCount) {
+    } else if (shouldScrollToNew && messagesCount > 0 && newCount > messagesCount) {
       await wait()
       scrollToNewMessages()
+    } else {
+      await wait()
+      readViewportMessages()
     }
 
     messagesCount = newCount
@@ -576,7 +582,7 @@
       return
     }
 
-    if (shouldScrollToNew && initialScrollBottom) {
+    if (shouldScrollToNew) {
       scrollToBottom()
     }
 
@@ -660,7 +666,7 @@
     } else if (element != null) {
       const { scrollHeight, scrollTop, offsetHeight } = element
 
-      showScrollDownButton = scrollHeight > offsetHeight + scrollTop + 300
+      showScrollDownButton = scrollHeight > offsetHeight + scrollTop + 50
     } else {
       showScrollDownButton = false
     }
@@ -691,7 +697,7 @@
   $: void forceReadContext(isScrollAtBottom, notifyContext)
 
   async function forceReadContext (isScrollAtBottom: boolean, context?: DocNotifyContext): Promise<void> {
-    if (context === undefined || !isScrollAtBottom || forceRead) return
+    if (context === undefined || !isScrollAtBottom || forceRead || isFreeze()) return
     const { lastUpdateTimestamp = 0, lastViewedTimestamp = 0 } = context
 
     if (lastViewedTimestamp >= lastUpdateTimestamp) return
@@ -708,6 +714,10 @@
   }
 
   const canLoadNextForwardStore = provider.canLoadNextForwardStore
+
+  $: if (!freeze) {
+    readViewportMessages()
+  }
 </script>
 
 {#if isLoading}
@@ -777,6 +787,16 @@
         />
       {/each}
 
+      {#if !fixedInput}
+        <div class="ref-input flex-col">
+          <ActivityExtensionComponent
+            kind="input"
+            {extensions}
+            props={{ object, boundary: scrollElement, collection, autofocus: true, withTypingInfo: true }}
+          />
+        </div>
+      {/if}
+
       {#if loadMoreAllowed && $canLoadNextForwardStore}
         <HistoryLoading isLoading={$isLoadingMoreStore} />
       {/if}
@@ -794,7 +814,7 @@
       </div>
     {/if}
   </div>
-  {#if object}
+  {#if fixedInput && object}
     <div class="ref-input flex-col">
       <ActivityExtensionComponent
         kind="input"
@@ -841,7 +861,7 @@
     display: flex;
     justify-content: center;
     bottom: -0.75rem;
-    animation: 1s fadeIn;
+    animation: 0.5s fadeIn;
     animation-fill-mode: forwards;
     visibility: hidden;
   }
diff --git a/plugins/chunter-resources/src/components/ChannelSidebarView.svelte b/plugins/chunter-resources/src/components/ChannelSidebarView.svelte
index e47991f94b..440f363341 100644
--- a/plugins/chunter-resources/src/components/ChannelSidebarView.svelte
+++ b/plugins/chunter-resources/src/components/ChannelSidebarView.svelte
@@ -58,9 +58,14 @@
       { limit: 1 }
     )
   }
+  let renderChannel = tab.data.thread === undefined
+
+  $: if (tab.data.thread === undefined) {
+    renderChannel = true
+  }
 </script>
 
-{#if object}
+{#if object && renderChannel}
   <div class="channel" class:invisible={threadId !== undefined} style:height style:width>
     <ChannelHeader
       _id={object._id}
@@ -71,16 +76,17 @@
       canOpen={true}
       allowClose={true}
       canOpenInSidebar={false}
+      closeOnEscape={false}
       on:close
     />
     {#key object._id}
-      <Channel {object} {context} syncLocation={false} />
+      <Channel {object} {context} syncLocation={false} freeze={threadId !== undefined} />
     {/key}
   </div>
 {/if}
 {#if threadId}
   <div class="thread" style:height style:width>
-    <ThreadView _id={threadId} on:close={() => closeThreadInSidebarChannel(widget, tab)} />
+    <ThreadView _id={threadId} on:channel={() => closeThreadInSidebarChannel(widget, tab)} on:close />
   </div>
 {/if}
 
diff --git a/plugins/chunter-resources/src/components/ChannelView.svelte b/plugins/chunter-resources/src/components/ChannelView.svelte
index ef849cd3fc..d0e9c5888f 100644
--- a/plugins/chunter-resources/src/components/ChannelView.svelte
+++ b/plugins/chunter-resources/src/components/ChannelView.svelte
@@ -93,7 +93,7 @@
   }
 </script>
 
-<div class="popupPanel panel">
+<div class="popupPanel">
   <ChannelHeader
     _id={object._id}
     _class={object._class}
diff --git a/plugins/chunter-resources/src/components/ChatWidget.svelte b/plugins/chunter-resources/src/components/ChatWidget.svelte
index 5051ce0f8a..6fe89af6d5 100644
--- a/plugins/chunter-resources/src/components/ChatWidget.svelte
+++ b/plugins/chunter-resources/src/components/ChatWidget.svelte
@@ -36,7 +36,7 @@
   }
 </script>
 
-{#if widget && tab && tab.type === 'channel'}
+{#if widget && tab}
   <ChannelSidebarView
     {widget}
     {tab}
@@ -46,13 +46,4 @@
       handleClose(tab?.id)
     }}
   />
-{:else if widget && tab && tab.type === 'thread'}
-  <ThreadSidebarView
-    {tab}
-    {height}
-    {width}
-    on:close={() => {
-      handleClose(tab?.id)
-    }}
-  />
 {/if}
diff --git a/plugins/chunter-resources/src/components/ChatWidgetTab.svelte b/plugins/chunter-resources/src/components/ChatWidgetTab.svelte
index ffc126d5e6..5bfc57a6db 100644
--- a/plugins/chunter-resources/src/components/ChatWidgetTab.svelte
+++ b/plugins/chunter-resources/src/components/ChatWidgetTab.svelte
@@ -50,7 +50,7 @@
 
   let count: number = 0
 
-  $: objectId = tab.type === 'thread' ? tab.data.thread : tab.data._id
+  $: objectId = tab.data.thread ?? tab.data._id
   $: context = objectId ? $contextByDocStore.get(objectId) : undefined
 
   const unsubscribe = notificationClient.inboxNotificationsByContext.subscribe((res) => {
diff --git a/plugins/chunter-resources/src/components/Header.svelte b/plugins/chunter-resources/src/components/Header.svelte
index 89a1a3b412..6920564630 100644
--- a/plugins/chunter-resources/src/components/Header.svelte
+++ b/plugins/chunter-resources/src/components/Header.svelte
@@ -57,6 +57,7 @@
   export let adaptive: HeaderAdaptive = 'default'
   export let hideActions: boolean = false
   export let canOpenInSidebar: boolean = false
+  export let closeOnEscape: boolean = true
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -72,6 +73,7 @@
   hideActions={!((canOpen && object) || withAside || $$slots.actions) || hideActions}
   hideDescription={!description}
   adaptive={adaptive !== 'default' ? adaptive : withFilters ? 'freezeActions' : 'disabled'}
+  {closeOnEscape}
   on:click
   on:close
 >
diff --git a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
index 4d7e760922..7630810893 100644
--- a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
+++ b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
@@ -33,7 +33,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     bind:this={div}
-    class="border-radius-4 over-underline dateSelectorButton clear-mins"
+    class="border-radius-4 dateSelectorButton clear-mins"
     on:click={() => {
       showPopup(DateRangePopup, {}, div, (v) => {
         if (v) {
@@ -68,13 +68,17 @@
       left: 0;
       width: 100%;
       height: 1px;
-      background-color: var(--theme-divider-color);
+      background-color: var(--highlight-select-border);
     }
+
     .dateSelectorButton {
+      cursor: pointer;
       padding: 0.25rem 0.5rem;
       height: max-content;
-      background-color: var(--theme-list-row-color);
-      border: 1px solid var(--theme-divider-color);
+      color: var(--theme-content-color);
+      background-color: var(--highlight-select);
+      border: 1px solid var(--highlight-select-border);
+      font-weight: 500;
       z-index: 10;
     }
   }
diff --git a/plugins/chunter-resources/src/components/chat-message/ChatMessageHeader.svelte b/plugins/chunter-resources/src/components/chat-message/ChatMessageHeader.svelte
index 2c649a9a3a..4c82e87122 100644
--- a/plugins/chunter-resources/src/components/chat-message/ChatMessageHeader.svelte
+++ b/plugins/chunter-resources/src/components/chat-message/ChatMessageHeader.svelte
@@ -14,20 +14,15 @@
 -->
 <script lang="ts">
   import { Label } from '@hcengineering/ui'
-  import notification from '@hcengineering/notification'
   import { IntlString } from '@hcengineering/platform'
   import { Timestamp } from '@hcengineering/core'
 
-  export let editedOn: Timestamp | undefined
   export let label: IntlString | undefined
 </script>
 
 {#if label}
   <span class="text-sm lower"> <Label {label} /></span>
 {/if}
-{#if editedOn}
-  <span class="text-sm lower"><Label label={notification.string.Edited} /></span>
-{/if}
 
 <style lang="scss">
   span {
diff --git a/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte b/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
index dffc590c20..1f0842bbd4 100644
--- a/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
+++ b/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
@@ -255,7 +255,7 @@
     {onClick}
   >
     <svelte:fragment slot="header">
-      <ChatMessageHeader editedOn={value.editedOn} label={skipLabel ? undefined : viewlet?.label} />
+      <ChatMessageHeader label={viewlet?.label} />
     </svelte:fragment>
     <svelte:fragment slot="content">
       {#if !isEditing}
diff --git a/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte b/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
index 7be56685e3..964c5cc822 100644
--- a/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
+++ b/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
@@ -76,7 +76,7 @@
 
     if (direct !== undefined && missingAccounts.length > 0) {
       await client.updateDoc(chunter.class.DirectMessage, direct.space, direct._id, {
-        members: [...direct.members, ...missingAccounts]
+        $push: { members: { $each: missingAccounts, $position: 0 } }
       })
     }
 
diff --git a/plugins/chunter-resources/src/components/threads/ThreadSidebarView.svelte b/plugins/chunter-resources/src/components/threads/ThreadSidebarView.svelte
index 97b1126b55..5a01e4aa6a 100644
--- a/plugins/chunter-resources/src/components/threads/ThreadSidebarView.svelte
+++ b/plugins/chunter-resources/src/components/threads/ThreadSidebarView.svelte
@@ -24,7 +24,7 @@
 
 {#if tab.data.thread}
   <div class="root" style:height style:width>
-    <ThreadView _id={tab.data.thread} on:close />
+    <ThreadView _id={tab.data.thread} on:close on:channel />
   </div>
 {/if}
 
diff --git a/plugins/chunter-resources/src/components/threads/ThreadView.svelte b/plugins/chunter-resources/src/components/threads/ThreadView.svelte
index 258ec9e09c..180a132bc5 100644
--- a/plugins/chunter-resources/src/components/threads/ThreadView.svelte
+++ b/plugins/chunter-resources/src/components/threads/ThreadView.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Doc, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Breadcrumbs, Label, location as locationStore, Header } from '@hcengineering/ui'
+  import { Breadcrumbs, Label, location as locationStore, Header, BreadcrumbItem } from '@hcengineering/ui'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import activity, { ActivityMessage, DisplayActivityMessage } from '@hcengineering/activity'
   import { getMessageFromLoc, messageInFocus } from '@hcengineering/activity-resources'
@@ -104,7 +104,14 @@
       channelName = res
     })
 
-  function getBreadcrumbsItems (channel?: Doc, message?: DisplayActivityMessage, channelName?: string) {
+  let breadcrumbs: BreadcrumbItem[] = []
+  $: breadcrumbs = showHeader ? getBreadcrumbsItems(channel, message, channelName) : []
+
+  function getBreadcrumbsItems (
+    channel?: Doc,
+    message?: DisplayActivityMessage,
+    channelName?: string
+  ): BreadcrumbItem[] {
     if (message === undefined) {
       return []
     }
@@ -115,6 +122,7 @@
 
     return [
       {
+        id: 'channel',
         icon: getObjectIcon(message.attachedToClass),
         iconProps: { value: channel },
         iconWidth: isPersonAvatar ? 'auto' : undefined,
@@ -122,14 +130,24 @@
         title: channelName,
         label: channelName ? undefined : chunter.string.Channel
       },
-      { label: chunter.string.Thread }
+      { id: 'thread', label: chunter.string.Thread }
     ]
   }
+
+  function handleBreadcrumbSelect (event: CustomEvent<number>): void {
+    const index = event.detail
+    const breadcrumb = breadcrumbs[index]
+
+    if (breadcrumb === undefined) return
+    if (breadcrumb.id !== 'channel') return
+
+    dispatch('channel')
+  }
 </script>
 
 {#if showHeader}
-  <Header type={'type-aside'} adaptive={'disabled'} on:close>
-    <Breadcrumbs items={getBreadcrumbsItems(channel, message, channelName)} currentOnly />
+  <Header type={'type-aside'} adaptive={'disabled'} closeOnEscape={false} on:close>
+    <Breadcrumbs items={breadcrumbs} on:select={handleBreadcrumbSelect} selected={1} />
   </Header>
 {/if}
 
@@ -141,8 +159,8 @@
       skipLabels
       object={message}
       provider={dataProvider}
-      initialScrollBottom={false}
       fullHeight={false}
+      fixedInput={false}
     >
       <svelte:fragment slot="header">
         <div class="mt-3">
diff --git a/plugins/chunter-resources/src/index.ts b/plugins/chunter-resources/src/index.ts
index 66fa08593a..cdfe0cd068 100644
--- a/plugins/chunter-resources/src/index.ts
+++ b/plugins/chunter-resources/src/index.ts
@@ -61,6 +61,7 @@ import {
   getThreadLink,
   openChannelInSidebar,
   openChannelInSidebarAction,
+  openThreadInSidebar,
   replyToThread
 } from './navigation'
 import {
@@ -199,7 +200,8 @@ export default async (): Promise<Resources> => ({
     GetMessageLink: getMessageLocation,
     CloseChatWidgetTab: closeChatWidgetTab,
     OpenChannelInSidebar: openChannelInSidebar,
-    CanTranslateMessage: canTranslateMessage
+    CanTranslateMessage: canTranslateMessage,
+    OpenThreadInSidebar: openThreadInSidebar
   },
   actionImpl: {
     ArchiveChannel,
diff --git a/plugins/chunter-resources/src/navigation.ts b/plugins/chunter-resources/src/navigation.ts
index 2aab3e86a6..668543fb96 100644
--- a/plugins/chunter-resources/src/navigation.ts
+++ b/plugins/chunter-resources/src/navigation.ts
@@ -6,7 +6,7 @@ import {
   type Location,
   navigate
 } from '@hcengineering/ui'
-import { type Ref, type Doc, type Class } from '@hcengineering/core'
+import { type Ref, type Doc, type Class, generateId } from '@hcengineering/core'
 import activity, { type ActivityMessage } from '@hcengineering/activity'
 import {
   type Channel,
@@ -262,11 +262,11 @@ export async function openChannelInSidebar (
       size: isDirect || isPerson ? 'tiny' : 'x-small',
       compact: true
     },
-    type: 'channel',
     data: {
       _id,
       _class,
-      thread
+      thread,
+      channelName: name
     }
   }
 
@@ -288,18 +288,26 @@ export async function openThreadInSidebarChannel (
 ): Promise<void> {
   const newTab: ChatWidgetTab = {
     ...tab,
+    name: await translate(chunter.string.ThreadIn, { name: tab.data.channelName }),
     data: { ...tab.data, thread: message._id }
   }
   createWidgetTab(widget, newTab)
 }
 
 export async function closeThreadInSidebarChannel (widget: Widget, tab: ChatWidgetTab): Promise<void> {
+  const thread = tab.allowedPath !== undefined ? tab.data.thread : undefined
   const newTab: ChatWidgetTab = {
     ...tab,
+    id: tab.id.startsWith('thread_') ? generateId() : tab.id,
+    name: tab.data.channelName,
+    allowedPath: undefined,
     data: { ...tab.data, thread: undefined }
   }
 
   createWidgetTab(widget, newTab)
+  setTimeout(() => {
+    removeThreadFromLoc(thread)
+  }, 100)
 }
 
 export async function openThreadInSidebar (_id: Ref<ActivityMessage>, msg?: ActivityMessage, doc?: Doc): Promise<void> {
@@ -321,9 +329,7 @@ export async function openThreadInSidebar (_id: Ref<ActivityMessage>, msg?: Acti
   const allowedPath = loc.path.join('/')
 
   const currentTAbs = get(sidebarStore).widgetsState.get(widget._id)?.tabs ?? []
-  const tabsToClose = currentTAbs
-    .filter((t) => t.isPinned !== true && t.allowedPath === allowedPath && (t as ChatWidgetTab).type === 'thread')
-    .map((t) => t.id)
+  const tabsToClose = currentTAbs.filter((t) => t.isPinned !== true && t.allowedPath === allowedPath).map((t) => t.id)
 
   if (tabsToClose.length > 0) {
     sidebarStore.update((s) => {
@@ -341,26 +347,31 @@ export async function openThreadInSidebar (_id: Ref<ActivityMessage>, msg?: Acti
     name: tabName,
     icon: chunter.icon.Thread,
     allowedPath,
-    type: 'thread',
     data: {
       _id: object?._id,
       _class: object?._class,
-      thread: message._id
+      thread: message._id,
+      channelName: name
     }
   }
   createWidgetTab(widget, tab, true)
 }
 
-export function closeChatWidgetTab (tab?: ChatWidgetTab): void {
-  if (tab?.type === 'thread') {
-    const loc = getCurrentLocation()
+export function removeThreadFromLoc (thread?: Ref<ActivityMessage>): void {
+  if (thread === undefined) return
+  const loc = getCurrentLocation()
 
-    if (loc.path[2] === chunterId || loc.path[2] === notificationId) {
-      if (loc.path[4] === tab.data.thread) {
-        loc.path[4] = ''
-        loc.path.length = 4
-        navigate(loc)
-      }
+  if (loc.path[2] === chunterId || loc.path[2] === notificationId) {
+    if (loc.path[4] === thread) {
+      loc.path[4] = ''
+      loc.path.length = 4
+      navigate(loc)
     }
   }
 }
+
+export function closeChatWidgetTab (tab?: ChatWidgetTab): void {
+  if (tab?.allowedPath !== undefined) {
+    removeThreadFromLoc(tab.data.thread)
+  }
+}
diff --git a/plugins/chunter-resources/src/utils.ts b/plugins/chunter-resources/src/utils.ts
index 0b5e7eef6b..87b75edcc7 100644
--- a/plugins/chunter-resources/src/utils.ts
+++ b/plugins/chunter-resources/src/utils.ts
@@ -434,9 +434,13 @@ export async function readChannelMessages (
     return
   }
 
-  const inboxClient = InboxNotificationsClientImpl.getClient()
+  if (context === undefined) {
+    return
+  }
 
+  const inboxClient = InboxNotificationsClientImpl.getClient()
   const client = getClient().apply(undefined, 'readViewportMessages')
+
   try {
     const readMessages = get(chatReadMessagesStore)
     const allIds = getAllIds(messages).filter((id) => !readMessages.has(id))
@@ -460,12 +464,6 @@ export async function readChannelMessages (
 
     chatReadMessagesStore.update((store) => new Set([...store, ...allIds]))
 
-    await inboxClient.readNotifications(client, [...notifications, ...relatedMentions])
-
-    if (context === undefined) {
-      return
-    }
-
     const storedTimestampUpdates = get(contextsTimestampStore).get(context._id)
     const newTimestamp = messages[messages.length - 1].createdOn ?? 0
     const prevTimestamp = Math.max(storedTimestampUpdates ?? 0, context.lastViewedTimestamp ?? 0)
@@ -478,6 +476,7 @@ export async function readChannelMessages (
       })
       await client.update(context, { lastViewedTimestamp: newTimestamp })
     }
+    await inboxClient.readNotifications(client, [...notifications, ...relatedMentions])
   } finally {
     await client.commit()
   }
diff --git a/plugins/chunter/src/index.ts b/plugins/chunter/src/index.ts
index a5d2369669..76b6ca9c43 100644
--- a/plugins/chunter/src/index.ts
+++ b/plugins/chunter/src/index.ts
@@ -100,8 +100,7 @@ export interface InlineButton extends AttachedDoc {
 }
 
 export interface ChatWidgetTab extends WidgetTab {
-  type: 'channel' | 'thread'
-  data: { _id?: Ref<Doc>, _class?: Ref<Class<Doc>>, thread?: Ref<ActivityMessage> }
+  data: { _id?: Ref<Doc>, _class?: Ref<Class<Doc>>, thread?: Ref<ActivityMessage>, channelName: string }
 }
 
 /**
@@ -232,6 +231,7 @@ export default plugin(chunterId, {
   },
   function: {
     CanTranslateMessage: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
+    OpenThreadInSidebar: '' as Resource<(_id: Ref<ActivityMessage>, msg?: ActivityMessage, doc?: Doc) => Promise<void>>,
     OpenChannelInSidebar: '' as Resource<
     (_id: Ref<Doc>, _class: Ref<Doc>, doc?: Doc, thread?: Ref<ActivityMessage>) => Promise<void>
     >
diff --git a/plugins/notification-resources/src/components/inbox/Inbox.svelte b/plugins/notification-resources/src/components/inbox/Inbox.svelte
index 5bee0ce5bb..079dce0cc1 100644
--- a/plugins/notification-resources/src/components/inbox/Inbox.svelte
+++ b/plugins/notification-resources/src/components/inbox/Inbox.svelte
@@ -37,6 +37,7 @@
   import view, { decodeObjectURI } from '@hcengineering/view'
   import { parseLinkId } from '@hcengineering/view-resources'
   import { get } from 'svelte/store'
+  import { getResource } from '@hcengineering/platform'
 
   import { InboxNotificationsClientImpl } from '../../inboxNotificationsClient'
   import notification from '../../plugin'
@@ -179,6 +180,12 @@
     }
 
     const selectedMessageId = loc?.loc.query?.message as Ref<ActivityMessage> | undefined
+    const thread = loc?.loc.path[4] as Ref<ActivityMessage> | undefined
+
+    if (thread !== undefined) {
+      const fn = await getResource(chunter.function.OpenThreadInSidebar)
+      void fn(thread)
+    }
 
     if (selectedMessageId !== undefined) {
       selectedMessage = get(inboxClient.activityInboxNotifications).find(
diff --git a/plugins/notification-resources/src/utils.ts b/plugins/notification-resources/src/utils.ts
index 8902af2918..1c7795dd7f 100644
--- a/plugins/notification-resources/src/utils.ts
+++ b/plugins/notification-resources/src/utils.ts
@@ -588,6 +588,7 @@ export async function selectInboxContext (
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const { objectId, objectClass } = context
+  const loc = getCurrentLocation()
 
   if (isMentionNotification(notification) && isActivityMessageClass(notification.mentionedInClass)) {
     const selectedMsg = notification.mentionedIn as Ref<ActivityMessage>
@@ -619,17 +620,25 @@ export async function selectInboxContext (
     }
 
     if (isReactionMessage(message)) {
-      void navigateToInboxDoc(linkProviders, objectId, objectClass, undefined, objectId as Ref<ActivityMessage>)
+      const thread = loc.path[4] === objectId ? objectId : undefined
+      void navigateToInboxDoc(
+        linkProviders,
+        objectId,
+        objectClass,
+        thread as Ref<ActivityMessage>,
+        objectId as Ref<ActivityMessage>
+      )
       return
     }
 
     const selectedMsg = (notification as ActivityInboxNotification)?.attachedTo
+    const thread = selectedMsg !== objectId ? objectId : loc.path[4] === objectId ? objectId : undefined
 
     void navigateToInboxDoc(
       linkProviders,
       objectId,
       objectClass,
-      selectedMsg !== undefined ? (objectId as Ref<ActivityMessage>) : undefined,
+      thread as Ref<ActivityMessage>,
       selectedMsg ?? (objectId as Ref<ActivityMessage>)
     )
     return
diff --git a/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte b/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
index b6d6c9deb8..ef3285a94a 100644
--- a/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
+++ b/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
@@ -100,6 +100,7 @@
             hideActions={false}
             hideDescription={true}
             adaptive="disabled"
+            closeOnEscape={false}
             on:close={() => {
               if (widget !== undefined) {
                 closeWidget(widget._id)
@@ -168,5 +169,6 @@
     flex-direction: column;
     flex: 1;
     overflow: hidden;
+    border-bottom: 1px solid transparent;
   }
 </style>
diff --git a/plugins/workbench-resources/src/sidebar.ts b/plugins/workbench-resources/src/sidebar.ts
index 50a4f6ad8f..8bf9a40e1b 100644
--- a/plugins/workbench-resources/src/sidebar.ts
+++ b/plugins/workbench-resources/src/sidebar.ts
@@ -101,7 +101,12 @@ export function openWidget (widget: Widget, data?: Record<string, any>, active =
   const { widgetsState } = state
   const widgetState = widgetsState.get(widget._id)
 
-  widgetsState.set(widget._id, { _id: widget._id, data, tab: widgetState?.tab, tabs: widgetState?.tabs ?? [] })
+  widgetsState.set(widget._id, {
+    _id: widget._id,
+    data: data ?? widgetState?.data,
+    tab: widgetState?.tab,
+    tabs: widgetState?.tabs ?? []
+  })
 
   sidebarStore.set({
     ...state,