fix(admin): add favicon and page-aware titles

admin/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex, nofollow" />
     <meta name="summer-admin-base" content="__SUMMER_ADMIN_BASE__" />
+    <link rel="icon" href="./favicon.ico" sizes="48x48" />
     <title>SummerCMS</title>
   </head>
   <body>

admin/src/App.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
+import { documentTitleForRoute } from './app/pageTitle'
 import AppShell from './components/shell/AppShell.vue'
 
 const route = useRoute()
 const inShell = computed(() => route.meta.shell === true)
+
+watchEffect(() => {
+  document.title = documentTitleForRoute(route)
+})
 </script>
 
 <template>

admin/src/app/pageTitle.ts

@@ -0,0 +1,42 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { controllerIdFromPath } from './controllerRoutes'
+import { t } from './i18n'
+import { recordCrumb } from '../state/useBreadcrumbs'
+import { activeEntry } from '../state/useNavigation'
+import { settingsEntry } from '../state/useSettings'
+
+const PRODUCT_TITLE = 'SummerCMS'
+
+/** The visible page indicator used before the SummerCMS product name. */
+export function pageIndicator(route: RouteLocationNormalizedLoaded): string {
+  if (route.name === 'login') {
+    return t('backend::lang.auth.title')
+  }
+  if (route.name === 'settings') {
+    return t('backend::lang.settings.title')
+  }
+  if (route.name === 'settings-form') {
+    return settingsEntry(String(route.params.code ?? ''))?.label ?? String(route.params.code ?? '')
+  }
+  if (route.name === 'home') {
+    return t('backend::lang.nav.empty')
+  }
+  if (route.name === 'not-found') {
+    return t('backend::lang.page.not_found')
+  }
+
+  const plugin = activeEntry(String(route.params.vendor ?? ''), String(route.params.plugin ?? ''))
+  const controller = controllerIdFromPath(route.path)
+  const section = plugin?.sideMenu.find((item) => item.controller === controller)
+  const controllerLabel = section?.label ?? plugin?.label ?? ''
+  if (route.name === 'create' || route.name === 'record' || route.name === 'preview') {
+    return recordCrumb.value || controllerLabel
+  }
+  return controllerLabel
+}
+
+/** Browser title matching WinterCMS's "Current page | Product" pattern. */
+export function documentTitleForRoute(route: RouteLocationNormalizedLoaded): string {
+  const indicator = pageIndicator(route).trim()
+  return indicator === '' ? PRODUCT_TITLE : `${indicator} | ${PRODUCT_TITLE}`
+}

admin/tests/app/pageTitle.test.ts

@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { documentTitleForRoute } from '../../src/app/pageTitle'
+import { setRecordCrumb } from '../../src/state/useBreadcrumbs'
+import { setNavigation } from '../../src/state/useNavigation'
+import { setSettings } from '../../src/state/useSettings'
+import { navigationFixture, settingsFixture } from '../fixtures/typed'
+import { resetState, routerAt, signIn } from '../helpers'
+
+beforeEach(resetState)
+
+describe('documentTitleForRoute', () => {
+  it('uses the active controller label on list pages', async () => {
+    await signIn()
+    setNavigation(navigationFixture.data)
+    const router = await routerAt('/acme/demo/widgets')
+    expect(documentTitleForRoute(router.currentRoute.value)).toBe('Widgets | SummerCMS')
+  })
+
+  it('uses the loaded record name on create, update and preview pages', async () => {
+    await signIn()
+    setNavigation(navigationFixture.data)
+    setRecordCrumb('Blue widget')
+    for (const path of ['/acme/demo/widgets/create', '/acme/demo/widgets/12', '/acme/demo/widgets/12/preview']) {
+      const router = await routerAt(path)
+      expect(documentTitleForRoute(router.currentRoute.value), path).toBe('Blue widget | SummerCMS')
+    }
+  })
+
+  it('uses the settings page label', async () => {
+    await signIn()
+    setSettings(settingsFixture.list.data)
+    expect(documentTitleForRoute((await routerAt('/settings')).currentRoute.value)).toBe('Ustawienia | SummerCMS')
+    expect(documentTitleForRoute((await routerAt('/settings/mail')).currentRoute.value)).toBe('Mail | SummerCMS')
+  })
+
+  it('uses translated indicators for login, the empty home and not found', async () => {
+    expect(documentTitleForRoute((await routerAt('/login')).currentRoute.value)).toBe('Witaj ponownie | SummerCMS')
+    await signIn()
+    expect(documentTitleForRoute((await routerAt('/')).currentRoute.value)).toBe('Brak dostępnych sekcji. | SummerCMS')
+    expect(documentTitleForRoute((await routerAt('/nowhere')).currentRoute.value)).toBe('Nie znaleziono strony. | SummerCMS')
+  })
+})

admin/tests/views/App.test.ts

@@ -19,6 +19,7 @@ beforeEach(() => {
 
 afterEach(() => {
   document.body.innerHTML = ''
+  document.title = ''
 })
 
 enableAutoUnmount(afterEach)
@@ -28,6 +29,7 @@ describe('app root', () => {
     const { wrapper } = await mountAt('/login')
     expect(wrapper.find('nav[aria-label="Wtyczki"]').exists()).toBe(false)
     expect(wrapper.find('form').exists()).toBe(true)
+    expect(document.title).toBe('Witaj ponownie | SummerCMS')
   })
 
   it('renders shell routes inside the shell and an unknown path as not found', async () => {
@@ -37,6 +39,7 @@ describe('app root', () => {
     expect(wrapper.find('nav[aria-label="Wtyczki"]').exists()).toBe(true)
     expect(wrapper.findComponent(NotFoundView).exists()).toBe(true)
     expect(wrapper.find('main h1').text()).toBe('Nie znaleziono strony.')
+    expect(document.title).toBe('Nie znaleziono strony. | SummerCMS')
   })
 
   it('says so when the admin may open no plugin', async () => {