From 6f292467d411a038b86c966d623138fdd2996896 Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Thu, 23 Oct 2025 22:05:01 +0700
Subject: [PATCH 1/2] Redesign feed view

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/CardPathPresenter.svelte   |  15 +-
 .../src/components/CardSection.svelte         |  44 ++++
 .../src/components/ColoredCardIcon.svelte     |   5 +-
 .../src/components/FeedCardPresenter.svelte   | 184 +++++++-------
 .../preview/ExtendedMessagePreview.svelte     |  81 +++++++
 .../components/preview/PreviewTemplate.svelte | 228 ++++++++++++++++++
 plugins/communication-resources/src/index.ts  |   2 +
 .../preview/NotificationPreview.svelte        |  55 +----
 .../components/preview/PreviewTemplate.svelte | 214 ++--------------
 9 files changed, 482 insertions(+), 346 deletions(-)
 create mode 100644 plugins/card-resources/src/components/CardSection.svelte
 create mode 100644 plugins/communication-resources/src/components/preview/ExtendedMessagePreview.svelte
 create mode 100644 plugins/communication-resources/src/components/preview/PreviewTemplate.svelte

diff --git a/plugins/card-resources/src/components/CardPathPresenter.svelte b/plugins/card-resources/src/components/CardPathPresenter.svelte
index e69556828bb..1b718dd65b9 100644
--- a/plugins/card-resources/src/components/CardPathPresenter.svelte
+++ b/plugins/card-resources/src/components/CardPathPresenter.svelte
@@ -36,16 +36,16 @@
       </span>
     </div>
   {/if}
-  {#if card.parent != null}
+  {#if card.parentInfo?.length > 0}
     {#if displaySpace && card.$lookup?.space !== undefined}
       <TagDivider />
     {/if}
-    {@const info = card.parentInfo?.find((it) => it._id === card.parent)}
+    {@const info = card.parent != null ? card.parentInfo?.find((it) => it._id === card.parent) : card.parentInfo?.[0]}
     {#if info}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
-        class="card-presenter"
+        class="card-presenter clickable"
         use:tooltip={{ label: getEmbeddedLabel(info.title), textAlign: 'left' }}
         on:click|stopPropagation|preventDefault={() => openCardInSidebar(info._id)}
       >
@@ -63,23 +63,18 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 0.5rem;
     min-width: 2rem;
     max-width: 25rem;
     min-height: 1.5rem;
     max-height: 1.5rem;
     font-size: 0.75rem;
     font-weight: 500;
-    border-radius: var(--extra-small-BorderRadius);
     white-space: nowrap;
     gap: 0.25rem;
-    background-color: var(--global-ui-BackgroundColor);
-    border: var(--global-subtle-ui-BorderColor);
     color: var(--global-secondary-TextColor);
-    cursor: pointer;
 
-    &:hover {
-      background: var(--global-ui-active-BackgroundColor);
+    &.clickable {
+      cursor: pointer;
     }
   }
 </style>
diff --git a/plugins/card-resources/src/components/CardSection.svelte b/plugins/card-resources/src/components/CardSection.svelte
new file mode 100644
index 00000000000..d9fb0e2ddfd
--- /dev/null
+++ b/plugins/card-resources/src/components/CardSection.svelte
@@ -0,0 +1,44 @@
+<!--
+// Copyright © 2025 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">
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="section" on:click|stopPropagation|preventDefault>
+  <div class="marker" />
+  <slot />
+</div>
+
+<style lang="scss">
+  .section {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0.5rem;
+    width: 100%;
+  }
+
+  .marker {
+    position: absolute;
+    width: 0.25rem;
+    height: 100%;
+    background: var(--global-ui-highlight-BackgroundColor);
+    border-radius: 0;
+  }
+</style>
diff --git a/plugins/card-resources/src/components/ColoredCardIcon.svelte b/plugins/card-resources/src/components/ColoredCardIcon.svelte
index a2f8cc3d83f..88def1302f0 100644
--- a/plugins/card-resources/src/components/ColoredCardIcon.svelte
+++ b/plugins/card-resources/src/components/ColoredCardIcon.svelte
@@ -35,10 +35,7 @@
 
   function getIconStyle (platformColor: any): string {
     return `
-      background: ${platformColor.color + '1a'};
-      border: 1px solid ${platformColor.color + '33'};
-      color: ${platformColor.color};
-      fill: ${platformColor.color};
+      box-shadow: 0 2px 3px 0 ${platformColor.color};
     `
   }
 </script>
diff --git a/plugins/card-resources/src/components/FeedCardPresenter.svelte b/plugins/card-resources/src/components/FeedCardPresenter.svelte
index 2a37688bc2c..26a7953dcd3 100644
--- a/plugins/card-resources/src/components/FeedCardPresenter.svelte
+++ b/plugins/card-resources/src/components/FeedCardPresenter.svelte
@@ -18,7 +18,7 @@
   import { createMessagesQuery } from '@hcengineering/presentation'
 
   import chat from '@hcengineering/chat'
-  import { MessagePresenter, labelsStore } from '@hcengineering/communication-resources'
+  import { ExtendedMessagePreview, labelsStore } from '@hcengineering/communication-resources'
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import { Button, IconDetailsFilled, IconMoreH, tooltip } from '@hcengineering/ui'
   import { DocNavLink, showMenu } from '@hcengineering/view-resources'
@@ -32,6 +32,7 @@
   import ColoredCardIcon from './ColoredCardIcon.svelte'
   import ContentPreview from './ContentPreview.svelte'
   import TagDivider from './TagDivider.svelte'
+  import CardSection from './CardSection.svelte'
 
   export let card: WithLookup<Card>
   export let isCompact = false
@@ -39,7 +40,6 @@
 
   const messagesQuery = createMessagesQuery()
 
-  let message: Message | undefined = undefined
   let messages: Message[] = []
 
   // Check if the card is a thread type
@@ -48,10 +48,12 @@
   // Only query messages if this is a thread card
   $: if (isThreadCard) {
     messagesQuery.query(
-      { cardId: card._id, limit: 3, order: SortingOrder.Ascending },
+      { cardId: card._id, limit: 3, order: SortingOrder.Descending },
       (res) => {
-        messages = res.getResult().reverse()
-        message = messages.findLast((msg) => msg.type === MessageType.Text)
+        messages = res
+          .getResult()
+          .filter((msg) => msg.type === MessageType.Text)
+          .reverse()
       },
       {
         attachments: true,
@@ -61,7 +63,6 @@
   } else {
     // Clear message data for non-thread cards
     messages = []
-    message = undefined
   }
 
   function hasNewMessages (labels: CardLabel[], cardId: CardID): boolean {
@@ -76,100 +77,97 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="card">
-  <div class="card__avatar">
-    <ColoredCardIcon {card} count={0} />
-  </div>
-
-  <div class="card__body">
-    <div class="card__header">
-      <div class="flex-presenter">
-        {#if hasNewMessages($labelsStore, card._id)}
-          <div class="flex pr-1">
-            <span class="notifyMarker" />
+  <div class="card__main">
+    <div class="card__avatar">
+      <ColoredCardIcon {card} count={0} />
+    </div>
+    <div class="card__body">
+      <div class="card__header">
+        <div class="flex-presenter">
+          {#if hasNewMessages($labelsStore, card._id)}
+            <div class="flex pr-1">
+              <span class="notifyMarker" />
+            </div>
+          {/if}
+          <span
+            class="card__title overflow-label"
+            use:tooltip={{ label: getEmbeddedLabel(truncatedTitle), textAlign: 'left' }}
+          >
+            <DocNavLink object={card}>
+              {truncatedTitle}
+            </DocNavLink>
+          </span>
+        </div>
+        <CardTimestamp date={card.modifiedOn} />
+        {#if !isComfortable2}
+          <div class="flex-presenter flex-gap-0-5 tags-container">
+            <div class="card__tags">
+              <CardTagsColored value={card} showType={false} collapsable fullWidth />
+            </div>
           </div>
         {/if}
-        <span
-          class="card__title overflow-label"
-          use:tooltip={{ label: getEmbeddedLabel(truncatedTitle), textAlign: 'left' }}
-        >
-          <DocNavLink object={card}>
-            {truncatedTitle}
-          </DocNavLink>
-        </span>
-      </div>
-      <CardTimestamp date={card.modifiedOn} />
-      {#if !isComfortable2}
-        <div class="flex-presenter flex-gap-0-5 tags-container">
-          <div class="card__tags">
-            <CardTagsColored value={card} showType={false} collapsable fullWidth />
-          </div>
-        </div>
-      {/if}
-      <div class="card__actions flex-row flex-row-center" class:opened={isActionsOpened}>
-        <Button
-          icon={IconDetailsFilled}
-          iconProps={{ size: 'medium' }}
-          kind="icon"
-          on:click={() => {
-            void openCardInSidebar(card._id, card)
-          }}
-        />
-        {#if !isCompact}
+        <div class="card__actions flex-row flex-row-center" class:opened={isActionsOpened}>
           <Button
-            icon={IconMoreH}
+            icon={IconDetailsFilled}
             iconProps={{ size: 'medium' }}
             kind="icon"
-            dataId="btnMoreActions"
-            on:click={(e) => {
-              isActionsOpened = true
-              showMenu(e, { object: card }, () => {
-                isActionsOpened = false
-              })
+            on:click={() => {
+              void openCardInSidebar(card._id, card)
             }}
           />
+          {#if !isCompact}
+            <Button
+              icon={IconMoreH}
+              iconProps={{ size: 'medium' }}
+              kind="icon"
+              dataId="btnMoreActions"
+              on:click={(e) => {
+                isActionsOpened = true
+                showMenu(e, { object: card }, () => {
+                  isActionsOpened = false
+                })
+              }}
+            />
+          {/if}
+        </div>
+      </div>
+      <div class="card__parent" class:wrap={isComfortable2}>
+        <CardPathPresenter {card} />
+        {#if isComfortable2}
+          <div class="flex-presenter flex-gap-0-5 tags-container">
+            <CardPathPresenter {card} />
+            <TagDivider />
+            <div class="card__tags mr-2">
+              <CardTagsColored value={card} showType={false} collapsable fullWidth />
+            </div>
+          </div>
         {/if}
       </div>
     </div>
-    <div class="card__message">
-      {#if isThreadCard && message}
-        <MessagePresenter
-          {card}
-          {message}
-          hideHeader
-          hideAvatar
-          readonly
-          padding="0"
-          showThreads={false}
-          maxHeight={'10rem'}
-        />
+  </div>
+  <div class="card__content-preview">
+    <CardSection>
+      {#if isThreadCard && messages.length > 0}
+        <div class="content-preview">
+          {#each messages as message}
+            <ExtendedMessagePreview {card} {message} socialId={message.creator} date={message.created} />
+          {/each}
+        </div>
       {:else if !isThreadCard && card.content}
-        <ContentPreview {card} maxHeight={'10rem'} />
-      {/if}
-    </div>
-    <div class="card__parent" class:wrap={isComfortable2}>
-      <CardPathPresenter {card} />
-      {#if isComfortable2}
-        <div class="flex-presenter flex-gap-0-5 tags-container">
-          <CardPathPresenter {card} />
-          <TagDivider />
-          <div class="card__tags mr-2">
-            <CardTagsColored value={card} showType={false} collapsable fullWidth />
-          </div>
+        <div class="content-preview extra-padding">
+          <ContentPreview {card} maxHeight={'10rem'} />
         </div>
       {/if}
-    </div>
+    </CardSection>
   </div>
 </div>
 
 <style lang="scss">
   .card {
     display: flex;
-    cursor: pointer;
+    flex-direction: column;
     border-radius: 0.5rem;
     padding: 0.375rem 1rem;
-
-    gap: 0.75rem;
-    min-height: 4.75rem;
     width: 100%;
     height: fit-content;
 
@@ -177,10 +175,15 @@
       background-color: var(--global-ui-hover-BackgroundColor);
     }
 
+    &__main {
+      display: flex;
+      flex-direction: row;
+      gap: 0.75rem;
+    }
+
     &__body {
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
       overflow: hidden;
       width: 100%;
     }
@@ -217,14 +220,10 @@
       margin-top: 0.625rem;
     }
 
-    &__message {
-      display: flex;
-      color: var(--global-secondary-TextColor);
-    }
-
     &__parent {
       display: flex;
       align-items: center;
+      margin-top: -0.125rem;
 
       &.wrap {
         flex-wrap: wrap;
@@ -250,5 +249,20 @@
       max-width: none;
       flex-grow: 1;
     }
+
+    &__content-preview {
+      display: flex;
+      color: var(--global-secondary-TextColor);
+      padding: 0.25rem 0 0 0.25rem;
+      width: 100%;
+
+      .content-preview {
+        width: 100%;
+        padding: 0.125rem;
+        &.extra-padding {
+          padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+        }
+      }
+    }
   }
 </style>
diff --git a/plugins/communication-resources/src/components/preview/ExtendedMessagePreview.svelte b/plugins/communication-resources/src/components/preview/ExtendedMessagePreview.svelte
new file mode 100644
index 00000000000..72f750bf2a3
--- /dev/null
+++ b/plugins/communication-resources/src/components/preview/ExtendedMessagePreview.svelte
@@ -0,0 +1,81 @@
+<!-- Copyright © 2025 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 { LiteMessageViewer } from '@hcengineering/presentation'
+  import { Card } from '@hcengineering/card'
+  import { type WithLookup } from '@hcengineering/core'
+  import { Message, MessageType, SocialID } from '@hcengineering/communication-types'
+  import { Person } from '@hcengineering/contact'
+  import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
+  import { markdownToMarkup } from '@hcengineering/text-markdown'
+  import { jsonToMarkup, markupToText } from '@hcengineering/text'
+
+  import ActivityMessageViewer from '../message/ActivityMessageViewer.svelte'
+  import AttachmentsPreview from '../AttachmentsPreview.svelte'
+  import { isActivityMessage } from '../../activity'
+
+  import PreviewTemplate from './PreviewTemplate.svelte'
+
+  export let card: Card
+  export let message: Message | undefined = undefined
+  export let socialId: SocialID
+  export let date: Date
+  export let color: 'primary' | 'secondary' = 'primary'
+  export let kind: 'default' | 'column' = 'default'
+  export let padding: string | undefined = undefined
+  export let hideHeader: boolean = false
+  export let hidePersonName: boolean = false
+
+  const tooltipLimit = 512
+
+  let person: WithLookup<Person> | undefined = undefined
+
+  function getTooltipLabel (message: Message | undefined): IntlString {
+    if (message == null) return getEmbeddedLabel('')
+    const text = markupToText(jsonToMarkup(markdownToMarkup(message.content)))
+    if (text.length > tooltipLimit) {
+      return getEmbeddedLabel(text.substring(0, tooltipLimit) + '...')
+    }
+    return getEmbeddedLabel(text)
+  }
+</script>
+
+<PreviewTemplate
+  {kind}
+  {color}
+  bind:person
+  {padding}
+  {socialId}
+  {date}
+  fixHeight={message == null || message.type !== MessageType.Activity}
+  tooltipLabel={getTooltipLabel(message)}
+  {hideHeader}
+  {hidePersonName}
+>
+  <svelte:fragment slot="content">
+    {#if message}
+      {#if isActivityMessage(message)}
+        <ActivityMessageViewer {message} {card} author={person} />
+      {:else}
+        <LiteMessageViewer message={markdownToMarkup(message.content)} />
+      {/if}
+    {/if}
+  </svelte:fragment>
+
+  <svelte:fragment slot="after">
+    {#if message}
+      <AttachmentsPreview {message} />
+    {/if}
+  </svelte:fragment>
+</PreviewTemplate>
diff --git a/plugins/communication-resources/src/components/preview/PreviewTemplate.svelte b/plugins/communication-resources/src/components/preview/PreviewTemplate.svelte
new file mode 100644
index 00000000000..28065265114
--- /dev/null
+++ b/plugins/communication-resources/src/components/preview/PreviewTemplate.svelte
@@ -0,0 +1,228 @@
+<!-- Copyright © 2025 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 { Person, formatName } from '@hcengineering/contact'
+  import { IntlString } from '@hcengineering/platform'
+  import { resizeObserver, TimeSince, tooltip } from '@hcengineering/ui'
+  import {
+    Avatar,
+    PersonPreviewProvider,
+    SystemAvatar,
+    employeeByPersonIdStore,
+    getPersonByPersonId
+  } from '@hcengineering/contact-resources'
+  import { SocialID } from '@hcengineering/communication-types'
+
+  export let tooltipLabel: IntlString | undefined = undefined
+  export let person: Person | undefined = undefined
+  export let socialId: SocialID
+  export let date: Date
+  export let color: 'primary' | 'secondary' = 'primary'
+  export let kind: 'default' | 'column' = 'default'
+  export let padding: string | undefined = undefined
+  export let fixHeight: boolean = false
+  export let showSeparator: boolean = true
+  export let hideHeader: boolean = false
+  export let hidePersonName: boolean = false
+
+  let clientWidth: number
+
+  $: showPersonName = clientWidth > 300 && !hidePersonName
+  $: updatePerson(socialId)
+  async function updatePerson (socialId: SocialID): Promise<void> {
+    person = $employeeByPersonIdStore.get(socialId) ?? (await getPersonByPersonId(socialId)) ?? undefined
+  }
+</script>
+
+{#if kind === 'column'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="message-preview-template clear-mins {color} {kind}"
+    style:padding
+    use:resizeObserver={(element) => (clientWidth = element.clientWidth)}
+  >
+    {#if !hideHeader}
+      <span class="message-preview-template__column-header">
+        {#if person}
+          <span class="overflow-label clear-mins">
+            <PersonPreviewProvider value={person} inline>
+              {formatName(person?.name ?? '')}
+            </PersonPreviewProvider>
+          </span>
+        {/if}
+      </span>
+    {/if}
+
+    <span class="message-preview-template__left">
+      {#if $$slots.content}
+        <span
+          class="message-preview-template__content overflow-label {color}"
+          class:fixHeight
+          use:tooltip={tooltipLabel ? { label: tooltipLabel, textAlign: 'left' } : undefined}
+        >
+          <slot name="content" />
+        </span>
+      {/if}
+      <slot name="after" />
+    </span>
+  </div>
+{:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="message-preview-template clear-mins {color}"
+    use:resizeObserver={(element) => (clientWidth = element.clientWidth)}
+  >
+    <span class="message-preview-template__left">
+      <PersonPreviewProvider value={person} inline>
+        <span class="message-preview-template__person" class:noGap={!showPersonName}>
+          <span class="message-preview-template__avatar">
+            {#if person}
+              <Avatar size="card" {person} name={person.name} />
+            {:else}
+              <SystemAvatar size="card" />
+            {/if}
+          </span>
+          {#if showPersonName && person}
+            <span class="message-preview-template__name overflow-label {color}">{formatName(person?.name ?? '')}</span>
+          {/if}
+          {#if showSeparator}
+            {#if showPersonName}
+              <span class="message-preview-template__separator"> • </span>
+            {/if}
+          {/if}
+        </span>
+      </PersonPreviewProvider>
+
+      {#if $$slots.content}
+        <span
+          class="message-preview-template__content overflow-label {color}"
+          class:fixHeight
+          use:tooltip={tooltipLabel ? { label: tooltipLabel, textAlign: 'left' } : undefined}
+        >
+          <slot name="content" />
+        </span>
+      {/if}
+      <slot name="after" />
+    </span>
+
+    <span class="message-preview-template__time clear-mins">
+      <TimeSince value={date.getTime()} />
+    </span>
+  </div>
+{/if}
+
+<style lang="scss">
+  .message-preview-template {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    min-height: 2rem;
+    color: var(--global-secondary-TextColor);
+    padding: 0.25rem var(--spacing-1_25) 0.25rem var(--spacing-1_25);
+    overflow: hidden;
+    font-size: 0.875rem;
+    gap: 0.25rem;
+
+    &.column {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    &__left {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      min-width: 2.75rem;
+      overflow: hidden;
+      max-width: 100%;
+      flex: 1;
+    }
+
+    &__person {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      color: var(--global-primary-TextColor);
+      font-size: 0.875rem;
+
+      &.noGap {
+        gap: 0;
+      }
+    }
+
+    &__avatar {
+      width: 1.325rem;
+      min-width: 1.325rem;
+      height: 1.325rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.25rem;
+    }
+
+    &__content {
+      display: inline;
+      color: var(--global-primary-TextColor);
+      max-width: 100%;
+
+      &.fixHeight {
+        max-height: 1.375rem;
+      }
+
+      &.secondary {
+        color: var(--global-secondary-TextColor);
+      }
+    }
+
+    &__separator {
+      font-size: 0.875rem;
+      min-width: 0.375rem;
+      flex: 0 0 auto;
+      color: var(--global-primary-TextColor);
+      margin: 0 0.25rem;
+    }
+
+    &__name {
+      font-weight: 500;
+      flex: 0 0 auto;
+
+      &.secondary {
+        color: var(--global-secondary-TextColor);
+      }
+    }
+
+    &__time {
+      display: flex;
+      align-items: center;
+      font-size: 0.75rem;
+      color: var(--global-tertiary-TextColor);
+      white-space: nowrap;
+      margin-left: auto;
+      max-width: 100%;
+      min-width: 0;
+      width: fit-content;
+    }
+
+    &__column-header {
+      display: flex;
+      align-items: center;
+      max-width: 100%;
+      gap: var(--spacing-0_5);
+      font-weight: 500;
+      color: var(--global-primary-TextColor);
+    }
+  }
+</style>
diff --git a/plugins/communication-resources/src/index.ts b/plugins/communication-resources/src/index.ts
index 05b0be49263..c7143873a72 100644
--- a/plugins/communication-resources/src/index.ts
+++ b/plugins/communication-resources/src/index.ts
@@ -51,6 +51,8 @@ export { default as MessageInput } from './components/message/MessageInput.svelt
 export { default as ActivityMessageViewer } from './components/message/ActivityMessageViewer.svelte'
 export { default as AttachmentsPreview } from './components/AttachmentsPreview.svelte'
 export { default as MessagePreview } from './components/MessagePreview.svelte'
+export { default as ExtendedMessagePreview } from './components/preview/ExtendedMessagePreview.svelte'
+export { default as PreviewTemplate } from './components/preview/PreviewTemplate.svelte'
 
 export default async (): Promise<Resources> => ({
   component: {
diff --git a/plugins/inbox-resources/src/components/preview/NotificationPreview.svelte b/plugins/inbox-resources/src/components/preview/NotificationPreview.svelte
index 3ad10f1fe15..1cc91acffec 100644
--- a/plugins/inbox-resources/src/components/preview/NotificationPreview.svelte
+++ b/plugins/inbox-resources/src/components/preview/NotificationPreview.svelte
@@ -12,18 +12,10 @@
 <!-- limitations under the License. -->
 
 <script lang="ts">
-  import { LiteMessageViewer } from '@hcengineering/presentation'
   import { Card } from '@hcengineering/card'
-  import { type WithLookup } from '@hcengineering/core'
-  import { Message, MessageType, SocialID } from '@hcengineering/communication-types'
-  import { Person } from '@hcengineering/contact'
-  import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
-  import { employeeByPersonIdStore, getPersonByPersonId } from '@hcengineering/contact-resources'
-  import { markdownToMarkup } from '@hcengineering/text-markdown'
-  import { jsonToMarkup, markupToText } from '@hcengineering/text'
-  import { ActivityMessageViewer, isActivityMessage, AttachmentsPreview } from '@hcengineering/communication-resources'
-
-  import PreviewTemplate from './PreviewTemplate.svelte'
+  import { Message, SocialID } from '@hcengineering/communication-types'
+  import { ExtendedMessagePreview } from '@hcengineering/communication-resources'
+  import { isViewSettingEnabled, hideUserNamesSettingId, viewSettingsStore } from '../../settings'
 
   export let card: Card
   export let message: Message | undefined = undefined
@@ -34,44 +26,7 @@
   export let padding: string | undefined = undefined
   export let hideHeader: boolean = false
 
-  const tooltipLimit = 512
-
-  let person: WithLookup<Person> | undefined = undefined
-
-  function getTooltipLabel (message: Message | undefined): IntlString {
-    if (message == null) return getEmbeddedLabel('')
-    const text = markupToText(jsonToMarkup(markdownToMarkup(message.content)))
-    if (text.length > tooltipLimit) {
-      return getEmbeddedLabel(text.substring(0, tooltipLimit) + '...')
-    }
-    return getEmbeddedLabel(text)
-  }
+  const hidePersonName = isViewSettingEnabled($viewSettingsStore, hideUserNamesSettingId)
 </script>
 
-<PreviewTemplate
-  {kind}
-  {color}
-  bind:person
-  {padding}
-  {socialId}
-  {date}
-  fixHeight={message == null || message.type !== MessageType.Activity}
-  tooltipLabel={getTooltipLabel(message)}
-  {hideHeader}
->
-  <svelte:fragment slot="content">
-    {#if message}
-      {#if isActivityMessage(message)}
-        <ActivityMessageViewer {message} {card} author={person} />
-      {:else}
-        <LiteMessageViewer message={markdownToMarkup(message.content)} />
-      {/if}
-    {/if}
-  </svelte:fragment>
-
-  <svelte:fragment slot="after">
-    {#if message}
-      <AttachmentsPreview {message} />
-    {/if}
-  </svelte:fragment>
-</PreviewTemplate>
+<ExtendedMessagePreview {card} {message} {socialId} {date} {color} {kind} {padding} {hideHeader} {hidePersonName} />
diff --git a/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte b/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte
index 98ddc6bf3ac..961e0aaf938 100644
--- a/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte
+++ b/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte
@@ -12,17 +12,11 @@
 <!-- limitations under the License. -->
 
 <script lang="ts">
-  import { Person, formatName } from '@hcengineering/contact'
+  import { Person } from '@hcengineering/contact'
   import { IntlString } from '@hcengineering/platform'
-  import { resizeObserver, TimeSince, tooltip } from '@hcengineering/ui'
-  import {
-    Avatar,
-    PersonPreviewProvider,
-    SystemAvatar,
-    employeeByPersonIdStore,
-    getPersonByPersonId
-  } from '@hcengineering/contact-resources'
+  import { PreviewTemplate } from '@hcengineering/communication-resources'
   import { SocialID } from '@hcengineering/communication-types'
+
   import { isViewSettingEnabled, hideUserNamesSettingId, viewSettingsStore } from '../../settings'
 
   export let tooltipLabel: IntlString | undefined = undefined
@@ -36,193 +30,19 @@
   export let showSeparator: boolean = true
   export let hideHeader: boolean = false
 
-  let clientWidth: number
-
-  $: showPersonName = clientWidth > 300 && !isViewSettingEnabled($viewSettingsStore, hideUserNamesSettingId)
-  $: updatePerson(socialId)
-  async function updatePerson (socialId: SocialID): Promise<void> {
-    person = $employeeByPersonIdStore.get(socialId) ?? (await getPersonByPersonId(socialId)) ?? undefined
-  }
+  const hidePersonName = isViewSettingEnabled($viewSettingsStore, hideUserNamesSettingId)
 </script>
 
-{#if kind === 'column'}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div
-    class="message-preview-template clear-mins {color} {kind}"
-    style:padding
-    use:resizeObserver={(element) => (clientWidth = element.clientWidth)}
-  >
-    {#if !hideHeader}
-      <span class="message-preview-template__column-header">
-        {#if person}
-          <span class="overflow-label clear-mins">
-            <PersonPreviewProvider value={person} inline>
-              {formatName(person?.name ?? '')}
-            </PersonPreviewProvider>
-          </span>
-        {/if}
-      </span>
-    {/if}
-
-    <span class="message-preview-template__left">
-      {#if $$slots.content}
-        <span
-          class="message-preview-template__content overflow-label {color}"
-          class:fixHeight
-          use:tooltip={tooltipLabel ? { label: tooltipLabel, textAlign: 'left' } : undefined}
-        >
-          <slot name="content" />
-        </span>
-      {/if}
-      <slot name="after" />
-    </span>
-  </div>
-{:else}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div
-    class="message-preview-template clear-mins {color}"
-    use:resizeObserver={(element) => (clientWidth = element.clientWidth)}
-  >
-    <span class="message-preview-template__left">
-      <PersonPreviewProvider value={person} inline>
-        <span class="message-preview-template__person" class:noGap={!showPersonName}>
-          <span class="message-preview-template__avatar">
-            {#if person}
-              <Avatar size="card" {person} name={person.name} />
-            {:else}
-              <SystemAvatar size="card" />
-            {/if}
-          </span>
-          {#if showPersonName && person}
-            <span class="message-preview-template__name overflow-label {color}">{formatName(person?.name ?? '')}</span>
-          {/if}
-          {#if showSeparator}
-            {#if showPersonName}
-              <span class="message-preview-template__separator"> • </span>
-            {/if}
-          {/if}
-        </span>
-      </PersonPreviewProvider>
-
-      {#if $$slots.content}
-        <span
-          class="message-preview-template__content overflow-label {color}"
-          class:fixHeight
-          use:tooltip={tooltipLabel ? { label: tooltipLabel, textAlign: 'left' } : undefined}
-        >
-          <slot name="content" />
-        </span>
-      {/if}
-      <slot name="after" />
-    </span>
-
-    <span class="message-preview-template__time clear-mins">
-      <TimeSince value={date.getTime()} />
-    </span>
-  </div>
-{/if}
-
-<style lang="scss">
-  .message-preview-template {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    max-width: 100%;
-    min-height: 2rem;
-    color: var(--global-secondary-TextColor);
-    padding: 0.25rem var(--spacing-1_25) 0.25rem var(--spacing-1_25);
-    overflow: hidden;
-    font-size: 0.875rem;
-    gap: 0.25rem;
-
-    &.column {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
-    &__left {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      min-width: 2.75rem;
-      overflow: hidden;
-      max-width: 100%;
-      flex: 1;
-    }
-
-    &__person {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      color: var(--global-primary-TextColor);
-      font-size: 0.875rem;
-
-      &.noGap {
-        gap: 0;
-      }
-    }
-
-    &__avatar {
-      width: 1.325rem;
-      min-width: 1.325rem;
-      height: 1.325rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 0.25rem;
-    }
-
-    &__content {
-      display: inline;
-      color: var(--global-primary-TextColor);
-      max-width: 100%;
-
-      &.fixHeight {
-        max-height: 1.375rem;
-      }
-
-      &.secondary {
-        color: var(--global-secondary-TextColor);
-      }
-    }
-
-    &__separator {
-      font-size: 0.875rem;
-      min-width: 0.375rem;
-      flex: 0 0 auto;
-      color: var(--global-primary-TextColor);
-      margin: 0 0.25rem;
-    }
-
-    &__name {
-      font-weight: 500;
-      flex: 0 0 auto;
-
-      &.secondary {
-        color: var(--global-secondary-TextColor);
-      }
-    }
-
-    &__time {
-      display: flex;
-      align-items: center;
-      font-size: 0.75rem;
-      color: var(--global-tertiary-TextColor);
-      white-space: nowrap;
-      margin-left: auto;
-      max-width: 100%;
-      min-width: 0;
-      width: fit-content;
-    }
-
-    &__column-header {
-      display: flex;
-      align-items: center;
-      max-width: 100%;
-      gap: var(--spacing-0_5);
-      font-weight: 500;
-      color: var(--global-primary-TextColor);
-    }
-  }
-</style>
+<PreviewTemplate
+  {tooltipLabel}
+  {person}
+  {socialId}
+  {date}
+  {color}
+  {kind}
+  {padding}
+  {fixHeight}
+  {showSeparator}
+  {hideHeader}
+  {hidePersonName}
+/>

From f829ba6be86c7ee8077538167377edf3326bf3dd Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Thu, 23 Oct 2025 23:04:20 +0700
Subject: [PATCH 2/2] Fix Svelte errors

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../legacy/MentionInboxNotificationPresenter.svelte         | 1 -
 .../src/components/preview/PreviewTemplate.svelte           | 6 +++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/plugins/inbox-resources/src/components/legacy/MentionInboxNotificationPresenter.svelte b/plugins/inbox-resources/src/components/legacy/MentionInboxNotificationPresenter.svelte
index 1502518f621..db9b777d85b 100644
--- a/plugins/inbox-resources/src/components/legacy/MentionInboxNotificationPresenter.svelte
+++ b/plugins/inbox-resources/src/components/legacy/MentionInboxNotificationPresenter.svelte
@@ -18,7 +18,6 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import activity, { ActivityMessage } from '@hcengineering/activity'
   import { Doc } from '@hcengineering/core'
-  import { getEmbeddedLabel } from '@hcengineering/platform'
   import { Person } from '@hcengineering/contact'
 
   import CommonInboxNotificationPresenter from './CommonInboxNotificationPresenter.svelte'
diff --git a/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte b/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte
index 961e0aaf938..148f249f3e7 100644
--- a/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte
+++ b/plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte
@@ -45,4 +45,8 @@
   {showSeparator}
   {hideHeader}
   {hidePersonName}
-/>
+>
+  <svelte:fragment slot="content">
+    <slot name="content" />
+  </svelte:fragment>
+</PreviewTemplate>