Fix inbox ui (#9688)

plugins/inbox-resources/src/components/InboxCard.svelte

@@ -104,7 +104,7 @@
     &__header {
       display: flex;
       align-items: center;
-      gap: 0.75rem;
+      gap: 0.5rem;
       margin-left: var(--spacing-0_5);
     }
 

plugins/inbox-resources/src/components/ReactionNotification.svelte

@@ -45,7 +45,10 @@
 {#if notification.message}
   <div class="reaction-notification">
     <PreviewTemplate socialId={content.creator} date={notification.created} color="secondary" showSeparator={false}>
-      <Label label={inbox.string.ReactedToYourMessage} />
+      <svelte:fragment slot="content">
+        <span class="ml-1-5" />
+        <Label label={inbox.string.ReactedToYourMessage} />
+      </svelte:fragment>
     </PreviewTemplate>
 
     <div class="reaction-notification__body">

plugins/inbox-resources/src/components/preview/AttachmentName.svelte

@@ -0,0 +1,43 @@
+<!-- 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 { Attachment } from '@hcengineering/communication-types'
+  import { Label } from '@hcengineering/ui'
+  import { isAppletAttachment, isBlobAttachment } from '@hcengineering/communication-shared'
+  import { getResource } from '@hcengineering/platform'
+  import { getClient } from '@hcengineering/presentation'
+  import communication from '@hcengineering/communication'
+
+  export let attachment: Attachment
+  export let lower: boolean = false
+
+  const client = getClient()
+  const applets = client.getModel().findAllSync(communication.class.Applet, {})
+</script>
+
+{#if isBlobAttachment(attachment)}
+  {attachment.params.fileName}
+{/if}
+
+{#if isAppletAttachment(attachment)}
+  {@const applet = applets.find((it) => it.type === attachment.type)}
+  {#if applet}
+    <span class:lower>
+      <Label label={applet.label} />:
+    </span>
+    {#await getResource(applet.getTitleFn) then fn}
+      {fn(attachment)}
+    {/await}
+  {/if}
+{/if}

plugins/inbox-resources/src/components/preview/AttachmentsPreview.svelte

@@ -15,27 +15,33 @@
   import { Message } from '@hcengineering/communication-types'
   import { Icon, Label, tooltip } from '@hcengineering/ui'
   import communication from '@hcengineering/communication'
-  import { isBlobAttachment } from '@hcengineering/communication-shared'
+  import { isAppletAttachment, isBlobAttachment } from '@hcengineering/communication-shared'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
 
   import AttachmentsTooltip from './AttachmentsTooltip.svelte'
+  import AttachmentName from './AttachmentName.svelte'
 
   export let message: Message
 
-  $: blobs = message.attachments.filter(isBlobAttachment) ?? []
-  $: showFiles = blobs.length > 0
+  $: attachments = message.attachments.filter((it) => isBlobAttachment(it) || isAppletAttachment(it)) ?? []
 </script>
 
-{#if showFiles}
+{#if attachments.length > 0}
   {#if message.content.trim().length > 0}
-    <span class="attachments" use:tooltip={{ component: AttachmentsTooltip, props: { attachments: blobs } }}>
-      {blobs.length}
+    <span class="attachments" use:tooltip={{ component: AttachmentsTooltip, props: { attachments } }}>
+      {attachments.length}
       <Icon icon={communication.icon.File} size="small" />
     </span>
   {:else}
     <span class="attachments-text font-normal overflow-label">
-      <Label label={communication.string.Files} />:
-      <span class="ml-1 overflow-label" use:tooltip={{ component: AttachmentsTooltip, props: { attachments: blobs } }}>
-        {blobs.map((it) => it.params.fileName).join(', ')}
+      <Label label={getEmbeddedLabel('Attachments')} />:
+      <span class="ml-1 overflow-label" use:tooltip={{ component: AttachmentsTooltip, props: { attachments } }}>
+        {#each attachments as att, i}
+          <AttachmentName attachment={att} lower={i > 0} />
+          {#if i < attachments.length - 1}
+            ,
+          {/if}
+        {/each}
       </span>
     </span>
   {/if}
@@ -61,5 +67,6 @@
     white-space: nowrap;
     min-width: 0;
     max-width: 100%;
+    margin-left: -0.25rem;
   }
 </style>

plugins/inbox-resources/src/components/preview/AttachmentsTooltip.svelte

@@ -13,17 +13,16 @@
 
 <script lang="ts">
   import { Attachment } from '@hcengineering/communication-types'
-  import { isBlobAttachment } from '@hcengineering/communication-shared'
+
+  import AttachmentName from './AttachmentName.svelte'
 
   export let attachments: Attachment[] = []
-
-  $: blobs = attachments.filter(isBlobAttachment)
 </script>
 
 <div class="tooltip">
-  {#each blobs as blob}
+  {#each attachments as attachment, i}
     <div>
-      {blob.params.fileName}
+      <AttachmentName {attachment} lower={i > 0} />
     </div>
   {/each}
 </div>

plugins/inbox-resources/src/components/preview/NotificationPreview.svelte

@@ -23,7 +23,7 @@
   import { jsonToMarkup, markupToText } from '@hcengineering/text'
   import { ActivityMessageViewer, isActivityMessage } from '@hcengineering/communication-resources'
 
-  import AttachmentPreview from './AttachmentPreview.svelte'
+  import AttachmentsPreview from './AttachmentsPreview.svelte'
   import PreviewTemplate from './PreviewTemplate.svelte'
 
   export let card: Card
@@ -62,13 +62,15 @@
   fixHeight={message.type !== MessageType.Activity}
   tooltipLabel={getTooltipLabel(message)}
 >
-  {#if isActivityMessage(message)}
-    <ActivityMessageViewer {message} {card} author={person} />
-  {:else}
-    <LiteMessageViewer message={markdownToMarkup(message.content)} />
-  {/if}
+  <svelte:fragment slot="content">
+    {#if isActivityMessage(message)}
+      <ActivityMessageViewer {message} {card} author={person} />
+    {:else}
+      <LiteMessageViewer message={markdownToMarkup(message.content)} />
+    {/if}
+  </svelte:fragment>
 
   <svelte:fragment slot="after">
-    <AttachmentPreview {message} />
+    <AttachmentsPreview {message} />
   </svelte:fragment>
 </PreviewTemplate>

plugins/inbox-resources/src/components/preview/PreviewTemplate.svelte

@@ -100,18 +100,24 @@
             <span class="message-preview-template__name overflow-label {color}">{formatName(_person?.name ?? '')}</span>
           {/if}
           {#if showSeparator}
-            <span class="message-preview-template__separator"> • </span>
+            {#if showPersonName}
+              <span class="message-preview-template__separator"> • </span>
+            {:else}
+              <span class="mr-0-5" />
+            {/if}
           {/if}
         </span>
       </PersonPreviewProvider>
 
-      <span
-        class="message-preview-template__content overflow-label {color}"
-        class:fixHeight
-        use:tooltip={tooltipLabel ? { label: tooltipLabel } : undefined}
-      >
-        <slot />
-      </span>
+      {#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>