Don't render MKB settings on unsupported devices

src/modules/ui/dialog/settings-dialog.ts

@@ -220,6 +220,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
         requiredVariants: 'full',
         group: 'mkb',
         label: t('mouse-and-keyboard'),
+        note: !STATES.userAgent.capabilities.mkb ? CE('a', {
+            href: 'https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657',
+            target: '_blank',
+        }, '⚠️ ' + t('browser-unsupported-feature')) : null,
+        unsupported: !STATES.userAgent.capabilities.mkb,
         items: [
             PrefKey.NATIVE_MKB_ENABLED,
             PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB,
@@ -1336,12 +1341,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
 
                 // Add note
                 if (settingTabContent.note) {
-                    let $note;
-                    if (typeof settingTabContent.note === 'string') {
-                        $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.note);
-                    } else {
-                        $note = settingTabContent.note;
-                    }
+                    const $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.note);
 
                     $tabContent.appendChild($note);
                 }

src/types/index.d.ts

@@ -46,6 +46,7 @@ type BxStates = {
         isTv: boolean;
         capabilities: {
             touch: boolean;
+            mkb: boolean;
         };
     };
 

src/utils/global.ts

@@ -13,6 +13,7 @@ const isTv = userAgent.includes('smart-tv') || userAgent.includes('smarttv') ||
 const isVr = window.navigator.userAgent.includes('VR') && window.navigator.userAgent.includes('OculusBrowser');
 const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 const userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport;
+const supportMkb = AppInterface || !userAgent.match(/(android|iphone|ipad)/);
 
 export const STATES: BxStates = {
     supportedRegion: true,
@@ -35,6 +36,7 @@ export const STATES: BxStates = {
         isTv: isTv,
         capabilities: {
             touch: userAgentHasTouchSupport,
+            mkb: supportMkb,
         }
     },
 

src/utils/settings-storages/global-settings-storage.ts

@@ -393,10 +393,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             requiredVariants: 'full',
             label: t('enable-mkb'),
             default: false,
-            unsupported: ((): string | boolean => {
-                const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
-                return !AppInterface && userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
-            })(),
+            unsupported: !STATES.userAgent.capabilities.mkb,
             ready: (setting: SettingDefinition) => {
                 let note;
                 let url;