From 5554f39772b16dd974c1b6f9e0aed293127e0362 Mon Sep 17 00:00:00 2001
From: FrogTheFrog <warliukz@gmail.com>
Date: Mon, 16 Dec 2024 20:12:44 +0200
Subject: [PATCH 1/3] feat(web-ui): replace dropdown menus with checkboxes

---
 src_assets/common/assets/web/Checkbox.vue     | 108 ++++++++++
 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, 351 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..1a911cce062
--- /dev/null
+++ b/src_assets/common/assets/web/Checkbox.vue
@@ -0,0 +1,108 @@
+<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"
+  },
+  checkedByDef: {
+    type: Boolean,
+    default: false
+  },
+  uncheckedByDef: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Add the mandatory class values
+const extendedClassStr = (() => {
+  let values = props.class.split(" ");
+  if (!values.includes("form-check")) {
+    values.push("form-check");
+  }
+  return values.join(" ");
+})();
+
+// Determine the true/false values for the checkbox
+const checkboxValues = (() => {
+  const mappedValues = (() => {
+    // Try literal values first
+    let value = model.value;
+    if (value === true || value === false) {
+      return [true, false];
+    }
+    if (value === 1 || value === 0) {
+      return [1, 0];
+    }
+
+    // Try mapping strings next (first in the list will be used as fallback)
+    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 pair;
+      }
+    }
+
+    // Return default if nothing matches
+    console.error(`Checkbox value ${model.value} (${value}) did not match any acceptable pattern!`);
+    return stringPairs[0];
+  })();
+
+  return { truthy: mappedValues[0], falsy: mappedValues[1] };
+})();
+
+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 = props.checkedByDef || props.uncheckedByDef;
+const defValue = props.checkedByDef === props.uncheckedByDef ? "INVALID" :
+  props.checkedByDef ? "_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..5a97556dc29 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']"
+                  checked-by-def
+        ></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"
+                  unchecked-by-def
+        ></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']"
+                  checked-by-def
+        ></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']"
+                  checked-by-def
+        ></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..450b68afeb9 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"
+                  checked-by-def
+        ></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..90b4c3a7c9a 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"
+              unchecked-by-def
+    ></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..2992f149ccf 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"
+              checked-by-def
+    ></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"
+                            checked-by-def
+                  ></Checkbox>
+                  <!-- DS4 touchpad -->
+                  <Checkbox class="mb-3"
+                            id="touchpad_as_ds4"
+                            locale-prefix="config"
+                            v-model="config.touchpad_as_ds4"
+                            checked-by-def
+                  ></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"
+                            checked-by-def
+                  ></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"
+              checked-by-def
+    ></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"
+              checked-by-def
+    ></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"
+              unchecked-by-def
+    ></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"
+              checked-by-def
+    ></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"
+              checked-by-def
+    ></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"
+              checked-by-def
+    ></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..2165615eff1 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"
+              unchecked-by-def
+    ></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..10a6ee8da43 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"
+                      unchecked-by-def
+            ></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"
+                      unchecked-by-def
+            ></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"
+                      checked-by-def
+            ></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..0a41768eab2 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"
+              unchecked-by-def
+    ></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..4a1311fe7ad 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"
+                      checked-by-def
+            >
+              <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"
+                      checked-by-def
+            ></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"
+                      checked-by-def
+            ></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"
+                      unchecked-by-def
+            ></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..9972ae55760 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"
+              unchecked-by-def
+    ></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..5f4b6356ad0 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"
+              checked-by-def
+    ></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",

From 2577af35579beaae48ce4db394b70579490ba319 Mon Sep 17 00:00:00 2001
From: FrogTheFrog <warliukz@gmail.com>
Date: Sat, 4 Jan 2025 12:52:44 +0200
Subject: [PATCH 2/3] Replace checked-by-def/unchecked-by-def with default
 field

---
 src_assets/common/assets/web/Checkbox.vue     | 15 +++++---------
 src_assets/common/assets/web/apps.html        |  8 ++++----
 .../assets/web/configs/tabs/AudioVideo.vue    |  2 +-
 .../assets/web/configs/tabs/General.vue       |  2 +-
 .../common/assets/web/configs/tabs/Inputs.vue | 20 +++++++++----------
 .../assets/web/configs/tabs/Network.vue       |  2 +-
 .../configs/tabs/encoders/AmdAmfEncoder.vue   |  6 +++---
 .../tabs/encoders/IntelQuickSyncEncoder.vue   |  2 +-
 .../tabs/encoders/NvidiaNvencEncoder.vue      |  8 ++++----
 .../configs/tabs/encoders/VAAPIEncoder.vue    |  2 +-
 .../tabs/encoders/VideotoolboxEncoder.vue     |  2 +-
 11 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/src_assets/common/assets/web/Checkbox.vue b/src_assets/common/assets/web/Checkbox.vue
index 1a911cce062..b3332e5635f 100644
--- a/src_assets/common/assets/web/Checkbox.vue
+++ b/src_assets/common/assets/web/Checkbox.vue
@@ -22,13 +22,9 @@ const props = defineProps({
     type: String,
     default: "missing-prefix"
   },
-  checkedByDef: {
-    type: Boolean,
-    default: false
-  },
-  uncheckedByDef: {
-    type: Boolean,
-    default: false
+  default: {
+    type: [Boolean, null],
+    default: null
   }
 });
 
@@ -81,9 +77,8 @@ const checkboxValues = (() => {
 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 = props.checkedByDef || props.uncheckedByDef;
-const defValue = props.checkedByDef === props.uncheckedByDef ? "INVALID" :
-  props.checkedByDef ? "_common.enabled_def_cbox" : "_common.disabled_def_cbox";
+const showDefValue = props.default !== null;
+const defValue = props.default ? "_common.enabled_def_cbox" : "_common.disabled_def_cbox";
 </script>
 
 <template>
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 5a97556dc29..b4669989aca 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -121,7 +121,7 @@ <h1>{{ $t('apps.applications_title') }}</h1>
                   label="apps.global_prep_name"
                   desc="apps.global_prep_desc"
                   v-model="editForm['exclude-global-prep-cmd']"
-                  checked-by-def
+                  default="true"
         ></Checkbox>
         <div class="mb-3">
           <label for="appName" class="form-label">{{ $t('apps.cmd_prep_name') }}</label>
@@ -212,7 +212,7 @@ <h1>{{ $t('apps.applications_title') }}</h1>
                   label="_common.run_as"
                   desc="apps.run_as_desc"
                   v-model="editForm.elevated"
-                  unchecked-by-def
+                  default="false"
         ></Checkbox>
         <!-- auto-detach -->
         <Checkbox class="mb-3"
@@ -220,7 +220,7 @@ <h1>{{ $t('apps.applications_title') }}</h1>
                   label="apps.auto_detach"
                   desc="apps.auto_detach_desc"
                   v-model="editForm['auto-detach']"
-                  checked-by-def
+                  default="true"
         ></Checkbox>
         <!-- wait for all processes -->
         <Checkbox class="mb-3"
@@ -228,7 +228,7 @@ <h1>{{ $t('apps.applications_title') }}</h1>
                   label="apps.wait_all"
                   desc="apps.wait_all_desc"
                   v-model="editForm['wait-all']"
-                  checked-by-def
+                  default="true"
         ></Checkbox>
         <!-- exit timeout -->
         <div class="mb-3">
diff --git a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
index 450b68afeb9..430fe1fac9f 100644
--- a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
+++ b/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
@@ -59,7 +59,7 @@ const config = ref(props.config)
                   id="install_steam_audio_drivers"
                   locale-prefix="config"
                   v-model="config.install_steam_audio_drivers"
-                  checked-by-def
+                  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 90b4c3a7c9a..d08bec5540c 100644
--- a/src_assets/common/assets/web/configs/tabs/General.vue
+++ b/src_assets/common/assets/web/configs/tabs/General.vue
@@ -129,7 +129,7 @@ function removeCmd(index) {
               id="notify_pre_releases"
               locale-prefix="config"
               v-model="config.notify_pre_releases"
-              unchecked-by-def
+              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 2992f149ccf..2e7a081f85a 100644
--- a/src_assets/common/assets/web/configs/tabs/Inputs.vue
+++ b/src_assets/common/assets/web/configs/tabs/Inputs.vue
@@ -18,7 +18,7 @@ const config = ref(props.config)
               id="controller"
               locale-prefix="config"
               v-model="config.controller"
-              checked-by-def
+              default="true"
     ></Checkbox>
 
     <!-- Emulated Gamepad Type -->
@@ -64,14 +64,14 @@ const config = ref(props.config)
                             id="motion_as_ds4"
                             locale-prefix="config"
                             v-model="config.motion_as_ds4"
-                            checked-by-def
+                            default="true"
                   ></Checkbox>
                   <!-- DS4 touchpad -->
                   <Checkbox class="mb-3"
                             id="touchpad_as_ds4"
                             locale-prefix="config"
                             v-model="config.touchpad_as_ds4"
-                            checked-by-def
+                            default="true"
                   ></Checkbox>
                 </template>
                 <!-- DS4 options (all platforms) -->
@@ -81,7 +81,7 @@ const config = ref(props.config)
                             id="ds4_back_as_touchpad_click"
                             locale-prefix="config"
                             v-model="config.ds4_back_as_touchpad_click"
-                            checked-by-def
+                            default="true"
                   ></Checkbox>
                 </template>
               </div>
@@ -105,7 +105,7 @@ const config = ref(props.config)
               id="keyboard"
               locale-prefix="config"
               v-model="config.keyboard"
-              checked-by-def
+              default="true"
     ></Checkbox>
 
     <!-- Key Repeat Delay-->
@@ -130,7 +130,7 @@ const config = ref(props.config)
               id="always_send_scancodes"
               locale-prefix="config"
               v-model="config.always_send_scancodes"
-              checked-by-def
+              default="true"
     ></Checkbox>
 
     <!-- Mapping Key AltRight to Key Windows -->
@@ -139,7 +139,7 @@ const config = ref(props.config)
               id="key_rightalt_to_key_win"
               locale-prefix="config"
               v-model="config.key_rightalt_to_key_win"
-              unchecked-by-def
+              default="false"
     ></Checkbox>
 
     <!-- Enable Mouse Input -->
@@ -148,7 +148,7 @@ const config = ref(props.config)
               id="mouse"
               locale-prefix="config"
               v-model="config.mouse"
-              checked-by-def
+              default="true"
     ></Checkbox>
 
     <!-- High resolution scrolling support -->
@@ -157,7 +157,7 @@ const config = ref(props.config)
               id="high_resolution_scrolling"
               locale-prefix="config"
               v-model="config.high_resolution_scrolling"
-              checked-by-def
+              default="true"
     ></Checkbox>
 
     <!-- Native pen/touch support -->
@@ -166,7 +166,7 @@ const config = ref(props.config)
               id="native_pen_touch"
               locale-prefix="config"
               v-model="config.native_pen_touch"
-              checked-by-def
+              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 2165615eff1..4fac049dbbd 100644
--- a/src_assets/common/assets/web/configs/tabs/Network.vue
+++ b/src_assets/common/assets/web/configs/tabs/Network.vue
@@ -20,7 +20,7 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
               id="upnp"
               locale-prefix="config"
               v-model="config.upnp"
-              unchecked-by-def
+              default="false"
     ></Checkbox>
 
     <!-- Address family -->
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 10a6ee8da43..1da4999942c 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
@@ -54,7 +54,7 @@ const config = ref(props.config)
                       id="amd_enforce_hrd"
                       locale-prefix="config"
                       v-model="config.amd_enforce_hrd"
-                      unchecked-by-def
+                      default="false"
             ></Checkbox>
           </div>
         </div>
@@ -89,7 +89,7 @@ const config = ref(props.config)
                       id="amd_preanalysis"
                       locale-prefix="config"
                       v-model="config.amd_preanalysis"
-                      unchecked-by-def
+                      default="false"
             ></Checkbox>
 
             <!-- AMD VBAQ -->
@@ -97,7 +97,7 @@ const config = ref(props.config)
                       id="amd_vbaq"
                       locale-prefix="config"
                       v-model="config.amd_vbaq"
-                      checked-by-def
+                      default="true"
             ></Checkbox>
 
             <!-- AMF Coder (H264) -->
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 0a41768eab2..1a13beba054 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
@@ -41,7 +41,7 @@ const config = ref(props.config)
               id="qsv_slow_hevc"
               locale-prefix="config"
               v-model="config.qsv_slow_hevc"
-              unchecked-by-def
+              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 4a1311fe7ad..15ae8dc6789 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
@@ -78,7 +78,7 @@ const config = ref(props.config)
                       id="nvenc_realtime_hags"
                       locale-prefix="config"
                       v-model="config.nvenc_realtime_hags"
-                      checked-by-def
+                      default="true"
             >
               <br>
               <br>
@@ -91,7 +91,7 @@ const config = ref(props.config)
                       id="nvenc_latency_over_power"
                       locale-prefix="config"
                       v-model="config.nvenc_latency_over_power"
-                      checked-by-def
+                      default="true"
             ></Checkbox>
 
             <!-- Present OpenGL/Vulkan on top of DXGI -->
@@ -100,7 +100,7 @@ const config = ref(props.config)
                       id="nvenc_opengl_vulkan_on_dxgi"
                       locale-prefix="config"
                       v-model="config.nvenc_opengl_vulkan_on_dxgi"
-                      checked-by-def
+                      default="true"
             ></Checkbox>
 
             <!-- NVENC H264 CAVLC -->
@@ -108,7 +108,7 @@ const config = ref(props.config)
                       id="nvenc_h264_cavlc"
                       locale-prefix="config"
                       v-model="config.nvenc_h264_cavlc"
-                      unchecked-by-def
+                      default="false"
             ></Checkbox>
           </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 9972ae55760..063bba45b50 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
@@ -17,7 +17,7 @@ const config = ref(props.config)
               id="vaapi_strict_rc_buffer"
               locale-prefix="config"
               v-model="config.vaapi_strict_rc_buffer"
-              unchecked-by-def
+              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 5f4b6356ad0..084e5f1def0 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
@@ -35,7 +35,7 @@ const config = ref(props.config)
               desc=""
               locale-prefix="config"
               v-model="config.vt_realtime"
-              checked-by-def
+              default="true"
     ></Checkbox>
   </div>
 </template>

From 3de00841407197d6e128b41f3ccf85e9ed937b67 Mon Sep 17 00:00:00 2001
From: FrogTheFrog <warliukz@gmail.com>
Date: Sat, 4 Jan 2025 19:48:09 +0200
Subject: [PATCH 3/3] I don't like vue that much anymore

---
 src_assets/common/assets/web/Checkbox.vue | 79 ++++++++++++++---------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/src_assets/common/assets/web/Checkbox.vue b/src_assets/common/assets/web/Checkbox.vue
index b3332e5635f..b94446d30a6 100644
--- a/src_assets/common/assets/web/Checkbox.vue
+++ b/src_assets/common/assets/web/Checkbox.vue
@@ -23,8 +23,8 @@ const props = defineProps({
     default: "missing-prefix"
   },
   default: {
-    type: [Boolean, null],
-    default: null
+    type: undefined,
+    default: null,
   }
 });
 
@@ -37,48 +37,65 @@ const extendedClassStr = (() => {
   return values.join(" ");
 })();
 
-// Determine the true/false values for the checkbox
-const checkboxValues = (() => {
-  const mappedValues = (() => {
-    // Try literal values first
-    let value = model.value;
-    if (value === true || value === false) {
-      return [true, false];
-    }
-    if (value === 1 || value === 0) {
-      return [1, 0];
+// 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 };
     }
+  }
 
-    // Try mapping strings next (first in the list will be used as fallback)
-    const stringPairs = [
-      ["true", "false"],
-      ["1", "0"],
-      ["enabled", "disabled"],
-      ["enable", "disable"],
-      ["yes", "no"],
-      ["on", "off"]
-    ];
+  return null;
+}
 
-    value = `${value}`.toLowerCase().trim();
-    for (const pair of stringPairs) {
-      if (value === pair[0] || value === pair[1]) {
-        return pair;
-      }
+// Determine the true/false values for the checkbox
+const checkboxValues = (() => {
+  const mappedValues = (() => {
+    const boolValues = mapToBoolRepresentation(model.value);
+    if (boolValues !== null) {
+      return boolValues.possibleValues;
     }
 
-    // Return default if nothing matches
-    console.error(`Checkbox value ${model.value} (${value}) did not match any acceptable pattern!`);
-    return stringPairs[0];
+    // 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 = props.default !== null;
-const defValue = props.default ? "_common.enabled_def_cbox" : "_common.disabled_def_cbox";
+const showDefValue = parsedDefaultPropValue !== null;
+const defValue = parsedDefaultPropValue ? "_common.enabled_def_cbox" : "_common.disabled_def_cbox";
 </script>
 
 <template>