hcengineering · aonnikov · Oct 24, 2025 · Oct 23, 2025 · Oct 23, 2025 · Oct 23, 2025
diff --git 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
@@ -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
@@ -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
@@ -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,14 +32,14 @@
   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
   export let isComfortable2 = false
 
   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,111 +77,113 @@
 <!-- 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;
 
     &:hover {
       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>