Show unread notification count in browser tab title

frontend/apps/main/src/App.vue

@@ -125,7 +125,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { RouterView } from 'vue-router'
 import { useUserStore } from './stores/user'
 import { initWS } from './websocket.js'
@@ -142,6 +142,7 @@ import { useSharedViewStore } from './stores/sharedView'
 import { useTagStore } from './stores/tag'
 import { useCustomAttributeStore } from './stores/customAttributes'
 import { useIdleDetection } from './composables/useIdleDetection'
+import { useNotificationStore } from './stores/notification'
 import { initAudioContext } from '@shared-ui/composables/useNotificationSound'
 import PageHeader from './components/layout/PageHeader.vue'
 import ViewForm from '@/features/view/ViewForm.vue'
@@ -186,6 +187,13 @@ const view = ref({})
 const openCreateViewForm = ref(false)
 const openCreateConversationDialog = ref(false)
 const { t } = useI18n()
+const notificationStore = useNotificationStore()
+
+// Update browser tab title with unread notification count.
+watch(() => notificationStore.unreadCount, (count) => {
+  const base = document.title.replace(/^\(\d+\)\s*/, '')
+  document.title = count > 0 ? `(${count}) ${base}` : base
+})
 
 initWS()
 useIdleDetection()