Add notes to Shortcuts UI

src/assets/css/root.styl

@@ -87,6 +87,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     padding: 0 !important;
 }
 
+.bx-prompt {
+    font-family: var(--bx-promptfont-font);
+}
+
 /* Hide UI elements */
 #headerArea, #uhfSkipToMain, .uhf-footer {
     display: none;

src/assets/css/stream-settings.styl

@@ -127,6 +127,28 @@
 
 .bx-quick-settings-tab-contents {
     div[data-group="shortcuts"] {
+        > div {
+            &[data-has-gamepad=true] {
+                > div:first-of-type {
+                    display: none;
+                }
+
+                > div:last-of-type {
+                    display: block;
+                }
+            }
+
+            &[data-has-gamepad=false] {
+                > div:first-of-type {
+                    display: block;
+                }
+
+                > div:last-of-type {
+                    display: none;
+                }
+            }
+        }
+
         .bx-shortcut-profile {
             width: 100%;
             height: 36px;
@@ -134,13 +156,16 @@
             margin-bottom: 10px;
         }
 
+        .bx-shortcut-note {
+            font-size: 14px;
+        }
+
         .bx-shortcut-row {
             display: flex;
             margin-bottom: 10px;
 
             label.bx-prompt {
                 flex: 1;
-                font-family: var(--bx-promptfont-font);
                 font-size: 26px;
                 margin-bottom: 0;
             }

src/modules/controller-shortcut.ts

@@ -37,7 +37,7 @@ export class ControllerShortcut {
 
     static #$selectProfile: HTMLSelectElement;
     static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {};
-    static #$remap: HTMLElement;
+    static #$container: HTMLElement;
 
     static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} = {};
 
@@ -144,7 +144,7 @@ export class ControllerShortcut {
 
     static #updateProfileList(e?: GamepadEvent) {
         const $select = ControllerShortcut.#$selectProfile;
-        const $remap = ControllerShortcut.#$remap;
+        const $container = ControllerShortcut.#$container;
 
         const $fragment = document.createDocumentFragment();
 
@@ -175,20 +175,11 @@ export class ControllerShortcut {
         if (hasGamepad) {
             $select.appendChild($fragment);
 
-            $remap.classList.remove('bx-gone');
-
-            $select.disabled = false;
             $select.selectedIndex = 0;
             $select.dispatchEvent(new Event('change'));
-        } else {
-            $remap.classList.add('bx-gone');
-
-            $select.disabled = true;
-            const $option = CE<HTMLOptionElement>('option', {}, '---');
-            $fragment.appendChild($option);
-
-            $select.appendChild($fragment);
         }
+
+        $container.dataset.hasGamepad = hasGamepad.toString();
     }
 
     static #switchProfile(profile: string) {
@@ -282,19 +273,31 @@ export class ControllerShortcut {
             $baseSelect.appendChild($optGroup);
         }
 
-        const $container = CE('div', {});
+        let $remap: HTMLElement;
+        let $selectProfile: HTMLSelectElement;
 
-        const $profile = CE<HTMLSelectElement>('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'});
+        const $container = CE('div', {'data-has-gamepad': 'false'},
-        $profile.addEventListener('change', e => {
+            CE('div', {},
-            ControllerShortcut.#switchProfile($profile.value);
+                CE('p', {'class': 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
+            ),
+
+            $remap = CE('div', {},
+                $selectProfile = CE('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'}),
+                CE('p', {'class': 'bx-shortcut-note'},
+                    CE('span', {'class': 'bx-prompt'}, PrompFont.HOME),
+                    ': ' + t('controller-shortcuts-xbox-note'),
+                ),
+            ),
+        );
+
+        $selectProfile.addEventListener('change', e => {
+            ControllerShortcut.#switchProfile($selectProfile.value);
         });
 
-        $container.appendChild($profile);
-
         const onActionChanged = (e: Event) => {
             const $target = e.target as HTMLSelectElement;
 
-            const profile = $profile.value;
+            const profile = $selectProfile.value;
             const button: unknown = $target.dataset.button;
             const action = $target.value as ShortcutAction;
 
@@ -310,7 +313,6 @@ export class ControllerShortcut {
             !(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action);
         };
 
-        const $remap = CE('div', {'class': 'bx-gone'});
         let button: keyof typeof buttons;
         // @ts-ignore
         for (button in buttons) {
@@ -342,8 +344,8 @@ export class ControllerShortcut {
 
         $container.appendChild($remap);
 
-        ControllerShortcut.#$selectProfile = $profile;
+        ControllerShortcut.#$selectProfile = $selectProfile;
-        ControllerShortcut.#$remap = $remap;
+        ControllerShortcut.#$container = $container;
 
         // Detect when gamepad connected/disconnect
         window.addEventListener('gamepadconnected', ControllerShortcut.#updateProfileList);

src/utils/translation.ts

@@ -60,7 +60,7 @@ const Texts = {
     "controller": "Controller",
     "controller-shortcuts": "Controller shortcuts",
     "controller-shortcuts-connect-note": "Connect a controller to use this feature",
-    "controller-shortcuts-xbox-note": "The Xbox button is the one that opens the Guide menu",
+    "controller-shortcuts-xbox-note": "Button to open the Guide menu",
     "controller-vibration": "Controller vibration",
     "copy": "Copy",
     "custom": "Custom",