A client-side React component that renders a time-tracking affordance in the application header, integrating a Radix UI Popover with live elapsed time display and AppLayout drawer coordination. ## Key Components | Export | Type | Description | |---|---|---| | `TimeTrackerHeaderButton` | Component | Main header button with popover panel for time tracking | | `TimeTrackerHeaderButtonProps` | Interface | Props: `className` and `disabled` passthrough | **Internal dependencies:** - `useOptionalTimeTracker` — Reads tracker context; returns `null` if no `` is present (component renders nothing) - `useTrackerClock` — Provides live elapsed time label while a session is running - `useAppLayoutDrawerCoordination` — Coordinates mutual exclusion with other in-layout drawers/panels - `useAppLayoutDrawerContainer` — Resolves the portal target for the backdrop overlay ## Behavior Notes - **No provider → no render:** If `TimeTrackerContext` is absent, the component returns `null` - **Live clock:** While tracking, the elapsed time renders inline in the `HeaderButton` trigger - **Visual states:** Icon color shifts to `ods-accent` (tracking) or `ods-text-secondary` (paused) - **Backdrop scoping:** Inside `AppLayout`, the dim overlay is portaled into the main-content container so header and sidebar remain interactive; outside `AppLayout` it falls back to a full-viewport overlay - **Drawer coordination:** Registers a stable `AppLayoutDrawerHandle` so opening the time tracker closes other panels and vice versa ## Usage Example ```typescript // Wrap your app with TimeTrackerProvider, then drop the button into your header import { TimeTrackerProvider } from './time-tracker-context' import { TimeTrackerHeaderButton } from './time-tracker-header-button' function AppHeader() { return (

) } // Outside a provider, the component renders nothing — safe to include unconditionally function MinimalHeader() { return (

) } ```