From 498fe0139571bff63d704e8a86284b6c5e718339 Mon Sep 17 00:00:00 2001
From: Kristina <kristin.fefelova@gmail.com>
Date: Fri, 2 Feb 2024 13:43:50 +0400
Subject: [PATCH] UBERF-4983: update chat ui (#4483)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 models/activity/src/index.ts                  |   9 +-
 models/chunter/src/index.ts                   |  24 +-
 models/chunter/src/plugin.ts                  |   3 +-
 models/notification/src/index.ts              |   5 +-
 models/server-activity/src/migration.ts       |   4 +-
 packages/theme/styles/_layouts.scss           |   1 +
 packages/theme/styles/_lumia-colors.scss      |   4 +
 packages/ui/src/components/Breadcrumb.svelte  |  11 +-
 packages/ui/src/components/Breadcrumbs.svelte |   3 +
 packages/ui/src/components/ListView.svelte    |  25 +-
 .../ui/src/components/ModeSelector.svelte     |  12 +-
 packages/ui/src/components/Scroller.svelte    |  26 +-
 packages/ui/src/components/TabList.svelte     |  20 +-
 packages/ui/src/components/icons/Right.svelte |  26 ++
 packages/ui/src/index.ts                      |   1 +
 packages/ui/src/types.ts                      |   4 +
 plugins/activity-assets/assets/icons.svg      |  18 +-
 .../src/activityMessagesUtils.ts              | 143 ++++---
 .../src/components/Activity.svelte            |   6 +-
 .../components/ActivityMessageAction.svelte   |  46 +++
 .../components/ActivityMessageActions.svelte  |  90 +++++
 .../src/components/FilterPopup.svelte         |  21 +-
 .../PinMessageAction.svelte                   |   5 +-
 .../src/components/SaveMessageAction.svelte   |   4 +-
 .../ActivityMessagePresenter.svelte           |   4 +-
 .../ActivityMessageTemplate.svelte            | 121 +++---
 .../DocUpdateMessageContent.svelte            |   4 +-
 .../DocUpdateMessagePresenter.svelte          | 128 +++---
 .../reactions/AddReactionAction.svelte        |   7 +-
 .../ReactionNotificationPresenter.svelte      |   9 +-
 plugins/activity-resources/src/index.ts       |   3 +-
 plugins/activity-resources/src/utils.ts       |  14 +-
 plugins/chunter-assets/lang/en.json           |  16 +-
 plugins/chunter-assets/lang/ru.json           |  14 +-
 .../src/components/Channel.svelte             |  33 +-
 .../src/components/ChannelHeader.svelte       |  67 +++-
 .../src/components/ChannelIcon.svelte         |   9 +-
 .../components/ChannelMessagesFilter.svelte   |  44 +++
 .../ChannelMessagesSeparator.svelte}          |  29 +-
 .../src/components/ChannelPanel.svelte        |  56 +--
 .../src/components/ChannelScrollView.svelte}  | 279 +++++++------
 .../src/components/ChannelView.svelte         |  92 ++++-
 .../src/components/DirectIcon.svelte          |  11 +-
 .../src/components/Header.svelte              | 100 ++++-
 .../src/components/JumpToDateSelector.svelte  |   0
 .../src/components/PinnedMessagesPopup.svelte |  39 +-
 .../src/components/Replies.svelte             |  86 ++--
 .../chat-message/ChatMessagePresenter.svelte  |  19 +-
 .../src/components/chat/Chat.svelte           | 115 ++++--
 .../src/components/chat/ChatAside.svelte      |  48 +++
 .../src/components/chat/DocChatPanel.svelte   | 139 ++-----
 .../chat/create/CreateChannel.svelte          | 106 +++--
 .../chat/navigator/ChatGroupHeader.svelte     |  80 ++++
 .../chat/navigator/ChatNavGroup.svelte        | 143 +++++--
 .../chat/navigator/ChatNavGroupItem.svelte    | 132 +++++++
 .../chat/navigator/ChatNavItem.svelte         | 122 ------
 .../chat/navigator/ChatNavigator.svelte       | 124 +++++-
 .../chat/navigator/ChatSpecialElement.svelte  |  79 ++++
 .../components/chat/navigator/NavItem.svelte  | 246 ++++++++++++
 .../chat/specials/ChannelBrowser.svelte       |   4 +-
 .../chat/specials/ChunterBrowser.svelte       |  21 +-
 .../chat/specials/SavedMessages.svelte        | 139 ++++---
 .../src/components/chat/types.ts              |  18 +-
 .../src/components/chat/utils.ts              | 166 +++-----
 .../src/components/icons/Lock.svelte          |   2 +-
 .../ThreadNotificationPresenter.svelte        |  11 +-
 .../threads/ThreadParentPresenter.svelte      |   2 +-
 .../src/components/threads/ThreadView.svelte  | 183 +++++----
 .../{chat/specials => threads}/Threads.svelte |  42 +-
 plugins/chunter-resources/src/index.ts        |  53 ++-
 plugins/chunter-resources/src/plugin.ts       |   8 +-
 plugins/chunter-resources/src/utils.ts        | 178 ++++++++-
 plugins/chunter/src/index.ts                  |  13 +-
 .../src/components/PersonIcon.svelte          |   6 +-
 plugins/contact-resources/src/index.ts        |   3 +-
 .../components/DocNotifyContextCard.svelte    |  15 +-
 .../src/components/NotifyMarker.svelte        |   2 +-
 .../ActivityInboxNotificationPresenter.svelte |  22 +-
 .../CommonInboxNotificationPresenter.svelte   |   2 +-
 .../src/components/inbox/Inbox.svelte         |  80 ++--
 .../components/inbox/InboxFlatListView.svelte |   5 +-
 .../inbox/InboxGroupedListView.svelte         |   2 +-
 .../inbox/InboxNotificationPresenter.svelte   |   3 +-
 .../src/inboxNotificationsClient.ts           |   6 +-
 plugins/notification-resources/src/index.ts   |   1 +
 plugins/notification-resources/src/utils.ts   | 370 ++++++++++++------
 plugins/view-resources/src/utils.ts           |  30 ++
 .../src/components/Workbench.svelte           |   3 +-
 plugins/workbench/src/index.ts                |   4 +
 .../activity-resources/src/index.ts           |  26 +-
 90 files changed, 2964 insertions(+), 1485 deletions(-)
 create mode 100644 packages/ui/src/components/icons/Right.svelte
 create mode 100644 plugins/activity-resources/src/components/ActivityMessageAction.svelte
 create mode 100644 plugins/activity-resources/src/components/ActivityMessageActions.svelte
 rename plugins/activity-resources/src/components/{activity-message => }/PinMessageAction.svelte (92%)
 create mode 100644 plugins/chunter-resources/src/components/ChannelMessagesFilter.svelte
 rename plugins/{activity-resources/src/components/activity-message/ActivityMessagesSeparator.svelte => chunter-resources/src/components/ChannelMessagesSeparator.svelte} (62%)
 rename plugins/{activity-resources/src/components/ActivityScrolledView.svelte => chunter-resources/src/components/ChannelScrollView.svelte} (54%)
 rename plugins/{activity-resources => chunter-resources}/src/components/JumpToDateSelector.svelte (100%)
 rename plugins/{activity-resources => chunter-resources}/src/components/Replies.svelte (66%)
 create mode 100644 plugins/chunter-resources/src/components/chat/ChatAside.svelte
 create mode 100644 plugins/chunter-resources/src/components/chat/navigator/ChatGroupHeader.svelte
 create mode 100644 plugins/chunter-resources/src/components/chat/navigator/ChatNavGroupItem.svelte
 delete mode 100644 plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte
 create mode 100644 plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte
 create mode 100644 plugins/chunter-resources/src/components/chat/navigator/NavItem.svelte
 rename plugins/chunter-resources/src/components/{chat/specials => threads}/Threads.svelte (53%)

diff --git a/models/activity/src/index.ts b/models/activity/src/index.ts
index 778d177abb..7e1296b4f9 100644
--- a/models/activity/src/index.ts
+++ b/models/activity/src/index.ts
@@ -137,7 +137,10 @@ export class TDocUpdateMessage extends TActivityMessage implements DocUpdateMess
   @Index(IndexKind.Indexed)
     txId!: Ref<TxCUD<Doc>>
 
-  action!: DocUpdateAction
+  @Prop(TypeString(), core.string.Object)
+  @Index(IndexKind.Indexed)
+    action!: DocUpdateAction
+
   updateCollection?: string
   attributeUpdates?: DocAttributeUpdates
 }
@@ -227,8 +230,10 @@ export class TReaction extends TAttachedDoc implements Reaction {
 @Model(activity.class.SavedMessage, preference.class.Preference)
 export class TSavedMessage extends TPreference implements SavedMessage {
   @Prop(TypeRef(activity.class.ActivityMessage), view.string.Save)
+  @Index(IndexKind.Indexed)
   declare attachedTo: Ref<ActivityMessage>
 }
+
 export function createModel (builder: Builder): void {
   builder.createModel(
     TTxViewlet,
@@ -247,8 +252,6 @@ export function createModel (builder: Builder): void {
     TIgnoreActivity
   )
 
-  builder.mixin(activity.class.DocUpdateMessage, core.class.Class, activity.mixin.ActivityDoc, {})
-
   builder.mixin(activity.class.DocUpdateMessage, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: activity.component.DocUpdateMessagePresenter
   })
diff --git a/models/chunter/src/index.ts b/models/chunter/src/index.ts
index 89fe74a3b8..9079933f47 100644
--- a/models/chunter/src/index.ts
+++ b/models/chunter/src/index.ts
@@ -171,7 +171,6 @@ export class TChatMessage extends TActivityMessage implements ChatMessage {
     message!: string
 
   @Prop(TypeTimestamp(), chunter.string.Edit)
-  @Index(IndexKind.Indexed)
     editedOn?: Timestamp
 
   @Prop(PropCollection(attachment.class.Attachment), attachment.string.Attachments, {
@@ -183,9 +182,11 @@ export class TChatMessage extends TActivityMessage implements ChatMessage {
 @Model(chunter.class.ThreadMessage, chunter.class.ChatMessage)
 export class TThreadMessage extends TChatMessage implements ThreadMessage {
   @Prop(TypeRef(activity.class.ActivityMessage), core.string.AttachedTo)
+  @Index(IndexKind.Indexed)
   declare attachedTo: Ref<ActivityMessage>
 
   @Prop(TypeRef(activity.class.ActivityMessage), core.string.AttachedToClass)
+  @Index(IndexKind.Indexed)
   declare attachedToClass: Ref<Class<ActivityMessage>>
 
   @Prop(TypeRef(core.class.Doc), core.string.Object)
@@ -406,7 +407,7 @@ export function createModel (builder: Builder, options = { addApplication: true
         alias: chunterId,
         hidden: false,
         component: chunter.component.Chat,
-        aside: chunter.component.ThreadView
+        aside: chunter.component.ChatAside
       },
       chunter.app.Chunter
     )
@@ -429,6 +430,7 @@ export function createModel (builder: Builder, options = { addApplication: true
       input: 'none',
       category: chunter.category.Chunter,
       target: activity.class.ActivityMessage,
+      visibilityTester: chunter.function.CanCopyMessageLink,
       context: {
         mode: ['context', 'browser'],
         application: chunter.app.Chunter,
@@ -585,8 +587,6 @@ export function createModel (builder: Builder, options = { addApplication: true
     filter: chunter.filter.ChatMessagesFilter
   })
 
-  builder.mixin(chunter.class.ChatMessage, core.class.Class, activity.mixin.ActivityDoc, {})
-
   builder.mixin(chunter.class.DirectMessage, core.class.Class, view.mixin.ObjectIdentifier, {
     provider: chunter.function.DmIdentifierProvider
   })
@@ -639,6 +639,7 @@ export function createModel (builder: Builder, options = { addApplication: true
       input: 'focus',
       category: chunter.category.Chunter,
       target: activity.class.ActivityMessage,
+      visibilityTester: chunter.function.CanReplyToThread,
       context: { mode: 'context', application: notification.app.Notification, group: 'edit' }
     },
     chunter.action.ReplyToThread
@@ -677,6 +678,21 @@ export function createModel (builder: Builder, options = { addApplication: true
     ofClass: chunter.class.ChatMessage,
     components: { input: chunter.component.ChatMessageInput }
   })
+
+  builder.createDoc(activity.class.ActivityMessageExtension, core.space.Model, {
+    ofMessage: chunter.class.ChatMessage,
+    components: [{ kind: 'footer', component: chunter.component.Replies }]
+  })
+
+  builder.createDoc(activity.class.ActivityMessageExtension, core.space.Model, {
+    ofMessage: activity.class.DocUpdateMessage,
+    components: [{ kind: 'footer', component: chunter.component.Replies }]
+  })
+
+  builder.createDoc(activity.class.ActivityMessageExtension, core.space.Model, {
+    ofMessage: activity.class.ActivityInfoMessage,
+    components: [{ kind: 'footer', component: chunter.component.Replies }]
+  })
 }
 
 export default chunter
diff --git a/models/chunter/src/plugin.ts b/models/chunter/src/plugin.ts
index 9041a376b8..438567ea07 100644
--- a/models/chunter/src/plugin.ts
+++ b/models/chunter/src/plugin.ts
@@ -75,7 +75,6 @@ export default mergeIds(chunterId, chunter, {
     ConfigLabel: '' as IntlString,
     ConfigDescription: '' as IntlString,
     Reacted: '' as IntlString,
-    Saved: '' as IntlString,
     RepliedToThread: '' as IntlString
   },
   viewlet: {
@@ -107,6 +106,8 @@ export default mergeIds(chunterId, chunter, {
     GetFragment: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<Location>>,
     DmIdentifierProvider: '' as Resource<<T extends Doc>(client: Client, ref: Ref<T>, doc?: T) => Promise<string>>,
     CanDeleteMessage: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
+    CanReplyToThread: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
+    CanCopyMessageLink: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
     GetChunterSpaceLinkFragment: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<Location>>
   },
   filter: {
diff --git a/models/notification/src/index.ts b/models/notification/src/index.ts
index 03e0622ca4..eeedda3428 100644
--- a/models/notification/src/index.ts
+++ b/models/notification/src/index.ts
@@ -203,11 +203,9 @@ export class TDocNotifyContext extends TDoc implements DocNotifyContext {
     hidden!: boolean
 
   @Prop(TypeDate(), core.string.Date)
-  @Index(IndexKind.Indexed)
     lastViewedTimestamp?: Timestamp
 
   @Prop(TypeDate(), core.string.Date)
-  @Index(IndexKind.Indexed)
     lastUpdateTimestamp?: Timestamp
 
   @Prop(TypeBoolean(), notification.string.Pinned)
@@ -337,7 +335,8 @@ export function createModel (builder: Builder): void {
       alias: inboxId,
       hidden: true,
       locationResolver: notification.resolver.Location,
-      component: notification.component.Inbox
+      component: notification.component.Inbox,
+      aside: chunter.component.ThreadView
     },
     notification.app.Inbox
   )
diff --git a/models/server-activity/src/migration.ts b/models/server-activity/src/migration.ts
index cde26e27a4..fb00113947 100644
--- a/models/server-activity/src/migration.ts
+++ b/models/server-activity/src/migration.ts
@@ -95,9 +95,7 @@ async function generateDocUpdateMessageByTx (
 
 async function createDocUpdateMessages (client: MigrationClient): Promise<void> {
   const activityDocs = await client.model.findAll(activity.mixin.ActivityDoc, {})
-  const activityDocClasses = activityDocs
-    .map(({ _id }) => _id)
-    .filter((_class) => !client.hierarchy.isDerived(_class, activity.class.ActivityMessage))
+  const activityDocClasses = activityDocs.map(({ _id }) => _id)
 
   const notificationControl = getActivityControl(client)
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 55ddcb22f1..38a46075bb 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -512,6 +512,7 @@ input.search {
 .mb-0 { margin-bottom: 0 !important; }
 .mb-1 { margin-bottom: .25rem; }
 .mb-2 { margin-bottom: .5rem; }
+.mb-2-5 { margin-bottom: .625rem; }
 .mb-3 { margin-bottom: .75rem; }
 .mb-4 { margin-bottom: 1rem; }
 .mb-6 { margin-bottom: 1.5rem; }
diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss
index a39c2340e7..5335e00f2c 100644
--- a/packages/theme/styles/_lumia-colors.scss
+++ b/packages/theme/styles/_lumia-colors.scss
@@ -49,6 +49,8 @@
   --global-focus-BorderColor: #2A59D6;
   --global-popover-ShadowColor: #0E131E59;
   --global-modal-ShadowColor: #0E131E73;
+  --global-higlight-Color: #F76E53;
+  --global-accent-SkyText: #B9D1F5;
 
   /** Buttons **/
   --button-subtle-LabelColor: #fff;
@@ -104,6 +106,8 @@
   --global-focus-BorderColor: #204DC8;
   --global-popover-ShadowColor: #0E131E1F;
   --global-modal-ShadowColor: #0E131E14;
+  --global-higlight-Color: #F76E53;
+  --global-accent-SkyText:#B9D1F5;
 
   /** Buttons **/
   --button-subtle-LabelColor: #000;
diff --git a/packages/ui/src/components/Breadcrumb.svelte b/packages/ui/src/components/Breadcrumb.svelte
index 76672cb4c8..8a45e2b132 100644
--- a/packages/ui/src/components/Breadcrumb.svelte
+++ b/packages/ui/src/components/Breadcrumb.svelte
@@ -20,6 +20,9 @@
   import Label from './Label.svelte'
 
   export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconProps: any | undefined = undefined
+  export let iconWidth: string | undefined = undefined
+  export let withoutIconBackground = false
   export let label: IntlString | undefined = undefined
   export let title: string | undefined = undefined
   export let size: 'large' | 'small'
@@ -28,8 +31,8 @@
 
 <button class="hulyBreadcrumb-container {size}" class:current={isCurrent} on:click>
   {#if size === 'large' && icon}
-    <div class="hulyBreadcrumb-avatar">
-      <Icon {icon} size={'small'} />
+    <div class="hulyBreadcrumb-avatar" style:width={iconWidth ?? null} class:withoutIconBackground>
+      <Icon {icon} size={'small'} {iconProps} />
     </div>
   {/if}
   <span class="{size === 'large' ? 'heading-medium-16' : 'font-regular-14'} hulyBreadcrumb-label overflow-label">
@@ -64,6 +67,10 @@
       color: var(--global-secondary-TextColor);
       background-color: var(--global-ui-BackgroundColor);
       border-radius: var(--extra-small-BorderRadius);
+
+      &.withoutIconBackground {
+        background-color: transparent;
+      }
     }
     .hulyBreadcrumb-label {
       color: var(--global-secondary-TextColor);
diff --git a/packages/ui/src/components/Breadcrumbs.svelte b/packages/ui/src/components/Breadcrumbs.svelte
index 40f3dd56c8..17710e05e8 100644
--- a/packages/ui/src/components/Breadcrumbs.svelte
+++ b/packages/ui/src/components/Breadcrumbs.svelte
@@ -22,6 +22,9 @@
 
   interface BreadcrumbItem {
     icon?: Asset | AnySvelteComponent | ComponentType
+    iconProps?: any
+    iconWidth?: string
+    withoutIconBackground?: boolean
     label?: IntlString
     title?: string
   }
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
index fc2a646299..d70edc4d41 100644
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@@ -21,6 +21,7 @@
   export let addClass: string | undefined = undefined
   export let noScroll: boolean = false
   export let kind: 'default' | 'thin' = 'default'
+  export let colorsSchema: 'default' | 'lumia' = 'default'
   export let updateOnMouse = true
 
   const refs: HTMLElement[] = []
@@ -75,6 +76,8 @@
       <div
         class="list-item{addClass ? ` ${addClass}` : ''}"
         class:selection={row === selection}
+        class:lumia={colorsSchema === 'lumia'}
+        class:default={colorsSchema === 'default'}
         on:mouseover={mouseAttractor(() => {
           if (updateOnMouse) {
             onRow(row)
@@ -105,8 +108,17 @@
       margin: 0 0.5rem;
       min-width: 0;
       border-radius: 0.25rem;
-      &:hover {
-        background-color: var(--theme-popup-divider);
+
+      &.default {
+        &:hover {
+          background-color: var(--theme-popup-divider);
+        }
+      }
+
+      &.lumia {
+        &:hover {
+          background-color: var(--global-ui-highlight-BackgroundColor);
+        }
       }
     }
     &.thin {
@@ -118,8 +130,15 @@
         margin-top: 0.375rem;
       }
     }
+
     .selection {
-      background-color: var(--theme-popup-hover);
+      &.default {
+        background-color: var(--theme-popup-hover);
+      }
+
+      &.lumia {
+        background-color: var(--global-ui-highlight-BackgroundColor);
+      }
     }
   }
 </style>
diff --git a/packages/ui/src/components/ModeSelector.svelte b/packages/ui/src/components/ModeSelector.svelte
index ee530c03f5..0bda0c527b 100644
--- a/packages/ui/src/components/ModeSelector.svelte
+++ b/packages/ui/src/components/ModeSelector.svelte
@@ -2,7 +2,10 @@
   import TabList from './TabList.svelte'
   import { IModeSelector } from '../utils'
 
-  export let props: IModeSelector<T>
+  export let props: IModeSelector
+  export let kind: 'separated' | 'separated-free' = 'separated'
+  export let expansion: 'stretch' | 'default' = 'default'
+  export let padding: string | undefined = undefined
 
   $: modeList = props.config.map((c) => {
     return {
@@ -16,12 +19,13 @@
   })
 </script>
 
-<div class="ac-header withoutBackground tabs-start full">
+<div class="ac-header withoutBackground tabs-start full" style:padding>
   <TabList
     items={modeList}
     selected={props.mode}
-    kind={'separated'}
-    adaptiveShrink={'sm'}
+    {kind}
+    {expansion}
+    adaptiveShrink="sm"
     on:select={(result) => {
       if (result.detail !== undefined && result.detail.action) result.detail.action()
     }}
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 6d1ff49461..b5d18b0890 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -17,7 +17,7 @@
   import { afterUpdate, beforeUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte'
   import { resizeObserver } from '../resize'
   import { closeTooltip, tooltipstore } from '../tooltips'
-  import type { FadeOptions } from '../types'
+  import type { FadeOptions, ScrollParams } from '../types'
   import { defaultSP } from '../types'
   import { DelayedCaller } from '../utils'
   import IconDownOutline from './icons/DownOutline.svelte'
@@ -39,9 +39,11 @@
   export let buttons: 'normal' | 'union' | false = false
   export let shrink: boolean = false
   export let divScroll: HTMLElement | undefined | null = undefined
+  export let divBox: HTMLElement | undefined = undefined
   export let checkForHeaders: boolean = false
   export let stickedScrollBars: boolean = false
   export let thinScrollBars: boolean = false
+  export let onScroll: ((params: ScrollParams) => void) | undefined = undefined
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
     if (divScroll) {
@@ -65,7 +67,6 @@
   let maskH: 'left' | 'right' | 'both' | 'none' = 'none'
 
   let divHScroll: HTMLElement
-  let divBox: HTMLElement
   let divBar: HTMLElement
   let divBarH: HTMLElement
   let isScrolling: 'vertical' | 'horizontal' | false = false
@@ -74,8 +75,8 @@
   let beforeContent: number | undefined = undefined
   let leftContent: number | undefined = undefined
   let rightContent: number | undefined = undefined
-  let scrolling: boolean = autoscroll
-  let firstScroll: boolean = autoscroll
+  $: scrolling = autoscroll
+  let firstScroll = autoscroll
   let orientir: 'vertical' | 'horizontal' = 'vertical'
 
   let timer: any | undefined = undefined
@@ -162,7 +163,7 @@
     }
   }
 
-  const onScroll = (event: MouseEvent): void => {
+  const handleScroll = (event: MouseEvent): void => {
     scrolling = false
     if (
       (divBar == null && isScrolling === 'vertical') ||
@@ -198,7 +199,7 @@
     }
   }
   const onScrollEnd = (): void => {
-    document.removeEventListener('mousemove', onScroll)
+    document.removeEventListener('mousemove', handleScroll)
     document.body.style.userSelect = 'auto'
     document.body.style.webkitUserSelect = 'auto'
     document.removeEventListener('mouseup', onScrollEnd)
@@ -209,7 +210,7 @@
     scrolling = false
     dXY = direction === 'vertical' ? event.offsetY : event.offsetX
     document.addEventListener('mouseup', onScrollEnd)
-    document.addEventListener('mousemove', onScroll)
+    document.addEventListener('mousemove', handleScroll)
     document.body.style.userSelect = 'none'
     document.body.style.webkitUserSelect = 'none'
     isScrolling = direction
@@ -301,7 +302,11 @@
       divScroll.scrollTop = divScroll.scrollHeight - divHeight + 2
     }
   }
-  $: if (scrolling && belowContent && belowContent > 0) scrollDown()
+
+  $: if (scrolling && belowContent && belowContent > 0) {
+    firstScroll = false
+    scrollDown()
+  }
 
   const checkIntersection = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
     const interArr: Element[] = []
@@ -537,6 +542,9 @@
       class="scroll relative flex-shrink"
       style:overflow-x={horizontal ? 'auto' : 'hidden'}
       on:scroll={() => {
+        if (onScroll) {
+          onScroll({ autoScrolling: autoscroll && scrolling })
+        }
         if (
           $tooltipstore.label !== undefined ||
           ($tooltipstore.component !== undefined && $tooltipstore.kind !== 'submenu')
@@ -686,7 +694,7 @@
       &:hover,
       &:focus {
         color: var(--theme-caption-color);
-        background-color: ver(--theme-button-hovered);
+        background-color: var(--theme-button-hovered);
       }
     }
     .updown-down {
diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index 2c97be68bb..32dd38509b 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -25,6 +25,7 @@
   export let multiselect: boolean = false
   export let items: TabItem[]
   export let kind: 'normal' | 'regular' | 'plain' | 'separated' | 'separated-free' = 'normal'
+  export let expansion: 'stretch' | 'default' = 'default'
   export let onlyIcons: boolean = false
   export let size: 'small' | 'medium' = 'medium'
   export let adaptiveShrink: WidthType | null = null
@@ -67,7 +68,7 @@
     />
   {:else}
     <Scroller horizontal>
-      <div class="tablist-container {kind} {size}">
+      <div class="tablist-container {kind} {size} {expansion}">
         {#each items as item, i}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -78,6 +79,7 @@
             class:free={kind === 'separated-free'}
             class:onlyIcons
             class:selected={getSelected(item.id, selected)}
+            class:stretch={expansion === 'stretch'}
             data-view={item.tooltip}
             data-id={`tab-${item.id}`}
             use:tooltip={{ label: item.tooltip ?? undefined, element: tabs[i] ?? undefined }}
@@ -121,6 +123,10 @@
     align-items: center;
     width: fit-content;
 
+    &.stretch {
+      width: 100%;
+    }
+
     .button {
       position: relative;
       display: inline-flex;
@@ -181,6 +187,10 @@
       background-color: var(--theme-tablist-color);
       border-radius: 0.25rem;
 
+      &.stretch {
+        flex-grow: 1;
+      }
+
       .button {
         color: var(--theme-trans-color);
         border: 1px solid transparent;
@@ -202,6 +212,10 @@
       border: 1px solid var(--theme-button-border);
       border-radius: 0.25rem;
 
+      &.stretch {
+        flex-grow: 1;
+      }
+
       .button {
         background-color: transparent;
         border-radius: calc(0.25rem - 1px);
@@ -237,6 +251,10 @@
       border-top: 2px solid transparent;
       border-bottom: 2px solid transparent;
 
+      &.stretch {
+        flex-grow: 1;
+      }
+
       &:not(.selected) {
         cursor: pointer;
       }
diff --git a/packages/ui/src/components/icons/Right.svelte b/packages/ui/src/components/icons/Right.svelte
new file mode 100644
index 0000000000..9df5a7ee88
--- /dev/null
+++ b/packages/ui/src/components/icons/Right.svelte
@@ -0,0 +1,26 @@
+<!--
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.79336 4.36074C6.18388 3.97021 6.81704 3.97021 7.20757 4.36074L10.8803 8.03392L7.20711 11.7071C6.81658 12.0976 6.18342 12.0976 5.79289 11.7071C5.40237 11.3166 5.40237 10.6834 5.79289 10.2929L8.05186 8.03392L5.79336 5.77495C5.40283 5.38443 5.40283 4.75126 5.79336 4.36074Z"
+  />
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index d38293d1a1..ed84173802 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -203,6 +203,7 @@ export { default as IconSettings } from './components/icons/Settings.svelte'
 export { default as IconSend } from './components/icons/Send.svelte'
 export { default as IconSquareExpand } from './components/icons/SquareExpand.svelte'
 export { default as IconTableOfContents } from './components/icons/TableOfContents.svelte'
+export { default as IconRight } from './components/icons/Right.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 52133c0c67..103602635b 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -508,3 +508,7 @@ export interface TimeZone {
  * @public
  */
 export type MouseTargetEvent = MouseEvent & { currentTarget: EventTarget & HTMLElement }
+
+export interface ScrollParams {
+  autoScrolling: boolean
+}
diff --git a/plugins/activity-assets/assets/icons.svg b/plugins/activity-assets/assets/icons.svg
index 57bc2628e3..5d3d704262 100644
--- a/plugins/activity-assets/assets/icons.svg
+++ b/plugins/activity-assets/assets/icons.svg
@@ -3,12 +3,14 @@
       <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2C12.4477 2 12 2.44772 12 3C12 3.55228 12.4477 4 13 4C13.5523 4 14 3.55228 14 3C14 2.44772 13.5523 2 13 2ZM11 3C11 1.89543 11.8954 1 13 1C14.1046 1 15 1.89543 15 3C15 4.10457 14.1046 5 13 5C11.8954 5 11 4.10457 11 3ZM2 4C2 2.89543 2.89543 2 4 2H9.5C9.77614 2 10 2.22386 10 2.5C10 2.77614 9.77614 3 9.5 3H4C3.44772 3 3 3.44772 3 4V12C3 12.5523 3.44772 13 4 13H12C12.5523 13 13 12.5523 13 12V6.5C13 6.22386 13.2239 6 13.5 6C13.7761 6 14 6.22386 14 6.5V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4ZM6.64645 6.64645C6.84171 6.45118 7.15829 6.45118 7.35355 6.64645L9 8.29289L10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645C11.0488 7.34171 11.0488 7.65829 10.8536 7.85355L9.35355 9.35355C9.15829 9.54882 8.84171 9.54882 8.64645 9.35355L7 7.70711L5.85355 8.85355C5.65829 9.04882 5.34171 9.04882 5.14645 8.85355C4.95118 8.65829 4.95118 8.34171 5.14645 8.14645L6.64645 6.64645Z"/>
   </symbol>
 
-  <symbol id="emoji" viewBox="0 0 24 24">
-    <path
-            d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM7.15467 12.4273C8.66416 13.9463 11.0877 14.0045 12.6671 12.5961L12.8453 12.4273C13.04 12.2314 13.3566 12.2304 13.5524 12.4251C13.7265 12.5981 13.7467 12.8674 13.6123 13.0627L13.5547 13.1322L13.5323 13.1545C11.5691 15.1054 8.39616 15.0953 6.44533 13.1322C6.25069 12.9363 6.25169 12.6197 6.44757 12.4251C6.64344 12.2304 6.96002 12.2314 7.15467 12.4273ZM12.5 7.5C13.0523 7.5 13.5 7.94772 13.5 8.5C13.5 9.05228 13.0523 9.5 12.5 9.5C11.9477 9.5 11.5 9.05228 11.5 8.5C11.5 7.94772 11.9477 7.5 12.5 7.5ZM7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5Z"
-    />
-  </symbol>
-  <symbol id="bookmark" viewBox="0 0 24 24">
-    <path d="M20,4.2h-2.2V2c0-0.4-0.3-0.8-0.8-0.8H4C3.6,1.2,3.2,1.6,3.2,2v17c0,0.3,0.1,0.5,0.4,0.6c0.2,0.1,0.5,0.1,0.7,0 l1.9-1V22c0,0.3,0.1,0.5,0.4,0.6c0.2,0.1,0.5,0.2,0.7,0l6.2-3l6.2,3c0.2,0.1,0.5,0.1,0.7,0c0.2-0.1,0.4-0.4,0.4-0.6V5 C20.8,4.6,20.4,4.2,20,4.2z M4.8,17.8v-15h11.5v1.5H7C6.6,4.2,6.2,4.6,6.2,5v12L4.8,17.8z M19.2,20.8l-5.4-2.6 c-0.2-0.1-0.4-0.1-0.7,0l-5.4,2.6V5.8h11.5V20.8z" />
-  </symbol>
+    <symbol id="emoji" viewBox="0 0 24 24">
+        <path
+                d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM7.15467 12.4273C8.66416 13.9463 11.0877 14.0045 12.6671 12.5961L12.8453 12.4273C13.04 12.2314 13.3566 12.2304 13.5524 12.4251C13.7265 12.5981 13.7467 12.8674 13.6123 13.0627L13.5547 13.1322L13.5323 13.1545C11.5691 15.1054 8.39616 15.0953 6.44533 13.1322C6.25069 12.9363 6.25169 12.6197 6.44757 12.4251C6.64344 12.2304 6.96002 12.2314 7.15467 12.4273ZM12.5 7.5C13.0523 7.5 13.5 7.94772 13.5 8.5C13.5 9.05228 13.0523 9.5 12.5 9.5C11.9477 9.5 11.5 9.05228 11.5 8.5C11.5 7.94772 11.9477 7.5 12.5 7.5ZM7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5Z"
+        />
+    </symbol>
+    <symbol id="bookmark" viewBox="0 0 20 20">
+        <path
+                d="M16.2,18c-0.1,0-0.2,0-0.3-0.1l-6-4l-6,4c-0.2,0.1-0.4,0.1-0.5,0c-0.2-0.1-0.3-0.3-0.3-0.4V4.2 C3.2,3,4.3,2,5.5,2h8.9c1.3,0,2.3,1,2.3,2.2v13.3c0,0.2-0.1,0.4-0.3,0.4C16.4,18,16.3,18,16.2,18z M10,12.8c0.1,0,0.2,0,0.3,0.1 l5.5,3.6V4.2c0-0.6-0.6-1.2-1.3-1.2H5.5C4.8,3,4.2,3.5,4.2,4.2v12.4l5.5-3.6C9.8,12.9,9.9,12.8,10,12.8z"
+        />
+    </symbol>
 </svg>
diff --git a/plugins/activity-resources/src/activityMessagesUtils.ts b/plugins/activity-resources/src/activityMessagesUtils.ts
index 11556b5ae9..104c2df386 100644
--- a/plugins/activity-resources/src/activityMessagesUtils.ts
+++ b/plugins/activity-resources/src/activityMessagesUtils.ts
@@ -23,20 +23,24 @@ import core, {
   type Hierarchy,
   type Mixin,
   type Ref,
-  SortingOrder,
-  type Timestamp
+  SortingOrder
 } from '@hcengineering/core'
 import view, { type AttributeModel } from '@hcengineering/view'
 import { getClient, getFiltredKeys } from '@hcengineering/presentation'
-import { buildRemovedDoc, getAttributePresenter, getDocLinkTitle } from '@hcengineering/view-resources'
+import {
+  buildRemovedDoc,
+  checkIsObjectRemoved,
+  getAttributePresenter,
+  getDocLinkTitle,
+  hasAttributePresenter
+} from '@hcengineering/view-resources'
 import { type Person } from '@hcengineering/contact'
-import { getResource, type IntlString } from '@hcengineering/platform'
+import { type IntlString } from '@hcengineering/platform'
 import { type AnyComponent } from '@hcengineering/ui'
 import { get } from 'svelte/store'
 import { personAccountByIdStore } from '@hcengineering/contact-resources'
 import activity, {
   type ActivityMessage,
-  type ActivityMessagesFilter,
   type DisplayActivityMessage,
   type DisplayDocUpdateMessage,
   type DocAttributeUpdates,
@@ -145,6 +149,44 @@ export async function getAttributeModel (
   return await getAttributePresenterSafe(client, attrObjectClass, attrKey)
 }
 
+export function hasAttributeModel (
+  client: Client,
+  attributeUpdates: DocAttributeUpdates | undefined,
+  objectClass: Ref<Class<Doc>>
+): boolean {
+  if (attributeUpdates === undefined) {
+    return false
+  }
+
+  const hierarchy = client.getHierarchy()
+
+  try {
+    const { attrKey, attrClass, isMixin } = attributeUpdates
+    let attrObjectClass = objectClass
+    if (isMixin) {
+      const keyedAttribute = getFiltredKeys(hierarchy, attrClass, []).find(({ key }) => key === attrKey)
+      if (keyedAttribute === undefined) {
+        return false
+      }
+      attrObjectClass = keyedAttribute.attr.attributeOf
+    }
+
+    const hasActivityAttrPresenter = hasAttributePresenter(
+      client,
+      attrObjectClass,
+      attrKey,
+      view.mixin.ActivityAttributePresenter
+    )
+
+    if (hasActivityAttrPresenter) {
+      return true
+    }
+    return hasAttributePresenter(client, attrObjectClass, attrKey)
+  } catch (e) {
+    return false
+  }
+}
+
 export function activityMessagesComparator (message1: ActivityMessage, message2: ActivityMessage): number {
   const time1 = getMessageTime(message1)
   const time2 = getMessageTime(message2)
@@ -178,17 +220,22 @@ function combineByCreateThreshold (docUpdateMessages: DocUpdateMessage[]): DocUp
   })
 }
 
-export function combineActivityMessages (
+export async function combineActivityMessages (
   messages: ActivityMessage[],
   sortingOrder: SortingOrder = SortingOrder.Ascending
-): DisplayActivityMessage[] {
+): Promise<DisplayActivityMessage[]> {
+  const client = getClient()
   const uncombinedMessages = messages.filter((message) => message._class !== activity.class.DocUpdateMessage)
 
   const docUpdateMessages = combineByCreateThreshold(
     messages.filter((message): message is DocUpdateMessage => message._class === activity.class.DocUpdateMessage)
   )
 
-  const result: DisplayActivityMessage[] = [...uncombinedMessages]
+  if (docUpdateMessages.length === 0) {
+    return sortActivityMessages(uncombinedMessages, sortingOrder)
+  }
+
+  const result: Array<DisplayActivityMessage | undefined> = [...uncombinedMessages]
 
   const groupedByType: Map<string, DocUpdateMessage[]> = groupByArray(docUpdateMessages, getDocUpdateMessageKey)
 
@@ -211,7 +258,44 @@ export function combineActivityMessages (
     result.push(...cantMerge)
   }
 
-  return sortActivityMessages(result, sortingOrder)
+  const viewlets = client.getModel().findAllSync(activity.class.DocUpdateMessageViewlet, {})
+
+  for (const [index, message] of result.entries()) {
+    if (message?._class !== activity.class.DocUpdateMessage) {
+      continue
+    }
+    const docUpdateMessage = message as DocUpdateMessage
+
+    if (
+      docUpdateMessage.action === 'update' &&
+      !hasAttributeModel(client, docUpdateMessage.attributeUpdates, docUpdateMessage.objectClass)
+    ) {
+      result[index] = undefined
+      continue
+    }
+
+    const hideIfRemoved = viewlets.some(
+      (viewlet) =>
+        viewlet.action === docUpdateMessage.action &&
+        viewlet.hideIfRemoved === true &&
+        viewlet.objectClass === docUpdateMessage.objectClass
+    )
+
+    if (!hideIfRemoved) {
+      continue
+    }
+
+    const isRemoved = await checkIsObjectRemoved(client, docUpdateMessage.objectId, docUpdateMessage.objectClass)
+
+    if (isRemoved) {
+      result[index] = undefined
+    }
+  }
+
+  return sortActivityMessages(
+    result.filter((msg): msg is DisplayActivityMessage => msg !== undefined),
+    sortingOrder
+  )
 }
 
 export function sortActivityMessages<T extends ActivityMessage> (messages: T[], order: SortingOrder): T[] {
@@ -464,47 +548,6 @@ export async function getMessageFragment (doc: Doc): Promise<string> {
   return `${label}-${doc._id}`
 }
 
-export async function filterActivityMessages (
-  messages: DisplayActivityMessage[],
-  filters: ActivityMessagesFilter[],
-  objectClass: Ref<Class<Doc>>,
-  filterId?: Ref<ActivityMessagesFilter>
-): Promise<DisplayActivityMessage[]> {
-  if (filterId === undefined || filterId === activity.ids.AllFilter) {
-    return messages
-  }
-
-  const filter = filters.find(({ _id }) => _id === filterId)
-
-  if (filter === undefined) {
-    return messages
-  }
-
-  const filterFn = await getResource(filter.filter)
-
-  return messages.filter((message) => filterFn(message, objectClass))
-}
-
-export function getClosestDateSelectorDate (date: Timestamp, scrollElement: HTMLDivElement): Timestamp | undefined {
-  const dateSelectors = scrollElement.getElementsByClassName('dateSelector')
-
-  if (dateSelectors === undefined || dateSelectors.length === 0) {
-    return
-  }
-
-  let closestDate: Timestamp | undefined = parseInt(dateSelectors[dateSelectors.length - 1].id)
-
-  for (const elem of Array.from(dateSelectors).reverse()) {
-    const curDate = parseInt(elem.id)
-    if (curDate < date) break
-    else if (curDate - date < closestDate - date) {
-      closestDate = curDate
-    }
-  }
-
-  return closestDate
-}
-
 export function isReactionMessage (message?: ActivityMessage): message is DocUpdateMessage {
   if (message === undefined) {
     return false
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index 77495b2812..a83106ed97 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -50,8 +50,10 @@
       activity.class.ActivityMessage,
       { attachedTo: objectId },
       (result: ActivityMessage[]) => {
-        activityMessages = combineActivityMessages(result, order)
-        isLoading = false
+        combineActivityMessages(result, order).then((messages) => {
+          activityMessages = messages
+          isLoading = false
+        })
       },
       {
         sort: {
diff --git a/plugins/activity-resources/src/components/ActivityMessageAction.svelte b/plugins/activity-resources/src/components/ActivityMessageAction.svelte
new file mode 100644
index 0000000000..8ac7d44c18
--- /dev/null
+++ b/plugins/activity-resources/src/components/ActivityMessageAction.svelte
@@ -0,0 +1,46 @@
+<!--
+// 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 { ActionIcon, type AnySvelteComponent } from '@hcengineering/ui'
+  import { Asset } from '@hcengineering/platform'
+  import { ComponentType } from 'svelte'
+
+  export let icon: Asset | AnySvelteComponent | ComponentType
+  export let iconProps: any | undefined = undefined
+  export let size: 'x-small' | 'small' | 'medium' | 'large' = 'medium'
+  export let action: (ev: MouseEvent) => Promise<void> | void = async () => {}
+  export let opened = false
+</script>
+
+<div class="action" class:opened>
+  <ActionIcon {icon} {size} {action} {iconProps} />
+</div>
+
+<style lang="scss">
+  .action {
+    padding: 0.125rem;
+    border-radius: 0.5rem;
+
+    &:hover {
+      color: var(--accent-color);
+      background: var(--global-ui-hover-BackgroundColor);
+    }
+
+    &.opened {
+      color: var(--accent-color);
+      background: var(--global-ui-hover-BackgroundColor);
+    }
+  }
+</style>
diff --git a/plugins/activity-resources/src/components/ActivityMessageActions.svelte b/plugins/activity-resources/src/components/ActivityMessageActions.svelte
new file mode 100644
index 0000000000..b0efc64b2e
--- /dev/null
+++ b/plugins/activity-resources/src/components/ActivityMessageActions.svelte
@@ -0,0 +1,90 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { Action, IconMoreV, showPopup } from '@hcengineering/ui'
+  import { Menu } from '@hcengineering/view-resources'
+  import activity, { ActivityMessage, ActivityMessageExtension } from '@hcengineering/activity'
+
+  import AddReactionAction from './reactions/AddReactionAction.svelte'
+  import SaveMessageAction from './SaveMessageAction.svelte'
+  import PinMessageAction from './PinMessageAction.svelte'
+  import ActivityMessageExtensionComponent from './activity-message/ActivityMessageExtension.svelte'
+  import ActivityMessageAction from './ActivityMessageAction.svelte'
+  import { isReactionMessage } from '../activityMessagesUtils'
+
+  export let message: ActivityMessage | undefined
+  export let extensions: ActivityMessageExtension[] = []
+  export let excludedActions: string[] = []
+  export let actions: Action[] = []
+  export let withActionMenu = true
+  export let withFlatActions = true
+
+  const dispatch = createEventDispatcher()
+
+  let isActionMenuOpened = false
+
+  function handleActionMenuOpened (): void {
+    isActionMenuOpened = true
+    dispatch('open')
+  }
+
+  function handleActionMenuClosed (): void {
+    isActionMenuOpened = false
+    dispatch('close')
+  }
+
+  function showMenu (ev: MouseEvent): void {
+    showPopup(
+      Menu,
+      {
+        object: message,
+        baseMenuClass: activity.class.ActivityMessage,
+        excludedActions,
+        actions
+      },
+      ev.target as HTMLElement,
+      handleActionMenuClosed
+    )
+    handleActionMenuOpened()
+  }
+</script>
+
+{#if message && (withFlatActions || withActionMenu)}
+  <div class="root">
+    {#if withFlatActions}
+      <AddReactionAction object={message} on:open on:close />
+      <PinMessageAction object={message} />
+      <SaveMessageAction object={message} />
+      <ActivityMessageExtensionComponent kind="action" {extensions} props={{ object: message }} on:close on:open />
+    {/if}
+    {#if withActionMenu}
+      <ActivityMessageAction icon={IconMoreV} action={showMenu} opened={isActionMenuOpened} />
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  .root {
+    display: flex;
+    align-items: center;
+    border-radius: 0.375rem;
+    border: 1px solid var(--global-subtle-ui-BorderColor);
+    padding: 0.125rem;
+    background: var(--global-surface-01-BackgroundColor);
+    box-shadow: 0.5rem 0.75rem 1rem 0.25rem var(--global-popover-ShadowColor);
+    height: fit-content;
+  }
+</style>
diff --git a/plugins/activity-resources/src/components/FilterPopup.svelte b/plugins/activity-resources/src/components/FilterPopup.svelte
index eb372a8d48..749dd7b0a5 100644
--- a/plugins/activity-resources/src/components/FilterPopup.svelte
+++ b/plugins/activity-resources/src/components/FilterPopup.svelte
@@ -23,6 +23,7 @@
 
   export let selectedFiltersRefs: Ref<ActivityMessagesFilter>[] | Ref<ActivityMessagesFilter> = activity.ids.AllFilter
   export let filters: ActivityMessagesFilter[] = []
+  export let showToggle = true
 
   const allId = activity.ids.AllFilter
 
@@ -130,15 +131,17 @@
   <div class="ap-space" />
   <div class="ap-scroll">
     <div class="ap-box" bind:this={popup}>
-      <div class="ml-3 mt-2 mb-2 mr-3">
-        <MiniToggle
-          bind:on={activityOrderNewestFirst}
-          label={activity.string.NewestFirst}
-          on:change={() => {
-            dispatch('update', { action: 'toggle', value: activityOrderNewestFirst })
-          }}
-        />
-      </div>
+      {#if showToggle}
+        <div class="ml-3 mt-2 mb-2 mr-3">
+          <MiniToggle
+            bind:on={activityOrderNewestFirst}
+            label={activity.string.NewestFirst}
+            on:change={() => {
+              dispatch('update', { action: 'toggle', value: activityOrderNewestFirst })
+            }}
+          />
+        </div>
+      {/if}
       <!-- svelte-ignore a11y-mouse-events-have-key-events -->
       {#each menu as item, i}
         <button
diff --git a/plugins/activity-resources/src/components/activity-message/PinMessageAction.svelte b/plugins/activity-resources/src/components/PinMessageAction.svelte
similarity index 92%
rename from plugins/activity-resources/src/components/activity-message/PinMessageAction.svelte
rename to plugins/activity-resources/src/components/PinMessageAction.svelte
index e810b02081..210d704795 100644
--- a/plugins/activity-resources/src/components/activity-message/PinMessageAction.svelte
+++ b/plugins/activity-resources/src/components/PinMessageAction.svelte
@@ -13,10 +13,10 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { ActionIcon } from '@hcengineering/ui'
   import { getClient } from '@hcengineering/presentation'
   import view from '@hcengineering/view'
   import { ActivityMessage } from '@hcengineering/activity'
+  import ActivityMessageAction from './ActivityMessageAction.svelte'
 
   export let object: ActivityMessage
 
@@ -27,9 +27,8 @@
   }
 </script>
 
-<ActionIcon
+<ActivityMessageAction
   icon={view.icon.Pin}
   iconProps={object.isPinned ? { fill: '#3265cb' } : undefined}
-  size="medium"
   action={toggleMessagePinning}
 />
diff --git a/plugins/activity-resources/src/components/SaveMessageAction.svelte b/plugins/activity-resources/src/components/SaveMessageAction.svelte
index b6fba5c546..227f16b794 100644
--- a/plugins/activity-resources/src/components/SaveMessageAction.svelte
+++ b/plugins/activity-resources/src/components/SaveMessageAction.svelte
@@ -19,6 +19,7 @@
   import preference from '@hcengineering/preference'
 
   import Bookmark from './icons/Bookmark.svelte'
+  import ActivityMessageAction from './ActivityMessageAction.svelte'
 
   export let object: ActivityMessage
 
@@ -43,9 +44,8 @@
   }
 </script>
 
-<ActionIcon
+<ActivityMessageAction
   icon={Bookmark}
   iconProps={savedMessage ? { fill: '#3265cb' } : undefined}
-  size="medium"
   action={toggleSaveMessage}
 />
diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte b/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte
index 0b47be2517..f41d514423 100644
--- a/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte
+++ b/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte
@@ -27,7 +27,7 @@
   export let embedded: boolean = false
   export let withActions: boolean = true
   export let showEmbedded = false
-  export let hideReplies = false
+  export let hideFooter = false
   export let skipLabel = false
   export let actions: Action[] = []
   export let excludedActions: string[] = []
@@ -55,7 +55,7 @@
       embedded,
       withActions,
       showEmbedded,
-      hideReplies,
+      hideFooter,
       actions,
       excludedActions,
       withFlatActions,
diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte b/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
index aef4ea5cbc..7fbe0f63d4 100644
--- a/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
+++ b/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
@@ -22,16 +22,14 @@
   import { Avatar, EmployeePresenter, SystemAvatar } from '@hcengineering/contact-resources'
   import core, { getDisplayTime } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { Action, ActionIcon, IconMoreH, Label, showPopup } from '@hcengineering/ui'
-  import { Menu, getActions } from '@hcengineering/view-resources'
+  import { Action, Label } from '@hcengineering/ui'
+  import { getActions } from '@hcengineering/view-resources'
 
-  import AddReactionAction from '../reactions/AddReactionAction.svelte'
   import ReactionsPresenter from '../reactions/ReactionsPresenter.svelte'
   import ActivityMessageExtensionComponent from './ActivityMessageExtension.svelte'
   import ActivityMessagePresenter from './ActivityMessagePresenter.svelte'
-  import PinMessageAction from './PinMessageAction.svelte'
-  import Replies from '../Replies.svelte'
-  import SaveMessageAction from '../SaveMessageAction.svelte'
+  import ActivityMessageActions from '../ActivityMessageActions.svelte'
+  import { isReactionMessage } from '../../activityMessagesUtils'
 
   export let message: DisplayActivityMessage
   export let parentMessage: DisplayActivityMessage | undefined = undefined
@@ -48,9 +46,10 @@
   export let withActions: boolean = true
   export let withFlatActions: boolean = true
   export let showEmbedded = false
-  export let hideReplies = false
+  export let hideFooter = false
   export let skipLabel = false
   export let hoverable = true
+  export let hoverStyles: 'borderedHover' | 'filledHover' = 'filledHover'
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -59,7 +58,7 @@
 
   let element: HTMLDivElement | undefined = undefined
   let extensions: ActivityMessageExtension[] = []
-  let isActionMenuOpened = false
+  let isActionsOpened = false
 
   $: withActions &&
     getActions(client, message, activity.class.ActivityMessage).then((res) => {
@@ -83,31 +82,16 @@
       extensions = res
     })
 
-  function handleActionMenuOpened (): void {
-    isActionMenuOpened = true
+  function handleActionsOpened (): void {
+    isActionsOpened = true
   }
 
-  function handleActionMenuClosed (): void {
-    isActionMenuOpened = false
+  function handleActionsClosed (): void {
+    isActionsOpened = false
   }
 
   $: key = parentMessage != null ? `${message._id}_${parentMessage._id}` : message._id
 
-  function showMenu (ev: MouseEvent): void {
-    showPopup(
-      Menu,
-      {
-        object: message,
-        baseMenuClass: activity.class.ActivityMessage,
-        excludedActions,
-        actions
-      },
-      ev.target as HTMLElement,
-      handleActionMenuClosed
-    )
-    handleActionMenuOpened()
-  }
-
   $: isHidden = !!viewlet?.onlyWithParent && parentMessage === undefined
   $: withActionMenu =
     withActions && !embedded && (actions.length > 0 || allActionIds.some((id) => !excludedActions.includes(id)))
@@ -120,12 +104,15 @@
     <div
       bind:this={element}
       id={message._id}
-      class="root clear-mins"
+      class="activityMessage clear-mins"
       class:clickable={!!onClick}
       class:highlighted={isHighlighted}
       class:selected={isSelected}
       class:hoverable
       class:embedded
+      class:actionsOpened={isActionsOpened}
+      class:borderedHover={hoverStyles === 'borderedHover'}
+      class:filledHover={hoverStyles === 'filledHover'}
       on:click={onClick}
     >
       {#if showNotify && !embedded}
@@ -162,43 +149,34 @@
 
         <slot name="content" />
 
-        {#if !hideReplies && message.replies && message.replies > 0}
-          <div class="mt-2" />
-          <Replies {message} {onReply} />
+        {#if !hideFooter}
+          <ActivityMessageExtensionComponent
+            kind="footer"
+            {extensions}
+            props={{ object: message, embedded, onReply }}
+          />
         {/if}
-        <ActivityMessageExtensionComponent kind="footer" {extensions} props={{ object: message }} />
-
         <ReactionsPresenter object={message} />
         {#if parentMessage && showEmbedded}
           <div class="mt-2" />
-          <ActivityMessagePresenter value={parentMessage} embedded hideReplies withActions={false} />
+          <ActivityMessagePresenter value={parentMessage} embedded hideFooter withActions={false} />
         {/if}
       </div>
 
-      <div
-        class="actions clear-mins flex flex-gap-2 items-center"
-        class:opened={isActionMenuOpened || message.isPinned}
-      >
-        {#if withActions}
-          <AddReactionAction object={message} on:open={handleActionMenuOpened} on:close={handleActionMenuClosed} />
-
-          {#if withFlatActions}
-            <PinMessageAction object={message} />
-            <SaveMessageAction object={message} />
-
-            <ActivityMessageExtensionComponent
-              kind="action"
-              {extensions}
-              props={{ object: message }}
-              on:close={handleActionMenuClosed}
-              on:open={handleActionMenuOpened}
-            />
-          {/if}
-          {#if withActionMenu}
-            <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
-          {/if}
-        {/if}
-      </div>
+      {#if withActions}
+        <div class="actions" class:opened={isActionsOpened}>
+          <ActivityMessageActions
+            message={isReactionMessage(message) ? parentMessage : message}
+            {extensions}
+            {actions}
+            {withActionMenu}
+            {withFlatActions}
+            {excludedActions}
+            on:open={handleActionsOpened}
+            on:close={handleActionsClosed}
+          />
+        </div>
+      {/if}
     </div>
   {/key}
 {/if}
@@ -210,13 +188,13 @@
     }
   }
 
-  .root {
+  .activityMessage {
     position: relative;
     display: flex;
     flex-shrink: 0;
-    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
+    padding: 0.75rem 0.75rem 0.75rem 1rem;
     gap: 1rem;
-    overflow: hidden;
+    //overflow: hidden;
     border: 1px solid transparent;
     border-radius: 0.25rem;
     width: 100%;
@@ -242,9 +220,8 @@
     .actions {
       position: absolute;
       visibility: hidden;
-      top: 0.75rem;
+      top: -0.75rem;
       right: 0.75rem;
-      color: var(--theme-halfcontent-color);
 
       &.opened {
         visibility: visible;
@@ -259,9 +236,25 @@
       visibility: visible;
     }
 
+    &.actionsOpened {
+      &.borderedHover {
+        border: 1px solid var(--highlight-hover);
+      }
+
+      &.filledHover {
+        background-color: var(--global-ui-BackgroundColor);
+      }
+    }
+
     &.hoverable {
       &:hover:not(.embedded) {
-        border: 1px solid var(--highlight-hover);
+        &.borderedHover {
+          border: 1px solid var(--highlight-hover);
+        }
+
+        &.filledHover {
+          background-color: var(--global-ui-BackgroundColor);
+        }
       }
     }
   }
diff --git a/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessageContent.svelte b/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessageContent.svelte
index deb12f2b0e..9646b93f38 100644
--- a/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessageContent.svelte
+++ b/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessageContent.svelte
@@ -24,7 +24,7 @@
 
   export let message: DisplayDocUpdateMessage
   export let viewlet: DocUpdateMessageViewlet | undefined
-  export let objectName: IntlString
+  export let objectName: IntlString | undefined
   export let collectionName: IntlString | undefined
   export let collectionAttribute: Attribute<Collection<AttachedDoc>> | undefined = undefined
 
@@ -55,7 +55,7 @@
   <span class="lower">
     {#if collectionName && (message.previousMessages?.length || !isOwn)}
       <Label label={collectionName} />:
-    {:else}
+    {:else if objectName}
       <Label label={objectName} />:
     {/if}
   </span>
diff --git a/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessagePresenter.svelte b/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessagePresenter.svelte
index b1f7ac66ff..f3f6de6b8b 100644
--- a/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessagePresenter.svelte
+++ b/plugins/activity-resources/src/components/doc-update-message/DocUpdateMessagePresenter.svelte
@@ -44,7 +44,7 @@
   export let embedded: boolean = false
   export let withActions: boolean = true
   export let showEmbedded = false
-  export let hideReplies = false
+  export let hideFooter = false
   export let actions: Action[] = []
   export let skipLabel = false
   export let withFlatActions: boolean = true
@@ -75,10 +75,6 @@
   let object: Doc | undefined
   let isObjectRemoved: boolean = false
 
-  let isObjectLoading = true
-
-  $: isLoading = isObjectLoading
-
   $: [viewlet] = client
     .getModel()
     .findAllSync(activity.class.DocUpdateMessageViewlet, { action: value.action, objectClass: value.objectClass })
@@ -111,10 +107,8 @@
 
     if (isObjectRemoved) {
       object = await buildRemovedDoc(client, _id, _class)
-      isObjectLoading = false
     } else {
       objectQuery.query(_class, { _id }, (res) => {
-        isObjectLoading = false
         object = res[0]
       })
     }
@@ -144,67 +138,65 @@
   }
 </script>
 
-{#if !isLoading && (!(viewlet?.hideIfRemoved ?? false) || !isObjectRemoved) && (value.action !== 'update' || attributeModel !== undefined)}
-  <ActivityMessageTemplate
-    message={value}
-    {parentMessage}
-    {person}
-    {showNotify}
-    {isHighlighted}
-    {isSelected}
-    {shouldScroll}
-    {embedded}
-    {excludedActions}
-    {withActions}
-    {viewlet}
-    {showEmbedded}
-    {hideReplies}
-    {actions}
-    {skipLabel}
-    {withFlatActions}
-    {hoverable}
-    {onClick}
-    {onReply}
-  >
-    <svelte:fragment slot="header">
-      {#if viewlet?.labelComponent}
-        <Component is={viewlet.labelComponent} props={{ value: object }} />
-      {:else}
-        <DocUpdateMessageHeader
-          message={value}
-          {object}
-          {parentObject}
-          {viewlet}
-          {person}
-          {objectName}
-          {collectionName}
-          {attributeModel}
-        />
-      {/if}
-    </svelte:fragment>
-    <svelte:fragment slot="content">
-      {#if viewlet?.component}
-        <ShowMore>
-          <div class="customContent">
-            {#each value?.previousMessages ?? [] as msg}
-              <Component is={viewlet.component} props={{ message: msg, _id: msg.objectId, _class: msg.objectClass }} />
-            {/each}
-            <Component
-              is={viewlet.component}
-              props={{ message: value, _id: value.objectId, _class: value.objectClass, value: object }}
-            />
-          </div>
-        </ShowMore>
-      {:else if value.action === 'create' || value.action === 'remove'}
-        <ShowMore>
-          <DocUpdateMessageContent message={value} {viewlet} {objectName} {collectionName} {collectionAttribute} />
-        </ShowMore>
-      {:else if value.attributeUpdates && attributeModel}
-        <DocUpdateMessageAttributes attributeUpdates={value.attributeUpdates} {attributeModel} {viewlet} />
-      {/if}
-    </svelte:fragment>
-  </ActivityMessageTemplate>
-{/if}
+<ActivityMessageTemplate
+  message={value}
+  {parentMessage}
+  {person}
+  {showNotify}
+  {isHighlighted}
+  {isSelected}
+  {shouldScroll}
+  {embedded}
+  {excludedActions}
+  {withActions}
+  {viewlet}
+  {showEmbedded}
+  {hideFooter}
+  {actions}
+  {skipLabel}
+  {withFlatActions}
+  {hoverable}
+  {onClick}
+  {onReply}
+>
+  <svelte:fragment slot="header">
+    {#if viewlet?.labelComponent && object}
+      <Component is={viewlet.labelComponent} props={{ value: object }} />
+    {:else if object}
+      <DocUpdateMessageHeader
+        message={value}
+        {object}
+        {parentObject}
+        {viewlet}
+        {person}
+        {objectName}
+        {collectionName}
+        {attributeModel}
+      />
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="content">
+    {#if viewlet?.component && object}
+      <ShowMore>
+        <div class="customContent">
+          {#each value?.previousMessages ?? [] as msg}
+            <Component is={viewlet.component} props={{ message: msg, _id: msg.objectId, _class: msg.objectClass }} />
+          {/each}
+          <Component
+            is={viewlet.component}
+            props={{ message: value, _id: value.objectId, _class: value.objectClass, value: object }}
+          />
+        </div>
+      </ShowMore>
+    {:else if value.action === 'create' || value.action === 'remove'}
+      <ShowMore>
+        <DocUpdateMessageContent message={value} {viewlet} {objectName} {collectionName} {collectionAttribute} />
+      </ShowMore>
+    {:else if value.attributeUpdates && attributeModel}
+      <DocUpdateMessageAttributes attributeUpdates={value.attributeUpdates} {attributeModel} {viewlet} />
+    {/if}
+  </svelte:fragment>
+</ActivityMessageTemplate>
 
 <style lang="scss">
   .customContent {
diff --git a/plugins/activity-resources/src/components/reactions/AddReactionAction.svelte b/plugins/activity-resources/src/components/reactions/AddReactionAction.svelte
index 9c7cbf210d..4fc6e5349a 100644
--- a/plugins/activity-resources/src/components/reactions/AddReactionAction.svelte
+++ b/plugins/activity-resources/src/components/reactions/AddReactionAction.svelte
@@ -19,6 +19,7 @@
   import activity, { ActivityMessage, Reaction } from '@hcengineering/activity'
 
   import { updateDocReactions } from '../../utils'
+  import ActivityMessageAction from '../ActivityMessageAction.svelte'
 
   export let object: ActivityMessage | undefined = undefined
 
@@ -28,6 +29,7 @@
   const dispatch = createEventDispatcher()
 
   let reactions: Reaction[] = []
+  let isOpened = false
 
   $: if (object) {
     reactionsQuery.query(activity.class.Reaction, { attachedTo: object._id }, (res?: Reaction[]) => {
@@ -39,9 +41,12 @@
     dispatch('open')
     showPopup(EmojiPopup, {}, ev.target as HTMLElement, (emoji: string) => {
       updateDocReactions(client, reactions, object, emoji)
+      isOpened = false
       dispatch('close')
     })
+
+    isOpened = true
   }
 </script>
 
-<ActionIcon icon={IconEmoji} size="medium" action={openEmojiPalette} />
+<ActivityMessageAction icon={IconEmoji} action={openEmojiPalette} opened={isOpened} />
diff --git a/plugins/activity-resources/src/components/reactions/ReactionNotificationPresenter.svelte b/plugins/activity-resources/src/components/reactions/ReactionNotificationPresenter.svelte
index 37db630d7a..8c2e00959a 100644
--- a/plugins/activity-resources/src/components/reactions/ReactionNotificationPresenter.svelte
+++ b/plugins/activity-resources/src/components/reactions/ReactionNotificationPresenter.svelte
@@ -41,10 +41,9 @@
 
   function handleReply (): void {
     const loc = getLocation()
-
-    loc.fragment = notification.docNotifyContext
-    loc.query = { thread: parentMessage?._id ?? message._id }
-
+    loc.path[3] = notification.docNotifyContext
+    loc.path[4] = parentMessage?._id ?? message._id
+    loc.query = { message: parentMessage?._id ?? message._id }
     navigate(loc)
   }
 </script>
@@ -57,7 +56,6 @@
     {withActions}
     {actions}
     {excludedActions}
-    withFlatActions={false}
     hoverable={false}
     onReply={handleReply}
     {onClick}
@@ -72,7 +70,6 @@
     {actions}
     {excludedActions}
     hoverable={false}
-    withFlatActions={false}
     onReply={handleReply}
     {onClick}
   />
diff --git a/plugins/activity-resources/src/index.ts b/plugins/activity-resources/src/index.ts
index 85a9660d31..cad101800b 100644
--- a/plugins/activity-resources/src/index.ts
+++ b/plugins/activity-resources/src/index.ts
@@ -33,12 +33,13 @@ export { default as Reactions } from './components/reactions/Reactions.svelte'
 export { default as ActivityMessageTemplate } from './components/activity-message/ActivityMessageTemplate.svelte'
 export { default as ActivityMessagePresenter } from './components/activity-message/ActivityMessagePresenter.svelte'
 export { default as ActivityExtension } from './components/ActivityExtension.svelte'
-export { default as ActivityScrolledView } from './components/ActivityScrolledView.svelte'
 export { default as ActivityDocLink } from './components/ActivityDocLink.svelte'
 export { default as ReactionPresenter } from './components/reactions/ReactionPresenter.svelte'
 export { default as ActivityMessageNotificationLabel } from './components/activity-message/ActivityMessageNotificationLabel.svelte'
 export { default as ActivityMessageHeader } from './components/activity-message/ActivityMessageHeader.svelte'
 export { default as AddReactionAction } from './components/reactions/AddReactionAction.svelte'
+export { default as ActivityMessageAction } from './components/ActivityMessageAction.svelte'
+export { default as ActivityMessagesFilterPopup } from './components/FilterPopup.svelte'
 
 export default async (): Promise<Resources> => ({
   component: {
diff --git a/plugins/activity-resources/src/utils.ts b/plugins/activity-resources/src/utils.ts
index d296249e2f..b09ac26a4d 100644
--- a/plugins/activity-resources/src/utils.ts
+++ b/plugins/activity-resources/src/utils.ts
@@ -1,5 +1,5 @@
 import { get } from 'svelte/store'
-import type { DisplayTx, Reaction, TxViewlet } from '@hcengineering/activity'
+import type { ActivityMessage, DisplayTx, Reaction, TxViewlet } from '@hcengineering/activity'
 import core, {
   type AttachedDoc,
   type Class,
@@ -21,7 +21,13 @@ import core, {
 } from '@hcengineering/core'
 import { type Asset, type IntlString, getResource, translate } from '@hcengineering/platform'
 import { getAttributePresenterClass } from '@hcengineering/presentation'
-import { type AnyComponent, type AnySvelteComponent, ErrorPresenter, themeStore } from '@hcengineering/ui'
+import {
+  type AnyComponent,
+  type AnySvelteComponent,
+  ErrorPresenter,
+  themeStore,
+  type Location
+} from '@hcengineering/ui'
 import view, { type AttributeModel, type BuildModelKey, type BuildModelOptions } from '@hcengineering/view'
 import { getObjectPresenter } from '@hcengineering/view-resources'
 
@@ -417,3 +423,7 @@ export async function updateDocReactions (
     await client.remove(reaction)
   }
 }
+
+export function getMessageFromLoc (loc: Location): Ref<ActivityMessage> | undefined {
+  return (loc.query?.message ?? undefined) as Ref<ActivityMessage> | undefined
+}
diff --git a/plugins/chunter-assets/lang/en.json b/plugins/chunter-assets/lang/en.json
index 47959c0de0..ffd8267df0 100644
--- a/plugins/chunter-assets/lang/en.json
+++ b/plugins/chunter-assets/lang/en.json
@@ -38,7 +38,7 @@
     "TurnOffReplies": "Turn off notifications for replies",
     "PinMessage": "Pin message",
     "UnpinMessage": "Unpin message",
-    "Pinned": "Pinned:",
+    "Pinned": "Pinned",
     "EditMessage": "Edit message",
     "Edited": "edited",
     "DeleteMessage": "Delete message",
@@ -56,12 +56,12 @@
     "SharedBy": "Shared by {name} {time}",
     "LeaveChannel": "Leave channel",
     "ChannelBrowser": "Channel browser",
-    "SavedItems": "Saved items",
+    "Saved": "Saved",
     "ConvertToPrivate": "Convert to private channel",
     "MessagesBrowser": "Messages browser",
     "CreateBy": "Create by",
     "ThreadMessage": "Thread message",
-    "ChunterBrowser": "Search",
+    "ChunterBrowser": "Browser",
     "Messages": "Messages",
     "NoResults": "No results",
     "CopyLink": "Copy link",
@@ -78,13 +78,19 @@
     "DirectNotificationBody": "{message}",
     "AddCommentPlaceholder": "Add comment...",
     "Reacted": "Reacted",
-    "Saved": "Saved",
     "Docs": "Documents",
     "NewestFirst": "Newest first",
     "ReplyToThread": "Reply to thread",
     "SentMessage": "Sent message",
     "Direct": "Direct",
     "RepliedToThread": "Replied to thread",
-    "RepliedTo": "replied to: {message}"
+    "RepliedTo": "replied to: {message}",
+    "AllChannels": "All channels",
+    "AllContacts": "All contacts",
+    "NewChannel": "New channel",
+    "DescriptionOptional": "Description (optional)",
+    "Visibility": "Visibility",
+    "Public": "Public",
+    "Private": "Private"
   }
 }
\ No newline at end of file
diff --git a/plugins/chunter-assets/lang/ru.json b/plugins/chunter-assets/lang/ru.json
index 3f020063c1..f4a7d86f9c 100644
--- a/plugins/chunter-assets/lang/ru.json
+++ b/plugins/chunter-assets/lang/ru.json
@@ -38,7 +38,7 @@
     "TurnOffReplies": "Выключить уведомления об ответах",
     "PinMessage": "Закрепить сообщение",
     "UnpinMessage": "Открепить сообщение",
-    "Pinned": "Закреплено:",
+    "Pinned": "Закреплено",
     "EditMessage": "Редактировать сообщение",
     "Edited": "отредактировано",
     "DeleteMessage": "Удалить сообщение",
@@ -56,7 +56,7 @@
     "SharedBy": "Доступ открыт {name} {time}",
     "LeaveChannel": "Покинуть канал",
     "ChannelBrowser": "Браузер каналов",
-    "SavedItems": "Сохраненные объекты",
+    "Saved": "Сохраненное",
     "ConvertToPrivate": "Конвертировать в закрытый канал",
     "MessagesBrowser": "Браузер сообщений",
     "CreateBy": "Создано пользователем",
@@ -78,13 +78,19 @@
     "DirectNotificationBody": "{message}",
     "AddCommentPlaceholder": "Добавить комментарий...",
     "Reacted": "Отреагировал(а)",
-    "Saved": "Сохранено",
     "Docs": "Documents",
     "NewestFirst": "Сначала новые",
     "ReplyToThread": "Ответить в канале",
     "SentMessage": "Отправил(а) сообщение",
     "Direct": "Личные сообщения",
     "RepliedToThread": "Ответил(а) в канале",
-    "RepliedTo": "Ответил(а) на: {message}"
+    "RepliedTo": "Ответил(а) на: {message}",
+    "AllChannels": "Все каналы",
+    "AllContacts": "Все контакты",
+    "NewChannel": "Новый канал",
+    "DescriptionOptional": "Описание (необязательно)",
+    "Visibility": "Видимость",
+    "Public": "Публичный",
+    "Private": "Закрытый"
   }
 }
\ No newline at end of file
diff --git a/plugins/chunter-resources/src/components/Channel.svelte b/plugins/chunter-resources/src/components/Channel.svelte
index 5df6b9ea4a..e717cad878 100644
--- a/plugins/chunter-resources/src/components/Channel.svelte
+++ b/plugins/chunter-resources/src/components/Channel.svelte
@@ -17,47 +17,40 @@
   import { DocNotifyContext } from '@hcengineering/notification'
   import { location as locationStore } from '@hcengineering/ui'
   import { onDestroy } from 'svelte'
-  import activity, { ActivityMessage, ActivityMessagesFilter } from '@hcengineering/activity'
-  import { ActivityScrolledView, isReactionMessage } from '@hcengineering/activity-resources'
+  import { ActivityMessage, ActivityMessagesFilter, DisplayActivityMessage } from '@hcengineering/activity'
   import { getClient } from '@hcengineering/presentation'
+  import { getMessageFromLoc } from '@hcengineering/activity-resources'
 
   import chunter from '../plugin'
-  import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
+  import ChannelScrollView from './ChannelScrollView.svelte'
 
   export let context: DocNotifyContext
-  export let object: Doc
-  export let filterId: Ref<ActivityMessagesFilter> = activity.ids.AllFilter
+  export let object: Doc | undefined
+  export let filters: Ref<ActivityMessagesFilter>[] = []
+  export let messages: DisplayActivityMessage[] = []
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
-  const inboxClient = InboxNotificationsClientImpl.getClient()
-  const activityInboxNotificationsStore = inboxClient.activityInboxNotifications
 
   let selectedMessageId: Ref<ActivityMessage> | undefined = undefined
 
   const unsubscribe = locationStore.subscribe((newLocation) => {
-    selectedMessageId = newLocation.query?.message as Ref<ActivityMessage> | undefined
-    const selectedMessage = selectedMessageId
-      ? $activityInboxNotificationsStore.find(({ attachedTo }) => attachedTo === selectedMessageId)?.$lookup?.attachedTo
-      : undefined
-
-    if (isReactionMessage(selectedMessage)) {
-      selectedMessageId = selectedMessage.attachedTo as Ref<ActivityMessage>
-    }
+    selectedMessageId = getMessageFromLoc(newLocation)
   })
 
   onDestroy(unsubscribe)
 
-  $: isDocChannel = !hierarchy.isDerived(object._class, chunter.class.ChunterSpace)
-  $: messagesClass = isDocChannel ? activity.class.ActivityMessage : chunter.class.ChatMessage
+  $: isDocChannel = !hierarchy.isDerived(context.attachedToClass, chunter.class.ChunterSpace)
   $: collection = isDocChannel ? 'comments' : 'messages'
 </script>
 
-<ActivityScrolledView
-  _class={messagesClass}
+<ChannelScrollView
+  {messages}
+  objectId={context.attachedTo}
+  objectClass={context.attachedToClass}
   {object}
   skipLabels={!isDocChannel}
-  filter={filterId}
+  selectedFilters={filters}
   startFromBottom
   {selectedMessageId}
   {collection}
diff --git a/plugins/chunter-resources/src/components/ChannelHeader.svelte b/plugins/chunter-resources/src/components/ChannelHeader.svelte
index 3ffe19ed24..40ca313d7c 100644
--- a/plugins/chunter-resources/src/components/ChannelHeader.svelte
+++ b/plugins/chunter-resources/src/components/ChannelHeader.svelte
@@ -13,43 +13,70 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Doc } from '@hcengineering/core'
-  import { getDocLinkTitle, getDocTitle } from '@hcengineering/view-resources'
+  import { Class, Doc, Ref } from '@hcengineering/core'
+  import { getDocTitle } from '@hcengineering/view-resources'
   import { getClient } from '@hcengineering/presentation'
   import { Channel } from '@hcengineering/chunter'
+  import { ActivityMessagesFilter } from '@hcengineering/activity'
+  import contact from '@hcengineering/contact'
 
   import Header from './Header.svelte'
   import chunter from '../plugin'
-  import { getChannelIcon } from '../utils'
+  import { getChannelIcon, getChannelName } from '../utils'
 
-  export let object: Doc
+  export let _id: Ref<Doc>
+  export let _class: Ref<Class<Doc>>
+  export let object: Doc | undefined
   export let allowClose = false
+  export let canOpen = false
+  export let withAside = false
+  export let isAsideShown = false
+  export let filters: Ref<ActivityMessagesFilter>[] = []
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
 
-  $: topic = hierarchy.isDerived(object._class, chunter.class.Channel) ? (object as Channel).topic : undefined
+  let title: string | undefined = undefined
+  let description: string | undefined = undefined
 
-  async function getTitle (object: Doc) {
-    if (object._class === chunter.class.DirectMessage) {
-      return await getDocTitle(client, object._id, object._class, object)
+  $: updateDescription(_id, _class, object)
+
+  $: getChannelName(_id, _class, object).then((res) => {
+    title = res
+  })
+
+  async function updateDescription (_id: Ref<Doc>, _class: Ref<Class<Doc>>, object?: Doc) {
+    if (hierarchy.isDerived(_class, chunter.class.DirectMessage)) {
+      description = undefined
+    } else if (hierarchy.isDerived(_class, chunter.class.Channel)) {
+      description = (object as Channel)?.topic
+    } else {
+      description = await getDocTitle(client, _id, _class, object)
     }
-    return await getDocLinkTitle(client, object._id, object._class, object)
   }
+
+  $: isPerson =
+    hierarchy.isDerived(_class, chunter.class.DirectMessage) || hierarchy.isDerived(_class, contact.class.Person)
 </script>
 
 <div class="ac-header divide full caption-height">
-  {#await getTitle(object) then title}
-    <Header
-      icon={getChannelIcon(object)}
-      iconProps={{ value: object }}
-      label={title}
-      intlLabel={title ? undefined : chunter.string.Channel}
-      description={topic}
-      {allowClose}
-      on:close
-    />
-  {/await}
+  <Header
+    bind:filters
+    {object}
+    icon={getChannelIcon(_class)}
+    iconProps={{ value: object }}
+    label={title}
+    intlLabel={chunter.string.Channel}
+    {description}
+    titleKind={isPerson ? 'default' : 'breadcrumbs'}
+    withFilters={!hierarchy.isDerived(_class, chunter.class.ChunterSpace)}
+    {allowClose}
+    {canOpen}
+    {withAside}
+    {isAsideShown}
+    on:aside-toggled
+    on:close
+  />
 </div>
 
 <style lang="scss">
diff --git a/plugins/chunter-resources/src/components/ChannelIcon.svelte b/plugins/chunter-resources/src/components/ChannelIcon.svelte
index 68fd8e9106..0486fe8bcc 100644
--- a/plugins/chunter-resources/src/components/ChannelIcon.svelte
+++ b/plugins/chunter-resources/src/components/ChannelIcon.svelte
@@ -17,12 +17,13 @@
   import chunter, { Channel } from '@hcengineering/chunter'
   import Lock from './icons/Lock.svelte'
 
-  export let value: Channel
+  export let value: Channel | undefined
   export let size: IconSize = 'small'
+  export let fill: string | undefined = 'currentColor'
 </script>
 
-{#if value.private}
-  <Lock {size} />
+{#if value?.private}
+  <Lock {size} {fill} />
 {:else}
-  <Icon icon={chunter.icon.Hashtag} {size} />
+  <Icon icon={chunter.icon.Hashtag} {size} {fill} />
 {/if}
diff --git a/plugins/chunter-resources/src/components/ChannelMessagesFilter.svelte b/plugins/chunter-resources/src/components/ChannelMessagesFilter.svelte
new file mode 100644
index 0000000000..8937ba80d3
--- /dev/null
+++ b/plugins/chunter-resources/src/components/ChannelMessagesFilter.svelte
@@ -0,0 +1,44 @@
+<!--
+// 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 { Button, eventToHTMLElement, IconFilter, showPopup } from '@hcengineering/ui'
+  import { Ref } from '@hcengineering/core'
+  import activity, { ActivityMessagesFilter } from '@hcengineering/activity'
+  import { getClient } from '@hcengineering/presentation'
+  import { ActivityMessagesFilterPopup } from '@hcengineering/activity-resources'
+
+  export let selectedFilters: Ref<ActivityMessagesFilter>[] = []
+
+  const client = getClient()
+  const filters = client.getModel().findAllSync(activity.class.ActivityMessagesFilter, {})
+
+  const handleClick = (ev: MouseEvent): void => {
+    showPopup(
+      ActivityMessagesFilterPopup,
+      { filters, showToggle: false },
+      eventToHTMLElement(ev),
+      () => {},
+      (res) => {
+        if (res === undefined) return
+        if (res.action === 'toggle') {
+          return
+        }
+        selectedFilters = (Array.isArray(res.value) ? res.value : [res.value]) as Ref<ActivityMessagesFilter>[]
+      }
+    )
+  }
+</script>
+
+<Button icon={IconFilter} iconProps={{ size: 'small' }} kind="icon" on:click={handleClick} />
diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessagesSeparator.svelte b/plugins/chunter-resources/src/components/ChannelMessagesSeparator.svelte
similarity index 62%
rename from plugins/activity-resources/src/components/activity-message/ActivityMessagesSeparator.svelte
rename to plugins/chunter-resources/src/components/ChannelMessagesSeparator.svelte
index f1be5ee5fe..6a7a276699 100644
--- a/plugins/activity-resources/src/components/activity-message/ActivityMessagesSeparator.svelte
+++ b/plugins/chunter-resources/src/components/ChannelMessagesSeparator.svelte
@@ -16,22 +16,18 @@
   import type { IntlString } from '@hcengineering/platform'
   import { Label } from '@hcengineering/ui'
 
-  export let title: IntlString
-  export let line: boolean = false
+  export let label: IntlString
   export let params: any = undefined
-  export let reverse: boolean = false
-  export let isNew: boolean = false
+
   export let element: HTMLDivElement | undefined = undefined
 </script>
 
-<div
-  class="w-full text-sm flex-center whitespace-nowrap"
-  class:flex-reverse={reverse}
-  class:new={isNew}
-  bind:this={element}
->
-  <div class:ml-8={!reverse} class:mr-4={reverse}><Label label={title} {params} /></div>
-  <div class:ml-4={!reverse} class:mr-4={reverse} class:line />
+<div class="w-full text-sm flex-center whitespace-nowrap" bind:this={element}>
+  <div class="line mr-3" />
+  <div class="label">
+    <Label {label} {params} />
+  </div>
+  <div class="line ml-3" />
 </div>
 
 <style lang="scss">
@@ -39,13 +35,10 @@
     position: relative;
     width: 100%;
     height: 1px;
-    background-color: var(--divider-color);
+    border-top: 1px dashed var(--global-higlight-Color);
   }
 
-  .new {
-    .line {
-      background-color: var(--highlight-red);
-    }
-    color: var(--highlight-red);
+  .label {
+    color: var(--global-higlight-Color);
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/ChannelPanel.svelte b/plugins/chunter-resources/src/components/ChannelPanel.svelte
index c7557c5e98..e1915e9dee 100644
--- a/plugins/chunter-resources/src/components/ChannelPanel.svelte
+++ b/plugins/chunter-resources/src/components/ChannelPanel.svelte
@@ -13,73 +13,31 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class, Ref, WithLookup } from '@hcengineering/core'
-  import { ActivityInboxNotification, DocNotifyContext } from '@hcengineering/notification'
-  import { createQuery, getClient } from '@hcengineering/presentation'
-  import activity, { ActivityMessage } from '@hcengineering/activity'
+  import { Class, Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
   import { ChunterSpace } from '@hcengineering/chunter'
   import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
-  import { location as locationStore, Location } from '@hcengineering/ui'
-  import { isReactionMessage } from '@hcengineering/activity-resources'
 
-  import ChannelPresenter from './ChannelView.svelte'
-  import ThreadViewPanel from './threads/ThreadViewPanel.svelte'
+  import ChannelView from './ChannelView.svelte'
 
   export let _id: Ref<ChunterSpace>
   export let _class: Ref<Class<ChunterSpace>>
-  export let context: DocNotifyContext
 
   const objectQuery = createQuery()
-  const client = getClient()
   const inboxClient = InboxNotificationsClientImpl.getClient()
-  const activityInboxNotificationsStore = inboxClient.activityInboxNotifications
-  const hierarchy = client.getHierarchy()
+  const docNotifyContextByDocStore = inboxClient.docNotifyContextByDoc
 
   let object: ChunterSpace | undefined = undefined
-  let threadId: Ref<ActivityMessage> | undefined = undefined
-  let notification: WithLookup<ActivityInboxNotification> | undefined = undefined
 
-  let selectedMessageId: Ref<ActivityMessage> | undefined = undefined
-  let loc: Location | undefined = undefined
-
-  locationStore.subscribe((newLocation) => {
-    loc = newLocation
-    selectedMessageId = newLocation.query?.message as Ref<ActivityMessage> | undefined
-  })
-
-  $: notification = selectedMessageId
-    ? $activityInboxNotificationsStore.find(({ attachedTo }) => attachedTo === selectedMessageId)
-    : undefined
-
-  $: updateThreadId(context, notification, loc)
-
-  function updateThreadId (
-    context: DocNotifyContext,
-    notification?: WithLookup<ActivityInboxNotification>,
-    loc?: Location
-  ) {
-    threadId = loc?.query?.thread as Ref<ActivityMessage> | undefined
-
-    if (threadId !== undefined) {
-      return
-    }
-
-    threadId =
-      hierarchy.isDerived(context.attachedToClass, activity.class.ActivityMessage) &&
-      !isReactionMessage(notification?.$lookup?.attachedTo)
-        ? (context.attachedTo as Ref<ActivityMessage>)
-        : undefined
-  }
+  $: context = $docNotifyContextByDocStore.get(_id)
 
   $: objectQuery.query(_class, { _id }, (res) => {
     object = res[0]
   })
 </script>
 
-{#if threadId}
-  <ThreadViewPanel _id={threadId} on:close />
-{:else if object}
+{#if context}
   <div class="antiComponent">
-    <ChannelPresenter {object} {context} embedded allowClose on:close />
+    <ChannelView {object} {context} embedded allowClose on:close />
   </div>
 {/if}
diff --git a/plugins/activity-resources/src/components/ActivityScrolledView.svelte b/plugins/chunter-resources/src/components/ChannelScrollView.svelte
similarity index 54%
rename from plugins/activity-resources/src/components/ActivityScrolledView.svelte
rename to plugins/chunter-resources/src/components/ChannelScrollView.svelte
index b00715a0a5..08cb81368c 100644
--- a/plugins/activity-resources/src/components/ActivityScrolledView.svelte
+++ b/plugins/chunter-resources/src/components/ChannelScrollView.svelte
@@ -13,8 +13,8 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class, Doc, Ref, SortingOrder, isOtherDay, Timestamp } from '@hcengineering/core'
-  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { Class, Doc, Ref, isOtherDay, Timestamp, getCurrentAccount } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
   import activity, {
     ActivityExtension,
     ActivityMessage,
@@ -25,20 +25,24 @@
   import notification, { InboxNotificationsClient } from '@hcengineering/notification'
   import { getResource } from '@hcengineering/platform'
   import { get } from 'svelte/store'
+  import { Scroller, ScrollParams } from '@hcengineering/ui'
+  import {
+    ActivityMessagePresenter,
+    ActivityExtension as ActivityExtensionComponent
+  } from '@hcengineering/activity-resources'
 
-  import ActivityMessagePresenter from './activity-message/ActivityMessagePresenter.svelte'
-  import { combineActivityMessages, filterActivityMessages, getClosestDateSelectorDate } from '../activityMessagesUtils'
-  import ActivityMessagesSeparator from './activity-message/ActivityMessagesSeparator.svelte'
+  import ActivityMessagesSeparator from './ChannelMessagesSeparator.svelte'
   import JumpToDateSelector from './JumpToDateSelector.svelte'
-  import ActivityExtensionComponent from './ActivityExtension.svelte'
+  import { filterChatMessages, getClosestDateSelectorDate } from '../utils'
 
-  export let _class: Ref<Class<ActivityMessage>> = activity.class.ActivityMessage
-  export let object: Doc
-  export let isLoading = false
+  export let messages: DisplayActivityMessage[] = []
+  export let object: Doc | undefined
+  export let objectClass: Ref<Class<Doc>>
+  export let objectId: Ref<Doc>
   export let selectedMessageId: Ref<ActivityMessage> | undefined = undefined
   export let scrollElement: HTMLDivElement | undefined = undefined
   export let startFromBottom = false
-  export let filter: Ref<ActivityMessagesFilter> | undefined = undefined
+  export let selectedFilters: Ref<ActivityMessagesFilter>[] = []
   export let withDates: boolean = true
   export let collection: string | undefined = undefined
   export let showEmbedded = false
@@ -49,49 +53,27 @@
   const headerHeight = 50
 
   const client = getClient()
-  const messagesQuery = createQuery()
 
-  let prevMessagesLength = 0
-  let messages: DisplayActivityMessage[] = []
   let displayMessages: DisplayActivityMessage[] = []
   let filters: ActivityMessagesFilter[] = []
   let extensions: ActivityExtension[] = []
 
   let separatorElement: HTMLDivElement | undefined = undefined
   let separatorPosition: number | undefined = undefined
-  let showDateSelector = false
   let selectedDate: Timestamp | undefined = undefined
 
-  let isViewportInitialized = false
-
+  let autoscroll = false
+  let scrollContentBox: HTMLDivElement | undefined = undefined
   let inboxClient: InboxNotificationsClient | undefined = undefined
+  let shouldWaitAndRead = false
 
   getResource(notification.function.GetInboxNotificationsClient).then((getClientFn) => {
     inboxClient = getClientFn()
   })
 
-  $: client.findAll(activity.class.ActivityExtension, { ofClass: object._class }).then((res) => {
-    extensions = res
-  })
+  $: extensions = client.getModel().findAllSync(activity.class.ActivityExtension, { ofClass: objectClass })
 
-  client.findAll(activity.class.ActivityMessagesFilter, {}).then((res) => {
-    filters = res
-  })
-
-  $: messagesQuery.query(
-    _class,
-    { attachedTo: object._id },
-    (result: ActivityMessage[]) => {
-      prevMessagesLength = messages.length
-      messages = combineActivityMessages(result)
-      isLoading = false
-    },
-    {
-      sort: {
-        createdOn: SortingOrder.Ascending
-      }
-    }
-  )
+  filters = client.getModel().findAllSync(activity.class.ActivityMessagesFilter, {})
 
   function scrollToBottom (afterScrollFn?: () => void) {
     setTimeout(() => {
@@ -111,6 +93,28 @@
     }, 100)
   }
 
+  function scrollToMessage () {
+    if (!selectedMessageId) {
+      return
+    }
+
+    if (!scrollElement || !scrollContentBox) {
+      setTimeout(scrollToMessage, 50)
+    }
+
+    const messagesElements = scrollContentBox?.getElementsByClassName('activityMessage')
+    const msgElement = messagesElements?.[selectedMessageId as any]
+    if (!msgElement) {
+      if (messages.some(({ _id }) => _id === selectedMessageId)) {
+        setTimeout(scrollToMessage, 50)
+      }
+      return
+    }
+
+    msgElement.scrollIntoView()
+    readViewportMessages()
+  }
+
   function handleJumpToDate (e: CustomEvent) {
     const date = e.detail.date
 
@@ -132,7 +136,11 @@
   }
 
   function scrollToDate (date: Timestamp) {
-    let offset = date && document.getElementById(date.toString())?.offsetTop
+    autoscroll = false
+
+    const element = date ? document.getElementById(date.toString()) : undefined
+
+    let offset = element?.offsetTop
 
     if (!offset || !scrollElement) {
       return
@@ -143,34 +151,67 @@
     scrollElement.scrollTo({ left: 0, top: offset })
   }
 
-  function handleScroll () {
+  function handleScroll ({ autoScrolling }: ScrollParams) {
+    shouldWaitAndRead = false
+    if (autoScrolling && isLastMessageViewed()) {
+      readViewportMessages()
+      return
+    }
+
+    if (autoScrolling) {
+      return
+    }
+
     updateSelectedDate()
     readViewportMessages()
   }
 
+  function isLastMessageViewed (): boolean {
+    if (!scrollElement) {
+      return false
+    }
+
+    const last = displayMessages[displayMessages.length - 1]
+
+    if (last === undefined) {
+      return false
+    }
+
+    const containerRect = scrollElement.getBoundingClientRect()
+    const messagesElements = scrollContentBox?.getElementsByClassName('activityMessage')
+    const msgElement = messagesElements?.[last._id as any]
+
+    if (!msgElement) {
+      return false
+    }
+
+    return messageInView(msgElement, containerRect)
+  }
+
+  function messageInView (msgElement: Element, containerRect: DOMRect): boolean {
+    const messageRect = msgElement.getBoundingClientRect()
+
+    return messageRect.top >= containerRect.top && messageRect.bottom - messageRect.height / 2 <= containerRect.bottom
+  }
+
   function readViewportMessages () {
-    if (!isViewportInitialized) {
+    if (scrollElement === undefined || scrollContentBox === undefined) {
       return
     }
 
-    const containerRect = scrollElement?.getBoundingClientRect()
-
-    if (containerRect === undefined) {
-      return
-    }
+    const containerRect = scrollElement.getBoundingClientRect()
 
     const messagesToRead: DisplayActivityMessage[] = []
+    const messagesElements = scrollContentBox?.getElementsByClassName('activityMessage')
 
     for (const message of displayMessages) {
-      const msgElement = document.getElementById(message._id)
+      const msgElement = messagesElements?.[message._id as any]
 
       if (!msgElement) {
         continue
       }
 
-      const messageRect = msgElement.getBoundingClientRect()
-
-      if (messageRect.top >= containerRect.top && messageRect.bottom - messageRect.height / 2 <= containerRect.bottom) {
+      if (messageInView(msgElement, containerRect)) {
         messagesToRead.push(message)
       }
     }
@@ -196,7 +237,7 @@
 
     inboxClient.readMessages(allIds)
 
-    const notifyContext = get(inboxClient.docNotifyContextByDoc).get(object._id)
+    const notifyContext = get(inboxClient.docNotifyContextByDoc).get(objectId)
     const lastTimestamp = messages[messages.length - 1].createdOn ?? 0
 
     if (notifyContext !== undefined && (notifyContext.lastViewedTimestamp ?? 0) < lastTimestamp) {
@@ -205,12 +246,13 @@
   }
 
   function updateSelectedDate () {
-    if (!scrollElement) {
+    if (scrollContentBox === undefined || scrollElement === undefined) {
       return
     }
 
     const clientRect = scrollElement.getBoundingClientRect()
-    const dateSelectors = scrollElement.getElementsByClassName('dateSelector')
+    const dateSelectors = scrollContentBox.getElementsByClassName('dateSelector')
+
     const firstVisibleDateElement = Array.from(dateSelectors)
       .reverse()
       .find((child) => {
@@ -227,11 +269,10 @@
       return
     }
 
-    showDateSelector = clientRect.top - firstVisibleDateElement.getBoundingClientRect().top > -dateSelectorHeight / 2
     selectedDate = parseInt(firstVisibleDateElement.id)
   }
 
-  $: filterActivityMessages(messages, filters, object._class, filter).then((filteredMessages) => {
+  $: filterChatMessages(messages, filters, objectClass, selectedFilters).then((filteredMessages) => {
     displayMessages = filteredMessages
   })
 
@@ -253,8 +294,14 @@
     }
 
     const lastViewedMessageIdx = displayMessages.findIndex((message, index) => {
+      const nextMessage = displayMessages[index + 1]
+
+      if (message.createdBy === getCurrentAccount()._id) {
+        return false
+      }
+
       const createdOn = message.createdOn ?? 0
-      const nextCreatedOn = displayMessages[index + 1]?.createdOn ?? 0
+      const nextCreatedOn = nextMessage?.createdOn ?? 0
 
       return lastViewedTimestamp >= createdOn && lastViewedTimestamp < nextCreatedOn
     })
@@ -263,80 +310,98 @@
   }
 
   $: separatorPosition = getNewPosition(displayMessages, lastViewedTimestamp)
-  $: initializeViewport(scrollElement, separatorElement, separatorPosition)
+  $: initializeScroll(separatorElement, separatorPosition)
 
-  function initializeViewport (
-    scrollElement?: HTMLDivElement,
-    separatorElement?: HTMLDivElement,
-    separatorPosition?: number
-  ) {
+  function initializeScroll (separatorElement?: HTMLDivElement, separatorPosition?: number) {
     if (separatorPosition === undefined) {
       return
     }
-
-    if (separatorPosition < 0 && scrollElement) {
-      scrollToBottom(markViewportInitialized)
+    if (messages.some(({ _id }) => _id === selectedMessageId)) {
+      scrollToMessage()
+      return
+    }
+    if (separatorPosition < 0) {
+      shouldWaitAndRead = true
+      autoscroll = true
     } else if (separatorElement) {
-      scrollToSeparator(markViewportInitialized)
+      scrollToSeparator(() =>
+        setTimeout(() => {
+          readViewportMessages()
+        }, 100)
+      )
     }
   }
 
-  function markViewportInitialized () {
-    // We should mark viewport as initialized when scroll is finished
-    setTimeout(() => {
-      isViewportInitialized = true
+  function waitLastMessageRenderAndRead () {
+    if (isLastMessageViewed()) {
       readViewportMessages()
-    }, 100)
+      shouldWaitAndRead = false
+    } else if (shouldWaitAndRead) {
+      setTimeout(waitLastMessageRenderAndRead, 50)
+    }
+  }
+
+  $: if (shouldWaitAndRead) {
+    waitLastMessageRenderAndRead()
   }
 
   function handleMessageSent () {
-    scrollToBottom(markViewportInitialized)
-  }
-
-  $: if (isViewportInitialized && messages.length > prevMessagesLength) {
-    setTimeout(() => {
-      readViewportMessages()
-    }, 100)
+    scrollToBottom()
+    shouldWaitAndRead = true
   }
 </script>
 
-{#if !isLoading}
-  <div class="flex-col vScroll" bind:this={scrollElement} on:scroll={handleScroll}>
-    {#if startFromBottom}
-      <div class="grower" />
-    {/if}
-    {#if showDateSelector}
-      <div class="ml-2 pr-2 fixed">
-        <JumpToDateSelector {selectedDate} fixed on:jumpToDate={handleJumpToDate} />
-      </div>
-    {/if}
+<div class="flex-col h-full">
+  {#if startFromBottom}
+    <div class="grower" />
+  {/if}
+  {#if selectedDate}
+    <div class="ml-2 pr-2">
+      <JumpToDateSelector {selectedDate} fixed on:jumpToDate={handleJumpToDate} />
+    </div>
+  {/if}
+  <Scroller
+    {autoscroll}
+    bottomStart={startFromBottom}
+    bind:divScroll={scrollElement}
+    bind:divBox={scrollContentBox}
+    onScroll={handleScroll}
+  >
+    <slot name="header" />
     {#each displayMessages as message, index}
+      {@const isSelected = message._id === selectedMessageId}
+      {@const prevMessage = displayMessages[index - 1]}
       {#if index === separatorPosition}
-        <ActivityMessagesSeparator bind:element={separatorElement} title={activity.string.New} line reverse isNew />
+        <ActivityMessagesSeparator bind:element={separatorElement} label={activity.string.New} />
       {/if}
 
-      {#if withDates && (index === 0 || isOtherDay(message.createdOn ?? 0, displayMessages[index - 1].createdOn ?? 0))}
+      {#if withDates && (index === 0 || isOtherDay(message.createdOn ?? 0, prevMessage?.createdOn ?? 0))}
         <JumpToDateSelector selectedDate={message.createdOn} on:jumpToDate={handleJumpToDate} />
       {/if}
 
-      <ActivityMessagePresenter
-        value={message}
-        skipLabel={skipLabels}
-        {showEmbedded}
-        isHighlighted={message._id === selectedMessageId}
-        shouldScroll={selectedMessageId === message._id}
-      />
+      <div style:margin="0 1.5rem">
+        <ActivityMessagePresenter
+          value={message}
+          skipLabel={skipLabels}
+          {showEmbedded}
+          isHighlighted={isSelected}
+          shouldScroll={isSelected}
+        />
+      </div>
     {/each}
+  </Scroller>
+</div>
+
+{#if object}
+  <div class="ref-input">
+    <ActivityExtensionComponent
+      kind="input"
+      {extensions}
+      props={{ object, boundary: scrollElement, collection }}
+      on:submit={handleMessageSent}
+    />
   </div>
 {/if}
-<div class="ref-input">
-  <ActivityExtensionComponent
-    kind="input"
-    {extensions}
-    props={{ object, boundary: scrollElement, collection }}
-    on:submit={handleMessageSent}
-  />
-</div>
 
 <style lang="scss">
   .grower {
@@ -344,12 +409,6 @@
     flex-shrink: 5;
   }
 
-  .fixed {
-    position: absolute;
-    align-self: center;
-    z-index: 1;
-  }
-
   .ref-input {
     margin: 1.25rem 1rem;
   }
diff --git a/plugins/chunter-resources/src/components/ChannelView.svelte b/plugins/chunter-resources/src/components/ChannelView.svelte
index d2592af1cb..b841f85364 100644
--- a/plugins/chunter-resources/src/components/ChannelView.svelte
+++ b/plugins/chunter-resources/src/components/ChannelView.svelte
@@ -13,11 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref, Doc } from '@hcengineering/core'
-  import { defineSeparators, location as locationStore, panelSeparators, Separator } from '@hcengineering/ui'
+  import { Class, Doc, Ref, SortingOrder } from '@hcengineering/core'
+  import { defineSeparators, Loading, location as locationStore, panelSeparators, Separator } from '@hcengineering/ui'
   import { DocNotifyContext } from '@hcengineering/notification'
-  import activity, { ActivityMessagesFilter } from '@hcengineering/activity'
-  import { getClient } from '@hcengineering/presentation'
+  import activity, { ActivityMessage, ActivityMessagesFilter } from '@hcengineering/activity'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { combineActivityMessages } from '@hcengineering/activity-resources'
 
   import Channel from './Channel.svelte'
   import PinnedMessages from './PinnedMessages.svelte'
@@ -26,42 +27,91 @@
   import chunter from '../plugin'
 
   export let context: DocNotifyContext
-  export let object: Doc
-  export let filterId: Ref<ActivityMessagesFilter> = activity.ids.AllFilter
+  export let object: Doc | undefined = undefined
   export let allowClose = false
   export let embedded = false
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
+  const messagesQuery = createQuery()
 
+  let activityMessages: ActivityMessage[] = []
   let isThreadOpened = false
+  let isAsideShown = true
+  let isLoading = false
 
-  $: isDocChat = !hierarchy.isDerived(object._class, chunter.class.ChunterSpace)
-  $: asideShown = !embedded && isDocChat && !isThreadOpened
+  let filters: Ref<ActivityMessagesFilter>[] = []
 
   locationStore.subscribe((newLocation) => {
     isThreadOpened = newLocation.path[4] != null
   })
 
+  $: isDocChat = !hierarchy.isDerived(context.attachedToClass, chunter.class.ChunterSpace)
+  $: withAside = !embedded && isDocChat && !isThreadOpened
+
+  $: updateMessagesQuery(isDocChat ? activity.class.ActivityMessage : chunter.class.ChatMessage, context.attachedTo)
+
+  function updateMessagesQuery (_class: Ref<Class<ActivityMessage>>, attachedTo: Ref<Doc>) {
+    isLoading = true
+    const res = messagesQuery.query(
+      _class,
+      { attachedTo },
+      (res) => {
+        if (_class === chunter.class.ChatMessage) {
+          activityMessages = res
+          isLoading = false
+        } else {
+          combineActivityMessages(res).then((messages) => {
+            activityMessages = messages
+            isLoading = false
+          })
+        }
+      },
+      { sort: { createdOn: SortingOrder.Ascending } }
+    )
+
+    if (!res) {
+      isLoading = false
+    }
+  }
+
   defineSeparators('aside', panelSeparators)
 </script>
 
 <div class="popupPanel panel" class:embedded>
-  <ChannelHeader {object} {allowClose} on:close />
-  <div class="popupPanel-body" class:asideShown>
-    <div class="popupPanel-body__main">
-      <PinnedMessages {context} />
-      <Channel {context} {object} {filterId} />
-    </div>
+  <ChannelHeader
+    _id={context.attachedTo}
+    _class={context.attachedToClass}
+    {object}
+    {allowClose}
+    {withAside}
+    bind:filters
+    canOpen={isDocChat}
+    {isAsideShown}
+    on:close
+    on:aside-toggled={() => {
+      isAsideShown = !isAsideShown
+    }}
+  />
 
-    {#if asideShown}
-      <Separator name="aside" float={false} index={0} />
-      <div class="popupPanel-body__aside" class:float={false} class:shown={asideShown}>
-        <Separator name="aside" float index={0} />
-        <div class="antiPanel-wrap__content">
-          <DocChatPanel {object} {filterId} />
-        </div>
+  <div class="popupPanel-body" class:asideShown={withAside && isAsideShown && !isLoading}>
+    {#if isLoading}
+      <Loading />
+    {:else}
+      <div class="popupPanel-body__main">
+        <PinnedMessages {context} />
+        <Channel {context} {object} {filters} messages={activityMessages} />
       </div>
+
+      {#if withAside && isAsideShown}
+        <Separator name="aside" float={false} index={0} />
+        <div class="popupPanel-body__aside" class:float={false} class:shown={withAside && isAsideShown}>
+          <Separator name="aside" float index={0} />
+          <div class="antiPanel-wrap__content">
+            <DocChatPanel _id={context.attachedTo} _class={context.attachedToClass} {object} />
+          </div>
+        </div>
+      {/if}
     {/if}
   </div>
 </div>
diff --git a/plugins/chunter-resources/src/components/DirectIcon.svelte b/plugins/chunter-resources/src/components/DirectIcon.svelte
index 64fb837688..6bf82da9c3 100644
--- a/plugins/chunter-resources/src/components/DirectIcon.svelte
+++ b/plugins/chunter-resources/src/components/DirectIcon.svelte
@@ -23,7 +23,7 @@
   import chunter from '../plugin'
   import { getDmPersons } from '../utils'
 
-  export let value: DirectMessage
+  export let value: DirectMessage | undefined
   export let size: IconSize = 'small'
 
   const visiblePersons = 4
@@ -31,12 +31,13 @@
 
   let persons: Person[] = []
 
-  $: getDmPersons(client, value).then((res) => {
-    persons = res
-  })
+  $: value &&
+    getDmPersons(client, value).then((res) => {
+      persons = res
+    })
 </script>
 
-{#if persons.length === 0}
+{#if persons.length === 0 && value}
   <Icon icon={classIcon(client, value._class) ?? chunter.icon.Chunter} {size} />
 {/if}
 
diff --git a/plugins/chunter-resources/src/components/Header.svelte b/plugins/chunter-resources/src/components/Header.svelte
index 6eaf74173f..03279c391a 100644
--- a/plugins/chunter-resources/src/components/Header.svelte
+++ b/plugins/chunter-resources/src/components/Header.svelte
@@ -14,26 +14,49 @@
 -->
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
-  import { AnySvelteComponent, Button, Icon, IconClose, Label, SearchEdit } from '@hcengineering/ui'
+  import {
+    AnySvelteComponent,
+    Breadcrumbs,
+    Button,
+    Icon,
+    IconClose,
+    IconDetails,
+    Label,
+    SearchEdit
+  } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
+  import view from '@hcengineering/view'
+  import { openDoc } from '@hcengineering/view-resources'
+  import { getClient } from '@hcengineering/presentation'
+  import { Doc, Ref } from '@hcengineering/core'
+  import { ActivityMessagesFilter } from '@hcengineering/activity'
 
   import { userSearch } from '../index'
   import { navigateToSpecial } from '../utils'
+  import ChannelMessagesFilter from './ChannelMessagesFilter.svelte'
 
+  export let object: Doc | undefined = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let iconProps: Record<string, any> | undefined = undefined
   export let label: string | undefined = undefined
   export let intlLabel: IntlString | undefined = undefined
   export let description: string | undefined = undefined
   export let allowClose = false
+  export let canOpen = false
+  export let withAside = false
+  export let isAsideShown = false
+  export let titleKind: 'default' | 'breadcrumbs' = 'default'
+  export let withFilters = false
+  export let filters: Ref<ActivityMessagesFilter>[] = []
 
+  const client = getClient()
   const dispatch = createEventDispatcher()
 
-  let userSearch_: string
-  userSearch.subscribe((v) => (userSearch_ = v))
+  let searchValue: string = ''
+  userSearch.subscribe((v) => (searchValue = v))
 </script>
 
-<div class="ac-header__wrap-description header">
+<div class="header ac-header__wrap-title flex-grow">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="ac-header__wrap-title" on:click>
@@ -49,19 +72,53 @@
       />
       <div class="antiHSpacer x2" />
     {/if}
-    {#if icon}<div class="ac-header__icon"><Icon {icon} size={'small'} {iconProps} /></div>{/if}
-    {#if label}
-      <span class="ac-header__title">{label}</span>
-    {:else if intlLabel}
-      <div class="ac-header__title">
-        <Label label={intlLabel} />
-      </div>
+    {#if withFilters}
+      <ChannelMessagesFilter bind:selectedFilters={filters} />
+    {/if}
+    {#if titleKind === 'breadcrumbs'}
+      <Breadcrumbs
+        items={[
+          {
+            icon,
+            iconProps,
+            title: label,
+            label: label ? undefined : intlLabel
+          }
+        ]}
+      />
+    {:else}
+      {#if icon}
+        <div class="ac-header__icon">
+          <Icon {icon} size={'small'} {iconProps} />
+        </div>
+      {/if}
+      {#if label}
+        <span class="title overflow-label heading-medium-16 mr-2">{label}</span>
+      {:else if intlLabel}
+        <div class="title overflow-label mr-2">
+          <Label label={intlLabel} />
+        </div>
+      {/if}
     {/if}
   </div>
-  {#if description}<span class="ac-header__description">{description}</span>{/if}
+  {#if description}
+    <div class="ac-header__description over-underline" style="flex: 1" title={description}>{description}</div>
+  {/if}
 </div>
+{#if canOpen && object}
+  <Button
+    icon={view.icon.Open}
+    iconProps={{ size: 'small' }}
+    kind={'icon'}
+    on:click={() => {
+      if (object) {
+        openDoc(client.getHierarchy(), object)
+      }
+    }}
+  />
+{/if}
 <SearchEdit
-  value={userSearch_}
+  value={searchValue}
   on:change={(ev) => {
     userSearch.set(ev.detail)
 
@@ -70,12 +127,23 @@
     }
   }}
 />
+{#if withAside}
+  <Button
+    icon={IconDetails}
+    iconProps={{ size: 'medium', filled: isAsideShown }}
+    kind={'icon'}
+    selected={isAsideShown}
+    on:click={() => dispatch('aside-toggled')}
+  />
+{/if}
 
 <style lang="scss">
-  .ac-header__wrap-title:hover {
+  .title {
     cursor: pointer;
-    span {
-      text-decoration: underline;
+    color: var(--global-secondary-TextColor);
+
+    &:hover {
+      color: var(--global-primary-LinkColor);
     }
   }
 </style>
diff --git a/plugins/activity-resources/src/components/JumpToDateSelector.svelte b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
similarity index 100%
rename from plugins/activity-resources/src/components/JumpToDateSelector.svelte
rename to plugins/chunter-resources/src/components/JumpToDateSelector.svelte
diff --git a/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte b/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte
index 46ec8eab05..53a51d5463 100644
--- a/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte
+++ b/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte
@@ -14,12 +14,15 @@
 -->
 <script lang="ts">
   import { Doc, Ref } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import activity, { ActivityMessage, DisplayActivityMessage } from '@hcengineering/activity'
   import { ActivityMessagePresenter } from '@hcengineering/activity-resources'
+  import { ActionIcon, IconClose } from '@hcengineering/ui'
 
   export let attachedTo: Ref<Doc>
 
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
   const messagesQuery = createQuery()
 
   let pinnedMessages: DisplayActivityMessage[] = []
@@ -27,18 +30,48 @@
   $: messagesQuery.query(activity.class.ActivityMessage, { attachedTo, isPinned: true }, (res: ActivityMessage[]) => {
     pinnedMessages = res as DisplayActivityMessage[]
   })
+
+  async function unPinMessaage (message: ActivityMessage): Promise<void> {
+    await client.update(message, { isPinned: false })
+  }
 </script>
 
 <div class="antiPopup vScroll popup">
   {#each pinnedMessages as message}
-    <ActivityMessagePresenter value={message} withActions={false} />
+    <div class="message relative">
+      <ActivityMessagePresenter
+        value={message}
+        withActions={false}
+        skipLabel={!hierarchy.isDerived(message._class, activity.class.DocUpdateMessage)}
+      />
+      <div class="remove">
+        <ActionIcon
+          size="medium"
+          icon={IconClose}
+          action={() => {
+            unPinMessaage(message)
+          }}
+        />
+      </div>
+    </div>
   {/each}
 </div>
 
 <style lang="scss">
+  .antiPopup {
+    max-width: 40rem;
+  }
+  .message {
+    min-width: 30rem;
+  }
   .popup {
-    padding: 1.25rem 1.25rem 1.25rem;
+    padding: 1rem;
     max-height: 20rem;
     color: var(--caption-color);
   }
+  .remove {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+  }
 </style>
diff --git a/plugins/activity-resources/src/components/Replies.svelte b/plugins/chunter-resources/src/components/Replies.svelte
similarity index 66%
rename from plugins/activity-resources/src/components/Replies.svelte
rename to plugins/chunter-resources/src/components/Replies.svelte
index 309cda26d6..0cd9089d9a 100644
--- a/plugins/activity-resources/src/components/Replies.svelte
+++ b/plugins/chunter-resources/src/components/Replies.svelte
@@ -16,8 +16,8 @@
   import { Person } from '@hcengineering/contact'
   import { personByIdStore, Avatar } from '@hcengineering/contact-resources'
   import { Doc, IdMap, Ref, WithLookup } from '@hcengineering/core'
-  import { getLocation, Label, navigate, TimeSince } from '@hcengineering/ui'
-  import { ActivityMessage } from '@hcengineering/activity'
+  import { getLocation, Label, TimeSince } from '@hcengineering/ui'
+  import activity, { ActivityMessage } from '@hcengineering/activity'
   import notification, {
     ActivityInboxNotification,
     DocNotifyContext,
@@ -25,16 +25,18 @@
     InboxNotificationsClient
   } from '@hcengineering/notification'
   import { getResource } from '@hcengineering/platform'
+  import { get } from 'svelte/store'
 
-  import activity from '../plugin'
+  import { navigateToThread } from '../utils'
 
-  export let message: ActivityMessage
+  export let object: ActivityMessage
+  export let embedded = false
   export let onReply: (() => void) | undefined = undefined
 
   const maxDisplayPersons = 5
 
-  $: lastReply = message.lastReply ?? new Date().getTime()
-  $: persons = new Set(message.repliedPersons)
+  $: lastReply = object.lastReply ?? new Date().getTime()
+  $: persons = new Set(object.repliedPersons)
 
   let inboxClient: InboxNotificationsClient | undefined = undefined
 
@@ -47,7 +49,7 @@
   $: docNotifyContextByDocStore = inboxClient?.docNotifyContextByDoc
   $: notificationsByContextStore = inboxClient?.inboxNotificationsByContext
 
-  $: hasNew = hasNewReplies(message, $docNotifyContextByDocStore, $notificationsByContextStore)
+  $: hasNew = hasNewReplies(object, $docNotifyContextByDocStore, $notificationsByContextStore)
   $: updateQuery(persons, $personByIdStore)
 
   function hasNewReplies (
@@ -84,42 +86,52 @@
       onReply()
       return
     }
-    const loc = getLocation()
-    loc.path[4] = message._id
-    loc.query = { ...loc.query, thread: message._id }
-    navigate(loc)
+
+    if (inboxClient === undefined) {
+      return
+    }
+
+    const context = get(inboxClient.docNotifyContextByDoc).get(object.attachedTo)
+
+    if (context === undefined) {
+      return
+    }
+
+    navigateToThread(getLocation(), context._id, object._id)
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="flex-row-center container cursor-pointer" on:click={handleReply}>
-  <div class="flex-row-center">
-    <div class="avatars">
-      {#each displayPersons as person}
-        <Avatar size="x-small" avatar={person.avatar} name={person.name} />
-      {/each}
-    </div>
-
-    {#if persons.size > maxDisplayPersons}
-      <div class="plus">
-        +{persons.size - maxDisplayPersons}
+{#if !embedded && object.replies && object.replies > 0}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class="flex-row-center container cursor-pointer mt-2" on:click={handleReply}>
+    <div class="flex-row-center">
+      <div class="avatars">
+        {#each displayPersons as person}
+          <Avatar size="x-small" avatar={person.avatar} name={person.name} />
+        {/each}
       </div>
+
+      {#if persons.size > maxDisplayPersons}
+        <div class="plus">
+          +{persons.size - maxDisplayPersons}
+        </div>
+      {/if}
+    </div>
+    <div class="whitespace-nowrap ml-2 mr-2 over-underline repliesCount">
+      <Label label={activity.string.RepliesCount} params={{ replies: object.replies ?? 0 }} />
+    </div>
+    {#if hasNew}
+      <div class="notifyMarker" />
     {/if}
+    <div class="lastReply">
+      <Label label={activity.string.LastReply} />
+    </div>
+    <div class="time">
+      <TimeSince value={lastReply} />
+    </div>
   </div>
-  <div class="whitespace-nowrap ml-2 mr-2 over-underline repliesCount">
-    <Label label={activity.string.RepliesCount} params={{ replies: message.replies ?? 0 }} />
-  </div>
-  {#if hasNew}
-    <div class="notifyMarker" />
-  {/if}
-  <div class="lastReply">
-    <Label label={activity.string.LastReply} />
-  </div>
-  <div class="time">
-    <TimeSince value={lastReply} />
-  </div>
-</div>
+{/if}
 
 <style lang="scss">
   .container {
diff --git a/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte b/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
index 1fdf903c2d..faaf72f0bc 100644
--- a/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
+++ b/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
@@ -37,7 +37,7 @@
   export let embedded: boolean = false
   export let withActions: boolean = true
   export let showEmbedded = false
-  export let hideReplies = false
+  export let hideFooter = false
   export let skipLabel = false
   export let actions: Action[] = []
   export let excludedActions: string[] = []
@@ -63,15 +63,12 @@
   let object: Doc | undefined
 
   let viewlet: ChatMessageViewlet | undefined
-
-  $: value &&
-    viewletQuery.query(
-      chunter.class.ChatMessageViewlet,
-      { objectClass: value.attachedToClass, messageClass: value._class },
-      (result: ChatMessageViewlet[]) => {
-        viewlet = result[0]
-      }
-    )
+  ;[viewlet] = value
+    ? client.getModel().findAllSync(chunter.class.ChatMessageViewlet, {
+      objectClass: value.attachedToClass,
+      messageClass: value._class
+    })
+    : []
 
   $: value &&
     userQuery.query(core.class.Account, { _id: value.createdBy }, (res: Account[]) => {
@@ -175,7 +172,7 @@
     {withActions}
     actions={additionalActions}
     {showEmbedded}
-    {hideReplies}
+    {hideFooter}
     {withFlatActions}
     {hoverable}
     {onClick}
diff --git a/plugins/chunter-resources/src/components/chat/Chat.svelte b/plugins/chunter-resources/src/components/chat/Chat.svelte
index 762ce4079c..47ca7f2a7f 100644
--- a/plugins/chunter-resources/src/components/chat/Chat.svelte
+++ b/plugins/chunter-resources/src/components/chat/Chat.svelte
@@ -15,23 +15,31 @@
 <script lang="ts">
   import { Doc, Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Component, defineSeparators, getCurrentLocation, location, navigate, Separator } from '@hcengineering/ui'
+  import {
+    Component,
+    defineSeparators,
+    getCurrentLocation,
+    location,
+    navigate,
+    Separator,
+    Location
+  } from '@hcengineering/ui'
   import chunter from '@hcengineering/chunter'
-  import notification, { DocNotifyContext } from '@hcengineering/notification'
+  import { DocNotifyContext } from '@hcengineering/notification'
   import { NavHeader } from '@hcengineering/workbench-resources'
   import { NavigatorModel, SpecialNavModel } from '@hcengineering/workbench'
-  import { ActivityMessagesFilter } from '@hcengineering/activity'
+  import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
 
   import ChatNavigator from './navigator/ChatNavigator.svelte'
   import ChannelView from '../ChannelView.svelte'
-  import DocChatPanel from './DocChatPanel.svelte'
   import { chatSpecials } from './utils'
 
   export let visibleNav: boolean = true
   export let navFloat: boolean = false
   export let appsDirection: 'vertical' | 'horizontal' = 'horizontal'
 
-  const notifyContextQuery = createQuery()
+  const notificationsClient = InboxNotificationsClientImpl.getClient()
+  const contextsStore = notificationsClient.docNotifyContexts
   const objectQuery = createQuery()
 
   const navigatorModel: NavigatorModel = {
@@ -41,47 +49,67 @@
 
   let selectedContextId: Ref<DocNotifyContext> | undefined = undefined
   let selectedContext: DocNotifyContext | undefined = undefined
-  let filterId: Ref<ActivityMessagesFilter> | undefined = undefined
-
-  let object: Doc | undefined = undefined
 
   let currentSpecial: SpecialNavModel | undefined
 
+  let object: Doc | undefined = undefined
+
   location.subscribe((loc) => {
-    updateSpecialComponent(loc.path[3])
-    updateSelectedContext(loc.path[3])
-    filterId = loc.query?.filter as Ref<ActivityMessagesFilter> | undefined
+    syncLocation(loc)
   })
 
-  function updateSpecialComponent (id?: string): SpecialNavModel | undefined {
-    if (id === undefined) {
-      return
-    }
+  $: updateSelectedContext($contextsStore, selectedContextId)
 
-    currentSpecial = navigatorModel?.specials?.find((special) => special.id === id)
-  }
-
-  function updateSelectedContext (id?: string) {
-    selectedContextId = id as Ref<DocNotifyContext> | undefined
-
-    if (selectedContext && selectedContextId !== selectedContext._id) {
-      selectedContext = undefined
-    }
-  }
-
-  $: selectedContextId &&
-    notifyContextQuery.query(
-      notification.class.DocNotifyContext,
-      { _id: selectedContextId },
-      (res: DocNotifyContext[]) => {
-        selectedContext = res[0]
-      }
+  $: selectedContext &&
+    objectQuery.query(
+      selectedContext.attachedToClass,
+      { _id: selectedContext.attachedTo },
+      (res) => {
+        object = res[0]
+      },
+      { limit: 1 }
     )
 
-  $: selectedContext !== undefined &&
-    objectQuery.query(selectedContext.attachedToClass, { _id: selectedContext.attachedTo }, (res: Doc[]) => {
-      object = res[0]
-    })
+  function syncLocation (loc: Location) {
+    const specialId = loc.path[3]
+
+    currentSpecial = navigatorModel?.specials?.find((special) => special.id === specialId)
+
+    if (currentSpecial !== undefined) {
+      selectedContext = undefined
+      selectedContextId = undefined
+    } else {
+      selectedContextId = loc.path[3] as Ref<DocNotifyContext> | undefined
+    }
+  }
+
+  function updateSelectedContext (contexts: DocNotifyContext[], _id?: Ref<DocNotifyContext>) {
+    if (selectedContextId === undefined) {
+      selectedContext = undefined
+    } else {
+      selectedContext = contexts.find(({ _id }) => _id === selectedContextId)
+    }
+  }
+
+  function handleChannelSelected (event: CustomEvent) {
+    const { context } = event.detail ?? {}
+
+    selectedContext = context
+    selectedContextId = selectedContext?._id
+
+    if (selectedContext?.attachedTo !== object?._id) {
+      object = undefined
+    }
+
+    const loc = getCurrentLocation()
+
+    loc.path[3] = selectedContextId as string
+    loc.path[4] = ''
+    loc.query = { ...loc.query, message: null }
+    loc.path.length = 4
+
+    navigate(loc)
+  }
 
   defineSeparators('chat', [
     { minSize: 20, maxSize: 40, size: 30, float: 'navigator' },
@@ -98,7 +126,12 @@
     >
       <div class="antiPanel-wrap__content">
         <NavHeader label={chunter.string.Chat} />
-        <ChatNavigator {selectedContextId} {currentSpecial} />
+        <ChatNavigator
+          {selectedContextId}
+          selectedObjectClass={selectedContext?.attachedToClass}
+          {currentSpecial}
+          on:select={handleChannelSelected}
+        />
       </div>
       <Separator name="chat" float={navFloat ? 'navigator' : true} index={0} />
     </div>
@@ -124,10 +157,8 @@
           }
         }}
       />
-    {:else if selectedContext && object}
-      {#key selectedContext._id}
-        <ChannelView context={selectedContext} {object} {filterId} />
-      {/key}
+    {:else if selectedContext}
+      <ChannelView context={selectedContext} {object} />
     {/if}
   </div>
 </div>
diff --git a/plugins/chunter-resources/src/components/chat/ChatAside.svelte b/plugins/chunter-resources/src/components/chat/ChatAside.svelte
new file mode 100644
index 0000000000..5c706b6e4c
--- /dev/null
+++ b/plugins/chunter-resources/src/components/chat/ChatAside.svelte
@@ -0,0 +1,48 @@
+<!--
+// 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 { Doc, Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { ActivityMessage } from '@hcengineering/activity'
+  import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
+  import { DocNotifyContext } from '@hcengineering/notification'
+
+  import { ThreadView } from '../../index'
+  import ChannelView from '../ChannelView.svelte'
+
+  export let _id: Ref<Doc>
+
+  const notificationsClient = InboxNotificationsClientImpl.getClient()
+  const contextsStore = notificationsClient.docNotifyContexts
+  const objectQuery = createQuery()
+
+  let threadId: Ref<ActivityMessage> | undefined = undefined
+  let context: DocNotifyContext | undefined = undefined
+  let object: Doc | undefined = undefined
+
+  $: context = $contextsStore.find((context) => context._id === _id)
+  $: threadId = context ? undefined : (_id as Ref<ActivityMessage>)
+
+  $: context &&
+    objectQuery.query(context.attachedToClass, { _id: context.attachedTo }, (res) => {
+      ;[object] = res
+    })
+</script>
+
+{#if threadId}
+  <ThreadView _id={threadId} on:close />
+{:else if context}
+  <ChannelView {object} {context} allowClose embedded on:close />
+{/if}
diff --git a/plugins/chunter-resources/src/components/chat/DocChatPanel.svelte b/plugins/chunter-resources/src/components/chat/DocChatPanel.svelte
index 5c6a6ad949..fa5190da74 100644
--- a/plugins/chunter-resources/src/components/chat/DocChatPanel.svelte
+++ b/plugins/chunter-resources/src/components/chat/DocChatPanel.svelte
@@ -13,119 +13,49 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Doc, Mixin, Ref, SortingOrder } from '@hcengineering/core'
-  import { createQuery, getClient } from '@hcengineering/presentation'
-  import { ActionIcon, getCurrentResolvedLocation, Label, navigate } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
-  import { DocAttributeBar, DocNavLink, getDocLinkTitle, getDocMixins, openDoc } from '@hcengineering/view-resources'
-  import { getResource } from '@hcengineering/platform'
-  import { SpecialElement } from '@hcengineering/workbench-resources'
-  import activity, { ActivityMessage, ActivityMessagesFilter } from '@hcengineering/activity'
-  import { combineActivityMessages } from '@hcengineering/activity-resources'
+  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 chunter from '../../plugin'
 
-  export let object: Doc
-  export let filterId: Ref<ActivityMessagesFilter> = activity.ids.AllFilter
+  export let _id: Ref<Doc>
+  export let _class: Ref<Class<Doc>>
+  export let object: Doc | undefined
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
-  const activityMessagesQuery = createQuery()
-
-  $: clazz = hierarchy.getClass(object._class)
-  $: objectChatPanel = hierarchy.classHierarchyMixin(object._class, chunter.mixin.ObjectChatPanel)
 
   let mixins: Array<Mixin<Doc>> = []
-  let linkTitle: string | undefined = undefined
+  let objectLinkTitle: string | undefined = undefined
 
-  let activityMessages: ActivityMessage[] = []
-  let filters: ActivityMessagesFilter[] = []
+  $: clazz = hierarchy.getClass(_class)
+  $: objectChatPanel = hierarchy.classHierarchyMixin(_class, chunter.mixin.ObjectChatPanel)
 
-  $: mixins = getDocMixins(object)
+  $: mixins = object ? getDocMixins(object) : []
 
-  $: getDocLinkTitle(client, object._id, object._class, object).then((res) => {
-    linkTitle = res
+  $: getDocLinkTitle(client, _id, _class, object).then((res) => {
+    objectLinkTitle = res
   })
-
-  $: activityMessagesQuery.query(activity.class.ActivityMessage, { attachedTo: object._id }, (res) => {
-    activityMessages = combineActivityMessages(res)
-  })
-
-  client
-    .findAll(activity.class.ActivityMessagesFilter, {}, { sort: { position: SortingOrder.Ascending } })
-    .then((res) => {
-      filters = res
-    })
-
-  function handleFilterSelected (filter: ActivityMessagesFilter) {
-    const loc = getCurrentResolvedLocation()
-    loc.query = { filter: filter._id }
-    navigate(loc)
-  }
-
-  async function getMessagesCount (
-    filter: ActivityMessagesFilter,
-    activityMessages: ActivityMessage[]
-  ): Promise<number> {
-    if (filter._id === activity.ids.AllFilter) {
-      return activityMessages.length
-    }
-
-    const filterFn = await getResource(filter.filter)
-    const filteredMessages = activityMessages.filter((message) => filterFn(message, object._class))
-
-    return filteredMessages.length
-  }
 </script>
 
-<div class="actions">
-  <ActionIcon
-    icon={view.icon.Open}
-    size="medium"
-    action={() => {
-      openDoc(client.getHierarchy(), object)
-    }}
-  />
-</div>
-
-<div class="header">
-  <div class="identifier">
-    <Label label={clazz.label} />
-    {#if linkTitle}
-      •
-      <DocNavLink {object}>
-        {linkTitle}
-      </DocNavLink>
-    {/if}
-  </div>
-  {#if objectChatPanel}
-    {#await getResource(objectChatPanel.titleProvider) then getTitle}
-      <div class="title overflow-label">
-        {getTitle(object)}
-      </div>
-    {/await}
-  {/if}
-</div>
-
-<DocAttributeBar {object} {mixins} ignoreKeys={objectChatPanel?.ignoreKeys ?? []} showHeader={false} />
-
-{#each filters as filter}
-  {#key filter._id}
-    {#await getMessagesCount(filter, activityMessages) then count}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      {#if filter._id === activity.ids.AllFilter || count > 0}
-        <div
-          on:click={() => {
-            handleFilterSelected(filter)
-          }}
-        >
-          <SpecialElement label={filter.label} selected={filterId === filter._id} notifications={count} />
-        </div>
+<Scroller>
+  <div class="header">
+    <div class="identifier">
+      <Label label={clazz.label} />
+      {#if objectLinkTitle}
+        •
+        <DocNavLink {object}>
+          {objectLinkTitle}
+        </DocNavLink>
       {/if}
-    {/await}
-  {/key}
-{/each}
+    </div>
+  </div>
+  {#if object}
+    <DocAttributeBar {object} {mixins} ignoreKeys={objectChatPanel?.ignoreKeys ?? []} showHeader={false} />
+  {/if}
+</Scroller>
 
 <style lang="scss">
   .header {
@@ -145,17 +75,4 @@
     color: var(--theme-halfcontent-color);
     font-size: 0.75rem;
   }
-
-  .title {
-    font-weight: 500;
-    font-size: 1.125rem;
-  }
-
-  .actions {
-    display: flex;
-    justify-content: end;
-    margin: 0.75rem;
-    padding: 0 0.75rem;
-    margin-bottom: 0;
-  }
 </style>
diff --git a/plugins/chunter-resources/src/components/chat/create/CreateChannel.svelte b/plugins/chunter-resources/src/components/chat/create/CreateChannel.svelte
index 1a0038c408..494a4a2075 100644
--- a/plugins/chunter-resources/src/components/chat/create/CreateChannel.svelte
+++ b/plugins/chunter-resources/src/components/chat/create/CreateChannel.svelte
@@ -14,33 +14,51 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { IconFolder, EditBox, ToggleWithLabel, Grid } from '@hcengineering/ui'
-  import presentation, { getClient, SpaceCreateCard } from '@hcengineering/presentation'
+  import { ModernEditbox, ButtonMenu, Label, Modal, TextArea } from '@hcengineering/ui'
+  import presentation, { getClient } from '@hcengineering/presentation'
   import { getResource } from '@hcengineering/platform'
   import core, { getCurrentAccount } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
 
+  import Lock from '../../icons/Lock.svelte'
   import chunter from '../../../plugin'
 
   const dispatch = createEventDispatcher()
-
-  let isPrivate: boolean = false
-  let name: string = ''
-
-  export function canClose (): boolean {
-    return name === ''
-  }
-
   const client = getClient()
 
-  async function createChannel () {
+  const visibilityOptions = [
+    {
+      id: 'public',
+      icon: chunter.icon.Hashtag,
+      label: chunter.string.Public
+    },
+    {
+      id: 'private',
+      icon: Lock,
+      label: chunter.string.Private
+    }
+  ]
+
+  let selectedVisibilityId = visibilityOptions[0].id
+  let channelName = ''
+  let description = ''
+  let canSave = true
+
+  $: visibilityIcon = visibilityOptions.find(({ id }) => id === selectedVisibilityId)?.icon ?? visibilityOptions[0].icon
+  $: visibilityLabel =
+    visibilityOptions.find(({ id }) => id === selectedVisibilityId)?.label ?? visibilityOptions[0].label
+
+  $: canSave = !!channelName
+
+  async function save () {
     const accountId = getCurrentAccount()._id
     const channelId = await client.createDoc(chunter.class.Channel, core.space.Space, {
-      name,
+      name: channelName,
       description: '',
-      private: isPrivate,
+      private: selectedVisibilityId === 'private',
       archived: false,
-      members: [accountId]
+      members: [accountId],
+      topic: description
     })
     const notifyContextId = await client.createDoc(notification.class.DocNotifyContext, core.space.Space, {
       user: accountId,
@@ -53,28 +71,46 @@
 
     await navigate(undefined, undefined, { _id: notifyContextId })
   }
+
+  function handleCancel () {
+    dispatch('close')
+  }
 </script>
 
-<SpaceCreateCard
-  label={chunter.string.CreateChannel}
-  okAction={createChannel}
-  canSave={!!name}
-  on:close={() => {
-    dispatch('close')
-  }}
+<Modal
+  label={chunter.string.NewChannel}
+  type="type-popup"
+  okLabel={presentation.string.Create}
+  okAction={save}
+  {canSave}
+  onCancel={handleCancel}
+  on:close
 >
-  <Grid column={1} rowGap={1.5}>
-    <EditBox
-      label={chunter.string.ChannelName}
-      icon={IconFolder}
-      bind:value={name}
-      placeholder={chunter.string.ChannelNamePlaceholder}
-      autoFocus
+  <div class="hulyModal-content__titleGroup" style="padding: 0">
+    <ModernEditbox bind:value={channelName} label={chunter.string.NewChannel} size="large" kind="ghost" />
+    <TextArea
+      placeholder={chunter.string.DescriptionOptional}
+      width="100%"
+      height="6.5rem"
+      margin="var(--spacing-1) var(--spacing-2)"
+      noFocusBorder
+      bind:value={description}
     />
-    <ToggleWithLabel
-      label={presentation.string.MakePrivate}
-      description={presentation.string.MakePrivateDescription}
-      bind:on={isPrivate}
-    />
-  </Grid>
-</SpaceCreateCard>
+  </div>
+  <div class="hulyModal-content__settingsSet">
+    <div class="hulyModal-content__settingsSet-line">
+      <span class="label"><Label label={chunter.string.Visibility} /></span>
+      <ButtonMenu
+        items={visibilityOptions}
+        selected={selectedVisibilityId}
+        icon={visibilityIcon}
+        label={visibilityLabel}
+        kind="secondary"
+        size="medium"
+        on:selected={(ev) => {
+          selectedVisibilityId = ev.detail
+        }}
+      />
+    </div>
+  </div>
+</Modal>
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatGroupHeader.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatGroupHeader.svelte
new file mode 100644
index 0000000000..9e644ed25c
--- /dev/null
+++ b/plugins/chunter-resources/src/components/chat/navigator/ChatGroupHeader.svelte
@@ -0,0 +1,80 @@
+<!--
+// 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 { IntlString } from '@hcengineering/platform'
+  import { Action, IconMoreH, Label, Menu, showPopup } from '@hcengineering/ui'
+
+  export let header: IntlString
+  export let actions: Action[] = []
+
+  async function handleMenuClicked (ev: MouseEvent) {
+    showPopup(Menu, { actions }, ev.target as HTMLElement)
+  }
+</script>
+
+<div class="root">
+  <div class="header uppercase">
+    <Label label={header} />
+  </div>
+
+  <div class="grower" />
+  {#if actions.length > 0}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="action" on:click|preventDefault|stopPropagation={handleMenuClicked}>
+      <IconMoreH size="small" />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .root {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: 0.375rem;
+    padding-right: 0.25rem;
+  }
+
+  .header {
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    background-color: var(--global-ui-highlight-BackgroundColor);
+    font-size: 0.75rem;
+    width: fit-content;
+    margin: 0.5rem 0;
+  }
+
+  .action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    flex-shrink: 0;
+    margin-left: 0.5rem;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--theme-caption-color);
+      background-color: var(--global-ui-highlight-BackgroundColor);
+    }
+  }
+
+  .grower {
+    flex-grow: 1;
+    min-width: 0;
+  }
+</style>
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatNavGroup.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatNavGroup.svelte
index 9505bb53ae..57a2d2268b 100644
--- a/plugins/chunter-resources/src/components/chat/navigator/ChatNavGroup.svelte
+++ b/plugins/chunter-resources/src/components/chat/navigator/ChatNavGroup.svelte
@@ -14,43 +14,63 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import type { Doc, Ref } from '@hcengineering/core'
-  import { getCurrentAccount } from '@hcengineering/core'
+  import { Doc, getCurrentAccount, Ref } from '@hcengineering/core'
   import notification, { DocNotifyContext } from '@hcengineering/notification'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { Action, IconAdd, Scroller, showPopup } from '@hcengineering/ui'
+  import activity from '@hcengineering/activity'
+  import view from '@hcengineering/view'
   import { getResource } from '@hcengineering/platform'
-  import { createQuery } from '@hcengineering/presentation'
-  import { Action, IconAdd, showPopup } from '@hcengineering/ui'
-  import { TreeNode } from '@hcengineering/view-resources'
 
-  import { getDocByNotifyContext } from '../utils'
+  import ChatNavItem from './ChatNavGroupItem.svelte'
+  import ChatGroupHeader from './ChatGroupHeader.svelte'
+  import chunter from '../../../plugin'
   import { ChatNavGroupModel } from '../types'
-  import ChatNavItem from './ChatNavItem.svelte'
 
-  export let model: ChatNavGroupModel
   export let selectedContextId: Ref<DocNotifyContext> | undefined = undefined
+  export let model: ChatNavGroupModel
 
   const dispatch = createEventDispatcher()
 
-  const notifyContextsQuery = createQuery()
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
 
-  let notifyContexts: DocNotifyContext[] = []
-  let docByNotifyContext: Map<Ref<DocNotifyContext>, Doc> = new Map<Ref<DocNotifyContext>, Doc>()
+  const contextsQuery = createQuery()
+  const pinnedQuery = createQuery()
 
-  notifyContextsQuery.query(
+  let contexts: DocNotifyContext[] = []
+  let pinnedContexts: DocNotifyContext[] = []
+
+  $: contextsQuery.query(
     notification.class.DocNotifyContext,
     {
       ...model.query,
       hidden: false,
+      isPinned: { $ne: true },
       user: getCurrentAccount()._id
     },
     (res: DocNotifyContext[]) => {
-      notifyContexts = res
+      contexts = sortContexts(
+        res.filter(
+          ({ attachedToClass }) =>
+            hierarchy.classHierarchyMixin(attachedToClass, activity.mixin.ActivityDoc) !== undefined
+        )
+      )
     }
   )
 
-  $: getDocByNotifyContext(notifyContexts).then((res) => {
-    docByNotifyContext = res
-  })
+  $: pinnedQuery.query(
+    notification.class.DocNotifyContext,
+    {
+      ...model.query,
+      hidden: false,
+      isPinned: true,
+      user: getCurrentAccount()._id
+    },
+    (res: DocNotifyContext[]) => {
+      pinnedContexts = res
+    }
+  )
 
   function getGroupActions (): Action[] {
     const result: Action[] = []
@@ -68,28 +88,85 @@
       })
     }
 
-    const additionalActions = model.actions?.map(({ icon, label, action }) => ({
+    return result
+  }
+
+  function getPinnedActions (): Action[] {
+    return [
+      {
+        icon: view.icon.Delete,
+        label: view.string.Delete,
+        action: chunter.actionImpl.UnpinAllChannels
+      }
+    ].map(({ icon, label, action }) => ({
       icon,
       label,
-      action: async (ctx: any, evt: Event) => {
-        const impl = await getResource(action)
-        await impl(notifyContexts, evt)
+      action: async (_: any, evt: Event) => {
+        const actionFn = await getResource(action)
+        await actionFn(pinnedContexts, evt)
       }
     }))
+  }
 
-    return additionalActions ? result.concat(additionalActions) : result
+  function sortContexts (contexts: DocNotifyContext[]): DocNotifyContext[] {
+    if (model.id !== 'activity') {
+      return contexts
+    }
+    return contexts.sort((context1, context2) => {
+      const hasNewMessages1 = (context1.lastUpdateTimestamp ?? 0) > (context1.lastViewedTimestamp ?? 0)
+      const hasNewMessages2 = (context2.lastUpdateTimestamp ?? 0) > (context2.lastViewedTimestamp ?? 0)
+
+      if (hasNewMessages1 && hasNewMessages2) {
+        return (context2.lastUpdateTimestamp ?? 0) - (context1.lastUpdateTimestamp ?? 0)
+      }
+
+      if (hasNewMessages1 && !hasNewMessages2) {
+        return -1
+      }
+
+      if (hasNewMessages2 && !hasNewMessages1) {
+        return 1
+      }
+
+      return (context2.lastUpdateTimestamp ?? 0) - (context1.lastUpdateTimestamp ?? 0)
+    })
   }
 </script>
 
-{#if !model.hideEmpty || notifyContexts.length > 0}
-  <TreeNode _id={`tree-${model.id}`} label={model.label} node actions={async () => getGroupActions()}>
-    {#each notifyContexts as docNotifyContext}
-      {@const doc = docByNotifyContext.get(docNotifyContext._id)}
-      {#if doc}
-        {#key docNotifyContext._id}
-          <ChatNavItem {doc} notifyContext={docNotifyContext} {selectedContextId} />
-        {/key}
-      {/if}
-    {/each}
-  </TreeNode>
-{/if}
+<Scroller padding="0 0.5rem">
+  {#if pinnedContexts.length}
+    <div class="block">
+      <ChatGroupHeader header={chunter.string.Pinned} actions={getPinnedActions()} />
+      {#each pinnedContexts as context (context._id)}
+        <ChatNavItem {context} isSelected={selectedContextId === context._id} on:select />
+      {/each}
+    </div>
+  {/if}
+
+  {#if pinnedContexts.length > 0 && contexts.length}
+    <div class="separator" />
+  {/if}
+
+  {#if contexts.length}
+    <div class="block">
+      <ChatGroupHeader header={model.label} actions={getGroupActions()} />
+      {#each contexts as context (context._id)}
+        <ChatNavItem {context} isSelected={selectedContextId === context._id} on:select />
+      {/each}
+    </div>
+  {/if}
+</Scroller>
+
+<style lang="scss">
+  .block {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .separator {
+    width: 100%;
+    height: 1px;
+    background: var(--theme-navpanel-border);
+    margin-top: 0.75rem;
+  }
+</style>
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatNavGroupItem.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatNavGroupItem.svelte
new file mode 100644
index 0000000000..7f07515a5f
--- /dev/null
+++ b/plugins/chunter-resources/src/components/chat/navigator/ChatNavGroupItem.svelte
@@ -0,0 +1,132 @@
+<!--
+// 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 type { Doc } from '@hcengineering/core'
+  import notification, { DocNotifyContext, InboxNotification } from '@hcengineering/notification'
+  import { getResource } from '@hcengineering/platform'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import contact from '@hcengineering/contact'
+  import { Action, IconEdit, IconSize } from '@hcengineering/ui'
+  import { getActions, getDocTitle } from '@hcengineering/view-resources'
+  import { getNotificationsCount, InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
+  import { createEventDispatcher } from 'svelte'
+
+  import chunter from '../../../plugin'
+  import { getChannelIcon, getChannelName } from '../../../utils'
+  import Item from './NavItem.svelte'
+
+  export let context: DocNotifyContext
+  export let isSelected = false
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+  const docQuery = createQuery()
+  const dispatch = createEventDispatcher()
+  const notificationClient = InboxNotificationsClientImpl.getClient()
+
+  let notifications: InboxNotification[] = []
+
+  let channelName: string | undefined = undefined
+  let description: string | undefined = undefined
+  let doc: Doc | undefined = undefined
+  let iconSize: IconSize = 'x-small'
+  let notificationsCount = 0
+  let actions: Action[] = []
+
+  $: docQuery.query(context.attachedToClass, { _id: context.attachedTo }, (res) => {
+    doc = res[0]
+  })
+
+  $: doc &&
+    getChannelName(context.attachedTo, context.attachedToClass, doc).then((res) => {
+      channelName = res
+    })
+
+  $: doc &&
+    !hierarchy.isDerived(context.attachedToClass, chunter.class.ChunterSpace) &&
+    getDocTitle(client, context.attachedTo, context.attachedToClass, doc).then((res) => {
+      description = res
+    })
+
+  notificationClient.inboxNotificationsByContext.subscribe((res) => {
+    notifications = res.get(context._id) ?? []
+  })
+
+  $: isDirect = hierarchy.isDerived(context.attachedToClass, chunter.class.DirectMessage)
+  $: isPerson = hierarchy.isDerived(context.attachedToClass, contact.class.Person)
+  $: isDocChat = !hierarchy.isDerived(context.attachedToClass, chunter.class.ChunterSpace)
+
+  $: if (isPerson) {
+    iconSize = 'medium'
+  } else if (isDocChat) {
+    iconSize = 'x-large'
+  } else {
+    iconSize = 'x-small'
+  }
+
+  $: getNotificationsCount(context, notifications).then((res) => {
+    notificationsCount = res
+  })
+
+  $: getChannelActions(context).then((res) => {
+    actions = res
+  })
+
+  async function getChannelActions (context: DocNotifyContext): Promise<Action[]> {
+    const result = []
+    const excludedActions = [notification.action.DeleteContextNotifications, notification.action.UnReadNotifyContext]
+    const actions = (await getActions(client, context, notification.class.DocNotifyContext)).filter(
+      ({ _id }) => !excludedActions.includes(_id)
+    )
+
+    for (const action of actions) {
+      const { visibilityTester } = action
+      const isVisibleFn = visibilityTester && (await getResource(visibilityTester))
+      const isVisible = isVisibleFn ? await isVisibleFn(context) : true
+
+      if (!isVisible) {
+        continue
+      }
+
+      result.push({
+        icon: action.icon ?? IconEdit,
+        label: action.label,
+        action: async (_: any, evt: Event) => {
+          const impl = await getResource(action.action)
+          await impl(context, evt, action.actionProps)
+        }
+      })
+    }
+    return result
+  }
+</script>
+
+<Item
+  id={context._id}
+  icon={getChannelIcon(context.attachedToClass)}
+  withIconBackground={!isDirect && !isPerson}
+  {iconSize}
+  isBold={isDocChat}
+  {isSelected}
+  iconProps={{ value: doc }}
+  {notificationsCount}
+  title={channelName}
+  intlTitle={isDocChat ? hierarchy.getClass(context.attachedToClass).label : chunter.string.Channel}
+  {description}
+  {actions}
+  on:click={() => {
+    dispatch('select', { doc, context })
+  }}
+/>
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte
deleted file mode 100644
index cfa0a76d44..0000000000
--- a/plugins/chunter-resources/src/components/chat/navigator/ChatNavItem.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<!--
-// 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 { Doc, Ref } from '@hcengineering/core'
-  import notification, { ActivityInboxNotification, DocNotifyContext } from '@hcengineering/notification'
-  import { getResource } from '@hcengineering/platform'
-  import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Action, IconEdit } from '@hcengineering/ui'
-  import {
-    getActions as getContributedActions,
-    getDocLinkTitle,
-    getDocTitle,
-    NavLink,
-    TreeItem
-  } from '@hcengineering/view-resources'
-  import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
-  import { ActivityMessage } from '@hcengineering/activity'
-  import { ThreadMessage } from '@hcengineering/chunter'
-
-  import chunter from '../../../plugin'
-  import { getChannelIcon } from '../../../utils'
-
-  export let doc: Doc
-  export let notifyContext: DocNotifyContext
-  export let selectedContextId: Ref<DocNotifyContext> | undefined = undefined
-
-  const client = getClient()
-  const notificationClient = InboxNotificationsClientImpl.getClient()
-
-  const threadMessagesQuery = createQuery()
-
-  let threadMessages: ThreadMessage[] = []
-
-  $: inboxNotificationsStore = notificationClient.activityInboxNotifications
-
-  $: threadMessagesQuery.query(
-    chunter.class.ThreadMessage,
-    {
-      objectId: doc._id
-    },
-    (res) => {
-      threadMessages = res
-    }
-  )
-
-  function hasNewMessages (
-    context: DocNotifyContext,
-    notifications: ActivityInboxNotification[],
-    threadMessages: ThreadMessage[]
-  ) {
-    const { lastViewedTimestamp = 0, lastUpdateTimestamp = 0 } = context
-
-    if (lastViewedTimestamp < lastUpdateTimestamp) {
-      return true
-    }
-
-    const threadMessagesIds = threadMessages.map(({ _id }) => _id) as Ref<ActivityMessage>[]
-
-    return notifications.some(({ attachedTo, isViewed }) => threadMessagesIds.includes(attachedTo) && !isViewed)
-  }
-
-  async function getItemActions (docNotifyContext: DocNotifyContext): Promise<Action[]> {
-    const result = []
-
-    const actions = await getContributedActions(client, docNotifyContext, notification.class.DocNotifyContext)
-
-    for (const action of actions) {
-      const { visibilityTester } = action
-      const getIsVisible = visibilityTester && (await getResource(visibilityTester))
-      const isVisible = getIsVisible ? await getIsVisible(docNotifyContext) : true
-
-      if (!isVisible) {
-        continue
-      }
-
-      result.push({
-        icon: action.icon ?? IconEdit,
-        label: action.label,
-        action: async (ctx: any, evt: Event) => {
-          const impl = await getResource(action.action)
-          await impl(docNotifyContext, evt, action.actionProps)
-        }
-      })
-    }
-    return result
-  }
-
-  async function getChannelName (doc: Doc): Promise<string | undefined> {
-    if (doc._class === chunter.class.DirectMessage) {
-      return await getDocTitle(client, doc._id, doc._class, doc)
-    }
-    return await getDocLinkTitle(client, doc._id, doc._class, doc)
-  }
-</script>
-
-<NavLink space={notifyContext._id}>
-  {#await getChannelName(doc) then name}
-    <TreeItem
-      _id={notifyContext._id}
-      title={name ?? chunter.string.Channel}
-      selected={selectedContextId === notifyContext._id}
-      icon={getChannelIcon(doc)}
-      iconProps={{ value: doc }}
-      iconSize="x-small"
-      showNotify={hasNewMessages(notifyContext, $inboxNotificationsStore, threadMessages)}
-      actions={async () => await getItemActions(notifyContext)}
-      indent
-    />
-  {/await}
-</NavLink>
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatNavigator.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatNavigator.svelte
index b161ca9cc3..60eafb3429 100644
--- a/plugins/chunter-resources/src/components/chat/navigator/ChatNavigator.svelte
+++ b/plugins/chunter-resources/src/components/chat/navigator/ChatNavigator.svelte
@@ -13,28 +13,98 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref } from '@hcengineering/core'
-  import { Scroller } from '@hcengineering/ui'
+  import { Class, Doc, Ref } from '@hcengineering/core'
+  import {
+    getCurrentLocation,
+    IModeSelector,
+    ModeSelector,
+    navigate,
+    location as locationStore,
+    Scroller,
+    SearchEdit
+  } from '@hcengineering/ui'
   import { DocNotifyContext } from '@hcengineering/notification'
   import { SpecialNavModel } from '@hcengineering/workbench'
   import { NavLink } from '@hcengineering/view-resources'
-  import { SpecialElement, TreeSeparator } from '@hcengineering/workbench-resources'
-  import { getResource } from '@hcengineering/platform'
+  import { TreeSeparator } from '@hcengineering/workbench-resources'
+  import { getResource, type IntlString } from '@hcengineering/platform'
   import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
+  import { getClient } from '@hcengineering/presentation'
 
+  import chunter from '../../../plugin'
   import ChatNavGroup from './ChatNavGroup.svelte'
-  import { chatNavGroups, chatSpecials } from '../utils'
+  import { Mode } from '../types'
+  import { chatNavGroupsModel, chatSpecials } from '../utils'
+  import ChatSpecialElement from './ChatSpecialElement.svelte'
+  import { userSearch } from '../../../index'
+  import { navigateToSpecial } from '../../../utils'
 
   export let selectedContextId: Ref<DocNotifyContext> | undefined
+  export let selectedObjectClass: Ref<Class<DocNotifyContext>> | undefined
   export let currentSpecial: SpecialNavModel | undefined
 
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
   const notificationClient = InboxNotificationsClientImpl.getClient()
+  const contextsStore = notificationClient.docNotifyContexts
 
-  let notifyContexts: DocNotifyContext[] = []
+  const modesConfig: Array<[Mode, IntlString, object]> = chatNavGroupsModel.map(({ id, tabLabel }) => [
+    id,
+    tabLabel,
+    {}
+  ])
 
-  notificationClient.docNotifyContexts.subscribe((res) => {
-    notifyContexts = res
-  })
+  let modeSelectorProps: IModeSelector
+  let mode: Mode | undefined
+
+  const searchValue: string = ''
+
+  $: mode = ($locationStore.query?.mode ?? undefined) as Mode | undefined
+
+  $: if (mode === undefined) {
+    ;[[mode]] = modesConfig
+  }
+
+  $: modeSelectorProps = {
+    mode: (mode ?? modesConfig[0][0]) as string,
+    config: modesConfig,
+    onChange: (mode: string) => {
+      handleModeChanged(mode as Mode)
+    }
+  }
+
+  $: updateSelectedContextMode(selectedObjectClass)
+
+  $: model = chatNavGroupsModel.find(({ id }) => id === mode) ?? chatNavGroupsModel[0]
+
+  function updateSelectedContextMode (objectClass?: Ref<Class<Doc>>) {
+    if (objectClass === undefined) {
+      return
+    }
+
+    if (hierarchy.isDerived(objectClass, chunter.class.Channel)) {
+      if (mode !== 'channels') {
+        handleModeChanged('channels')
+        modeSelectorProps.mode = 'channels'
+      }
+    } else if (hierarchy.isDerived(objectClass, chunter.class.DirectMessage)) {
+      if (mode !== 'direct') {
+        handleModeChanged('direct')
+        modeSelectorProps.mode = 'direct'
+      }
+    } else if (mode !== 'activity') {
+      handleModeChanged('activity')
+      modeSelectorProps.mode = 'activity'
+    }
+  }
+
+  function handleModeChanged (newMode: Mode) {
+    const loc = getCurrentLocation()
+
+    mode = newMode
+    loc.query = { ...loc.query, mode }
+    navigate(loc)
+  }
 
   async function isSpecialVisible (special: SpecialNavModel, docNotifyContexts: DocNotifyContext[]) {
     if (special.visibleIf === undefined) {
@@ -45,31 +115,43 @@
 
     return await getIsVisible(docNotifyContexts as any)
   }
-
-  const menuSelection: boolean = false
 </script>
 
-<!--TODO: hasSpaceBrowser-->
 <Scroller shrink>
   {#each chatSpecials as special, row}
     {#if row > 0 && chatSpecials[row].position !== chatSpecials[row - 1].position}
       <TreeSeparator line />
     {/if}
-    {#await isSpecialVisible(special, notifyContexts) then isVisible}
+    {#await isSpecialVisible(special, $contextsStore) then isVisible}
       {#if isVisible}
         <NavLink space={special.id}>
-          <SpecialElement
-            label={special.label}
-            icon={special.icon}
-            selected={menuSelection ? false : special.id === currentSpecial?.id}
-          />
+          <ChatSpecialElement {special} {currentSpecial} />
         </NavLink>
       {/if}
     {/await}
   {/each}
 
-  {#each chatNavGroups as model}
-    <ChatNavGroup {selectedContextId} {model} on:open />
-  {/each}
+  <div class="search">
+    <SearchEdit
+      value={searchValue}
+      width="auto"
+      on:change={(ev) => {
+        userSearch.set(ev.detail)
+
+        if (ev.detail !== '') {
+          navigateToSpecial('chunterBrowser')
+        }
+      }}
+    />
+  </div>
+
+  <ModeSelector props={modeSelectorProps} kind="separated-free" padding="0" expansion="stretch" />
+  <ChatNavGroup {selectedContextId} {model} on:select />
   <div class="antiNav-space" />
 </Scroller>
+
+<style lang="scss">
+  .search {
+    padding: 12px;
+  }
+</style>
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte
new file mode 100644
index 0000000000..951458f0c6
--- /dev/null
+++ b/plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte
@@ -0,0 +1,79 @@
+<!--
+// 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 { SpecialNavModel } from '@hcengineering/workbench'
+  import { getResource } from '@hcengineering/platform'
+  import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
+  import { DocNotifyContext, InboxNotification } from '@hcengineering/notification'
+  import { Ref } from '@hcengineering/core'
+  import { SavedAttachments } from '@hcengineering/attachment'
+  import { SavedMessage } from '@hcengineering/activity'
+
+  import NavItem from './NavItem.svelte'
+  import { savedAttachmentsStore, savedMessagesStore } from '../utils'
+
+  export let special: SpecialNavModel
+  export let currentSpecial: SpecialNavModel | undefined = undefined
+
+  const notificationsClient = InboxNotificationsClientImpl.getClient()
+  const notificationsByContextStore = notificationsClient.inboxNotificationsByContext
+
+  let notificationsCount = 0
+  let elementsCount = 0
+
+  $: getNotificationsCount(special, $notificationsByContextStore).then((res) => {
+    notificationsCount = res
+  })
+  $: elementsCount = getElementsCount(special, $savedMessagesStore, $savedAttachmentsStore)
+
+  async function getNotificationsCount (
+    special: SpecialNavModel,
+    notificationsByContext: Map<Ref<DocNotifyContext>, InboxNotification[]>
+  ) {
+    if (!special.notificationsCountProvider) {
+      return 0
+    }
+
+    const providerFn = await getResource(special.notificationsCountProvider)
+
+    return providerFn(notificationsByContext)
+  }
+
+  function getElementsCount (
+    special: SpecialNavModel,
+    savedMessages: SavedMessage[],
+    savedAttachments: SavedAttachments[]
+  ): number {
+    if (special.id === 'saved') {
+      return savedMessages.length + savedAttachments.length
+    }
+
+    return 0
+  }
+</script>
+
+<div class="mr-2 ml-2">
+  <NavItem
+    id={special.id}
+    icon={special.icon}
+    iconPadding="0 0 0 0.375rem"
+    iconSize="small"
+    intlTitle={special.label}
+    withIconBackground={false}
+    {notificationsCount}
+    {elementsCount}
+    isSelected={special.id === currentSpecial?.id}
+  />
+</div>
diff --git a/plugins/chunter-resources/src/components/chat/navigator/NavItem.svelte b/plugins/chunter-resources/src/components/chat/navigator/NavItem.svelte
new file mode 100644
index 0000000000..e653bd5b7e
--- /dev/null
+++ b/plugins/chunter-resources/src/components/chat/navigator/NavItem.svelte
@@ -0,0 +1,246 @@
+<!--
+// 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 {
+    Action,
+    ActionIcon,
+    AnySvelteComponent,
+    Icon,
+    IconMoreH,
+    IconRight,
+    IconSize,
+    Label,
+    Menu,
+    showPopup
+  } from '@hcengineering/ui'
+  import { NotifyMarker } from '@hcengineering/notification-resources'
+  import { Asset, IntlString } from '@hcengineering/platform'
+
+  export let id: string
+  export let icon: Asset | AnySvelteComponent | undefined
+  export let iconProps: any | undefined = undefined
+  export let iconSize: IconSize = 'x-small'
+  export let iconPadding: string | null = null
+  export let withIconBackground = true
+  export let isSelected = false
+  export let isBold = false
+  export let notificationsCount = 0
+  export let title: string | undefined = undefined
+  export let intlTitle: IntlString | undefined = undefined
+  export let description: string | undefined = undefined
+  export let actions: Action[] = []
+  export let elementsCount = 0
+
+  let menuOpened = false
+  let inlineActions: Action[] = []
+  let menuActions: Action[] = []
+
+  $: inlineActions = actions.filter(({ inline }) => inline === true)
+  $: menuActions = actions.filter(({ inline }) => inline !== true)
+
+  async function handleMenuClicked (ev: MouseEvent) {
+    showPopup(Menu, { actions: menuActions, ctx: id }, ev.target as HTMLElement, () => {
+      menuOpened = false
+    })
+    menuOpened = true
+  }
+
+  async function handleInlineActionClicked (ev: MouseEvent, action: Action) {
+    await action.action([], ev)
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="root" class:pressed={menuOpened || isSelected} on:click>
+  {#if icon}
+    <div class="icon" class:withBackground={withIconBackground} style:padding={iconPadding}>
+      <Icon
+        {icon}
+        {iconProps}
+        size={iconSize}
+        fill={isSelected ? 'var(--theme-link-color)' : 'var(--global-primary-TextColor)'}
+      />
+    </div>
+  {/if}
+
+  <div class="content">
+    <span
+      class="label overflow-label"
+      class:bold={isBold}
+      class:extraBold={notificationsCount > 0 || isSelected}
+      class:selected={isSelected}
+      style="flex-shrink: 0"
+    >
+      {#if title}
+        {title}
+      {:else if intlTitle}
+        <Label label={intlTitle} />
+      {/if}
+    </span>
+
+    {#if description}
+      <span class="label secondary overflow-label withWrap mt-0-5" title={description}>
+        {description}
+      </span>
+    {/if}
+  </div>
+
+  <div class="grower" />
+
+  <div class="controls">
+    <div class="flex-center">
+      {#each inlineActions as action}
+        <div
+          class="action"
+          class:pressed={menuOpened}
+          on:click|preventDefault|stopPropagation={(ev) => handleInlineActionClicked(ev, action)}
+        >
+          <Icon icon={action.icon ?? ActionIcon} size="small" />
+        </div>
+      {/each}
+      {#if menuActions.length > 0}
+        <div class="action" class:pressed={menuOpened} on:click|preventDefault|stopPropagation={handleMenuClicked}>
+          <IconMoreH size={'small'} />
+        </div>
+      {/if}
+      {#if elementsCount > 0}
+        <div class="ml-2" />
+        <div class="elementsCounter">{elementsCount}</div>
+      {/if}
+      {#if notificationsCount > 0}
+        <div class="ml-2" />
+        <NotifyMarker count={notificationsCount} />
+      {/if}
+      {#if isSelected}
+        <div class="ml-2" />
+        <IconRight size="small" fill="var(--theme-link-color)" />
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .root {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0.5rem 0.25rem 0.5rem 0.25rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+      background-color: var(--global-ui-highlight-BackgroundColor);
+
+      .action {
+        visibility: visible;
+      }
+    }
+
+    &.pressed {
+      background-color: var(--global-ui-highlight-BackgroundColor);
+    }
+
+    .action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.25rem;
+      border-radius: 0.25rem;
+      flex-shrink: 0;
+      margin-left: 0.5rem;
+      visibility: hidden;
+
+      &:hover,
+      &.pressed {
+        visibility: visible;
+        color: var(--global-primary-TextColor);
+        background-color: var(--global-ui-highlight-BackgroundColor);
+      }
+    }
+  }
+
+  .grower {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-right: 0.375rem;
+    color: var(--global-primary-TextColor);
+
+    &.withBackground {
+      background-color: var(--global-ui-highlight-BackgroundColor);
+      padding: 0.375rem;
+      border-radius: 0.25rem;
+    }
+  }
+
+  .label {
+    font-size: 0.875rem;
+    color: var(--global-primary-TextColor);
+    font-weight: 400;
+
+    &.secondary {
+      color: var(--global-secondary-TextColor);
+    }
+
+    &.bold {
+      font-weight: 500;
+    }
+
+    &.extraBold {
+      font-weight: 700;
+    }
+
+    &.withWrap {
+      display: -webkit-box;
+      /* autoprefixer: ignore next */
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      white-space: break-spaces;
+      word-break: break-word;
+    }
+
+    &.selected {
+      color: var(--global-primary-LinkColor);
+    }
+  }
+
+  .controls {
+    display: flex;
+    height: 100%;
+    align-items: flex-start;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    justify-content: center;
+    max-height: 3.75rem;
+  }
+
+  .elementsCounter {
+    color: var(--global-tertiary-TextColor);
+    font-size: 0.75rem;
+  }
+</style>
diff --git a/plugins/chunter-resources/src/components/chat/specials/ChannelBrowser.svelte b/plugins/chunter-resources/src/components/chat/specials/ChannelBrowser.svelte
index a7ff040d40..6feec185b8 100644
--- a/plugins/chunter-resources/src/components/chat/specials/ChannelBrowser.svelte
+++ b/plugins/chunter-resources/src/components/chat/specials/ChannelBrowser.svelte
@@ -84,7 +84,7 @@
     searchQuery = search.length ? { $search: search } : {}
   }
 
-  function showCreateDialog (ev: Event) {
+  function showCreateDialog (_: Event) {
     showPopup(createItemDialog as AnyComponent, {}, 'middle')
   }
 
@@ -158,7 +158,7 @@
 <Scroller padding={'2.5rem'}>
   <div class="spaces-container">
     {#each spaces as space (space._id)}
-      {@const icon = getChannelIcon(space)}
+      {@const icon = getChannelIcon(space._class)}
       {@const joined = space.members.includes(me)}
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <div class="item flex-between" tabindex="0">
diff --git a/plugins/chunter-resources/src/components/chat/specials/ChunterBrowser.svelte b/plugins/chunter-resources/src/components/chat/specials/ChunterBrowser.svelte
index 5c510b82b9..120bd5165c 100644
--- a/plugins/chunter-resources/src/components/chat/specials/ChunterBrowser.svelte
+++ b/plugins/chunter-resources/src/components/chat/specials/ChunterBrowser.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import attachment from '@hcengineering/attachment'
   import { FileBrowser } from '@hcengineering/attachment-resources'
-  import { AnySvelteComponent, Button } from '@hcengineering/ui'
+  import { AnySvelteComponent, Button, Scroller } from '@hcengineering/ui'
   import workbench from '@hcengineering/workbench'
   import { SpaceBrowser } from '@hcengineering/workbench-resources'
   import contact from '@hcengineering/contact-resources/src/plugin'
@@ -63,19 +63,21 @@
 </script>
 
 <div class="flex-col h-full">
-  <div class="ac-header divide full caption-height">
-    <Header icon={workbench.icon.Search} intlLabel={plugin.string.ChunterBrowser} />
+  <div class="ac-header divide full caption-height" style="padding: 0.5rem 1rem">
+    <Header icon={workbench.icon.Search} intlLabel={plugin.string.ChunterBrowser} titleKind="breadcrumbs" />
   </div>
   <div class="h-full browser">
     <div class="pb-16 component">
       <div class="h-full">
         {#if components[searchType].component}
-          <svelte:component
-            this={components[searchType].component}
-            withHeader={false}
-            bind:search={userSearch_}
-            {...components[searchType].props}
-          />
+          <Scroller>
+            <svelte:component
+              this={components[searchType].component}
+              withHeader={false}
+              bind:search={userSearch_}
+              {...components[searchType].props}
+            />
+          </Scroller>
         {/if}
       </div>
     </div>
@@ -133,6 +135,7 @@
     display: flex;
     justify-content: flex-start;
     flex-direction: column-reverse;
+    background-color: var(--theme-popup-color);
   }
 
   .bar {
diff --git a/plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte b/plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte
index 452c1be793..ce91d85c44 100644
--- a/plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte
+++ b/plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte
@@ -13,44 +13,28 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import attachment, { Attachment, SavedAttachments } from '@hcengineering/attachment'
+  import { Attachment, SavedAttachments } from '@hcengineering/attachment'
   import { AttachmentPreview } from '@hcengineering/attachment-resources'
   import { Person, PersonAccount, getName as getContactName } from '@hcengineering/contact'
   import { personAccountByIdStore, personByIdStore } from '@hcengineering/contact-resources'
   import { getDisplayTime, IdMap, Ref, WithLookup } from '@hcengineering/core'
-  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { getClient } from '@hcengineering/presentation'
   import { Icon, Label, Scroller } from '@hcengineering/ui'
   import activity, { ActivityMessage, SavedMessage } from '@hcengineering/activity'
   import { ActivityMessagePresenter } from '@hcengineering/activity-resources'
 
   import chunter from '../../../plugin'
   import { openMessageFromSpecial } from '../../../utils'
+  import { savedAttachmentsStore, savedMessagesStore } from '../utils'
+  import Header from '../../Header.svelte'
 
   const client = getClient()
 
   let savedMessages: WithLookup<SavedMessage>[] = []
   let savedAttachments: WithLookup<SavedAttachments>[] = []
 
-  const savedMessagesQuery = createQuery()
-  const savedAttachmentsQuery = createQuery()
-
-  savedMessagesQuery.query(
-    activity.class.SavedMessage,
-    {},
-    (res) => {
-      savedMessages = res
-    },
-    { lookup: { attachedTo: activity.class.ActivityMessage } }
-  )
-
-  savedAttachmentsQuery.query(
-    attachment.class.SavedAttachments,
-    {},
-    (res) => {
-      savedAttachments = res
-    },
-    { lookup: { attachedTo: attachment.class.Attachment } }
-  )
+  $: savedMessages = $savedMessagesStore
+  $: savedAttachments = $savedAttachmentsStore
 
   async function openAttachment (attach?: Attachment) {
     if (attach === undefined) {
@@ -65,11 +49,11 @@
   }
 
   function getName (
-    a: Attachment,
+    attach: Attachment,
     personAccountByIdStore: IdMap<PersonAccount>,
     personByIdStore: IdMap<Person>
   ): string | undefined {
-    const acc = personAccountByIdStore.get(a.modifiedBy as Ref<PersonAccount>)
+    const acc = personAccountByIdStore.get(attach.modifiedBy as Ref<PersonAccount>)
     if (acc !== undefined) {
       const emp = personByIdStore.get(acc?.person)
       if (emp !== undefined) {
@@ -77,63 +61,70 @@
       }
     }
   }
+  function handleMessageClicked (message?: ActivityMessage) {
+    openMessageFromSpecial(message)
+  }
 </script>
 
-<div class="ac-header full divide caption-height">
-  <div class="ac-header__wrap-title">
-    <span class="ac-header__title"><Label label={chunter.string.SavedItems} /></span>
-  </div>
+<div class="ac-header full divide caption-height" style="padding: 0.5rem 1rem">
+  <Header icon={activity.icon.Bookmark} intlLabel={chunter.string.Saved} titleKind="breadcrumbs" />
 </div>
-<Scroller>
-  {#if savedMessages.length > 0 || savedAttachments.length > 0}
-    {#each savedMessages as message}
-      {#if message.$lookup?.attachedTo}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
 
-        <ActivityMessagePresenter
-          value={message.$lookup?.attachedTo}
-          onClick={() => {
-            openMessageFromSpecial(message.$lookup?.attachedTo)
-          }}
-        />
-      {/if}
-    {/each}
-    {#each savedAttachments as attach}
-      {#if attach.$lookup?.attachedTo}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <div
-          class="attachmentContainer flex-no-shrink clear-mins"
-          on:click={() => openAttachment(attach.$lookup?.attachedTo)}
-        >
-          <AttachmentPreview value={attach.$lookup.attachedTo} isSaved={true} />
-          <div class="label">
-            <Label
-              label={chunter.string.SharedBy}
-              params={{
-                name: getName(attach.$lookup.attachedTo, $personAccountByIdStore, $personByIdStore),
-                time: getDisplayTime(attach.modifiedOn)
-              }}
-            />
+<div class="body h-full w-full">
+  <Scroller padding="0.75rem 0.5rem">
+    {#if savedMessages.length > 0 || savedAttachments.length > 0}
+      {#each savedMessages as message}
+        {#if message.$lookup?.attachedTo}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+
+          <ActivityMessagePresenter
+            value={message.$lookup?.attachedTo}
+            onClick={() => {
+              handleMessageClicked(message.$lookup?.attachedTo)
+            }}
+          />
+        {/if}
+      {/each}
+      {#each savedAttachments as attach}
+        {#if attach.$lookup?.attachedTo}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div
+            class="attachmentContainer flex-no-shrink clear-mins"
+            on:click={() => openAttachment(attach.$lookup?.attachedTo)}
+          >
+            <AttachmentPreview value={attach.$lookup.attachedTo} isSaved={true} />
+            <div class="label">
+              <Label
+                label={chunter.string.SharedBy}
+                params={{
+                  name: getName(attach.$lookup.attachedTo, $personAccountByIdStore, $personByIdStore),
+                  time: getDisplayTime(attach.modifiedOn)
+                }}
+              />
+            </div>
           </div>
+        {/if}
+      {/each}
+    {:else}
+      <div class="empty">
+        <Icon icon={activity.icon.Bookmark} size="large" />
+        <div class="an-element__label header">
+          <Label label={chunter.string.EmptySavedHeader} />
         </div>
-      {/if}
-    {/each}
-  {:else}
-    <div class="empty">
-      <Icon icon={activity.icon.Bookmark} size="large" />
-      <div class="an-element__label header">
-        <Label label={chunter.string.EmptySavedHeader} />
+        <span class="an-element__label">
+          <Label label={chunter.string.EmptySavedText} />
+        </span>
       </div>
-      <span class="an-element__label">
-        <Label label={chunter.string.EmptySavedText} />
-      </span>
-    </div>
-  {/if}
-</Scroller>
+    {/if}
+  </Scroller>
+</div>
 
 <style lang="scss">
+  .body {
+    background-color: var(--theme-panel-color);
+  }
   .empty {
     display: flex;
     align-self: center;
@@ -151,10 +142,12 @@
   }
 
   .attachmentContainer {
+    cursor: pointer;
     padding: 2rem;
+    border-radius: 0.25rem;
 
     &:hover {
-      background-color: var(--highlight-hover);
+      background-color: var(--global-ui-BackgroundColor);
     }
 
     .label {
diff --git a/plugins/chunter-resources/src/components/chat/types.ts b/plugins/chunter-resources/src/components/chat/types.ts
index 4e89449862..c35090a280 100644
--- a/plugins/chunter-resources/src/components/chat/types.ts
+++ b/plugins/chunter-resources/src/components/chat/types.ts
@@ -12,22 +12,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-import { type Asset, type IntlString } from '@hcengineering/platform'
+import { type IntlString } from '@hcengineering/platform'
 import { type DocumentQuery } from '@hcengineering/core'
 import { type DocNotifyContext } from '@hcengineering/notification'
-import { type ViewAction } from '@hcengineering/view'
 import { type AnyComponent } from '@hcengineering/ui'
 
+export type Mode = 'channels' | 'direct' | 'activity'
+
 export interface ChatNavGroupModel {
-  id: string
-  label?: IntlString
+  id: Mode
+  label: IntlString
+  tabLabel: IntlString
   addLabel?: IntlString
   addComponent?: AnyComponent
-  query?: DocumentQuery<DocNotifyContext>
-  hideEmpty?: boolean
-  actions?: Array<{
-    icon: Asset
-    label: IntlString
-    action: ViewAction
-  }>
+  query: DocumentQuery<DocNotifyContext>
 }
diff --git a/plugins/chunter-resources/src/components/chat/utils.ts b/plugins/chunter-resources/src/components/chat/utils.ts
index 49de383a2e..c88109ef24 100644
--- a/plugins/chunter-resources/src/components/chat/utils.ts
+++ b/plugins/chunter-resources/src/components/chat/utils.ts
@@ -12,62 +12,50 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-import notification, { type DocNotifyContext } from '@hcengineering/notification'
-import { type Doc, type Ref } from '@hcengineering/core'
-import { getClient } from '@hcengineering/presentation'
-
+import notification from '@hcengineering/notification'
+import { SortingOrder, type WithLookup } from '@hcengineering/core'
+import { createQuery, getClient } from '@hcengineering/presentation'
+import { writable } from 'svelte/store'
 import view from '@hcengineering/view'
 import workbench, { type SpecialNavModel } from '@hcengineering/workbench'
-import attachment from '@hcengineering/attachment'
-import activity from '@hcengineering/activity'
+import attachment, { type SavedAttachments } from '@hcengineering/attachment'
+import activity, { type SavedMessage } from '@hcengineering/activity'
 
 import { type ChatNavGroupModel } from './types'
 import chunter from '../../plugin'
 
+export const savedMessagesStore = writable<Array<WithLookup<SavedMessage>>>([])
+export const savedAttachmentsStore = writable<Array<WithLookup<SavedAttachments>>>([])
+
 export const chatSpecials: SpecialNavModel[] = [
-  {
-    id: 'channelBrowser',
-    component: workbench.component.SpaceBrowser,
-    icon: chunter.icon.ChannelBrowser,
-    label: chunter.string.ChannelBrowser,
-    position: 'top',
-    componentProps: {
-      _class: chunter.class.Channel,
-      label: chunter.string.ChannelBrowser,
-      createItemDialog: chunter.component.CreateChannel,
-      createItemLabel: chunter.string.CreateChannel
-    }
-  },
-  {
-    id: 'fileBrowser',
-    label: attachment.string.FileBrowser,
-    icon: attachment.icon.FileBrowser,
-    component: attachment.component.FileBrowser,
-    position: 'top',
-    componentProps: {
-      requestedSpaceClasses: [chunter.class.Channel, chunter.class.DirectMessage]
-    }
-  },
   {
     id: 'threads',
     label: chunter.string.Threads,
     icon: chunter.icon.Thread,
     component: chunter.component.Threads,
-    position: 'top'
+    position: 'top',
+    notificationsCountProvider: chunter.function.GetUnreadThreadsCount
   },
   {
     id: 'saved',
-    label: chunter.string.SavedItems,
+    label: chunter.string.Saved,
     icon: activity.icon.Bookmark,
-    position: 'bottom',
+    position: 'top',
     component: chunter.component.SavedMessages
   },
+  {
+    id: 'chunterBrowser',
+    label: chunter.string.ChunterBrowser,
+    icon: workbench.icon.Search,
+    component: chunter.component.ChunterBrowser,
+    position: 'top'
+  },
   {
     id: 'archive',
     component: workbench.component.Archive,
     icon: view.icon.Archive,
     label: workbench.string.Archive,
-    position: 'bottom',
+    position: 'top',
     componentProps: {
       _class: notification.class.DocNotifyContext,
       config: [
@@ -82,97 +70,71 @@ export const chatSpecials: SpecialNavModel[] = [
       }
     },
     visibleIf: notification.function.HasHiddenDocNotifyContext
-  },
-  {
-    id: 'chunterBrowser',
-    label: chunter.string.ChunterBrowser,
-    icon: workbench.icon.Search,
-    component: chunter.component.ChunterBrowser,
-    visibleIf: chunter.function.ChunterBrowserVisible
   }
 ]
 
-export const chatNavGroups: ChatNavGroupModel[] = [
-  {
-    id: 'pinned',
-    label: notification.string.Pinned,
-    hideEmpty: true,
-    query: {
-      isPinned: true
-    },
-    actions: [
-      {
-        icon: view.icon.Delete,
-        label: view.string.Delete,
-        action: chunter.actionImpl.UnpinAllChannels
-      }
-    ]
-  },
-  {
-    id: 'documents',
-    label: chunter.string.Docs,
-    query: {
-      attachedToClass: {
-        $nin: [
-          chunter.class.DirectMessage,
-          chunter.class.Channel,
-          activity.class.DocUpdateMessage,
-          chunter.class.ChatMessage,
-          chunter.class.ThreadMessage,
-          chunter.class.Backlink
-        ]
-      },
-      isPinned: { $ne: true }
-    }
-  },
+export const chatNavGroupsModel: ChatNavGroupModel[] = [
   {
     id: 'channels',
-    label: chunter.string.Channels,
+    tabLabel: chunter.string.Channels,
+    label: chunter.string.AllChannels,
     query: {
-      attachedToClass: { $in: [chunter.class.Channel] },
-      isPinned: { $ne: true }
+      attachedToClass: { $in: [chunter.class.Channel] }
     },
     addLabel: chunter.string.CreateChannel,
     addComponent: chunter.component.CreateChannel
   },
   {
     id: 'direct',
-    label: chunter.string.DirectMessages,
+    tabLabel: chunter.string.Direct,
+    label: chunter.string.AllContacts,
     query: {
-      attachedToClass: { $in: [chunter.class.DirectMessage] },
-      isPinned: { $ne: true }
+      attachedToClass: { $in: [chunter.class.DirectMessage] }
     },
     addLabel: chunter.string.NewDirectMessage,
     addComponent: chunter.component.CreateDirectMessage
+  },
+  {
+    id: 'activity',
+    tabLabel: activity.string.Activity,
+    label: activity.string.Activity,
+    query: {
+      attachedToClass: {
+        $nin: [chunter.class.DirectMessage, chunter.class.Channel, chunter.class.Backlink]
+      }
+    }
   }
 ]
 
-export async function getDocByNotifyContext (
-  docNotifyContexts: DocNotifyContext[]
-): Promise<Map<Ref<DocNotifyContext>, Doc>> {
+function fillSavedItemsStores (): void {
   const client = getClient()
 
-  const docs = await Promise.all(
-    docNotifyContexts.map(
-      async ({ attachedTo, attachedToClass }) => await client.findOne(attachedToClass, { _id: attachedTo })
+  if (client !== undefined) {
+    const savedMessagesQuery = createQuery(true)
+    const savedAttachmentsQuery = createQuery(true)
+
+    savedAttachmentsQuery.query(
+      attachment.class.SavedAttachments,
+      {},
+      (res) => {
+        savedAttachmentsStore.set(res.filter(({ $lookup }) => $lookup?.attachedTo !== undefined))
+      },
+      { lookup: { attachedTo: attachment.class.Attachment }, sort: { modifiedOn: SortingOrder.Descending } }
     )
-  )
 
-  const result: Map<Ref<DocNotifyContext>, Doc> = new Map<Ref<DocNotifyContext>, Doc>()
-
-  for (const doc of docs) {
-    if (doc === undefined) {
-      continue
-    }
-
-    const context = docNotifyContexts.find(({ attachedTo }) => attachedTo === doc._id)
-
-    if (context === undefined) {
-      continue
-    }
-
-    result.set(context._id, doc)
+    savedMessagesQuery.query(
+      activity.class.SavedMessage,
+      {},
+      (res) => {
+        savedMessagesStore.set(res.filter(({ $lookup }) => $lookup?.attachedTo !== undefined))
+      },
+      { lookup: { attachedTo: activity.class.ActivityMessage }, sort: { modifiedOn: SortingOrder.Descending } }
+    )
+  } else {
+    setTimeout(() => {
+      fillSavedItemsStores()
+    }, 50)
   }
-
-  return result
 }
+
+fillSavedItemsStores()
diff --git a/plugins/chunter-resources/src/components/icons/Lock.svelte b/plugins/chunter-resources/src/components/icons/Lock.svelte
index 09e9c31eed..11453c9351 100644
--- a/plugins/chunter-resources/src/components/icons/Lock.svelte
+++ b/plugins/chunter-resources/src/components/icons/Lock.svelte
@@ -2,7 +2,7 @@
   import { IconSize } from '@hcengineering/ui'
 
   export let size: IconSize
-  const fill: string = 'currentColor'
+  export let fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/chunter-resources/src/components/notification/ThreadNotificationPresenter.svelte b/plugins/chunter-resources/src/components/notification/ThreadNotificationPresenter.svelte
index 288dfc4d2c..da435ae29e 100644
--- a/plugins/chunter-resources/src/components/notification/ThreadNotificationPresenter.svelte
+++ b/plugins/chunter-resources/src/components/notification/ThreadNotificationPresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { ThreadMessage } from '@hcengineering/chunter'
   import ThreadMessagePresenter from '../threads/ThreadMessagePresenter.svelte'
-  import { Action, getLocation, navigate } from '@hcengineering/ui'
+  import { Action } from '@hcengineering/ui'
   import { ActivityInboxNotification } from '@hcengineering/notification'
 
   export let message: ThreadMessage
@@ -26,13 +26,6 @@
   export let actions: Action[] = []
   export let excludedActions: string[] = []
   export let onClick: (() => void) | undefined = undefined
-
-  function handleReply (): void {
-    const loc = getLocation()
-    loc.fragment = notification.docNotifyContext
-    loc.query = { message: notification.attachedTo }
-    navigate(loc)
-  }
 </script>
 
 <ThreadMessagePresenter
@@ -42,9 +35,7 @@
   {withActions}
   {actions}
   {excludedActions}
-  withFlatActions={false}
   hoverable={false}
   showNotify={showNotify && !notification.isViewed}
-  onReply={handleReply}
   {onClick}
 />
diff --git a/plugins/chunter-resources/src/components/threads/ThreadParentPresenter.svelte b/plugins/chunter-resources/src/components/threads/ThreadParentPresenter.svelte
index ec865b9456..5336455636 100644
--- a/plugins/chunter-resources/src/components/threads/ThreadParentPresenter.svelte
+++ b/plugins/chunter-resources/src/components/threads/ThreadParentPresenter.svelte
@@ -19,4 +19,4 @@
   export let message: ActivityMessage
 </script>
 
-<ActivityMessagePresenter value={message} hideReplies />
+<ActivityMessagePresenter value={message} hideFooter />
diff --git a/plugins/chunter-resources/src/components/threads/ThreadView.svelte b/plugins/chunter-resources/src/components/threads/ThreadView.svelte
index 5f89e18f69..6c57c0781a 100644
--- a/plugins/chunter-resources/src/components/threads/ThreadView.svelte
+++ b/plugins/chunter-resources/src/components/threads/ThreadView.svelte
@@ -13,110 +13,157 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
-  import { IconClose, Label, location as locationStore } from '@hcengineering/ui'
+  import { Doc, Ref } from '@hcengineering/core'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { Breadcrumbs, IconClose, Label, location as locationStore } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import activity, { ActivityMessage, DisplayActivityMessage } from '@hcengineering/activity'
-  import { ActivityScrolledView } from '@hcengineering/activity-resources'
+  import { getMessageFromLoc } from '@hcengineering/activity-resources'
+  import contact from '@hcengineering/contact'
 
   import chunter from '../../plugin'
   import ThreadParentMessage from './ThreadParentPresenter.svelte'
+  import { getChannelIcon, getChannelName } from '../../utils'
+  import ChannelScrollView from '../ChannelScrollView.svelte'
 
   export let _id: Ref<ActivityMessage>
   export let selectedMessageId: Ref<ActivityMessage> | undefined = undefined
   export let showHeader: boolean = true
 
-  const messageQuery = createQuery()
   const dispatch = createEventDispatcher()
 
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  const messageQuery = createQuery()
+  const channelQuery = createQuery()
+  const messagesQuery = createQuery()
+
+  let channel: Doc | undefined = undefined
   let message: DisplayActivityMessage | undefined = undefined
+  let messages: DisplayActivityMessage[] = []
+
+  let channelName: string | undefined = undefined
 
   locationStore.subscribe((newLocation) => {
-    selectedMessageId = newLocation.query?.message as Ref<ActivityMessage> | undefined
+    selectedMessageId = getMessageFromLoc(newLocation)
   })
 
   $: messageQuery.query(activity.class.ActivityMessage, { _id }, (result: ActivityMessage[]) => {
     message = result[0] as DisplayActivityMessage
   })
 
-  let isLoading = false
-  let content: HTMLDivElement | undefined = undefined
-</script>
+  $: message &&
+    channelQuery.query(message.attachedToClass, { _id: message.attachedTo }, (res) => {
+      channel = res[0]
+    })
 
-{#if showHeader}
-  <div class="header">
-    <div class="title"><Label label={chunter.string.Thread} /></div>
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      class="tool"
-      on:click={() => {
-        dispatch('close')
-      }}
-    >
-      <IconClose size="medium" />
-    </div>
-  </div>
-{/if}
-{#if message}
-  <ThreadParentMessage {message} />
+  $: message &&
+    messagesQuery.query(chunter.class.ThreadMessage, { attachedTo: message._id }, (res) => {
+      messages = res
+    })
 
-  <div class="separator">
-    {#if message.replies && message.replies > 0}
-      <div class="label lower">
-        <Label label={activity.string.RepliesCount} params={{ replies: message.replies }} />
-      </div>
-    {/if}
-    <div class="line" />
-  </div>
+  $: message &&
+    getChannelName(message.attachedTo, message.attachedToClass, channel).then((res) => {
+      channelName = res
+    })
 
-  <ActivityScrolledView
-    bind:isLoading
-    bind:scrollElement={content}
-    {selectedMessageId}
-    _class={chunter.class.ThreadMessage}
-    withDates={false}
-    skipLabels
-    object={message}
-  />
-{/if}
-
-<style lang="scss">
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 1.75rem 0 1rem;
-    height: 4rem;
-    min-height: 4rem;
-
-    .title {
-      flex-grow: 1;
-      font-weight: 500;
-      font-size: 1.25rem;
-      color: var(--caption-color);
-      user-select: none;
+  function getBreadcrumbsItems (channel?: Doc, message?: DisplayActivityMessage, channelName?: string) {
+    if (message === undefined) {
+      return []
     }
 
-    .tool {
-      margin-left: 0.75rem;
-      opacity: 0.4;
-      cursor: pointer;
+    const isPersonAvatar =
+      message.attachedToClass === chunter.class.DirectMessage ||
+      hierarchy.isDerived(message.attachedToClass, contact.class.Person)
 
-      &:hover {
-        opacity: 1;
-      }
+    return [
+      {
+        icon: getChannelIcon(message.attachedToClass),
+        iconProps: { value: channel },
+        iconWidth: isPersonAvatar ? 'auto' : undefined,
+        withoutIconBackground: isPersonAvatar,
+        title: channelName,
+        label: channelName ? undefined : chunter.string.Channel
+      },
+      { label: chunter.string.Thread }
+    ]
+  }
+</script>
+
+<div class="popupPanel panel">
+  {#if showHeader}
+    <div class="ac-header divide full caption-height" style="padding: 0.5rem 1rem">
+      <Breadcrumbs items={getBreadcrumbsItems(channel, message, channelName)} />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="close"
+        on:click={() => {
+          dispatch('close')
+        }}
+      >
+        <IconClose size="medium" />
+      </div>
+    </div>
+  {/if}
+
+  <div class="popupPanel-body">
+    <div class="container">
+      {#if message}
+        <ChannelScrollView
+          {selectedMessageId}
+          {messages}
+          withDates={false}
+          skipLabels
+          object={message}
+          objectId={message._id}
+          objectClass={message._class}
+        >
+          <svelte:fragment slot="header">
+            <div class="mt-3 mr-6 ml-6">
+              <ThreadParentMessage {message} />
+            </div>
+            <div class="separator">
+              {#if message.replies && message.replies > 0}
+                <div class="label lower">
+                  <Label label={activity.string.RepliesCount} params={{ replies: message.replies }} />
+                </div>
+              {/if}
+              <div class="line" />
+            </div>
+          </svelte:fragment>
+        </ChannelScrollView>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .close {
+    margin-left: 0.75rem;
+    opacity: 0.4;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
     }
   }
 
   .separator {
     display: flex;
     align-items: center;
+    margin: 0.5rem 0;
 
     .label {
       white-space: nowrap;
-      margin: 0.5rem;
+      margin: 0 0.5rem;
       color: var(--theme-halfcontent-color);
     }
 
diff --git a/plugins/chunter-resources/src/components/chat/specials/Threads.svelte b/plugins/chunter-resources/src/components/threads/Threads.svelte
similarity index 53%
rename from plugins/chunter-resources/src/components/chat/specials/Threads.svelte
rename to plugins/chunter-resources/src/components/threads/Threads.svelte
index 2ae4828e57..15690c7837 100644
--- a/plugins/chunter-resources/src/components/chat/specials/Threads.svelte
+++ b/plugins/chunter-resources/src/components/threads/Threads.svelte
@@ -13,14 +13,16 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { getCurrentAccount } from '@hcengineering/core'
+  import { getCurrentAccount, SortingOrder } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Label, Scroller } from '@hcengineering/ui'
+  import { Scroller } from '@hcengineering/ui'
   import activity, { ActivityMessage } from '@hcengineering/activity'
   import { PersonAccount } from '@hcengineering/contact'
   import { ActivityMessagePresenter } from '@hcengineering/activity-resources'
 
-  import chunter from '../../../plugin'
+  import chunter from '../../plugin'
+  import Header from '../Header.svelte'
+  import { openMessageFromSpecial } from '../../utils'
 
   const threadsQuery = createQuery()
   const me = getCurrentAccount() as PersonAccount
@@ -30,26 +32,32 @@
   $: threadsQuery.query(
     activity.class.ActivityMessage,
     {
-      replies: { $gte: 1 }
+      replies: { $exists: true }
     },
     (res) => {
       threads = res.filter(
-        ({ createdBy, repliedPersons }) => createdBy === me._id || repliedPersons?.includes(me.person)
+        ({ createdBy, repliedPersons, replies }) =>
+          (replies !== undefined && replies > 0 && createdBy === me._id) || repliedPersons?.includes(me.person)
       )
-    }
+    },
+    { sort: { modifiedOn: SortingOrder.Descending } }
   )
 </script>
 
-<div class="ac-header full divide caption-height">
-  <div class="ac-header__wrap-title">
-    <span class="ac-header__title"><Label label={chunter.string.Threads} /></span>
-  </div>
+<div class="ac-header full divide caption-height" style="padding: 0.5rem 1rem">
+  <Header icon={chunter.icon.Thread} intlLabel={chunter.string.Threads} titleKind="breadcrumbs" />
 </div>
 
-<Scroller>
-  {#each threads as thread}
-    <div class="ml-4 mr-4">
-      <ActivityMessagePresenter value={thread} />
-    </div>
-  {/each}
-</Scroller>
+<div class="body h-full w-full">
+  <Scroller padding="0.75rem 0.5rem">
+    {#each threads as thread}
+      <ActivityMessagePresenter value={thread} onClick={() => openMessageFromSpecial(thread)} />
+    {/each}
+  </Scroller>
+</div>
+
+<style lang="scss">
+  .body {
+    background-color: var(--theme-panel-color);
+  }
+</style>
diff --git a/plugins/chunter-resources/src/index.ts b/plugins/chunter-resources/src/index.ts
index c674a52894..bf42879ebc 100644
--- a/plugins/chunter-resources/src/index.ts
+++ b/plugins/chunter-resources/src/index.ts
@@ -13,14 +13,20 @@
 // limitations under the License.
 //
 
-import { writable } from 'svelte/store'
-import chunter, { type Backlink, type Channel, type ChatMessage, type DirectMessage } from '@hcengineering/chunter'
+import { get, writable } from 'svelte/store'
+import chunter, {
+  type Backlink,
+  type Channel,
+  type ChatMessage,
+  chunterId,
+  type DirectMessage
+} from '@hcengineering/chunter'
 import { type Data, type Doc, type DocumentQuery, type Ref, type RelatedDocument } from '@hcengineering/core'
 import { type IntlString, type Resources, translate } from '@hcengineering/platform'
 import { MessageBox, getClient } from '@hcengineering/presentation'
 import { closePanel, getCurrentLocation, getLocation, navigate, showPopup } from '@hcengineering/ui'
 import activity, { type ActivityMessage, type DocUpdateMessage } from '@hcengineering/activity'
-import { type DocNotifyContext } from '@hcengineering/notification'
+import { type DocNotifyContext, inboxId } from '@hcengineering/notification'
 
 import ChannelPresenter from './components/ChannelPresenter.svelte'
 import ChannelView from './components/ChannelView.svelte'
@@ -48,23 +54,30 @@ import ThreadMessagePresenter from './components/threads/ThreadMessagePresenter.
 import ThreadParentPresenter from './components/threads/ThreadParentPresenter.svelte'
 import ChannelHeader from './components/ChannelHeader.svelte'
 import SavedMessages from './components/chat/specials/SavedMessages.svelte'
-import Threads from './components/chat/specials/Threads.svelte'
+import Threads from './components/threads/Threads.svelte'
 import DirectIcon from './components/DirectIcon.svelte'
 import ChannelIcon from './components/ChannelIcon.svelte'
 import ThreadNotificationPresenter from './components/notification/ThreadNotificationPresenter.svelte'
 import ChatMessageNotificationLabel from './components/notification/ChatMessageNotificationLabel.svelte'
+import ChatAside from './components/chat/ChatAside.svelte'
+import Replies from './components/Replies.svelte'
 
 import { updateBacklinksList } from './backlinks'
 import {
   ChannelTitleProvider,
   DirectTitleProvider,
   canDeleteMessage,
+  canReplyToThread,
   chunterSpaceLinkFragmentProvider,
   dmIdentifierProvider,
   getDmName,
-  getLink,
-  getTitle
+  getMessageLink,
+  getTitle,
+  getUnreadThreadsCount,
+  canCopyMessageLink,
+  navigateToThread
 } from './utils'
+import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
 
 export { default as ChatMessagesPresenter } from './components/chat-message/ChatMessagesPresenter.svelte'
 export { default as ChatMessagePopup } from './components/chat-message/ChatMessagePopup.svelte'
@@ -187,10 +200,19 @@ export async function deleteChatMessage (message: ChatMessage): Promise<void> {
 }
 
 export async function replyToThread (message: ActivityMessage): Promise<void> {
-  const loc = getLocation()
-  loc.path[4] = message._id
-  loc.query = { ...loc.query, thread: message._id }
-  navigate(loc)
+  const loc = getCurrentLocation()
+  const inboxClient = InboxNotificationsClientImpl.getClient()
+  const context = get(inboxClient.docNotifyContextByDoc).get(message.attachedTo)
+
+  if (context === undefined) {
+    return
+  }
+
+  if (loc.path[2] !== inboxId) {
+    loc.path[2] = chunterId
+  }
+
+  navigateToThread(loc, context._id, message._id)
 }
 
 export default async (): Promise<Resources> => ({
@@ -227,18 +249,23 @@ export default async (): Promise<Resources> => ({
     DirectIcon,
     ChannelIcon,
     ChatMessageNotificationLabel,
-    ThreadNotificationPresenter
+    ThreadNotificationPresenter,
+    ChatAside,
+    Replies
   },
   function: {
     GetDmName: getDmName,
     ChunterBrowserVisible: chunterBrowserVisible,
     GetFragment: getTitle,
-    GetLink: getLink,
+    GetLink: getMessageLink,
     DirectTitleProvider,
     ChannelTitleProvider,
     DmIdentifierProvider: dmIdentifierProvider,
     CanDeleteMessage: canDeleteMessage,
-    GetChunterSpaceLinkFragment: chunterSpaceLinkFragmentProvider
+    CanReplyToThread: canReplyToThread,
+    CanCopyMessageLink: canCopyMessageLink,
+    GetChunterSpaceLinkFragment: chunterSpaceLinkFragmentProvider,
+    GetUnreadThreadsCount: getUnreadThreadsCount
   },
   activity: {
     BacklinkCreatedLabel
diff --git a/plugins/chunter-resources/src/plugin.ts b/plugins/chunter-resources/src/plugin.ts
index 879335a799..866b65281b 100644
--- a/plugins/chunter-resources/src/plugin.ts
+++ b/plugins/chunter-resources/src/plugin.ts
@@ -19,6 +19,7 @@ import type { IntlString, Resource } from '@hcengineering/platform'
 import { mergeIds } from '@hcengineering/platform'
 import type { AnyComponent } from '@hcengineering/ui'
 import { type ViewAction } from '@hcengineering/view'
+import { type DocNotifyContext, type InboxNotification } from '@hcengineering/notification'
 
 export default mergeIds(chunterId, chunter, {
   component: {
@@ -43,7 +44,10 @@ export default mergeIds(chunterId, chunter, {
     GetDmName: '' as Resource<(client: Client, space: Space) => Promise<string>>,
     DirectTitleProvider: '' as Resource<(client: Client, id: Ref<Doc>) => Promise<string>>,
     ChannelTitleProvider: '' as Resource<(client: Client, id: Ref<Doc>) => Promise<string>>,
-    ChunterBrowserVisible: '' as Resource<(spaces: Space[]) => Promise<boolean>>
+    ChunterBrowserVisible: '' as Resource<(spaces: Space[]) => Promise<boolean>>,
+    GetUnreadThreadsCount: '' as Resource<
+    (inboxNotificationsByContext: Map<Ref<DocNotifyContext>, InboxNotification[]>) => number
+    >
   },
   actionImpl: {
     SubscribeMessage: '' as ViewAction,
@@ -88,7 +92,7 @@ export default mergeIds(chunterId, chunter, {
     SharedBy: '' as IntlString,
     LeaveChannel: '' as IntlString,
     ChannelBrowser: '' as IntlString,
-    SavedItems: '' as IntlString,
+    Saved: '' as IntlString,
     MessagesBrowser: '' as IntlString,
     ChunterBrowser: '' as IntlString,
     Messages: '' as IntlString,
diff --git a/plugins/chunter-resources/src/utils.ts b/plugins/chunter-resources/src/utils.ts
index 4f857756a2..9196838660 100644
--- a/plugins/chunter-resources/src/utils.ts
+++ b/plugins/chunter-resources/src/utils.ts
@@ -21,8 +21,17 @@ import {
   type ThreadMessage
 } from '@hcengineering/chunter'
 import contact, { type Employee, type PersonAccount, getName, type Person } from '@hcengineering/contact'
-import { employeeByIdStore } from '@hcengineering/contact-resources'
-import { type Client, type Doc, getCurrentAccount, type IdMap, type Ref, type Space } from '@hcengineering/core'
+import { employeeByIdStore, PersonIcon } from '@hcengineering/contact-resources'
+import {
+  type Client,
+  type Doc,
+  getCurrentAccount,
+  type IdMap,
+  type Ref,
+  type Space,
+  type Class,
+  type Timestamp
+} from '@hcengineering/core'
 import { getClient } from '@hcengineering/presentation'
 import {
   type AnySvelteComponent,
@@ -32,16 +41,22 @@ import {
   navigate
 } from '@hcengineering/ui'
 import { workbenchId } from '@hcengineering/workbench'
-import { type Asset, translate } from '@hcengineering/platform'
-import { classIcon } from '@hcengineering/view-resources'
-import { type ActivityMessage } from '@hcengineering/activity'
+import { type Asset, getResource, translate } from '@hcengineering/platform'
+import { classIcon, getDocLinkTitle, getDocTitle } from '@hcengineering/view-resources'
+import activity, {
+  type ActivityMessage,
+  type ActivityMessagesFilter,
+  type DisplayActivityMessage,
+  type DocUpdateMessage
+} from '@hcengineering/activity'
 import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
-import { type DocNotifyContext } from '@hcengineering/notification'
+import { type DocNotifyContext, inboxId } from '@hcengineering/notification'
 import { get, type Unsubscriber } from 'svelte/store'
 
 import chunter from './plugin'
 import DirectIcon from './components/DirectIcon.svelte'
 import ChannelIcon from './components/ChannelIcon.svelte'
+import { chatSpecials } from './components/chat/utils'
 
 export async function getDmName (client: Client, space?: Space): Promise<string> {
   if (space === undefined) {
@@ -95,6 +110,34 @@ export async function canDeleteMessage (doc?: ChatMessage): Promise<boolean> {
   return doc.createdBy === me._id
 }
 
+export async function canReplyToThread (doc?: ActivityMessage): Promise<boolean> {
+  if (doc === undefined) {
+    return false
+  }
+
+  if (doc._class === chunter.class.ThreadMessage) {
+    return false
+  }
+
+  if (doc._class === activity.class.DocUpdateMessage) {
+    return (doc as DocUpdateMessage).objectClass !== activity.class.Reaction
+  }
+
+  return true
+}
+
+export async function canCopyMessageLink (doc?: ActivityMessage): Promise<boolean> {
+  if (doc === undefined) {
+    return false
+  }
+
+  if (doc._class === activity.class.DocUpdateMessage) {
+    return (doc as DocUpdateMessage).objectClass !== activity.class.Reaction
+  }
+
+  return true
+}
+
 async function getDmAccounts (client: Client, space?: Space): Promise<PersonAccount[]> {
   if (space === undefined) {
     return []
@@ -149,28 +192,25 @@ export async function openMessageFromSpecial (message?: ActivityMessage): Promis
   if (message === undefined) {
     return
   }
+
   const inboxClient = InboxNotificationsClientImpl.getClient()
   const loc = getCurrentResolvedLocation()
 
   if (message._class === chunter.class.ThreadMessage) {
     const threadMessage = message as ThreadMessage
-    const context = get(inboxClient.docNotifyContextByDoc).get(threadMessage.objectId)
-    if (context === undefined) {
-      return
-    }
-    loc.path[2] = chunterId
-    loc.path[3] = context._id
-    loc.path[4] = message.attachedTo
+
+    loc.path[4] = threadMessage.attachedTo
   } else {
     const context = get(inboxClient.docNotifyContextByDoc).get(message.attachedTo)
+
     if (context === undefined) {
       return
     }
-    loc.path[2] = chunterId
-    loc.path[3] = context._id
+
+    loc.path[4] = context._id
   }
 
-  loc.fragment = message._id
+  loc.query = { ...loc.query, message: message._id }
 
   navigate(loc)
 }
@@ -189,7 +229,7 @@ export enum SearchType {
   Contacts
 }
 
-export async function getLink (message: ActivityMessage): Promise<string> {
+export async function getMessageLink (message: ActivityMessage): Promise<string> {
   const inboxClient = InboxNotificationsClientImpl.getClient()
   const location = getCurrentResolvedLocation()
 
@@ -242,16 +282,112 @@ export async function chunterSpaceLinkFragmentProvider (doc: ChunterSpace): Prom
   return loc
 }
 
-export function getChannelIcon (doc: Doc): Asset | AnySvelteComponent | undefined {
+export function getChannelIcon (_class: Ref<Class<Doc>>): Asset | AnySvelteComponent | undefined {
   const client = getClient()
+  const hierarchy = client.getHierarchy()
 
-  if (doc._class === chunter.class.Channel) {
+  if (_class === chunter.class.Channel) {
     return ChannelIcon
   }
 
-  if (doc._class === chunter.class.DirectMessage) {
+  if (_class === chunter.class.DirectMessage) {
     return DirectIcon
   }
 
-  return classIcon(client, doc._class)
+  if (hierarchy.isDerived(_class, contact.class.Person)) {
+    return PersonIcon
+  }
+
+  return classIcon(client, _class)
+}
+
+export async function getChannelName (
+  _id: Ref<Doc>,
+  _class: Ref<Class<Doc>>,
+  object?: Doc
+): Promise<string | undefined> {
+  const client = getClient()
+
+  if (client.getHierarchy().isDerived(_class, chunter.class.ChunterSpace)) {
+    return await getDocTitle(client, _id, _class, object)
+  }
+
+  return await getDocLinkTitle(client, _id, _class, object)
+}
+
+export function getUnreadThreadsCount (): number {
+  const notificationClient = InboxNotificationsClientImpl.getClient()
+
+  const threadIds = get(notificationClient.activityInboxNotifications)
+    .filter(({ attachedToClass, isViewed }) => attachedToClass === chunter.class.ThreadMessage && !isViewed)
+    .map(({ $lookup }) => $lookup?.attachedTo?.attachedTo)
+    .filter((_id) => _id !== undefined)
+
+  return new Set(threadIds).size
+}
+
+export function getClosestDateSelectorDate (date: Timestamp, scrollElement: HTMLDivElement): Timestamp | undefined {
+  const dateSelectors = scrollElement.getElementsByClassName('dateSelector')
+
+  if (dateSelectors === undefined || dateSelectors.length === 0) {
+    return
+  }
+
+  let closestDate: Timestamp | undefined = parseInt(dateSelectors[dateSelectors.length - 1].id)
+
+  for (const elem of Array.from(dateSelectors).reverse()) {
+    const curDate = parseInt(elem.id)
+    if (curDate < date) break
+    else if (curDate - date < closestDate - date) {
+      closestDate = curDate
+    }
+  }
+
+  return closestDate
+}
+
+export async function filterChatMessages (
+  messages: DisplayActivityMessage[],
+  filters: ActivityMessagesFilter[],
+  objectClass: Ref<Class<Doc>>,
+  selectedIds: Array<Ref<ActivityMessagesFilter>>
+): Promise<DisplayActivityMessage[]> {
+  if (selectedIds.length === 0 || selectedIds.includes(activity.ids.AllFilter)) {
+    return messages
+  }
+
+  const selectedFilters = filters.filter(({ _id }) => selectedIds.includes(_id))
+
+  if (selectedFilters.length === 0) {
+    return messages
+  }
+  const filtersFns: Array<(message: ActivityMessage, _class?: Ref<Doc>) => boolean> = []
+
+  for (const filter of selectedFilters) {
+    const filterFn = await getResource(filter.filter)
+    filtersFns.push(filterFn)
+  }
+
+  return messages.filter((message) => filtersFns.some((filterFn) => filterFn(message, objectClass)))
+}
+
+export function navigateToThread (loc: Location, contextId: Ref<DocNotifyContext>, _id: Ref<ActivityMessage>): void {
+  const specials = chatSpecials.map(({ id }) => id)
+
+  if (loc.path[2] === chunterId && specials.includes(loc.path[3])) {
+    loc.path[4] = _id
+    loc.query = { message: _id }
+    navigate(loc)
+    return
+  }
+
+  if (loc.path[2] !== inboxId) {
+    loc.path[2] = chunterId
+  }
+
+  loc.path[3] = contextId
+  loc.path[4] = _id
+  loc.fragment = undefined
+  loc.query = { message: _id }
+  navigate(loc)
 }
diff --git a/plugins/chunter/src/index.ts b/plugins/chunter/src/index.ts
index ac8ca556be..17a9273ce7 100644
--- a/plugins/chunter/src/index.ts
+++ b/plugins/chunter/src/index.ts
@@ -176,7 +176,9 @@ export default plugin(chunterId, {
     ChatMessageInput: '' as AnyComponent,
     ChatMessagesPresenter: '' as AnyComponent,
     ChatMessagePresenter: '' as AnyComponent,
-    ThreadMessagePresenter: '' as AnyComponent
+    ThreadMessagePresenter: '' as AnyComponent,
+    ChatAside: '' as AnyComponent,
+    Replies: '' as AnyComponent
   },
   class: {
     Message: '' as Ref<Class<Message>>,
@@ -221,7 +223,14 @@ export default plugin(chunterId, {
     ReplyToThread: '' as IntlString,
     Channels: '' as IntlString,
     Direct: '' as IntlString,
-    RepliedTo: '' as IntlString
+    RepliedTo: '' as IntlString,
+    AllChannels: '' as IntlString,
+    AllContacts: '' as IntlString,
+    NewChannel: '' as IntlString,
+    DescriptionOptional: '' as IntlString,
+    Visibility: '' as IntlString,
+    Public: '' as IntlString,
+    Private: '' as IntlString
   },
   ids: {
     DMNotification: '' as Ref<NotificationType>,
diff --git a/plugins/contact-resources/src/components/PersonIcon.svelte b/plugins/contact-resources/src/components/PersonIcon.svelte
index 92c4764907..ce7ae0f647 100644
--- a/plugins/contact-resources/src/components/PersonIcon.svelte
+++ b/plugins/contact-resources/src/components/PersonIcon.svelte
@@ -17,8 +17,10 @@
   import { IconSize } from '@hcengineering/ui'
   import Avatar from './Avatar.svelte'
 
-  export let value: Person
+  export let value: Person | undefined
   export let size: IconSize = 'small'
 </script>
 
-<Avatar avatar={value.avatar} {size} />
+{#if value}
+  <Avatar avatar={value.avatar} {size} />
+{/if}
diff --git a/plugins/contact-resources/src/index.ts b/plugins/contact-resources/src/index.ts
index ac018839de..591d15c00f 100644
--- a/plugins/contact-resources/src/index.ts
+++ b/plugins/contact-resources/src/index.ts
@@ -159,7 +159,8 @@ export {
   UserBoxItems,
   MembersBox,
   PersonRefPresenter,
-  SystemAvatar
+  SystemAvatar,
+  PersonIcon
 }
 
 const toObjectSearchResult = (e: WithLookup<Contact>): ObjectSearchResult => ({
diff --git a/plugins/notification-resources/src/components/DocNotifyContextCard.svelte b/plugins/notification-resources/src/components/DocNotifyContextCard.svelte
index 939430d29e..1808f9a10e 100644
--- a/plugins/notification-resources/src/components/DocNotifyContextCard.svelte
+++ b/plugins/notification-resources/src/components/DocNotifyContextCard.svelte
@@ -15,7 +15,6 @@
 <script lang="ts">
   import { ActionIcon, Component, IconMoreH, Label, showPopup } from '@hcengineering/ui'
   import notification, {
-    ActivityInboxNotification,
     ActivityNotificationViewlet,
     DisplayInboxNotification,
     DocNotifyContext
@@ -25,7 +24,6 @@
   import chunter from '@hcengineering/chunter'
   import { createEventDispatcher } from 'svelte'
   import { WithLookup } from '@hcengineering/core'
-  import { AddReactionAction } from '@hcengineering/activity-resources'
 
   import InboxNotificationPresenter from './inbox/InboxNotificationPresenter.svelte'
   import NotifyContextIcon from './NotifyContextIcon.svelte'
@@ -68,11 +66,6 @@
   )
   $: isCompact = notifications.length === 1
 
-  $: message =
-    visibleNotification._class === notification.class.ActivityInboxNotification
-      ? (visibleNotification as WithLookup<ActivityInboxNotification>).$lookup?.attachedTo
-      : undefined
-
   let isActionMenuOpened = false
 
   function handleActionMenuOpened (): void {
@@ -104,16 +97,10 @@
     }}
   >
     {#if isCompact}
-      <InboxNotificationPresenter value={visibleNotification} {viewlets} showNotify={false} withActions={false} />
+      <InboxNotificationPresenter value={visibleNotification} {viewlets} showNotify={false} withFlatActions />
       <div class="notifyMarker compact">
         <NotifyMarker count={unreadCount} />
       </div>
-      <div class="actions clear-mins flex flex-gap-2 items-center" class:opened={isActionMenuOpened}>
-        {#if message}
-          <AddReactionAction object={message} on:open={handleActionMenuOpened} on:close={handleActionMenuClosed} />
-        {/if}
-        <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
-      </div>
     {:else}
       <div class="header">
         <!--      <CheckBox-->
diff --git a/plugins/notification-resources/src/components/NotifyMarker.svelte b/plugins/notification-resources/src/components/NotifyMarker.svelte
index 9d8bdf572e..90f2a841c8 100644
--- a/plugins/notification-resources/src/components/NotifyMarker.svelte
+++ b/plugins/notification-resources/src/components/NotifyMarker.svelte
@@ -37,7 +37,7 @@
     height: 1rem;
     border-radius: 50%;
     background-color: var(--highlight-red);
-    font-size: 0.625rem;
+    font-size: 0.5rem;
     font-weight: 700;
     color: var(--white-color);
   }
diff --git a/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte b/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte
index f12ca65e8d..4c10bff251 100644
--- a/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte
+++ b/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte
@@ -23,12 +23,12 @@
   } from '@hcengineering/notification'
   import { ActivityMessagePresenter, combineActivityMessages } from '@hcengineering/activity-resources'
   import activity, { ActivityMessage, DisplayActivityMessage } from '@hcengineering/activity'
-  import { location, Action, getLocation, navigate, Component } from '@hcengineering/ui'
+  import { location, Action, Component } from '@hcengineering/ui'
   import { getActions } from '@hcengineering/view-resources'
   import { getResource } from '@hcengineering/platform'
-  import chunter from '@hcengineering/chunter'
 
   import { InboxNotificationsClientImpl } from '../../inboxNotificationsClient'
+  import { openInboxDoc } from '../../utils'
 
   export let value: DisplayActivityInboxNotification
   export let embedded = false
@@ -36,6 +36,7 @@
   export let showNotify = true
   export let withActions = true
   export let viewlets: ActivityNotificationViewlet[] = []
+  export let withFlatActions = false
   export let onClick: (() => void) | undefined = undefined
 
   const client = getClient()
@@ -43,7 +44,6 @@
   const inboxClient = InboxNotificationsClientImpl.getClient()
   const notificationsStore = inboxClient.inboxNotifications
 
-  let messages: ActivityMessage[] = []
   let viewlet: ActivityNotificationViewlet | undefined = undefined
   let selectedMessageId: Ref<ActivityMessage> | undefined = undefined
   let displayMessage: DisplayActivityMessage | undefined = undefined
@@ -62,7 +62,9 @@
     activity.class.ActivityMessage,
     { _id: { $in: messageIds } },
     (res) => {
-      messages = res
+      combineActivityMessages(res).then((m) => {
+        displayMessage = m[0]
+      })
     },
     {
       sort: {
@@ -71,8 +73,6 @@
     }
   )
 
-  $: displayMessage = messages.length > 1 ? combineActivityMessages(messages)[0] : messages[0]
-
   $: getAllActions(value).then((res) => {
     actions = res
   })
@@ -100,10 +100,8 @@
     if (message === undefined) {
       return
     }
-    const loc = getLocation()
-    loc.fragment = value.docNotifyContext
-    loc.query = { thread: message._id }
-    navigate(loc)
+
+    openInboxDoc(value.docNotifyContext, message._id, message._id)
   }
 
   async function getAllActions (value: ActivityInboxNotification): Promise<Action[]> {
@@ -134,7 +132,6 @@
         withActions,
         showNotify,
         actions,
-        excludedActions: [chunter.action.ReplyToThread],
         onClick
       }}
     />
@@ -143,14 +140,13 @@
       value={displayMessage}
       showNotify={showNotify ? !value.isViewed && !embedded : false}
       isSelected={displayMessage._id === selectedMessageId}
-      excludedActions={[chunter.action.ReplyToThread]}
       showEmbedded
       {withActions}
       {embedded}
       {skipLabel}
       {actions}
       hoverable={false}
-      withFlatActions={false}
+      {withFlatActions}
       onReply={() => {
         handleReply(displayMessage)
       }}
diff --git a/plugins/notification-resources/src/components/inbox/CommonInboxNotificationPresenter.svelte b/plugins/notification-resources/src/components/inbox/CommonInboxNotificationPresenter.svelte
index 5595d224d8..958127fd8f 100644
--- a/plugins/notification-resources/src/components/inbox/CommonInboxNotificationPresenter.svelte
+++ b/plugins/notification-resources/src/components/inbox/CommonInboxNotificationPresenter.svelte
@@ -153,7 +153,7 @@
   .root {
     position: relative;
     display: flex;
-    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
+    padding: 0.75rem 0.75rem 0.75rem 1rem;
     border-radius: 0.5rem;
     gap: 1rem;
     overflow: hidden;
diff --git a/plugins/notification-resources/src/components/inbox/Inbox.svelte b/plugins/notification-resources/src/components/inbox/Inbox.svelte
index 04fd36c755..cf3d60f15e 100644
--- a/plugins/notification-resources/src/components/inbox/Inbox.svelte
+++ b/plugins/notification-resources/src/components/inbox/Inbox.svelte
@@ -24,25 +24,24 @@
     AnyComponent,
     Component,
     defineSeparators,
-    getLocation,
     Label,
     Loading,
     location as locationStore,
-    navigate,
     Scroller,
     Separator,
     TabItem,
     TabList,
     Location
   } from '@hcengineering/ui'
-  import chunter from '@hcengineering/chunter'
+  import chunter, { ThreadMessage } from '@hcengineering/chunter'
   import { Ref, WithLookup } from '@hcengineering/core'
   import { ViewletSelector } from '@hcengineering/view-resources'
-  import activity from '@hcengineering/activity'
+  import activity, { ActivityMessage } from '@hcengineering/activity'
+  import { isReactionMessage } from '@hcengineering/activity-resources'
 
   import { InboxNotificationsClientImpl } from '../../inboxNotificationsClient'
   import Filter from '../Filter.svelte'
-  import { getDisplayInboxNotifications, resolveLocation } from '../../utils'
+  import { getDisplayInboxNotifications, openInboxDoc, resolveLocation } from '../../utils'
   import { InboxNotificationsFilter } from '../../types'
 
   export let visibleNav: boolean = true
@@ -104,7 +103,7 @@
   async function syncLocation (newLocation: Location) {
     const loc = await resolveLocation(newLocation)
 
-    selectedContextId = loc?.loc.fragment as Ref<DocNotifyContext> | undefined
+    selectedContextId = loc?.loc.path[3] as Ref<DocNotifyContext> | undefined
 
     if (selectedContextId !== selectedContext?._id) {
       selectedContext = undefined
@@ -155,17 +154,31 @@
     selectedContext = event?.detail?.context
     selectedContextId = selectedContext?._id
 
-    const loc = getLocation()
-
-    if (selectedContext !== undefined) {
-      loc.fragment = selectedContext._id
-      loc.query = { message: event?.detail?.notification?.attachedTo ?? null }
-    } else {
-      loc.fragment = undefined
-      loc.query = undefined
+    if (selectedContext === undefined) {
+      openInboxDoc()
+      return
     }
 
-    navigate(loc)
+    if (hierarchy.isDerived(selectedContext.attachedToClass, activity.class.ActivityMessage)) {
+      const message = event?.detail?.notification?.$lookup?.attachedTo
+
+      if (selectedContext.attachedToClass === chunter.class.ThreadMessage) {
+        const thread = await client.findOne(chunter.class.ThreadMessage, {
+          _id: selectedContext.attachedTo as Ref<ThreadMessage>
+        })
+        openInboxDoc(selectedContext._id, thread?.attachedTo, thread?._id)
+      } else if (isReactionMessage(message)) {
+        openInboxDoc(selectedContext._id, undefined, selectedContext.attachedTo as Ref<ActivityMessage>)
+      } else {
+        openInboxDoc(
+          selectedContext._id,
+          selectedContext.attachedTo as Ref<ActivityMessage>,
+          event?.detail?.notification?.attachedTo
+        )
+      }
+    } else {
+      openInboxDoc(selectedContext._id, undefined, event?.detail?.notification?.attachedTo)
+    }
   }
 
   async function updateSelectedPanel (selectedContext?: DocNotifyContext) {
@@ -230,7 +243,13 @@
           <div class="ac-header__wrap-title mr-3">
             <span class="ac-header__title"><Label label={notification.string.Inbox} /></span>
           </div>
-          <ViewletSelector bind:viewlet bind:loading viewletQuery={{ attachTo: notification.class.DocNotifyContext }} />
+          <div class="flex-grow">
+            <ViewletSelector
+              bind:viewlet
+              bind:loading
+              viewletQuery={{ attachTo: notification.class.DocNotifyContext }}
+            />
+          </div>
           <div class="flex flex-gap-2">
             <Filter bind:filter />
           </div>
@@ -243,18 +262,16 @@
         {#if loading || !viewlet?.$lookup?.descriptor}
           <Loading />
         {:else if viewlet}
-          <Scroller>
-            <div class="notifications">
-              <Component
-                is={viewlet.$lookup.descriptor.component}
-                props={{
-                  notifications: filteredNotifications,
-                  viewlets,
-                  selectedContext
-                }}
-                on:click={selectContext}
-              />
-            </div>
+          <Scroller padding="1rem 0">
+            <Component
+              is={viewlet.$lookup.descriptor.component}
+              props={{
+                notifications: filteredNotifications,
+                viewlets,
+                selectedContext
+              }}
+              on:click={selectContext}
+            />
           </Scroller>
         {/if}
       </div>
@@ -283,13 +300,8 @@
   .tabs {
     display: flex;
     margin: 0.5rem;
+    margin-bottom: 0;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--theme-navpanel-border);
   }
-
-  .notifications {
-    margin: 0.5rem;
-    padding: 0.5rem;
-    height: 100%;
-  }
 </style>
diff --git a/plugins/notification-resources/src/components/inbox/InboxFlatListView.svelte b/plugins/notification-resources/src/components/inbox/InboxFlatListView.svelte
index ac8312f25f..fe07126049 100644
--- a/plugins/notification-resources/src/components/inbox/InboxFlatListView.svelte
+++ b/plugins/notification-resources/src/components/inbox/InboxFlatListView.svelte
@@ -79,10 +79,10 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="root" bind:this={element} tabindex="0" on:keydown={onKeydown}>
-  <ListView bind:this={list} bind:selection={listSelection} count={notifications.length}>
+  <ListView bind:this={list} bind:selection={listSelection} count={notifications.length} noScroll colorsSchema="lumia">
     <svelte:fragment slot="item" let:item={itemIndex}>
       {@const notification = notifications[itemIndex]}
-      <div class="notification gap-2 ml-2">
+      <div class="notification gap-2">
         <!--        <div class="mt-6">-->
         <!--          <CheckBox-->
         <!--            circle-->
@@ -95,6 +95,7 @@
         <InboxNotificationPresenter
           value={notification}
           {viewlets}
+          withFlatActions
           onClick={() => {
             dispatch('click', {
               context: $notifyContextsStore.find(({ _id }) => _id === notification.docNotifyContext),
diff --git a/plugins/notification-resources/src/components/inbox/InboxGroupedListView.svelte b/plugins/notification-resources/src/components/inbox/InboxGroupedListView.svelte
index 545636bbbb..7dffdab3b8 100644
--- a/plugins/notification-resources/src/components/inbox/InboxGroupedListView.svelte
+++ b/plugins/notification-resources/src/components/inbox/InboxGroupedListView.svelte
@@ -96,7 +96,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="root" bind:this={element} tabindex="0" on:keydown={onKeydown}>
-  <ListView bind:this={list} bind:selection={listSelection} count={displayData.length}>
+  <ListView bind:this={list} bind:selection={listSelection} count={displayData.length} noScroll colorsSchema="lumia">
     <svelte:fragment slot="item" let:item={itemIndex}>
       {@const contextId = displayData[itemIndex][0]}
       {@const contextNotifications = displayData[itemIndex][1]}
diff --git a/plugins/notification-resources/src/components/inbox/InboxNotificationPresenter.svelte b/plugins/notification-resources/src/components/inbox/InboxNotificationPresenter.svelte
index be641c4b1d..af0b2879ab 100644
--- a/plugins/notification-resources/src/components/inbox/InboxNotificationPresenter.svelte
+++ b/plugins/notification-resources/src/components/inbox/InboxNotificationPresenter.svelte
@@ -25,6 +25,7 @@
   export let showNotify = true
   export let withActions = true
   export let viewlets: ActivityNotificationViewlet[] = []
+  export let withFlatActions = false
   export let onClick: (() => void) | undefined = undefined
   export let onCheck: ((isChecked: boolean) => void) | undefined = undefined
 
@@ -37,6 +38,6 @@
 {#if objectPresenter}
   <Component
     is={objectPresenter.presenter}
-    props={{ value, embedded, skipLabel, viewlets, showNotify, withActions, onClick, onCheck }}
+    props={{ value, embedded, skipLabel, viewlets, showNotify, withActions, withFlatActions, onClick, onCheck }}
   />
 {/if}
diff --git a/plugins/notification-resources/src/inboxNotificationsClient.ts b/plugins/notification-resources/src/inboxNotificationsClient.ts
index efe9256079..84ad1caa79 100644
--- a/plugins/notification-resources/src/inboxNotificationsClient.ts
+++ b/plugins/notification-resources/src/inboxNotificationsClient.ts
@@ -201,9 +201,9 @@ export class InboxNotificationsClientImpl implements InboxNotificationsClient {
   async readMessages (ids: Array<Ref<ActivityMessage>>): Promise<void> {
     const client = getClient()
 
-    const notificationsToRead = get(this.inboxNotifications)
-      .filter((n): n is ActivityInboxNotification => n._class === notification.class.ActivityInboxNotification)
-      .filter(({ attachedTo, isViewed }) => ids.includes(attachedTo) && !isViewed)
+    const notificationsToRead = get(this.activityInboxNotifications).filter(
+      ({ attachedTo, isViewed }) => ids.includes(attachedTo) && !isViewed
+    )
 
     await Promise.all(
       notificationsToRead.map(async (notification) => await client.update(notification, { isViewed: true }))
diff --git a/plugins/notification-resources/src/index.ts b/plugins/notification-resources/src/index.ts
index 892c7330eb..e6eec197c7 100644
--- a/plugins/notification-resources/src/index.ts
+++ b/plugins/notification-resources/src/index.ts
@@ -58,6 +58,7 @@ export * from './utils'
 export * from './inboxNotificationsClient'
 
 export { default as BrowserNotificatator } from './components/BrowserNotificatator.svelte'
+export { default as NotifyMarker } from './components/NotifyMarker.svelte'
 
 export default async (): Promise<Resources> => ({
   component: {
diff --git a/plugins/notification-resources/src/utils.ts b/plugins/notification-resources/src/utils.ts
index d6828c88c8..b97eb7e8bf 100644
--- a/plugins/notification-resources/src/utils.ts
+++ b/plugins/notification-resources/src/utils.ts
@@ -34,7 +34,7 @@ import notification, {
   type InboxNotification
 } from '@hcengineering/notification'
 import { getClient } from '@hcengineering/presentation'
-import { type Location, type ResolvedLocation } from '@hcengineering/ui'
+import { getLocation, navigate, type Location, type ResolvedLocation } from '@hcengineering/ui'
 import activity, {
   type ActivityMessage,
   type DisplayDocUpdateMessage,
@@ -44,17 +44,10 @@ import { activityMessagesComparator, combineActivityMessages } from '@hcengineer
 
 import { type InboxNotificationsFilter } from './types'
 import { InboxNotificationsClientImpl } from './inboxNotificationsClient'
-import { checkIsObjectRemoved } from '@hcengineering/view-resources'
 
 /**
  * @public
  */
-export async function hasMarkAsUnreadAction (doc: DisplayInboxNotification): Promise<boolean> {
-  const canRead = await hasMarkAsReadAction(doc)
-
-  return !canRead
-}
-
 export async function hasMarkAsReadAction (doc: DisplayInboxNotification): Promise<boolean> {
   const inboxNotificationsClient = InboxNotificationsClientImpl.getClient()
 
@@ -68,18 +61,88 @@ export async function hasMarkAsReadAction (doc: DisplayInboxNotification): Promi
   )
 }
 
+/**
+ * @public
+ */
+export async function hasMarkAsUnreadAction (doc: DisplayInboxNotification): Promise<boolean> {
+  const canRead = await hasMarkAsReadAction(doc)
+
+  return !canRead
+}
+
 /**
  * @public
  */
 export async function markAsReadInboxNotification (doc: DisplayInboxNotification): Promise<void> {
-  const inboxNotificationsClient = InboxNotificationsClientImpl.getClient()
+  const notificationsClient = InboxNotificationsClientImpl.getClient()
+  const isActivityNotification = doc._class === notification.class.ActivityInboxNotification
 
-  const ids =
-    doc._class === notification.class.ActivityInboxNotification
-      ? (doc as DisplayActivityInboxNotification).combinedIds
-      : [doc._id]
+  const ids = isActivityNotification ? (doc as DisplayActivityInboxNotification).combinedIds : [doc._id]
 
-  await inboxNotificationsClient.readNotifications(ids)
+  if (isActivityNotification) {
+    await updateLastViewedTimestampOnRead(doc as WithLookup<ActivityInboxNotification>, ids)
+  }
+
+  await notificationsClient.readNotifications(ids)
+}
+
+async function updateLastViewedTimestampOnRead (
+  doc: WithLookup<ActivityInboxNotification>,
+  viewedIds: Array<Ref<InboxNotification>>
+): Promise<void> {
+  const notificationsClient = InboxNotificationsClientImpl.getClient()
+  const client = getClient()
+
+  const context = get(notificationsClient.docNotifyContexts).find(({ _id }) => _id === doc.docNotifyContext)
+
+  if (context === undefined) {
+    return
+  }
+
+  const unViewed = get(notificationsClient.activityInboxNotifications).filter(
+    ({ _id, isViewed, docNotifyContext }) => context._id === docNotifyContext && !isViewed && !viewedIds.includes(_id)
+  )
+
+  let lastViewedTimestamp = context?.lastViewedTimestamp
+
+  if (unViewed.length === 0) {
+    lastViewedTimestamp = doc?.$lookup?.attachedTo?.createdOn ?? context.lastViewedTimestamp
+  } else {
+    const firstUnViewed = unViewed[unViewed.length - 1]
+
+    const hasNotificationsBefore = (firstUnViewed.createdOn ?? 0) < (doc.createdOn ?? 0)
+
+    if (!hasNotificationsBefore) {
+      lastViewedTimestamp = doc?.$lookup?.attachedTo?.createdOn ?? context.lastViewedTimestamp
+    }
+  }
+
+  if (lastViewedTimestamp !== undefined && lastViewedTimestamp > (context.lastViewedTimestamp ?? 0)) {
+    await client.update(context, { lastViewedTimestamp })
+  }
+}
+
+async function updateLastViewedOnUnread (doc: WithLookup<ActivityInboxNotification>): Promise<void> {
+  const notificationsClient = InboxNotificationsClientImpl.getClient()
+  const client = getClient()
+
+  const context = get(notificationsClient.docNotifyContexts).find(({ _id }) => _id === doc.docNotifyContext)
+
+  if (context === undefined) {
+    return
+  }
+
+  const messageTimestamp = doc?.$lookup?.attachedTo?.createdOn
+
+  if (messageTimestamp === undefined || messageTimestamp === 0) {
+    return
+  }
+
+  const lastViewedTimestamp = messageTimestamp - 1
+
+  if (lastViewedTimestamp < (context.lastViewedTimestamp ?? 0)) {
+    await client.update(context, { lastViewedTimestamp })
+  }
 }
 
 /**
@@ -87,22 +150,26 @@ export async function markAsReadInboxNotification (doc: DisplayInboxNotification
  */
 export async function markAsUnreadInboxNotification (doc: DisplayInboxNotification): Promise<void> {
   const inboxNotificationsClient = InboxNotificationsClientImpl.getClient()
+  const isActivityNotification = doc._class === notification.class.ActivityInboxNotification
 
-  const ids =
-    doc._class === notification.class.ActivityInboxNotification
-      ? (doc as DisplayActivityInboxNotification).combinedIds
-      : [doc._id]
+  const ids = isActivityNotification ? (doc as DisplayActivityInboxNotification).combinedIds : [doc._id]
+
+  if (isActivityNotification) {
+    await updateLastViewedOnUnread(doc as WithLookup<ActivityInboxNotification>)
+  }
 
   await inboxNotificationsClient.unreadNotifications(ids)
 }
 
 export async function deleteInboxNotification (doc: DisplayInboxNotification): Promise<void> {
   const inboxNotificationsClient = InboxNotificationsClientImpl.getClient()
+  const isActivityNotification = doc._class === notification.class.ActivityInboxNotification
 
-  const ids =
-    doc._class === notification.class.ActivityInboxNotification
-      ? (doc as DisplayActivityInboxNotification).combinedIds
-      : [doc._id]
+  const ids = isActivityNotification ? (doc as DisplayActivityInboxNotification).combinedIds : [doc._id]
+
+  if (isActivityNotification) {
+    await updateLastViewedTimestampOnRead(doc as WithLookup<ActivityInboxNotification>, ids)
+  }
 
   await inboxNotificationsClient.deleteNotifications(ids)
 }
@@ -160,13 +227,8 @@ export async function canReadNotifyContext (doc: DocNotifyContext): Promise<bool
  * @public
  */
 export async function canUnReadNotifyContext (doc: DocNotifyContext): Promise<boolean> {
-  const inboxNotificationsClient = InboxNotificationsClientImpl.getClient()
-
-  return (
-    get(inboxNotificationsClient.inboxNotificationsByContext)
-      .get(doc._id)
-      ?.every(({ isViewed }) => isViewed) ?? false
-  )
+  const canReadContext = await canReadNotifyContext(doc)
+  return !canReadContext
 }
 
 /**
@@ -185,14 +247,27 @@ export async function readNotifyContext (doc: DocNotifyContext): Promise<void> {
  * @public
  */
 export async function unReadNotifyContext (doc: DocNotifyContext): Promise<void> {
+  const client = getClient()
   const inboxClient = InboxNotificationsClientImpl.getClient()
   const inboxNotifications = get(inboxClient.inboxNotificationsByContext).get(doc._id) ?? []
+  const notificationToUnread = inboxNotifications[0]
 
-  if (inboxNotifications.length === 0) {
+  if (notificationToUnread === undefined) {
     return
   }
 
-  await inboxClient.unreadNotifications([inboxNotifications[0]._id])
+  await inboxClient.unreadNotifications([notificationToUnread._id])
+
+  if (notificationToUnread._class === notification.class.ActivityInboxNotification) {
+    const activityNotification = notificationToUnread as WithLookup<ActivityInboxNotification>
+    const createdOn = activityNotification?.$lookup?.attachedTo?.createdOn
+
+    if (createdOn === undefined || createdOn === 0) {
+      return
+    }
+
+    await client.diffUpdate(doc, { lastViewedTimestamp: createdOn - 1 })
+  }
 }
 
 /**
@@ -290,78 +365,11 @@ export async function unpinDocNotifyContext (object: DocNotifyContext): Promise<
   })
 }
 
-export async function resolveLocation (loc: Location): Promise<ResolvedLocation | undefined> {
-  if (loc.path[2] !== inboxId) {
-    return undefined
-  }
-
-  const contextId = loc.fragment as Ref<DocNotifyContext> | undefined
-
-  if (contextId === undefined) {
-    return {
-      loc: {
-        path: [loc.path[0], loc.path[1], inboxId],
-        fragment: undefined
-      },
-      defaultLocation: {
-        path: [loc.path[0], loc.path[1], inboxId],
-        fragment: undefined
-      }
-    }
-  }
-
-  return await generateLocation(loc, contextId)
-}
-
-async function generateLocation (
-  loc: Location,
-  contextId: Ref<DocNotifyContext>
-): Promise<ResolvedLocation | undefined> {
-  const client = getClient()
-
-  const appComponent = loc.path[0] ?? ''
-  const workspace = loc.path[1] ?? ''
-  const messageId = loc.query?.message as Ref<ActivityMessage> | undefined
-
-  const contextNotification = await client.findOne(notification.class.InboxNotification, {
-    docNotifyContext: contextId
-  })
-
-  if (contextNotification === undefined) {
-    return {
-      loc: {
-        path: [loc.path[0], loc.path[1], inboxId],
-        fragment: undefined
-      },
-      defaultLocation: {
-        path: [loc.path[0], loc.path[1], inboxId],
-        fragment: undefined
-      }
-    }
-  }
-
-  const message =
-    messageId !== undefined ? await client.findOne(activity.class.ActivityMessage, { _id: messageId }) : undefined
-
-  return {
-    loc: {
-      path: [appComponent, workspace, inboxId],
-      fragment: contextId,
-      query: { ...loc.query, message: message !== undefined ? (messageId as string) : null }
-    },
-    defaultLocation: {
-      path: [appComponent, workspace, inboxId],
-      query: { ...loc.query, message: message !== undefined ? (messageId as string) : null }
-    }
-  }
-}
-
 export async function getDisplayInboxNotifications (
   notificationsByContext: Map<Ref<DocNotifyContext>, InboxNotification[]>,
   filter: InboxNotificationsFilter = 'all',
   objectClass?: Ref<Class<Doc>>
 ): Promise<DisplayInboxNotification[]> {
-  const client = getClient()
   const filteredNotifications = Array.from(notificationsByContext.values())
     .flat()
     .filter(({ isViewed }) => {
@@ -377,10 +385,6 @@ export async function getDisplayInboxNotifications (
       }
     })
 
-  const viewletsHideIfRemoved = client
-    .getModel()
-    .findAllSync(activity.class.DocUpdateMessageViewlet, { hideIfRemoved: true })
-
   const activityNotifications = filteredNotifications.filter(
     (n): n is WithLookup<ActivityInboxNotification> => n._class === notification.class.ActivityInboxNotification
   )
@@ -404,30 +408,10 @@ export async function getDisplayInboxNotifications (
       return (message as DocUpdateMessage).objectClass === objectClass
     })
 
-  for (const [index, message] of messages.entries()) {
-    if (message._class !== activity.class.DocUpdateMessage) {
-      continue
-    }
-
-    const docUpdateMessage = message as DocUpdateMessage
-
-    const hideIfRemoved = viewletsHideIfRemoved.some(
-      (viewlet) => viewlet.action === docUpdateMessage.action && viewlet.objectClass === docUpdateMessage.objectClass
-    )
-
-    if (!hideIfRemoved) {
-      continue
-    }
-
-    const isRemoved = await checkIsObjectRemoved(client, docUpdateMessage.objectId, docUpdateMessage.objectClass)
-
-    if (isRemoved) {
-      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete messages[index]
-    }
-  }
-
-  const combinedMessages = combineActivityMessages(messages.sort(activityMessagesComparator), SortingOrder.Descending)
+  const combinedMessages = await combineActivityMessages(
+    messages.sort(activityMessagesComparator),
+    SortingOrder.Descending
+  )
 
   for (const message of combinedMessages) {
     if (message._class === activity.class.DocUpdateMessage) {
@@ -456,12 +440,10 @@ export async function getDisplayInboxNotifications (
     }
   }
 
-  displayNotifications.sort(
+  return displayNotifications.sort(
     (notification1, notification2) =>
       (notification2.createdOn ?? notification2.modifiedOn) - (notification1.createdOn ?? notification1.modifiedOn)
   )
-
-  return displayNotifications
 }
 
 export async function hasInboxNotifications (
@@ -471,3 +453,133 @@ export async function hasInboxNotifications (
 
   return displayNotifications.some(({ isViewed }) => !isViewed)
 }
+
+export async function getNotificationsCount (
+  context: DocNotifyContext | undefined,
+  notifications: InboxNotification[] = []
+): Promise<number> {
+  if (context === undefined || notifications.length === 0) {
+    return 0
+  }
+
+  const displayNotifications = await getDisplayInboxNotifications(new Map([[context._id, notifications]]))
+
+  return displayNotifications.filter(({ isViewed }) => !isViewed).length
+}
+
+export async function resolveLocation (loc: Location): Promise<ResolvedLocation | undefined> {
+  if (loc.path[2] !== inboxId) {
+    return undefined
+  }
+
+  const contextId = loc.path[3] as Ref<DocNotifyContext> | undefined
+
+  if (contextId === undefined) {
+    return {
+      loc: {
+        path: [loc.path[0], loc.path[1], inboxId],
+        fragment: undefined
+      },
+      defaultLocation: {
+        path: [loc.path[0], loc.path[1], inboxId],
+        fragment: undefined
+      }
+    }
+  }
+
+  return await generateLocation(loc, contextId)
+}
+
+async function generateLocation (
+  loc: Location,
+  contextId: Ref<DocNotifyContext>
+): Promise<ResolvedLocation | undefined> {
+  const client = getClient()
+
+  const appComponent = loc.path[0] ?? ''
+  const workspace = loc.path[1] ?? ''
+  const threadId = loc.path[4] as Ref<ActivityMessage> | undefined
+  const messageId = loc.query?.message as Ref<ActivityMessage> | undefined
+
+  const contextNotification = await client.findOne(notification.class.InboxNotification, {
+    docNotifyContext: contextId
+  })
+
+  if (contextNotification === undefined) {
+    return {
+      loc: {
+        path: [loc.path[0], loc.path[1], inboxId],
+        fragment: undefined
+      },
+      defaultLocation: {
+        path: [loc.path[0], loc.path[1], inboxId],
+        fragment: undefined
+      }
+    }
+  }
+
+  const thread =
+    threadId !== undefined ? await client.findOne(activity.class.ActivityMessage, { _id: messageId }) : undefined
+  const message =
+    messageId !== undefined ? await client.findOne(activity.class.ActivityMessage, { _id: messageId }) : undefined
+
+  if (thread === undefined) {
+    return {
+      loc: {
+        path: [appComponent, workspace, inboxId, contextId],
+        fragment: undefined,
+        query: { ...loc.query, message: message !== undefined ? (messageId as string) : null }
+      },
+      defaultLocation: {
+        path: [appComponent, workspace, inboxId, contextId],
+        fragment: undefined,
+        query: { ...loc.query, message: message !== undefined ? (messageId as string) : null }
+      }
+    }
+  }
+
+  return {
+    loc: {
+      path: [appComponent, workspace, inboxId, contextId, threadId as string],
+      fragment: undefined,
+      query: { ...loc.query, message: message !== undefined ? (messageId as string) : null }
+    },
+    defaultLocation: {
+      path: [appComponent, workspace, inboxId, contextId, threadId as string],
+      fragment: undefined,
+      query: { ...loc.query, message: message !== undefined ? (messageId as string) : null }
+    }
+  }
+}
+
+export function openInboxDoc (
+  contextId?: Ref<DocNotifyContext>,
+  thread?: Ref<ActivityMessage>,
+  message?: Ref<ActivityMessage>
+): void {
+  const loc = getLocation()
+
+  if (loc.path[2] !== inboxId) {
+    return
+  }
+
+  if (contextId === undefined) {
+    loc.query = { ...loc.query, message: null }
+    loc.path.length = 3
+    navigate(loc)
+    return
+  }
+
+  loc.path[3] = contextId
+
+  if (thread !== undefined) {
+    loc.path[4] = thread
+  } else {
+    loc.path[4] = ''
+    loc.path.length = 4
+  }
+
+  loc.query = { ...loc.query, message: message ?? null }
+
+  navigate(loc)
+}
diff --git a/plugins/view-resources/src/utils.ts b/plugins/view-resources/src/utils.ts
index df23335c5b..dfa7f9ecba 100644
--- a/plugins/view-resources/src/utils.ts
+++ b/plugins/view-resources/src/utils.ts
@@ -217,6 +217,30 @@ export async function getAttributePresenter (
   }
 }
 
+export function hasAttributePresenter (
+  client: Client,
+  _class: Ref<Class<Obj>>,
+  key: string,
+  mixinClass?: Ref<Mixin<CollectionPresenter>>
+): boolean {
+  const actualMixinClass = mixinClass ?? view.mixin.AttributePresenter
+
+  const hierarchy = client.getHierarchy()
+  const attribute = hierarchy.getAttribute(_class, key)
+
+  const presenterClass = getAttributePresenterClass(hierarchy, attribute)
+  const isCollectionAttr = presenterClass.category === 'collection'
+  const mixin = isCollectionAttr ? view.mixin.CollectionPresenter : actualMixinClass
+
+  let presenterMixin = hierarchy.classHierarchyMixin(presenterClass.attrClass, mixin)
+
+  if (presenterMixin?.presenter === undefined && mixinClass != null && mixin === mixinClass) {
+    presenterMixin = hierarchy.classHierarchyMixin(presenterClass.attrClass, view.mixin.AttributePresenter)
+  }
+
+  return presenterMixin?.presenter !== undefined || (attribute.type as TypeAny)?.presenter !== undefined
+}
+
 export async function getPresenter<T extends Doc> (
   client: Client,
   _class: Ref<Class<T>>,
@@ -552,6 +576,12 @@ export function makeViewletKey (loc?: Location): string {
   loc = loc != null ? { path: loc.path } : getCurrentResolvedLocation()
   loc.fragment = undefined
   loc.query = undefined
+
+  // TODO: make better fix. Just temporary fix for correct inbox viewlets.
+  if (loc.path[2] === 'inbox') {
+    loc.path = loc.path.slice(0, 3)
+  }
+
   return 'viewlet' + locationToUrl(loc)
 }
 
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 101f45fa3c..e7b72a1336 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -272,7 +272,7 @@
         loc.path[4] = (currentSpecial as string) ?? resolved.defaultLocation.path[4]
       } else {
         loc.path[3] = resolvedSpace
-        loc.path[4] = resolvedSpecial ?? currentSpecial ?? (asideId as string) ?? resolved.defaultLocation.path[4]
+        loc.path[4] = resolvedSpecial ?? currentSpecial ?? resolved.defaultLocation.path[4]
       }
     }
     for (let index = 0; index < loc.path.length; index++) {
@@ -465,6 +465,7 @@
   function closeAside (): void {
     const loc = getLocation()
     loc.path.length = 4
+    asideId = undefined
     checkOnHide()
     navigate(loc)
   }
diff --git a/plugins/workbench/src/index.ts b/plugins/workbench/src/index.ts
index c825b3195c..168d65a87f 100644
--- a/plugins/workbench/src/index.ts
+++ b/plugins/workbench/src/index.ts
@@ -19,6 +19,7 @@ import { plugin } from '@hcengineering/platform'
 import type { Preference } from '@hcengineering/preference'
 import { AnyComponent, Location, ResolvedLocation } from '@hcengineering/ui'
 import { ViewAction } from '@hcengineering/view'
+import { DocNotifyContext, InboxNotification } from '@hcengineering/notification'
 
 /**
  * @public
@@ -104,6 +105,9 @@ export interface SpecialNavModel {
   // If defined, will be used to find spaces for visibleIf
   spaceClass?: Ref<Class<Space>>
   checkIsDisabled?: Resource<() => Promise<boolean>>
+  notificationsCountProvider?: Resource<
+  (inboxNotificationsByContext: Map<Ref<DocNotifyContext>, InboxNotification[]>) => number
+  >
 }
 
 /**
diff --git a/server-plugins/activity-resources/src/index.ts b/server-plugins/activity-resources/src/index.ts
index 2ad9172cb4..38b74086de 100644
--- a/server-plugins/activity-resources/src/index.ts
+++ b/server-plugins/activity-resources/src/index.ts
@@ -72,6 +72,8 @@ export async function createReactionNotifications (
   tx: TxCollectionCUD<ActivityMessage, Reaction>,
   control: TriggerControl
 ): Promise<Tx[]> {
+  const createTx = TxProcessor.extractTx(tx) as TxCreateDoc<Reaction>
+
   const parentMessage = (await control.findAll(activity.class.ActivityMessage, { _id: tx.objectId }))[0]
 
   if (parentMessage === undefined) {
@@ -86,21 +88,25 @@ export async function createReactionNotifications (
 
   let res: Tx[] = []
 
-  const messageTx = (
-    await pushDocUpdateMessages(
-      control.ctx,
-      control,
-      res as TxCollectionCUD<Doc, DocUpdateMessage>[],
-      parentMessage,
-      tx,
-      tx.modifiedBy
-    )
-  )[0]
+  const rawMessage: Data<DocUpdateMessage> = {
+    txId: tx._id,
+    attachedTo: parentMessage._id,
+    attachedToClass: parentMessage._class,
+    objectId: createTx.objectId,
+    objectClass: createTx.objectClass,
+    action: 'create',
+    collection: 'docUpdateMessages',
+    updateCollection: tx.collection
+  }
+
+  const messageTx = getDocUpdateMessageTx(control, tx, parentMessage, rawMessage, tx.modifiedBy)
 
   if (messageTx === undefined) {
     return []
   }
 
+  res.push(messageTx)
+
   const docUpdateMessage = TxProcessor.createDoc2Doc(messageTx.tx as TxCreateDoc<DocUpdateMessage>)
 
   res = res.concat(