You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
enhancement: unify modal UX with frosted panels, icons, and clear controller focus #172
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).
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.
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.
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
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
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.