197c60126c
Adds a header bell component linking to /alerts/inbox with an unread-count badge for the selected environment. Polling pauses when the tab is hidden via TanStack Query's refetchIntervalInBackground:false (already set on useUnreadCount); the new usePageVisible hook gives components a re-renders-on-visibility-change signal for future defense-in-depth. Plan-prose deviation: the plan assumed UnreadCountResponse carries a bySeverity map for per-severity badge coloring, but the backend DTO only exposes a scalar `count`. The bell reads `data?.count` and renders a single var(--error) tint; a TODO references spec §13 for future per-severity work that would require expanding the DTO. Tests: usePageVisible toggles on visibilitychange events; NotificationBell renders the bell with no badge at count=0 and shows "3" at count=3. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
23 lines
798 B
TypeScript
23 lines
798 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
/**
|
|
* Tracks Page Visibility API state for the current document.
|
|
*
|
|
* Returns `true` when the tab is visible, `false` when hidden. Useful for
|
|
* pausing work (polling, animations, expensive DOM effects) while the tab
|
|
* is backgrounded. SSR-safe: defaults to `true` when `document` is undefined.
|
|
*/
|
|
export function usePageVisible(): boolean {
|
|
const [visible, setVisible] = useState(() =>
|
|
typeof document === 'undefined' ? true : document.visibilityState === 'visible',
|
|
);
|
|
|
|
useEffect(() => {
|
|
const onChange = () => setVisible(document.visibilityState === 'visible');
|
|
document.addEventListener('visibilitychange', onChange);
|
|
return () => document.removeEventListener('visibilitychange', onChange);
|
|
}, []);
|
|
|
|
return visible;
|
|
}
|