3148375eb3
- 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.
38 lines
2.0 KiB
Markdown
38 lines
2.0 KiB
Markdown
# 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_mode` is 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.launcher` visibility flags to 3-way states.
|
|
- [ ] Implement `Launcher_Cfg_Section` wrapper component.
|
|
- [ ] Refactor `Launcher_Cfg_Health`.
|
|
- [ ] Refactor `Launcher_Cfg_Native_OS`.
|
|
- [ ] Refactor `Launcher_Cfg_Sync_Timers`.
|
|
- [ ] Refactor `Launcher_Cfg_Updates`.
|
|
- [ ] Final UI/UX Polish.
|