GE monogram avatar fallback + per-page document titles

Users without a profile photo (and broken photo URLs) show the GE
monogram instead of nothing/initials - sidebar identity, employee
detail hero, and the directory list thumbs; the shopfloor cards
already did this. Document titles become
'<Facility> ShopDB - <Page>' via a router afterEach (facility from
public settings, page label from meta.title or a prettified route
name with spellings for PCs/USB/GE-Enforce/3D Printed Parts/...), so
copied links and browser tabs identify the page.

frontend/src/router/index.js

@@ -5,6 +5,7 @@ import SettingsLayout from '../views/settings/SettingsLayout.vue'
 import { setupComplete, setupSkipped, isSetupLoaded, refreshSetupState } from '../composables/setupState'
 import { loadEnabledPlugins, isPluginEnabled } from '../composables/enabledPlugins'
 import { useToast } from '../composables/toast'
+import { getFacilityName } from '../utils/siteSettings'
 
 // Auto-discover all route modules from routes/ directory
 const routeModules = import.meta.glob('./routes/*.js', { eager: true })
@@ -137,6 +138,43 @@ const router = createRouter({
   routes
 })
 
+// --- Document titles: "<Facility> ShopDB - <Page>" ---------------------------
+// Facility name comes from public settings (cached after first fetch); the
+// page label comes from meta.title when a route sets one, else a prettified
+// route name with spellings for the odd ones.
+const TITLE_SPELLINGS = {
+  'pcs': 'PCs',
+  'usb': 'USB Devices',
+  'geenforce': 'GE-Enforce',
+  'knowledgebase': 'Knowledge Base',
+  'printedparts': '3D Printed Parts',
+  'parts-kiosk': 'Parts Kiosk',
+  'tv': 'TV Slideshow',
+  'shopfloor': 'Shopfloor Dashboard',
+  'measuringtools': 'Measuring Tools',
+  'networkdevices': 'Network',
+}
+
+function pageTitleFor(route) {
+  if (route.meta?.title) return route.meta.title
+  const name = String(route.name || '')
+  if (!name) return ''
+  const base = name.replace(/-(new|edit|detail)$/, '')
+  if (TITLE_SPELLINGS[base]) return TITLE_SPELLINGS[base]
+  return base.split('-').map(word =>
+    word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
+router.afterEach(async (to) => {
+  let siteTitle = 'ShopDB'
+  try {
+    const facility = await getFacilityName()
+    if (facility && facility !== 'ShopDB') siteTitle = `${facility} ShopDB`
+  } catch (titleError) { /* settings unavailable - plain ShopDB */ }
+  const page = pageTitleFor(to)
+  document.title = page && page !== 'Home' ? `${siteTitle} - ${page}` : siteTitle
+})
+
 // Navigation guard
 router.beforeEach(async (to, from, next) => {
   const authStore = useAuthStore()