UBERF-5467: remove hidden notifications and use Lazy on inbox (#4632)

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

models/notification/src/migration.ts

@@ -133,6 +133,10 @@ async function getInboxNotifications (
 }
 
 async function getInboxData (client: MigrationClient, docUpdate: DocUpdates): Promise<InboxData | undefined> {
+  if (docUpdate.hidden) {
+    return
+  }
+
   if (!client.hierarchy.hasClass(docUpdate.attachedToClass)) {
     console.log('cannot find class: ', docUpdate.attachedToClass)
     return
@@ -195,6 +199,40 @@ async function migrateInboxNotifications (client: MigrationClient): Promise<void
   }
 }
 
+export async function removeHiddenNotifications (client: MigrationClient): Promise<void> {
+  const processedIds: Ref<DocNotifyContext>[] = []
+
+  while (true) {
+    const contexts = await client.find<DocNotifyContext>(
+      DOMAIN_NOTIFICATION,
+      {
+        _class: notification.class.DocNotifyContext,
+        _id: { $nin: processedIds },
+        hidden: true
+      },
+      { limit: 500 }
+    )
+
+    if (contexts.length === 0) {
+      return
+    }
+
+    const ids = contexts.map(({ _id }) => _id)
+
+    processedIds.push(...ids)
+
+    await client.deleteMany(DOMAIN_NOTIFICATION, {
+      _class: notification.class.CommonInboxNotification,
+      docNotifyContext: { $in: ids }
+    })
+
+    await client.deleteMany(DOMAIN_NOTIFICATION, {
+      _class: notification.class.ActivityInboxNotification,
+      docNotifyContext: { $in: ids }
+    })
+  }
+}
+
 export const notificationOperation: MigrateOperation = {
   async migrate (client: MigrationClient): Promise<void> {
     await tryMigrate(client, notificationId, [
@@ -203,6 +241,12 @@ export const notificationOperation: MigrateOperation = {
         func: migrateInboxNotifications
       }
     ])
+    await tryMigrate(client, notificationId, [
+      {
+        state: 'remove-hidden-notifications',
+        func: removeHiddenNotifications
+      }
+    ])
   },
   async upgrade (client: MigrationUpgradeClient): Promise<void> {
     await createSpace(client)

packages/ui/src/components/ListView.svelte

@@ -15,6 +15,8 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import { mouseAttractor, resizeObserver } from '..'
+  import ListViewItem from './ListViewItem.svelte'
+  import Lazy from './Lazy.svelte'
 
   export let selection: number = 0
   export let count: number
@@ -23,6 +25,7 @@
   export let kind: 'default' | 'thin' = 'default'
   export let colorsSchema: 'default' | 'lumia' = 'default'
   export let updateOnMouse = true
+  export let lazy = false
 
   const refs: HTMLElement[] = []
 
@@ -63,37 +66,70 @@
 
 {#if count}
   <div
-    class="list-container {kind} flex-col flex-grow"
+    class="list-container flex-col flex-grow"
     style:overflow={noScroll ? 'visible' : 'auto'}
     use:resizeObserver={() => {
       dispatch('changeContent')
     }}
   >
     {#each Array(count) as _, row}
-      <slot name="category" item={row} />
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div
-        class="list-item{addClass ? ` ${addClass}` : ''}"
-        class:selection={row === selection}
-        class:lumia={colorsSchema === 'lumia'}
-        class:default={colorsSchema === 'default'}
-        on:mouseover={mouseAttractor(() => {
-          if (updateOnMouse) {
-            onRow(row)
-          }
-        })}
-        on:mouseenter={mouseAttractor(() => {
-          if (updateOnMouse) {
-            onRow(row)
-          }
-        })}
-        on:focus={() => {}}
-        bind:this={refs[row]}
-        on:click={() => dispatch('click', row)}
-      >
-        <slot name="item" item={row} />
-      </div>
+      {#if lazy}
+        <Lazy>
+          <ListViewItem
+            bind:element={refs[row]}
+            {colorsSchema}
+            {addClass}
+            {row}
+            {kind}
+            selected={row === selection}
+            on:click={() => dispatch('click', row)}
+            on:mouseover={mouseAttractor(() => {
+              if (updateOnMouse) {
+                onRow(row)
+              }
+            })}
+            on:mouseenter={mouseAttractor(() => {
+              if (updateOnMouse) {
+                onRow(row)
+              }
+            })}
+          >
+            <svelte:fragment slot="category" let:item={itemIndex}>
+              <slot name="category" item={itemIndex} />
+            </svelte:fragment>
+            <svelte:fragment slot="item" let:item={itemIndex}>
+              <slot name="item" item={itemIndex} />
+            </svelte:fragment>
+          </ListViewItem>
+        </Lazy>
+      {:else}
+        <ListViewItem
+          bind:element={refs[row]}
+          {colorsSchema}
+          {addClass}
+          {row}
+          {kind}
+          selected={row === selection}
+          on:click={() => dispatch('click', row)}
+          on:mouseover={mouseAttractor(() => {
+            if (updateOnMouse) {
+              onRow(row)
+            }
+          })}
+          on:mouseenter={mouseAttractor(() => {
+            if (updateOnMouse) {
+              onRow(row)
+            }
+          })}
+        >
+          <svelte:fragment slot="category" let:item={itemIndex}>
+            <slot name="category" item={itemIndex} />
+          </svelte:fragment>
+          <svelte:fragment slot="item" let:item={itemIndex}>
+            <slot name="item" item={itemIndex} />
+          </svelte:fragment>
+        </ListViewItem>
+      {/if}
     {/each}
   </div>
 {/if}
@@ -103,42 +139,5 @@
     min-width: 0;
     // border-radius: 0.25rem;
     user-select: none;
-
-    .list-item {
-      margin: 0 0.5rem;
-      min-width: 0;
-      border-radius: 0.25rem;
-
-      &.default {
-        &:hover {
-          background-color: var(--theme-popup-divider);
-        }
-      }
-
-      &.lumia {
-        &:hover {
-          background-color: var(--global-ui-highlight-BackgroundColor);
-        }
-      }
-    }
-    &.thin {
-      .list-item {
-        margin: 0 0.375rem;
-        border-radius: 0.375rem;
-      }
-      .list-item + .list-item {
-        margin-top: 0.375rem;
-      }
-    }
-
-    .selection {
-      &.default {
-        background-color: var(--theme-popup-hover);
-      }
-
-      &.lumia {
-        background-color: var(--global-ui-highlight-BackgroundColor);
-      }
-    }
   }
 </style>

packages/ui/src/components/ListViewItem.svelte

@@ -0,0 +1,78 @@
+<!--
+// Copyright © 2024 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">
+  export let row: number = 0
+  export let colorsSchema: 'default' | 'lumia' = 'default'
+  export let addClass: string | undefined = undefined
+  export let selected = false
+  export let element: HTMLElement | undefined = undefined
+  export let kind: 'default' | 'thin' = 'default'
+</script>
+
+<slot name="category" item={row} />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="list-item{addClass ? ` ${addClass}` : ''} {kind}"
+  class:selection={selected}
+  class:lumia={colorsSchema === 'lumia'}
+  class:default={colorsSchema === 'default'}
+  on:mouseover
+  on:mouseenter
+  on:focus={() => {}}
+  bind:this={element}
+  on:click
+>
+  <slot name="item" item={row} />
+</div>
+
+<style lang="scss">
+  .list-item {
+    margin: 0 0.5rem;
+    min-width: 0;
+    border-radius: 0.25rem;
+
+    &.thin {
+      margin: 0 0.375rem;
+      border-radius: 0.375rem;
+
+      &:not(:first-child) {
+        margin-top: 0.375rem;
+      }
+    }
+
+    &.default {
+      &:hover {
+        background-color: var(--theme-popup-divider);
+      }
+    }
+
+    &.lumia {
+      &:hover {
+        background-color: var(--global-ui-highlight-BackgroundColor);
+      }
+    }
+
+    &.selection {
+      &.default {
+        background-color: var(--theme-popup-hover);
+      }
+
+      &.lumia {
+        background-color: var(--global-ui-highlight-BackgroundColor);
+      }
+    }
+  }
+</style>

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

@@ -71,7 +71,14 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="root" bind:this={element} tabindex="0" on:keydown={onKeydown}>
-  <ListView bind:this={list} bind:selection={listSelection} count={notifications.length} noScroll colorsSchema="lumia">
+  <ListView
+    bind:this={list}
+    bind:selection={listSelection}
+    count={notifications.length}
+    noScroll
+    colorsSchema="lumia"
+    lazy={true}
+  >
     <svelte:fragment slot="item" let:item={itemIndex}>
       {@const notification = notifications[itemIndex]}
       <div class="notification gap-2">

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

@@ -96,7 +96,14 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="root" bind:this={element} tabindex="0" on:keydown={onKeydown}>
-  <ListView bind:this={list} bind:selection={listSelection} count={displayData.length} noScroll colorsSchema="lumia">
+  <ListView
+    bind:this={list}
+    bind:selection={listSelection}
+    count={displayData.length}
+    noScroll
+    colorsSchema="lumia"
+    lazy={true}
+  >
     <svelte:fragment slot="item" let:item={itemIndex}>
       {@const contextId = displayData[itemIndex][0]}
       {@const contextNotifications = displayData[itemIndex][1]}

plugins/notification-resources/src/utils.ts

@@ -216,11 +216,12 @@ export async function hasHiddenDocNotifyContext (contexts: DocNotifyContext[]):
 export async function hideDocNotifyContext (notifyContext: DocNotifyContext): Promise<void> {
   const client = getClient()
   await client.update(notifyContext, { hidden: true })
+  await deleteContextNotifications(notifyContext)
 }
 
 export async function unHideDocNotifyContext (notifyContext: DocNotifyContext): Promise<void> {
   const client = getClient()
-  await client.update(notifyContext, { hidden: false })
+  await client.update(notifyContext, { hidden: false, lastViewedTimestamp: Date.now() })
 }
 
 export async function isDocNotifyContextHidden (notifyContext: DocNotifyContext): Promise<boolean> {