Fix reactive window title

src/App.vue

@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
 import { debounce } from 'lodash'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
@@ -89,6 +89,10 @@ function notify(payload: { store: string; message: string }) {
 	}, 1500)
 }
 
+watchEffect(() => {
+	document.title = sessionStore.windowTitle
+})
+
 onMounted(() => {
 	subscribe(Event.TransitionsOff, (delay) => {
 		transitionsOff(delay)

src/components/AppIcons/modules/Spinner.vue

@@ -7,7 +7,7 @@ import { t } from '@nextcloud/l10n'
 import { IconProps } from './types'
 
 const {
-	title = t('polls', 'Loading'),
+	title = t('polls', 'Loading …'),
 	fillColor = 'currentColor',
 	size = 24,
 } = defineProps<IconProps>()

src/components/Poll/PollHeaderButtons.vue

@@ -23,7 +23,7 @@ import { useSessionStore } from '../../stores/session.ts'
 const route = useRoute()
 const pollStore = usePollStore()
 const sessionStore = useSessionStore()
-const caption = t('polls', 'Poll informations')
+const caption = t('polls', 'Poll information')
 
 const showUserMenu = computed(
 	() =>

src/router.ts

@@ -90,89 +90,95 @@ async function validateToken(to: RouteLocationNormalized) {
 
 const routes: RouteRecordRaw[] = [
 	{
+		name: 'list',
 		path: '/list/:type?',
 		components: {
 			default: List,
 			navigation: Navigation,
 		},
 		props: true,
-		name: 'list',
 		meta: {
 			listPage: true,
 		},
 	},
 	{
+		name: 'group',
 		path: '/group/:slug',
 		components: {
 			default: List,
 			navigation: Navigation,
 			sidebar: SideBarPollGroup,
 		},
 		props: true,
-		name: 'group',
 		meta: {
 			groupPage: true,
 			listPage: true,
 		},
 	},
 	{
+		name: 'combo',
 		path: '/combo',
 		components: {
 			default: Combo,
 			navigation: Navigation,
 			sidebar: SideBarCombo,
 		},
-		name: 'combo',
 		meta: {
 			comboPage: true,
 		},
 	},
 	{
+		name: 'notfound',
 		path: '/not-found',
 		components: {
 			default: NotFound,
 			navigation: Navigation,
 		},
-		name: 'notfound',
+		meta: {
+			errorPage: true,
+		},
 	},
 	{
+		name: 'forbidden',
 		path: '/forbidden',
 		components: {
 			default: Forbidden,
 			navigation: Navigation,
 		},
-		name: 'forbidden',
+		meta: {
+			errorPage: true,
+		},
 	},
 	{
+		name: 'vote',
 		path: '/vote/:id',
 		components: {
 			default: Vote,
 			navigation: Navigation,
 			sidebar: SideBar,
 		},
 		props: true,
-		name: 'vote',
 		meta: {
 			votePage: true,
 		},
 	},
 	{
+		name: 'publicVote',
 		path: '/s/:token',
 		components: {
 			default: Vote,
 			sidebar: SideBar,
 		},
 		beforeEnter: validateToken,
 		props: true,
-		name: 'publicVote',
 		meta: {
 			publicPage: true,
 			votePage: true,
 		},
 	},
 	{
-		path: '/',
 		name: 'root',
+		path: '/',
 		redirect: {
 			name: 'list',
 			params: {

src/stores/session.ts

@@ -9,13 +9,15 @@ import { PublicAPI, SessionAPI } from '../Api/index.ts'
 import { createDefault, User, AppPermissions } from '../Types/index.ts'
 import { AppSettings, UpdateType } from './appSettings.ts'
 import { usePreferencesStore, ViewMode, SessionSettings } from './preferences.ts'
-import { FilterType } from './polls.ts'
+import { FilterType, usePollsStore } from './polls.ts'
 import { Share } from './shares.ts'
 import { RouteLocationNormalized, RouteRecordNameGeneric } from 'vue-router'
 import { Logger } from '../helpers/index.ts'
 import { usePollStore } from './poll.ts'
 import { useSubscriptionStore } from './subscription.ts'
 import { AxiosError } from '@nextcloud/axios'
+import { t } from '@nextcloud/l10n'
+import { usePollGroupsStore } from './pollGroups.ts'
 
 interface RouteParams {
 	id: number
@@ -179,6 +181,36 @@ export const useSessionStore = defineStore('session', {
 			}
 			return 'list-view'
 		},
+
+		windowTitle(state): string {
+			const pollStore = usePollStore()
+
+			const windowTitle = {
+				prefix: `${t('polls', 'Polls')}`,
+				name: 'Nextcloud',
+			}
+
+			if (state.route.name === 'list') {
+				const pollsStore = usePollsStore()
+				windowTitle.name =
+					pollsStore.categories[
+						this.route.params.type as FilterType
+					].titleExt
+			} else if (state.route.name === 'group') {
+				const pollGroupsStore = usePollGroupsStore()
+				windowTitle.name =
+					pollGroupsStore.currentPollGroup?.titleExt
+					|| pollGroupsStore.currentPollGroup?.name
+					|| ''
+			} else if (state.route.name === 'publicVote') {
+				windowTitle.name = pollStore.configuration.title
+			} else if (state.route.name === 'vote') {
+				windowTitle.name =
+					pollStore.configuration.title ?? t('polls', 'Enter Title')
+			}
+
+			return `${windowTitle.prefix} – ${windowTitle.name}`
+		},
 	},
 
 	actions: {

src/views/PollList.vue

@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
-import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { showError } from '@nextcloud/dialogs'
 import { t, n } from '@nextcloud/l10n'
 
@@ -78,8 +78,6 @@ const emptyPollListnoPolls = computed(
 	() => pollsStore.pollsFilteredSorted.length < 1,
 )
 
-const windowTitle = computed(() => `${t('polls', 'Polls')} - ${title.value}`)
-
 const loadingOverlayProps = {
 	name: t('polls', 'Loading overview…'),
 	teleportTo: '#content-vue',
@@ -97,13 +95,6 @@ const emptyContentProps = computed(() => ({
 	description: t('polls', 'Add one or change category!'),
 }))
 
-/**
- *
- */
-function refreshView() {
-	window.document.title = windowTitle.value
-}
-
 /**
  *
  * @param pollId - The poll id to clone
@@ -128,11 +119,6 @@ async function loadMore() {
 
 onMounted(() => {
 	pollsStore.load(false)
-	refreshView()
-})
-
-onBeforeRouteUpdate(async () => {
-	refreshView()
 })
 </script>
 

src/views/Vote.vue

@@ -94,11 +94,6 @@ async function loadChunks() {
 	}
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const windowTitle = computed(
-	() => `${t('polls', 'Polls')} - ${pollStore.configuration.title}`,
-)
-
 const isShortDescription = computed(() => {
 	if (!pollStore.configuration.description) {
 		return true