From 2e5c2912332db19d29ee8ccd032a8de4a1f32447 Mon Sep 17 00:00:00 2001
From: Lukas Senionis <warliukz@gmail.com>
Date: Sun, 5 Jan 2025 21:43:45 +0200
Subject: [PATCH] feat(web-ui): replace dropdown menus with checkboxes  (#3455)

---
 src_assets/common/assets/web/Checkbox.vue     | 120 +++++++++++
 src_assets/common/assets/web/apps.html        |  76 +++----
 .../assets/web/configs/tabs/AudioVideo.vue    |  15 +-
 .../assets/web/configs/tabs/General.vue       |  27 ++-
 .../common/assets/web/configs/tabs/Inputs.vue | 202 ++++++++----------
 .../assets/web/configs/tabs/Network.vue       |  15 +-
 .../tabs/audiovideo/AdapterNameSelector.vue   |   2 +-
 .../tabs/audiovideo/DisplayModesSettings.vue  |  11 +-
 .../configs/tabs/encoders/AmdAmfEncoder.vue   |  47 ++--
 .../tabs/encoders/IntelQuickSyncEncoder.vue   |  16 +-
 .../tabs/encoders/NvidiaNvencEncoder.vue      |  70 +++---
 .../configs/tabs/encoders/VAAPIEncoder.vue    |  15 +-
 .../tabs/encoders/VideotoolboxEncoder.vue     |  15 +-
 .../assets/web/public/assets/locale/en.json   |   5 +-
 14 files changed, 363 insertions(+), 273 deletions(-)
 create mode 100644 src_assets/common/assets/web/Checkbox.vue

diff --git a/src_assets/common/assets/web/Checkbox.vue b/src_assets/common/assets/web/Checkbox.vue
new file mode 100644
index 00000000000..b94446d30a6
--- /dev/null
+++ b/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>
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index e10ce0262fb..b4669989aca 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -116,15 +116,13 @@ <h1>{{ $t('apps.applications_title') }}</h1>
           <div id="appOutputHelp" class="form-text">{{ $t('apps.output_desc') }}</div>
         </div>
         <!-- prep-cmd -->
-        <div class="mb-3">
-          <label for="excludeGlobalPrep" class="form-label">{{ $t('apps.global_prep_name') }}</label>
-          <select id="excludeGlobalPrep" class="form-select" v-model="editForm['exclude-global-prep-cmd']">
-            <option v-for="val in [false, true]" :value="val">
-              {{ !val ? $t('_common.enabled') : $t('_common.disabled') }}
-            </option>
-          </select>
-          <div class="form-text">{{ $t('apps.global_prep_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="excludeGlobalPrep"
+                  label="apps.global_prep_name"
+                  desc="apps.global_prep_desc"
+                  v-model="editForm['exclude-global-prep-cmd']"
+                  default="true"
+        ></Checkbox>
         <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 @@ <h1>{{ $t('apps.applications_title') }}</h1>
                 <td>
                   <input type="text" class="form-control monospace" v-model="c.undo" />
                 </td>
-                <td v-if="platform === 'windows'">
-                  <div class="form-check">
-                    <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
-                      true-value="true" false-value="false" />
-                    <label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('_common.elevated') }}</label>
-                  </div>
+                <td v-if="platform === 'windows'" class="align-middle">
+                  <Checkbox :id="'prep-cmd-admin-' + i"
+                            label="_common.elevated"
+                            desc=""
+                            v-model="c.elevated"
+                  ></Checkbox>
                 </td>
                 <td>
                   <button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">
@@ -208,26 +206,30 @@ <h1>{{ $t('apps.applications_title') }}</h1>
           <div id="appWorkingDirHelp" class="form-text">{{ $t('apps.working_dir_desc') }}</div>
         </div>
         <!-- elevation -->
-        <div class="mb-3 form-check" v-if="platform === 'windows'">
-          <label for="appElevation" class="form-check-label">{{ $t('_common.run_as') }}</label>
-          <input type="checkbox" class="form-check-input" id="appElevation" v-model="editForm.elevated"
-            true-value="true" false-value="false" />
-          <div class="form-text">{{ $t('apps.run_as_desc') }}</div>
-        </div>
+        <Checkbox v-if="platform === 'windows'"
+                  class="mb-3"
+                  id="appElevation"
+                  label="_common.run_as"
+                  desc="apps.run_as_desc"
+                  v-model="editForm.elevated"
+                  default="false"
+        ></Checkbox>
         <!-- auto-detach -->
-        <div class="mb-3 form-check">
-          <label for="autoDetach" class="form-check-label">{{ $t('apps.auto_detach') }}</label>
-          <input type="checkbox" class="form-check-input" id="autoDetach" v-model="editForm['auto-detach']"
-            true-value="true" false-value="false" />
-          <div class="form-text">{{ $t('apps.auto_detach_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="autoDetach"
+                  label="apps.auto_detach"
+                  desc="apps.auto_detach_desc"
+                  v-model="editForm['auto-detach']"
+                  default="true"
+        ></Checkbox>
         <!-- wait for all processes -->
-        <div class="mb-3 form-check">
-          <label for="waitAll" class="form-check-label">{{ $t('apps.wait_all') }}</label>
-          <input type="checkbox" class="form-check-input" id="waitAll" v-model="editForm['wait-all']"
-            true-value="true" false-value="false" />
-          <div class="form-text">{{ $t('apps.wait_all_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="waitAll"
+                  label="apps.wait_all"
+                  desc="apps.wait_all_desc"
+                  v-model="editForm['wait-all']"
+                  default="true"
+        ></Checkbox>
         <!-- exit timeout -->
         <div class="mb-3">
           <label for="exitTimeout" class="form-label">{{ $t('apps.exit_timeout') }}</label>
@@ -358,11 +360,13 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
   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 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
         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;
diff --git a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
index 0f18f9a14dc..430fe1fac9f 100644
--- a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
+++ b/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">
-          <label for="install_steam_audio_drivers" class="form-label">{{ $t('config.install_steam_audio_drivers') }}</label>
-          <select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
-            <option value="disabled">{{ $t('_common.disabled') }}</option>
-            <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-          </select>
-          <div class="form-text">{{ $t('config.install_steam_audio_drivers_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="install_steam_audio_drivers"
+                  locale-prefix="config"
+                  v-model="config.install_steam_audio_drivers"
+                  default="true"
+        ></Checkbox>
       </template>
     </PlatformLayout>
 
diff --git a/src_assets/common/assets/web/configs/tabs/General.vue b/src_assets/common/assets/web/configs/tabs/General.vue
index 9596e622778..d08bec5540c 100644
--- a/src_assets/common/assets/web/configs/tabs/General.vue
+++ b/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'">
-            <div class="form-check">
-              <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
-                     true-value="true" false-value="false" />
-              <label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('config.elevated') }}</label>
-            </div>
+          <td v-if="platform === 'windows'" class="align-middle">
+            <Checkbox :id="'prep-cmd-admin-' + i"
+                      label="_common.elevated"
+                      desc=""
+                      v-model="c.elevated"
+            ></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">
-        <label for="notify_pre_releases" class="form-label">{{ $t('config.notify_pre_releases') }}</label>
-        <select id="notify_pre_releases" class="form-select" v-model="config.notify_pre_releases">
-            <option value="disabled">{{ $t('_common.disabled') }}</option>
-            <option value="enabled">{{ $t('_common.enabled') }}</option>
-        </select>
-        <div class="form-text">{{ $t('config.notify_pre_releases_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="notify_pre_releases"
+              locale-prefix="config"
+              v-model="config.notify_pre_releases"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/Inputs.vue b/src_assets/common/assets/web/configs/tabs/Inputs.vue
index a2f0c249dfc..2e7a081f85a 100644
--- a/src_assets/common/assets/web/configs/tabs/Inputs.vue
+++ b/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">
-      <label for="controller" class="form-label">{{ $t('config.controller') }}</label>
-      <select id="controller" class="form-select" v-model="config.controller">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.controller_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="controller"
+              locale-prefix="config"
+              v-model="config.controller"
+              default="true"
+    ></Checkbox>
 
     <!-- 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'">
-      <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_ds4_manual') }}
-          </button>
-        </h2>
-        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
-          <div class="accordion-body">
-            <div>
-              <label for="ds4_back_as_touchpad_click" class="form-label">{{ $t('config.ds4_back_as_touchpad_click') }}</label>
-              <select id="ds4_back_as_touchpad_click" class="form-select"
-                      v-model="config.ds4_back_as_touchpad_click">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.ds4_back_as_touchpad_click_desc') }}</div>
+    <!-- Additional options based on gamepad type -->
+    <template v-if="config.controller === 'enabled'">
+      <template v-if="config.gamepad === 'ds4' || (config.gamepad === 'auto' && platform === 'windows')">
+        <div class="mb-3 accordion">
+          <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 === 'ds4' ? 'config.gamepad_ds4_manual' : 'config.gamepad_auto') }}
+              </button>
+            </h2>
+            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+                 aria-labelledby="panelsStayOpen-headingOne">
+              <div class="accordion-body">
+                <!-- Auto options (Windows only) -->
+                <template v-if="config.gamepad === 'auto'">
+                  <!-- DS4 motion -->
+                  <Checkbox class="mb-3"
+                            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>
-    </div>
-    <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>
+      </template>
+    </template>
 
     <!-- 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">
-      <label for="keyboard" class="form-label">{{ $t('config.keyboard') }}</label>
-      <select id="keyboard" class="form-select" v-model="config.keyboard">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.keyboard_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="keyboard"
+              locale-prefix="config"
+              v-model="config.keyboard"
+              default="true"
+    ></Checkbox>
 
     <!-- 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'">
-      <label for="always_send_scancodes" class="form-label">{{ $t('config.always_send_scancodes') }}</label>
-      <select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.always_send_scancodes_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.keyboard === 'enabled' && platform === 'windows'"
+              class="mb-3"
+              id="always_send_scancodes"
+              locale-prefix="config"
+              v-model="config.always_send_scancodes"
+              default="true"
+    ></Checkbox>
 
     <!-- Mapping Key AltRight to Key Windows -->
-    <div class="mb-3" v-if="config.keyboard === 'enabled'">
-      <label for="key_rightalt_to_key_win" class="form-label">{{ $t('config.key_rightalt_to_key_win') }}</label>
-      <select id="key_rightalt_to_key_win" class="form-select" v-model="config.key_rightalt_to_key_win">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.key_rightalt_to_key_win_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.keyboard === 'enabled'"
+              class="mb-3"
+              id="key_rightalt_to_key_win"
+              locale-prefix="config"
+              v-model="config.key_rightalt_to_key_win"
+              default="false"
+    ></Checkbox>
 
     <!-- Enable Mouse Input -->
     <hr>
-    <div class="mb-3">
-      <label for="mouse" class="form-label">{{ $t('config.mouse') }}</label>
-      <select id="mouse" class="form-select" v-model="config.mouse">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.mouse_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="mouse"
+              locale-prefix="config"
+              v-model="config.mouse"
+              default="true"
+    ></Checkbox>
 
     <!-- High resolution scrolling support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
-      <label for="high_resolution_scrolling" class="form-label">{{ $t('config.high_resolution_scrolling') }}</label>
-      <select id="high_resolution_scrolling" class="form-select" v-model="config.high_resolution_scrolling">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.high_resolution_scrolling_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.mouse === 'enabled'"
+              class="mb-3"
+              id="high_resolution_scrolling"
+              locale-prefix="config"
+              v-model="config.high_resolution_scrolling"
+              default="true"
+    ></Checkbox>
 
     <!-- Native pen/touch support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
-      <label for="native_pen_touch" class="form-label">{{ $t('config.native_pen_touch') }}</label>
-      <select id="native_pen_touch" class="form-select" v-model="config.native_pen_touch">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.native_pen_touch_desc') }}</div>
-    </div>
-
+    <Checkbox v-if="config.mouse === 'enabled'"
+              class="mb-3"
+              id="native_pen_touch"
+              locale-prefix="config"
+              v-model="config.native_pen_touch"
+              default="true"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/Network.vue b/src_assets/common/assets/web/configs/tabs/Network.vue
index b32074a599c..4fac049dbbd 100644
--- a/src_assets/common/assets/web/configs/tabs/Network.vue
+++ b/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">
-      <label for="upnp" class="form-label">{{ $t('config.upnp') }}</label>
-      <select id="upnp" class="form-select" v-model="config.upnp">
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.upnp_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="upnp"
+              locale-prefix="config"
+              v-model="config.upnp"
+              default="false"
+    ></Checkbox>
 
     <!-- Address family -->
     <div class="mb-3">
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue b/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
index 8fa94ce8b05..59b2a12a911 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
+++ b/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>
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue b/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
index b901e1ca4a3..ee796a721e3 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
+++ b/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-->
-    <div class="mb-3">
-      <label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
-      <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>
-
+    <label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
+    <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>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
index 209df9a76fd..1da4999942c 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
+++ b/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">
-              <label for="amd_enforce_hrd" class="form-label">{{ $t('config.amd_enforce_hrd') }}</label>
-              <select id="amd_enforce_hrd" class="form-select" v-model="config.amd_enforce_hrd">
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_enforce_hrd_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_enforce_hrd"
+                      locale-prefix="config"
+                      v-model="config.amd_enforce_hrd"
+                      default="false"
+            ></Checkbox>
           </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">
-              <label for="amd_preanalysis" class="form-label">{{ $t('config.amd_preanalysis') }}</label>
-              <select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_preanalysis_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_preanalysis"
+                      locale-prefix="config"
+                      v-model="config.amd_preanalysis"
+                      default="false"
+            ></Checkbox>
 
             <!-- AMD VBAQ -->
-            <div class="mb-3">
-              <label for="amd_vbaq" class="form-label">{{ $t('config.amd_vbaq') }}</label>
-              <select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_vbaq_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_vbaq"
+                      locale-prefix="config"
+                      v-model="config.amd_vbaq"
+                      default="true"
+            ></Checkbox>
 
             <!-- AMF Coder (H264) -->
             <div class="mb-3">
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
index 6b88b8b79bc..1a13beba054 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
+++ b/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">
-      <label for="qsv_slow_hevc" class="form-label">{{ $t('config.qsv_slow_hevc') }}</label>
-      <select id="qsv_slow_hevc" class="form-select" v-model="config.qsv_slow_hevc">
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.qsv_slow_hevc_desc') }}</div>
-    </div>
-
+    <Checkbox class="mb-3"
+              id="qsv_slow_hevc"
+              locale-prefix="config"
+              v-model="config.qsv_slow_hevc"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
index aa6ad003ac2..15ae8dc6789 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
+++ b/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'">
-              <label for="nvenc_realtime_hags" class="form-label">{{ $t('config.nvenc_realtime_hags') }}</label>
-              <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">
-                {{ $t('config.nvenc_realtime_hags_desc') }}<br>
-                <br>
-                <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
-              </div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_realtime_hags"
+                      locale-prefix="config"
+                      v-model="config.nvenc_realtime_hags"
+                      default="true"
+            >
+              <br>
+              <br>
+              <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
+            </Checkbox>
 
             <!-- Prefer lower encoding latency over power savings -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_latency_over_power" class="form-label">{{ $t('config.nvenc_latency_over_power') }}</label>
-              <select id="nvenc_latency_over_power" class="form-select" v-model="config.nvenc_latency_over_power">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_latency_over_power_desc') }}</div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_latency_over_power"
+                      locale-prefix="config"
+                      v-model="config.nvenc_latency_over_power"
+                      default="true"
+            ></Checkbox>
 
             <!-- Present OpenGL/Vulkan on top of DXGI -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_opengl_vulkan_on_dxgi" class="form-label">{{ $t('config.nvenc_opengl_vulkan_on_dxgi') }}</label>
-              <select id="nvenc_opengl_vulkan_on_dxgi" class="form-select" v-model="config.nvenc_opengl_vulkan_on_dxgi">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_opengl_vulkan_on_dxgi_desc') }}</div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_opengl_vulkan_on_dxgi"
+                      locale-prefix="config"
+                      v-model="config.nvenc_opengl_vulkan_on_dxgi"
+                      default="true"
+            ></Checkbox>
 
             <!-- NVENC H264 CAVLC -->
-            <div>
-              <label for="nvenc_h264_cavlc" class="form-label">{{ $t('config.nvenc_h264_cavlc') }}</label>
-              <select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_h264_cavlc_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="nvenc_h264_cavlc"
+                      locale-prefix="config"
+                      v-model="config.nvenc_h264_cavlc"
+                      default="false"
+            ></Checkbox>
           </div>
         </div>
       </div>
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
index 2300fd6e52e..063bba45b50 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
+++ b/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">
-      <label for="vaapi_strict_rc_buffer" class="form-label">{{ $t('config.vaapi_strict_rc_buffer') }}</label>
-      <select id="vaapi_strict_rc_buffer" class="form-select" v-model="config.vaapi_strict_rc_buffer">
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.vaapi_strict_rc_buffer_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="vaapi_strict_rc_buffer"
+              locale-prefix="config"
+              v-model="config.vaapi_strict_rc_buffer"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
index 41e29d46a78..084e5f1def0 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
+++ b/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">
-      <label for="vt_realtime" class="form-label">{{ $t('config.vt_realtime') }}</label>
-      <select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-      </select>
-    </div>
+    <Checkbox class="mb-3"
+              id="vt_realtime"
+              desc=""
+              locale-prefix="config"
+              v-model="config.vt_realtime"
+              default="true"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index b277c8af306..d3d9356f423 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/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",