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/TopBar.tsx

@@ -1,6 +1,40 @@
-import type { ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { Link } from "react-router";
 import logo from "../assets/logo.png";
+import { setMotion, useMotion } from "../lib/motion";
+
+/** The Motion on / Motion off switch (the old motionBtn), with a short toast on toggle. */
+export function MotionButton() {
+  const on = useMotion();
+  const [toast, setToast] = useState<string | null>(null);
+  useEffect(() => {
+    if (!toast) return;
+    const t = window.setTimeout(() => setToast(null), 2500);
+    return () => window.clearTimeout(t);
+  }, [toast]);
+  return (
+    <>
+      <button
+        className="btn sm ghost mbtn"
+        type="button"
+        aria-pressed={on}
+        title={on ? "Turn animations off" : "Turn animations on"}
+        onClick={() => {
+          setMotion(!on);
+          setToast(on ? "Motion off" : "Motion on");
+        }}
+      >
+        <span className="mdot" aria-hidden="true" />
+        {on ? "Motion on" : "Motion off"}
+      </button>
+      {toast ? (
+        <div className="toast" role="status" data-testid="motion-toast">
+          {toast}
+        </div>
+      ) : null}
+    </>
+  );
+}
 
 interface TopBarProps {
   /** The role switcher, drawn between the brand and the spacer. */
@@ -21,6 +55,7 @@ export function TopBar({ nav, children }: TopBarProps) {
           </div>
         </Link>
         {nav}
+        <MotionButton />
         <div className="sp" />
         {children ? <div className="who">{children}</div> : null}
       </div>