Update cards feed view

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
   }
 

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;

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 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>

plugins/card-resources/src/components/ContentPreview.svelte

@@ -0,0 +1,69 @@
+<!--
+// 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
+
+  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 30 * remFactor
+    }
+    return remValue * remFactor
+  }
+</script>
+
+<div class="content-preview" class:compact>
+  <ShowMore limit={getMaxSize(maxHeight)} ignore={!collapsible}>
+    <div class="content-wrapper">
+      <ContentEditor
+        object={card}
+        readonly={true}
+        editorAttributes={{ style: 'font-size: 0.875rem; margin-top: -0.5rem;' }}
+      />
+    </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>

plugins/card-resources/src/components/FeedCardPresenter.svelte

@@ -13,22 +13,25 @@
 
 <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 { Person } from '@hcengineering/contact'
-  import { MessagePresenter, labelsStore, MessagePreview } from '@hcengineering/communication-resources'
+  import { createMessagesQuery } from '@hcengineering/presentation'
+  import { SortingOrder, WithLookup } from '@hcengineering/core'
+  import { CardID, Message, MessageType, Label as CardLabel } from '@hcengineering/communication-types'
+
+  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 { openCardInSidebar } from '../utils'
 
-  import SystemAvatar from '@hcengineering/contact-resources/src/components/SystemAvatar.svelte'
+  import ColoredCardIcon from './ColoredCardIcon.svelte'
+  import TagDivider from './TagDivider.svelte'
+  import ContentPreview from './ContentPreview.svelte'
 
   export let card: WithLookup<Card>
   export let isCompact = false
@@ -37,43 +40,44 @@
   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 },
-    (res) => {
-      const msgs = res.getResult().reverse()
-      message = msgs[msgs.length - 1]
-    },
-    {
-      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)
   }
+
+  $: truncatedTitle = card.title.length > 300 ? card.title.substring(0, 300) + '...' : card.title
+
   let isActionsOpened = false
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- 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}
+    <ColoredCardIcon {card} count={0} />
   </div>
 
   <div class="card__body">
@@ -86,38 +90,44 @@
         {/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} />
       {#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}
+          maxHeight={'10rem'}
+        />
+      {: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} />
-          <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}
@@ -245,7 +255,6 @@
       height: 0.5rem;
     }
     .tags-container {
-      min-width: 14rem;
       max-width: none;
       flex-grow: 1;
     }