Skip to content

enhancement: unify modal UX with frosted panels, icons, and clear controller focus #172

Description

@nextestudios

Problem

ControlFS uses several modal surfaces for confirmations, action menus, errors, passwords, progress, operation results, and pickers. Their visual hierarchy and action presentation are not yet defined as one cohesive system. On a TV, controller users need to understand what each option does and see clearly which option is focused.

Goal

Improve the UX of all modal surfaces with a consistent, controller-first design inspired by the attached Apple TV context-menu reference: a dark frosted-glass panel, rounded corners, subtle depth, clear action icons, and a strong focus highlight. Use the reference as visual inspiration only; keep ControlFS's own identity, assets, and behavior.

Scope

Apply the shared modal design to every existing modal/dialog/menu/picker in ControlFS, including confirmation and warning dialogs, item/action menus, password prompts, errors, progress and operation-result dialogs, and folder/location pickers. New modal surfaces should use the same system.

Requirements

  • Establish a shared visual system for modal surfaces: dark translucent frosted material, background blur/dimming, rounded panel corners, subtle edge and shadow, consistent spacing, typography, and sizing.
  • Add a meaningful icon to each actionable option where it improves recognition; use consistent original/vector or platform-native symbols. Icons must reinforce the text label, never replace it.
  • Make the focused controller option unmistakable with a high-contrast filled highlight, clear focus treatment, and readable foreground text.
  • Group related actions and use separators or headings where they clarify the choice. Keep destructive actions visually distinct and preserve safe initial focus (for example, Cancel for sensitive confirmations).
  • Show button prompts from the active controller family for modal actions, reusing the existing dynamic prompt and glyph systems (feat: create original vector button glyphs for Xbox, PlayStation, Nintendo and generic layouts #33–enhancement: make the action bar fully context-sensitive #35). Prompts must match the action that will run.
  • Keep every current action, validation rule, cancel path, keyboard fallback, focus behavior, and safety confirmation. This is a presentation and UX pass; it must not remove or silently change existing functionality.
  • Ensure dialogs remain legible and usable with reduced transparency, high contrast, blur unavailable, and 720p/handheld layouts. Provide a solid-background fallback when frosted material is unavailable or harms readability.
  • Keep modal stacking and backdrop behavior predictable: the active modal receives input; underlying content cannot be activated; closing a modal restores focus to the correct item.
  • Avoid unnecessary animation; transitions must not delay controller input or obscure errors and progress feedback.

Controller UX

Open any modal → the same visual language and navigation rules apply. D-pad/stick moves among clearly labeled options; the active choice is highlighted; button prompts show the correct controller glyphs; Back follows that modal's existing cancel/close behavior. Dangerous choices remain distinguishable and do not become the default focused action.

Acceptance Criteria

  • All current modal surfaces use the shared frosted panel, spacing, typography, icon, and focus system.
  • A user can identify each action from its icon and text, and can identify the focused option at TV distance without relying on color alone.
  • Xbox, PlayStation, Nintendo, and generic controller prompts use the right glyphs and invoke the labeled action.
  • Existing modal behaviors and safety rules continue to work, including safe focus on sensitive confirmations, validation, cancellation, and focus restoration.
  • Underlying content cannot receive controller input while a modal is active.
  • Dialogs remain readable when blur/transparency is unavailable or reduced, and fit 720p, 1080p, 4K, and handheld screens without clipping.
  • No current modal action or capability is lost.

Testing

Review every modal type at 720p, 1080p, 4K, and handheld sizes. Exercise focus, confirm, Back/cancel, safe defaults, nested dialogs, and modal stacking with Xbox, PlayStation, Nintendo, and generic profiles. Verify high-contrast/reduced-transparency fallback and compare before/after behavior to confirm current actions remain available.

Dependencies


MoSCoW priority: Should have for 1.0. Consistent, legible modals are important to a controller-first experience; existing modal flows remain usable while the visual refresh is pending.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: uiViews, layout, themingmoscow: shouldMoSCoW: important, planned for 1.0 if time allowstype: enhancementImproves an existing capabilitytype: uxInteraction and flow work

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions