From 43713dd5089fea1a28905dc551625b9b8017aa5b Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Fri, 21 Apr 2023 12:43:27 +0600
Subject: [PATCH] Inbox scroll to new (#3036)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 packages/panel/src/components/Panel.svelte    | 10 ++++++--
 .../src/components/Activity.svelte            | 25 ++++++++++++++++++-
 .../src/components/TxView.svelte              | 21 +++++++++++++++-
 .../src/components/NotificationView.svelte    |  2 +-
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 69993bae6a..16fb676b66 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -143,7 +143,10 @@
     <div class="popupPanel-body__mobile-content clear-mins" class:max={useMaxWidth}>
       <slot />
       {#if !withoutActivity}
-        <Component is={activity.component.Activity} props={{ object, showCommenInput: !withoutInput }} />
+        <Component
+          is={activity.component.Activity}
+          props={{ object, showCommenInput: !withoutInput, shouldScroll: embedded }}
+        />
       {/if}
     </div>
   {:else}
@@ -151,7 +154,10 @@
       <div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
         <slot />
         {#if !withoutActivity}
-          <Component is={activity.component.Activity} props={{ object, showCommenInput: !withoutInput }} />
+          <Component
+            is={activity.component.Activity}
+            props={{ object, showCommenInput: !withoutInput, shouldScroll: embedded }}
+          />
         {/if}
       </div>
     </Scroller>
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index bccf8a4fdf..d2dcb42909 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -28,6 +28,7 @@
   export let object: Doc
   export let showCommenInput: boolean = true
   export let transparent: boolean = false
+  export let shouldScroll: boolean = false
 
   getResource(notification.function.GetNotificationClient).then((res) => {
     updatesStore = res().docUpdatesStore
@@ -83,13 +84,29 @@
 
   let filtered: DisplayTx[] = []
 
+  let newTxIndexes: number[] = []
+  $: newTxIndexes = getNewTxes(filtered, newTxes)
+
+  function getNewTxes (filtered: DisplayTx[], newTxes: [Ref<TxCUD<Doc>>, number][]): number[] {
+    const res: number[] = []
+    for (let i = 0; i < filtered.length; i++) {
+      if (isNew(filtered[i], newTxes)) {
+        res.push(i)
+      }
+    }
+    return res
+  }
+
   function isNew (tx: DisplayTx | undefined, newTxes: [Ref<TxCUD<Doc>>, number][]): boolean {
     if (tx === undefined) return false
     const index = newTxes.findIndex((p) => p[0] === tx.originTx._id)
     return index !== -1
   }
+
+  $: scrollIndex = shouldScroll ? newTxIndexes[0] ?? -1 : -1
 </script>
 
+{shouldScroll}
 <div class="antiSection-header high mt-9" class:invisible={transparent}>
   <span class="antiSection-header__title flex-row-center">
     <Label label={activity.string.Activity} />
@@ -105,7 +122,13 @@
   {#if filtered}
     <Grid column={1} rowGap={0.75}>
       {#each filtered as tx, i}
-        <TxView {tx} {viewlets} isNew={isNew(tx, newTxes)} isNextNew={isNew(filtered[i + 1], newTxes)} />
+        <TxView
+          {tx}
+          {viewlets}
+          isNew={newTxIndexes.includes(i)}
+          isNextNew={newTxIndexes.includes(i + 1)}
+          shouldScroll={i === scrollIndex}
+        />
       {/each}
     </Grid>
   {/if}
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index 7002430f63..c8d2109c11 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -40,6 +40,7 @@
   import { getValue, TxDisplayViewlet, updateViewlet } from '../utils'
   import TxViewTx from './TxViewTx.svelte'
   import Edit from './icons/Edit.svelte'
+  import { tick } from 'svelte'
 
   export let tx: DisplayTx
   export let viewlets: Map<ActivityKey, TxViewlet>
@@ -47,6 +48,7 @@
   export let isNew: boolean = false
   export let isNextNew: boolean = false
   export let contentHidden: boolean = false
+  export let shouldScroll: boolean = false
   // export let showDocument = false
 
   let ptx: DisplayTx | undefined
@@ -87,6 +89,9 @@
       modelIcon = result.modelIcon
       iconComponent = result.iconComponent
       props = getProps(result.props, edit)
+      if (shouldScroll) {
+        tick().then(scrollIntoView)
+      }
     }
   })
 
@@ -164,10 +169,24 @@
   $: withAvatar = isComment || isMentioned || isAttached
   $: isEmphasized = viewlet?.display === 'emphasized' || model.every((m) => isMessageType(m.attribute))
   $: isColumn = isComment || isEmphasized || hasMessageType
+
+  let htmlElement: HTMLDivElement
+
+  function scrollIntoView () {
+    htmlElement?.scrollIntoView({ behavior: 'auto', block: 'start' })
+    shouldScroll = false
+  }
 </script>
 
 {#if (viewlet !== undefined && !((viewlet?.hideOnRemove ?? false) && tx.removed)) || model.length > 0}
-  <div class="msgactivity-container" class:showIcon class:withAvatar class:isNew class:isNextNew>
+  <div
+    class="msgactivity-container"
+    bind:this={htmlElement}
+    class:showIcon
+    class:withAvatar
+    class:isNew
+    class:isNextNew
+  >
     {#if showIcon}
       {#if withAvatar}
         <div class="msgactivity-avatar">
diff --git a/plugins/notification-resources/src/components/NotificationView.svelte b/plugins/notification-resources/src/components/NotificationView.svelte
index d81ceffaf0..198c70a6d9 100644
--- a/plugins/notification-resources/src/components/NotificationView.svelte
+++ b/plugins/notification-resources/src/components/NotificationView.svelte
@@ -128,7 +128,7 @@
     font-weight: 600;
     font-size: 0.75rem;
     color: var(--theme-accent-color);
-    border: 1px solid var(--divider-color);
+    border: 1px solid var(--highlight-red);
     border-radius: 50%;
   }
 </style>