header: per-route page titles + a centered, click-to-rename tab title

Each dashboard route now sets its own document.title (route→title map in
usePageTitleSync, mounted in DashboardLayout). The title also renders centered in
the top header; clicking it edits inline and updates the browser tab live —
per-tab only, reset on navigation/refresh (not persisted).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx

@@ -3,6 +3,7 @@ import { Background } from './Background';
 import { Header } from './Header';
 import { Dock, ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS } from './Dock';
 import { useIsTouch } from './useIsTouch';
+import { usePageTitleSync } from '@/state/usePageTitle';
 
 type DashboardLayoutProps = {
   children?: React.ReactNode;
@@ -10,6 +11,7 @@ type DashboardLayoutProps = {
 export function DashboardLayout({ children }: DashboardLayoutProps) {
   const { items: visibleItems } = useDock(ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS);
   const isTouch = useIsTouch();
+  usePageTitleSync();
 
   return (
     <div className="relative overflow-hidden h-dvh outline-none inset-0">