Render SelectFields as MUI Selects

[CommandMC]

This renders most drop-down selection prompts inside Heroic. In turn, these dropdowns now work inside the Gamescope session.

Current issues:

• Controller navigation does not work, hitting "Down" opens the dropdown, with no way to navigate further down to other components
• There is a black box in the top-left of the component, where the label should be
• The dropdowns do not work while in a Dialog (they're rendered behind the Dialog)

---

Use the following Checklist if you have changed something on the Backend or Frontend:

• Tested the feature and it's working on a current and clean install.
• Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• Created / Updated Tests (If necessary)
• Created / Updated documentation (If necessary)

[arielj]

Looks good, but I left a comment about an accessibility feature that is not working with the new dialogs

[arielj]

There's one more thing I noticed, when using a RTL language, the arrow in the select field is in the wrong side of the element:

in main:

with these changes:

[arielj]

I've been testing a bit more, I found 1 issue and two small things:

---

one small thing is the categories and filters style changed and it's missing some padding:

• main:
  

• this branch:
  

---

the second small thing is that the controller hints (the instructions of what each button does at the bottom of the screen) shows incorrect hints for dropdowns, it thinks it's the context menu of library cards and it shows ( x ) Close Options incorrectly. This one can be fixed by using target.closest('.contextMenu') in line 60 of src/frontend/components/UI/ControllerHints/index.tsx

---

now the issue is that, when using a controller to navigate the UI (or a keyboard), you can get stuck focusing the X button of dialogs when the dialog's content is long and it shows a scrollbar:

• open the settings for a game
• in the wine tab (because it's long it will show a scrollbar), move up until you focus the X
• you can't move out of there (moving up/down scrolls the library page, moving left/right does nothing)

a smaller dialog doesn't have this problem:

• now use the mouse and change to the other tab (this is short and won't show a scrollbar)
• move up until you focus the X
• you can move out (moving up does nothing as expected, down/left/right moves focus to the tabs)

[Copilot]

Pull Request Overview

This PR updates drop-down selection components to render as Material UI Selects, enhancing controller navigation and dialog behavior within the Gamescope session. Key changes include replacing native options with MUI MenuItem components, refining gamepad navigation actions, and refactoring dialog components to use MUI's Dialog APIs. Reviewed Changes Copilot reviewed 30 out of 30 changed files in this pull request and generated no comments. Show a summary per file File Description src/frontend/screens/Settings/components/CustomWineProton.tsx Replaced native with MUI MenuItem for custom wine paths. src/frontend/screens/Library/components/InstallModal/* and related selector files Updated drop-down implementations in InstallModal sub-components. src/frontend/components/UI/SelectField/* and ThemeSelector/index.tsx Migrated from native select elements to MUI Select components. src/frontend/helpers/gamepad.ts Added new gamepad actions (tab/shiftTab) and helper functions. src/frontend/components/UI/Dialog/* Refactored dialog components to leverage MUI's Dialog for better UX. src/frontend/components/UI/ControllerHints/index.tsx Adjusted controller hints condition for detecting menus. src/common/types.ts and src/backend/main.ts Removed legacy types and updated gamepad event handling. src/frontend/App.css Adjusted z-index values to accommodate MUI Dialog layering. Comments suppressed due to low confidence (3) src/frontend/components/UI/ControllerHints/index.tsx:60 The condition for detecting context menus changed from '.MuiMenu-list' to '.contextMenu'. Verify this update is intentional and consistent with the rest of the UI component structure. } else if (target.closest('.contextMenu')) { src/frontend/components/UI/SelectField/index.tsx:39 [nitpick] Ensure that the new MUI Select component includes all necessary accessibility attributes (e.g., aria-label) to replicate the native select behavior. <Select src/frontend/helpers/gamepad.ts:146 [nitpick] Review the handling of 'isInMuiPopover' to ensure that simulating a 'tab' action in popover contexts does not introduce unintended navigation issues. } else if (isInMuiPopover()) {

[flavioislima]

LGTM