From 0ba29226a225434bce3b4c18e25055d1887f7dde Mon Sep 17 00:00:00 2001 From: CarterPerez-dev Date: Sun, 3 May 2026 06:58:37 -0400 Subject: [PATCH] feat(monitor/frontend): alert banner (one-amber-fill overlay, 30s auto-dismiss) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The only surface in the dashboard that uses amber as a fill color — the one-alarm-color rule reserves this paint for "look here." 48px strip in the alertbanner grid-area, dark text (--amber-fg #1a1a1a) on the amber fill for cross-room legibility, ellipsis on long messages, dismiss button at right. Returns null when the ui store has no currentAlert so the row collapses to zero and the center grid sits flush with the top strip. Auto-dismiss after 30s via setTimeout in useEffect; cleanup on unmount or alert change. role="alert" for screen readers. focus-visible outline 1px --amber-fg. Adds --amber-fg to ethos tokens — pairs explicitly with --amber so any future amber-fill surface uses the same dark text. Also cleans up an empty `//` line in the ethos comment block (stylelint scss/comment-no-empty). --- .../pages/dashboard/AlertBanner.module.scss | 44 +++++++++++++++++++ .../src/pages/dashboard/AlertBanner.tsx | 38 ++++++++++++++++ .../src/pages/dashboard/Dashboard.tsx | 2 + .../frontend/src/styles/_tokens.scss | 4 +- 4 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.module.scss create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.tsx diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.module.scss new file mode 100644 index 00000000..fb4458ec --- /dev/null +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.module.scss @@ -0,0 +1,44 @@ +// ©AngelaMos | 2026 +// AlertBanner.module.scss + +.banner { + grid-area: alertbanner; + display: flex; + align-items: center; + justify-content: space-between; + height: 48px; + padding: 0 16px; + background: var(--amber); + color: var(--amber-fg); + font-size: var(--type-body); + font-weight: 500; +} + +.message { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.dismiss { + display: inline-flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + background: transparent; + border: 0; + padding: 0; + color: var(--amber-fg); + cursor: pointer; + + &:hover { + color: #000; + } + + &:focus-visible { + outline: 1px solid var(--amber-fg); + outline-offset: 1px; + } +} diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.tsx new file mode 100644 index 00000000..329b4a4c --- /dev/null +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.tsx @@ -0,0 +1,38 @@ +// ©AngelaMos | 2026 +// AlertBanner.tsx + +import { useEffect } from 'react' +import { FiX } from 'react-icons/fi' +import { useUIStore } from '@/stores/ui' +import styles from './AlertBanner.module.scss' + +const AUTO_DISMISS_MS = 30_000 + +export function AlertBanner(): React.ReactElement | null { + const alert = useUIStore((s) => s.currentAlert) + const dismiss = useUIStore((s) => s.dismissAlert) + + useEffect(() => { + if (!alert) return + const id = setTimeout(dismiss, AUTO_DISMISS_MS) + return () => clearTimeout(id) + }, [alert, dismiss]) + + if (!alert) return null + + return ( + + ) +} + +AlertBanner.displayName = 'AlertBanner' diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx index cc5791b3..5caec687 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx @@ -1,6 +1,7 @@ // ©AngelaMos | 2026 // Dashboard.tsx +import { AlertBanner } from './AlertBanner' import styles from './Dashboard.module.scss' import { TopStrip } from './TopStrip' @@ -8,6 +9,7 @@ export function Dashboard(): React.ReactElement { return (
+