From 08f07895b50fdfe8af62c4f64b893219d2ef6b62 Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Mon, 29 Sep 2025 17:37:12 +0700
Subject: [PATCH 1/6] New card view

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 packages/ui/src/components/ShowMore.svelte    |   3 +-
 .../src/components/CardPathPresenter.svelte   |   6 +-
 .../src/components/FeedCardPresenter.svelte   | 102 +++++++++++++-----
 .../src/components/TagDivider.svelte          |  23 ++++
 .../src/components/ChatApplication.svelte     |  13 ++-
 5 files changed, 112 insertions(+), 35 deletions(-)
 create mode 100644 plugins/card-resources/src/components/TagDivider.svelte

diff --git a/packages/ui/src/components/ShowMore.svelte b/packages/ui/src/components/ShowMore.svelte
index b505e39e4d3..d5831488a9b 100644
--- a/packages/ui/src/components/ShowMore.svelte
+++ b/packages/ui/src/components/ShowMore.svelte
@@ -26,7 +26,8 @@
   let cHeight: number
   let crop: boolean = false
 
-  const toggle = (): void => {
+  const toggle = (event: MouseEvent): void => {
+    event.stopPropagation()
     crop = !crop
   }
 
diff --git a/plugins/card-resources/src/components/CardPathPresenter.svelte b/plugins/card-resources/src/components/CardPathPresenter.svelte
index f277bf8334f..e69556828bb 100644
--- a/plugins/card-resources/src/components/CardPathPresenter.svelte
+++ b/plugins/card-resources/src/components/CardPathPresenter.svelte
@@ -18,7 +18,7 @@
   import { WithLookup } from '@hcengineering/core'
   import { Icon, tooltip } from '@hcengineering/ui'
   import { getEmbeddedLabel } from '@hcengineering/platform'
-  import { IconForward } from '@hcengineering/presentation'
+  import TagDivider from './TagDivider.svelte'
 
   import { openCardInSidebar } from '../utils'
   import CardIcon from './CardIcon.svelte'
@@ -38,7 +38,7 @@
   {/if}
   {#if card.parent != null}
     {#if displaySpace && card.$lookup?.space !== undefined}
-      <IconForward size={'small'} />
+      <TagDivider />
     {/if}
     {@const info = card.parentInfo?.find((it) => it._id === card.parent)}
     {#if info}
@@ -73,7 +73,7 @@
     border-radius: var(--extra-small-BorderRadius);
     white-space: nowrap;
     gap: 0.25rem;
-    background: var(--global-ui-hover-BackgroundColor);
+    background-color: var(--global-ui-BackgroundColor);
     border: var(--global-subtle-ui-BorderColor);
     color: var(--global-secondary-TextColor);
     cursor: pointer;
diff --git a/plugins/card-resources/src/components/FeedCardPresenter.svelte b/plugins/card-resources/src/components/FeedCardPresenter.svelte
index ff26c11e531..815b6f70c11 100644
--- a/plugins/card-resources/src/components/FeedCardPresenter.svelte
+++ b/plugins/card-resources/src/components/FeedCardPresenter.svelte
@@ -13,22 +13,27 @@
 
 <script lang="ts">
   import cardPlugin, { Card } from '@hcengineering/card'
-  import { createMessagesQuery, IconForward } from '@hcengineering/presentation'
-  import core, { PersonId, SortingOrder, WithLookup } from '@hcengineering/core'
-  import { CardID, Message, Label as CardLabel } from '@hcengineering/communication-types'
-  import { Avatar, getPersonByPersonIdStore, PersonPreviewProvider } from '@hcengineering/contact-resources'
+  import { createMessagesQuery, MessageViewer } from '@hcengineering/presentation'
+  import { PersonId, SortingOrder, WithLookup } from '@hcengineering/core'
+  import { CardID, Message, MessageType, Label as CardLabel } from '@hcengineering/communication-types'
+  import { getPersonByPersonIdStore } from '@hcengineering/contact-resources'
   import { Person } from '@hcengineering/contact'
-  import { MessagePresenter, labelsStore, MessagePreview } from '@hcengineering/communication-resources'
+  import { MessagePresenter, labelsStore } from '@hcengineering/communication-resources'
   import { Button, IconMoreH, tooltip } from '@hcengineering/ui'
   import { showMenu } from '@hcengineering/view-resources'
   import { getEmbeddedLabel } from '@hcengineering/platform'
+  import chat from '@hcengineering/chat'
+
   import CardTagsColored from './CardTagsColored.svelte'
   import CardPathPresenter from './CardPathPresenter.svelte'
   import CardTimestamp from './CardTimestamp.svelte'
+  import MessagePreview from './preview/MessagePreview.svelte'
 
   import { openCardInSidebar } from '../utils'
 
-  import SystemAvatar from '@hcengineering/contact-resources/src/components/SystemAvatar.svelte'
+  import InboxCardIcon from './InboxCardIcon.svelte'
+  import TagDivider from './TagDivider.svelte'
+  import ContentPreview from './ContentPreview.svelte'
 
   export let card: WithLookup<Card>
   export let isCompact = false
@@ -37,15 +42,16 @@
   const messagesQuery = createMessagesQuery()
 
   let message: Message | undefined = undefined
+  let messages: Message[] = []
 
   let socialId: PersonId | undefined = undefined
   let person: Person | undefined = undefined
 
   $: messagesQuery.query(
-    { cardId: card._id, limit: 1, order: SortingOrder.Descending },
+    { cardId: card._id, limit: 5, order: SortingOrder.Ascending },
     (res) => {
-      const msgs = res.getResult().reverse()
-      message = msgs[msgs.length - 1]
+      messages = res.getResult().reverse()
+      message = messages.findLast((msg) => msg.type === MessageType.Text)
     },
     {
       attachments: true,
@@ -60,6 +66,10 @@
   function hasNewMessages (labels: CardLabel[], cardId: CardID): boolean {
     return labels.some((it) => (it.labelId as string) === cardPlugin.label.NewMessages && it.cardId === cardId)
   }
+
+  // Check if the card is a thread type
+  $: isThreadCard = card._class === chat.masterTag.Thread
+
   let isActionsOpened = false
 </script>
 
@@ -67,13 +77,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="card" on:click|stopPropagation|preventDefault={() => openCardInSidebar(card._id, card)}>
   <div class="card__avatar">
-    {#if socialId !== core.account.System}
-      <PersonPreviewProvider value={person}>
-        <Avatar name={person?.name} {person} size="medium" />
-      </PersonPreviewProvider>
-    {:else}
-      <SystemAvatar size="medium" />
-    {/if}
+    <InboxCardIcon {card} count={0} />
   </div>
 
   <div class="card__body">
@@ -94,30 +98,33 @@
       <CardTimestamp date={card.modifiedOn} />
       {#if !isComfortable2}
         <div class="flex-presenter flex-gap-0-5 tags-container">
-          <CardPathPresenter {card} />
-          <IconForward size={'small'} />
           <div class="card__tags">
-            <CardTagsColored value={card} collapsable fullWidth />
+            <CardTagsColored value={card} showType={false} collapsable fullWidth />
           </div>
         </div>
       {/if}
     </div>
     <div class="card__message">
-      {#if message}
-        {#if isCompact}
-          <MessagePreview {card} {message} colorInherit />
-        {:else}
-          <MessagePresenter {card} {message} hideHeader hideAvatar readonly padding="0" showThreads={false} />
-        {/if}
+      {#if isThreadCard && message}
+        <MessagePresenter {card} {message} hideHeader hideAvatar readonly padding="0" showThreads={false} />
+      {:else if !isThreadCard && card.content}
+        <ContentPreview {card} maxHeight={'10rem'} />
       {/if}
     </div>
+    <div class="card__updates">
+      <div class="card__update-item">
+        <div class="card__update-marker" />
+        <MessagePreview {card} {message} date={new Date(card.modifiedOn)} creator={message?.creator} />
+      </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} />
-          <IconForward size={'small'} />
+          <TagDivider />
           <div class="card__tags mr-2">
-            <CardTagsColored value={card} collapsable fullWidth />
+            <CardTagsColored value={card} showType={false} collapsable fullWidth />
           </div>
         </div>
       {/if}
@@ -208,6 +215,46 @@
       color: var(--global-secondary-TextColor);
     }
 
+    &__updates {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: 0;
+      margin-top: var(--spacing-1);
+      padding-left: 0.5rem;
+    }
+
+    &__update-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+      user-select: none;
+
+      &:first-child .card__update-marker {
+        border-top-left-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+      }
+
+      &:last-child .card__update-marker {
+        border-bottom-left-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
+      }
+
+      &:hover .card__update-marker {
+        border-radius: 0.5rem;
+        background: var(--global-primary-LinkColor);
+      }
+    }
+
+    &__update-marker {
+      position: absolute;
+      width: 0.25rem;
+      height: 100%;
+      background: var(--global-ui-highlight-BackgroundColor);
+      border-radius: 0;
+    }
+
     &__parent {
       display: flex;
       align-items: center;
@@ -245,7 +292,6 @@
       height: 0.5rem;
     }
     .tags-container {
-      min-width: 14rem;
       max-width: none;
       flex-grow: 1;
     }
diff --git a/plugins/card-resources/src/components/TagDivider.svelte b/plugins/card-resources/src/components/TagDivider.svelte
new file mode 100644
index 00000000000..ca9fed505f3
--- /dev/null
+++ b/plugins/card-resources/src/components/TagDivider.svelte
@@ -0,0 +1,23 @@
+<!-- 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. -->
+
+<div class="divider"/>
+
+<style lang="scss">
+  .divider {
+    border: 1px solid var(--theme-content-color);
+    width: 1px;
+    height: 0.125rem;
+    margin: 0 0.125rem;
+  }
+</style>
diff --git a/plugins/chat-resources/src/components/ChatApplication.svelte b/plugins/chat-resources/src/components/ChatApplication.svelte
index 92fb6da686e..d4f421e9a36 100644
--- a/plugins/chat-resources/src/components/ChatApplication.svelte
+++ b/plugins/chat-resources/src/components/ChatApplication.svelte
@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  import cardPlugin, { Card, MasterTag } from '@hcengineering/card'
+  import { Card, MasterTag } from '@hcengineering/card'
   import {
     defineSeparators,
     Separator,
@@ -27,10 +27,12 @@
   } from '@hcengineering/ui'
   import { onDestroy } from 'svelte'
   import { getClient } from '@hcengineering/presentation'
-  import { chatId } from '@hcengineering/chat'
+  import chat, { chatId } from '@hcengineering/chat'
   import { Ref } from '@hcengineering/core'
   import view from '@hcengineering/view'
   import { Favorites } from '@hcengineering/card-resources'
+  import workbench from '@hcengineering/workbench'
+  import cardPlugin from '@hcengineering/card-resources/src/plugin'
 
   import ChatNavigation from './ChatNavigation.svelte'
   import {
@@ -215,7 +217,12 @@
     {:else if selectedType}
       <ChatNavigationCategoryList type={selectedType} />
     {:else if selection?.type === 'all'}
-      <Component is={cardPlugin.component.CardFeedView} />
+      <Component is={workbench.component.SpecialView} props={{
+        _class: cardPlugin.class.Card,
+        icon: chat.icon.All,
+        label: chat.string.All,
+        defaultViewletDescriptor: cardPlugin.viewlet.CardFeedDescriptor
+      }}/>
     {/if}
   </div>
 </div>

From 6953b821565a3d02dc5771a084907a27e36e179b Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Mon, 29 Sep 2025 17:39:01 +0700
Subject: [PATCH 2/6] Update card feed view

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/ColoredCardIcon.svelte     | 84 +++++++++++++++++++
 .../src/components/ContentPreview.svelte      | 63 ++++++++++++++
 .../src/components/NotifyMarker.svelte        | 59 +++++++++++++
 .../src/components/TagDivider.svelte          |  2 +-
 4 files changed, 207 insertions(+), 1 deletion(-)
 create mode 100644 plugins/card-resources/src/components/ColoredCardIcon.svelte
 create mode 100644 plugins/card-resources/src/components/ContentPreview.svelte
 create mode 100644 plugins/card-resources/src/components/NotifyMarker.svelte

diff --git a/plugins/card-resources/src/components/ColoredCardIcon.svelte b/plugins/card-resources/src/components/ColoredCardIcon.svelte
new file mode 100644
index 00000000000..0aba03d4ff2
--- /dev/null
+++ b/plugins/card-resources/src/components/ColoredCardIcon.svelte
@@ -0,0 +1,84 @@
+<!--
+// 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 cardPlugin, { Card, MasterTag } from '@hcengineering/card'
+  import { getClient } from '@hcengineering/presentation'
+  import { Component, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import communication from '@hcengineering/communication'
+
+  import NotifyMarker from './NotifyMarker.svelte'
+
+  export let card: Card
+  export let count: number = 0
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  $: size = hierarchy.isDerived(card._class, communication.type.Direct) ? 'large' : 'medium'
+
+  // Get the color from the card's MasterTag class, similar to MasterTagSelector
+  $: clazz = hierarchy.getClass(card._class) as MasterTag
+  $: color = clazz.background ?? 0
+  $: platformColor = getPlatformColorDef(color, $themeStore.dark)
+
+  function getIconStyle (platformColor: any): string {
+    return `
+      background: ${platformColor.color + '1a'};
+      border: 1px solid ${platformColor.color + '33'};
+      color: ${platformColor.color};
+      fill: ${platformColor.color};
+    `
+  }
+</script>
+
+<div class="card-icon" style={getIconStyle(platformColor)}>
+  <Component is={cardPlugin.component.CardIcon} props={{ value: card, size }} />
+
+  {#if count > 0}
+    <div class="card-icon__marker">
+      <NotifyMarker {count} size="small" />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .card-icon {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    border-radius: var(--medium-BorderRadius);
+
+    // Default fallback colors - will be overridden by inline styles
+    color: var(--global-secondary-TextColor);
+    background-color: var(--global-ui-BackgroundColor);
+    border: 1px solid var(--global-subtle-ui-BorderColor);
+    fill: var(--global-secondary-TextColor);
+
+    &__marker {
+      position: absolute;
+      top: -0.375rem;
+      right: 0;
+      transform: translateX(calc(100% - 0.875rem));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/plugins/card-resources/src/components/ContentPreview.svelte b/plugins/card-resources/src/components/ContentPreview.svelte
new file mode 100644
index 00000000000..bc9da8354a3
--- /dev/null
+++ b/plugins/card-resources/src/components/ContentPreview.svelte
@@ -0,0 +1,63 @@
+<!--
+// 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 { Card } from '@hcengineering/card'
+  import { WithLookup } from '@hcengineering/core'
+  import { ShowMore } from '@hcengineering/ui'
+
+  import ContentEditor from './ContentEditor.svelte'
+
+  export let card: WithLookup<Card>
+  export let maxHeight: string = '30rem'
+  export let collapsible: boolean = true
+  export let compact: boolean = false
+
+  // Function to safely parse maxHeight with fallback
+  function getMaxSize (maxHeight: string): number {
+    const remValue = parseFloat(maxHeight.replace('rem', ''))
+    if (isNaN(remValue) || remValue <= 0) {
+      return 480
+    }
+    return remValue * 16
+  }
+</script>
+
+<div class="content-preview" class:compact>
+  <ShowMore limit={getMaxSize(maxHeight)} ignore={!collapsible}>
+    <div class="content-wrapper">
+      <ContentEditor object={card} readonly={true} />
+    </div>
+  </ShowMore>
+</div>
+
+<style lang="scss">
+  .content-preview {
+    width: 100%;
+    color: var(--global-secondary-TextColor);
+    position: relative; // Ensure proper positioning context for ShowMore button
+
+    &.compact {
+      font-size: 0.875rem;
+    }
+  }
+
+  .content-wrapper {
+    width: 100%;
+    overflow: visible; // Changed from hidden to allow ShowMore button to be visible
+    word-wrap: break-word;
+    position: relative; // Additional positioning context
+  }
+</style>
diff --git a/plugins/card-resources/src/components/NotifyMarker.svelte b/plugins/card-resources/src/components/NotifyMarker.svelte
new file mode 100644
index 00000000000..433ceb2bd24
--- /dev/null
+++ b/plugins/card-resources/src/components/NotifyMarker.svelte
@@ -0,0 +1,59 @@
+<!--
+// 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">
+  export let size: 'xx-small' | 'x-small' | 'small' | 'medium' = 'small'
+</script>
+
+<div class="notifyMarker {size}" />
+
+<style lang="scss">
+  .notifyMarker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    padding: 0 0.25rem;
+
+    &.simple,
+    &.primary {
+      background-color: var(--global-higlight-Color);
+      color: var(--global-on-accent-TextColor);
+    }
+
+    &.xx-small {
+      min-width: 0.5rem;
+      height: 0.5rem;
+    }
+
+    &.x-small {
+      min-width: 0.75rem;
+      height: 0.75rem;
+    }
+
+    &.small {
+      min-width: 1rem;
+      height: 1rem;
+      font-size: 0.5rem;
+    }
+
+    &.medium {
+      min-width: 1.25rem;
+      height: 1.25rem;
+      font-size: 0.625rem;
+    }
+  }
+</style>
diff --git a/plugins/card-resources/src/components/TagDivider.svelte b/plugins/card-resources/src/components/TagDivider.svelte
index ca9fed505f3..9052915f25f 100644
--- a/plugins/card-resources/src/components/TagDivider.svelte
+++ b/plugins/card-resources/src/components/TagDivider.svelte
@@ -11,7 +11,7 @@
 <!-- See the License for the specific language governing permissions and -->
 <!-- limitations under the License. -->
 
-<div class="divider"/>
+<div class="divider" />
 
 <style lang="scss">
   .divider {

From 735feeeb3bd700796034d886e2453eeb4de74f2d Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Tue, 30 Sep 2025 12:55:03 +0700
Subject: [PATCH 3/6] Fix content preview

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/ColoredCardIcon.svelte     |   2 +-
 .../src/components/ContentPreview.svelte      |   6 +-
 .../src/components/FeedCardPresenter.svelte   | 102 +++++-------------
 3 files changed, 34 insertions(+), 76 deletions(-)

diff --git a/plugins/card-resources/src/components/ColoredCardIcon.svelte b/plugins/card-resources/src/components/ColoredCardIcon.svelte
index 0aba03d4ff2..5db0f8d2772 100644
--- a/plugins/card-resources/src/components/ColoredCardIcon.svelte
+++ b/plugins/card-resources/src/components/ColoredCardIcon.svelte
@@ -48,7 +48,7 @@
 
   {#if count > 0}
     <div class="card-icon__marker">
-      <NotifyMarker {count} size="small" />
+      <NotifyMarker size="small" />
     </div>
   {/if}
 </div>
diff --git a/plugins/card-resources/src/components/ContentPreview.svelte b/plugins/card-resources/src/components/ContentPreview.svelte
index bc9da8354a3..f8b7ed2b016 100644
--- a/plugins/card-resources/src/components/ContentPreview.svelte
+++ b/plugins/card-resources/src/components/ContentPreview.svelte
@@ -38,7 +38,11 @@
 <div class="content-preview" class:compact>
   <ShowMore limit={getMaxSize(maxHeight)} ignore={!collapsible}>
     <div class="content-wrapper">
-      <ContentEditor object={card} readonly={true} />
+      <ContentEditor
+        object={card}
+        readonly={true}
+        editorAttributes={{ style: 'font-size: 0.875rem; margin-top: -0.5rem;' }}
+      />
     </div>
   </ShowMore>
 </div>
diff --git a/plugins/card-resources/src/components/FeedCardPresenter.svelte b/plugins/card-resources/src/components/FeedCardPresenter.svelte
index 815b6f70c11..008235a96e1 100644
--- a/plugins/card-resources/src/components/FeedCardPresenter.svelte
+++ b/plugins/card-resources/src/components/FeedCardPresenter.svelte
@@ -13,11 +13,10 @@
 
 <script lang="ts">
   import cardPlugin, { Card } from '@hcengineering/card'
-  import { createMessagesQuery, MessageViewer } from '@hcengineering/presentation'
-  import { PersonId, SortingOrder, WithLookup } from '@hcengineering/core'
+  import { createMessagesQuery } from '@hcengineering/presentation'
+  import { SortingOrder, WithLookup } from '@hcengineering/core'
   import { CardID, Message, MessageType, Label as CardLabel } from '@hcengineering/communication-types'
-  import { getPersonByPersonIdStore } from '@hcengineering/contact-resources'
-  import { Person } from '@hcengineering/contact'
+
   import { MessagePresenter, labelsStore } from '@hcengineering/communication-resources'
   import { Button, IconMoreH, tooltip } from '@hcengineering/ui'
   import { showMenu } from '@hcengineering/view-resources'
@@ -27,11 +26,10 @@
   import CardTagsColored from './CardTagsColored.svelte'
   import CardPathPresenter from './CardPathPresenter.svelte'
   import CardTimestamp from './CardTimestamp.svelte'
-  import MessagePreview from './preview/MessagePreview.svelte'
 
   import { openCardInSidebar } from '../utils'
 
-  import InboxCardIcon from './InboxCardIcon.svelte'
+  import ColoredCardIcon from './ColoredCardIcon.svelte'
   import TagDivider from './TagDivider.svelte'
   import ContentPreview from './ContentPreview.svelte'
 
@@ -44,31 +42,33 @@
   let message: Message | undefined = undefined
   let messages: Message[] = []
 
-  let socialId: PersonId | undefined = undefined
-  let person: Person | undefined = undefined
-
-  $: messagesQuery.query(
-    { cardId: card._id, limit: 5, order: SortingOrder.Ascending },
-    (res) => {
-      messages = res.getResult().reverse()
-      message = messages.findLast((msg) => msg.type === MessageType.Text)
-    },
-    {
-      attachments: true,
-      reactions: true
-    }
-  )
+  // Check if the card is a thread type
+  $: isThreadCard = card._class === chat.masterTag.Thread
 
-  $: socialId = message?.creator ?? card.modifiedBy
-  $: personStore = getPersonByPersonIdStore([socialId])
-  $: person = $personStore.get(socialId)
+  // Only query messages if this is a thread card
+  $: if (isThreadCard) {
+    messagesQuery.query(
+      { cardId: card._id, limit: 3, order: SortingOrder.Ascending },
+      (res) => {
+        messages = res.getResult().reverse()
+        message = messages.findLast((msg) => msg.type === MessageType.Text)
+      },
+      {
+        attachments: true,
+        reactions: true
+      }
+    )
+  } else {
+    // Clear message data for non-thread cards
+    messages = []
+    message = undefined
+  }
 
   function hasNewMessages (labels: CardLabel[], cardId: CardID): boolean {
     return labels.some((it) => (it.labelId as string) === cardPlugin.label.NewMessages && it.cardId === cardId)
   }
 
-  // Check if the card is a thread type
-  $: isThreadCard = card._class === chat.masterTag.Thread
+  $: truncatedTitle = card.title.length > 300 ? card.title.substring(0, 300) + '...' : card.title
 
   let isActionsOpened = false
 </script>
@@ -77,7 +77,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="card" on:click|stopPropagation|preventDefault={() => openCardInSidebar(card._id, card)}>
   <div class="card__avatar">
-    <InboxCardIcon {card} count={0} />
+    <ColoredCardIcon {card} count={0} />
   </div>
 
   <div class="card__body">
@@ -90,9 +90,9 @@
         {/if}
         <span
           class="card__title overflow-label"
-          use:tooltip={{ label: getEmbeddedLabel(card.title), textAlign: 'left' }}
+          use:tooltip={{ label: getEmbeddedLabel(truncatedTitle), textAlign: 'left' }}
         >
-          {card.title}
+          {truncatedTitle}
         </span>
       </div>
       <CardTimestamp date={card.modifiedOn} />
@@ -111,12 +111,6 @@
         <ContentPreview {card} maxHeight={'10rem'} />
       {/if}
     </div>
-    <div class="card__updates">
-      <div class="card__update-item">
-        <div class="card__update-marker" />
-        <MessagePreview {card} {message} date={new Date(card.modifiedOn)} creator={message?.creator} />
-      </div>
-    </div>
     <div class="card__parent" class:wrap={isComfortable2}>
       <CardPathPresenter {card} />
       {#if isComfortable2}
@@ -215,46 +209,6 @@
       color: var(--global-secondary-TextColor);
     }
 
-    &__updates {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      min-width: 0;
-      margin-top: var(--spacing-1);
-      padding-left: 0.5rem;
-    }
-
-    &__update-item {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      cursor: pointer;
-      user-select: none;
-
-      &:first-child .card__update-marker {
-        border-top-left-radius: 0.5rem;
-        border-top-right-radius: 0.5rem;
-      }
-
-      &:last-child .card__update-marker {
-        border-bottom-left-radius: 0.5rem;
-        border-bottom-right-radius: 0.5rem;
-      }
-
-      &:hover .card__update-marker {
-        border-radius: 0.5rem;
-        background: var(--global-primary-LinkColor);
-      }
-    }
-
-    &__update-marker {
-      position: absolute;
-      width: 0.25rem;
-      height: 100%;
-      background: var(--global-ui-highlight-BackgroundColor);
-      border-radius: 0;
-    }
-
     &__parent {
       display: flex;
       align-items: center;

From 1c454595d29c15f36f07534fd62020303e3a2fd3 Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Tue, 30 Sep 2025 13:51:22 +0700
Subject: [PATCH 4/6] Fix formatting

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/ChatApplication.svelte         | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/plugins/chat-resources/src/components/ChatApplication.svelte b/plugins/chat-resources/src/components/ChatApplication.svelte
index d4f421e9a36..a83f6f2e263 100644
--- a/plugins/chat-resources/src/components/ChatApplication.svelte
+++ b/plugins/chat-resources/src/components/ChatApplication.svelte
@@ -217,12 +217,15 @@
     {:else if selectedType}
       <ChatNavigationCategoryList type={selectedType} />
     {:else if selection?.type === 'all'}
-      <Component is={workbench.component.SpecialView} props={{
-        _class: cardPlugin.class.Card,
-        icon: chat.icon.All,
-        label: chat.string.All,
-        defaultViewletDescriptor: cardPlugin.viewlet.CardFeedDescriptor
-      }}/>
+      <Component
+        is={workbench.component.SpecialView}
+        props={{
+          _class: cardPlugin.class.Card,
+          icon: chat.icon.All,
+          label: chat.string.All,
+          defaultViewletDescriptor: cardPlugin.viewlet.CardFeedDescriptor
+        }}
+      />
     {/if}
   </div>
 </div>

From c757e77b2baf2e8718e5f0919f27a7fd35867b5c Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Thu, 2 Oct 2025 09:50:26 +0700
Subject: [PATCH 5/6] Minor fixes

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 plugins/card-resources/src/components/ContentPreview.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/plugins/card-resources/src/components/ContentPreview.svelte b/plugins/card-resources/src/components/ContentPreview.svelte
index f8b7ed2b016..615ec9a9c75 100644
--- a/plugins/card-resources/src/components/ContentPreview.svelte
+++ b/plugins/card-resources/src/components/ContentPreview.svelte
@@ -25,13 +25,15 @@
   export let collapsible: boolean = true
   export let compact: boolean = false
 
+  const remFactor = 16
+
   // Function to safely parse maxHeight with fallback
   function getMaxSize (maxHeight: string): number {
     const remValue = parseFloat(maxHeight.replace('rem', ''))
     if (isNaN(remValue) || remValue <= 0) {
-      return 480
+      return 30 * remFactor
     }
-    return remValue * 16
+    return remValue * remFactor
   }
 </script>
 

From 0cfdf90b4a233897b3c96d0b3ca19ef0bfd7393a Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Thu, 2 Oct 2025 10:45:57 +0700
Subject: [PATCH 6/6] Fix layout

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/FeedCardPresenter.svelte           | 11 ++++++++++-
 .../src/components/message/MessageBody.svelte         |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/plugins/card-resources/src/components/FeedCardPresenter.svelte b/plugins/card-resources/src/components/FeedCardPresenter.svelte
index 008235a96e1..05dcd7ec3e3 100644
--- a/plugins/card-resources/src/components/FeedCardPresenter.svelte
+++ b/plugins/card-resources/src/components/FeedCardPresenter.svelte
@@ -106,7 +106,16 @@
     </div>
     <div class="card__message">
       {#if isThreadCard && message}
-        <MessagePresenter {card} {message} hideHeader hideAvatar readonly padding="0" showThreads={false} />
+        <MessagePresenter
+          {card}
+          {message}
+          hideHeader
+          hideAvatar
+          readonly
+          padding="0"
+          showThreads={false}
+          maxHeight={'10rem'}
+        />
       {:else if !isThreadCard && card.content}
         <ContentPreview {card} maxHeight={'10rem'} />
       {/if}
diff --git a/plugins/communication-resources/src/components/message/MessageBody.svelte b/plugins/communication-resources/src/components/message/MessageBody.svelte
index 33f686c1ff4..83098b32aa1 100644
--- a/plugins/communication-resources/src/components/message/MessageBody.svelte
+++ b/plugins/communication-resources/src/components/message/MessageBody.svelte
@@ -227,6 +227,7 @@
     &.with-showmore {
       position: relative; // This ensures ShowMore button positions relative to this container
       margin-bottom: 1rem;
+      overflow: visible;
     }
   }