Add chat ui fixes (#6419)

plugins/activity-resources/src/components/Replies.svelte

@@ -78,13 +78,13 @@
 
   const replyProvider = client.getModel().findAllSync(activity.class.ReplyProvider, {})[0]
 
-  async function handleReply (e: MouseEvent) {
+  async function handleReply (e: MouseEvent): Promise<void> {
     e.stopPropagation()
     e.preventDefault()
 
     if (replyProvider) {
       const fn = await getResource(replyProvider.function)
-      fn(object)
+      await fn(object)
     }
   }
 </script>
@@ -92,7 +92,7 @@
 {#if !embedded && object.replies && object.replies > 0}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="flex-row-center container cursor-pointer mt-2" on:click={handleReply}>
+  <div class="flex-row-center container cursor-pointer mt-2 overflow-label" on:click={handleReply}>
     <div class="flex-row-center">
       <div class="avatars">
         {#each displayPersons as person}
@@ -112,12 +112,10 @@
     {#if hasNew}
       <div class="notifyMarker" />
     {/if}
-    <div class="lastReply">
+    <span class="lastReply overflow-label">
       <Label label={activity.string.LastReply} />
-    </div>
-    <div class="time">
       <TimeSince value={lastReply} />
-    </div>
+    </span>
   </div>
 {/if}
 
@@ -126,24 +124,23 @@
     border: 1px solid transparent;
     border-radius: 0.5rem;
     padding: 0.25rem 0.5rem;
-    width: fit-content;
     height: 2.125rem;
     margin-left: -0.5rem;
+    min-width: 14.5rem;
 
     .plus {
       margin-left: 0.25rem;
     }
 
     .repliesCount {
+      flex: 1;
+      max-width: fit-content;
       color: var(--theme-link-color);
       font-weight: 500;
     }
 
-    .time {
-      font-size: 0.75rem;
-    }
-
     .lastReply {
+      flex: 1;
       font-size: 0.75rem;
       margin-right: 0.25rem;
     }

plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte

@@ -16,7 +16,7 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import activity, { ActivityMessage, ActivityReference } from '@hcengineering/activity'
   import { ActivityMessagePresenter, sortActivityMessages } from '@hcengineering/activity-resources'
-  import { ActionIcon, IconClose } from '@hcengineering/ui'
+  import { ActionIcon, IconClose, Loading } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { ThreadMessage } from '@hcengineering/chunter'
   import { Class, Doc, Ref, SortingOrder, Space } from '@hcengineering/core'
@@ -38,11 +38,18 @@
   let pinnedThreads: ThreadMessage[] = []
   let pinnedRefs: ActivityReference[] = []
 
+  let isPinnedLoaded = false
+  let isThreadsPinnedLoaded = false
+  let isPinnedRefsLoaded = false
+
+  $: isLoaded = isPinnedLoaded && isThreadsPinnedLoaded && isPinnedRefsLoaded
+
   $: pinnedQuery.query(
     activity.class.ActivityMessage,
     { attachedTo, isPinned: true, space },
     (res: ActivityMessage[]) => {
       pinnedMessages = res
+      isPinnedLoaded = true
     }
   )
 
@@ -51,6 +58,7 @@
     { objectId: attachedTo, isPinned: true, space },
     (res: ThreadMessage[]) => {
       pinnedThreads = res
+      isThreadsPinnedLoaded = true
     }
   )
 
@@ -60,11 +68,14 @@
       { attachedTo, isPinned: true, space: { $ne: space } },
       (res) => {
         pinnedRefs = res
+        isPinnedRefsLoaded = true
       }
     )
+  } else {
+    isPinnedRefsLoaded = true
   }
 
-  $: if (pinnedMessages.length === 0 && pinnedThreads.length === 0) {
+  $: if (isLoaded && pinnedMessages.length === 0 && pinnedThreads.length === 0 && pinnedRefs.length === 0) {
     dispatch('close', undefined)
   }
 
@@ -79,6 +90,9 @@
 </script>
 
 <div class="antiPopup vScroll popup">
+  {#if displayMessages.length === 0}
+    <Loading size="small" />
+  {/if}
   {#each displayMessages as message}
     <div class="message relative">
       <ActivityMessagePresenter