Use new unreadCountStore for setting appIcon Badge

Signed-off-by: Markus Stoll <[email protected]>

Author: markusstoll

src/main.js

@@ -85,7 +85,9 @@ ipcMain.handle('app:getSystemL10n', () => ({
 }))
 ipcMain.handle('app:enableWebRequestInterceptor', (event, ...args) => enableWebRequestInterceptor(...args))
 ipcMain.handle('app:disableWebRequestInterceptor', (event, ...args) => disableWebRequestInterceptor(...args))
-ipcMain.handle('app:setBadgeCount', async (event, count) => app.setBadgeCount(count))
+ipcMain.handle('app:setBadgeCount', async (event, count) => {
+	return app.setBadgeCount(count)
+})
 ipcMain.on('app:relaunch', () => {
 	app.relaunch()
 	app.exit(0)

src/talk/renderer/TalkDesktop.vue

@@ -4,11 +4,12 @@
   -->
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, onMounted } from 'vue'
 import TitleBar from './TitleBar/TitleBar.vue'
 import TalkWrapper from './TalkWrapper/TalkWrapper.vue'
 import { createViewer } from './Viewer/Viewer.js'
 import { useNotificationsStore } from './notifications/notifications.store.js'
+import unreadCountStore from '../../../spreed/src/store/unreadCountStore.js'
 
 const isTalkInitialized = ref(false)
 provide('talk:isInitialized', isTalkInitialized)

src/talk/renderer/TalkWrapper/TalkWrapper.vue

@@ -4,38 +4,85 @@
   -->
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import { onTalkHashDirty, onTalkHashUpdate, openConversation, setTalkHash } from './talk.service.ts'
 import { registerTalkDesktopSettingsSection } from '../Settings/index.ts'
 import { subscribeBroadcast } from '../../../shared/broadcast.service.ts'
 import { appData } from '../../../app/AppData.js'
+import unreadCountStore, { EVENTS } from '@talk/src/store/unreadCountStore'
+import { subscribe, emit as emitEvent } from '@nextcloud/event-bus'
 
 const emit = defineEmits<{
 	(event: 'ready'): void
 }>()
 
+// Handler for unread count updates
+let unsubscribeUnreadCount: (() => void) | null = null
+
+const waitForTalkAndStore = async () => {
+	console.debug('TalkWrapper: Waiting for Talk instance and store...')
+	let attempts = 0
+	const maxAttempts = 50
+	const delay = 100
+
+	while (attempts < maxAttempts) {
+		if (window.OCA?.Talk?.instance && window.store && window.TALK_DESKTOP) {
+			console.debug('TalkWrapper: Talk instance, store, and TALK_DESKTOP found')
+			return true
+		}
+		await new Promise(resolve => setTimeout(resolve, delay))
+		attempts++
+	}
+	throw new Error('Talk instance, store, or TALK_DESKTOP not initialized after maximum attempts')
+}
+
 onMounted(async () => {
-	// Importing the main Talk entry point mounts a Vue app to the #content
-	await import('@talk/src/main.js')
+	try {
+		await import('@talk/src/main.js')
+		
+		registerTalkDesktopSettingsSection()
+		subscribeBroadcast('talk:conversation:open', ({ token, directCall }) => openConversation(token, { directCall }))
+
+		await waitForTalkAndStore()
+		const store = window.store
+
+		// Register store module if not already registered
+		if (!store.hasModule('unreadCount')) {
+			store.registerModule('unreadCount', unreadCountStore)
+		}
 
-	// Additional integrations
-	registerTalkDesktopSettingsSection()
-	subscribeBroadcast('talk:conversation:open', ({ token, directCall }) => openConversation(token, { directCall }))
+		// Initialize badge handling
+		window.TALK_DESKTOP.setBadgeCount(0)
+
+		// Subscribe to unread count updates
+		unsubscribeUnreadCount = subscribe(EVENTS.UNREAD_COUNT_UPDATED, ({ unreadMessages }) => {
+			window.TALK_DESKTOP.setBadgeCount(unreadMessages || 0)
+		})
+
+		// Now trigger the initial calculation
+		store.dispatch('unreadCount/recalculateTotalUnreadCounters')
+
+		if (appData.talkHash) {
+			setTalkHash(appData.talkHash)
+		}
+		onTalkHashUpdate((hash: string) => {
+			appData.setTalkHash(hash).persist()
+		})
+		onTalkHashDirty(() => {
+			appData.setTalkHashDirty(true).persist()
+		})
+
+		emit('ready')
+	} catch (error) {
+		console.error('TalkWrapper: Error during initialization:', error)
+	}
+})
 
-	// If there is a talkHash - set it initially
-	if (appData.talkHash) {
-		setTalkHash(appData.talkHash)
+// Cleanup event listeners
+onUnmounted(() => {
+	if (unsubscribeUnreadCount) {
+		unsubscribeUnreadCount()
 	}
-	// Handle Talk Hash updates
-	onTalkHashUpdate((hash: string) => {
-		appData.setTalkHash(hash).persist()
-	})
-	onTalkHashDirty(() => {
-		appData.setTalkHashDirty(true).persist()
-	})
-
-	// Ready
-	emit('ready')
 })
 </script>
 

src/talk/renderer/notifications/notifications.store.js

@@ -94,7 +94,6 @@ export function createNotificationStore() {
 		if (notifications.length > _oldcount) {
 			_oldcount = notifications.length
 			if (state.backgroundFetching && document.hidden) {
-				window.TALK_DESKTOP.setBadgeCount()
 				window.TALK_DESKTOP.flashAppIcon(true)
 				// If we didn't already highlight, store the title so we can restore on tab-view
 				if (!document.title.startsWith('* ')) {
@@ -110,7 +109,6 @@ export function createNotificationStore() {
 	 * the Talk might have altered it.
 	 */
 	function _restoreTitle() {
-		window.TALK_DESKTOP.setBadgeCount(0)
 		window.TALK_DESKTOP.flashAppIcon(false)
 		if (document.title.startsWith('* ')) {
 			document.title = document.title.substring(2)