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

js/notifications-main.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('notifications', '', 'js/NotificationsApp-CnHRKMHH.chunk.mjs'),window.OC.filePath('notifications', '', 'js/index-_0iU0BYK-CjtyBpO5.chunk.mjs'),window.OC.filePath('notifications', '', 'js/style-3CHj422B.chunk.mjs'),window.OC.filePath('notifications', '', 'css/style-BhWaMu2d.chunk.css'),window.OC.filePath('notifications', '', 'js/vite-preload-helper-B9rAsR6N.chunk.mjs'),window.OC.filePath('notifications', '', 'css/index-_0iU0BYK-DP1A-Cz8.chunk.css'),window.OC.filePath('notifications', '', 'js/BrowserStorage-FmX8gBxO.chunk.mjs'),window.OC.filePath('notifications', '', 'css/NotificationsApp-BPtPFz0N.chunk.css')])))=>i.map(i=>d[i]);
-import{_ as o}from"./vite-preload-helper-B9rAsR6N.chunk.mjs";import{c as t,d as i}from"./style-3CHj422B.chunk.mjs";const m=i(()=>o(()=>import("./NotificationsApp-CnHRKMHH.chunk.mjs"),__vite__mapDeps([0,1,2,3,4,5,6,7]),import.meta.url));t(m).mount("#notifications");
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('notifications', '', 'js/NotificationsApp-BSasLk0w.chunk.mjs'),window.OC.filePath('notifications', '', 'js/index-_0iU0BYK-CjtyBpO5.chunk.mjs'),window.OC.filePath('notifications', '', 'js/style-3CHj422B.chunk.mjs'),window.OC.filePath('notifications', '', 'css/style-BhWaMu2d.chunk.css'),window.OC.filePath('notifications', '', 'js/vite-preload-helper-B9rAsR6N.chunk.mjs'),window.OC.filePath('notifications', '', 'css/index-_0iU0BYK-DP1A-Cz8.chunk.css'),window.OC.filePath('notifications', '', 'js/BrowserStorage-FmX8gBxO.chunk.mjs'),window.OC.filePath('notifications', '', 'css/NotificationsApp-DXuAZ_Q5.chunk.css')])))=>i.map(i=>d[i]);
+import{_ as o}from"./vite-preload-helper-B9rAsR6N.chunk.mjs";import{c as t,d as i}from"./style-3CHj422B.chunk.mjs";const m=i(()=>o(()=>import("./NotificationsApp-BSasLk0w.chunk.mjs"),__vite__mapDeps([0,1,2,3,4,5,6,7]),import.meta.url));t(m).mount("#notifications");
 //# sourceMappingURL=notifications-main.mjs.map

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,
 }