Phase 8: Project Management, find bar, presence and motion

The Project Management screen (/pm, view only) with Overview, Projects & units, Bottlenecks & aging, Hours vs target,
Quality & issues and Find jobs, the period picker, health per unit and per project, drill down, Excel (CSV) per table
and for all, and the PESCO production status report PDF with the controlled-copy stamp; every export logged as
"report exported". The find bar on every home screen: the full search set, the dropdowns, quick flags with Mine, the
flag kinds, Board and List with sorts, filters saved per browser; every filter applied by the server on the list and
the boards, with facets. Presence in packets with role, lock and revoke drop; the motion switch with reduced motion
honoured, card glides, glow and count-up; Back restores the scroll spot; sheet placement and the iPad layout pass. The
data book compared page by page with the old build and six layout differences fixed. Tests for the PM aggregates,
search, filters, presence and exports; Playwright scenarios for the PM screen, the find bar and presence at desktop and
iPad viewports. Docs updated; PLAN.md questions 38 to 42.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

frontend/src/components/Layout.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { Link, Outlet, useLocation } from "react-router";
 import { SCREEN_LABELS, firstScreen, isScreen, orderScreens, type Screen } from "../auth/roles";
 import { useAuth } from "../auth/useAuth";
+import { replayClass } from "../lib/motion";
+import { useScrollRestore } from "../lib/scrollRestore";
 import { LockScreen } from "./LockScreen";
 import { RoleSwitcher } from "./RoleSwitcher";
 import { TopBar } from "./TopBar";
@@ -25,6 +27,18 @@ export function Layout() {
   const active = isScreen(seg) && screens.includes(seg) ? seg : null;
   const shown = active ?? firstScreen(screens);
 
+  // Back lands on the same spot; a new page starts at the top.
+  useScrollRestore();
+
+  // A new screen eases in (the old m-enter), only while body.motion is set; the CSS keys off both.
+  const lastPath = useRef<string | null>(null);
+  useLayoutEffect(() => {
+    const was = lastPath.current;
+    lastPath.current = pathname;
+    if (was === null || was === pathname) return;
+    return replayClass(mainRef.current, "m-enter", 700);
+  }, [pathname]);
+
   // Keep the page mounted behind the lock, but out of reach of the keyboard and screen readers.
   useEffect(() => {
     mainRef.current?.toggleAttribute("inert", locked);