From 4188412b8105e642b1c0ff43b9712858d6d06aea Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 11:48:39 +0200
Subject: [PATCH 01/16] Fix new notifications broken while notification center
 is open

---
 .../src/components/Topbar/Notifications.vue   | 74 +++++++++++--------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index ea8a09be1b8..870729cfb13 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -17,7 +17,7 @@
           v-if="notifications.length"
           class="oc-notifications-mark-all"
           appearance="raw"
-          @click="deleteNotifications(notifications.map((n) => n.notification_id))"
+          @click="deleteNotificationsTask.perform(notifications.map((n) => n.notification_id))"
           ><span v-text="$gettext('Mark all as read')"
         /></oc-button>
       </div>
@@ -75,7 +75,7 @@
   </div>
 </template>
 <script lang="ts">
-import { onMounted, onUnmounted, ref, unref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, unref, watch } from 'vue'
 import isEmpty from 'lodash-es/isEmpty'
 import { useCapabilityStore, useSpacesStore } from '@ownclouders/web-pkg'
 import NotificationBell from './NotificationBell.vue'
@@ -83,8 +83,7 @@ import { Notification } from '../../helpers/notifications'
 import {
   formatDateFromISO,
   formatRelativeDateFromISO,
-  useClientService,
-  useRoute
+  useClientService
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
@@ -102,12 +101,19 @@ export default {
     const capabilityStore = useCapabilityStore()
     const clientService = useClientService()
     const { current: currentLanguage } = useGettext()
-    const route = useRoute()
 
     const notifications = ref<Notification[]>([])
-    const loading = ref(false)
+
     const notificationsInterval = ref()
-    const dropdownOpened = ref(false)
+    const dropdownOpen = ref(false)
+
+    const loading = computed(() => {
+      return (
+        fetchNotificationsTask.isRunning ||
+        deleteNotificationsTask.isRunning ||
+        computeNotificationDataTask.isRunning
+      )
+    })
 
     const formatDate = (date) => {
       return formatDateFromISO(date, currentLanguage)
@@ -171,17 +177,7 @@ export default {
       return null
     }
 
-    const setAdditionalData = () => {
-      loading.value = true
-      for (const notification of unref(notifications)) {
-        notification.computedMessage = getMessage(notification)
-        notification.computedLink = getLink(notification)
-      }
-      loading.value = false
-    }
-
     const fetchNotificationsTask = useTask(function* (signal) {
-      loading.value = true
       try {
         const response = yield clientService.httpAuthenticated.get(
           'ocs/v2.php/apps/notifications/api/v1/notifications'
@@ -198,18 +194,12 @@ export default {
           data?.sort((a, b) => (new Date(b.datetime) as any) - (new Date(a.datetime) as any)) || []
       } catch (e) {
         console.error(e)
-      } finally {
-        if (unref(dropdownOpened)) {
-          setAdditionalData()
-        }
-        loading.value = false
       }
     }).restartable()
 
-    const deleteNotifications = async (ids: string[]) => {
-      loading.value = true
+    const deleteNotificationsTask = useTask(function* (signal, ids) {
       try {
-        await clientService.httpAuthenticated.delete(
+        yield clientService.httpAuthenticated.delete(
           'ocs/v2.php/apps/notifications/api/v1/notifications',
           { data: { ids } }
         )
@@ -217,9 +207,18 @@ export default {
         console.error(e)
       } finally {
         notifications.value = unref(notifications).filter((n) => !ids.includes(n.notification_id))
-        loading.value = false
       }
-    }
+    }).restartable()
+
+    const computeNotificationDataTask = useTask(function* (signal, notifications) {
+      for (const notification of unref(notifications)) {
+        if (!notification.computed) {
+          notification.computedMessage = getMessage(notification)
+          notification.computedLink = getLink(notification)
+          notification.computed = true
+        }
+      }
+    }).restartable()
 
     const onSSENotificationEvent = (event) => {
       try {
@@ -234,11 +233,10 @@ export default {
     }
 
     const hideDrop = () => {
-      dropdownOpened.value = false
+      dropdownOpen.value = false
     }
     const showDrop = () => {
-      dropdownOpened.value = true
-      setAdditionalData()
+      dropdownOpen.value = true
     }
 
     onMounted(() => {
@@ -266,12 +264,24 @@ export default {
       }
     })
 
+    watch(
+      [notifications, dropdownOpen],
+      () => {
+        if (!unref(dropdownOpen)) {
+          return false
+        }
+
+        computeNotificationDataTask.perform(notifications)
+      },
+      { immediate: true }
+    )
+
     return {
       notifications,
       fetchNotificationsTask,
       loading,
-      dropdownOpened,
-      deleteNotifications,
+      dropdownOpened: dropdownOpen,
+      deleteNotificationsTask,
       formatDate,
       formatDateRelative,
       getMessage,

From c4afe842a486513570831b2d46c1a66c4500993d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 11:52:51 +0200
Subject: [PATCH 02/16] Add changelog item

---
 ...-notifications-broken-while-notification-center-is-open | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 changelog/unreleased/bugfix-incoming-notifications-broken-while-notification-center-is-open

diff --git a/changelog/unreleased/bugfix-incoming-notifications-broken-while-notification-center-is-open b/changelog/unreleased/bugfix-incoming-notifications-broken-while-notification-center-is-open
new file mode 100644
index 00000000000..fd3e539a651
--- /dev/null
+++ b/changelog/unreleased/bugfix-incoming-notifications-broken-while-notification-center-is-open
@@ -0,0 +1,7 @@
+Bugfix: Incoming notifications broken while notification center is open
+
+We've fixed a bug where the visual representation of new incoming notifications were broken,
+while the notification center was opened.
+
+https://github.com/owncloud/web/pull/10760
+https://github.com/owncloud/web/issues/10602

From 778623f5e583f6b0508647e9e628bbbb0290834c Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 12:42:36 +0200
Subject: [PATCH 03/16] Fix unit tests

---
 .../src/components/Topbar/Notifications.vue   |  7 ++--
 .../components/Topbar/Notifications.spec.ts   | 40 ++++++++++++++-----
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 870729cfb13..74fd8f6159e 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -212,10 +212,11 @@ export default {
 
     const computeNotificationDataTask = useTask(function* (signal, notifications) {
       for (const notification of unref(notifications)) {
-        if (!notification.computed) {
+        if (!notification.computedMessage) {
           notification.computedMessage = getMessage(notification)
+        }
+        if (!notification.computedLink) {
           notification.computedLink = getLink(notification)
-          notification.computed = true
         }
       }
     }).restartable()
@@ -270,7 +271,6 @@ export default {
         if (!unref(dropdownOpen)) {
           return false
         }
-
         computeNotificationDataTask.perform(notifications)
       },
       { immediate: true }
@@ -282,6 +282,7 @@ export default {
       loading,
       dropdownOpened: dropdownOpen,
       deleteNotificationsTask,
+      computeNotificationDataTask,
       formatDate,
       formatDateRelative,
       getMessage,
diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index ecaabc23896..a8795175c77 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -18,9 +18,14 @@ const selectors = {
   notificationLink: '.oc-notifications-link'
 }
 
+vi.mock('vue-concurrency', async (importOriginal) => ({
+  ...(await importOriginal<any>())
+}))
+
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  useServerSentEvents: vi.fn()
+  queryItemAsString: vi.fn(),
+  useAppDefaults: vi.fn()
 }))
 
 describe('Notification component', () => {
@@ -31,7 +36,13 @@ describe('Notification component', () => {
     expect(wrapper.find(selectors.markAll).exists()).toBeFalsy()
   })
   it('renders a set of notifications', async () => {
-    const notifications = [mock<Notification>({ messageRich: undefined })]
+    const notifications = [
+      mock<Notification>({
+        messageRich: undefined,
+        computedMessage: undefined,
+        computedLink: undefined
+      })
+    ]
     const { wrapper } = getWrapper({ notifications })
     await wrapper.vm.fetchNotificationsTask.perform()
     await wrapper.vm.fetchNotificationsTask.last
@@ -41,9 +52,6 @@ describe('Notification component', () => {
   it('renders the loading state', async () => {
     const notifications = [mock<Notification>({ messageRich: undefined })]
     const { wrapper } = getWrapper({ notifications })
-    await wrapper.vm.fetchNotificationsTask.perform()
-    await wrapper.vm.fetchNotificationsTask.last
-    wrapper.vm.loading = true
     await wrapper.vm.$nextTick()
     expect(wrapper.find(selectors.notificationsLoading).exists()).toBeTruthy()
   })
@@ -89,7 +97,9 @@ describe('Notification component', () => {
     it('displays if no message given', async () => {
       const notification = mock<Notification>({
         messageRich: undefined,
-        message: undefined
+        message: undefined,
+        computedMessage: undefined,
+        computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
       await wrapper.vm.fetchNotificationsTask.perform()
@@ -101,7 +111,9 @@ describe('Notification component', () => {
     it('displays simple message if messageRich not given', async () => {
       const notification = mock<Notification>({
         messageRich: undefined,
-        message: 'some message'
+        message: 'some message',
+        computedMessage: undefined,
+        computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
       await wrapper.vm.fetchNotificationsTask.perform()
@@ -116,7 +128,9 @@ describe('Notification component', () => {
         messageRichParameters: {
           user: { displayname: 'Albert Einstein' },
           resource: { name: 'someFile.txt' }
-        }
+        },
+        computedMessage: undefined,
+        computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
       await wrapper.vm.fetchNotificationsTask.perform()
@@ -132,6 +146,8 @@ describe('Notification component', () => {
     it('displays if given directly', async () => {
       const notification = mock<Notification>({
         messageRich: undefined,
+        computedMessage: undefined,
+        computedLink: undefined,
         link: 'http://some-link.com'
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
@@ -148,7 +164,9 @@ describe('Notification component', () => {
             user: { displayname: 'Albert Einstein' },
             resource: { name: 'someFile.txt' },
             share: { id: '1' }
-          }
+          },
+          computedMessage: undefined,
+          computedLink: undefined
         })
         const { wrapper } = getWrapper({ notifications: [notification] })
         await wrapper.vm.fetchNotificationsTask.perform()
@@ -177,7 +195,9 @@ describe('Notification component', () => {
           messageRichParameters: {
             user: { displayname: 'Albert Einstein' },
             space: { name: 'someFile.txt', id: `${spaceMock.fileId}!2` }
-          }
+          },
+          computedMessage: undefined,
+          computedLink: undefined
         })
         const { wrapper } = getWrapper({ notifications: [notification], spaces: [spaceMock] })
         await wrapper.vm.fetchNotificationsTask.perform()

From d95b0e8e55ca758c4fe8fe89768755ad80626a65 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 13:47:15 +0200
Subject: [PATCH 04/16] Satisfy useTask generator function

---
 .../src/components/Topbar/Notifications.vue        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 74fd8f6159e..7e8b476334c 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -212,11 +212,13 @@ export default {
 
     const computeNotificationDataTask = useTask(function* (signal, notifications) {
       for (const notification of unref(notifications)) {
-        if (!notification.computedMessage) {
-          notification.computedMessage = getMessage(notification)
+        if (!notification.hasOwnProperty('computedMessage')) {
+          notification.computedMessage = yield new Promise((resolve) =>
+            resolve(getMessage(notification))
+          )
         }
-        if (!notification.computedLink) {
-          notification.computedLink = getLink(notification)
+        if (!notification.hasOwnProperty('computedLink')) {
+          notification.computedLink = yield new Promise((resolve) => resolve(getLink(notification)))
         }
       }
     }).restartable()
@@ -267,11 +269,11 @@ export default {
 
     watch(
       [notifications, dropdownOpen],
-      () => {
+      async () => {
         if (!unref(dropdownOpen)) {
           return false
         }
-        computeNotificationDataTask.perform(notifications)
+        await computeNotificationDataTask.perform(notifications)
       },
       { immediate: true }
     )

From 23d1abd8ca3135cea9c07f6a73bb3f636f45909d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 14:27:13 +0200
Subject: [PATCH 05/16] Don't execute perform automatically

---
 .../src/components/Topbar/Notifications.vue   |  8 +++----
 .../components/Topbar/Notifications.spec.ts   | 22 ++++++++-----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 7e8b476334c..6fc402a1ff0 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -212,12 +212,12 @@ export default {
 
     const computeNotificationDataTask = useTask(function* (signal, notifications) {
       for (const notification of unref(notifications)) {
-        if (!notification.hasOwnProperty('computedMessage')) {
+        if (!notification.computedMessage) {
           notification.computedMessage = yield new Promise((resolve) =>
             resolve(getMessage(notification))
           )
         }
-        if (!notification.hasOwnProperty('computedLink')) {
+        if (!notification.computedLink) {
           notification.computedLink = yield new Promise((resolve) => resolve(getLink(notification)))
         }
       }
@@ -269,11 +269,11 @@ export default {
 
     watch(
       [notifications, dropdownOpen],
-      async () => {
+      () => {
         if (!unref(dropdownOpen)) {
           return false
         }
-        await computeNotificationDataTask.perform(notifications)
+        computeNotificationDataTask.perform(notifications)
       },
       { immediate: true }
     )
diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index a8795175c77..ec43a01035e 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -44,7 +44,6 @@ describe('Notification component', () => {
       })
     ]
     const { wrapper } = getWrapper({ notifications })
-    await wrapper.vm.fetchNotificationsTask.perform()
     await wrapper.vm.fetchNotificationsTask.last
     expect(wrapper.find(selectors.noNewNotifications).exists()).toBeFalsy()
     expect(wrapper.findAll(selectors.notificationItem).length).toBe(notifications.length)
@@ -58,7 +57,6 @@ describe('Notification component', () => {
   it('marks all notifications as read', async () => {
     const notifications = [mock<Notification>({ messageRich: undefined })]
     const { wrapper, mocks } = getWrapper({ notifications })
-    await wrapper.vm.fetchNotificationsTask.perform()
     await wrapper.vm.fetchNotificationsTask.last
     await wrapper.find(selectors.markAll).trigger('click')
     await wrapper.vm.$nextTick()
@@ -72,7 +70,6 @@ describe('Notification component', () => {
         user: 'einstein'
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       const avatarImageStub = wrapper.findComponent<any>(selectors.avatarImageStub)
       expect(avatarImageStub.attributes('userid')).toEqual(notification.user)
@@ -86,7 +83,6 @@ describe('Notification component', () => {
         messageRichParameters: { user: { displayname, name } }
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       const avatarImageStub = wrapper.findComponent<any>(selectors.avatarImageStub)
       expect(avatarImageStub.attributes('userid')).toEqual(name)
@@ -102,7 +98,6 @@ describe('Notification component', () => {
         computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       expect(wrapper.find(selectors.notificationSubject).exists()).toBeTruthy()
     })
@@ -116,9 +111,9 @@ describe('Notification component', () => {
         computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      await wrapper.vm.fetchNotificationsTask.perform()
-      await wrapper.vm.fetchNotificationsTask.last
       wrapper.vm.showDrop()
+      await wrapper.vm.fetchNotificationsTask.last
+      await wrapper.vm.computeNotificationDataTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.notificationMessage).text()).toEqual(notification.message)
     })
@@ -133,9 +128,9 @@ describe('Notification component', () => {
         computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      await wrapper.vm.fetchNotificationsTask.perform()
-      await wrapper.vm.fetchNotificationsTask.last
       wrapper.vm.showDrop()
+      await wrapper.vm.fetchNotificationsTask.last
+      await wrapper.vm.computeNotificationDataTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.notificationMessage).text()).toEqual(
         'Albert Einstein shared someFile.txt with you'
@@ -151,7 +146,6 @@ describe('Notification component', () => {
         link: 'http://some-link.com'
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       expect(wrapper.find(selectors.notificationLink).exists()).toBeTruthy()
     })
@@ -169,10 +163,12 @@ describe('Notification component', () => {
           computedLink: undefined
         })
         const { wrapper } = getWrapper({ notifications: [notification] })
-        await wrapper.vm.fetchNotificationsTask.perform()
         await wrapper.vm.fetchNotificationsTask.last
         wrapper.vm.showDrop()
+        await wrapper.vm.fetchNotificationsTask.last
+        await wrapper.vm.computeNotificationDataTask.last
         await wrapper.vm.$nextTick()
+
         const routerLink = wrapper.findComponent<typeof RouterLink>(
           `${selectors.notificationItem} router-link-stub`
         )
@@ -200,9 +196,9 @@ describe('Notification component', () => {
           computedLink: undefined
         })
         const { wrapper } = getWrapper({ notifications: [notification], spaces: [spaceMock] })
-        await wrapper.vm.fetchNotificationsTask.perform()
-        await wrapper.vm.fetchNotificationsTask.last
         wrapper.vm.showDrop()
+        await wrapper.vm.fetchNotificationsTask.last
+        await wrapper.vm.computeNotificationDataTask.last
         await wrapper.vm.$nextTick()
         const routerLink = wrapper.findComponent<typeof RouterLink>(
           `${selectors.notificationItem} router-link-stub`

From bc060effe3c01e931e140bb70025fe696d6ae0a1 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 14:28:41 +0200
Subject: [PATCH 06/16] Clean up

---
 .../tests/unit/components/Topbar/Notifications.spec.ts        | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index ec43a01035e..4a5c6f174dc 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -18,10 +18,6 @@ const selectors = {
   notificationLink: '.oc-notifications-link'
 }
 
-vi.mock('vue-concurrency', async (importOriginal) => ({
-  ...(await importOriginal<any>())
-}))
-
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
   queryItemAsString: vi.fn(),

From 3cbe383e0921a6710cd73d8fa305a7358dc624ef Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 14:50:50 +0200
Subject: [PATCH 07/16] Rm new line

---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 6fc402a1ff0..86cda0e7cae 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -103,7 +103,6 @@ export default {
     const { current: currentLanguage } = useGettext()
 
     const notifications = ref<Notification[]>([])
-
     const notificationsInterval = ref()
     const dropdownOpen = ref(false)
 

From 6379aacb341d6b6f7938bf1410f56a701c62148d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 15:54:42 +0200
Subject: [PATCH 08/16] Fix duplicate

---
 .../tests/unit/components/Topbar/Notifications.spec.ts           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index 4a5c6f174dc..4c818dc6a9a 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -159,7 +159,6 @@ describe('Notification component', () => {
           computedLink: undefined
         })
         const { wrapper } = getWrapper({ notifications: [notification] })
-        await wrapper.vm.fetchNotificationsTask.last
         wrapper.vm.showDrop()
         await wrapper.vm.fetchNotificationsTask.last
         await wrapper.vm.computeNotificationDataTask.last

From 5f1235b8575dc7d27f0a1f2bdfbf9a4f77263fb5 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 10 Apr 2024 16:08:57 +0200
Subject: [PATCH 09/16] Rm trivial code

---
 .../web-runtime/src/components/Topbar/Notifications.vue     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 86cda0e7cae..b77b82dba12 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -212,12 +212,10 @@ export default {
     const computeNotificationDataTask = useTask(function* (signal, notifications) {
       for (const notification of unref(notifications)) {
         if (!notification.computedMessage) {
-          notification.computedMessage = yield new Promise((resolve) =>
-            resolve(getMessage(notification))
-          )
+          notification.computedMessage = yield Promise.resolve(getMessage(notification))
         }
         if (!notification.computedLink) {
-          notification.computedLink = yield new Promise((resolve) => resolve(getLink(notification)))
+          notification.computedLink = yield Promise.resolve(getLink(notification))
         }
       }
     }).restartable()

From b4867465a66b94fd178644682524d792c8670dd4 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 11 Apr 2024 10:00:51 +0200
Subject: [PATCH 10/16] Don't use yield at all

---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index b77b82dba12..adadbc657ae 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -212,10 +212,10 @@ export default {
     const computeNotificationDataTask = useTask(function* (signal, notifications) {
       for (const notification of unref(notifications)) {
         if (!notification.computedMessage) {
-          notification.computedMessage = yield Promise.resolve(getMessage(notification))
+          notification.computedMessage = yield getMessage(notification)
         }
         if (!notification.computedLink) {
-          notification.computedLink = yield Promise.resolve(getLink(notification))
+          notification.computedLink = yield getLink(notification)
         }
       }
     }).restartable()

From 4e2388042528aa7327d74f08708f336f4e59a5f3 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 11 Apr 2024 10:35:07 +0200
Subject: [PATCH 11/16] Refactor with domme <3

---
 packages/web-client/src/helpers/call.ts       |  4 +-
 .../src/components/Topbar/Notifications.vue   | 41 +++++--------------
 2 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/packages/web-client/src/helpers/call.ts b/packages/web-client/src/helpers/call.ts
index 9d6fc0c96e0..3498251b426 100644
--- a/packages/web-client/src/helpers/call.ts
+++ b/packages/web-client/src/helpers/call.ts
@@ -1,3 +1,3 @@
-export const call = function* <T>(p: Promise<T>): Generator<Promise<T>, T, T> {
-  return yield p
+export const call = function* <T>(p: T | Promise<T>): Generator<Promise<T>, T, T> {
+  return yield Promise.resolve(p)
 }
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index adadbc657ae..37407554be9 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -75,9 +75,9 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, onMounted, onUnmounted, ref, unref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import isEmpty from 'lodash-es/isEmpty'
-import { useCapabilityStore, useSpacesStore } from '@ownclouders/web-pkg'
+import { useCapabilityStore, useSpacesStore, createFileRouteOptions } from '@ownclouders/web-pkg'
 import NotificationBell from './NotificationBell.vue'
 import { Notification } from '../../helpers/notifications'
 import {
@@ -87,7 +87,6 @@ import {
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { createFileRouteOptions } from '@ownclouders/web-pkg'
 import { MESSAGE_TYPE } from '@ownclouders/web-client/src/sse'
 
 const POLLING_INTERVAL = 30000
@@ -107,11 +106,7 @@ export default {
     const dropdownOpen = ref(false)
 
     const loading = computed(() => {
-      return (
-        fetchNotificationsTask.isRunning ||
-        deleteNotificationsTask.isRunning ||
-        computeNotificationDataTask.isRunning
-      )
+      return fetchNotificationsTask.isRunning || deleteNotificationsTask.isRunning
     })
 
     const formatDate = (date) => {
@@ -127,7 +122,7 @@ export default {
       { name: 'space', labelAttribute: 'name' },
       { name: 'virus', labelAttribute: 'name' }
     ]
-    const getMessage = ({ message, messageRich, messageRichParameters }: Notification) => {
+    const getMessage = ({ message, messageRich, messageRichParameters }: Notification): string => {
       if (messageRich && !isEmpty(messageRichParameters)) {
         let interpolatedMessage = messageRich
         for (const param of messageParameters) {
@@ -191,6 +186,7 @@ export default {
         } = yield response.data
         notifications.value =
           data?.sort((a, b) => (new Date(b.datetime) as any) - (new Date(a.datetime) as any)) || []
+        unref(notifications).forEach((notification) => setAdditionalNotificationData(notification))
       } catch (e) {
         console.error(e)
       }
@@ -209,16 +205,10 @@ export default {
       }
     }).restartable()
 
-    const computeNotificationDataTask = useTask(function* (signal, notifications) {
-      for (const notification of unref(notifications)) {
-        if (!notification.computedMessage) {
-          notification.computedMessage = yield getMessage(notification)
-        }
-        if (!notification.computedLink) {
-          notification.computedLink = yield getLink(notification)
-        }
-      }
-    }).restartable()
+    const setAdditionalNotificationData = (notification: Notification) => {
+      notification.computedMessage = getMessage(notification)
+      notification.computedLink = getLink(notification)
+    }
 
     const onSSENotificationEvent = (event) => {
       try {
@@ -226,6 +216,7 @@ export default {
         if (!notification || !notification.notification_id) {
           return
         }
+        setAdditionalNotificationData(notification)
         notifications.value = [notification, ...unref(notifications)]
       } catch (_) {
         console.error('Unable to parse sse notification data')
@@ -264,24 +255,12 @@ export default {
       }
     })
 
-    watch(
-      [notifications, dropdownOpen],
-      () => {
-        if (!unref(dropdownOpen)) {
-          return false
-        }
-        computeNotificationDataTask.perform(notifications)
-      },
-      { immediate: true }
-    )
-
     return {
       notifications,
       fetchNotificationsTask,
       loading,
       dropdownOpened: dropdownOpen,
       deleteNotificationsTask,
-      computeNotificationDataTask,
       formatDate,
       formatDateRelative,
       getMessage,

From 2045e8981496ac01ab36f9471884dbdd3e4770c7 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 11 Apr 2024 10:37:47 +0200
Subject: [PATCH 12/16] Fix unit tests

---
 packages/web-runtime/src/components/Topbar/Notifications.vue  | 1 -
 .../tests/unit/components/Topbar/Notifications.spec.ts        | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 37407554be9..ccd438ac4bb 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -259,7 +259,6 @@ export default {
       notifications,
       fetchNotificationsTask,
       loading,
-      dropdownOpened: dropdownOpen,
       deleteNotificationsTask,
       formatDate,
       formatDateRelative,
diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index 4c818dc6a9a..67586bc769b 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -109,7 +109,6 @@ describe('Notification component', () => {
       const { wrapper } = getWrapper({ notifications: [notification] })
       wrapper.vm.showDrop()
       await wrapper.vm.fetchNotificationsTask.last
-      await wrapper.vm.computeNotificationDataTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.notificationMessage).text()).toEqual(notification.message)
     })
@@ -126,7 +125,6 @@ describe('Notification component', () => {
       const { wrapper } = getWrapper({ notifications: [notification] })
       wrapper.vm.showDrop()
       await wrapper.vm.fetchNotificationsTask.last
-      await wrapper.vm.computeNotificationDataTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.notificationMessage).text()).toEqual(
         'Albert Einstein shared someFile.txt with you'
@@ -161,7 +159,6 @@ describe('Notification component', () => {
         const { wrapper } = getWrapper({ notifications: [notification] })
         wrapper.vm.showDrop()
         await wrapper.vm.fetchNotificationsTask.last
-        await wrapper.vm.computeNotificationDataTask.last
         await wrapper.vm.$nextTick()
 
         const routerLink = wrapper.findComponent<typeof RouterLink>(
@@ -193,7 +190,6 @@ describe('Notification component', () => {
         const { wrapper } = getWrapper({ notifications: [notification], spaces: [spaceMock] })
         wrapper.vm.showDrop()
         await wrapper.vm.fetchNotificationsTask.last
-        await wrapper.vm.computeNotificationDataTask.last
         await wrapper.vm.$nextTick()
         const routerLink = wrapper.findComponent<typeof RouterLink>(
           `${selectors.notificationItem} router-link-stub`

From fc4625eacb1f2da1fdc812476ad0dd8eb04b75e9 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 11 Apr 2024 10:49:55 +0200
Subject: [PATCH 13/16] Remove dd open unused code

---
 .../src/components/Topbar/Notifications.vue   | 298 +++++++++---------
 1 file changed, 145 insertions(+), 153 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index ccd438ac4bb..aedefd2573c 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -8,8 +8,6 @@
       mode="click"
       :options="{ pos: 'bottom-right', delayHide: 0 }"
       class="oc-overflow-auto"
-      @hide-drop="hideDrop"
-      @show-drop="showDrop"
     >
       <div class="oc-flex oc-flex-between oc-flex-middle oc-mb-s">
         <span class="oc-text-bold oc-text-large oc-m-rm" v-text="$gettext('Notifications')" />
@@ -75,19 +73,19 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
+import {computed, onMounted, onUnmounted, ref, unref} from 'vue'
 import isEmpty from 'lodash-es/isEmpty'
-import { useCapabilityStore, useSpacesStore, createFileRouteOptions } from '@ownclouders/web-pkg'
+import {useCapabilityStore, useSpacesStore, createFileRouteOptions} from '@ownclouders/web-pkg'
 import NotificationBell from './NotificationBell.vue'
-import { Notification } from '../../helpers/notifications'
+import {Notification} from '../../helpers/notifications'
 import {
   formatDateFromISO,
   formatRelativeDateFromISO,
   useClientService
 } from '@ownclouders/web-pkg'
-import { useGettext } from 'vue3-gettext'
-import { useTask } from 'vue-concurrency'
-import { MESSAGE_TYPE } from '@ownclouders/web-client/src/sse'
+import {useGettext} from 'vue3-gettext'
+import {useTask} from 'vue-concurrency'
+import {MESSAGE_TYPE} from '@ownclouders/web-client/src/sse'
 
 const POLLING_INTERVAL = 30000
 
@@ -96,179 +94,173 @@ export default {
     NotificationBell
   },
   setup() {
-    const spacesStore = useSpacesStore()
-    const capabilityStore = useCapabilityStore()
-    const clientService = useClientService()
-    const { current: currentLanguage } = useGettext()
+    setup()
+    {
+      const spacesStore = useSpacesStore()
+      const capabilityStore = useCapabilityStore()
+      const clientService = useClientService()
+      const {current: currentLanguage} = useGettext()
 
-    const notifications = ref<Notification[]>([])
-    const notificationsInterval = ref()
-    const dropdownOpen = ref(false)
+      const notifications = ref<Notification[]>([])
+      const notificationsInterval = ref()
 
-    const loading = computed(() => {
-      return fetchNotificationsTask.isRunning || deleteNotificationsTask.isRunning
-    })
+      const loading = computed(() => {
+        return fetchNotificationsTask.isRunning || deleteNotificationsTask.isRunning
+      })
 
-    const formatDate = (date) => {
-      return formatDateFromISO(date, currentLanguage)
-    }
-    const formatDateRelative = (date) => {
-      return formatRelativeDateFromISO(date, currentLanguage)
-    }
+      const formatDate = (date) => {
+        return formatDateFromISO(date, currentLanguage)
+      }
+      const formatDateRelative = (date) => {
+        return formatRelativeDateFromISO(date, currentLanguage)
+      }
 
-    const messageParameters = [
-      { name: 'user', labelAttribute: 'displayname' },
-      { name: 'resource', labelAttribute: 'name' },
-      { name: 'space', labelAttribute: 'name' },
-      { name: 'virus', labelAttribute: 'name' }
-    ]
-    const getMessage = ({ message, messageRich, messageRichParameters }: Notification): string => {
-      if (messageRich && !isEmpty(messageRichParameters)) {
-        let interpolatedMessage = messageRich
-        for (const param of messageParameters) {
-          if (interpolatedMessage.includes(`{${param.name}}`)) {
-            const richParam = messageRichParameters[param.name] ?? undefined
-            if (!richParam) {
-              return message
+      const messageParameters = [
+        {name: 'user', labelAttribute: 'displayname'},
+        {name: 'resource', labelAttribute: 'name'},
+        {name: 'space', labelAttribute: 'name'},
+        {name: 'virus', labelAttribute: 'name'}
+      ]
+      const getMessage = ({message, messageRich, messageRichParameters}: Notification): string => {
+        if (messageRich && !isEmpty(messageRichParameters)) {
+          let interpolatedMessage = messageRich
+          for (const param of messageParameters) {
+            if (interpolatedMessage.includes(`{${param.name}}`)) {
+              const richParam = messageRichParameters[param.name] ?? undefined
+              if (!richParam) {
+                return message
+              }
+              const label = richParam[param.labelAttribute] ?? undefined
+              if (!label) {
+                return message
+              }
+              interpolatedMessage = interpolatedMessage.replace(
+                  `{${param.name}}`,
+                  `<strong>${label}</strong>`
+              )
             }
-            const label = richParam[param.labelAttribute] ?? undefined
-            if (!label) {
-              return message
-            }
-            interpolatedMessage = interpolatedMessage.replace(
-              `{${param.name}}`,
-              `<strong>${label}</strong>`
-            )
           }
+          return interpolatedMessage
         }
-        return interpolatedMessage
-      }
-      return message
-    }
-    const getLink = ({ messageRichParameters, object_type }: Notification) => {
-      if (!messageRichParameters) {
-        return null
+        return message
       }
-      if (object_type === 'share') {
-        return {
-          name: 'files-shares-with-me',
-          ...(!!messageRichParameters?.share?.id && {
-            query: { scrollTo: messageRichParameters.share.id }
-          })
+      const getLink = ({messageRichParameters, object_type}: Notification) => {
+        if (!messageRichParameters) {
+          return null
         }
-      }
-      if (object_type === 'storagespace' && messageRichParameters?.space?.id) {
-        const space = spacesStore.spaces.find(
-          (s) => s.fileId === messageRichParameters?.space?.id.split('!')[0] && !s.disabled
-        )
-        if (space) {
+        if (object_type === 'share') {
           return {
-            name: 'files-spaces-generic',
-            ...createFileRouteOptions(space, { path: '', fileId: space.fileId })
+            name: 'files-shares-with-me',
+            ...(!!messageRichParameters?.share?.id && {
+              query: {scrollTo: messageRichParameters.share.id}
+            })
+          }
+        }
+        if (object_type === 'storagespace' && messageRichParameters?.space?.id) {
+          const space = spacesStore.spaces.find(
+              (s) => s.fileId === messageRichParameters?.space?.id.split('!')[0] && !s.disabled
+          )
+          if (space) {
+            return {
+              name: 'files-spaces-generic',
+              ...createFileRouteOptions(space, {path: '', fileId: space.fileId})
+            }
           }
         }
+        return null
       }
-      return null
-    }
 
-    const fetchNotificationsTask = useTask(function* (signal) {
-      try {
-        const response = yield clientService.httpAuthenticated.get(
-          'ocs/v2.php/apps/notifications/api/v1/notifications'
-        )
+      const fetchNotificationsTask = useTask(function* (signal) {
+        try {
+          const response = yield clientService.httpAuthenticated.get(
+              'ocs/v2.php/apps/notifications/api/v1/notifications'
+          )
 
-        if (response.headers.get('Content-Length') === '0') {
-          return
+          if (response.headers.get('Content-Length') === '0') {
+            return
+          }
+
+          const {
+            ocs: {data = []}
+          } = yield response.data
+          notifications.value =
+              data?.sort((a, b) => (new Date(b.datetime) as any) - (new Date(a.datetime) as any)) || []
+          unref(notifications).forEach((notification) => setAdditionalNotificationData(notification))
+        } catch (e) {
+          console.error(e)
         }
+      }).restartable()
 
-        const {
-          ocs: { data = [] }
-        } = yield response.data
-        notifications.value =
-          data?.sort((a, b) => (new Date(b.datetime) as any) - (new Date(a.datetime) as any)) || []
-        unref(notifications).forEach((notification) => setAdditionalNotificationData(notification))
-      } catch (e) {
-        console.error(e)
-      }
-    }).restartable()
+      const deleteNotificationsTask = useTask(function* (signal, ids) {
+        try {
+          yield clientService.httpAuthenticated.delete(
+              'ocs/v2.php/apps/notifications/api/v1/notifications',
+              {data: {ids}}
+          )
+        } catch (e) {
+          console.error(e)
+        } finally {
+          notifications.value = unref(notifications).filter((n) => !ids.includes(n.notification_id))
+        }
+      }).restartable()
 
-    const deleteNotificationsTask = useTask(function* (signal, ids) {
-      try {
-        yield clientService.httpAuthenticated.delete(
-          'ocs/v2.php/apps/notifications/api/v1/notifications',
-          { data: { ids } }
-        )
-      } catch (e) {
-        console.error(e)
-      } finally {
-        notifications.value = unref(notifications).filter((n) => !ids.includes(n.notification_id))
+      const setAdditionalNotificationData = (notification: Notification) => {
+        notification.computedMessage = getMessage(notification)
+        notification.computedLink = getLink(notification)
       }
-    }).restartable()
 
-    const setAdditionalNotificationData = (notification: Notification) => {
-      notification.computedMessage = getMessage(notification)
-      notification.computedLink = getLink(notification)
-    }
-
-    const onSSENotificationEvent = (event) => {
-      try {
-        const notification = JSON.parse(event.data) as Notification
-        if (!notification || !notification.notification_id) {
-          return
+      const onSSENotificationEvent = (event) => {
+        try {
+          const notification = JSON.parse(event.data) as Notification
+          if (!notification || !notification.notification_id) {
+            return
+          }
+          setAdditionalNotificationData(notification)
+          notifications.value = [notification, ...unref(notifications)]
+        } catch (_) {
+          console.error('Unable to parse sse notification data')
         }
-        setAdditionalNotificationData(notification)
-        notifications.value = [notification, ...unref(notifications)]
-      } catch (_) {
-        console.error('Unable to parse sse notification data')
       }
-    }
 
-    const hideDrop = () => {
-      dropdownOpen.value = false
-    }
-    const showDrop = () => {
-      dropdownOpen.value = true
-    }
+      onMounted(() => {
+        fetchNotificationsTask.perform()
+        if (unref(capabilityStore.supportSSE)) {
+          clientService.sseAuthenticated.addEventListener(
+              MESSAGE_TYPE.NOTIFICATION,
+              onSSENotificationEvent
+          )
+        } else {
+          notificationsInterval.value = setInterval(() => {
+            fetchNotificationsTask.perform()
+          }, POLLING_INTERVAL)
+        }
+      })
 
-    onMounted(() => {
-      fetchNotificationsTask.perform()
-      if (unref(capabilityStore.supportSSE)) {
-        clientService.sseAuthenticated.addEventListener(
-          MESSAGE_TYPE.NOTIFICATION,
-          onSSENotificationEvent
-        )
-      } else {
-        notificationsInterval.value = setInterval(() => {
-          fetchNotificationsTask.perform()
-        }, POLLING_INTERVAL)
-      }
-    })
+      onUnmounted(() => {
+        if (unref(capabilityStore.supportSSE)) {
+          clientService.sseAuthenticated.removeEventListener(
+              MESSAGE_TYPE.NOTIFICATION,
+              onSSENotificationEvent
+          )
+        } else {
+          clearInterval(unref(notificationsInterval))
+        }
+      })
 
-    onUnmounted(() => {
-      if (unref(capabilityStore.supportSSE)) {
-        clientService.sseAuthenticated.removeEventListener(
-          MESSAGE_TYPE.NOTIFICATION,
-          onSSENotificationEvent
-        )
-      } else {
-        clearInterval(unref(notificationsInterval))
+      return {
+        notifications,
+        fetchNotificationsTask,
+        loading,
+        deleteNotificationsTask,
+        formatDate,
+        formatDateRelative,
+        getMessage,
+        getLink,
+        hideDrop,
+        showDrop
       }
-    })
-
-    return {
-      notifications,
-      fetchNotificationsTask,
-      loading,
-      deleteNotificationsTask,
-      formatDate,
-      formatDateRelative,
-      getMessage,
-      getLink,
-      hideDrop,
-      showDrop
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>

From 76863e6f7cf8a0ea061d2aaecf5e052f2314f477 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 11 Apr 2024 10:53:53 +0200
Subject: [PATCH 14/16] Remove dd open unused code

---
 .../src/components/Topbar/Notifications.vue   | 288 +++++++++---------
 .../components/Topbar/Notifications.spec.ts   |   4 -
 2 files changed, 142 insertions(+), 150 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index aedefd2573c..c059d03f86d 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -73,19 +73,19 @@
   </div>
 </template>
 <script lang="ts">
-import {computed, onMounted, onUnmounted, ref, unref} from 'vue'
+import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import isEmpty from 'lodash-es/isEmpty'
-import {useCapabilityStore, useSpacesStore, createFileRouteOptions} from '@ownclouders/web-pkg'
+import { useCapabilityStore, useSpacesStore, createFileRouteOptions } from '@ownclouders/web-pkg'
 import NotificationBell from './NotificationBell.vue'
-import {Notification} from '../../helpers/notifications'
+import { Notification } from '../../helpers/notifications'
 import {
   formatDateFromISO,
   formatRelativeDateFromISO,
   useClientService
 } from '@ownclouders/web-pkg'
-import {useGettext} from 'vue3-gettext'
-import {useTask} from 'vue-concurrency'
-import {MESSAGE_TYPE} from '@ownclouders/web-client/src/sse'
+import { useGettext } from 'vue3-gettext'
+import { useTask } from 'vue-concurrency'
+import { MESSAGE_TYPE } from '@ownclouders/web-client/src/sse'
 
 const POLLING_INTERVAL = 30000
 
@@ -94,173 +94,169 @@ export default {
     NotificationBell
   },
   setup() {
-    setup()
-    {
-      const spacesStore = useSpacesStore()
-      const capabilityStore = useCapabilityStore()
-      const clientService = useClientService()
-      const {current: currentLanguage} = useGettext()
+    const spacesStore = useSpacesStore()
+    const capabilityStore = useCapabilityStore()
+    const clientService = useClientService()
+    const { current: currentLanguage } = useGettext()
 
-      const notifications = ref<Notification[]>([])
-      const notificationsInterval = ref()
+    const notifications = ref<Notification[]>([])
+    const notificationsInterval = ref()
 
-      const loading = computed(() => {
-        return fetchNotificationsTask.isRunning || deleteNotificationsTask.isRunning
-      })
+    const loading = computed(() => {
+      return fetchNotificationsTask.isRunning || deleteNotificationsTask.isRunning
+    })
 
-      const formatDate = (date) => {
-        return formatDateFromISO(date, currentLanguage)
-      }
-      const formatDateRelative = (date) => {
-        return formatRelativeDateFromISO(date, currentLanguage)
-      }
+    const formatDate = (date) => {
+      return formatDateFromISO(date, currentLanguage)
+    }
+    const formatDateRelative = (date) => {
+      return formatRelativeDateFromISO(date, currentLanguage)
+    }
 
-      const messageParameters = [
-        {name: 'user', labelAttribute: 'displayname'},
-        {name: 'resource', labelAttribute: 'name'},
-        {name: 'space', labelAttribute: 'name'},
-        {name: 'virus', labelAttribute: 'name'}
-      ]
-      const getMessage = ({message, messageRich, messageRichParameters}: Notification): string => {
-        if (messageRich && !isEmpty(messageRichParameters)) {
-          let interpolatedMessage = messageRich
-          for (const param of messageParameters) {
-            if (interpolatedMessage.includes(`{${param.name}}`)) {
-              const richParam = messageRichParameters[param.name] ?? undefined
-              if (!richParam) {
-                return message
-              }
-              const label = richParam[param.labelAttribute] ?? undefined
-              if (!label) {
-                return message
-              }
-              interpolatedMessage = interpolatedMessage.replace(
-                  `{${param.name}}`,
-                  `<strong>${label}</strong>`
-              )
+    const messageParameters = [
+      { name: 'user', labelAttribute: 'displayname' },
+      { name: 'resource', labelAttribute: 'name' },
+      { name: 'space', labelAttribute: 'name' },
+      { name: 'virus', labelAttribute: 'name' }
+    ]
+    const getMessage = ({ message, messageRich, messageRichParameters }: Notification): string => {
+      if (messageRich && !isEmpty(messageRichParameters)) {
+        let interpolatedMessage = messageRich
+        for (const param of messageParameters) {
+          if (interpolatedMessage.includes(`{${param.name}}`)) {
+            const richParam = messageRichParameters[param.name] ?? undefined
+            if (!richParam) {
+              return message
             }
+            const label = richParam[param.labelAttribute] ?? undefined
+            if (!label) {
+              return message
+            }
+            interpolatedMessage = interpolatedMessage.replace(
+              `{${param.name}}`,
+              `<strong>${label}</strong>`
+            )
           }
-          return interpolatedMessage
         }
-        return message
+        return interpolatedMessage
+      }
+      return message
+    }
+    const getLink = ({ messageRichParameters, object_type }: Notification) => {
+      if (!messageRichParameters) {
+        return null
       }
-      const getLink = ({messageRichParameters, object_type}: Notification) => {
-        if (!messageRichParameters) {
-          return null
+      if (object_type === 'share') {
+        return {
+          name: 'files-shares-with-me',
+          ...(!!messageRichParameters?.share?.id && {
+            query: { scrollTo: messageRichParameters.share.id }
+          })
         }
-        if (object_type === 'share') {
+      }
+      if (object_type === 'storagespace' && messageRichParameters?.space?.id) {
+        const space = spacesStore.spaces.find(
+          (s) => s.fileId === messageRichParameters?.space?.id.split('!')[0] && !s.disabled
+        )
+        if (space) {
           return {
-            name: 'files-shares-with-me',
-            ...(!!messageRichParameters?.share?.id && {
-              query: {scrollTo: messageRichParameters.share.id}
-            })
+            name: 'files-spaces-generic',
+            ...createFileRouteOptions(space, { path: '', fileId: space.fileId })
           }
         }
-        if (object_type === 'storagespace' && messageRichParameters?.space?.id) {
-          const space = spacesStore.spaces.find(
-              (s) => s.fileId === messageRichParameters?.space?.id.split('!')[0] && !s.disabled
-          )
-          if (space) {
-            return {
-              name: 'files-spaces-generic',
-              ...createFileRouteOptions(space, {path: '', fileId: space.fileId})
-            }
-          }
-        }
-        return null
       }
+      return null
+    }
 
-      const fetchNotificationsTask = useTask(function* (signal) {
-        try {
-          const response = yield clientService.httpAuthenticated.get(
-              'ocs/v2.php/apps/notifications/api/v1/notifications'
-          )
-
-          if (response.headers.get('Content-Length') === '0') {
-            return
-          }
-
-          const {
-            ocs: {data = []}
-          } = yield response.data
-          notifications.value =
-              data?.sort((a, b) => (new Date(b.datetime) as any) - (new Date(a.datetime) as any)) || []
-          unref(notifications).forEach((notification) => setAdditionalNotificationData(notification))
-        } catch (e) {
-          console.error(e)
-        }
-      }).restartable()
+    const fetchNotificationsTask = useTask(function* (signal) {
+      try {
+        const response = yield clientService.httpAuthenticated.get(
+          'ocs/v2.php/apps/notifications/api/v1/notifications'
+        )
 
-      const deleteNotificationsTask = useTask(function* (signal, ids) {
-        try {
-          yield clientService.httpAuthenticated.delete(
-              'ocs/v2.php/apps/notifications/api/v1/notifications',
-              {data: {ids}}
-          )
-        } catch (e) {
-          console.error(e)
-        } finally {
-          notifications.value = unref(notifications).filter((n) => !ids.includes(n.notification_id))
+        if (response.headers.get('Content-Length') === '0') {
+          return
         }
-      }).restartable()
 
-      const setAdditionalNotificationData = (notification: Notification) => {
-        notification.computedMessage = getMessage(notification)
-        notification.computedLink = getLink(notification)
+        const {
+          ocs: { data = [] }
+        } = yield response.data
+        notifications.value =
+          data?.sort((a, b) => (new Date(b.datetime) as any) - (new Date(a.datetime) as any)) || []
+        unref(notifications).forEach((notification) => setAdditionalNotificationData(notification))
+      } catch (e) {
+        console.error(e)
       }
+    }).restartable()
 
-      const onSSENotificationEvent = (event) => {
-        try {
-          const notification = JSON.parse(event.data) as Notification
-          if (!notification || !notification.notification_id) {
-            return
-          }
-          setAdditionalNotificationData(notification)
-          notifications.value = [notification, ...unref(notifications)]
-        } catch (_) {
-          console.error('Unable to parse sse notification data')
-        }
+    const deleteNotificationsTask = useTask(function* (signal, ids) {
+      try {
+        yield clientService.httpAuthenticated.delete(
+          'ocs/v2.php/apps/notifications/api/v1/notifications',
+          { data: { ids } }
+        )
+      } catch (e) {
+        console.error(e)
+      } finally {
+        notifications.value = unref(notifications).filter((n) => !ids.includes(n.notification_id))
       }
+    }).restartable()
 
-      onMounted(() => {
-        fetchNotificationsTask.perform()
-        if (unref(capabilityStore.supportSSE)) {
-          clientService.sseAuthenticated.addEventListener(
-              MESSAGE_TYPE.NOTIFICATION,
-              onSSENotificationEvent
-          )
-        } else {
-          notificationsInterval.value = setInterval(() => {
-            fetchNotificationsTask.perform()
-          }, POLLING_INTERVAL)
-        }
-      })
+    const setAdditionalNotificationData = (notification: Notification) => {
+      notification.computedMessage = getMessage(notification)
+      notification.computedLink = getLink(notification)
+    }
 
-      onUnmounted(() => {
-        if (unref(capabilityStore.supportSSE)) {
-          clientService.sseAuthenticated.removeEventListener(
-              MESSAGE_TYPE.NOTIFICATION,
-              onSSENotificationEvent
-          )
-        } else {
-          clearInterval(unref(notificationsInterval))
+    const onSSENotificationEvent = (event) => {
+      try {
+        const notification = JSON.parse(event.data) as Notification
+        if (!notification || !notification.notification_id) {
+          return
         }
-      })
+        setAdditionalNotificationData(notification)
+        notifications.value = [notification, ...unref(notifications)]
+      } catch (_) {
+        console.error('Unable to parse sse notification data')
+      }
+    }
 
-      return {
-        notifications,
-        fetchNotificationsTask,
-        loading,
-        deleteNotificationsTask,
-        formatDate,
-        formatDateRelative,
-        getMessage,
-        getLink,
-        hideDrop,
-        showDrop
+    onMounted(() => {
+      fetchNotificationsTask.perform()
+      if (unref(capabilityStore.supportSSE)) {
+        clientService.sseAuthenticated.addEventListener(
+          MESSAGE_TYPE.NOTIFICATION,
+          onSSENotificationEvent
+        )
+      } else {
+        notificationsInterval.value = setInterval(() => {
+          fetchNotificationsTask.perform()
+        }, POLLING_INTERVAL)
       }
+    })
+
+    onUnmounted(() => {
+      if (unref(capabilityStore.supportSSE)) {
+        clientService.sseAuthenticated.removeEventListener(
+          MESSAGE_TYPE.NOTIFICATION,
+          onSSENotificationEvent
+        )
+      } else {
+        clearInterval(unref(notificationsInterval))
+      }
+    })
+
+    return {
+      notifications,
+      fetchNotificationsTask,
+      loading,
+      deleteNotificationsTask,
+      formatDate,
+      formatDateRelative,
+      getMessage,
+      getLink
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index 67586bc769b..191633c6b96 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -107,7 +107,6 @@ describe('Notification component', () => {
         computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      wrapper.vm.showDrop()
       await wrapper.vm.fetchNotificationsTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.notificationMessage).text()).toEqual(notification.message)
@@ -123,7 +122,6 @@ describe('Notification component', () => {
         computedLink: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
-      wrapper.vm.showDrop()
       await wrapper.vm.fetchNotificationsTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.notificationMessage).text()).toEqual(
@@ -157,7 +155,6 @@ describe('Notification component', () => {
           computedLink: undefined
         })
         const { wrapper } = getWrapper({ notifications: [notification] })
-        wrapper.vm.showDrop()
         await wrapper.vm.fetchNotificationsTask.last
         await wrapper.vm.$nextTick()
 
@@ -188,7 +185,6 @@ describe('Notification component', () => {
           computedLink: undefined
         })
         const { wrapper } = getWrapper({ notifications: [notification], spaces: [spaceMock] })
-        wrapper.vm.showDrop()
         await wrapper.vm.fetchNotificationsTask.last
         await wrapper.vm.$nextTick()
         const routerLink = wrapper.findComponent<typeof RouterLink>(

From 3f40d138a621ca1639446f60572be9b312ee1d07 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 11 Apr 2024 14:11:14 +0200
Subject: [PATCH 15/16] Revert

---
 packages/web-client/src/helpers/call.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-client/src/helpers/call.ts b/packages/web-client/src/helpers/call.ts
index 3498251b426..9d6fc0c96e0 100644
--- a/packages/web-client/src/helpers/call.ts
+++ b/packages/web-client/src/helpers/call.ts
@@ -1,3 +1,3 @@
-export const call = function* <T>(p: T | Promise<T>): Generator<Promise<T>, T, T> {
-  return yield Promise.resolve(p)
+export const call = function* <T>(p: Promise<T>): Generator<Promise<T>, T, T> {
+  return yield p
 }

From 241e6d6e05d3e1e2c2a7cb82ee62b7d352425789 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 11 Apr 2024 14:31:46 +0200
Subject: [PATCH 16/16] Rearange imports

---
 .../web-runtime/src/components/Topbar/Notifications.vue   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index c059d03f86d..4f62896f442 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -75,14 +75,16 @@
 <script lang="ts">
 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import isEmpty from 'lodash-es/isEmpty'
-import { useCapabilityStore, useSpacesStore, createFileRouteOptions } from '@ownclouders/web-pkg'
-import NotificationBell from './NotificationBell.vue'
-import { Notification } from '../../helpers/notifications'
 import {
+  useCapabilityStore,
+  useSpacesStore,
+  createFileRouteOptions,
   formatDateFromISO,
   formatRelativeDateFromISO,
   useClientService
 } from '@ownclouders/web-pkg'
+import NotificationBell from './NotificationBell.vue'
+import { Notification } from '../../helpers/notifications'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
 import { MESSAGE_TYPE } from '@ownclouders/web-client/src/sse'