fix(multi-tab): Fix interactions when multiple tabs are active

- Deleting a notification in a tab makes that tab the active one
- Deleting all notifications makes the tab the active one
- Clicking the bell loads the newest state from the shared storage

Signed-off-by: Joas Schilling <coding@schilljs.com>

Author: nickvergessen

src/NotificationsApp.vue

@@ -96,7 +96,10 @@ import IconClose from 'vue-material-design-icons/Close.vue'
 import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
 import IconNotification from './Components/IconNotification.vue'
 import NotificationItem from './Components/NotificationItem.vue'
-import { getNotificationsData } from './services/notificationsService.js'
+import {
+	getNotificationsData,
+	setCurrentTabAsActive,
+} from './services/notificationsService.js'
 import { createWebNotification } from './services/webNotificationsService.js'
 
 const sessionKeepAlive = loadState('core', 'config', { session_keepalive: true }).session_keepalive
@@ -253,8 +256,11 @@ export default {
 			}
 		},
 
-		onOpen() {
+		async onOpen() {
 			this.requestWebNotificationPermissions()
+
+			await setCurrentTabAsActive(this.tabId)
+			await this._fetch()
 		},
 
 		handleNetworkOffline() {
@@ -282,6 +288,8 @@ export default {
 				.delete(generateOcsUrl('apps/notifications/api/v2/notifications'))
 				.then(() => {
 					this.notifications = []
+					this.open = false
+					setCurrentTabAsActive(this.tabId)
 				})
 				.catch(() => {
 					showError(t('notifications', 'Failed to dismiss all notifications'))
@@ -290,6 +298,7 @@ export default {
 
 		onRemove(index) {
 			this.notifications.splice(index, 1)
+			setCurrentTabAsActive(this.tabId)
 		},
 
 		/**

src/services/notificationsService.js

@@ -42,6 +42,19 @@ async function getNotificationsData(tabId, lastETag, forceRefresh, hasNotifyPush
 	}
 }
 
+/**
+ * @param {string|null} tabId unique id for browser tab
+ */
+async function setCurrentTabAsActive(tabId) {
+	const lastTab = BrowserStorage.getItem('tabId')
+	if (lastTab !== tabId) {
+		// Refresh the data when changing the tab
+		await getNotificationsData(tabId, '', true, false)
+		// Enforce this tab one the raise-condition if there was one
+		BrowserStorage.setItem('tabId', tabId)
+	}
+}
+
 /**
  * @param {object} notification notification object
  */
@@ -90,4 +103,5 @@ async function refreshData(lastETag) {
 
 export {
 	getNotificationsData,
+	setCurrentTabAsActive,
 }