feat(SPA): "<page> · RenewCMS" as pages titles, instead of being stuck on whatever lands on first loading

web/src/components/AuthShell.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { t } from '@/i18n'
-
 import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
 import AppLogo from '@/components/AppLogo.vue'
 import LanguageChip from '@/components/LanguageChip.vue'
+import { useCardHeading } from '@/composables/documentTitle'
 import { isInAppNavigation } from '@/composables/useAuthShellNavigation'
 
 const props = defineProps<{
@@ -70,16 +69,7 @@ const colorModeSelectUi = computed(() => ({
 	content: 'w-auto min-w-36',
 }))
 
-watch(
-	() => props.title,
-	(title) => {
-		if (!title) {
-			return
-		}
-		document.title = t('{0} · RenewCMS', [title])
-	},
-	{ immediate: true },
-)
+useCardHeading(() => props.title)
 
 watch(
 	() => props.title,

web/src/components/__tests__/AuthShell.spec.ts

@@ -8,10 +8,7 @@ beforeEach(() => {
 	resetAuthShellNavigation()
 })
 
-function mountShell(
-	props: Record<string, unknown>,
-	slots: Record<string, unknown> = {},
-) {
+function mountShell(props: Record<string, unknown>, slots: Record<string, unknown> = {}) {
 	return mount(AuthShell, {
 		props,
 		slots,
@@ -21,36 +18,29 @@ function mountShell(
 	})
 }
 
-describe('AuthShell renders its title as the page heading and sets the document title', () => {
-	it('renders an h1 containing the title and sets document.title', () => {
+describe('AuthShell renders its title as the page heading', () => {
+	it('renders an h1 containing the title', () => {
 		const wrapper = mountShell({ title: 'Log in' })
 
 		const heading = wrapper.find('h1')
 		expect(heading.text()).toBe('Log in')
 		expect(heading.attributes('tabindex')).toBe('-1')
-		expect(document.title).toBe('Log in · RenewCMS')
 	})
 })
 
-describe('AuthShell with an empty title renders no heading and leaves document.title untouched', () => {
-	it('mounts directly with an empty title without rendering an h1 or touching document.title', () => {
-		document.title = 'Existing title · RenewCMS'
-
+describe('AuthShell with an empty title renders no heading', () => {
+	it('mounts with an empty title without rendering an h1', () => {
 		const wrapper = mountShell({ title: '' })
 
 		expect(wrapper.find('h1').exists()).toBe(false)
-		expect(document.title).toBe('Existing title · RenewCMS')
 	})
 
-	it('leaves document.title untouched and does not crash when the title changes to empty', async () => {
+	it('removes the heading when the title changes to empty', async () => {
 		const wrapper = mountShell({ title: 'Create the owner account' })
 
-		expect(document.title).toBe('Create the owner account · RenewCMS')
-
 		await wrapper.setProps({ title: '' })
 
 		expect(wrapper.find('h1').exists()).toBe(false)
-		expect(document.title).toBe('Create the owner account · RenewCMS')
 	})
 })
 
@@ -66,17 +56,13 @@ describe('AuthShell renders its notice and footer slots', () => {
 
 		const notice = wrapper.find('span')
 		expect(notice.text()).toBe('Your session expired.')
-		expect(
-			wrapper.findAll('[data-slot="root"][data-orientation]').length,
-		).toBe(1)
+		expect(wrapper.findAll('[data-slot="root"][data-orientation]').length).toBe(1)
 
 		const card = wrapper.find('[data-testid="auth-card"]')
 		expect(card.element.contains(notice.element)).toBe(true)
 
 		const html = wrapper.html()
-		expect(html.indexOf('<h1')).toBeLessThan(
-			html.indexOf('Your session expired.'),
-		)
+		expect(html.indexOf('<h1')).toBeLessThan(html.indexOf('Your session expired.'))
 
 		const footerLink = wrapper.find('a[href="/register/reset/request"]')
 		expect(footerLink.exists()).toBe(true)