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)