feat(web-ui): replace dropdown menus with checkboxes (#3455)

src_assets/common/assets/web/Checkbox.vue

@@ -0,0 +1,120 @@
+<script setup>
+const model = defineModel({ required: true });
+const slots = defineSlots();
+const props = defineProps({
+  class: {
+    type: String,
+    default: ""
+  },
+  desc: {
+    type: String,
+    default: null
+  },
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  localePrefix: {
+    type: String,
+    default: "missing-prefix"
+  },
+  default: {
+    type: undefined,
+    default: null,
+  }
+});
+
+// Add the mandatory class values
+const extendedClassStr = (() => {
+  let values = props.class.split(" ");
+  if (!values.includes("form-check")) {
+    values.push("form-check");
+  }
+  return values.join(" ");
+})();
+
+// Map the value to boolean representation if possible, otherwise return null.
+const mapToBoolRepresentation = (value) => {
+  // Try literal values first
+  if (value === true || value === false) {
+    return { possibleValues: [true, false], value: value };
+  }
+  if (value === 1 || value === 0) {
+    return { possibleValues: [1, 0], value: value };
+  }
+
+  const stringPairs = [
+    ["true", "false"],
+    ["1", "0"],
+    ["enabled", "disabled"],
+    ["enable", "disable"],
+    ["yes", "no"],
+    ["on", "off"]
+  ];
+
+  value = `${value}`.toLowerCase().trim();
+  for (const pair of stringPairs) {
+    if (value === pair[0] || value === pair[1]) {
+      return { possibleValues: pair, value: value };
+    }
+  }
+
+  return null;
+}
+
+// Determine the true/false values for the checkbox
+const checkboxValues = (() => {
+  const mappedValues = (() => {
+    const boolValues = mapToBoolRepresentation(model.value);
+    if (boolValues !== null) {
+      return boolValues.possibleValues;
+    }
+
+    // Return fallback if nothing matches
+    console.error(`Checkbox value ${model.value} did not match any acceptable pattern!`);
+    return ["true", "false"];
+  })();
+
+  return { truthy: mappedValues[0], falsy: mappedValues[1] };
+})();
+const parsedDefaultPropValue = (() => {
+  const boolValues = mapToBoolRepresentation(props.default);
+  if (boolValues !== null) {
+    // Convert truthy to true/false.
+    return boolValues.value === boolValues.possibleValues[0];
+  }
+
+  return null;
+})();
+
+const labelField = props.label ?? `${props.localePrefix}.${props.id}`;
+const descField = props.desc ?? `${props.localePrefix}.${props.id}_desc`;
+const showDesc = props.desc !== "" || Object.entries(slots).length > 0;
+const showDefValue = parsedDefaultPropValue !== null;
+const defValue = parsedDefaultPropValue ? "_common.enabled_def_cbox" : "_common.disabled_def_cbox";
+</script>
+
+<template>
+  <div :class="extendedClassStr">
+    <label :for="props.id" :class="`form-check-label${showDesc ? ' mb-2' : ''}`">
+      {{ $t(labelField) }}
+      <div class="mt-0 form-text" v-if="showDefValue">
+        {{ $t(defValue) }}
+      </div>
+    </label>
+    <input type="checkbox"
+           class="form-check-input"
+           :id="props.id"
+           v-model="model"
+           :true-value="checkboxValues.truthy"
+           :false-value="checkboxValues.falsy" />
+    <div class="form-text" v-if="showDesc">
+      {{ $t(descField) }}
+      <slot></slot>
+    </div>
+  </div>
+</template>

src_assets/common/assets/web/apps.html

@@ -116,15 +116,13 @@
           <div id="appOutputHelp" class="form-text">{{ $t('apps.output_desc') }}</div>
         </div>
         <!-- prep-cmd -->
-        <div class="mb-3">
+        <Checkbox class="mb-3"
-          <label for="excludeGlobalPrep" class="form-label">{{ $t('apps.global_prep_name') }}</label>
+                  id="excludeGlobalPrep"
-          <select id="excludeGlobalPrep" class="form-select" v-model="editForm['exclude-global-prep-cmd']">
+                  label="apps.global_prep_name"
-            <option v-for="val in [false, true]" :value="val">
+                  desc="apps.global_prep_desc"
-              {{ !val ? $t('_common.enabled') : $t('_common.disabled') }}
+                  v-model="editForm['exclude-global-prep-cmd']"
-            </option>
+                  default="true"
-          </select>
+        ></Checkbox>
-          <div class="form-text">{{ $t('apps.global_prep_desc') }}</div>
-        </div>
         <div class="mb-3">
           <label for="appName" class="form-label">{{ $t('apps.cmd_prep_name') }}</label>
           <div class="form-text">{{ $t('apps.cmd_prep_desc') }}</div>
@@ -152,12 +150,12 @@
                 <td>
                   <input type="text" class="form-control monospace" v-model="c.undo" />
                 </td>
-                <td v-if="platform === 'windows'">
+                <td v-if="platform === 'windows'" class="align-middle">
-                  <div class="form-check">
+                  <Checkbox :id="'prep-cmd-admin-' + i"
-                    <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
+                            label="_common.elevated"
-                      true-value="true" false-value="false" />
+                            desc=""
-                    <label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('_common.elevated') }}</label>
+                            v-model="c.elevated"
-                  </div>
+                  ></Checkbox>
                 </td>
                 <td>
                   <button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">
@@ -208,26 +206,30 @@
           <div id="appWorkingDirHelp" class="form-text">{{ $t('apps.working_dir_desc') }}</div>
         </div>
         <!-- elevation -->
-        <div class="mb-3 form-check" v-if="platform === 'windows'">
+        <Checkbox v-if="platform === 'windows'"
-          <label for="appElevation" class="form-check-label">{{ $t('_common.run_as') }}</label>
+                  class="mb-3"
-          <input type="checkbox" class="form-check-input" id="appElevation" v-model="editForm.elevated"
+                  id="appElevation"
-            true-value="true" false-value="false" />
+                  label="_common.run_as"
-          <div class="form-text">{{ $t('apps.run_as_desc') }}</div>
+                  desc="apps.run_as_desc"
-        </div>
+                  v-model="editForm.elevated"
+                  default="false"
+        ></Checkbox>
         <!-- auto-detach -->
-        <div class="mb-3 form-check">
+        <Checkbox class="mb-3"
-          <label for="autoDetach" class="form-check-label">{{ $t('apps.auto_detach') }}</label>
+                  id="autoDetach"
-          <input type="checkbox" class="form-check-input" id="autoDetach" v-model="editForm['auto-detach']"
+                  label="apps.auto_detach"
-            true-value="true" false-value="false" />
+                  desc="apps.auto_detach_desc"
-          <div class="form-text">{{ $t('apps.auto_detach_desc') }}</div>
+                  v-model="editForm['auto-detach']"
-        </div>
+                  default="true"
+        ></Checkbox>
         <!-- wait for all processes -->
-        <div class="mb-3 form-check">
+        <Checkbox class="mb-3"
-          <label for="waitAll" class="form-check-label">{{ $t('apps.wait_all') }}</label>
+                  id="waitAll"
-          <input type="checkbox" class="form-check-input" id="waitAll" v-model="editForm['wait-all']"
+                  label="apps.wait_all"
-            true-value="true" false-value="false" />
+                  desc="apps.wait_all_desc"
-          <div class="form-text">{{ $t('apps.wait_all_desc') }}</div>
+                  v-model="editForm['wait-all']"
-        </div>
+                  default="true"
+        ></Checkbox>
         <!-- exit timeout -->
         <div class="mb-3">
           <label for="exitTimeout" class="form-label">{{ $t('apps.exit_timeout') }}</label>
@@ -358,11 +360,13 @@
   import { createApp } from 'vue'
   import { initApp } from './init'
   import Navbar from './Navbar.vue'
+  import Checkbox from './Checkbox.vue'
   import { Dropdown } from 'bootstrap/dist/js/bootstrap'
 
   const app = createApp({
     components: {
-      Navbar
+      Navbar,
+      Checkbox
     },
     data() {
       return {
@@ -415,9 +419,9 @@
         if (this.editForm["detached"] === undefined)
           this.editForm["detached"] = [];
         if (this.editForm["exclude-global-prep-cmd"] === undefined)
-          this.editForm["exclude-global-prep-cmd"] = [];
+          this.editForm["exclude-global-prep-cmd"] = false;
         if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
-          this.editForm["elevated"] = [];
+          this.editForm["elevated"] = false;
         }
         if (this.editForm["auto-detach"] === undefined) {
           this.editForm["auto-detach"] = true;

src_assets/common/assets/web/configs/tabs/AudioVideo.vue

@@ -6,6 +6,7 @@ import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
 import DisplayOutputSelector from './audiovideo/DisplayOutputSelector.vue'
 import DisplayDeviceOptions from "./audiovideo/DisplayDeviceOptions.vue";
 import DisplayModesSettings from "./audiovideo/DisplayModesSettings.vue";
+import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -54,14 +55,12 @@ const config = ref(props.config)
         </div>
 
         <!-- Install Steam Audio Drivers -->
-        <div class="mb-3">
+        <Checkbox class="mb-3"
-          <label for="install_steam_audio_drivers" class="form-label">{{ $t('config.install_steam_audio_drivers') }}</label>
+                  id="install_steam_audio_drivers"
-          <select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
+                  locale-prefix="config"
-            <option value="disabled">{{ $t('_common.disabled') }}</option>
+                  v-model="config.install_steam_audio_drivers"
-            <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+                  default="true"
-          </select>
+        ></Checkbox>
-          <div class="form-text">{{ $t('config.install_steam_audio_drivers_desc') }}</div>
-        </div>
       </template>
     </PlatformLayout>
 

src_assets/common/assets/web/configs/tabs/General.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Checkbox from '../../Checkbox.vue'
 import { ref } from 'vue'
 
 const props = defineProps({
@@ -100,12 +101,12 @@ function removeCmd(index) {
           <td>
             <input type="text" class="form-control monospace" v-model="c.undo" />
           </td>
-          <td v-if="platform === 'windows'">
+          <td v-if="platform === 'windows'" class="align-middle">
-            <div class="form-check">
+            <Checkbox :id="'prep-cmd-admin-' + i"
-              <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
+                      label="_common.elevated"
-                     true-value="true" false-value="false" />
+                      desc=""
-              <label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('config.elevated') }}</label>
+                      v-model="c.elevated"
-            </div>
+            ></Checkbox>
           </td>
           <td>
             <button class="btn btn-danger" @click="removeCmd(i)">
@@ -124,14 +125,12 @@ function removeCmd(index) {
     </div>
 
     <!-- Notify Pre-Releases -->
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-        <label for="notify_pre_releases" class="form-label">{{ $t('config.notify_pre_releases') }}</label>
+              id="notify_pre_releases"
-        <select id="notify_pre_releases" class="form-select" v-model="config.notify_pre_releases">
+              locale-prefix="config"
-            <option value="disabled">{{ $t('_common.disabled') }}</option>
+              v-model="config.notify_pre_releases"
-            <option value="enabled">{{ $t('_common.enabled') }}</option>
+              default="false"
-        </select>
+    ></Checkbox>
-        <div class="form-text">{{ $t('config.notify_pre_releases_desc') }}</div>
-    </div>
   </div>
 </template>
 

src_assets/common/assets/web/configs/tabs/Inputs.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import PlatformLayout from '../../PlatformLayout.vue'
+import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -13,14 +14,12 @@ const config = ref(props.config)
 <template>
   <div id="input" class="config-page">
     <!-- Enable Gamepad Input -->
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-      <label for="controller" class="form-label">{{ $t('config.controller') }}</label>
+              id="controller"
-      <select id="controller" class="form-select" v-model="config.controller">
+              locale-prefix="config"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              v-model="config.controller"
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
+              default="true"
-      </select>
+    ></Checkbox>
-      <div class="form-text">{{ $t('config.controller_desc') }}</div>
-    </div>
 
     <!-- Emulated Gamepad Type -->
     <div class="mb-3" v-if="config.controller === 'enabled' && platform !== 'macos'">
@@ -44,63 +43,53 @@ const config = ref(props.config)
       <div class="form-text">{{ $t('config.gamepad_desc') }}</div>
     </div>
 
-    <div class="accordion" v-if="config.gamepad === 'ds4'">
+    <!-- Additional options based on gamepad type -->
-      <div class="accordion-item">
+    <template v-if="config.controller === 'enabled'">
-        <h2 class="accordion-header">
+      <template v-if="config.gamepad === 'ds4' || (config.gamepad === 'auto' && platform === 'windows')">
-          <button class="accordion-button" type="button" data-bs-toggle="collapse"
+        <div class="mb-3 accordion">
-                  data-bs-target="#panelsStayOpen-collapseOne">
+          <div class="accordion-item">
-            {{ $t('config.gamepad_ds4_manual') }}
+            <h2 class="accordion-header">
-          </button>
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
-        </h2>
+                      data-bs-target="#panelsStayOpen-collapseOne">
-        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+                {{ $t(config.gamepad === 'ds4' ? 'config.gamepad_ds4_manual' : 'config.gamepad_auto') }}
-             aria-labelledby="panelsStayOpen-headingOne">
+              </button>
-          <div class="accordion-body">
+            </h2>
-            <div>
+            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-              <label for="ds4_back_as_touchpad_click" class="form-label">{{ $t('config.ds4_back_as_touchpad_click') }}</label>
+                 aria-labelledby="panelsStayOpen-headingOne">
-              <select id="ds4_back_as_touchpad_click" class="form-select"
+              <div class="accordion-body">
-                      v-model="config.ds4_back_as_touchpad_click">
+                <!-- Auto options (Windows only) -->
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
+                <template v-if="config.gamepad === 'auto'">
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+                  <!-- DS4 motion -->
-              </select>
+                  <Checkbox class="mb-3"
-              <div class="form-text">{{ $t('config.ds4_back_as_touchpad_click_desc') }}</div>
+                            id="motion_as_ds4"
+                            locale-prefix="config"
+                            v-model="config.motion_as_ds4"
+                            default="true"
+                  ></Checkbox>
+                  <!-- DS4 touchpad -->
+                  <Checkbox class="mb-3"
+                            id="touchpad_as_ds4"
+                            locale-prefix="config"
+                            v-model="config.touchpad_as_ds4"
+                            default="true"
+                  ></Checkbox>
+                </template>
+                <!-- DS4 options (all platforms) -->
+                <template v-if="config.gamepad === 'ds4'">
+                  <!-- DS4 back button as touchpad click -->
+                  <Checkbox class="mb-3"
+                            id="ds4_back_as_touchpad_click"
+                            locale-prefix="config"
+                            v-model="config.ds4_back_as_touchpad_click"
+                            default="true"
+                  ></Checkbox>
+                </template>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
-    </div>
+    </template>
-    <div class="accordion" v-if="config.controller === 'enabled' && config.gamepad === 'auto' && platform === 'windows'">
-      <div class="accordion-item">
-        <h2 class="accordion-header">
-          <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#panelsStayOpen-collapseOne">
-            {{ $t('config.gamepad_auto') }}
-          </button>
-        </h2>
-        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
-          <div class="accordion-body">
-            <div>
-              <label for="motion_as_ds4" class="form-label">{{ $t('config.motion_as_ds4') }}</label>
-              <select id="motion_as_ds4" class="form-select"
-                      v-model="config.motion_as_ds4">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.motion_as_ds4_desc') }}</div>
-            </div>
-            <div>
-              <label for="touchpad_as_ds4" class="form-label">{{ $t('config.touchpad_as_ds4') }}</label>
-              <select id="touchpad_as_ds4" class="form-select"
-                      v-model="config.touchpad_as_ds4">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.touchpad_as_ds4_desc') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- Home/Guide Button Emulation Timeout -->
     <div class="mb-3" v-if="config.controller === 'enabled'">
@@ -112,14 +101,12 @@ const config = ref(props.config)
 
     <!-- Enable Keyboard Input -->
     <hr>
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-      <label for="keyboard" class="form-label">{{ $t('config.keyboard') }}</label>
+              id="keyboard"
-      <select id="keyboard" class="form-select" v-model="config.keyboard">
+              locale-prefix="config"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              v-model="config.keyboard"
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+              default="true"
-      </select>
+    ></Checkbox>
-      <div class="form-text">{{ $t('config.keyboard_desc') }}</div>
-    </div>
 
     <!-- Key Repeat Delay-->
     <div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
@@ -138,56 +125,49 @@ const config = ref(props.config)
     </div>
 
     <!-- Always send scancodes -->
-    <div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
+    <Checkbox v-if="config.keyboard === 'enabled' && platform === 'windows'"
-      <label for="always_send_scancodes" class="form-label">{{ $t('config.always_send_scancodes') }}</label>
+              class="mb-3"
-      <select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
+              id="always_send_scancodes"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              locale-prefix="config"
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+              v-model="config.always_send_scancodes"
-      </select>
+              default="true"
-      <div class="form-text">{{ $t('config.always_send_scancodes_desc') }}</div>
+    ></Checkbox>
-    </div>
 
     <!-- Mapping Key AltRight to Key Windows -->
-    <div class="mb-3" v-if="config.keyboard === 'enabled'">
+    <Checkbox v-if="config.keyboard === 'enabled'"
-      <label for="key_rightalt_to_key_win" class="form-label">{{ $t('config.key_rightalt_to_key_win') }}</label>
+              class="mb-3"
-      <select id="key_rightalt_to_key_win" class="form-select" v-model="config.key_rightalt_to_key_win">
+              id="key_rightalt_to_key_win"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              locale-prefix="config"
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+              v-model="config.key_rightalt_to_key_win"
-      </select>
+              default="false"
-      <div class="form-text">{{ $t('config.key_rightalt_to_key_win_desc') }}</div>
+    ></Checkbox>
-    </div>
 
     <!-- Enable Mouse Input -->
     <hr>
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-      <label for="mouse" class="form-label">{{ $t('config.mouse') }}</label>
+              id="mouse"
-      <select id="mouse" class="form-select" v-model="config.mouse">
+              locale-prefix="config"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              v-model="config.mouse"
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+              default="true"
-      </select>
+    ></Checkbox>
-      <div class="form-text">{{ $t('config.mouse_desc') }}</div>
-    </div>
 
     <!-- High resolution scrolling support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
+    <Checkbox v-if="config.mouse === 'enabled'"
-      <label for="high_resolution_scrolling" class="form-label">{{ $t('config.high_resolution_scrolling') }}</label>
+              class="mb-3"
-      <select id="high_resolution_scrolling" class="form-select" v-model="config.high_resolution_scrolling">
+              id="high_resolution_scrolling"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              locale-prefix="config"
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+              v-model="config.high_resolution_scrolling"
-      </select>
+              default="true"
-      <div class="form-text">{{ $t('config.high_resolution_scrolling_desc') }}</div>
+    ></Checkbox>
-    </div>
 
     <!-- Native pen/touch support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
+    <Checkbox v-if="config.mouse === 'enabled'"
-      <label for="native_pen_touch" class="form-label">{{ $t('config.native_pen_touch') }}</label>
+              class="mb-3"
-      <select id="native_pen_touch" class="form-select" v-model="config.native_pen_touch">
+              id="native_pen_touch"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              locale-prefix="config"
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+              v-model="config.native_pen_touch"
-      </select>
+              default="true"
-      <div class="form-text">{{ $t('config.native_pen_touch_desc') }}</div>
+    ></Checkbox>
-    </div>
-
   </div>
 </template>
 

src_assets/common/assets/web/configs/tabs/Network.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
+import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -15,14 +16,12 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
 <template>
   <div id="network" class="config-page">
     <!-- UPnP -->
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-      <label for="upnp" class="form-label">{{ $t('config.upnp') }}</label>
+              id="upnp"
-      <select id="upnp" class="form-select" v-model="config.upnp">
+              locale-prefix="config"
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
+              v-model="config.upnp"
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
+              default="false"
-      </select>
+    ></Checkbox>
-      <div class="form-text">{{ $t('config.upnp_desc') }}</div>
-    </div>
 
     <!-- Address family -->
     <div class="mb-3">

src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue

@@ -20,7 +20,7 @@ const config = ref(props.config)
     <div class="form-text">
       <PlatformLayout :platform="platform">
         <template #windows>
-          {{ $t('config.adapter_name_desc_win') }}<br>
+          {{ $t('config.adapter_name_desc_windows') }}<br>
           <pre>tools\dxgi-info.exe</pre>
         </template>
         <template #linux>

src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue

@@ -16,14 +16,11 @@ const fpsIn = ref("")
 </script>
 
 <template>
+  <!--min_fps_factor-->
   <div class="mb-3">
-    <!--min_fps_factor-->
+    <label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
-    <div class="mb-3">
+    <input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
-      <label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
+    <div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
-      <input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
-      <div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
-    </div>
-
   </div>
 </template>
 

src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -25,7 +26,7 @@ const config = ref(props.config)
     </div>
 
     <!-- AMD Rate Control group options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -49,21 +50,19 @@ const config = ref(props.config)
             </div>
 
             <!-- AMF HRD Enforcement -->
-            <div class="mb-3">
+            <Checkbox class="mb-3"
-              <label for="amd_enforce_hrd" class="form-label">{{ $t('config.amd_enforce_hrd') }}</label>
+                      id="amd_enforce_hrd"
-              <select id="amd_enforce_hrd" class="form-select" v-model="config.amd_enforce_hrd">
+                      locale-prefix="config"
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
+                      v-model="config.amd_enforce_hrd"
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
+                      default="false"
-              </select>
+            ></Checkbox>
-              <div class="form-text">{{ $t('config.amd_enforce_hrd_desc') }}</div>
-            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- AMF Quality group options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -86,24 +85,20 @@ const config = ref(props.config)
             </div>
 
             <!-- AMD Preanalysis -->
-            <div class="mb-3">
+            <Checkbox class="mb-3"
-              <label for="amd_preanalysis" class="form-label">{{ $t('config.amd_preanalysis') }}</label>
+                      id="amd_preanalysis"
-              <select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
+                      locale-prefix="config"
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
+                      v-model="config.amd_preanalysis"
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
+                      default="false"
-              </select>
+            ></Checkbox>
-              <div class="form-text">{{ $t('config.amd_preanalysis_desc') }}</div>
-            </div>
 
             <!-- AMD VBAQ -->
-            <div class="mb-3">
+            <Checkbox class="mb-3"
-              <label for="amd_vbaq" class="form-label">{{ $t('config.amd_vbaq') }}</label>
+                      id="amd_vbaq"
-              <select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
+                      locale-prefix="config"
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
+                      v-model="config.amd_vbaq"
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+                      default="true"
-              </select>
+            ></Checkbox>
-              <div class="form-text">{{ $t('config.amd_vbaq_desc') }}</div>
-            </div>
 
             <!-- AMF Coder (H264) -->
             <div class="mb-3">

src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -36,15 +37,12 @@ const config = ref(props.config)
     </div>
 
     <!-- Allow Slow HEVC Encoding -->
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-      <label for="qsv_slow_hevc" class="form-label">{{ $t('config.qsv_slow_hevc') }}</label>
+              id="qsv_slow_hevc"
-      <select id="qsv_slow_hevc" class="form-select" v-model="config.qsv_slow_hevc">
+              locale-prefix="config"
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
+              v-model="config.qsv_slow_hevc"
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
+              default="false"
-      </select>
+    ></Checkbox>
-      <div class="form-text">{{ $t('config.qsv_slow_hevc_desc') }}</div>
-    </div>
-
   </div>
 </template>
 

src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -60,7 +61,7 @@ const config = ref(props.config)
     </div>
 
     <!-- Miscellaneous options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -72,48 +73,43 @@ const config = ref(props.config)
              aria-labelledby="panelsStayOpen-headingOne">
           <div class="accordion-body">
             <!-- NVENC Realtime HAGS priority -->
-            <div class="mb-3" v-if="platform === 'windows'">
+            <Checkbox v-if="platform === 'windows'"
-              <label for="nvenc_realtime_hags" class="form-label">{{ $t('config.nvenc_realtime_hags') }}</label>
+                      class="mb-3"
-              <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
+                      id="nvenc_realtime_hags"
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
+                      locale-prefix="config"
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+                      v-model="config.nvenc_realtime_hags"
-              </select>
+                      default="true"
-              <div class="form-text">
+            >
-                {{ $t('config.nvenc_realtime_hags_desc') }}<br>
+              <br>
-                <br>
+              <br>
-                <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
+              <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
-              </div>
+            </Checkbox>
-            </div>
 
             <!-- Prefer lower encoding latency over power savings -->
-            <div class="mb-3" v-if="platform === 'windows'">
+            <Checkbox v-if="platform === 'windows'"
-              <label for="nvenc_latency_over_power" class="form-label">{{ $t('config.nvenc_latency_over_power') }}</label>
+                      class="mb-3"
-              <select id="nvenc_latency_over_power" class="form-select" v-model="config.nvenc_latency_over_power">
+                      id="nvenc_latency_over_power"
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
+                      locale-prefix="config"
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+                      v-model="config.nvenc_latency_over_power"
-              </select>
+                      default="true"
-              <div class="form-text">{{ $t('config.nvenc_latency_over_power_desc') }}</div>
+            ></Checkbox>
-            </div>
 
             <!-- Present OpenGL/Vulkan on top of DXGI -->
-            <div class="mb-3" v-if="platform === 'windows'">
+            <Checkbox v-if="platform === 'windows'"
-              <label for="nvenc_opengl_vulkan_on_dxgi" class="form-label">{{ $t('config.nvenc_opengl_vulkan_on_dxgi') }}</label>
+                      class="mb-3"
-              <select id="nvenc_opengl_vulkan_on_dxgi" class="form-select" v-model="config.nvenc_opengl_vulkan_on_dxgi">
+                      id="nvenc_opengl_vulkan_on_dxgi"
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
+                      locale-prefix="config"
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+                      v-model="config.nvenc_opengl_vulkan_on_dxgi"
-              </select>
+                      default="true"
-              <div class="form-text">{{ $t('config.nvenc_opengl_vulkan_on_dxgi_desc') }}</div>
+            ></Checkbox>
-            </div>
 
             <!-- NVENC H264 CAVLC -->
-            <div>
+            <Checkbox class="mb-3"
-              <label for="nvenc_h264_cavlc" class="form-label">{{ $t('config.nvenc_h264_cavlc') }}</label>
+                      id="nvenc_h264_cavlc"
-              <select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
+                      locale-prefix="config"
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
+                      v-model="config.nvenc_h264_cavlc"
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
+                      default="false"
-              </select>
+            ></Checkbox>
-              <div class="form-text">{{ $t('config.nvenc_h264_cavlc_desc') }}</div>
-            </div>
           </div>
         </div>
       </div>

src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -12,14 +13,12 @@ const config = ref(props.config)
 <template>
   <div id="vaapi-encoder" class="config-page">
     <!-- Strict RC Buffer -->
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-      <label for="vaapi_strict_rc_buffer" class="form-label">{{ $t('config.vaapi_strict_rc_buffer') }}</label>
+              id="vaapi_strict_rc_buffer"
-      <select id="vaapi_strict_rc_buffer" class="form-select" v-model="config.vaapi_strict_rc_buffer">
+              locale-prefix="config"
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
+              v-model="config.vaapi_strict_rc_buffer"
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
+              default="false"
-      </select>
+    ></Checkbox>
-      <div class="form-text">{{ $t('config.vaapi_strict_rc_buffer_desc') }}</div>
-    </div>
   </div>
 </template>
 

src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -29,13 +30,13 @@ const config = ref(props.config)
         <option value="forced">{{ $t('config.vt_software_forced') }}</option>
       </select>
     </div>
-    <div class="mb-3">
+    <Checkbox class="mb-3"
-      <label for="vt_realtime" class="form-label">{{ $t('config.vt_realtime') }}</label>
+              id="vt_realtime"
-      <select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
+              desc=""
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
+              locale-prefix="config"
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
+              v-model="config.vt_realtime"
-      </select>
+              default="true"
-    </div>
+    ></Checkbox>
   </div>
 </template>
 

src_assets/common/assets/web/public/assets/locale/en.json

@@ -7,11 +7,13 @@
     "cancel": "Cancel",
     "disabled": "Disabled",
     "disabled_def": "Disabled (default)",
+    "disabled_def_cbox": "Default: unchecked",
     "dismiss": "Dismiss",
     "do_cmd": "Do Command",
     "elevated": "Elevated",
     "enabled": "Enabled",
     "enabled_def": "Enabled (default)",
+    "enabled_def_cbox": "Default: checked",
     "error": "Error!",
     "note": "Note:",
     "password": "Password",
@@ -168,6 +170,7 @@
     "gamepad_auto": "Automatic selection options",
     "gamepad_desc": "Choose which type of gamepad to emulate on the host",
     "gamepad_ds4": "DS4 (PS4)",
+    "gamepad_ds4_manual": "DS4 selection options",
     "gamepad_ds5": "DS5 (PS5)",
     "gamepad_switch": "Nintendo Pro (Switch)",
     "gamepad_manual": "Manual DS4 options",
@@ -189,7 +192,7 @@
     "key_repeat_delay_desc": "Control how fast keys will repeat themselves. The initial delay in milliseconds before repeating keys.",
     "key_repeat_frequency": "Key Repeat Frequency",
     "key_repeat_frequency_desc": "How often keys repeat every second. This configurable option supports decimals.",
-    "key_rightalt_to_key_windows": "Map Right Alt key to Windows key",
+    "key_rightalt_to_key_win": "Map Right Alt key to Windows key",
     "key_rightalt_to_key_win_desc": "It may be possible that you cannot send the Windows Key from Moonlight directly. In those cases it may be useful to make Sunshine think the Right Alt key is the Windows key",
     "keyboard": "Enable Keyboard Input",
     "keyboard_desc": "Allows guests to control the host system with the keyboard",