- Introduced 'Launcher_Cfg_Section' with 3-way state support (collapsed, auto, pinned). - Implemented 'handle_section_expand' coordinator in 'launcher_cfg.svelte' for single-active-section behavior. - Overhauled all configuration sub-components to participate in the auto-collapse logic. - Updated 'ae_events_stores.ts' with new persistent section states. - Synchronized 'launcher_cfg_template.svelte' with the new pattern for future extensions.
2.0 KiB
2.0 KiB
Project: Launcher Configuration UI/UX Overhaul
Status: IN-PROGRESS Goal: Create a standardized, responsive, and categorized configuration interface for the AE Events Launcher.
1. Objectives
- Standardization: Use consistent naming (
snake_case), styling, and layout across all config pieces. - Flexibility: Support mobile, tablet, and high-res Macbook displays using responsive widths.
- Intelligent Collapsing: Implement a 3-way state logic:
collapsed,auto_collapse,pinned. - Contextual Fields: Hide technical/editable fields unless
$ae_loc.edit_modeis enabled.
2. 3-Way State Logic
collapsed: Section content is hidden.auto: Section is expanded by default, but closes if another "auto" section is opened.pinned: Section is expanded and ignores the auto-collapse signals from other sections.
3. Component Architecture
Launcher_Cfg: The main container with Tabbed Navigation (System, Sync, General).Launcher_Cfg_Section: Shared wrapper component providing the header, 3-way toggle, and responsive container.- Sub-components: Individual sections (Health, Native OS, Timers, etc.) refactored to use the shared wrapper.
4. Feature Matrix & edit_mode
| Component | Always Visible (Read-Only) | Edit Mode Only (Write/Technical) |
|---|---|---|
| Health | Heartbeat Status, RAM/CPU Gauges | Raw Metadata JSON, Hostname, IPs |
| Native OS | Folder Open Buttons, Recording Toggle | Manual Terminal CMD, Reset Wallpaper |
| Sync | Sync Stats (Total/Cached) | Millisecond Timers, Hash Prefix Length |
| Updates | Current Version, Check Button | Update Path/URL inputs |
5. Progress Tracker
- Migrate
events_loc.launchervisibility flags to 3-way states. - Implement
Launcher_Cfg_Sectionwrapper component. - Refactor
Launcher_Cfg_Health. - Refactor
Launcher_Cfg_Native_OS. - Refactor
Launcher_Cfg_Sync_Timers. - Refactor
Launcher_Cfg_Updates. - Final UI/UX Polish.