From 71107ede08effe3580ce35b0905fb4832ca50ee3 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Thu, 23 May 2024 23:05:30 -0300
Subject: [PATCH 1/2] enhancement: uses VirtualList in notifications

---
 .../components/NotificationsButton.svelte     | 34 +++++++++++++------
 .../components/tiles/NotificationTile.svelte  |  2 +-
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/desktop/views/dashboard/components/NotificationsButton.svelte b/packages/desktop/views/dashboard/components/NotificationsButton.svelte
index 6c9851f600..a30ef2748e 100644
--- a/packages/desktop/views/dashboard/components/NotificationsButton.svelte
+++ b/packages/desktop/views/dashboard/components/NotificationsButton.svelte
@@ -9,6 +9,7 @@
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { activeAccounts } from '@core/profile/stores'
     import { NotificationTile } from '@ui'
+    import VirtualList from '@sveltejs/svelte-virtual-list'
 
     const TABS = [
         { key: 'all', value: 'All' },
@@ -108,6 +109,7 @@
 </button>
 
 <Popover {anchor} event="click" placement="bottom-start" preventClose on:visibilityChange={onVisibilityChange}>
+    {@const notificationHeight = 76}
     <div
         class="flex flex-col justify-center items-center border border-solid border-stroke dark:border-stroke-dark rounded-xl w-80
         shadow-lg overflow-hidden divide-y divide-solid divide-stroke dark:divide-stroke-dark bg-surface dark:bg-surface-dark"
@@ -116,20 +118,24 @@
             <div class="w-full p-4">
                 <Tabs bind:selectedTab tabs={TABS} />
             </div>
-            <ul
-                class="flex flex-col divide-y divide-solid divide-stroke dark:divide-stroke-dark w-full max-h-[75vh] overflow-y-scroll"
+            <virtual-list-wrapper
+                class="w-full"
+                style:--notification-height={notificationHeight}
+                style:--notification-count={notificationsToDisplay.length}
             >
-                {#each notificationsToDisplay as notification (notification.id)}
-                    <li
-                        data-id={notification.id}
-                        data-topic={notification.subscriptionTopic}
-                        data-isread={notification.isRead}
+                <VirtualList items={notificationsToDisplay} let:item itemHeight={notificationHeight}>
+                    <div
+                        data-id={item.id}
+                        data-topic={item.subscriptionTopic}
+                        data-isread={item.isRead}
+                        style:height={notificationHeight + 'px'}
+                        class="border-b border-solid border-stroke dark:border-stroke-dark"
                         use:observe
                     >
-                        <NotificationTile {notification} subscriptionTopic={notification.subscriptionTopic} />
-                    </li>
-                {/each}
-            </ul>
+                        <NotificationTile notification={item} subscriptionTopic={item.subscriptionTopic} />
+                    </div>
+                </VirtualList>
+            </virtual-list-wrapper>
         {:else if !isAtLeast1AccountRegistered}
             <div class="px-3 py-8 w-full flex flex-col gap-4 items-center">
                 <Text type="body2" align="center">{localize('views.dashboard.dappNotifications.notEnabledHint')}</Text>
@@ -145,3 +151,9 @@
         {/if}
     </div>
 </Popover>
+
+<style lang="postcss">
+    virtual-list-wrapper {
+        height: min(75vh, var(--notification-height) * var(--notification-count) * 1px);
+    }
+</style>
diff --git a/packages/shared/src/components/tiles/NotificationTile.svelte b/packages/shared/src/components/tiles/NotificationTile.svelte
index 86f26d4ab3..0b9ac833e9 100644
--- a/packages/shared/src/components/tiles/NotificationTile.svelte
+++ b/packages/shared/src/components/tiles/NotificationTile.svelte
@@ -12,7 +12,7 @@
     $: subscription = notificationsManager.getSubscriptionsForTopic(subscriptionTopic)
 </script>
 
-<Tile class="!rounded-none {notification.isRead ? '' : '!bg-brand/5 !dark:bg-brand-dark/5'}">
+<Tile class="h-full items-center !rounded-none {notification.isRead ? '' : '!bg-brand/5 !dark:bg-brand-dark/5'}">
     <div class="flex justify-between gap-4 w-full">
         <NotificationAvatar {subscription} notificationType={notification.type} />
         <div class="flex-grow flex flex-col items-start">

From f745f88b396c0acde40d56510ea0b2b50341382e Mon Sep 17 00:00:00 2001
From: Mark Nardi <nardimark7@gmail.com>
Date: Fri, 24 May 2024 11:16:02 +0200
Subject: [PATCH 2/2] fix merge issue

---
 .../views/dashboard/components/NotificationsButton.svelte       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/desktop/views/dashboard/components/NotificationsButton.svelte b/packages/desktop/views/dashboard/components/NotificationsButton.svelte
index 461cbee0d8..28fe8a4192 100644
--- a/packages/desktop/views/dashboard/components/NotificationsButton.svelte
+++ b/packages/desktop/views/dashboard/components/NotificationsButton.svelte
@@ -120,6 +120,8 @@
             <div class="w-full p-4">
                 <Tabs bind:selectedTab tabs={TABS} />
             </div>
+        {/if}
+        {#if notificationsToDisplay.length}
             <virtual-list-wrapper
                 class="w-full"
                 style:--notification-height={notificationHeight}