54 lines
2.5 KiB
Markdown
54 lines
2.5 KiB
Markdown
# Plan: Launcher Config UX Refinement (Cohesion & Stability)
|
|
|
|
The goal of this plan is to address the visual "bouncing", layering overload, and the misplaced close button in the new Launcher configuration modal.
|
|
|
|
## 1. Dimensional Stability
|
|
- **Problem:** Switching tabs causes the modal to resize vertically and horizontally, leading to a "bouncing" feel.
|
|
- **Solution:**
|
|
- Set a fixed height for the `Launcher_cfg` container (e.g., `h-[750px]`).
|
|
- Use `overflow-y-auto` only for the right-hand content pane.
|
|
- Ensure the sidebar has a stable width.
|
|
|
|
## 2. Visual Hierarchy & Layering
|
|
- **Problem:** Too many nested backgrounds (Page > Launcher > Modal > Inner Pane > Section Pane > Section Content).
|
|
- **Solution:**
|
|
- Flatten the background of the main content pane.
|
|
- Simplify `Launcher_Cfg_Section.svelte`:
|
|
- Remove `shadow-xl` from individual sections.
|
|
- Use subtler borders instead of strong "preset-outlined" colors.
|
|
- Remove the secondary background (`bg-white/5`) from the section content area.
|
|
- Standardize on a single, clean surface color for the right-hand pane.
|
|
|
|
## 3. The "Centered Close Button" Bug
|
|
- **Problem:** A close button is appearing in the middle of the screen.
|
|
- **Investigation:**
|
|
- Check for absolute-positioned elements in `Launcher_cfg.svelte` or `+layout.svelte`.
|
|
- Verify if Flowbite's `Modal` default close button is clashing with internal buttons.
|
|
- **Solution:**
|
|
- Consolidate all "Close" actions.
|
|
- Use the Modal's built-in top-right close button (if available) or a single, well-positioned button in the sidebar.
|
|
|
|
## 4. Implementation Steps
|
|
|
|
### Step 1: Update `Launcher_cfg.svelte`
|
|
- Set stable dimensions: `h-[750px] max-h-[90vh] w-[1000px] max-w-[95vw]`.
|
|
- Remove internal shadows and borders that conflict with the Modal container.
|
|
- Clean up the sidebar "Close" button.
|
|
|
|
### Step 2: Update `Launcher_cfg_section.svelte`
|
|
- Simplify the styling to reduce visual clutter.
|
|
- Remove `shadow-xl`.
|
|
- Use consistent padding and margins.
|
|
|
|
### Step 3: Update `+layout.svelte`
|
|
- Ensure the `Modal` is configured for a stable, large view without default padding issues.
|
|
- Verify the `modal_cfg_open` logic.
|
|
|
|
### Step 4: Add `Launcher_cfg_field.svelte` (Helper)
|
|
- Implement a unified field helper to standardize Label/Description/Input layouts across all tabs.
|
|
|
|
## 5. Verification
|
|
- Toggle between all 7 tabs. Verify zero layout shift (height/width remains constant).
|
|
- Check appearance in Light and Dark modes.
|
|
- Verify "Technical Mode" transitions.
|