From 71e0529960e63b41a18bc62fbc75c7542cc1ec0e Mon Sep 17 00:00:00 2001 From: CarterPerez-dev Date: Sun, 3 May 2026 09:43:27 -0400 Subject: [PATCH] feat(monitor/frontend): about modal (meme + project explainer, ethos-minimal) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Native opened from the TopStrip ? icon via useUIStore.aboutOpen. Ref-driven showModal()/close() in useEffect, onClose synced to the store so Escape closes both the dialog and the store flag in one round trip (no listener fight). Three short paragraphs: the meme origin, the data sources, and the keyboard shortcuts. The kbd-styled spans (mono + 1px --fg-4 outline) call out F and Esc. No animation on open/close beyond the browser's default showModal transition (which is OS UI, not decoration). No backdrop-click to close — Escape and the close button are enough; backdrop-click adds a fragile target===dialog comparison for marginal value. ::backdrop gets a 60% black tint so it reads as a modal, not a layer cake. prose line-height 1.4 (looser than the 1.25 table tightness because prose needs readability — operator-density still applies but Tufte data-ink isn't violated by paragraph leading). Plan 5 Task 23 Design QA: no illustration, no confetti, no tooltip arrows, monochrome border, native ::backdrop only. --- .../src/pages/dashboard/About.module.scss | 74 +++++++++++++++++++ .../frontend/src/pages/dashboard/About.tsx | 60 +++++++++++++++ .../src/pages/dashboard/Dashboard.tsx | 2 + 3 files changed, 136 insertions(+) create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.module.scss create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.tsx diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.module.scss new file mode 100644 index 00000000..5771c1e1 --- /dev/null +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.module.scss @@ -0,0 +1,74 @@ +// ©AngelaMos | 2026 +// About.module.scss + +.dialog { + background: var(--bg-panel); + color: var(--fg-1); + border: 1px solid var(--fg-4); + padding: 0; + max-width: 480px; + width: 90%; + font-family: var(--font-sans); + font-size: var(--type-body); + + &::backdrop { + background: rgb(0, 0, 0, 60%); + } +} + +.head { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; + border-bottom: 1px solid var(--fg-4); +} + +.title { + font-size: var(--type-label); + letter-spacing: var(--letter-spacing-label); + text-transform: uppercase; + color: var(--fg-2); +} + +.close { + display: inline-flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + background: transparent; + border: 0; + padding: 0; + color: var(--fg-3); + cursor: pointer; + + &:hover { + color: var(--fg-1); + } + + &:focus-visible { + outline: 1px solid var(--fg-2); + outline-offset: 1px; + } +} + +.body { + display: flex; + flex-direction: column; + gap: 10px; + padding: 12px; + color: var(--fg-2); + line-height: 1.4; + + p { + margin: 0; + } +} + +.kbd { + font-family: var(--font-mono); + color: var(--fg-1); + border: 1px solid var(--fg-4); + padding: 0 4px; +} diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.tsx new file mode 100644 index 00000000..6cabcc55 --- /dev/null +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/About.tsx @@ -0,0 +1,60 @@ +// ©AngelaMos | 2026 +// About.tsx + +import { useEffect, useRef } from 'react' +import { FiX } from 'react-icons/fi' +import { useUIStore } from '@/stores/ui' +import styles from './About.module.scss' + +export function About(): React.ReactElement { + const isOpen = useUIStore((s) => s.aboutOpen) + const close = useUIStore((s) => s.closeAbout) + const dialogRef = useRef(null) + + useEffect(() => { + const dialog = dialogRef.current + if (!dialog) return + if (isOpen && !dialog.open) { + dialog.showModal() + } else if (!isOpen && dialog.open) { + dialog.close() + } + }, [isOpen]) + + return ( + +
+ Monitoring the Situation + +
+
+

+ "Monitoring the situation" is a Twitter/X meme from June 2025. This is + the version that actually monitors the situation. +

+

+ Operator-grade real-time dashboard pulling live data from ten + high-signal feeds: DShield mass-scan, Cloudflare Radar BGP/outage, NVD + + EPSS CVE velocity, CISA KEV, ransomware.live, Coinbase BTC/ETH ticks, + USGS earthquakes, NOAA SWPC space weather, Wikipedia ITN + GDELT theme + spikes, and the ISS live position. Single Go binary backend, React 19 + frontend, Postgres + Redis, served behind a Cloudflare Tunnel. +

+

+ F enters presentation mode (full + viewport, chrome hidden). Esc exits + or closes this dialog. +

+
+ + ) +} + +About.displayName = 'About' 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 d191ab81..1074ddd7 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 @@ -11,6 +11,7 @@ import { KEVPanel } from '@/pages/panels/KEVPanel' import { RansomwarePanel } from '@/pages/panels/RansomwarePanel' import { SpaceWeatherPanel } from '@/pages/panels/SpaceWeatherPanel' import { useUIStore } from '@/stores/ui' +import { About } from './About' import { AlertBanner } from './AlertBanner' import { BottomTicker } from './BottomTicker' import styles from './Dashboard.module.scss' @@ -47,6 +48,7 @@ export function Dashboard(): React.ReactElement { + ) }