anti/DECNET
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(decnet_web/Layout): topbar dark/light toggle with circular reveal

Browse Source 
User-facing theme toggle ships now that the design system has
been audited end-to-end. A Sun/Moon button lives between the
threat indicator and the SYSTEM status pill in the topbar — same
slim 28x28 voice as the rest of the topbar controls, no chrome
shouting at the user.

Click coords drive a View Transitions API circle clip-path that
grows from the cursor to the farthest viewport corner over 520ms
with the project's standard --ease curve. Browsers without
startViewTransition (older Firefox, Safari < 18) fall through to
an unanimated swap — the hook returns instantly in that case.

Persistence is two-tier:
 - localStorage decnet_theme — the user's saved preference, the
   thing the topbar toggle writes. Survives reloads, applies
   everywhere.
 - sessionStorage decnet_theme_lab — dev-mode lab override (Task
   3). Tab-scoped, wins on boot so devs can A/B without nuking
   the saved preference.

App.tsx hydrates both on first mount in the right order so the
correct theme is on <html> before the first paint.

useThemeToggle is a small hook in lib/ rather than a Layout-only
helper so the same toggle can be reused later from a settings page
or hotkey.
This commit is contained in:
anti
2026-05-09 04:01:24 -04:00
parent 9cab37db3a
commit 438a6e3e45
7 changed files with 262 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
decnet_web/src/components/Layout.css
View File

@@ -212,6 +212,29 @@
flex-shrink: 0;
}
/* Dark/light toggle in topbar.
* Sits between the threat indicator and the system status pill,
* matching the slim/quiet voice of the rest of the topbar. */
.theme-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid var(--border);
color: var(--accent);
cursor: pointer;
transition: border-color var(--dur-quick) var(--ease),
color var(--dur-quick) var(--ease),
background var(--dur-quick) var(--ease);
}
.theme-toggle-btn:hover {
background: var(--accent-tint-10);
border-color: var(--accent);
}
.crumbs {
display: flex;
align-items: center;

23
decnet_web/src/components/Layout.tsx
View File

@@ -4,9 +4,10 @@ import {
Menu, X, Search, Activity, LayoutDashboard, Terminal, Settings, LogOut,
Server, Archive, Package, Network, ChevronDown, ChevronRight, HardDrive,
ShieldAlert, Bell, Webhook, Lock, Crosshair, Fingerprint, Zap, Cpu, Mail,
Target, FileText, Sliders,
Target, FileText, Sliders, Sun, Moon,
} from '../icons';
import { prefetchRoute } from '../routePrefetch';
import { useThemeToggle } from '../lib/useThemeToggle';
import './Layout.css';
type ThreatLevel = 'nominal' | 'elevated' | 'critical';
@@ -207,6 +208,7 @@ const Layout: React.FC<LayoutProps> = ({
<span>THREAT: {threatLabel}</span>
</div>
)}
<ThemeToggleButton />
<div className="topbar-status">
<span
className="matrix-text"
@@ -228,6 +230,25 @@ const Layout: React.FC<LayoutProps> = ({
);
};
/* Topbar dark/light toggle. Click coords drive the circular reveal
* animation in useThemeToggle so the swap visually propagates from
* the cursor outward — see lib/useThemeToggle.ts. */
const ThemeToggleButton: React.FC = () => {
const { theme, toggle } = useThemeToggle();
const isLight = theme === 'light';
return (
<button
type="button"
className="theme-toggle-btn"
onClick={(e) => toggle({ clientX: e.clientX, clientY: e.clientY })}
aria-label={`Switch to ${isLight ? 'dark' : 'light'} mode`}
title={`Switch to ${isLight ? 'dark' : 'light'} mode`}
>
{isLight ? <Moon size={14} /> : <Sun size={14} />}
</button>
);
};
interface NavItemProps {
to: string;
icon: React.ReactNode;