UBERF-5012: use flat message view if doc has only one notification (#4410)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/notification-resources/src/components/DocNotifyContextCard.svelte

@@ -58,6 +58,7 @@
     value.attachedToClass,
     notification.mixin.NotificationContextPresenter
   )
+  $: isCompact = notifications.length === 1
 </script>
 
 {#if visibleNotification}
@@ -66,69 +67,88 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="card"
+    class:compact={isCompact}
     on:click={() => {
       dispatch('click', { context: value, notification: visibleNotification })
     }}
   >
-    <div class="header">
-      <!--      <CheckBox-->
-      <!--        circle-->
-      <!--        kind="primary"-->
-      <!--        on:value={(event) => {-->
-      <!--          dispatch('check', event.detail)-->
-      <!--        }}-->
-      <!--      />-->
-      <NotifyContextIcon {value} />
-
-      {#if presenterMixin?.labelPresenter}
-        <Component is={presenterMixin.labelPresenter} props={{ notification: visibleNotification, context: value }} />
-      {:else}
-        <div class="labels">
-          {#await getDocIdentifier(client, value.attachedTo, value.attachedToClass) then title}
-            {#if title}
-              {title}
-            {:else}
-              <Label label={hierarchy.getClass(value.attachedToClass).label} />
-            {/if}
-          {/await}
-          {#await getDocTitle(client, value.attachedTo, value.attachedToClass) then title}
-            <div class="title overflow-label" {title}>
-              {title ?? hierarchy.getClass(value.attachedToClass).label}
-            </div>
-          {/await}
-        </div>
-      {/if}
-
-      <div class="actions">
+    {#if isCompact}
+      <InboxNotificationPresenter value={visibleNotification} {viewlets} showNotify={false} withActions={false} />
+      <div class="actions compact">
         <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
       </div>
 
-      <div class="notifyMarker">
+      <div class="notifyMarker compact">
         <NotifyMarker count={unreadCount} />
       </div>
-    </div>
+    {:else}
+      <div class="header">
+        <!--      <CheckBox-->
+        <!--        circle-->
+        <!--        kind="primary"-->
+        <!--        on:value={(event) => {-->
+        <!--          dispatch('check', event.detail)-->
+        <!--        }}-->
+        <!--      />-->
+        <NotifyContextIcon {value} />
 
-    <div class="notification">
-      <InboxNotificationPresenter value={visibleNotification} {viewlets} embedded skipLabel />
-    </div>
+        {#if presenterMixin?.labelPresenter}
+          <Component is={presenterMixin.labelPresenter} props={{ notification: visibleNotification, context: value }} />
+        {:else}
+          <div class="labels">
+            {#await getDocIdentifier(client, value.attachedTo, value.attachedToClass) then title}
+              {#if title}
+                {title}
+              {:else}
+                <Label label={hierarchy.getClass(value.attachedToClass).label} />
+              {/if}
+            {/await}
+            {#await getDocTitle(client, value.attachedTo, value.attachedToClass) then title}
+              <div class="title overflow-label" {title}>
+                {title ?? hierarchy.getClass(value.attachedToClass).label}
+              </div>
+            {/await}
+          </div>
+        {/if}
+
+        <div class="actions">
+          <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
+        </div>
+
+        <div class="notifyMarker">
+          <NotifyMarker count={unreadCount} />
+        </div>
+      </div>
+
+      <div class="notification">
+        <InboxNotificationPresenter value={visibleNotification} {viewlets} embedded skipLabel />
+      </div>
+    {/if}
   </div>
 {/if}
 
 <style lang="scss">
   .card {
     display: flex;
+    position: relative;
     flex-direction: column;
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: 0.5rem;
-    padding: 1rem;
+    padding: 0 1rem;
     margin: 0.5rem 0;
 
+    &.compact {
+      padding: 0;
+      margin: 0;
+    }
+
     .header {
       position: relative;
       display: flex;
       align-items: center;
-      gap: 1rem;
+      gap: 1.25rem;
+      margin-left: 0.25rem;
     }
 
     .title {
@@ -144,18 +164,28 @@
 
   .notification {
     margin-top: 1rem;
-    margin-left: 5.5rem;
+    margin-left: 4rem;
   }
 
   .notifyMarker {
     position: absolute;
     right: 1.875rem;
     top: 0;
+
+    &.compact {
+      right: 2.875rem;
+      top: 0.5rem;
+    }
   }
 
   .actions {
     position: absolute;
     right: 0;
     top: 0;
+
+    &.compact {
+      right: 1rem;
+      top: 0.5rem;
+    }
   }
 </style>

plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte

@@ -33,6 +33,8 @@
   export let value: DisplayActivityInboxNotification
   export let embedded = false
   export let skipLabel = false
+  export let showNotify = true
+  export let withActions = true
   export let viewlets: ActivityNotificationViewlet[] = []
   export let onClick: (() => void) | undefined = undefined
 
@@ -120,14 +122,27 @@
 
 {#if displayMessage !== undefined}
   {#if viewlet}
-    <Component is={viewlet.presenter} props={{ message: displayMessage, notification: value, embedded, onClick }} />
+    <Component
+      is={viewlet.presenter}
+      props={{
+        message: displayMessage,
+        notification: value,
+        embedded,
+        withActions,
+        showNotify,
+        actions,
+        excludedActions: [chunter.action.ReplyToThread],
+        onClick
+      }}
+    />
   {:else}
     <ActivityMessagePresenter
       value={displayMessage}
-      showNotify={!value.isViewed && !embedded}
+      showNotify={showNotify ? !value.isViewed && !embedded : false}
       isSelected={displayMessage._id === selectedMessageId}
       excludedActions={[chunter.action.ReplyToThread]}
       showEmbedded
+      {withActions}
       {embedded}
       {skipLabel}
       {actions}

plugins/notification-resources/src/components/inbox/CommonInboxNotificationPresenter.svelte

@@ -26,7 +26,7 @@
   import { translate } from '@hcengineering/platform'
   import { createQuery, getClient, MessageViewer } from '@hcengineering/presentation'
   import notification, { CommonInboxNotification } from '@hcengineering/notification'
-  import { ActionIcon, CheckBox, IconMoreH, Label, showPopup } from '@hcengineering/ui'
+  import { ActionIcon, IconMoreH, Label, showPopup } from '@hcengineering/ui'
   import { getDocLinkTitle, Menu } from '@hcengineering/view-resources'
   import { ActivityDocLink } from '@hcengineering/activity-resources'
   import view from '@hcengineering/view'
@@ -36,6 +36,8 @@
   export let value: CommonInboxNotification
   export let embedded = false
   export let skipLabel = false
+  export let showNotify = true
+  export let withActions = true
   export let onClick: (() => void) | undefined = undefined
 
   const objectQuery = createQuery()
@@ -53,9 +55,7 @@
     personAccount?.person !== undefined
       ? $employeeByIdStore.get(personAccount.person as Ref<Employee>) ?? $personByIdStore.get(personAccount.person)
       : undefined
-
   $: context = $docNotifyContextsStore.find(({ _id }) => _id === value.docNotifyContext)
-
   $: context &&
     objectQuery.query(context.attachedToClass, { _id: context.attachedTo }, (result) => {
       object = result[0]
@@ -95,7 +95,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="root clear-mins flex-grow" on:click={onClick}>
   {#if !embedded}
-    {#if !value.isViewed}
+    {#if !value.isViewed && showNotify}
       <div class="notify" />
     {/if}
 
@@ -142,7 +142,7 @@
     </div>
   </div>
 
-  {#if !embedded}
+  {#if !embedded && withActions}
     <div class="actions clear-mins flex flex-gap-2 items-center" class:opened={isActionMenuOpened}>
       <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
     </div>

plugins/notification-resources/src/components/inbox/Inbox.svelte

@@ -154,7 +154,7 @@
 
     if (selectedContext !== undefined) {
       loc.fragment = selectedContext._id
-      loc.query = { message: event?.detail?.notification?.attachedTo }
+      loc.query = { message: event?.detail?.notification?.attachedTo ?? null }
     } else {
       loc.fragment = undefined
       loc.query = undefined
@@ -283,7 +283,8 @@
   }
 
   .notifications {
-    margin: 0 0.5rem;
+    margin: 0.5rem;
+    padding: 0.5rem;
     height: 100%;
   }
 </style>

plugins/notification-resources/src/components/inbox/InboxNotificationPresenter.svelte

@@ -17,11 +17,13 @@
   import { getClient } from '@hcengineering/presentation'
   import { Component } from '@hcengineering/ui'
   import { Class, Doc, Ref } from '@hcengineering/core'
-  import { ActivityNotificationViewlet, DisplayInboxNotification } from '@hcengineering/notification'
+  import { ActivityNotificationViewlet, DisplayInboxNotification, DocNotifyContext } from '@hcengineering/notification'
 
   export let value: DisplayInboxNotification
   export let embedded = false
   export let skipLabel = false
+  export let showNotify = true
+  export let withActions = true
   export let viewlets: ActivityNotificationViewlet[] = []
   export let onClick: (() => void) | undefined = undefined
   export let onCheck: ((isChecked: boolean) => void) | undefined = undefined
@@ -33,5 +35,8 @@
 </script>
 
 {#if objectPresenter}
-  <Component is={objectPresenter.presenter} props={{ value, embedded, skipLabel, viewlets, onClick, onCheck }} />
+  <Component
+    is={objectPresenter.presenter}
+    props={{ value, embedded, skipLabel, viewlets, showNotify, withActions, onClick, onCheck }}
+  />
 {/if}