browser/openspec/changes/redesign-platform-web-themes-menu/specs/platform-web-theme-menu/spec.md

platform-web-theme-menu Specification

ADDED Requirements

Requirement: Default black mecha theme

The platform web console SHALL default to a black mecha operations visual theme.

Scenario: New visitor loads the console

• WHEN no stored theme preference exists
• THEN the active palette is mecha-black
• AND the active background preset is mecha-grid
• AND primary surfaces use dark mecha panel materials rather than pink magical materials

Requirement: Selectable magical-girl theme

The platform web console SHALL retain a selectable magical-girl theme.

Scenario: User selects magical-girl palette

• WHEN the magical-girl palette is active
• THEN shell navigation, cards, panels, and global particles use pink/gold magical materials
• AND the global particle layer shows a visible magic circle or equivalent magical ultimate motif

Requirement: Theme-specific frames and panels

Shared framed UI surfaces SHALL vary by active theme family.

Scenario: Comparing themes

• WHEN the user switches between mecha and magical-girl themes
• THEN repeated panels, cards, and navigation entries change border treatment, fill material, and glow style
• AND the change is not limited to text color or accent color

Requirement: Collapsible admin sidebar menu

The application shell SHALL render the primary menu as a compact admin sidebar with expanded and collapsed states.

Scenario: User views the shell menu

• WHEN primary navigation routes are available
• THEN they appear as high-level sidebar items with icons, bold labels, and active state framing
• AND no single-column / double-column menu mode is shown

Requirement: Sidebar collapse toggle

The application shell SHALL provide a sidebar toggle for icon-only and full-menu states.

Scenario: User changes sidebar state

• WHEN the user activates the sidebar toggle
• THEN the sidebar switches between a narrow icon rail and an expanded text menu
• AND route navigation remains available in both states

Requirement: Global theme particles only

Theme ultimate effects SHALL be implemented through the shared global background and particle layers.

Scenario: New decorative effect is needed

• WHEN adding theme-level particles, magic circles, scanner sweeps, or sparkles
• THEN the implementation uses components/MagicalParticleLayer.tsx
• AND page-local fixed decorative DOM elements are not introduced