mirror of
https://github.com/BigBodyCobain/Shadowbroker.git
synced 2026-05-27 17:42:29 +02:00
Shadowbroker
421682c447
Each alert toast had a 5-second auto-dismiss timer that fired even while the user was reading the card. This adds pause-on-hover: the dismiss timer stops while the mouse is over a toast and restarts (full lifetime) on mouse leave. The progress bar animation pauses with it, so the visual matches the actual remaining time. All other behavior is preserved: same cyber/mono styling, same spring slide-in, same risk-color border + glow, same warning icon, same LVL X/10 readout, same title/source layout, same click-to-fly + dismiss on body click, same × dismiss button. Implementation notes: - Extract a ToastCard sub-component so each card can own its own paused state (useState can't be array-indexed in the parent). - Move the auto-dismiss timer out of useAlertToasts.ts and into ToastCard. The hook previously scheduled the dismiss itself, which meant the UI couldn't pause it — only the component knows whether the user is interacting. - Add tests covering: title/source/severity render, auto-dismiss fires at 5s, hover pauses indefinitely, mouse-leave restarts the full lifetime, × dismisses without flying, body-click flies + dismisses. This implements the genuine UX improvement that PR #234 was reaching for, without #234's broken syntax, missing-field bug, duplicate timer logic, or design regression. Refs: #234 Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
ShadowBroker Frontend
Next.js 16 dashboard with MapLibre GL, Cesium, and Framer Motion.
Development
npm install
npm run dev # http://localhost:3000
API URL Configuration
The frontend needs to reach the backend (default port 8000). Resolution order:
NEXT_PUBLIC_API_URLenv var — if set, used as-is (build-time, baked by Next.js)- Server-side (SSR) — falls back to
http://localhost:8000 - Client-side (browser) — auto-detects using
window.location.hostname:8000
Common scenarios
| Scenario | Action needed |
|---|---|
Local dev (localhost:3000 + localhost:8000) |
None — auto-detected |
LAN access (192.168.x.x:3000) |
None — auto-detected from browser hostname |
| Public deploy (same host, port 8000) | None — auto-detected |
Backend on different port (e.g. 9096) |
Set NEXT_PUBLIC_API_URL=http://host:9096 before build |
| Backend on different host | Set NEXT_PUBLIC_API_URL=http://backend-host:8000 before build |
Behind reverse proxy (e.g. /api path) |
Set NEXT_PUBLIC_API_URL=https://yourdomain.com before build |
Setting the variable
# Shell (Linux/macOS)
NEXT_PUBLIC_API_URL=http://myserver:8000 npm run build
# PowerShell (Windows)
$env:NEXT_PUBLIC_API_URL="http://myserver:8000"; npm run build
# Docker Compose (set in .env file next to docker-compose.yml)
NEXT_PUBLIC_API_URL=http://myserver:8000
Note: This is a build-time variable. Changing it requires rebuilding the frontend.
Theming
Dark mode is the default. A light/dark toggle is available in the left panel toolbar.
Theme preference is persisted in localStorage as sb-theme and applied via
data-theme attribute on <html>. CSS variables in globals.css define all
structural colors for both themes.