# 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.