Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e4e2174c97e7bfd88cae697a6194aec935ace04d
OSIT-AE-App-Svelte/documentation/MODULE__AE_Events_Launcher_Config_Menu_new.md
Scott Idem d32355a1a2 docs(launcher): add cfg menu inventory and v3.1 design docs 
MODULE__AE_Events_Launcher_Config_Menu.md — v3.0 inventory of the
3-tab drawer layout (now superseded but kept as reference baseline).
MODULE__AE_Events_Launcher_Config_Menu_new.md — v3.1 unified design
spec that drove the sidebar tab migration.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-26 22:17:07 -04:00

4.5 KiB
Raw Blame History

Aether Events — Unified Launcher Configuration (Vision v3.1)

Status: Strategic Design / Unified Proposal Author: Gemini CLI (Interactive Agent) Target: Full consistency across all configuration modules.

1. Unified Design Language

To eliminate the "created by 3 different people" feel, all components must strictly adhere to this shared specification.

1.1 Color Palette & Semantics

  • Primary (Blue): Main actions, active tabs, and standard configuration toggles.
  • Secondary (Green): Safe actions (Connect, Sync, Apply).
  • Warning (Orange): Technical overrides that require caution (Timers, Native Shell).
  • Error (Red): Destructive actions (Resets, Shutdown, Kill Apps).
  • Surface (Gray): Containers, input backgrounds, and inactive states.

1.2 Typography & Spacing

  • Section Headers: text-sm font-bold uppercase tracking-tight (Provided by Wrapper).
  • Field Labels: text-[10px] font-bold uppercase tracking-wider opacity-60 mb-1.
  • Sub-Descriptions: text-[9px] italic opacity-40 leading-snug mt-1.
  • Status Badges: text-[8px] font-bold uppercase tracking-tighter.
  • Grid Standard:
    • Single Column for complex fields.
    • grid-cols-2 with gap-4 for standard inputs.
    • grid-cols-3 or grid-cols-4 only for small buttons or icon toggles.

2. Structural Reorganization (The "Aether" Layout)

The menu is now a Vertical Sidebar Modal. This allows for persistent navigation while dedicating the large right pane to content.

Tab 1: 🖥️ Display (General Operator)

Focus: What the screen looks like.

  • Category: Layout & UI
    • Presets: Oral/Default vs Poster Kiosk (One-tap setup).
    • Toggles: Header, Menu, Footer, Times visibility.
    • Formatting: Clock (12/24h), Date formats.
  • Category: Screen Saver
    • Idle Timeout (Minutes).
    • Mode: Image Cycle vs Video vs Custom.

Tab 2: 🔌 Connectivity (Onsite Tech)

Focus: How it talks to the network.

  • Category: WebSocket Control
    • Connection Status & Signal Strength.
    • Controller Mode: Local vs Remote vs Push.
    • Group Code: Channel sharding for multi-room management.
  • Category: API Context
    • Current Endpoint, Account, and Site context.

Tab 3: 🔄 Sync & Health (Onsite Tech)

Focus: Data integrity and performance.

  • Category: Sync Engine
    • Status: Active vs Paused.
    • Action: Force Sync Location (recursive metadata fetch).
    • Stats: Cached Files vs Total Files (Progress bar).
  • Category: System Telemetry
    • CPU & RAM usage (Visual gauges).
    • Heartbeat monitor (Last success timestamp).
    • Device Identity: Hostname, IP list, Local paths.

Tab 4: 🛠️ Native Shell (Specialized / Mac)

Focus: OS-level capabilities.

  • Category: App Control
    • Window: Maximize, Kiosk Mode, Fullscreen.
    • Automation: Kill presentation apps (Clean slate).
    • Remote: Virtual clicker (Prev/Next/Start/Stop).
  • Category: System Action
    • Displays: Extend vs Mirror (Native bridge).
    • Folders: Open Cache / Open Temp.
    • Power: Reboot / Shutdown (With confirmation).

Tab 5: 🖼️ Wallpaper (Branding)

Focus: Event-specific aesthetics.

  • Category: Customization
    • Primary Display: URL/Preset.
    • Secondary/Projector: URL/Preset.
    • Action: Apply to OS (Native) + Preview (Web).

Tab 6: 🧪 Advanced (Developer Mode)

Focus: Fine-tuning and updates.

  • Category: Performance
    • Polling Intervals (Event, Device, Room, Session, Presenter).
    • Cache Sharding (Prefix length).
  • Category: Launch Logic
    • Per-Profile Post-Open Delays (ms).
  • Category: Updates
    • Source: File vs URL.
    • Version: Current vs Target.
    • Action: Download/Install.

Tab 7: 🧹 Maintenance (Emergency)

Focus: Troubleshooting.

  • Category: Resets
    • Wipe IndexedDB (Module selective).
    • Clear LocalStorage (Reset config).
  • Category: Diagnostics
    • Raw Device JSON inspector.
    • Terminal Command Entry.

3. Implementation Plan: The "Cohesion" Refactor

  1. Standardize Launcher_Cfg_Section.svelte: Ensure padding and spacing are baked into the wrapper so children don't have to define it.
  2. Create Launcher_Cfg_Field.svelte: A new helper component to handle the Label + Description + Input pattern consistently.
  3. Audit Sub-Components: Update all 10 components to use the new colors, grid patterns, and typography.
  4. Polish Transitions: Ensure the Modal entry and Tab switching are butter-smooth with Svelte 5 transitions.
Reference in New Issue View Git Blame Copy Permalink