From c1a474580714c02cb57b3cf24f7bbd607ff59367 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sat, 22 Aug 2026 19:20:56 +0000
Subject: [PATCH 01/24] Add Vue SPA scaffolding with https dev server

---
 .env.example                                  |   11 +
 .gitignore                                    |    3 +
 package-lock.json                             | 1363 ++++++++++++++++-
 package.json                                  |    7 +-
 src_assets/common/assets/web/Navbar.vue       |  150 --
 src_assets/common/assets/web/NavbarSimple.vue |   20 -
 src_assets/common/assets/web/index.html       |  307 +---
 src_assets/common/assets/web/src/App.vue      |   13 +
 .../assets/web/{ => src/assets}/sunshine.css  |    0
 .../web/{ => src/components}/Checkbox.vue     |    0
 .../assets/web/src/components/Layout.vue      |   19 +
 .../assets/web/src/components/Navbar.vue      |  107 ++
 .../web/{ => src/components}/Notification.vue |    0
 .../{ => src/components}/PlatformLayout.vue   |    0
 .../web/{ => src/components}/ResourceCard.vue |    0
 .../web/{ => src/components}/SimpleIcon.vue   |    0
 .../web/{ => src/components}/ThemeToggle.vue  |   79 +-
 .../components}/configs/tabs/Advanced.vue     |    0
 .../components}/configs/tabs/AudioVideo.vue   |    0
 .../configs/tabs/ContainerEncoders.vue        |    0
 .../components}/configs/tabs/Files.vue        |    0
 .../components}/configs/tabs/General.vue      |    0
 .../components}/configs/tabs/Inputs.vue       |    0
 .../components}/configs/tabs/Network.vue      |    0
 .../tabs/audiovideo/AdapterNameSelector.vue   |    0
 .../tabs/audiovideo/DisplayDeviceOptions.vue  |    0
 .../tabs/audiovideo/DisplayModesSettings.vue  |    0
 .../tabs/audiovideo/DisplayOutputSelector.vue |    0
 .../configs/tabs/encoders/AmdAmfEncoder.vue   |    0
 .../tabs/encoders/IntelQuickSyncEncoder.vue   |    0
 .../tabs/encoders/NvidiaNvencEncoder.vue      |    0
 .../configs/tabs/encoders/SoftwareEncoder.vue |    0
 .../configs/tabs/encoders/VAAPIEncoder.vue    |    0
 .../tabs/encoders/VideotoolboxEncoder.vue     |    0
 .../configs/tabs/encoders/VulkanEncoder.vue   |    0
 src_assets/common/assets/web/src/main.js      |   10 +
 .../common/assets/web/src/router/index.js     |   65 +
 .../assets/web/{ => src/utils}/fetch_utils.js |    2 +-
 .../common/assets/web/{ => src/utils}/init.js |    4 +-
 .../assets/web/{ => src/utils}/locale.js      |    5 +-
 .../web/{ => src/utils}/platform-i18n.js      |    0
 .../web/{ => src/utils}/sunshine_version.js   |    0
 .../assets/web/{ => src/utils}/theme.js       |    0
 .../common/assets/web/src/views/AppsView.vue  |    8 +
 .../assets/web/src/views/ConfigView.vue       |    8 +
 .../assets/web/src/views/FeaturedView.vue     |    8 +
 .../common/assets/web/src/views/IndexView.vue |    8 +
 .../assets/web/src/views/LogoutView.vue       |    8 +
 .../assets/web/src/views/PasswordView.vue     |    8 +
 .../common/assets/web/src/views/PinView.vue   |    8 +
 .../web/src/views/TroubleshootingView.vue     |    8 +
 .../assets/web/src/views/WelcomeView.vue      |    8 +
 .../assets/web/{ => src/views}/apps.html      |    0
 .../assets/web/{ => src/views}/config.html    |    0
 .../assets/web/{ => src/views}/featured.html  |    0
 .../common/assets/web/src/views/index.html    |  295 ++++
 .../assets/web/{ => src/views}/logout.html    |    0
 .../assets/web/{ => src/views}/password.html  |    0
 .../assets/web/{ => src/views}/pin.html       |    0
 .../web/{ => src/views}/troubleshooting.html  |    0
 .../assets/web/{ => src/views}/welcome.html   |    0
 .../common/assets/web/template_header.html    |    6 -
 tests/CMakeLists.txt                          |    4 +-
 vite.config.js                                |  104 +-
 64 files changed, 2028 insertions(+), 618 deletions(-)
 create mode 100644 .env.example
 delete mode 100644 src_assets/common/assets/web/Navbar.vue
 delete mode 100644 src_assets/common/assets/web/NavbarSimple.vue
 create mode 100644 src_assets/common/assets/web/src/App.vue
 rename src_assets/common/assets/web/{ => src/assets}/sunshine.css (100%)
 rename src_assets/common/assets/web/{ => src/components}/Checkbox.vue (100%)
 create mode 100644 src_assets/common/assets/web/src/components/Layout.vue
 create mode 100644 src_assets/common/assets/web/src/components/Navbar.vue
 rename src_assets/common/assets/web/{ => src/components}/Notification.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/PlatformLayout.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/ResourceCard.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/SimpleIcon.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/ThemeToggle.vue (74%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/Advanced.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/AudioVideo.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/ContainerEncoders.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/Files.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/General.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/Inputs.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/Network.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/audiovideo/AdapterNameSelector.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/audiovideo/DisplayDeviceOptions.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/audiovideo/DisplayModesSettings.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/audiovideo/DisplayOutputSelector.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/encoders/AmdAmfEncoder.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/encoders/IntelQuickSyncEncoder.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/encoders/NvidiaNvencEncoder.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/encoders/SoftwareEncoder.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/encoders/VAAPIEncoder.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/encoders/VideotoolboxEncoder.vue (100%)
 rename src_assets/common/assets/web/{ => src/components}/configs/tabs/encoders/VulkanEncoder.vue (100%)
 create mode 100644 src_assets/common/assets/web/src/main.js
 create mode 100644 src_assets/common/assets/web/src/router/index.js
 rename src_assets/common/assets/web/{ => src/utils}/fetch_utils.js (94%)
 rename src_assets/common/assets/web/{ => src/utils}/init.js (95%)
 rename src_assets/common/assets/web/{ => src/utils}/locale.js (85%)
 rename src_assets/common/assets/web/{ => src/utils}/platform-i18n.js (100%)
 rename src_assets/common/assets/web/{ => src/utils}/sunshine_version.js (100%)
 rename src_assets/common/assets/web/{ => src/utils}/theme.js (100%)
 create mode 100644 src_assets/common/assets/web/src/views/AppsView.vue
 create mode 100644 src_assets/common/assets/web/src/views/ConfigView.vue
 create mode 100644 src_assets/common/assets/web/src/views/FeaturedView.vue
 create mode 100644 src_assets/common/assets/web/src/views/IndexView.vue
 create mode 100644 src_assets/common/assets/web/src/views/LogoutView.vue
 create mode 100644 src_assets/common/assets/web/src/views/PasswordView.vue
 create mode 100644 src_assets/common/assets/web/src/views/PinView.vue
 create mode 100644 src_assets/common/assets/web/src/views/TroubleshootingView.vue
 create mode 100644 src_assets/common/assets/web/src/views/WelcomeView.vue
 rename src_assets/common/assets/web/{ => src/views}/apps.html (100%)
 rename src_assets/common/assets/web/{ => src/views}/config.html (100%)
 rename src_assets/common/assets/web/{ => src/views}/featured.html (100%)
 create mode 100644 src_assets/common/assets/web/src/views/index.html
 rename src_assets/common/assets/web/{ => src/views}/logout.html (100%)
 rename src_assets/common/assets/web/{ => src/views}/password.html (100%)
 rename src_assets/common/assets/web/{ => src/views}/pin.html (100%)
 rename src_assets/common/assets/web/{ => src/views}/troubleshooting.html (100%)
 rename src_assets/common/assets/web/{ => src/views}/welcome.html (100%)
 delete mode 100644 src_assets/common/assets/web/template_header.html

diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000000..ea140e0adbc
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,11 @@
+# Copy this file to .env to override Vite dev server settings locally.
+# Uncomment and adjust as needed; unset variables fall back to Vite's defaults.
+
+# Bind the dev server to all interfaces (needed for devcontainer/Codespaces port forwarding).
+# VITE_DEV_HOST=0.0.0.0
+
+# Port for the Vite dev server (`npm run dev-server`).
+# VITE_DEV_PORT=5173
+
+# Base URL of a running `sunshine` backend to proxy /api, /images, and /covers requests to.
+# VITE_BACKEND_URL=https://localhost:47990
diff --git a/.gitignore b/.gitignore
index c8babd4080f..1ef62d9e99d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,6 +45,9 @@ docs/doxyconfig*
 # npm
 node_modules/
 
+# local Vite dev server overrides
+.env
+
 # Translations
 *.mo
 *.pot
diff --git a/package-lock.json b/package-lock.json
index 0cfcb854fb8..d761f7d0b99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,14 +14,17 @@
         "marked": "18.0.11",
         "vue": "3.5.41",
         "vue-i18n": "11.4.10",
+        "vue-router": "4.6.4",
         "vue3-simple-icons": "16.10.0"
       },
       "devDependencies": {
         "@codecov/vite-plugin": "2.0.1",
+        "@vitejs/plugin-basic-ssl": "2.3.0",
         "@vitejs/plugin-vue": "6.0.8",
+        "@vitejs/plugin-vue-jsx": "5.1.6",
         "serve": "14.2.6",
         "vite": "6.4.3",
-        "vite-plugin-ejs": "2.0.0"
+        "vite-plugin-vue-devtools": "8.1.5"
       }
     },
     "node_modules/@actions/core": {
@@ -90,6 +93,277 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/core/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.29.7.tgz",
+      "integrity": "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.7.tgz",
+      "integrity": "sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/helper-replace-supers": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.29.7.tgz",
+      "integrity": "sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.29.7.tgz",
+      "integrity": "sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.29.7.tgz",
+      "integrity": "sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.29.7.tgz",
+      "integrity": "sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
@@ -108,6 +382,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.29.8",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
@@ -123,6 +419,169 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.29.7.tgz",
+      "integrity": "sha512-EtU0Hi3GvrTqD56xKmZvV/uCXK2ZbwVNPNLAquVItcAZpUhkXwWlo3Fmj0c2LxgSf2I8IDULeAepwNP1OefLXg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/plugin-syntax-decorators": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.29.7.tgz",
+      "integrity": "sha512-9MTTLbF39X6sqM92JPEsoI7++26hjZvzkxKZy64aMhWLH2mPkJ/Q3AV4QLmls3R14FpSpkOwQQfUh962JGQxxg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.29.7.tgz",
+      "integrity": "sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz",
+      "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.29.7.tgz",
+      "integrity": "sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.29.7.tgz",
+      "integrity": "sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/plugin-syntax-typescript": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
     "node_modules/@babel/types": {
       "version": "7.29.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
@@ -674,12 +1133,51 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@lucide/vue": {
       "version": "1.33.0",
       "resolved": "https://registry.npmjs.org/@lucide/vue/-/vue-1.33.0.tgz",
@@ -697,9 +1195,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -881,6 +1376,12 @@
         "@octokit/openapi-types": "^28.0.0"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -991,9 +1492,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1008,9 +1506,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1025,9 +1520,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1042,9 +1534,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1059,9 +1548,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1076,9 +1562,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1093,9 +1576,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1110,9 +1590,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1127,9 +1604,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1144,9 +1618,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1161,9 +1632,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1178,9 +1646,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1195,9 +1660,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1295,6 +1757,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz",
+      "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-basic-ssl": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.3.0.tgz",
+      "integrity": "sha512-bdyo8rB3NnQbikdMpHaML9Z1OZPBu6fFOBo+OtxsBlvMJtysWskmBcnbIDhUqgC8tcxNv/a+BcV5U+2nQMm1OQ==",
+      "dev": true,
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
@@ -1312,6 +1797,76 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitejs/plugin-vue-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-5.1.6.tgz",
+      "integrity": "sha512-YXvi4as2clxt6DFw5+a0tTA97ntiQXm/raR8ofNj3aNwwdlVGTiG2gp7EvfZW17P50acL/9bP0ccF4XnqNmlgA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.29.0",
+        "@babel/plugin-syntax-typescript": "^7.29.7",
+        "@babel/plugin-transform-typescript": "^7.29.7",
+        "@rolldown/pluginutils": "^1.0.1",
+        "@vue/babel-plugin-jsx": "^2.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-2.0.1.tgz",
+      "integrity": "sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==",
+      "dev": true
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-2.0.1.tgz",
+      "integrity": "sha512-a8CaLQjD/s4PVdhrLD/zT574ZNPnZBOY+IhdtKWRB4HRZ0I2tXBi5ne7d9eCfaYwp5gU5+4KIyFTV1W1YL9xZA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@vue/babel-helper-vue-transform-on": "2.0.1",
+        "@vue/babel-plugin-resolve-type": "2.0.1",
+        "@vue/shared": "^3.5.22"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-2.0.1.tgz",
+      "integrity": "sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.4",
+        "@vue/compiler-sfc": "^3.5.22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
@@ -1368,6 +1923,37 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-core": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.2.1.tgz",
+      "integrity": "sha512-s/VfAY9oDTb/kFEWmy461jaFde2MIV1RO/gi1vwM+PAZBZ/Pc2Ndu3BNBdZUze8QDUuyYvElbEEGA83syjJfzA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-kit": "^8.2.1",
+        "@vue/devtools-shared": "^8.2.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz",
+      "integrity": "sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-shared": "^8.2.1",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "perfect-debounce": "^2.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz",
+      "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==",
+      "dev": true
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.41",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
@@ -1537,6 +2123,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/ansis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.3.1.tgz",
+      "integrity": "sha512-BJ8/l4R5LRE7hW9WdSuGYrLSHi2ynxeFpDFbH0K/CgNeY/tyhk+vO6TYxXC5r5CpUhNVX310xzPsN/H9lCdfOA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/arch": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
@@ -1572,6 +2167,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.18",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.18.tgz",
+      "integrity": "sha512-1iEmLEYSiE1SeBoAfPo/Mnx3PzfzHUkDK61ASkCpuk3YXugYLH5DYK1SzqV55F8FMI6s0F+/tCP7Polz1QRjxw==",
+      "dev": true,
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/before-after-hook": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz",
@@ -1579,6 +2186,15 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/bootstrap": {
       "version": "5.3.8",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
@@ -1645,6 +2261,54 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.28.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.8.tgz",
+      "integrity": "sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.12",
+        "caniuse-lite": "^1.0.30001809",
+        "electron-to-chromium": "^1.5.402",
+        "node-releases": "^2.0.53",
+        "update-browserslist-db": "^1.3.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "dev": true,
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -1668,6 +2332,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001809",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz",
+      "integrity": "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1815,6 +2499,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1866,6 +2556,46 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/default-browser": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.1.tgz",
+      "integrity": "sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==",
+      "dev": true,
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1873,19 +2603,11 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/ejs": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-6.0.1.tgz",
-      "integrity": "sha512-UaaM14yby8U3k02ihS1Bmj5Kz2d7CCQM1scxpgs4Mhkq8F1wR2gl3+Ts4h5Ne4Mnt7M9m4Dw7jsuMr3+xO4vZA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.12.18"
-      }
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.412",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.412.tgz",
+      "integrity": "sha512-z4rMe3esBzlzovKHj4gxJnsCGZRK5l4baUvm+gCGJBPE+gsyUMKsuU9tnEUtI1dOebXz1ytAPGjvXhmQ7rIPwA==",
+      "dev": true
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -1906,6 +2628,15 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-stack-parser-es": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
+      "integrity": "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -1948,6 +2679,15 @@
         "@esbuild/win32-x64": "0.25.12"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -2035,6 +2775,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -2058,6 +2807,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "dev": true
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -2101,6 +2856,51 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-in-ssh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-in-ssh/-/is-in-ssh-1.0.0.tgz",
+      "integrity": "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==",
+      "dev": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container/node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-port-reachable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz",
@@ -2147,6 +2947,24 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -2161,6 +2979,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -2255,6 +3100,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -2290,6 +3144,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.53",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.53.tgz",
+      "integrity": "sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -2303,6 +3166,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
+      "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/ohash": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.12.tgz",
+      "integrity": "sha512-65S/5gk9YSsaRjcyf7Nfa6h/d3E8/1gslpXfI4W7Dxn/oap8IKRuNT5VXkLQ1YFKIEg4apRY4Pj6aiwFzrDdmw==",
+      "dev": true
+    },
     "node_modules/on-headers": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
@@ -2329,6 +3211,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/open/-/open-11.0.1.tgz",
+      "integrity": "sha512-NzwMUB6C1D0+Kd+9iMS/H4k+Ck3cTX6Ckyfr/gAGlmvSE1LUQZnEZvWBi4PYmMwH/S5SMeTXnE+9uAz8uF+pWw==",
+      "dev": true,
+      "dependencies": {
+        "default-browser": "^5.4.0",
+        "define-lazy-prop": "^3.0.0",
+        "is-in-ssh": "^1.0.0",
+        "is-inside-container": "^1.0.0",
+        "powershell-utils": "^0.2.0",
+        "wsl-utils": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-is-inside": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
@@ -2353,6 +3255,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2400,6 +3314,18 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/powershell-utils": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.2.0.tgz",
+      "integrity": "sha512-ZlsFlG7MtSFCoc5xreOvBAozCJ6Pf06opgJjh9ONEv418xpZSAzNjstD36C6+JwOnfSqOW/9uDkqKjezTdxZhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
@@ -2506,6 +3432,18 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -2635,6 +3573,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2728,6 +3680,15 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tunnel": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
@@ -2751,6 +3712,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/undici": {
       "version": "6.28.0",
       "resolved": "https://registry.npmjs.org/undici/-/undici-6.28.0.tgz",
@@ -2761,6 +3736,14 @@
         "node": ">=18.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/universal-user-agent": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz",
@@ -2782,6 +3765,52 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.2.tgz",
+      "integrity": "sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==",
+      "dev": true,
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.1.tgz",
+      "integrity": "sha512-ZZ61DsRsOnakl74HAmp3oSN4aXUmEWXf+i/yv0h7tIBfICc3VdrFErQKUUKPgu3AMsTUMbcongALEN4l6GSUrQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/update-check": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
@@ -2878,15 +3907,162 @@
         }
       }
     },
-    "node_modules/vite-plugin-ejs": {
+    "node_modules/vite-dev-rpc": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-ejs/-/vite-plugin-ejs-2.0.0.tgz",
-      "integrity": "sha512-oz72iYfUTgFVl1SVRkaNYsRUx/THorgknwyRvhwBu3RMaigibKcl0T4tkUXw0h8w5JmnBEfPCKcingmTxen3Ng==",
+      "resolved": "https://registry.npmjs.org/vite-dev-rpc/-/vite-dev-rpc-2.0.0.tgz",
+      "integrity": "sha512-yKwbTwdHKSD2k/aGqyWpPHepo45OQc8lH3/6IfT4ZqeKE26ooKvi4WIEKzqWav8v+9Is8u1k8q54hvOmqASazA==",
       "dev": true,
-      "license": "MIT",
+      "dependencies": {
+        "birpc": "^4.0.0",
+        "vite-hot-client": "^2.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0 || ^8.0.0"
+      }
+    },
+    "node_modules/vite-dev-rpc/node_modules/birpc": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-4.2.0.tgz",
+      "integrity": "sha512-KxgKcZPfrtzJDDALHPguGpGJUrzdgpymyiQQgzFjWreHMOpWrnFNVREr5J48x2DBh8ZVioscrV1SBkDipGiX+Q==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vite-hot-client": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-2.2.0.tgz",
+      "integrity": "sha512-76Zs9zrHbH7M7wqeyooGQKdX+yg0pQ0xuQ1PbFp4z5a0Lzn2e5IPFoCswnmqZ4GiwqB4Jo3WcDAMO9jARTJl8w==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0"
+      }
+    },
+    "node_modules/vite-plugin-inspect": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-11.4.1.tgz",
+      "integrity": "sha512-ShOFe2PURXGvRS5OrgmOLZOCwDTD7dEBVt0tMpFPKb9AsvqXKCRGM8QgKrUbRbJYFXScHvDPpGRd28rYidC0tA==",
+      "dev": true,
+      "dependencies": {
+        "ansis": "^4.3.0",
+        "error-stack-parser-es": "^1.0.5",
+        "obug": "^2.1.1",
+        "ohash": "^2.0.11",
+        "open": "^11.0.0",
+        "perfect-debounce": "^2.1.0",
+        "sirv": "^3.0.2",
+        "unplugin-utils": "^0.3.1",
+        "vite-dev-rpc": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0-0 || ^8.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-vue-devtools": {
+      "version": "8.1.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-8.1.5.tgz",
+      "integrity": "sha512-QSVntSN0sbVV08CZntMWOfF8McyPyYyYd19sChLjxYyFCC7Fcpey74ztw1uCCU23wTmR2yWPb92uaxVD4Lw0Fg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-core": "^8.1.5",
+        "@vue/devtools-kit": "^8.1.5",
+        "@vue/devtools-shared": "^8.1.5",
+        "sirv": "^3.0.2",
+        "vite-plugin-inspect": "^11.3.3",
+        "vite-plugin-vue-inspector": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=v14.21.3"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/vite-plugin-vue-inspector": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-6.0.0.tgz",
+      "integrity": "sha512-OpyITJLgZNibxlrik1EmRtvXHDjLRxNPsWkGFTERZs2LgMEdG4W0WoFt5GIgp3a3jRou+eJR8U1zOBk/XQgEbw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.23.0",
+        "@babel/plugin-proposal-decorators": "^7.23.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.22.15",
+        "@vue/babel-plugin-jsx": "^1.1.5",
+        "@vue/compiler-dom": "^3.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.4"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/vite-plugin-vue-inspector/node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",
+      "integrity": "sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==",
+      "dev": true
+    },
+    "node_modules/vite-plugin-vue-inspector/node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.5.0.tgz",
+      "integrity": "sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.2",
+        "@vue/babel-helper-vue-transform-on": "1.5.0",
+        "@vue/babel-plugin-resolve-type": "1.5.0",
+        "@vue/shared": "^3.5.18"
+      },
       "peerDependencies": {
-        "ejs": ">=3",
-        "vite": ">=5.0.0"
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-vue-inspector/node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.5.0.tgz",
+      "integrity": "sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.0",
+        "@vue/compiler-sfc": "^3.5.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/vue": {
@@ -2931,6 +4107,20 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/vue3-simple-icons": {
       "version": "16.10.0",
       "resolved": "https://registry.npmjs.org/vue3-simple-icons/-/vue3-simple-icons-16.10.0.tgz",
@@ -3010,6 +4200,55 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/wsl-utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-1.0.0.tgz",
+      "integrity": "sha512-Hl0ZOAs672vg+06kfujwRhoS6/jehvULrlFkuF2dRu6pHgA8U06h3xqNIqNNU1LTXPcedxByAR4GS6pwQK0mgA==",
+      "dev": true,
+      "dependencies": {
+        "is-wsl": "^3.1.0",
+        "powershell-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/wsl-utils/node_modules/is-wsl": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
+      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+      "dev": true,
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/wsl-utils/node_modules/powershell-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.1.0.tgz",
+      "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
+      "dev": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    },
     "node_modules/zod": {
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
diff --git a/package.json b/package.json
index 56cb311257e..5ec83db8fe0 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "build": "vite build --debug",
     "build-clean": "vite build --debug --emptyOutDir",
-    "dev": "vite build --watch",
+    "dev": "vite",
     "serve": "serve ./tests/fixtures/http --no-port-switching"
   },
   "type": "module",
@@ -15,13 +15,16 @@
     "marked": "18.0.11",
     "vue": "3.5.41",
     "vue-i18n": "11.4.10",
+    "vue-router": "4.6.4",
     "vue3-simple-icons": "16.10.0"
   },
   "devDependencies": {
     "@codecov/vite-plugin": "2.0.1",
+    "@vitejs/plugin-basic-ssl": "2.3.0",
     "@vitejs/plugin-vue": "6.0.8",
+    "@vitejs/plugin-vue-jsx": "5.1.6",
     "serve": "14.2.6",
     "vite": "6.4.3",
-    "vite-plugin-ejs": "2.0.0"
+    "vite-plugin-vue-devtools": "8.1.5"
   }
 }
diff --git a/src_assets/common/assets/web/Navbar.vue b/src_assets/common/assets/web/Navbar.vue
deleted file mode 100644
index dc5afd68d2f..00000000000
--- a/src_assets/common/assets/web/Navbar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <div>
-    <nav class="navbar navbar-expand-lg navbar-sunshine">
-      <div class="container-fluid">
-        <a class="navbar-brand" href="./" title="Sunshine">
-          <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
-        </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-            <li class="nav-item">
-              <a class="nav-link" href="./">
-                <Home :size="18" class="icon"></Home>
-                {{ $t('navbar.home') }}
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./pin">
-                <Lock :size="18" class="icon"></Lock>
-                {{ $t('navbar.pin') }}
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./apps">
-                <Layers :size="18" class="icon"></Layers>
-                {{ $t('navbar.applications') }}
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./featured">
-                <Star :size="18" class="icon"></Star>
-                {{ $t('navbar.featured') }}
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./config">
-                <Settings :size="18" class="icon"></Settings>
-                {{ $t('navbar.configuration') }}
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./troubleshooting">
-                <Info :size="18" class="icon"></Info>
-                {{ $t('navbar.troubleshoot') }}
-              </a>
-            </li>
-          </ul>
-          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-            <li class="nav-item">
-              <ThemeToggle/>
-            </li>
-            <li class="nav-item dropdown">
-              <button class="nav-link dropdown-toggle" type="button" id="navbarUserMenu"
-                      data-bs-toggle="dropdown" aria-expanded="false" aria-label="User menu" title="User menu">
-                <CircleUserRound :size="18" class="icon"></CircleUserRound>
-              </button>
-              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarUserMenu">
-                <li>
-                  <a class="dropdown-item d-flex align-items-center" href="./password">
-                    <Shield :size="18" class="icon"></Shield>
-                    {{ $t('navbar.password') }}
-                  </a>
-                </li>
-                <li><hr class="dropdown-divider"></li>
-                <li>
-                  <button type="button" class="dropdown-item d-flex align-items-center" @click="logout">
-                    <LogOut :size="18" class="icon"></LogOut>
-                    {{ $t('navbar.logout') }}
-                  </button>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-    <Notification></Notification>
-  </div>
-</template>
-
-<script>
-import { CircleUserRound, Home, Info, Layers, Lock, LogOut, Settings, Shield, Star } from '@lucide/vue'
-import ThemeToggle from './ThemeToggle.vue'
-import Notification from './Notification.vue'
-
-export default {
-  components: {
-    ThemeToggle,
-    Notification,
-    Home,
-    Lock,
-    Layers,
-    Star,
-    Settings,
-    Shield,
-    Info,
-    CircleUserRound,
-    LogOut
-  },
-  created() {
-    console.log("Header mounted!")
-  },
-  mounted() {
-    const currentPath = globalThis.location.pathname.replace(/\/$/, '') || '/'
-    const links = document.querySelectorAll('.navbar-sunshine a[href]')
-
-    for (const link of links) {
-      const href = link.getAttribute('href')
-      if (!href || href === '#') {
-        continue
-      }
-
-      const linkPath = new URL(href, globalThis.location.href).pathname.replace(/\/$/, '') || '/'
-      if (linkPath !== currentPath) {
-        continue
-      }
-
-      link.classList.add('active')
-    }
-  },
-  methods: {
-    logout() {
-      const cacheBuster = Date.now().toString()
-      const logoutPageUrl = new URL('/logout', globalThis.location.href)
-      const request = new XMLHttpRequest()
-      const finish = () => {
-        globalThis.location.replace(logoutPageUrl.toString())
-      }
-
-      request.open('GET', '/', true, 'sunshine-logout', cacheBuster)
-      request.setRequestHeader('Cache-Control', 'no-store')
-      request.onload = finish
-      request.onerror = finish
-      request.ontimeout = finish
-      request.timeout = 5000
-      request.send()
-    }
-  }
-}
-</script>
-
-<style>
-/* Navbar toggler icon for dark text on light background */
-.navbar-sunshine .navbar-toggler-icon {
-  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
-}
-</style>
diff --git a/src_assets/common/assets/web/NavbarSimple.vue b/src_assets/common/assets/web/NavbarSimple.vue
deleted file mode 100644
index 82a9ca086e4..00000000000
--- a/src_assets/common/assets/web/NavbarSimple.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <nav class="navbar navbar-sunshine">
-    <div class="container-fluid">
-      <span class="navbar-brand" title="Sunshine">
-        <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
-      </span>
-      <ThemeToggle/>
-    </div>
-  </nav>
-</template>
-
-<script>
-import ThemeToggle from './ThemeToggle.vue'
-
-export default {
-  components: {
-    ThemeToggle,
-  },
-}
-</script>
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index bff44590824..8e6bd41c15a 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -1,295 +1,14 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <h1 class="my-4">{{ $t('index.welcome') }}</h1>
-    <p>{{ $t('index.description') }}</p>
-
-    <!-- Fatal Errors Alert -->
-    <div class="alert alert-danger my-4" v-if="fancyLogs.find(x => x.level === 'Fatal')">
-      <div>
-        <div class="d-flex align-items-center mb-3">
-          <alert-circle :size="32" class="icon-lg me-3"></alert-circle>
-          <div v-html="$t('index.startup_errors')"></div>
-        </div>
-        <ul class="mb-3">
-          <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
-        </ul>
-        <a class="btn btn-danger" href="./troubleshooting#logs">
-          <file-text :size="18" class="icon"></file-text>
-          View Logs
-        </a>
-      </div>
-    </div>
-
-    <!-- libvirtualhid Warning -->
-    <div class="alert alert-warning my-4" v-if="platform === 'windows' && virtualhid && (!virtualhid.installed || !virtualhid.version_compatible)">
-      <div>
-        <div class="d-flex align-items-center mb-3">
-          <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
-          <div>
-            <div v-if="!virtualhid.installed">
-              <p class="mb-1"><strong>{{ $t('index.virtualhid_not_installed_title') }}</strong></p>
-              <p class="mb-0">{{ $t('index.virtualhid_not_installed_desc') }}</p>
-            </div>
-            <div v-else-if="!virtualhid.version_compatible">
-              <p class="mb-1"><strong>{{ $t('index.virtualhid_outdated_title') }}</strong></p>
-              <p class="mb-0">{{ $t('index.virtualhid_outdated_desc', { version: virtualhid.version, supported_versions: virtualhid.supported_versions }) }}</p>
-            </div>
-          </div>
-        </div>
-        <a class="btn btn-warning" href="./troubleshooting#virtualhid">
-          <wrench :size="18" class="icon"></wrench>
-          {{ $t('index.fix_now') }}
-        </a>
-      </div>
-    </div>
-
-    <div class="alert alert-warning my-4" v-if="platform === 'windows' && controllerEnabled && virtualhid && vigembus && !virtualhid.installed && vigembus.installed">
-      <div class="d-flex align-items-center">
-        <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
-        <div>
-          <p class="mb-1"><strong>{{ $t('index.virtualhid_missing_vigembus_installed_title') }}</strong></p>
-          <p class="mb-0">{{ $t('index.virtualhid_missing_vigembus_installed_desc') }}</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Virtual HID Driver license warning -->
-    <div class="alert alert-warning my-4" v-if="platform === 'windows' && virtualhidLicense && !virtualhidLicense.licensed">
-      <div>
-        <div class="d-flex align-items-center mb-3">
-          <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
-          <div>
-            <p class="mb-1"><strong>{{ $t('index.virtualhid_license_required_title') }}</strong></p>
-            <p class="mb-0">{{ $t('index.virtualhid_license_required_desc') }}</p>
-          </div>
-        </div>
-        <a class="btn btn-warning" href="./troubleshooting#virtualhid-license">
-          <wrench :size="18" class="icon"></wrench>
-          {{ $t('index.fix_now') }}
-        </a>
-      </div>
-    </div>
-
-    <!-- Version -->
-    <div class="card my-4">
-      <div class="card-body" v-if="version">
-        <h2>Version {{version.version}}</h2>
-
-        <div v-if="loading" class="my-3">
-          {{ $t('index.loading_latest') }}
-        </div>
-
-        <div class="alert alert-success my-3" v-if="buildVersionIsDirty">
-          <package :size="18" class="icon"></package>
-          {{ $t('index.version_dirty') }} 🌇
-        </div>
-
-        <div class="alert alert-info my-3" v-if="installedVersionNotStable">
-          <info :size="18" class="icon"></info>
-          {{ $t('index.installed_version_not_stable') }}
-        </div>
-
-        <div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
-          <div class="alert alert-success my-3">
-            <check-circle :size="18" class="icon"></check-circle>
-            {{ $t('index.version_latest') }}
-          </div>
-        </div>
-
-        <div v-if="notifyPreReleases && preReleaseBuildAvailable">
-          <div class="alert alert-warning my-3">
-            <!-- header row -->
-            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
-              <div class="d-flex align-items-center gap-3 flex-wrap">
-                <alert-circle :size="18" class="icon"></alert-circle>
-                <span>{{ $t('index.new_pre_release') }}</span>
-                <h5 class="mb-0">{{ preReleaseVersion.release.name }}</h5>
-              </div>
-              <a class="btn btn-success flex-shrink-0" :href="preReleaseVersion.release.html_url" target="_blank">
-                <download :size="18" class="icon"></download>
-                {{ $t('index.download') }}
-              </a>
-            </div>
-
-            <!-- body row (full width) -->
-            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(preReleaseVersion.release.body)"></div>
-          </div>
-        </div>
-
-        <div v-if="stableBuildAvailable">
-          <div class="alert alert-warning my-3">
-            <!-- header row -->
-            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
-              <div class="d-flex align-items-center gap-3 flex-wrap">
-                <alert-circle :size="18" class="icon"></alert-circle>
-                <span>{{ $t('index.new_stable') }}</span>
-                <h5 class="mb-0">{{ githubVersion.release.name }}</h5>
-              </div>
-              <a class="btn btn-success flex-shrink-0" :href="githubVersion.release.html_url" target="_blank">
-                <download :size="18" class="icon"></download>
-                {{ $t('index.download') }}
-              </a>
-            </div>
-
-            <!-- body row (full width) -->
-            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(githubVersion.release.body)"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Resources -->
-    <div class="my-4">
-      <Resource-Card :installed-version-not-stable="installedVersionNotStable"></Resource-Card>
-    </div>
-  </div>
-</body>
-
-<script type="module">
-  import { createApp } from 'vue'
-  import { marked } from 'marked'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import ResourceCard from './ResourceCard.vue'
-  import SunshineVersion from './sunshine_version'
-  import {
-    AlertCircle,
-    AlertTriangle,
-    FileText,
-    Wrench,
-    Package,
-    Info,
-    CheckCircle,
-    Download
-  } from '@lucide/vue'
-
-  // Configure marked to allow HTML
-  marked.setOptions({
-    breaks: true,
-    gfm: true,
-    headerIds: true,
-    mangle: false,
-    sanitize: false
-  });
-
-  console.log("Hello, Sunshine!")
-  let app = createApp({
-    components: {
-      Navbar,
-      ResourceCard,
-      AlertCircle,
-      AlertTriangle,
-      FileText,
-      Wrench,
-      Package,
-      Info,
-      CheckCircle,
-      Download
-    },
-    data() {
-      return {
-        version: null,
-        githubVersion: null,
-        notifyPreReleases: false,
-        preReleaseVersion: null,
-        loading: true,
-        logs: null,
-        platform: "",
-        controllerEnabled: false,
-        virtualhid: null,
-        virtualhidLicense: null,
-        vigembus: null,
-      }
-    },
-    async created() {
-      try {
-        let config = await fetch("./api/config").then((r) => r.json());
-        this.notifyPreReleases = config.notify_pre_releases;
-        this.platform = config.platform;
-        this.controllerEnabled = config.controller !== "disabled";
-        this.version = new SunshineVersion(null, config.version);
-        console.log("Version: ", this.version.version)
-        this.githubVersion = new SunshineVersion(await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()), null);
-        console.log("GitHub Version: ", this.githubVersion.version)
-        this.preReleaseVersion = new SunshineVersion((await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease), null);
-        console.log("Pre-Release Version: ", this.preReleaseVersion.version)
-
-        // The Virtual HID Driver also backs relative mouse input when controllers are disabled.
-        if (this.platform === 'windows') {
-          try {
-            const virtualInputStatus = await fetch("./api/virtual-input/status").then((r) => r.json());
-            this.virtualhid = virtualInputStatus.virtualhid;
-            this.vigembus = virtualInputStatus.vigembus;
-          } catch (e) {
-            console.error("Failed to fetch virtual input driver status:", e);
-          }
-          try {
-            this.virtualhidLicense = await fetch("./api/virtual-input/license").then((r) => r.json());
-          } catch (e) {
-            console.error("Failed to fetch Virtual HID Driver license status:", e);
-          }
-        }
-      } catch (e) {
-        console.error(e);
-      }
-      try {
-        this.logs = (await fetch("./api/logs").then(r => r.text()))
-      } catch (e) {
-        console.error(e);
-      }
-      this.loading = false;
-    },
-    computed: {
-      installedVersionNotStable() {
-        if (!this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.version.isGreater(this.githubVersion);
-      },
-      stableBuildAvailable() {
-        if (!this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.githubVersion.isGreater(this.version);
-      },
-      preReleaseBuildAvailable() {
-        if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.preReleaseVersion.isGreater(this.version) && this.preReleaseVersion.isGreater(this.githubVersion);
-      },
-      buildVersionIsDirty() {
-        return this.version.version?.split(".").length === 5 &&
-          this.version.version.indexOf("dirty") !== -1
-      },
-      /** Parse the text errors, calculating the text, the timestamp and the level */
-      fancyLogs() {
-        if (!this.logs) return [];
-        let regex = /(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}]):\s/g;
-        let rawLogLines = (this.logs.split(regex)).splice(1);
-        let logLines = []
-        for (let i = 0; i < rawLogLines.length; i += 2) {
-          logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
-        }
-        return logLines;
-      }
-    },
-    methods: {
-      convertMarkdownToHtml(markdown) {
-        if (!markdown) return '';
-        return marked.parse(markdown);
-      }
-    }
-  });
-
-  initApp(app);
-</script>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="./images/sunshine.ico" />
+    <title>Sunshine</title>
+    <script type="module" defer src="./src/main.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
 </html>
diff --git a/src_assets/common/assets/web/src/App.vue b/src_assets/common/assets/web/src/App.vue
new file mode 100644
index 00000000000..be0a23fba65
--- /dev/null
+++ b/src_assets/common/assets/web/src/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <Layout></Layout>
+</template>
+
+<script>
+import Layout from './components/Layout.vue'
+
+export default {
+  components: {
+    Layout
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/src/assets/sunshine.css
similarity index 100%
rename from src_assets/common/assets/web/sunshine.css
rename to src_assets/common/assets/web/src/assets/sunshine.css
diff --git a/src_assets/common/assets/web/Checkbox.vue b/src_assets/common/assets/web/src/components/Checkbox.vue
similarity index 100%
rename from src_assets/common/assets/web/Checkbox.vue
rename to src_assets/common/assets/web/src/components/Checkbox.vue
diff --git a/src_assets/common/assets/web/src/components/Layout.vue b/src_assets/common/assets/web/src/components/Layout.vue
new file mode 100644
index 00000000000..d5e63d89be8
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/Layout.vue
@@ -0,0 +1,19 @@
+<template>
+    <Navbar></Navbar>
+    <Notification></Notification>
+    <div id="content" class="container">
+        <router-view />
+    </div>
+</template>
+
+<script>
+import Navbar from './Navbar.vue'
+import Notification from './Notification.vue'
+
+export default {
+    components: {
+        Navbar,
+        Notification
+    }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/Navbar.vue b/src_assets/common/assets/web/src/components/Navbar.vue
new file mode 100644
index 00000000000..46008cc00c2
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/Navbar.vue
@@ -0,0 +1,107 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-sunshine">
+    <div class="container-fluid">
+      <router-link class="navbar-brand" to="/" title="Sunshine">
+        <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
+      </router-link>
+      <template v-if="!isPublic">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item" v-for="route in navRoutes" :key="route.name">
+              <router-link class="nav-link" :to="route.path">
+                <component :is="route.meta.nav.icon" :size="18" class="icon"></component>
+                {{ $t(route.meta.nav.label) }}
+              </router-link>
+            </li>
+          </ul>
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <ThemeToggle />
+            </li>
+            <li class="nav-item dropdown">
+              <button class="nav-link dropdown-toggle" type="button" id="navbarUserMenu" data-bs-toggle="dropdown"
+                aria-expanded="false" aria-label="User menu" title="User menu">
+                <CircleUserRound :size="18" class="icon"></CircleUserRound>
+              </button>
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarUserMenu">
+                <li>
+                  <router-link class="dropdown-item d-flex align-items-center" to="/password">
+                    <Shield :size="18" class="icon"></Shield>
+                    {{ $t('navbar.password') }}
+                  </router-link>
+                </li>
+                <li>
+                  <hr class="dropdown-divider">
+                </li>
+                <li>
+                  <button type="button" class="dropdown-item d-flex align-items-center" @click="logout">
+                    <LogOut :size="18" class="icon"></LogOut>
+                    {{ $t('navbar.logout') }}
+                  </button>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <template v-else>
+        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <ThemeToggle />
+          </li>
+        </ul>
+      </template>
+    </div>
+  </nav>
+</template>
+
+<script>
+import { CircleUserRound, LogOut, Shield } from '@lucide/vue'
+import ThemeToggle from './ThemeToggle.vue'
+
+export default {
+  components: {
+    ThemeToggle,
+    Shield,
+    CircleUserRound,
+    LogOut
+  },
+  computed: {
+    isPublic() {
+      return !!this.$route.meta.public
+    },
+    navRoutes() {
+      return this.$router.options.routes.filter(route => route.meta?.nav)
+    }
+  },
+  methods: {
+    logout() {
+      const cacheBuster = Date.now().toString()
+      const logoutPageUrl = new URL('/logout', globalThis.location.href)
+      const request = new XMLHttpRequest()
+      const finish = () => {
+        globalThis.location.replace(logoutPageUrl.toString())
+      }
+
+      request.open('GET', '/', true, 'sunshine-logout', cacheBuster)
+      request.setRequestHeader('Cache-Control', 'no-store')
+      request.onload = finish
+      request.onerror = finish
+      request.ontimeout = finish
+      request.timeout = 5000
+      request.send()
+    }
+  }
+}
+</script>
+
+<style>
+/* Navbar toggler icon for dark text on light background */
+.navbar-sunshine .navbar-toggler-icon {
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+}
+</style>
diff --git a/src_assets/common/assets/web/Notification.vue b/src_assets/common/assets/web/src/components/Notification.vue
similarity index 100%
rename from src_assets/common/assets/web/Notification.vue
rename to src_assets/common/assets/web/src/components/Notification.vue
diff --git a/src_assets/common/assets/web/PlatformLayout.vue b/src_assets/common/assets/web/src/components/PlatformLayout.vue
similarity index 100%
rename from src_assets/common/assets/web/PlatformLayout.vue
rename to src_assets/common/assets/web/src/components/PlatformLayout.vue
diff --git a/src_assets/common/assets/web/ResourceCard.vue b/src_assets/common/assets/web/src/components/ResourceCard.vue
similarity index 100%
rename from src_assets/common/assets/web/ResourceCard.vue
rename to src_assets/common/assets/web/src/components/ResourceCard.vue
diff --git a/src_assets/common/assets/web/SimpleIcon.vue b/src_assets/common/assets/web/src/components/SimpleIcon.vue
similarity index 100%
rename from src_assets/common/assets/web/SimpleIcon.vue
rename to src_assets/common/assets/web/src/components/SimpleIcon.vue
diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/src/components/ThemeToggle.vue
similarity index 74%
rename from src_assets/common/assets/web/ThemeToggle.vue
rename to src_assets/common/assets/web/src/components/ThemeToggle.vue
index 0bddebf84c3..7f3f4e85fbe 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/src/components/ThemeToggle.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { loadAutoTheme, setupThemeToggleListener } from './theme'
+import { loadAutoTheme, setupThemeToggleListener } from '../utils/theme'
 import { onMounted } from 'vue'
 import {
   CloudMoon,
@@ -35,12 +35,8 @@ onMounted(() => {
 
 <template>
   <div class="dropdown bd-mode-toggle">
-    <a class="nav-link dropdown-toggle d-flex align-items-center"
-            id="bd-theme"
-            type="button"
-            aria-expanded="false"
-            data-bs-toggle="dropdown"
-            aria-label="{{ $t('navbar.toggle_theme') }} ({{ $t('navbar.theme_auto') }})">
+    <a class="nav-link dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false"
+      data-bs-toggle="dropdown" aria-label="{{ $t('navbar.toggle_theme') }} ({{ $t('navbar.theme_auto') }})">
       <span class="theme-icon-active">
         <MonitorSmartphone :size="18" class="icon"></MonitorSmartphone>
       </span>
@@ -48,7 +44,8 @@ onMounted(() => {
     </a>
     <ul class="dropdown-menu dropdown-menu-end theme-menu" aria-labelledby="bd-theme-text">
       <li class="theme-menu-full">
-        <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
+        <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
+          aria-pressed="true">
           <MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
           {{ $t('navbar.theme_auto') }}
         </button>
@@ -60,39 +57,48 @@ onMounted(() => {
       <!-- Dark Themes -->
       <li class="theme-menu-group">
         <h6 class="dropdown-header">{{ $t('navbar.theme_group_dark') }}</h6>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
+          aria-pressed="false">
           <Moon :size="18" class="theme-icon icon"></Moon>
           {{ $t('navbar.theme_dark') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula"
+          aria-pressed="false">
           <Ghost :size="18" class="theme-icon icon"></Ghost>
           {{ $t('navbar.theme_dracula') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="mocha" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="mocha"
+          aria-pressed="false">
           <Coffee :size="18" class="theme-icon icon"></Coffee>
           {{ $t('navbar.theme_mocha') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember"
+          aria-pressed="false">
           <Flame :size="18" class="theme-icon icon"></Flame>
           {{ $t('navbar.theme_ember') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine"
+          aria-pressed="false">
           <TreePine :size="18" class="theme-icon icon"></TreePine>
           {{ $t('navbar.theme_rose_pine') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight"
+          aria-pressed="false">
           <CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
           {{ $t('navbar.theme_moonlight') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate"
+          aria-pressed="false">
           <Layers :size="18" class="theme-icon icon"></Layers>
           {{ $t('navbar.theme_slate') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight"
+          aria-pressed="false">
           <CloudRain :size="18" class="theme-icon icon"></CloudRain>
           {{ $t('navbar.theme_midnight') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord"
+          aria-pressed="false">
           <Mountain :size="18" class="theme-icon icon"></Mountain>
           {{ $t('navbar.theme_nord') }}
         </button>
@@ -100,51 +106,63 @@ onMounted(() => {
       <!-- Light Themes -->
       <li class="theme-menu-group">
         <h6 class="dropdown-header">{{ $t('navbar.theme_group_light') }}</h6>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
+          aria-pressed="false">
           <Sun :size="18" class="theme-icon icon"></Sun>
           {{ $t('navbar.theme_light') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard"
+          aria-pressed="false">
           <Droplet :size="18" class="theme-icon icon"></Droplet>
           {{ $t('navbar.theme_alucard') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="latte" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="latte"
+          aria-pressed="false">
           <Milk :size="18" class="theme-icon icon"></Milk>
           {{ $t('navbar.theme_latte') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember-light" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember-light"
+          aria-pressed="false">
           <Sunset :size="18" class="theme-icon icon"></Sunset>
           {{ $t('navbar.theme_ember_light') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine-dawn" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine-dawn"
+          aria-pressed="false">
           <Sprout :size="18" class="theme-icon icon"></Sprout>
           {{ $t('navbar.theme_rose_pine_dawn') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine"
+          aria-pressed="false">
           <Sunrise :size="18" class="theme-icon icon"></Sunrise>
           {{ $t('navbar.theme_sunshine') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo"
+          aria-pressed="false">
           <Sparkles :size="18" class="theme-icon icon"></Sparkles>
           {{ $t('navbar.theme_indigo') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean"
+          aria-pressed="false">
           <Waves :size="18" class="theme-icon icon"></Waves>
           {{ $t('navbar.theme_ocean') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="forest" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="forest"
+          aria-pressed="false">
           <Trees :size="18" class="theme-icon icon"></Trees>
           {{ $t('navbar.theme_forest') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose"
+          aria-pressed="false">
           <Flower :size="18" class="theme-icon icon"></Flower>
           {{ $t('navbar.theme_rose') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="lavender" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="lavender"
+          aria-pressed="false">
           <Flower2 :size="18" class="theme-icon icon"></Flower2>
           {{ $t('navbar.theme_lavender') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="monochrome" aria-pressed="false">
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="monochrome"
+          aria-pressed="false">
           <Contrast :size="18" class="theme-icon icon"></Contrast>
           {{ $t('navbar.theme_monochrome') }}
         </button>
@@ -153,5 +171,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src_assets/common/assets/web/configs/tabs/Advanced.vue b/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Advanced.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
diff --git a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/AudioVideo.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
diff --git a/src_assets/common/assets/web/configs/tabs/ContainerEncoders.vue b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/ContainerEncoders.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
diff --git a/src_assets/common/assets/web/configs/tabs/Files.vue b/src_assets/common/assets/web/src/components/configs/tabs/Files.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Files.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Files.vue
diff --git a/src_assets/common/assets/web/configs/tabs/General.vue b/src_assets/common/assets/web/src/components/configs/tabs/General.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/General.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/General.vue
diff --git a/src_assets/common/assets/web/configs/tabs/Inputs.vue b/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Inputs.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
diff --git a/src_assets/common/assets/web/configs/tabs/Network.vue b/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Network.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Network.vue
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayOutputSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/DisplayOutputSelector.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/SoftwareEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/SoftwareEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VulkanEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/VulkanEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue
diff --git a/src_assets/common/assets/web/src/main.js b/src_assets/common/assets/web/src/main.js
new file mode 100644
index 00000000000..579bfb0f47b
--- /dev/null
+++ b/src_assets/common/assets/web/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { initApp } from './utils/init'
+
+const app = createApp(App)
+
+initApp(app, (app) => {
+  app.use(router)
+})
diff --git a/src_assets/common/assets/web/src/router/index.js b/src_assets/common/assets/web/src/router/index.js
new file mode 100644
index 00000000000..46f8f46aaf6
--- /dev/null
+++ b/src_assets/common/assets/web/src/router/index.js
@@ -0,0 +1,65 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { Home, Info, Layers, Lock, Settings, Star } from '@lucide/vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  linkActiveClass: 'active',
+  linkExactActiveClass: 'active',
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      component: () => import('../views/IndexView.vue'),
+      meta: { nav: { icon: Home, label: 'navbar.home' } },
+    },
+    {
+      path: '/pin',
+      name: 'pin',
+      component: () => import('../views/PinView.vue'),
+      meta: { nav: { icon: Lock, label: 'navbar.pin' } },
+    },
+    {
+      path: '/apps',
+      name: 'apps',
+      component: () => import('../views/AppsView.vue'),
+      meta: { nav: { icon: Layers, label: 'navbar.applications' } },
+    },
+    {
+      path: '/featured',
+      name: 'featured',
+      component: () => import('../views/FeaturedView.vue'),
+      meta: { nav: { icon: Star, label: 'navbar.featured' } },
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: () => import('../views/ConfigView.vue'),
+      meta: { nav: { icon: Settings, label: 'navbar.configuration' } },
+    },
+    {
+      path: '/troubleshooting',
+      name: 'troubleshooting',
+      component: () => import('../views/TroubleshootingView.vue'),
+      meta: { nav: { icon: Info, label: 'navbar.troubleshoot' } },
+    },
+    {
+      path: '/password',
+      name: 'password',
+      component: () => import('../views/PasswordView.vue'),
+    },
+    {
+      path: '/logout',
+      name: 'logout',
+      component: () => import('../views/LogoutView.vue'),
+      meta: { public: true },
+    },
+    {
+      path: '/welcome',
+      name: 'welcome',
+      component: () => import('../views/WelcomeView.vue'),
+      meta: { public: true },
+    },
+  ],
+})
+
+export default router
diff --git a/src_assets/common/assets/web/fetch_utils.js b/src_assets/common/assets/web/src/utils/fetch_utils.js
similarity index 94%
rename from src_assets/common/assets/web/fetch_utils.js
rename to src_assets/common/assets/web/src/utils/fetch_utils.js
index 8d41ce66e47..dc4966e606a 100644
--- a/src_assets/common/assets/web/fetch_utils.js
+++ b/src_assets/common/assets/web/src/utils/fetch_utils.js
@@ -1,4 +1,4 @@
-import { notifyKey } from './Notification.vue'
+import { notifyKey } from '../components/Notification.vue'
 
 /**
  * The set of error messages that indicate a CSRF validation failure.
diff --git a/src_assets/common/assets/web/init.js b/src_assets/common/assets/web/src/utils/init.js
similarity index 95%
rename from src_assets/common/assets/web/init.js
rename to src_assets/common/assets/web/src/utils/init.js
index 0244018c8f0..36eaa96dbae 100644
--- a/src_assets/common/assets/web/init.js
+++ b/src_assets/common/assets/web/src/utils/init.js
@@ -3,7 +3,7 @@ import i18n from './locale'
 import 'bootstrap/dist/css/bootstrap.min.css'
 // Load Sunshine.css after bootstrap to override some of the styles.
 // Makes themes load and style correctly.
-import './sunshine.css'
+import '../assets/sunshine.css'
 
 // must import even if not implicitly using here
 // https://github.com/aurelia/skeleton-navigation/issues/894
@@ -15,9 +15,9 @@ export function initApp(app, config) {
     i18n().then(i18n => {
         app.use(i18n);
         app.provide('i18n', i18n.global)
-        app.mount('#app');
         if (config) {
             config(app)
         }
+        app.mount('#app');
     });
 }
diff --git a/src_assets/common/assets/web/locale.js b/src_assets/common/assets/web/src/utils/locale.js
similarity index 85%
rename from src_assets/common/assets/web/locale.js
rename to src_assets/common/assets/web/src/utils/locale.js
index 25f9795c8f1..fc0aa21de54 100644
--- a/src_assets/common/assets/web/locale.js
+++ b/src_assets/common/assets/web/src/utils/locale.js
@@ -1,12 +1,11 @@
 import {createI18n} from "vue-i18n";
 
-// Import only the fallback language files
-import en from './public/assets/locale/en.json'
-
 export default async function() {
     let r = await (await fetch("./api/configLocale")).json();
     let locale = r.locale ?? "en";
     document.querySelector('html').setAttribute('lang', locale);
+    // Fetch only the fallback language files
+    let en = await (await fetch('./assets/locale/en.json')).json();
     let messages = {
         en
     };
diff --git a/src_assets/common/assets/web/platform-i18n.js b/src_assets/common/assets/web/src/utils/platform-i18n.js
similarity index 100%
rename from src_assets/common/assets/web/platform-i18n.js
rename to src_assets/common/assets/web/src/utils/platform-i18n.js
diff --git a/src_assets/common/assets/web/sunshine_version.js b/src_assets/common/assets/web/src/utils/sunshine_version.js
similarity index 100%
rename from src_assets/common/assets/web/sunshine_version.js
rename to src_assets/common/assets/web/src/utils/sunshine_version.js
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/src/utils/theme.js
similarity index 100%
rename from src_assets/common/assets/web/theme.js
rename to src_assets/common/assets/web/src/utils/theme.js
diff --git a/src_assets/common/assets/web/src/views/AppsView.vue b/src_assets/common/assets/web/src/views/AppsView.vue
new file mode 100644
index 00000000000..daf09996cba
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/AppsView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Apps</h1>
+  <p>TODO: migrate content from src/views/apps.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/ConfigView.vue b/src_assets/common/assets/web/src/views/ConfigView.vue
new file mode 100644
index 00000000000..dff195a4dfe
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/ConfigView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Config</h1>
+  <p>TODO: migrate content from src/views/config.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/FeaturedView.vue b/src_assets/common/assets/web/src/views/FeaturedView.vue
new file mode 100644
index 00000000000..56888ab8e97
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/FeaturedView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Featured</h1>
+  <p>TODO: migrate content from src/views/featured.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/IndexView.vue b/src_assets/common/assets/web/src/views/IndexView.vue
new file mode 100644
index 00000000000..3462a7ef658
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/IndexView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Index</h1>
+  <p>TODO: migrate content from src/views/index.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/LogoutView.vue b/src_assets/common/assets/web/src/views/LogoutView.vue
new file mode 100644
index 00000000000..65cd9b85811
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/LogoutView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Logout</h1>
+  <p>TODO: migrate content from src/views/logout.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/PasswordView.vue b/src_assets/common/assets/web/src/views/PasswordView.vue
new file mode 100644
index 00000000000..2fec3f27ace
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/PasswordView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Password</h1>
+  <p>TODO: migrate content from src/views/password.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/PinView.vue b/src_assets/common/assets/web/src/views/PinView.vue
new file mode 100644
index 00000000000..d070ae6f2bd
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/PinView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Pin</h1>
+  <p>TODO: migrate content from src/views/pin.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/TroubleshootingView.vue b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
new file mode 100644
index 00000000000..a30e8abbbd0
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Troubleshooting</h1>
+  <p>TODO: migrate content from src/views/troubleshooting.html</p>
+</template>
diff --git a/src_assets/common/assets/web/src/views/WelcomeView.vue b/src_assets/common/assets/web/src/views/WelcomeView.vue
new file mode 100644
index 00000000000..648bcbaf890
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/WelcomeView.vue
@@ -0,0 +1,8 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <h1>Welcome</h1>
+  <p>TODO: migrate content from src/views/welcome.html</p>
+</template>
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/src/views/apps.html
similarity index 100%
rename from src_assets/common/assets/web/apps.html
rename to src_assets/common/assets/web/src/views/apps.html
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/src/views/config.html
similarity index 100%
rename from src_assets/common/assets/web/config.html
rename to src_assets/common/assets/web/src/views/config.html
diff --git a/src_assets/common/assets/web/featured.html b/src_assets/common/assets/web/src/views/featured.html
similarity index 100%
rename from src_assets/common/assets/web/featured.html
rename to src_assets/common/assets/web/src/views/featured.html
diff --git a/src_assets/common/assets/web/src/views/index.html b/src_assets/common/assets/web/src/views/index.html
new file mode 100644
index 00000000000..bff44590824
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/index.html
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="auto">
+
+<head>
+  <%- header %>
+</head>
+
+<body id="app" v-cloak>
+  <Navbar></Navbar>
+  <div id="content" class="container">
+    <h1 class="my-4">{{ $t('index.welcome') }}</h1>
+    <p>{{ $t('index.description') }}</p>
+
+    <!-- Fatal Errors Alert -->
+    <div class="alert alert-danger my-4" v-if="fancyLogs.find(x => x.level === 'Fatal')">
+      <div>
+        <div class="d-flex align-items-center mb-3">
+          <alert-circle :size="32" class="icon-lg me-3"></alert-circle>
+          <div v-html="$t('index.startup_errors')"></div>
+        </div>
+        <ul class="mb-3">
+          <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
+        </ul>
+        <a class="btn btn-danger" href="./troubleshooting#logs">
+          <file-text :size="18" class="icon"></file-text>
+          View Logs
+        </a>
+      </div>
+    </div>
+
+    <!-- libvirtualhid Warning -->
+    <div class="alert alert-warning my-4" v-if="platform === 'windows' && virtualhid && (!virtualhid.installed || !virtualhid.version_compatible)">
+      <div>
+        <div class="d-flex align-items-center mb-3">
+          <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
+          <div>
+            <div v-if="!virtualhid.installed">
+              <p class="mb-1"><strong>{{ $t('index.virtualhid_not_installed_title') }}</strong></p>
+              <p class="mb-0">{{ $t('index.virtualhid_not_installed_desc') }}</p>
+            </div>
+            <div v-else-if="!virtualhid.version_compatible">
+              <p class="mb-1"><strong>{{ $t('index.virtualhid_outdated_title') }}</strong></p>
+              <p class="mb-0">{{ $t('index.virtualhid_outdated_desc', { version: virtualhid.version, supported_versions: virtualhid.supported_versions }) }}</p>
+            </div>
+          </div>
+        </div>
+        <a class="btn btn-warning" href="./troubleshooting#virtualhid">
+          <wrench :size="18" class="icon"></wrench>
+          {{ $t('index.fix_now') }}
+        </a>
+      </div>
+    </div>
+
+    <div class="alert alert-warning my-4" v-if="platform === 'windows' && controllerEnabled && virtualhid && vigembus && !virtualhid.installed && vigembus.installed">
+      <div class="d-flex align-items-center">
+        <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
+        <div>
+          <p class="mb-1"><strong>{{ $t('index.virtualhid_missing_vigembus_installed_title') }}</strong></p>
+          <p class="mb-0">{{ $t('index.virtualhid_missing_vigembus_installed_desc') }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Virtual HID Driver license warning -->
+    <div class="alert alert-warning my-4" v-if="platform === 'windows' && virtualhidLicense && !virtualhidLicense.licensed">
+      <div>
+        <div class="d-flex align-items-center mb-3">
+          <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
+          <div>
+            <p class="mb-1"><strong>{{ $t('index.virtualhid_license_required_title') }}</strong></p>
+            <p class="mb-0">{{ $t('index.virtualhid_license_required_desc') }}</p>
+          </div>
+        </div>
+        <a class="btn btn-warning" href="./troubleshooting#virtualhid-license">
+          <wrench :size="18" class="icon"></wrench>
+          {{ $t('index.fix_now') }}
+        </a>
+      </div>
+    </div>
+
+    <!-- Version -->
+    <div class="card my-4">
+      <div class="card-body" v-if="version">
+        <h2>Version {{version.version}}</h2>
+
+        <div v-if="loading" class="my-3">
+          {{ $t('index.loading_latest') }}
+        </div>
+
+        <div class="alert alert-success my-3" v-if="buildVersionIsDirty">
+          <package :size="18" class="icon"></package>
+          {{ $t('index.version_dirty') }} 🌇
+        </div>
+
+        <div class="alert alert-info my-3" v-if="installedVersionNotStable">
+          <info :size="18" class="icon"></info>
+          {{ $t('index.installed_version_not_stable') }}
+        </div>
+
+        <div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
+          <div class="alert alert-success my-3">
+            <check-circle :size="18" class="icon"></check-circle>
+            {{ $t('index.version_latest') }}
+          </div>
+        </div>
+
+        <div v-if="notifyPreReleases && preReleaseBuildAvailable">
+          <div class="alert alert-warning my-3">
+            <!-- header row -->
+            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
+              <div class="d-flex align-items-center gap-3 flex-wrap">
+                <alert-circle :size="18" class="icon"></alert-circle>
+                <span>{{ $t('index.new_pre_release') }}</span>
+                <h5 class="mb-0">{{ preReleaseVersion.release.name }}</h5>
+              </div>
+              <a class="btn btn-success flex-shrink-0" :href="preReleaseVersion.release.html_url" target="_blank">
+                <download :size="18" class="icon"></download>
+                {{ $t('index.download') }}
+              </a>
+            </div>
+
+            <!-- body row (full width) -->
+            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(preReleaseVersion.release.body)"></div>
+          </div>
+        </div>
+
+        <div v-if="stableBuildAvailable">
+          <div class="alert alert-warning my-3">
+            <!-- header row -->
+            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
+              <div class="d-flex align-items-center gap-3 flex-wrap">
+                <alert-circle :size="18" class="icon"></alert-circle>
+                <span>{{ $t('index.new_stable') }}</span>
+                <h5 class="mb-0">{{ githubVersion.release.name }}</h5>
+              </div>
+              <a class="btn btn-success flex-shrink-0" :href="githubVersion.release.html_url" target="_blank">
+                <download :size="18" class="icon"></download>
+                {{ $t('index.download') }}
+              </a>
+            </div>
+
+            <!-- body row (full width) -->
+            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(githubVersion.release.body)"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Resources -->
+    <div class="my-4">
+      <Resource-Card :installed-version-not-stable="installedVersionNotStable"></Resource-Card>
+    </div>
+  </div>
+</body>
+
+<script type="module">
+  import { createApp } from 'vue'
+  import { marked } from 'marked'
+  import { initApp } from './init'
+  import Navbar from './Navbar.vue'
+  import ResourceCard from './ResourceCard.vue'
+  import SunshineVersion from './sunshine_version'
+  import {
+    AlertCircle,
+    AlertTriangle,
+    FileText,
+    Wrench,
+    Package,
+    Info,
+    CheckCircle,
+    Download
+  } from '@lucide/vue'
+
+  // Configure marked to allow HTML
+  marked.setOptions({
+    breaks: true,
+    gfm: true,
+    headerIds: true,
+    mangle: false,
+    sanitize: false
+  });
+
+  console.log("Hello, Sunshine!")
+  let app = createApp({
+    components: {
+      Navbar,
+      ResourceCard,
+      AlertCircle,
+      AlertTriangle,
+      FileText,
+      Wrench,
+      Package,
+      Info,
+      CheckCircle,
+      Download
+    },
+    data() {
+      return {
+        version: null,
+        githubVersion: null,
+        notifyPreReleases: false,
+        preReleaseVersion: null,
+        loading: true,
+        logs: null,
+        platform: "",
+        controllerEnabled: false,
+        virtualhid: null,
+        virtualhidLicense: null,
+        vigembus: null,
+      }
+    },
+    async created() {
+      try {
+        let config = await fetch("./api/config").then((r) => r.json());
+        this.notifyPreReleases = config.notify_pre_releases;
+        this.platform = config.platform;
+        this.controllerEnabled = config.controller !== "disabled";
+        this.version = new SunshineVersion(null, config.version);
+        console.log("Version: ", this.version.version)
+        this.githubVersion = new SunshineVersion(await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()), null);
+        console.log("GitHub Version: ", this.githubVersion.version)
+        this.preReleaseVersion = new SunshineVersion((await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease), null);
+        console.log("Pre-Release Version: ", this.preReleaseVersion.version)
+
+        // The Virtual HID Driver also backs relative mouse input when controllers are disabled.
+        if (this.platform === 'windows') {
+          try {
+            const virtualInputStatus = await fetch("./api/virtual-input/status").then((r) => r.json());
+            this.virtualhid = virtualInputStatus.virtualhid;
+            this.vigembus = virtualInputStatus.vigembus;
+          } catch (e) {
+            console.error("Failed to fetch virtual input driver status:", e);
+          }
+          try {
+            this.virtualhidLicense = await fetch("./api/virtual-input/license").then((r) => r.json());
+          } catch (e) {
+            console.error("Failed to fetch Virtual HID Driver license status:", e);
+          }
+        }
+      } catch (e) {
+        console.error(e);
+      }
+      try {
+        this.logs = (await fetch("./api/logs").then(r => r.text()))
+      } catch (e) {
+        console.error(e);
+      }
+      this.loading = false;
+    },
+    computed: {
+      installedVersionNotStable() {
+        if (!this.githubVersion || !this.version) {
+          return false;
+        }
+        return this.version.isGreater(this.githubVersion);
+      },
+      stableBuildAvailable() {
+        if (!this.githubVersion || !this.version) {
+          return false;
+        }
+        return this.githubVersion.isGreater(this.version);
+      },
+      preReleaseBuildAvailable() {
+        if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
+          return false;
+        }
+        return this.preReleaseVersion.isGreater(this.version) && this.preReleaseVersion.isGreater(this.githubVersion);
+      },
+      buildVersionIsDirty() {
+        return this.version.version?.split(".").length === 5 &&
+          this.version.version.indexOf("dirty") !== -1
+      },
+      /** Parse the text errors, calculating the text, the timestamp and the level */
+      fancyLogs() {
+        if (!this.logs) return [];
+        let regex = /(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}]):\s/g;
+        let rawLogLines = (this.logs.split(regex)).splice(1);
+        let logLines = []
+        for (let i = 0; i < rawLogLines.length; i += 2) {
+          logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
+        }
+        return logLines;
+      }
+    },
+    methods: {
+      convertMarkdownToHtml(markdown) {
+        if (!markdown) return '';
+        return marked.parse(markdown);
+      }
+    }
+  });
+
+  initApp(app);
+</script>
+</html>
diff --git a/src_assets/common/assets/web/logout.html b/src_assets/common/assets/web/src/views/logout.html
similarity index 100%
rename from src_assets/common/assets/web/logout.html
rename to src_assets/common/assets/web/src/views/logout.html
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/src/views/password.html
similarity index 100%
rename from src_assets/common/assets/web/password.html
rename to src_assets/common/assets/web/src/views/password.html
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/src/views/pin.html
similarity index 100%
rename from src_assets/common/assets/web/pin.html
rename to src_assets/common/assets/web/src/views/pin.html
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/src/views/troubleshooting.html
similarity index 100%
rename from src_assets/common/assets/web/troubleshooting.html
rename to src_assets/common/assets/web/src/views/troubleshooting.html
diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/src/views/welcome.html
similarity index 100%
rename from src_assets/common/assets/web/welcome.html
rename to src_assets/common/assets/web/src/views/welcome.html
diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
deleted file mode 100644
index 9fc206b1c5a..00000000000
--- a/src_assets/common/assets/web/template_header.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- TEMPLATE_HEADER - Used by Every UI Page -->
-<meta charset="UTF-8" />
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Sunshine</title>
-<link rel="icon" type="image/x-icon" href="./images/sunshine.ico">
diff --git a/tests/CMakeLists.txt b/tests/CMakeLists.txt
index a578bb58fce..6a7b3de4297 100644
--- a/tests/CMakeLists.txt
+++ b/tests/CMakeLists.txt
@@ -191,10 +191,10 @@ add_executable(${PROJECT_NAME}
 # Using configure_file ensures files are copied when they change between builds
 set(INTEGRATION_TEST_FILES
     "src/config.cpp"
-    "src_assets/common/assets/web/config.html"
+    "src_assets/common/assets/web/src/views/config.html"
     "docs/configuration.md"
     "src_assets/common/assets/web/public/assets/locale/en.json"
-    "src_assets/common/assets/web/configs/tabs/General.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/General.vue"
     "src_assets/linux/misc/60-sunshine.rules"
 )
 
diff --git a/vite.config.js b/vite.config.js
index 568aae41cf9..f93565ae195 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,19 +1,13 @@
-import { fileURLToPath, URL } from 'node:url'
 import fs from 'fs';
 import { resolve } from 'path'
-import { defineConfig } from 'vite'
-import { ViteEjsPlugin } from "vite-plugin-ejs";
+import { defineConfig, loadEnv } from 'vite'
 import { codecovVitePlugin } from "@codecov/vite-plugin";
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import basicSsl from '@vitejs/plugin-basic-ssl'
 import process from 'process'
 
-/**
- * Before actually building the pages with Vite, we do an intermediate build step using ejs
- * Importing this separately and joining them using ejs
- * allows us to split some repeating HTML that cannot be added
- * by Vue itself (e.g. style/script loading, common meta head tags, Widgetbot)
- * The vite-plugin-ejs handles this automatically
- */
 let assetsSrcPath = 'src_assets/common/assets/web';
 let assetsDstPath = 'build/assets/web';
 
@@ -40,42 +34,62 @@ else {
     }
 }
 
-let header = fs.readFileSync(resolve(assetsSrcPath, "template_header.html"))
-
 // https://vitejs.dev/config/
-export default defineConfig({
-    resolve: {
-        alias: {
-            vue: 'vue/dist/vue.esm-bundler.js'
-        }
-    },
-    base: './',
-    plugins: [
-        vue(),
-        ViteEjsPlugin({ header }),
-        // The Codecov vite plugin should be after all other plugins
-        codecovVitePlugin({
-            enableBundleAnalysis: true,
-            bundleName: "sunshine",
-            uploadToken: process.env.CODECOV_TOKEN,
-            gitService: "github",
-        }),
-    ],
-    root: resolve(assetsSrcPath),
-    build: {
-        outDir: resolve(assetsDstPath),
-        rollupOptions: {
-            input: {
-                apps: resolve(assetsSrcPath, 'apps.html'),
-                config: resolve(assetsSrcPath, 'config.html'),
-                featured: resolve(assetsSrcPath, 'featured.html'),
-                index: resolve(assetsSrcPath, 'index.html'),
-                logout: resolve(assetsSrcPath, 'logout.html'),
-                password: resolve(assetsSrcPath, 'password.html'),
-                pin: resolve(assetsSrcPath, 'pin.html'),
-                troubleshooting: resolve(assetsSrcPath, 'troubleshooting.html'),
-                welcome: resolve(assetsSrcPath, 'welcome.html'),
+export default defineConfig(({ command, mode }) => {
+    const env = loadEnv(mode, process.cwd(), 'VITE_');
+    const backendUrl = env.VITE_BACKEND_URL;
+
+    return {
+        resolve: {
+            alias: {
+                vue: 'vue/dist/vue.esm-bundler.js',
+                // Frontend `src/`, not the repo-root C++ `src/` directory.
+                '@': resolve(assetsSrcPath, 'src'),
+            }
+        },
+        base: './',
+        plugins: [
+            // Files like /images/*.png live in public/, and Vite forbids importing publicDir
+            // contents as JS modules in dev, so don't let Vue's compiler turn
+            // <img src="/images/..."> into a build-time import.
+            vue({ template: { transformAssetUrls: false } }),
+            vueJsx(),
+            vueDevTools(),
+            // HTTPS only matters for `vite dev`; the production build is served by the backend.
+            ...(command === 'serve' ? [basicSsl()] : []),
+            // The Codecov vite plugin should be after all other plugins
+            codecovVitePlugin({
+                enableBundleAnalysis: true,
+                bundleName: "sunshine",
+                uploadToken: process.env.CODECOV_TOKEN,
+                gitService: "github",
+            }),
+        ],
+        root: resolve(assetsSrcPath),
+        server: {
+            // Bind address/port for `vite dev`; override via VITE_DEV_HOST / VITE_DEV_PORT in .env
+            // (e.g. VITE_DEV_HOST=0.0.0.0 for devcontainer/Codespaces port forwarding).
+            host: env.VITE_DEV_HOST,
+            port: Number(env.VITE_DEV_PORT) ?? 5173,
+            // WSL2/devcontainer bind mounts don't reliably propagate inotify events, so poll instead.
+            watch: {
+                usePolling: true,
+            },
+            proxy: {
+                '/api': {
+                    target: backendUrl,
+                    changeOrigin: true,
+                    secure: false, // the backend uses a self-signed certificate
+                },
+            },
+        },
+        build: {
+            outDir: resolve(assetsDstPath),
+            rollupOptions: {
+                input: {
+                    index: resolve(assetsSrcPath, 'index.html'),
+                },
             },
         },
-    },
+    };
 })

From bddd19f5f60aca28c8218e5419565f0d37a6bb2f Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sun, 23 Aug 2026 17:57:50 +0000
Subject: [PATCH 02/24] Add components

---
 .../assets/web/src/components/AlertBox.vue    | 58 +++++++++++++
 .../assets/web/src/components/FeatureCard.vue | 30 +++++++
 .../assets/web/src/components/FormGroup.vue   | 26 ++++++
 .../web/src/components/LoadingSpinner.vue     | 20 +++++
 .../assets/web/src/components/Modal.vue       | 81 +++++++++++++++++++
 .../assets/web/src/components/StatusAlert.vue | 31 +++++++
 6 files changed, 246 insertions(+)
 create mode 100644 src_assets/common/assets/web/src/components/AlertBox.vue
 create mode 100644 src_assets/common/assets/web/src/components/FeatureCard.vue
 create mode 100644 src_assets/common/assets/web/src/components/FormGroup.vue
 create mode 100644 src_assets/common/assets/web/src/components/LoadingSpinner.vue
 create mode 100644 src_assets/common/assets/web/src/components/Modal.vue
 create mode 100644 src_assets/common/assets/web/src/components/StatusAlert.vue

diff --git a/src_assets/common/assets/web/src/components/AlertBox.vue b/src_assets/common/assets/web/src/components/AlertBox.vue
new file mode 100644
index 00000000000..0600a5f5565
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/AlertBox.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="alert" :class="`alert-${variant}`">
+    <template v-if="compact">
+      <component :is="resolvedIcon" :size="18" class="icon"></component>
+      <slot></slot>
+    </template>
+    <div v-else>
+      <div class="d-flex align-items-center" :class="{ 'mb-3': $slots.body || action }">
+        <component :is="resolvedIcon" :size="32" class="icon-lg me-3"></component>
+        <div>
+          <slot></slot>
+        </div>
+      </div>
+      <slot name="body"></slot>
+      <router-link v-if="action" class="btn" :class="`btn-${variant}`" :to="action.to">
+        <component :is="action.icon" :size="18" class="icon"></component>
+        {{ action.label }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from '@lucide/vue'
+
+const defaultIcons = {
+  danger: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+  success: CheckCircle
+}
+
+export default {
+  props: {
+    variant: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    action: {
+      type: Object,
+      default: null
+    },
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    resolvedIcon() {
+      return this.icon || defaultIcons[this.variant]
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/FeatureCard.vue b/src_assets/common/assets/web/src/components/FeatureCard.vue
new file mode 100644
index 00000000000..344303ca3e6
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/FeatureCard.vue
@@ -0,0 +1,30 @@
+<template>
+  <article class="virtual-gamepad-feature">
+    <div class="virtual-gamepad-feature-icon" aria-hidden="true">
+      <component :is="icon" :size="21"></component>
+    </div>
+    <div>
+      <h3>{{ title }}</h3>
+      <p>{{ description }}</p>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: [Object, Function],
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/FormGroup.vue b/src_assets/common/assets/web/src/components/FormGroup.vue
new file mode 100644
index 00000000000..f9c05e0f0d8
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/FormGroup.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="mb-3">
+    <label :for="id" class="form-label">{{ label }}</label>
+    <slot></slot>
+    <div class="form-text" v-if="description">{{ description }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: null
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/LoadingSpinner.vue b/src_assets/common/assets/web/src/components/LoadingSpinner.vue
new file mode 100644
index 00000000000..fd9c7956e7a
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/LoadingSpinner.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="spinner-border" :class="{ 'spinner-border-sm': small }" role="status">
+    <span class="visually-hidden">{{ label }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    small: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/Modal.vue b/src_assets/common/assets/web/src/components/Modal.vue
new file mode 100644
index 00000000000..ac6db9ef923
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/Modal.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="modal fade" ref="modalEl" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog" :class="dialogClass">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title"><slot name="title"></slot></h5>
+          <button type="button" class="btn-close" :aria-label="$t('_common.close')" @click="close"></button>
+        </div>
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+        <div class="modal-footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Modal } from 'bootstrap'
+
+export default {
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    dialogClass: {
+      type: String,
+      default: ''
+    },
+    backdrop: {
+      type: [Boolean, String],
+      default: true
+    },
+    keyboard: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:modelValue', 'close'],
+  data() {
+    return {
+      bsModal: null
+    }
+  },
+  watch: {
+    modelValue(shown) {
+      if (shown) {
+        this.bsModal.show()
+      } else {
+        this.bsModal.hide()
+      }
+    }
+  },
+  mounted() {
+    this.bsModal = new Modal(this.$refs.modalEl, {
+      backdrop: this.backdrop,
+      keyboard: this.keyboard
+    })
+    this.$refs.modalEl.addEventListener('hidden.bs.modal', this.handleHidden)
+    if (this.modelValue) {
+      this.bsModal.show()
+    }
+  },
+  beforeUnmount() {
+    this.$refs.modalEl.removeEventListener('hidden.bs.modal', this.handleHidden)
+    this.bsModal?.dispose()
+  },
+  methods: {
+    close() {
+      this.bsModal.hide()
+    },
+    handleHidden() {
+      this.$emit('update:modelValue', false)
+      this.$emit('close')
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/StatusAlert.vue b/src_assets/common/assets/web/src/components/StatusAlert.vue
new file mode 100644
index 00000000000..914132cb1df
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/StatusAlert.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="alert alert-danger" :class="alertClass" v-if="error">
+    <b>{{ $t('_common.error') }}</b> {{ error }}
+  </div>
+  <div class="alert alert-success" :class="alertClass" v-if="success">
+    <b>{{ $t('_common.success') }}</b> {{ successMessage }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: String,
+      default: null
+    },
+    success: {
+      type: Boolean,
+      default: false
+    },
+    successMessage: {
+      type: String,
+      default: ''
+    },
+    alertClass: {
+      type: String,
+      default: 'my-3'
+    }
+  }
+}
+</script>

From 4aa71178a91e17ca985abc249e859bbe0a5b29fa Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sun, 23 Aug 2026 17:58:01 +0000
Subject: [PATCH 03/24] Migrate index page

---
 .../common/assets/web/src/views/IndexView.vue | 233 +++++++++++++-
 .../common/assets/web/src/views/index.html    | 295 ------------------
 2 files changed, 227 insertions(+), 301 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/index.html

diff --git a/src_assets/common/assets/web/src/views/IndexView.vue b/src_assets/common/assets/web/src/views/IndexView.vue
index 3462a7ef658..3dd0e0d6cea 100644
--- a/src_assets/common/assets/web/src/views/IndexView.vue
+++ b/src_assets/common/assets/web/src/views/IndexView.vue
@@ -1,8 +1,229 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Index</h1>
-  <p>TODO: migrate content from src/views/index.html</p>
+  <h1 class="my-4">{{ $t('index.welcome') }}</h1>
+  <p>{{ $t('index.description') }}</p>
+
+  <!-- Fatal Errors Alert -->
+  <AlertBox v-if="fancyLogs.find(x => x.level === 'Fatal')" variant="danger" class="my-4"
+    :action="{ to: { path: '/troubleshooting', hash: '#logs' }, icon: FileText, label: 'View Logs' }">
+    <div v-html="$t('index.startup_errors')"></div>
+    <template #body>
+      <ul class="mb-3">
+        <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{ v.value }}</li>
+      </ul>
+    </template>
+  </AlertBox>
+
+  <!-- libvirtualhid Warning -->
+  <AlertBox
+    v-if="platform === 'windows' && controllerEnabled && virtualhid && (!virtualhid.installed || !virtualhid.version_compatible)"
+    variant="warning" class="my-4"
+    :action="{ to: { path: '/troubleshooting', hash: '#virtualhid' }, icon: Wrench, label: $t('index.fix_now') }">
+    <div v-if="!virtualhid.installed">
+      <p class="mb-1"><strong>{{ $t('index.virtualhid_not_installed_title') }}</strong></p>
+      <p class="mb-0">{{ $t('index.virtualhid_not_installed_desc') }}</p>
+    </div>
+    <div v-else-if="!virtualhid.version_compatible">
+      <p class="mb-1"><strong>{{ $t('index.virtualhid_outdated_title') }}</strong></p>
+      <p class="mb-0">{{ $t('index.virtualhid_outdated_desc', {
+        version: virtualhid.version, supported_versions:
+          virtualhid.supported_versions }) }}</p>
+    </div>
+  </AlertBox>
+
+  <AlertBox
+    v-if="platform === 'windows' && controllerEnabled && virtualhid && vigembus && !virtualhid.installed && vigembus.installed"
+    variant="warning" class="my-4">
+    <p class="mb-1"><strong>{{ $t('index.virtualhid_missing_vigembus_installed_title') }}</strong></p>
+    <p class="mb-0">{{ $t('index.virtualhid_missing_vigembus_installed_desc') }}</p>
+  </AlertBox>
+
+  <!-- Virtual HID Driver license warning -->
+  <AlertBox v-if="platform === 'windows' && controllerEnabled && virtualhidLicense && !virtualhidLicense.licensed"
+    variant="warning" class="my-4"
+    :action="{ to: { path: '/troubleshooting', hash: '#virtualhid-license' }, icon: Wrench, label: $t('index.fix_now') }">
+    <p class="mb-1"><strong>{{ $t('index.virtualhid_license_required_title') }}</strong></p>
+    <p class="mb-0">{{ $t('index.virtualhid_license_required_desc') }}</p>
+  </AlertBox>
+
+  <!-- Version -->
+  <div class="card my-4">
+    <div class="card-body" v-if="version">
+      <h2>Version {{ version.version }}</h2>
+
+      <div v-if="loading" class="my-3">
+        {{ $t('index.loading_latest') }}
+      </div>
+
+      <AlertBox v-if="buildVersionIsDirty" variant="success" compact class="my-3" :icon="Package">
+        {{ $t('index.version_dirty') }} 🌇
+      </AlertBox>
+
+      <AlertBox v-if="installedVersionNotStable" variant="info" compact class="my-3">
+        {{ $t('index.installed_version_not_stable') }}
+      </AlertBox>
+      <AlertBox
+        v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty"
+        variant="success" compact class="my-3">
+        {{ $t('index.version_latest') }}
+      </AlertBox>
+
+      <div v-for="release in releaseAnnouncements" :key="release.key" class="alert alert-warning my-3">
+        <!-- header row -->
+        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
+          <div class="d-flex align-items-center gap-3 flex-wrap">
+            <alert-circle :size="18" class="icon"></alert-circle>
+            <span>{{ $t(release.labelKey) }}</span>
+            <h5 class="mb-0">{{ release.version.release.name }}</h5>
+          </div>
+          <a class="btn btn-success flex-shrink-0" :href="release.version.release.html_url" target="_blank">
+            <download :size="18" class="icon"></download>
+            {{ $t('index.download') }}
+          </a>
+        </div>
+
+        <!-- body row (full width) -->
+        <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(release.version.release.body)"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Resources -->
+  <div class="my-4">
+    <ResourceCard :installed-version-not-stable="installedVersionNotStable"></ResourceCard>
+  </div>
 </template>
+
+<script>
+import { marked } from 'marked'
+import AlertBox from '../components/AlertBox.vue'
+import ResourceCard from '../components/ResourceCard.vue'
+import SunshineVersion from '../utils/sunshine_version'
+import {
+  AlertCircle,
+  FileText,
+  Wrench,
+  Package,
+  Download
+} from '@lucide/vue'
+
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+  headerIds: true,
+  mangle: false,
+  sanitize: false
+});
+
+export default {
+  components: {
+    AlertBox,
+    ResourceCard,
+    AlertCircle,
+    Download
+  },
+  data() {
+    return {
+      FileText,
+      Wrench,
+      Package,
+      version: null,
+      githubVersion: null,
+      notifyPreReleases: false,
+      preReleaseVersion: null,
+      loading: true,
+      logs: null,
+      platform: "",
+      controllerEnabled: false,
+      virtualhid: null,
+      virtualhidLicense: null,
+      vigembus: null,
+    }
+  },
+  async created() {
+    try {
+      let config = await fetch("./api/config").then((r) => r.json());
+      this.notifyPreReleases = config.notify_pre_releases;
+      this.platform = config.platform;
+      this.controllerEnabled = config.controller !== "disabled";
+      this.version = new SunshineVersion(null, config.version);
+      this.githubVersion = new SunshineVersion(await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()), null);
+      this.preReleaseVersion = new SunshineVersion((await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease), null);
+
+      // Fetch virtual input driver status only on Windows when controller is enabled
+      if (this.platform === 'windows' && this.controllerEnabled) {
+        try {
+          const virtualInputStatus = await fetch("./api/virtual-input/status").then((r) => r.json());
+          this.virtualhid = virtualInputStatus.virtualhid;
+          this.vigembus = virtualInputStatus.vigembus;
+        } catch (e) {
+          console.error("Failed to fetch virtual input driver status:", e);
+        }
+        try {
+          this.virtualhidLicense = await fetch("./api/virtual-input/license").then((r) => r.json());
+        } catch (e) {
+          console.error("Failed to fetch Virtual HID Driver license status:", e);
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    try {
+      this.logs = (await fetch("./api/logs").then(r => r.text()))
+    } catch (e) {
+      console.error(e);
+    }
+    this.loading = false;
+  },
+  computed: {
+    installedVersionNotStable() {
+      if (!this.githubVersion || !this.version) {
+        return false;
+      }
+      return this.version.isGreater(this.githubVersion);
+    },
+    stableBuildAvailable() {
+      if (!this.githubVersion || !this.version) {
+        return false;
+      }
+      return this.githubVersion.isGreater(this.version);
+    },
+    preReleaseBuildAvailable() {
+      if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
+        return false;
+      }
+      return this.preReleaseVersion.isGreater(this.version) && this.preReleaseVersion.isGreater(this.githubVersion);
+    },
+    buildVersionIsDirty() {
+      return this.version.version?.split(".").length === 5 &&
+        this.version.version.indexOf("dirty") !== -1
+    },
+    releaseAnnouncements() {
+      const list = [];
+      if (this.notifyPreReleases && this.preReleaseBuildAvailable) {
+        list.push({ key: 'pre-release', version: this.preReleaseVersion, labelKey: 'index.new_pre_release' });
+      }
+      if (this.stableBuildAvailable) {
+        list.push({ key: 'stable', version: this.githubVersion, labelKey: 'index.new_stable' });
+      }
+      return list;
+    },
+    /** Parse the text errors, calculating the text, the timestamp and the level */
+    fancyLogs() {
+      if (!this.logs) return [];
+      let regex = /(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}]):\s/g;
+      let rawLogLines = (this.logs.split(regex)).splice(1);
+      let logLines = []
+      for (let i = 0; i < rawLogLines.length; i += 2) {
+        logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
+      }
+      return logLines;
+    }
+  },
+  methods: {
+    convertMarkdownToHtml(markdown) {
+      if (!markdown) return '';
+      return marked.parse(markdown);
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/index.html b/src_assets/common/assets/web/src/views/index.html
deleted file mode 100644
index bff44590824..00000000000
--- a/src_assets/common/assets/web/src/views/index.html
+++ /dev/null
@@ -1,295 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <h1 class="my-4">{{ $t('index.welcome') }}</h1>
-    <p>{{ $t('index.description') }}</p>
-
-    <!-- Fatal Errors Alert -->
-    <div class="alert alert-danger my-4" v-if="fancyLogs.find(x => x.level === 'Fatal')">
-      <div>
-        <div class="d-flex align-items-center mb-3">
-          <alert-circle :size="32" class="icon-lg me-3"></alert-circle>
-          <div v-html="$t('index.startup_errors')"></div>
-        </div>
-        <ul class="mb-3">
-          <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
-        </ul>
-        <a class="btn btn-danger" href="./troubleshooting#logs">
-          <file-text :size="18" class="icon"></file-text>
-          View Logs
-        </a>
-      </div>
-    </div>
-
-    <!-- libvirtualhid Warning -->
-    <div class="alert alert-warning my-4" v-if="platform === 'windows' && virtualhid && (!virtualhid.installed || !virtualhid.version_compatible)">
-      <div>
-        <div class="d-flex align-items-center mb-3">
-          <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
-          <div>
-            <div v-if="!virtualhid.installed">
-              <p class="mb-1"><strong>{{ $t('index.virtualhid_not_installed_title') }}</strong></p>
-              <p class="mb-0">{{ $t('index.virtualhid_not_installed_desc') }}</p>
-            </div>
-            <div v-else-if="!virtualhid.version_compatible">
-              <p class="mb-1"><strong>{{ $t('index.virtualhid_outdated_title') }}</strong></p>
-              <p class="mb-0">{{ $t('index.virtualhid_outdated_desc', { version: virtualhid.version, supported_versions: virtualhid.supported_versions }) }}</p>
-            </div>
-          </div>
-        </div>
-        <a class="btn btn-warning" href="./troubleshooting#virtualhid">
-          <wrench :size="18" class="icon"></wrench>
-          {{ $t('index.fix_now') }}
-        </a>
-      </div>
-    </div>
-
-    <div class="alert alert-warning my-4" v-if="platform === 'windows' && controllerEnabled && virtualhid && vigembus && !virtualhid.installed && vigembus.installed">
-      <div class="d-flex align-items-center">
-        <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
-        <div>
-          <p class="mb-1"><strong>{{ $t('index.virtualhid_missing_vigembus_installed_title') }}</strong></p>
-          <p class="mb-0">{{ $t('index.virtualhid_missing_vigembus_installed_desc') }}</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Virtual HID Driver license warning -->
-    <div class="alert alert-warning my-4" v-if="platform === 'windows' && virtualhidLicense && !virtualhidLicense.licensed">
-      <div>
-        <div class="d-flex align-items-center mb-3">
-          <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
-          <div>
-            <p class="mb-1"><strong>{{ $t('index.virtualhid_license_required_title') }}</strong></p>
-            <p class="mb-0">{{ $t('index.virtualhid_license_required_desc') }}</p>
-          </div>
-        </div>
-        <a class="btn btn-warning" href="./troubleshooting#virtualhid-license">
-          <wrench :size="18" class="icon"></wrench>
-          {{ $t('index.fix_now') }}
-        </a>
-      </div>
-    </div>
-
-    <!-- Version -->
-    <div class="card my-4">
-      <div class="card-body" v-if="version">
-        <h2>Version {{version.version}}</h2>
-
-        <div v-if="loading" class="my-3">
-          {{ $t('index.loading_latest') }}
-        </div>
-
-        <div class="alert alert-success my-3" v-if="buildVersionIsDirty">
-          <package :size="18" class="icon"></package>
-          {{ $t('index.version_dirty') }} 🌇
-        </div>
-
-        <div class="alert alert-info my-3" v-if="installedVersionNotStable">
-          <info :size="18" class="icon"></info>
-          {{ $t('index.installed_version_not_stable') }}
-        </div>
-
-        <div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
-          <div class="alert alert-success my-3">
-            <check-circle :size="18" class="icon"></check-circle>
-            {{ $t('index.version_latest') }}
-          </div>
-        </div>
-
-        <div v-if="notifyPreReleases && preReleaseBuildAvailable">
-          <div class="alert alert-warning my-3">
-            <!-- header row -->
-            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
-              <div class="d-flex align-items-center gap-3 flex-wrap">
-                <alert-circle :size="18" class="icon"></alert-circle>
-                <span>{{ $t('index.new_pre_release') }}</span>
-                <h5 class="mb-0">{{ preReleaseVersion.release.name }}</h5>
-              </div>
-              <a class="btn btn-success flex-shrink-0" :href="preReleaseVersion.release.html_url" target="_blank">
-                <download :size="18" class="icon"></download>
-                {{ $t('index.download') }}
-              </a>
-            </div>
-
-            <!-- body row (full width) -->
-            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(preReleaseVersion.release.body)"></div>
-          </div>
-        </div>
-
-        <div v-if="stableBuildAvailable">
-          <div class="alert alert-warning my-3">
-            <!-- header row -->
-            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
-              <div class="d-flex align-items-center gap-3 flex-wrap">
-                <alert-circle :size="18" class="icon"></alert-circle>
-                <span>{{ $t('index.new_stable') }}</span>
-                <h5 class="mb-0">{{ githubVersion.release.name }}</h5>
-              </div>
-              <a class="btn btn-success flex-shrink-0" :href="githubVersion.release.html_url" target="_blank">
-                <download :size="18" class="icon"></download>
-                {{ $t('index.download') }}
-              </a>
-            </div>
-
-            <!-- body row (full width) -->
-            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(githubVersion.release.body)"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Resources -->
-    <div class="my-4">
-      <Resource-Card :installed-version-not-stable="installedVersionNotStable"></Resource-Card>
-    </div>
-  </div>
-</body>
-
-<script type="module">
-  import { createApp } from 'vue'
-  import { marked } from 'marked'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import ResourceCard from './ResourceCard.vue'
-  import SunshineVersion from './sunshine_version'
-  import {
-    AlertCircle,
-    AlertTriangle,
-    FileText,
-    Wrench,
-    Package,
-    Info,
-    CheckCircle,
-    Download
-  } from '@lucide/vue'
-
-  // Configure marked to allow HTML
-  marked.setOptions({
-    breaks: true,
-    gfm: true,
-    headerIds: true,
-    mangle: false,
-    sanitize: false
-  });
-
-  console.log("Hello, Sunshine!")
-  let app = createApp({
-    components: {
-      Navbar,
-      ResourceCard,
-      AlertCircle,
-      AlertTriangle,
-      FileText,
-      Wrench,
-      Package,
-      Info,
-      CheckCircle,
-      Download
-    },
-    data() {
-      return {
-        version: null,
-        githubVersion: null,
-        notifyPreReleases: false,
-        preReleaseVersion: null,
-        loading: true,
-        logs: null,
-        platform: "",
-        controllerEnabled: false,
-        virtualhid: null,
-        virtualhidLicense: null,
-        vigembus: null,
-      }
-    },
-    async created() {
-      try {
-        let config = await fetch("./api/config").then((r) => r.json());
-        this.notifyPreReleases = config.notify_pre_releases;
-        this.platform = config.platform;
-        this.controllerEnabled = config.controller !== "disabled";
-        this.version = new SunshineVersion(null, config.version);
-        console.log("Version: ", this.version.version)
-        this.githubVersion = new SunshineVersion(await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()), null);
-        console.log("GitHub Version: ", this.githubVersion.version)
-        this.preReleaseVersion = new SunshineVersion((await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease), null);
-        console.log("Pre-Release Version: ", this.preReleaseVersion.version)
-
-        // The Virtual HID Driver also backs relative mouse input when controllers are disabled.
-        if (this.platform === 'windows') {
-          try {
-            const virtualInputStatus = await fetch("./api/virtual-input/status").then((r) => r.json());
-            this.virtualhid = virtualInputStatus.virtualhid;
-            this.vigembus = virtualInputStatus.vigembus;
-          } catch (e) {
-            console.error("Failed to fetch virtual input driver status:", e);
-          }
-          try {
-            this.virtualhidLicense = await fetch("./api/virtual-input/license").then((r) => r.json());
-          } catch (e) {
-            console.error("Failed to fetch Virtual HID Driver license status:", e);
-          }
-        }
-      } catch (e) {
-        console.error(e);
-      }
-      try {
-        this.logs = (await fetch("./api/logs").then(r => r.text()))
-      } catch (e) {
-        console.error(e);
-      }
-      this.loading = false;
-    },
-    computed: {
-      installedVersionNotStable() {
-        if (!this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.version.isGreater(this.githubVersion);
-      },
-      stableBuildAvailable() {
-        if (!this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.githubVersion.isGreater(this.version);
-      },
-      preReleaseBuildAvailable() {
-        if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.preReleaseVersion.isGreater(this.version) && this.preReleaseVersion.isGreater(this.githubVersion);
-      },
-      buildVersionIsDirty() {
-        return this.version.version?.split(".").length === 5 &&
-          this.version.version.indexOf("dirty") !== -1
-      },
-      /** Parse the text errors, calculating the text, the timestamp and the level */
-      fancyLogs() {
-        if (!this.logs) return [];
-        let regex = /(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}]):\s/g;
-        let rawLogLines = (this.logs.split(regex)).splice(1);
-        let logLines = []
-        for (let i = 0; i < rawLogLines.length; i += 2) {
-          logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
-        }
-        return logLines;
-      }
-    },
-    methods: {
-      convertMarkdownToHtml(markdown) {
-        if (!markdown) return '';
-        return marked.parse(markdown);
-      }
-    }
-  });
-
-  initApp(app);
-</script>
-</html>

From fdf7d23e62116406f1fdc48382fbe62109f9d9a1 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sun, 23 Aug 2026 22:37:45 +0000
Subject: [PATCH 04/24] Add release notes accordion

---
 .../assets/web/public/assets/locale/en.json   |  1 +
 .../common/assets/web/src/assets/sunshine.css | 17 +++++++++
 .../common/assets/web/src/views/IndexView.vue | 37 +++++++++++++++----
 3 files changed, 47 insertions(+), 8 deletions(-)

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 26a809231d9..47d4163a27d 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -450,6 +450,7 @@
     "loading_latest": "Loading latest release...",
     "new_pre_release": "A new Pre-Release Version is Available!",
     "new_stable": "A new Stable Version is Available!",
+    "release_notes": "Release Notes",
     "startup_errors": "<b>Attention!</b> Sunshine detected these errors during startup. We <b>STRONGLY RECOMMEND</b> fixing them before streaming.",
     "version_dirty": "Thank you for helping to make Sunshine a better software!",
     "version_latest": "You are running the latest version of Sunshine",
diff --git a/src_assets/common/assets/web/src/assets/sunshine.css b/src_assets/common/assets/web/src/assets/sunshine.css
index dd9c9d2e42c..38d8ea23fd0 100644
--- a/src_assets/common/assets/web/src/assets/sunshine.css
+++ b/src_assets/common/assets/web/src/assets/sunshine.css
@@ -1052,6 +1052,23 @@ body {
     color: var(--color-text-base) !important;
 }
 
+.release-notes-toggle::after {
+    display: none;
+}
+
+.release-notes-toggle .icon {
+    transition: transform var(--transition-fast, 0.2s);
+}
+
+.release-notes-toggle[aria-expanded="true"] .icon {
+    transform: rotate(-90deg);
+}
+
+.release-notes-accordion .accordion-body {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
 .offcanvas {
     background-color: var(--color-surface) !important;
 }
diff --git a/src_assets/common/assets/web/src/views/IndexView.vue b/src_assets/common/assets/web/src/views/IndexView.vue
index 3dd0e0d6cea..6ff0597c59b 100644
--- a/src_assets/common/assets/web/src/views/IndexView.vue
+++ b/src_assets/common/assets/web/src/views/IndexView.vue
@@ -26,7 +26,8 @@
       <p class="mb-1"><strong>{{ $t('index.virtualhid_outdated_title') }}</strong></p>
       <p class="mb-0">{{ $t('index.virtualhid_outdated_desc', {
         version: virtualhid.version, supported_versions:
-          virtualhid.supported_versions }) }}</p>
+          virtualhid.supported_versions
+      }) }}</p>
     </div>
   </AlertBox>
 
@@ -75,14 +76,32 @@
             <span>{{ $t(release.labelKey) }}</span>
             <h5 class="mb-0">{{ release.version.release.name }}</h5>
           </div>
-          <a class="btn btn-success flex-shrink-0" :href="release.version.release.html_url" target="_blank">
-            <download :size="18" class="icon"></download>
-            {{ $t('index.download') }}
-          </a>
+          <div class="d-flex align-items-center gap-2 flex-shrink-0">
+            <a class="btn btn-success" :href="release.version.release.html_url" target="_blank">
+              <download :size="18" class="icon"></download>
+              {{ $t('index.download') }}
+            </a>
+          </div>
+        </div>
+        <div class="accordion release-notes-accordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button type="button" class="accordion-button collapsed release-notes-toggle" data-bs-toggle="collapse"
+                :data-bs-target="`#release-notes-${release.key}`" aria-expanded="false"
+                :aria-controls="`release-notes-${release.key}`">
+                {{ $t('index.release_notes') }}
+                <chevron-left :size="18" class="icon ms-auto"></chevron-left>
+              </button>
+            </h2>
+            <!-- body row (full width, collapsible + scrollable) -->
+            <div class="accordion-collapse collapse" :id="`release-notes-${release.key}`">
+              <div class="accordion-body">
+                <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(release.version.release.body)">
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-
-        <!-- body row (full width) -->
-        <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(release.version.release.body)"></div>
       </div>
     </div>
   </div>
@@ -100,6 +119,7 @@ import ResourceCard from '../components/ResourceCard.vue'
 import SunshineVersion from '../utils/sunshine_version'
 import {
   AlertCircle,
+  ChevronLeft,
   FileText,
   Wrench,
   Package,
@@ -119,6 +139,7 @@ export default {
     AlertBox,
     ResourceCard,
     AlertCircle,
+    ChevronLeft,
     Download
   },
   data() {

From 455b9a546b4f0991f2cece387293f920127b4457 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sun, 23 Aug 2026 19:01:12 +0000
Subject: [PATCH 05/24] Migrate welcome page

---
 .../assets/web/src/views/WelcomeView.vue      |  98 ++++++++++++++-
 .../common/assets/web/src/views/welcome.html  | 119 ------------------
 2 files changed, 92 insertions(+), 125 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/welcome.html

diff --git a/src_assets/common/assets/web/src/views/WelcomeView.vue b/src_assets/common/assets/web/src/views/WelcomeView.vue
index 648bcbaf890..02f5dc16a23 100644
--- a/src_assets/common/assets/web/src/views/WelcomeView.vue
+++ b/src_assets/common/assets/web/src/views/WelcomeView.vue
@@ -1,8 +1,94 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Welcome</h1>
-  <p>TODO: migrate content from src/views/welcome.html</p>
+  <h1 class="my-4">{{ $t('welcome.greeting') }}</h1>
+  <p>{{ $t('welcome.create_creds') }}</p>
+  <div class="d-flex flex-column flex-lg-row gap-4">
+    <div class="card flex-grow-1">
+      <div class="card-body">
+        <div class="alert alert-warning">
+          {{ $t('welcome.create_creds_alert') }}
+        </div>
+        <form @submit.prevent="save">
+          <FormGroup id="usernameInput" :label="$t('_common.username')">
+            <input type="text" class="form-control" id="usernameInput" autocomplete="username"
+              v-model="passwordData.newUsername" />
+          </FormGroup>
+          <FormGroup id="passwordInput" :label="$t('_common.password')">
+            <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
+              v-model="passwordData.newPassword" required />
+          </FormGroup>
+          <FormGroup id="confirmPasswordInput" :label="$t('welcome.confirm_password')">
+            <input type="password" class="form-control" id="confirmPasswordInput" autocomplete="new-password"
+              v-model="passwordData.confirmNewPassword" required />
+          </FormGroup>
+          <button type="submit" class="btn btn-primary" v-bind:disabled="loading">
+            <log-in :size="18" class="icon"></log-in>
+            {{ $t('welcome.login') }}
+          </button>
+          <StatusAlert :error="error" :success="success" :success-message="$t('welcome.welcome_success')"
+            alert-class="mt-3 mb-0" />
+        </form>
+      </div>
+    </div>
+    <div class="d-flex flex-column justify-content-between flex-grow-1">
+      <ResourceCard></ResourceCard>
+    </div>
+  </div>
 </template>
+
+<script>
+import ResourceCard from '../components/ResourceCard.vue'
+import FormGroup from '../components/FormGroup.vue'
+import StatusAlert from '../components/StatusAlert.vue'
+import { apiFetch } from '../utils/fetch_utils'
+import { LogIn } from '@lucide/vue'
+
+export default {
+  components: {
+    ResourceCard,
+    FormGroup,
+    StatusAlert,
+    LogIn,
+  },
+  data() {
+    return {
+      error: null,
+      success: false,
+      loading: false,
+      passwordData: {
+        newUsername: "sunshine",
+        newPassword: "",
+        confirmNewPassword: "",
+      },
+    };
+  },
+  methods: {
+    save() {
+      this.error = null;
+      this.loading = true;
+      apiFetch("./api/password", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(this.passwordData),
+      }).then((r) => {
+        this.loading = false;
+        if (r.status === 200) {
+          r.json().then((rj) => {
+            this.success = rj.status;
+            if (this.success === true) {
+              setTimeout(() => {
+                document.location.reload();
+              }, 5000);
+            } else {
+              this.error = rj.error;
+            }
+          });
+        } else {
+          this.error = "Internal Server Error";
+        }
+      });
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/welcome.html b/src_assets/common/assets/web/src/views/welcome.html
deleted file mode 100644
index 7d8d7cc36ab..00000000000
--- a/src_assets/common/assets/web/src/views/welcome.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar-Simple></Navbar-Simple>
-  <Notification></Notification>
-  <main id="content" class="container" role="main">
-    <h1 class="my-4">{{ $t('welcome.greeting') }}</h1>
-    <p>{{ $t('welcome.create_creds') }}</p>
-    <div class="d-flex gap-4 align-items-start">
-      <div class="card">
-        <div class="card-body">
-          <div class="alert alert-warning">
-            {{ $t('welcome.create_creds_alert') }}
-          </div>
-          <form @submit.prevent="save">
-            <div class="mb-3">
-              <label for="usernameInput" class="form-label">{{ $t('_common.username') }}</label>
-              <input type="text" class="form-control" id="usernameInput" autocomplete="username"
-                v-model="passwordData.newUsername" />
-            </div>
-            <div class="mb-3">
-              <label for="passwordInput" class="form-label">{{ $t('_common.password') }}</label>
-              <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
-                v-model="passwordData.newPassword" required />
-            </div>
-            <div class="mb-3">
-              <label for="confirmPasswordInput" class="form-label">{{ $t('welcome.confirm_password') }}</label>
-              <input type="password" class="form-control" id="confirmPasswordInput" autocomplete="new-password"
-                v-model="passwordData.confirmNewPassword" required />
-            </div>
-            <button type="submit" class="btn btn-primary" v-bind:disabled="loading">
-              <log-in :size="18" class="icon"></log-in>
-              {{ $t('welcome.login') }}
-            </button>
-            <div class="alert alert-danger mt-3 mb-0" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
-            <div class="alert alert-success mt-3 mb-0" v-if="success">
-              <b>{{ $t('_common.success') }}</b> {{ $t('welcome.welcome_success') }}
-            </div>
-          </form>
-        </div>
-      </div>
-      <div>
-        <Resource-Card></Resource-Card>
-      </div>
-    </div>
-  </main>
-</body>
-
-<script type="module">
-  import { createApp } from "vue"
-  import ResourceCard from './ResourceCard.vue'
-  import { initApp } from './init'
-  import { apiFetch } from './fetch_utils'
-  import Notification from './Notification.vue'
-  import NavbarSimple from './NavbarSimple.vue'
-  import { loadAutoTheme } from './theme'
-  import { LogIn } from '@lucide/vue'
-
-  loadAutoTheme();
-
-  let app = createApp({
-    components: {
-      ResourceCard,
-      Notification,
-      NavbarSimple,
-      LogIn,
-    },
-    data() {
-      return {
-        error: null,
-        success: false,
-        loading: false,
-        passwordData: {
-          newUsername: "sunshine",
-          newPassword: "",
-          confirmNewPassword: "",
-        },
-      };
-    },
-    methods: {
-      save() {
-        this.error = null;
-        this.loading = true;
-        apiFetch("./api/password", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(this.passwordData),
-        }).then((r) => {
-          this.loading = false;
-          if (r.status === 200) {
-            r.json().then((rj) => {
-              this.success = rj.status;
-              if (this.success === true) {
-                setTimeout(() => {
-                  document.location.reload();
-                }, 5000);
-              } else {
-                this.error = rj.error;
-              }
-            });
-          } else {
-            this.error = "Internal Server Error";
-          }
-        });
-      },
-    },
-  });
-
-  initApp(app);
-</script>
-
-</html>

From 5920ddd624e8d080bda46eea7c0f1b395292e7bc Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sun, 23 Aug 2026 22:43:22 +0000
Subject: [PATCH 06/24] Migrate pin page

---
 .../common/assets/web/src/views/PinView.vue   | 79 ++++++++++++++--
 .../common/assets/web/src/views/pin.html      | 90 -------------------
 2 files changed, 73 insertions(+), 96 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/pin.html

diff --git a/src_assets/common/assets/web/src/views/PinView.vue b/src_assets/common/assets/web/src/views/PinView.vue
index d070ae6f2bd..a0e8f4d0a3d 100644
--- a/src_assets/common/assets/web/src/views/PinView.vue
+++ b/src_assets/common/assets/web/src/views/PinView.vue
@@ -1,8 +1,75 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Pin</h1>
-  <p>TODO: migrate content from src/views/pin.html</p>
+  <h1 class="my-4 text-center">{{ $t('pin.pin_pairing') }}</h1>
+  <form class="form d-flex flex-column align-items-center" @submit.prevent="registerDevice">
+    <div class="card flex-column d-flex p-4 mb-4">
+      <div class="input-group mt-2">
+        <span class="input-group-text">
+          <hash :size="18" class="icon"></hash>
+        </span>
+        <input type="text" pattern="\d*" :placeholder="$t('navbar.pin')" autofocus class="form-control" required
+          v-model="pin" />
+      </div>
+      <div class="input-group my-4">
+        <span class="input-group-text">
+          <monitor :size="18" class="icon"></monitor>
+        </span>
+        <input type="text" :placeholder="$t('pin.device_name')" class="form-control" required v-model="name" />
+      </div>
+      <button class="btn btn-primary">
+        <forward :size="18" class="icon"></forward>
+        {{ $t('pin.send') }}
+      </button>
+    </div>
+    <div class="alert alert-warning">
+      <b>{{ $t('_common.warning') }}</b> {{ $t('pin.warning_msg') }}
+    </div>
+    <StatusAlert :error="error" :success="success" :success-message="$t('pin.pair_success')" />
+  </form>
 </template>
+
+<script>
+import StatusAlert from '../components/StatusAlert.vue'
+import { apiFetch } from '../utils/fetch_utils'
+import { Forward, Hash, Monitor } from '@lucide/vue'
+
+export default {
+  components: {
+    StatusAlert,
+    Forward,
+    Hash,
+    Monitor,
+  },
+  inject: ['i18n'],
+  data() {
+    return {
+      pin: '',
+      name: '',
+      error: null,
+      success: false,
+    }
+  },
+  methods: {
+    registerDevice() {
+      this.error = null;
+      this.success = false;
+      apiFetch("./api/pin", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ pin: this.pin, name: this.name })
+      })
+        .then((response) => response.json())
+        .then((response) => {
+          if (response.status === true) {
+            this.success = true;
+            this.pin = '';
+            this.name = '';
+          } else {
+            this.error = this.i18n.t('pin.pair_failure');
+          }
+        });
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/pin.html b/src_assets/common/assets/web/src/views/pin.html
deleted file mode 100644
index 6be11b2d125..00000000000
--- a/src_assets/common/assets/web/src/views/pin.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <h1 class="my-4 text-center">{{ $t('pin.pin_pairing') }}</h1>
-    <form class="form d-flex flex-column align-items-center" id="form" @submit.prevent="registerDevice">
-      <div class="card flex-column d-flex p-4 mb-4">
-        <div class="input-group mt-2">
-          <span class="input-group-text">
-            <hash :size="18" class="icon"></hash>
-          </span>
-          <input type="text" pattern="\d*" :placeholder="`${$t('navbar.pin')}`" autofocus id="pin-input" class="form-control" required />
-        </div>
-        <div class="input-group my-4">
-          <span class="input-group-text">
-            <monitor :size="18" class="icon"></monitor>
-          </span>
-          <input type="text" :placeholder="`${$t('pin.device_name')}`" id="name-input" class="form-control" required />
-        </div>
-        <button class="btn btn-primary">
-          <forward :size="18" class="icon"></forward>
-          {{ $t('pin.send') }}
-        </button>
-      </div>
-      <div class="alert alert-warning">
-        <b>{{ $t('_common.warning') }}</b> {{ $t('pin.warning_msg') }}
-      </div>
-      <div id="status"></div>
-    </form>
-  </div>
-</body>
-
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import { apiFetch } from './fetch_utils'
-  import {
-    Forward,
-    Hash,
-    Monitor,
-  } from '@lucide/vue'
-
-  let app = createApp({
-    components: {
-      Navbar,
-      Forward,
-      Hash,
-      Monitor,
-    },
-    inject: ['i18n'],
-    methods: {
-      registerDevice(e) {
-        let pin = document.querySelector("#pin-input").value;
-        let name = document.querySelector("#name-input").value;
-        document.querySelector("#status").innerHTML = "";
-        let b = JSON.stringify({pin: pin, name: name});
-        apiFetch("./api/pin", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: b
-        })
-          .then((response) => response.json())
-          .then((response) => {
-            if (response.status === true) {
-              document.querySelector(
-                "#status"
-              ).innerHTML = `<div class="alert alert-success" role="alert">${this.i18n.t('pin.pair_success')}</div>`;
-              document.querySelector("#pin-input").value = "";
-              document.querySelector("#name-input").value = "";
-            } else {
-              document.querySelector(
-                "#status"
-              ).innerHTML = `<div class="alert alert-danger" role="alert">${this.i18n.t('pin.pair_failure')}</div>`;
-            }
-          });
-      }
-    }
-  });
-
-  initApp(app);
-</script>

From 7adb6d94fff836da68d1a82f30a02efd0978db50 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 01:09:33 +0000
Subject: [PATCH 07/24] Migrate AppsView

---
 .../assets/web/src/components/Modal.vue       |   25 +-
 .../common/assets/web/src/views/AppsView.vue  |  919 ++++++++++++++-
 .../common/assets/web/src/views/apps.html     | 1049 -----------------
 3 files changed, 937 insertions(+), 1056 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/apps.html

diff --git a/src_assets/common/assets/web/src/components/Modal.vue b/src_assets/common/assets/web/src/components/Modal.vue
index ac6db9ef923..b42ae17cadc 100644
--- a/src_assets/common/assets/web/src/components/Modal.vue
+++ b/src_assets/common/assets/web/src/components/Modal.vue
@@ -3,7 +3,9 @@
     <div class="modal-dialog" :class="dialogClass">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title"><slot name="title"></slot></h5>
+          <h5 class="modal-title">
+            <slot name="title"></slot>
+          </h5>
           <button type="button" class="btn-close" :aria-label="$t('_common.close')" @click="close"></button>
         </div>
         <div class="modal-body">
@@ -37,6 +39,11 @@ export default {
     keyboard: {
       type: Boolean,
       default: true
+    },
+    // Raises this modal above any already-open modal instead of sharing z-index.
+    stacked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'close'],
@@ -60,12 +67,16 @@ export default {
       keyboard: this.keyboard
     })
     this.$refs.modalEl.addEventListener('hidden.bs.modal', this.handleHidden)
+    if (this.stacked) {
+      this.$refs.modalEl.addEventListener('show.bs.modal', this.raiseZIndex)
+    }
     if (this.modelValue) {
       this.bsModal.show()
     }
   },
   beforeUnmount() {
     this.$refs.modalEl.removeEventListener('hidden.bs.modal', this.handleHidden)
+    this.$refs.modalEl.removeEventListener('show.bs.modal', this.raiseZIndex)
     this.bsModal?.dispose()
   },
   methods: {
@@ -75,6 +86,18 @@ export default {
     handleHidden() {
       this.$emit('update:modelValue', false)
       this.$emit('close')
+    },
+    raiseZIndex() {
+      const modalEl = this.$refs.modalEl
+      const openCount = document.querySelectorAll('.modal.show').length
+      const z = 1055 + (openCount + 1) * 20
+      modalEl.style.zIndex = z
+
+      requestAnimationFrame(() => {
+        const backdrops = document.querySelectorAll('.modal-backdrop')
+        const backdrop = backdrops[backdrops.length - 1]
+        if (backdrop) backdrop.style.zIndex = z - 10
+      })
     }
   }
 }
diff --git a/src_assets/common/assets/web/src/views/AppsView.vue b/src_assets/common/assets/web/src/views/AppsView.vue
index daf09996cba..b87a00e5cd1 100644
--- a/src_assets/common/assets/web/src/views/AppsView.vue
+++ b/src_assets/common/assets/web/src/views/AppsView.vue
@@ -1,8 +1,915 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Apps</h1>
-  <p>TODO: migrate content from src/views/apps.html</p>
+  <div class="my-4">
+    <h1>{{ $t('apps.applications_title') }}<span v-if="apps.length"> ({{ appCountLabel }})</span></h1>
+    <p>{{ $t('apps.applications_desc') }}</p>
+  </div>
+
+  <!-- Actions toolbar -->
+  <div class="toolbar apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
+    <!-- Left side actions -->
+    <div class="d-flex align-items-center gap-2">
+      <!-- Add new application -->
+      <button class="btn btn-primary" @click="newApp">
+        <layers-plus :size="18" class="icon"></layers-plus>
+        {{ $t('apps.add_new') }}
+      </button>
+    </div>
+    <!-- Right side actions -->
+    <div class="d-flex align-items-center gap-2" v-if="apps && apps.length > 0">
+      <!-- Sort by name toggle -->
+      <button class="btn btn-outline-secondary text-nowrap" type="button" @click="toggleSort"
+        :class="{ active: sortMode !== 'default' }" :aria-pressed="sortMode !== 'default'"
+        :title="$t('apps.sort_by_name') + ': ' + sortModeLabel">
+        <arrow-up-down v-if="sortMode === 'default'" :size="16" class="icon me-1"></arrow-up-down>
+        <arrow-up v-else-if="sortMode === 'asc'" :size="16" class="icon me-1"></arrow-up>
+        <arrow-down v-else :size="16" class="icon me-1"></arrow-down>
+        {{ $t('apps.sort_by_name') }}
+      </button>
+      <!-- Search box -->
+      <div class="input-group">
+        <input type="text" class="form-control" v-model="searchQuery" :placeholder="$t('apps.search_placeholder')" />
+        <button v-if="searchQuery" class="btn btn-outline-secondary" type="button" @click="resetSearchQuery"
+          :aria-label="$t('_common.close')">
+          <x :size="16" class="icon"></x>
+        </button>
+        <span v-else class="input-group-text">
+          <search :size="16" class="icon"></search>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Apps Grid -->
+  <div class="row g-3" v-if="displayedApps.length > 0">
+    <div class="col-12 col-sm-6 col-md-4 col-lg-3" v-for="{ app, index } in displayedApps" :key="index">
+      <div class="card app-card h-100">
+        <div class="app-poster-container">
+          <img v-if="app['image-path']" :src="'/api/covers/' + index" class="app-poster" :alt="app.name"
+            @error="handleImageError" />
+          <div v-else class="app-poster-placeholder">
+            <span class="app-initial">{{ app.name.charAt(0).toUpperCase() }}</span>
+          </div>
+          <div class="app-poster-overlay">
+            <div v-if="app.cmd" class="app-overlay-row" :title="app.cmd">
+              <terminal :size="14" class="icon me-1"></terminal>
+              <span class="app-detail-text">{{ app.cmd }}</span>
+            </div>
+            <div v-if="app['working-dir']" class="app-overlay-row" :title="app['working-dir']">
+              <folder :size="14" class="icon me-1"></folder>
+              <span class="app-detail-text">{{ app['working-dir'] }}</span>
+            </div>
+            <div class="app-overlay-badges">
+              <span v-if="app.elevated" class="badge app-flag-badge">{{ $t('apps.badge_admin') }}</span>
+              <span v-if="app.detached && app.detached.length" class="badge app-flag-badge">{{ $t('apps.badge_detached')
+              }}</span>
+              <span v-if="app['prep-cmd'] && app['prep-cmd'].length" class="badge app-flag-badge">{{
+                $t('apps.badge_app_prep') }}</span>
+              <span v-if="app['exclude-global-prep-cmd']" class="badge app-flag-badge">{{
+                $t('apps.badge_no_global_prep') }}</span>
+              <span v-if="app['auto-detach']" class="badge app-flag-badge">{{ $t('apps.badge_auto_detach') }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="card-body d-flex flex-column">
+          <h5 class="card-title mb-3">{{ app.name }}</h5>
+          <div class="mt-auto d-flex gap-2">
+            <button class="btn btn-sm btn-primary flex-fill" @click="editApp(index)">
+              <edit :size="16" class="icon"></edit>
+              {{ $t('apps.edit') }}
+            </button>
+            <button class="btn btn-sm btn-danger" @click="showDeleteModal(index)">
+              <trash-2 :size="16" class="icon"></trash-2>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- No search results -->
+  <div v-else-if="apps && apps.length > 0" class="card">
+    <div class="card-body text-center py-5">
+      <p class="text-muted">{{ $t('apps.no_search_results') }}</p>
+    </div>
+  </div>
+
+  <!-- Empty State -->
+  <div v-else class="card">
+    <div class="card-body text-center py-5">
+      <p class="text-muted">{{ $t('apps.no_applications') }}</p>
+    </div>
+  </div>
+
+  <!-- Edit / Add Application modal -->
+  <Modal v-model="editModalOpen" dialog-class="modal-xl modal-dialog-scrollable modal-fullscreen-lg-down"
+    backdrop="static" :keyboard="false">
+    <template #title>{{ editModalTitle }}</template>
+    <template v-if="editForm">
+      <!-- Application Name -->
+      <FormGroup id="appName" :label="$t('apps.app_name')" :description="$t('apps.app_name_desc')">
+        <input type="text" class="form-control" id="appName" v-model="editForm.name" />
+      </FormGroup>
+      <!-- output -->
+      <FormGroup id="appOutput" :label="$t('apps.output_name')" :description="$t('apps.output_desc')">
+        <div class="input-group">
+          <input type="text" class="form-control monospace" id="appOutput" v-model="editForm.output" />
+          <button class="btn btn-secondary" type="button"
+            @click="browseFor('any', 'file_browser.select_file', editForm.output, v => editForm.output = v)">
+            <folder-open :size="18" class="icon"></folder-open>
+          </button>
+        </div>
+      </FormGroup>
+      <!-- prep-cmd -->
+      <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" inverse-values></Checkbox>
+      <div class="mb-3">
+        <label class="form-label">{{ $t('apps.cmd_prep_name') }}</label>
+        <div class="form-text">{{ $t('apps.cmd_prep_desc') }}</div>
+        <div class="row g-2 align-items-center mx-0 my-2" v-if="editForm['prep-cmd'].length > 0">
+          <div class="col-12 col-md text-muted small text-uppercase fw-semibold ps-3 d-flex align-items-center">
+            <play :size="14" class="icon me-1"></play>{{ $t('_common.do_cmd') }}
+          </div>
+          <div class="col-12 col-md text-muted small text-uppercase fw-semibold ps-3 d-flex align-items-center">
+            <rotate-ccw :size="14" class="icon me-1"></rotate-ccw>{{ $t('_common.undo_cmd') }}
+          </div>
+          <div class="col-auto text-muted small text-uppercase fw-semibold d-flex align-items-center"
+            v-if="platform === 'windows'">
+            <shield :size="14" class="icon me-1"></shield>{{ $t('_common.run_as') }}
+          </div>
+          <div class="col-auto" style="height: 0;">
+            <div class="invisible">
+              <button class="btn btn-danger btn-sm" tabindex="-1" aria-hidden="true">
+                <trash-2 :size="16" class="icon"></trash-2>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div v-for="(cmd, index) in editForm['prep-cmd']" :key="index" class="row g-2 align-items-center mx-0 my-2">
+          <div class="col-12 col-md">
+            <div class="input-group">
+              <span class="input-group-text">
+                <play :size="14" class="icon"></play>
+              </span>
+              <input type="text" class="form-control monospace" v-model="cmd.do" :placeholder="$t('_common.do_cmd')" />
+              <button class="btn btn-secondary" type="button" @click="browsePrep(index, 'do')">
+                <folder-open :size="14" class="icon"></folder-open>
+              </button>
+            </div>
+          </div>
+          <div class="col-12 col-md">
+            <div class="input-group">
+              <span class="input-group-text"><rotate-ccw :size="14" class="icon"></rotate-ccw></span>
+              <input type="text" class="form-control monospace" v-model="cmd.undo"
+                :placeholder="$t('_common.undo_cmd')" />
+              <button class="btn btn-secondary" type="button" @click="browsePrep(index, 'undo')">
+                <folder-open :size="14" class="icon"></folder-open>
+              </button>
+            </div>
+          </div>
+          <div class="col-auto" v-if="platform === 'windows'">
+            <Checkbox :id="'prep-cmd-admin-' + index" label="_common.elevated" desc="" v-model="cmd.elevated">
+            </Checkbox>
+          </div>
+          <div class="col-auto">
+            <button class="btn btn-danger btn-sm" @click="deletePrepCmd(index)">
+              <trash-2 :size="16" class="icon"></trash-2>
+            </button>
+          </div>
+        </div>
+        <div class="d-flex justify-content-start my-3">
+          <button class="btn btn-success" @click="addPrepCmd">
+            <plus :size="18" class="icon"></plus>
+            {{ $t('apps.add_cmds') }}
+          </button>
+        </div>
+      </div>
+      <!-- detached -->
+      <div class="mb-3">
+        <label class="form-label">{{ $t('apps.detached_cmds') }}</label>
+        <div class="form-text">
+          {{ $t('apps.detached_cmds_desc') }}<br>
+          <b>{{ $t('_common.note') }}</b> {{ $t('apps.detached_cmds_note') }}
+        </div>
+        <div v-for="(_, index) in editForm.detached" :key="index" class="d-flex align-items-center gap-2 my-2">
+          <input type="text" v-model="editForm.detached[index]" class="form-control monospace">
+          <button class="btn btn-secondary btn-sm" @click="browseDetached(index)">
+            <folder-open :size="14" class="icon"></folder-open>
+          </button>
+          <button class="btn btn-danger btn-sm" @click="editForm.detached.splice(index, 1)">
+            <trash-2 :size="16" class="icon"></trash-2>
+          </button>
+        </div>
+        <div class="d-flex justify-content-start mb-3 mt-3">
+          <button class="btn btn-success" @click="addDetached">
+            <plus :size="18" class="icon"></plus>
+            {{ $t('apps.detached_cmds_add') }}
+          </button>
+        </div>
+      </div>
+      <!-- command -->
+      <FormGroup id="appCmd" :label="$t('apps.cmd')">
+        <div class="input-group">
+          <input type="text" class="form-control monospace" id="appCmd" v-model="editForm.cmd" />
+          <button class="btn btn-secondary" type="button"
+            @click="browseFor('executable', 'file_browser.select_executable', editForm.cmd, v => editForm.cmd = v)">
+            <folder-open :size="18" class="icon"></folder-open>
+          </button>
+        </div>
+        <div class="form-text">
+          {{ $t('apps.cmd_desc') }}<br>
+          <b>{{ $t('_common.note') }}</b> {{ $t('apps.cmd_note') }}
+        </div>
+      </FormGroup>
+      <!-- working dir -->
+      <FormGroup id="appWorkingDir" :label="$t('apps.working_dir')" :description="$t('apps.working_dir_desc')">
+        <div class="input-group">
+          <input type="text" class="form-control monospace" id="appWorkingDir" v-model="editForm['working-dir']" />
+          <button class="btn btn-secondary" type="button"
+            @click="browseFor('directory', 'file_browser.select_directory', editForm['working-dir'], v => editForm['working-dir'] = v)">
+            <folder-open :size="18" class="icon"></folder-open>
+          </button>
+        </div>
+      </FormGroup>
+      <!-- elevation -->
+      <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 -->
+      <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 -->
+      <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 -->
+      <FormGroup id="exitTimeout" :label="$t('apps.exit_timeout')" :description="$t('apps.exit_timeout_desc')">
+        <input type="number" class="form-control monospace" id="exitTimeout" v-model="editForm['exit-timeout']" min="0"
+          placeholder="5" />
+      </FormGroup>
+      <FormGroup id="appImagePath" :label="$t('apps.image')" :description="$t('apps.image_desc')">
+        <div class="input-group">
+          <input type="text" class="form-control monospace" id="appImagePath" v-model="editForm['image-path']" />
+          <button class="btn btn-secondary" type="button"
+            @click="browseFor('file', 'file_browser.select_file', editForm['image-path'], v => editForm['image-path'] = v)">
+            <folder-open :size="18" class="icon"></folder-open>
+          </button>
+          <button class="btn btn-secondary" type="button" @click="showCoverFinder">
+            <search :size="18" class="icon"></search>
+            {{ $t('apps.find_cover') }}
+          </button>
+        </div>
+      </FormGroup>
+      <div class="env-hint alert alert-info">
+        <div class="form-text">
+          <h4>{{ $t('apps.env_vars_about') }}</h4>
+          {{ $t('apps.env_vars_desc') }}
+        </div>
+        <table class="env-table">
+          <thead>
+            <tr>
+              <td><b>{{ $t('apps.env_var_name') }}</b></td>
+              <td><b></b></td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_APP_ID</td>
+              <td>{{ $t('apps.env_app_id') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_APP_NAME</td>
+              <td>{{ $t('apps.env_app_name') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_WIDTH</td>
+              <td>{{ $t('apps.env_client_width') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_HEIGHT</td>
+              <td>{{ $t('apps.env_client_height') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_FPS</td>
+              <td>{{ $t('apps.env_client_fps') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_HDR</td>
+              <td>{{ $t('apps.env_client_hdr') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_GCMAP</td>
+              <td>{{ $t('apps.env_client_gcmap') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_HOST_AUDIO</td>
+              <td>{{ $t('apps.env_client_host_audio') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_ENABLE_SOPS</td>
+              <td>{{ $t('apps.env_client_enable_sops') }}</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_AUDIO_CONFIGURATION</td>
+              <td>{{ $t('apps.env_client_audio_config') }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="form-text" v-if="platform === 'windows'"><b>{{ $t('apps.env_qres_example') }}</b>
+          <pre>cmd /C &lt;{{ $t('apps.env_qres_path') }}&gt;\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT% /R:%SUNSHINE_CLIENT_FPS%</pre>
+        </div>
+        <div class="form-text" v-else-if="platform === 'freebsd' || platform === 'linux'"><b>{{
+          $t('apps.env_xrandr_example') }}</b>
+          <pre>sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate ${SUNSHINE_CLIENT_FPS}"</pre>
+        </div>
+        <div class="form-text" v-else-if="platform === 'macos'"><b>{{ $t('apps.env_displayplacer_example') }}</b>
+          <pre>sh -c "displayplacer "id:&lt;screenId&gt; res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:${SUNSHINE_CLIENT_FPS} scaling:on origin:(0,0) degree:0""</pre>
+        </div>
+        <div class="form-text"><a :href="`${documentationBaseUrl}/md_docs_2app__examples.html`" target="_blank">{{
+          $t('_common.see_more') }}</a></div>
+      </div>
+    </template>
+    <template #footer>
+      <button @click="editModalOpen = false" class="btn btn-secondary">
+        <x :size="18" class="icon"></x>
+        {{ $t('_common.cancel') }}
+      </button>
+      <button class="btn btn-primary" @click="save">
+        <save :size="18" class="icon"></save>
+        {{ $t('_common.save') }}
+      </button>
+    </template>
+  </Modal>
+
+  <!-- Cover Finder modal -->
+  <Modal v-model="coverFinderModalOpen" dialog-class="modal-xl modal-dialog-scrollable modal-fullscreen-md-down"
+    stacked>
+    <template #title>
+      <span v-if="coverSearching">{{ $t('apps.searching_covers') }}</span>
+      <span v-else-if="coverCandidates.length > 0">{{ $t('apps.covers_found') }} ({{ coverCandidates.length }})</span>
+      <span v-else>{{ $t('apps.no_covers_found') }}</span>
+    </template>
+    <div class="mb-3">
+      <div class="input-group">
+        <input type="text" class="form-control" v-model="coverSearchQuery" :placeholder="editForm?.name"
+          @keyup.enter="performCoverSearch" />
+        <button class="btn btn-primary" type="button" @click="performCoverSearch">
+          <search :size="18" class="icon"></search>
+          {{ $t('_common.search') }}
+        </button>
+      </div>
+      <div class="form-text mt-2">
+        <b>{{ $t('_common.note') }}</b> {{ $t('apps.cover_search_hint') }}
+        <a href="https://www.igdb.com/" target="_blank" rel="noopener noreferrer">IGDB</a>
+      </div>
+    </div>
+    <div class="cover-results" :class="{ busy: coverFinderBusy }">
+      <div class="row">
+        <div v-if="coverSearching" class="col-12 col-sm-6 col-lg-4 mb-3">
+          <div class="cover-container">
+            <LoadingSpinner :label="$t('apps.loading')" />
+          </div>
+        </div>
+        <div v-for="cover in coverCandidates" :key="cover.url" class="col-12 col-sm-6 col-lg-3 mb-3"
+          @click="useCover(cover)">
+          <div class="cover-container result">
+            <img class="rounded" :src="cover.url" />
+          </div>
+          <label class="d-block text-nowrap text-center text-truncate">
+            {{ cover.name }}
+          </label>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <button type="button" class="btn btn-secondary" @click="coverFinderModalOpen = false">
+        <x :size="18" class="icon"></x>
+        {{ $t('_common.cancel') }}
+      </button>
+    </template>
+  </Modal>
+
+  <!-- Delete confirmation modal -->
+  <Modal v-model="deleteModalOpen" dialog-class="modal-dialog-centered">
+    <template #title>{{ $t('apps.delete_title') }}</template>
+    <i18n-t v-if="deleteTarget" keypath="apps.delete_confirm" tag="span">
+      <template #name><strong>{{ deleteTarget.name }}</strong></template>
+    </i18n-t>
+    <template #footer>
+      <button type="button" class="btn btn-secondary" @click="deleteModalOpen = false">
+        <x :size="18" class="icon"></x>
+        {{ $t('_common.cancel') }}
+      </button>
+      <button type="button" class="btn btn-danger" @click="confirmDelete">
+        <trash-2 :size="18" class="icon"></trash-2>
+        {{ $t('apps.delete') }}
+      </button>
+    </template>
+  </Modal>
+
+  <!-- Shared file browser modal -->
+  <Modal v-model="fileBrowserModalOpen" dialog-class="modal-lg modal-dialog-scrollable modal-fullscreen-md-down"
+    stacked>
+    <template #title>{{ fileBrowserTitle || $t('file_browser.title') }}</template>
+    <!-- Path input -->
+    <div class="input-group mb-2">
+      <input type="text" class="form-control monospace" v-model="fileBrowserTypedPath" @input="fileBrowserOnTypedInput"
+        @keyup.enter="fileBrowserNavigate(fileBrowserTypedPath)" />
+      <button class="btn btn-secondary" type="button" @click="fileBrowserNavigate(fileBrowserTypedPath)">
+        <arrow-right :size="16" class="icon"></arrow-right>
+      </button>
+    </div>
+    <!-- Up button -->
+    <div class="mb-2">
+      <button class="btn btn-sm btn-outline-secondary" type="button"
+        :disabled="fileBrowserLoading || fileBrowserParentPath === fileBrowserCurrentPath"
+        @click="fileBrowserNavigateUp">
+        <folder-up :size="16" class="icon me-1"></folder-up>
+        {{ $t('file_browser.up') }}
+      </button>
+    </div>
+    <!-- Error -->
+    <div v-if="fileBrowserError" class="alert alert-danger py-2 small">{{ fileBrowserError }}</div>
+    <!-- Loading -->
+    <div v-if="fileBrowserLoading" class="text-center py-3">
+      <LoadingSpinner :label="$t('_common.loading')" small />
+    </div>
+    <!-- Entries -->
+    <div v-else class="list-group" style="max-height: 400px; overflow-y: auto;">
+      <div v-if="fileBrowserEntries.length === 0" class="list-group-item text-muted text-center">
+        {{ $t('file_browser.empty') }}
+      </div>
+      <button v-for="entry in fileBrowserEntries" :key="entry.path" type="button"
+        class="list-group-item list-group-item-action d-flex align-items-center py-1"
+        :class="{ active: fileBrowserSelectedPath === entry.path }" @click="fileBrowserSelectEntry(entry)"
+        @dblclick="fileBrowserActivateEntry(entry)">
+        <hard-drive v-if="!fileBrowserCurrentPath && entry.type === 'directory'" :size="16"
+          class="icon me-2 flex-shrink-0"></hard-drive>
+        <folder v-else-if="entry.type === 'directory'" :size="16" class="icon me-2 flex-shrink-0 text-warning"></folder>
+        <file-text v-else :size="16" class="icon me-2 flex-shrink-0"></file-text>
+        <span class="text-truncate">{{ entry.name }}</span>
+      </button>
+    </div>
+    <template #footer>
+      <div class="flex-grow-1 text-muted small text-truncate" v-if="fileBrowserSelectedPath">
+        <code>{{ fileBrowserSelectedPath }}</code>
+      </div>
+      <button type="button" class="btn btn-secondary" @click="fileBrowserClose">
+        <x :size="16" class="icon me-1"></x>
+        {{ $t('_common.cancel') }}
+      </button>
+      <button type="button" class="btn btn-primary" @click="fileBrowserConfirm"
+        :disabled="!fileBrowserSelectedPath && !fileBrowserTypedPath">
+        <check :size="16" class="icon me-1"></check>
+        {{ $t('file_browser.select') }}
+      </button>
+    </template>
+  </Modal>
 </template>
+
+<script>
+import Modal from '../components/Modal.vue'
+import FormGroup from '../components/FormGroup.vue'
+import LoadingSpinner from '../components/LoadingSpinner.vue'
+import Checkbox from '../components/Checkbox.vue'
+import { apiFetch } from '../utils/fetch_utils'
+import SunshineVersion from '../utils/sunshine_version'
+import {
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpDown,
+  Check,
+  Edit,
+  FileText,
+  Folder,
+  FolderOpen,
+  FolderUp,
+  HardDrive,
+  LayersPlus,
+  Play,
+  Plus,
+  RotateCcw,
+  Save,
+  Search,
+  Shield,
+  Terminal,
+  Trash2,
+  X,
+} from '@lucide/vue'
+
+export default {
+  components: {
+    Modal,
+    FormGroup,
+    LoadingSpinner,
+    Checkbox,
+    ArrowDown,
+    ArrowRight,
+    ArrowUp,
+    ArrowUpDown,
+    Check,
+    Edit,
+    FileText,
+    Folder,
+    FolderOpen,
+    FolderUp,
+    HardDrive,
+    LayersPlus,
+    Play,
+    Plus,
+    RotateCcw,
+    Save,
+    Search,
+    Shield,
+    Terminal,
+    Trash2,
+    X,
+  },
+  data() {
+    return {
+      apps: [],
+      editForm: null,
+      coverSearching: false,
+      coverFinderBusy: false,
+      coverCandidates: [],
+      coverSearchQuery: "",
+      platform: "",
+      fileBrowserType: "any",
+      fileBrowserTitle: "",
+      fileBrowserCallback: null,
+      fileBrowserCurrentPath: "",
+      fileBrowserParentPath: "",
+      fileBrowserEntries: [],
+      fileBrowserLoading: false,
+      fileBrowserError: "",
+      fileBrowserSelectedPath: "",
+      fileBrowserTypedPath: "",
+      searchQuery: "",
+      sortMode: "default",
+      deleteTarget: null,
+      deleteModalOpen: false,
+      editModalOpen: false,
+      coverFinderModalOpen: false,
+      fileBrowserModalOpen: false,
+      version: null,
+      githubVersion: null,
+    };
+  },
+  computed: {
+    installedVersionNotStable() {
+      if (!this.githubVersion || !this.version) {
+        return false;
+      }
+      return this.version.isGreater(this.githubVersion);
+    },
+    documentationBaseUrl() {
+      const docsVersion = this.installedVersionNotStable ? 'master' : 'latest'
+      return `https://docs.lizardbyte.dev/projects/sunshine/${docsVersion}`
+    },
+    displayedApps() {
+      let list = this.apps.map((app, index) => ({ app, index }));
+
+      const query = this.searchQuery.trim().toLowerCase();
+      if (query) {
+        list = list.filter(({ app }) =>
+          (app.name || "").toLowerCase().includes(query)
+        );
+      }
+
+      if (this.sortMode !== "default") {
+        // Apps can be created without a name, so we compare name || ""
+        list.sort((a, b) => {
+          const result = (a.app.name || "").localeCompare(
+            b.app.name || "", undefined, { sensitivity: "base" }
+          );
+          // localeCompare returns 0 if the strings are equal, a negative value if a < b, and a positive value if a > b
+          return this.sortMode === "asc"
+            ? result
+            : -result;
+        });
+      }
+
+      return list;
+    },
+    sortModeLabel() {
+      switch (this.sortMode) {
+        case "asc":
+          return this.$t("apps.sort_ascending");
+        case "desc":
+          return this.$t("apps.sort_descending");
+        default:
+          return this.$t("apps.sort_default");
+      }
+    },
+    appCountLabel() {
+      const total = this.apps.length;
+      const shown = this.displayedApps.length;
+      return shown === total
+        ? `${total}`
+        : `${shown} / ${total}`;
+    },
+    editModalTitle() {
+      if (!this.editForm) {
+        return "";
+      }
+      const action = this.editForm.index === -1
+        ? this.$t("apps.add_new")
+        : this.$t("apps.edit");
+
+      return this.editForm.name
+        ? `${action}: ${this.editForm.name}`
+        : action;
+    },
+  },
+  created() {
+    this.loadApps();
+
+    fetch("./api/config")
+      .then(r => r.json())
+      .then(r => {
+        this.platform = r.platform;
+        this.version = new SunshineVersion(null, r.version);
+      });
+
+    fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest")
+      .then((r) => r.json())
+      .then((r) => this.githubVersion = new SunshineVersion(r, null))
+      .catch((e) => console.error(e));
+  },
+  methods: {
+    newApp() {
+      this.editForm = {
+        name: "",
+        output: "",
+        cmd: "",
+        index: -1,
+        "exclude-global-prep-cmd": false,
+        elevated: false,
+        "auto-detach": true,
+        "wait-all": true,
+        "exit-timeout": 5,
+        "prep-cmd": [],
+        detached: [],
+        "image-path": ""
+      };
+      this.editModalOpen = true;
+    },
+    editApp(id) {
+      this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
+      this.editForm.index = id;
+      if (this.editForm["prep-cmd"] === undefined)
+        this.editForm["prep-cmd"] = [];
+      if (this.editForm["detached"] === undefined)
+        this.editForm["detached"] = [];
+      if (this.editForm["exclude-global-prep-cmd"] === undefined)
+        this.editForm["exclude-global-prep-cmd"] = false;
+      if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
+        this.editForm["elevated"] = false;
+      }
+      if (this.editForm["auto-detach"] === undefined) {
+        this.editForm["auto-detach"] = true;
+      }
+      if (this.editForm["wait-all"] === undefined) {
+        this.editForm["wait-all"] = true;
+      }
+      if (this.editForm["exit-timeout"] === undefined) {
+        this.editForm["exit-timeout"] = 5;
+      }
+      this.editModalOpen = true;
+    },
+    showDeleteModal(id) {
+      this.deleteTarget = { index: id, name: this.apps[id].name };
+      this.deleteModalOpen = true;
+    },
+    loadApps() {
+      return fetch("./api/apps")
+        .then((r) => r.json())
+        .then((r) => {
+          this.apps = r.apps;
+        });
+    },
+    confirmDelete() {
+      apiFetch("./api/apps/" + this.deleteTarget.index, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json"
+        },
+      }).then((r) => {
+        if (r.status === 200) document.location.reload();
+      });
+    },
+    addPrepCmd() {
+      let template = {
+        do: "",
+        undo: ""
+      };
+
+      if (this.platform === 'windows') {
+        template = { ...template, elevated: false };
+      }
+
+      this.editForm["prep-cmd"].push(template);
+    },
+    deletePrepCmd(index) {
+      this.editForm["prep-cmd"].splice(index, 1);
+    },
+    addDetached() {
+      this.editForm.detached.push("");
+    },
+    showCoverFinder() {
+      // Reset search state
+      this.coverCandidates = [];
+      this.coverSearchQuery = "";
+
+      this.coverFinderModalOpen = true;
+
+      // Perform initial search with app name
+      this.performCoverSearch();
+    },
+    performCoverSearch() {
+      this.coverSearching = true;
+      this.coverCandidates = [];
+
+      // Use search query if provided, otherwise fall back to app name
+      const searchTerm = this.coverSearchQuery.trim() || this.editForm["name"].toString();
+
+      function getSearchBucket(name) {
+        let bucket = name.substring(0, Math.min(name.length, 2)).toLowerCase().replaceAll(/[^a-z\d]/g, '');
+        if (!bucket) {
+          return '@';
+        }
+        return bucket;
+      }
+
+      function searchCovers(name) {
+        if (!name) {
+          return Promise.resolve([]);
+        }
+        let searchName = name.replaceAll(/\s+/g, '.').toLowerCase();
+
+        // Use raw.githubusercontent.com to avoid CORS issues as we migrate the CNAME
+        let dbUrl = "https://raw.githubusercontent.com/LizardByte/GameDB/gh-pages";
+        let bucket = getSearchBucket(name);
+        return fetch(`${dbUrl}/buckets/${bucket}.json`).then(function (r) {
+          if (!r.ok) throw new Error("Failed to search covers");
+          return r.json();
+        }).then(maps => Promise.all(Object.keys(maps).map(id => {
+          let item = maps[id];
+          if (item.name.replaceAll(/\s+/g, '.').toLowerCase().startsWith(searchName)) {
+            return fetch(`${dbUrl}/games/${id}.json`).then(function (r) {
+              return r.json();
+            }).catch(() => null);
+          }
+          return null;
+        }).filter(item => item)))
+          .then(results => results
+            .filter(item => item && item.cover && item.cover.url)
+            .map(game => {
+              const thumb = game.cover.url;
+              const dotIndex = thumb.lastIndexOf('.');
+              const slashIndex = thumb.lastIndexOf('/');
+              if (dotIndex < 0 || slashIndex < 0) {
+                return null;
+              }
+              const slug = thumb.substring(slashIndex + 1, dotIndex);
+              return {
+                name: game.name,
+                key: `igdb_${game.id}`,
+                url: `https://images.igdb.com/igdb/image/upload/t_cover_big/${slug}.jpg`,
+                saveUrl: `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${slug}.png`,
+              }
+            }).filter(item => item));
+      }
+
+      searchCovers(searchTerm)
+        .then(list => this.coverCandidates = list)
+        .finally(() => this.coverSearching = false);
+    },
+    useCover(cover) {
+      this.coverFinderBusy = true;
+      apiFetch("./api/covers/upload", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          key: cover.key,
+          url: cover.saveUrl,
+        })
+      }).then(r => {
+        if (!r.ok) throw new Error("Failed to download covers");
+        return r.json();
+      }).then(body => {
+        this.editForm["image-path"] = body.path;
+        this.coverFinderModalOpen = false;
+      })
+        .finally(() => this.coverFinderBusy = false);
+    },
+    browseFor(type, titleKey, startPath, callback) {
+      this.fileBrowserType = type;
+      this.fileBrowserTitle = this.$t(titleKey);
+      this.fileBrowserCallback = callback;
+      this.fileBrowserSelectedPath = startPath || '';
+      this.fileBrowserTypedPath = startPath || '';
+      this.fileBrowserError = '';
+      this.fileBrowserNavigate(startPath || '');
+      this.fileBrowserModalOpen = true;
+    },
+    fileBrowserClose() {
+      this.fileBrowserModalOpen = false;
+    },
+    fileBrowserConfirm() {
+      const path = this.fileBrowserSelectedPath || this.fileBrowserTypedPath;
+      if (path) {
+        if (this.fileBrowserCallback) {
+          this.fileBrowserCallback(path);
+          this.fileBrowserCallback = null;
+        }
+        this.fileBrowserClose();
+      }
+    },
+    fileBrowserNavigate(path) {
+      this.fileBrowserLoading = true;
+      this.fileBrowserError = '';
+      const params = new URLSearchParams({ type: this.fileBrowserType });
+      if (path) params.set('path', path);
+      fetch(`./api/browse?${params.toString()}`)
+        .then(r => r.ok ? r.json() : r.json().then(e => { throw new Error(e.error || 'Browse failed'); }))
+        .then(data => {
+          this.fileBrowserCurrentPath = data.path ?? '';
+          this.fileBrowserParentPath = data.parent ?? '';
+          this.fileBrowserEntries = data.entries ?? [];
+          this.fileBrowserTypedPath = data.path ?? '';
+          this.fileBrowserSelectedPath = this.fileBrowserType === 'directory' ? (data.path ?? '') : '';
+        })
+        .catch(err => { this.fileBrowserError = err.message; })
+        .finally(() => { this.fileBrowserLoading = false; });
+    },
+    fileBrowserNavigateUp() {
+      this.fileBrowserNavigate(this.fileBrowserParentPath);
+    },
+    fileBrowserSelectEntry(entry) {
+      if (entry.type === 'directory') {
+        this.fileBrowserNavigate(entry.path);
+      } else {
+        this.fileBrowserSelectedPath = entry.path;
+        this.fileBrowserTypedPath = entry.path;
+      }
+    },
+    fileBrowserActivateEntry(entry) {
+      if (entry.type === 'directory') {
+        this.fileBrowserNavigate(entry.path);
+      } else {
+        this.fileBrowserSelectedPath = entry.path;
+        this.fileBrowserTypedPath = entry.path;
+        this.fileBrowserConfirm();
+      }
+    },
+    fileBrowserOnTypedInput() {
+      this.fileBrowserSelectedPath = this.fileBrowserTypedPath;
+    },
+    browsePrep(index, field) {
+      const current = this.editForm['prep-cmd'][index][field] || '';
+      this.browseFor('executable', 'file_browser.select_executable', current, (path) => {
+        this.editForm['prep-cmd'][index][field] = path;
+      });
+    },
+    browseDetached(index) {
+      const current = this.editForm.detached[index] || '';
+      this.browseFor('executable', 'file_browser.select_executable', current, (path) => {
+        this.editForm.detached[index] = path;
+      });
+    },
+    save() {
+      this.editForm["image-path"] = this.editForm["image-path"].toString().replace(/"/g, '');
+      apiFetch("./api/apps", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(this.editForm),
+      }).then((r) => {
+        if (r.status === 200) document.location.reload();
+      });
+    },
+    handleImageError(event) {
+      // Hide the broken image and show placeholder instead
+      event.target.style.display = 'none';
+      const placeholder = event.target.nextElementSibling;
+      if (placeholder && placeholder.classList.contains('app-poster-placeholder')) {
+        placeholder.style.display = 'flex';
+      }
+    },
+    resetSearchQuery() {
+      this.searchQuery = "";
+    },
+    toggleSort() {
+      // Sorting goes default -> ascending -> descending -> default
+      if (this.sortMode === "default")
+        this.sortMode = "asc";
+      else if (this.sortMode === "asc")
+        this.sortMode = "desc";
+      else
+        this.sortMode = "default";
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/apps.html b/src_assets/common/assets/web/src/views/apps.html
deleted file mode 100644
index 32b3e0af9ed..00000000000
--- a/src_assets/common/assets/web/src/views/apps.html
+++ /dev/null
@@ -1,1049 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-      <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <div class="my-4">
-      <h1>{{ $t('apps.applications_title') }}<span v-if="apps.length"> ({{ appCountLabel }})</span></h1>
-      <p>{{ $t('apps.applications_desc') }}</p>
-    </div>
-
-    <!-- Actions toolbar -->
-    <div class="toolbar apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
-      <!-- Left side actions -->
-      <div class="d-flex align-items-center gap-2">
-        <!-- Add new application -->
-        <button class="btn btn-primary" @click="newApp">
-          <layers-plus :size="18" class="icon"></layers-plus>
-          {{ $t('apps.add_new') }}
-        </button>
-      </div>
-      <!-- Right side actions -->
-      <div class="d-flex align-items-center gap-2" v-if="apps && apps.length > 0">
-        <!-- Sort by name toggle -->
-        <button class="btn btn-outline-secondary text-nowrap" type="button" @click="toggleSort"
-                :class="{ active: sortMode !== 'default' }"
-                :aria-pressed="sortMode !== 'default'"
-                :title="$t('apps.sort_by_name') + ': ' + sortModeLabel">
-          <arrow-up-down v-if="sortMode === 'default'" :size="16" class="icon me-1"></arrow-up-down>
-          <arrow-up v-else-if="sortMode === 'asc'" :size="16" class="icon me-1"></arrow-up>
-          <arrow-down v-else :size="16" class="icon me-1"></arrow-down>
-          {{ $t('apps.sort_by_name') }}
-        </button>
-        <!-- Search box -->
-        <div class="input-group">
-          <input type="text" class="form-control" v-model="searchQuery" :placeholder="$t('apps.search_placeholder')" />
-          <button v-if="searchQuery" class="btn btn-outline-secondary" type="button" @click="resetSearchQuery" :aria-label="$t('_common.close')">
-            <x :size="16" class="icon"></x>
-          </button>
-          <span v-else class="input-group-text">
-            <search :size="16" class="icon"></search>
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Apps Grid -->
-    <div class="row g-3" v-if="displayedApps.length > 0">
-      <div class="col-12 col-sm-6 col-md-4 col-lg-3" v-for="{ app, index } in displayedApps" :key="index">
-        <div class="card app-card h-100">
-          <div class="app-poster-container">
-            <img
-              v-if="app['image-path']"
-              :src="'/api/covers/' + index"
-              class="app-poster"
-              :alt="app.name"
-              @error="handleImageError"
-            />
-            <div v-else class="app-poster-placeholder">
-              <span class="app-initial">{{ app.name.charAt(0).toUpperCase() }}</span>
-            </div>
-            <div class="app-poster-overlay">
-              <div v-if="app.cmd" class="app-overlay-row" :title="app.cmd">
-                <terminal :size="14" class="icon me-1"></terminal>
-                <span class="app-detail-text">{{ app.cmd }}</span>
-              </div>
-              <div v-if="app['working-dir']" class="app-overlay-row" :title="app['working-dir']">
-                <folder :size="14" class="icon me-1"></folder>
-                <span class="app-detail-text">{{ app['working-dir'] }}</span>
-              </div>
-              <div class="app-overlay-badges">
-                <span v-if="app.elevated" class="badge app-flag-badge">{{ $t('apps.badge_admin') }}</span>
-                <span v-if="app.detached && app.detached.length" class="badge app-flag-badge">{{ $t('apps.badge_detached') }}</span>
-                <span v-if="app['prep-cmd'] && app['prep-cmd'].length" class="badge app-flag-badge">{{ $t('apps.badge_app_prep') }}</span>
-                <span v-if="app['exclude-global-prep-cmd']" class="badge app-flag-badge">{{ $t('apps.badge_no_global_prep') }}</span>
-                <span v-if="app['auto-detach']" class="badge app-flag-badge">{{ $t('apps.badge_auto_detach') }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="card-body d-flex flex-column">
-            <h5 class="card-title mb-3">{{ app.name }}</h5>
-            <div class="mt-auto d-flex gap-2">
-              <button class="btn btn-sm btn-primary flex-fill" @click="editApp(index)">
-                <edit :size="16" class="icon"></edit>
-                {{ $t('apps.edit') }}
-              </button>
-              <button class="btn btn-sm btn-danger" @click="showDeleteModal(index)">
-                <trash-2 :size="16" class="icon"></trash-2>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- No search results -->
-    <div v-else-if="apps && apps.length > 0" class="card">
-      <div class="card-body text-center py-5">
-        <p class="text-muted">{{ $t('apps.no_search_results') }}</p>
-      </div>
-    </div>
-
-    <!-- Empty State -->
-    <div v-else class="card">
-      <div class="card-body text-center py-5">
-        <p class="text-muted">{{ $t('apps.no_applications') }}</p>
-      </div>
-    </div>
-
-    <!-- Edit / Add Application modal -->
-    <div class="modal fade" ref="editModal" tabindex="-1" aria-labelledby="appEditModalLabel"
-         aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
-      <div class="modal-dialog modal-xl modal-dialog-scrollable modal-fullscreen-lg-down">
-        <div class="modal-content" v-if="editForm">
-          <div class="modal-header">
-            <h5 class="modal-title" id="appEditModalLabel">
-              {{ editModalTitle }}
-            </h5>
-            <button type="button" class="btn-close" @click="closeEditModal"
-              :aria-label="$t('_common.close')"></button>
-          </div>
-          <div class="modal-body">
-            <!-- Application Name -->
-            <div class="mb-3">
-              <label for="appName" class="form-label">{{ $t('apps.app_name') }}</label>
-              <input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name" />
-              <div id="appNameHelp" class="form-text">{{ $t('apps.app_name_desc') }}</div>
-            </div>
-            <!-- output -->
-            <div class="mb-3">
-              <label for="appOutput" class="form-label">{{ $t('apps.output_name') }}</label>
-              <div class="input-group">
-                <input type="text" class="form-control monospace" id="appOutput" aria-describedby="appOutputHelp"
-                  v-model="editForm.output" />
-                <button class="btn btn-secondary" type="button"
-                  @click="browseFor('any', 'file_browser.select_file', editForm.output, v => editForm.output = v)">
-                  <folder-open :size="18" class="icon"></folder-open>
-                </button>
-              </div>
-              <div id="appOutputHelp" class="form-text">{{ $t('apps.output_desc') }}</div>
-            </div>
-            <!-- prep-cmd -->
-            <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"
-                      inverse-values
-            ></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>
-              <div class="d-flex justify-content-start mb-3 mt-3" v-if="editForm['prep-cmd'].length === 0">
-                <button class="btn btn-success" @click="addPrepCmd">
-                  <plus :size="18" class="icon"></plus>
-                  {{ $t('apps.add_cmds') }}
-                </button>
-              </div>
-              <table class="table" v-if="editForm['prep-cmd'].length > 0">
-                <thead>
-                  <tr>
-                    <th scope="col">
-                      <play :size="18" class="icon"></play>
-                      {{ $t('_common.do_cmd') }}
-                    </th>
-                    <th scope="col">
-                      <rotate-ccw :size="18" class="icon"></rotate-ccw>
-                      {{ $t('_common.undo_cmd') }}
-                    </th>
-                    <th scope="col" v-if="platform === 'windows'">
-                      <shield :size="18" class="icon"></shield>
-                      {{ $t('_common.run_as') }}
-                    </th>
-                    <th scope="col"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(c, i) in editForm['prep-cmd']">
-                    <td>
-                      <div class="input-group">
-                        <input type="text" class="form-control monospace" v-model="c.do" />
-                        <button class="btn btn-secondary btn-sm" type="button" @click="browsePrep(i, 'do')">
-                          <folder-open :size="14" class="icon"></folder-open>
-                        </button>
-                      </div>
-                    </td>
-                    <td>
-                      <div class="input-group">
-                        <input type="text" class="form-control monospace" v-model="c.undo" />
-                        <button class="btn btn-secondary btn-sm" type="button" @click="browsePrep(i, 'undo')">
-                          <folder-open :size="14" class="icon"></folder-open>
-                        </button>
-                      </div>
-                    </td>
-                    <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 class="align-middle">
-                      <button class="btn btn-danger btn-sm ms-2" @click="deletePrepCmd(i)">
-                        <trash-2 :size="16" class="icon"></trash-2>
-                      </button>
-                      <button class="btn btn-success btn-sm ms-2" @click="addPrepCmd">
-                        <plus :size="16" class="icon"></plus>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!-- detached -->
-            <div class="mb-3">
-              <label for="appName" class="form-label">{{ $t('apps.detached_cmds') }}</label>
-              <div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between align-items-center my-2">
-                <input type="text" v-model="editForm.detached[i]" class="form-control monospace">
-                <button class="btn btn-secondary btn-sm ms-2" @click="browseDetached(i)">
-                  <folder-open :size="14" class="icon"></folder-open>
-                </button>
-                <button class="btn btn-danger btn-sm ms-2" @click="editForm.detached.splice(i,1)">
-                  <trash-2 :size="16" class="icon"></trash-2>
-                </button>
-                <button class="btn btn-success btn-sm ms-2" @click="addDetached">
-                  <plus :size="16" class="icon"></plus>
-                </button>
-              </div>
-              <div class="d-flex justify-content-start mb-3 mt-3" v-if="editForm.detached.length === 0">
-                <button class="btn btn-success" @click="addDetached">
-                  <plus :size="18" class="icon"></plus>
-                  {{ $t('apps.detached_cmds_add') }}
-                </button>
-              </div>
-              <div class="form-text">
-                {{ $t('apps.detached_cmds_desc') }}<br>
-                <b>{{ $t('_common.note') }}</b> {{ $t('apps.detached_cmds_note') }}
-              </div>
-            </div>
-            <!-- command -->
-            <div class="mb-3">
-              <label for="appCmd" class="form-label">{{ $t('apps.cmd') }}</label>
-              <div class="input-group">
-                <input type="text" class="form-control monospace" id="appCmd" aria-describedby="appCmdHelp"
-                  v-model="editForm.cmd" />
-                <button class="btn btn-secondary" type="button"
-                  @click="browseFor('executable', 'file_browser.select_executable', editForm.cmd, v => editForm.cmd = v)">
-                  <folder-open :size="18" class="icon"></folder-open>
-                </button>
-              </div>
-              <div id="appCmdHelp" class="form-text">
-                {{ $t('apps.cmd_desc') }}<br>
-                <b>{{ $t('_common.note') }}</b> {{ $t('apps.cmd_note') }}
-              </div>
-            </div>
-            <!-- working dir -->
-            <div class="mb-3">
-              <label for="appWorkingDir" class="form-label">{{ $t('apps.working_dir') }}</label>
-              <div class="input-group">
-                <input type="text" class="form-control monospace" id="appWorkingDir" aria-describedby="appWorkingDirHelp"
-                  v-model="editForm['working-dir']" />
-                <button class="btn btn-secondary" type="button"
-                  @click="browseFor('directory', 'file_browser.select_directory', editForm['working-dir'], v => editForm['working-dir'] = v)">
-                  <folder-open :size="18" class="icon"></folder-open>
-                </button>
-              </div>
-              <div id="appWorkingDirHelp" class="form-text">{{ $t('apps.working_dir_desc') }}</div>
-            </div>
-            <!-- elevation -->
-            <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 -->
-            <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 -->
-            <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>
-              <input type="number" class="form-control monospace" id="exitTimeout" aria-describedby="exitTimeoutHelp"
-                     v-model="editForm['exit-timeout']" min="0" placeholder="5" />
-              <div id="exitTimeoutHelp" class="form-text">{{ $t('apps.exit_timeout_desc') }}</div>
-            </div>
-            <div class="mb-3">
-              <label for="appImagePath" class="form-label">{{ $t('apps.image') }}</label>
-              <div class="input-group">
-                <input type="text" class="form-control monospace" id="appImagePath" aria-describedby="appImagePathHelp"
-                  v-model="editForm['image-path']" />
-                <button class="btn btn-secondary" type="button"
-                  @click="browseFor('file', 'file_browser.select_file', editForm['image-path'], v => editForm['image-path'] = v)">
-                  <folder-open :size="18" class="icon"></folder-open>
-                </button>
-                <button class="btn btn-secondary" type="button" @click="showCoverFinder">
-                  <search :size="18" class="icon"></search>
-                  {{ $t('apps.find_cover') }}
-                </button>
-              </div>
-              <div id="appImagePathHelp" class="form-text">{{ $t('apps.image_desc') }}</div>
-            </div>
-            <div class="env-hint alert alert-info">
-              <div class="form-text">
-                <h4>{{ $t('apps.env_vars_about') }}</h4>
-                {{ $t('apps.env_vars_desc') }}
-              </div>
-              <table class="env-table">
-                <tr>
-                  <td><b>{{ $t('apps.env_var_name') }}</b></td>
-                  <td><b></b></td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_APP_ID</td>
-                  <td>{{ $t('apps.env_app_id') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_APP_NAME</td>
-                  <td>{{ $t('apps.env_app_name') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_WIDTH</td>
-                  <td>{{ $t('apps.env_client_width') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_HEIGHT</td>
-                  <td>{{ $t('apps.env_client_height') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_FPS</td>
-                  <td>{{ $t('apps.env_client_fps') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_HDR</td>
-                  <td>{{ $t('apps.env_client_hdr') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_GCMAP</td>
-                  <td>{{ $t('apps.env_client_gcmap') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_HOST_AUDIO</td>
-                  <td>{{ $t('apps.env_client_host_audio') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_ENABLE_SOPS</td>
-                  <td>{{ $t('apps.env_client_enable_sops') }}</td>
-                </tr>
-                <tr>
-                  <td style="font-family: monospace">SUNSHINE_CLIENT_AUDIO_CONFIGURATION</td>
-                  <td>{{ $t('apps.env_client_audio_config') }}</td>
-                </tr>
-              </table>
-              <div class="form-text" v-if="platform === 'windows'"><b>{{ $t('apps.env_qres_example') }}</b>
-                <pre>cmd /C &lt;{{ $t('apps.env_qres_path') }}&gt;\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT% /R:%SUNSHINE_CLIENT_FPS%</pre>
-              </div>
-              <div class="form-text" v-else-if="platform === 'freebsd' || platform === 'linux'"><b>{{ $t('apps.env_xrandr_example') }}</b>
-                <pre>sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate ${SUNSHINE_CLIENT_FPS}"</pre>
-              </div>
-              <div class="form-text" v-else-if="platform === 'macos'"><b>{{ $t('apps.env_displayplacer_example') }}</b>
-                <pre>sh -c "displayplacer "id:&lt;screenId&gt; res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:${SUNSHINE_CLIENT_FPS} scaling:on origin:(0,0) degree:0""</pre>
-              </div>
-              <div class="form-text"><a
-                  :href="`${documentationBaseUrl}/md_docs_2app__examples.html`"
-                  target="_blank">{{ $t('_common.see_more') }}</a></div>
-            </div>
-          </div>
-          <!-- Save buttons -->
-          <div class="modal-footer">
-            <button @click="closeEditModal" class="btn btn-secondary">
-              <x :size="18" class="icon"></x>
-              {{ $t('_common.cancel') }}
-            </button>
-            <button class="btn btn-primary" @click="save">
-              <save :size="18" class="icon"></save>
-              {{ $t('_common.save') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Cover Finder modal -->
-    <div class="modal fade" id="coverFinderModal" tabindex="-1" aria-labelledby="coverFinderModalLabel" aria-hidden="true" ref="coverFinderModal">
-      <div class="modal-dialog modal-xl modal-dialog-scrollable modal-fullscreen-md-down">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="coverFinderModalLabel">
-              <span v-if="coverSearching">{{ $t('apps.searching_covers') }}</span>
-              <span v-else-if="coverCandidates.length > 0">{{ $t('apps.covers_found') }} ({{ coverCandidates.length }})</span>
-              <span v-else>{{ $t('apps.no_covers_found') }}</span>
-            </h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('_common.close')"></button>
-          </div>
-          <div class="modal-body">
-            <div class="mb-3">
-              <div class="input-group">
-                <input
-                  type="text"
-                  class="form-control"
-                  v-model="coverSearchQuery"
-                  :placeholder="editForm?.name"
-                  @keyup.enter="performCoverSearch"
-                />
-                <button class="btn btn-primary" type="button" @click="performCoverSearch">
-                  <search :size="18" class="icon"></search>
-                  {{ $t('_common.search') }}
-                </button>
-              </div>
-              <div class="form-text mt-2">
-                <b>{{ $t('_common.note') }}</b> {{ $t('apps.cover_search_hint') }}
-                <a href="https://www.igdb.com/" target="_blank" rel="noopener noreferrer">IGDB</a>
-              </div>
-            </div>
-            <div class="cover-results" :class="{ busy: coverFinderBusy }">
-              <div class="row">
-                <div v-if="coverSearching" class="col-12 col-sm-6 col-lg-4 mb-3">
-                  <div class="cover-container">
-                    <div class="spinner-border" role="status">
-                      <span class="visually-hidden">{{ $t('apps.loading') }}</span>
-                    </div>
-                  </div>
-                </div>
-                <div v-for="cover in coverCandidates" :key="cover.url" class="col-12 col-sm-6 col-lg-3 mb-3"
-                  @click="useCover(cover)">
-                  <div class="cover-container result">
-                    <img class="rounded" :src="cover.url" />
-                  </div>
-                  <label class="d-block text-nowrap text-center text-truncate">
-                    {{cover.name}}
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-              <x :size="18" class="icon"></x>
-              {{ $t('_common.cancel') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Delete confirmation modal -->
-    <div class="modal fade" ref="deleteModal" tabindex="-1" aria-labelledby="appDeleteModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content" v-if="deleteTarget">
-          <div class="modal-header">
-            <h5 class="modal-title" id="appDeleteModalLabel">{{ $t('apps.delete_title') }}</h5>
-            <button type="button" class="btn-close" @click="closeDeleteModal"
-              :aria-label="$t('_common.close')"></button>
-          </div>
-          <div class="modal-body">
-            <i18n-t keypath="apps.delete_confirm" tag="span">
-              <template #name><strong>{{ deleteTarget.name }}</strong></template>
-            </i18n-t>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" @click="closeDeleteModal">
-              <x :size="18" class="icon"></x>
-              {{ $t('_common.cancel') }}
-            </button>
-            <button type="button" class="btn btn-danger" @click="confirmDelete">
-              <trash-2 :size="18" class="icon"></trash-2>
-              {{ $t('apps.delete') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Shared file browser modal -->
-    <div class="modal fade" ref="fileBrowserModal" tabindex="-1" aria-hidden="true">
-      <div class="modal-dialog modal-lg modal-dialog-scrollable modal-fullscreen-md-down">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
-            <button type="button" class="btn-close" @click="fileBrowserClose" :aria-label="$t('_common.close')"></button>
-          </div>
-          <div class="modal-body">
-            <!-- Path input -->
-            <div class="input-group mb-2">
-              <input type="text" class="form-control monospace" v-model="fileBrowserTypedPath"
-                @input="fileBrowserOnTypedInput" @keyup.enter="fileBrowserNavigate(fileBrowserTypedPath)" />
-              <button class="btn btn-secondary" type="button" @click="fileBrowserNavigate(fileBrowserTypedPath)">
-                <arrow-right :size="16" class="icon"></arrow-right>
-              </button>
-            </div>
-            <!-- Up button -->
-            <div class="mb-2">
-              <button class="btn btn-sm btn-outline-secondary" type="button"
-                :disabled="fileBrowserLoading || fileBrowserParentPath === fileBrowserCurrentPath"
-                @click="fileBrowserNavigateUp">
-                <folder-up :size="16" class="icon me-1"></folder-up>
-                {{ $t('file_browser.up') }}
-              </button>
-            </div>
-            <!-- Error -->
-            <div v-if="fileBrowserError" class="alert alert-danger py-2 small">{{ fileBrowserError }}</div>
-            <!-- Loading -->
-            <div v-if="fileBrowserLoading" class="text-center py-3">
-              <output class="spinner-border spinner-border-sm">
-                <span class="visually-hidden">{{ $t('_common.loading') }}</span>
-              </output>
-            </div>
-            <!-- Entries -->
-            <div v-else class="list-group" style="max-height: 400px; overflow-y: auto;">
-              <div v-if="fileBrowserEntries.length === 0" class="list-group-item text-muted text-center">
-                {{ $t('file_browser.empty') }}
-              </div>
-              <button v-for="entry in fileBrowserEntries" :key="entry.path" type="button"
-                class="list-group-item list-group-item-action d-flex align-items-center py-1"
-                :class="{ active: fileBrowserSelectedPath === entry.path }"
-                @click="fileBrowserSelectEntry(entry)" @dblclick="fileBrowserActivateEntry(entry)">
-                <hard-drive v-if="!fileBrowserCurrentPath && entry.type === 'directory'" :size="16" class="icon me-2 flex-shrink-0"></hard-drive>
-                <folder v-else-if="entry.type === 'directory'" :size="16" class="icon me-2 flex-shrink-0 text-warning"></folder>
-                <file-text v-else :size="16" class="icon me-2 flex-shrink-0"></file-text>
-                <span class="text-truncate">{{ entry.name }}</span>
-              </button>
-            </div>
-          </div>
-          <div class="modal-footer flex-wrap gap-2">
-            <div class="flex-grow-1 text-muted small text-truncate" v-if="fileBrowserSelectedPath">
-              <code>{{ fileBrowserSelectedPath }}</code>
-            </div>
-            <button type="button" class="btn btn-secondary" @click="fileBrowserClose">
-              <x :size="16" class="icon me-1"></x>
-              {{ $t('_common.cancel') }}
-            </button>
-            <button type="button" class="btn btn-primary" @click="fileBrowserConfirm"
-              :disabled="!fileBrowserSelectedPath && !fileBrowserTypedPath">
-              <check :size="16" class="icon me-1"></check>
-              {{ $t('file_browser.select') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import Checkbox from './Checkbox.vue'
-  import { apiFetch } from './fetch_utils'
-  import SunshineVersion from './sunshine_version'
-  import { Modal } from 'bootstrap/dist/js/bootstrap'
-  import {
-    ArrowDown,
-    ArrowRight,
-    ArrowUp,
-    ArrowUpDown,
-    Check,
-    Edit,
-    FileText,
-    Folder,
-    FolderOpen,
-    FolderUp,
-    HardDrive,
-    LayersPlus,
-    Play,
-    Plus,
-    RotateCcw,
-    Save,
-    Search,
-    Shield,
-    Terminal,
-    Trash2,
-    X,
-  } from '@lucide/vue'
-
-  const app = createApp({
-    components: {
-      Navbar,
-      Checkbox,
-      ArrowDown,
-      ArrowRight,
-      ArrowUp,
-      ArrowUpDown,
-      Check,
-      Edit,
-      FileText,
-      Folder,
-      FolderOpen,
-      FolderUp,
-      HardDrive,
-      LayersPlus,
-      Play,
-      Plus,
-      RotateCcw,
-      Save,
-      Search,
-      Shield,
-      Terminal,
-      Trash2,
-      X,
-    },
-    data() {
-      return {
-        apps: [],
-        editForm: null,
-        detachedCmd: "",
-        coverSearching: false,
-        coverFinderBusy: false,
-        coverCandidates: [],
-        coverSearchQuery: "",
-        platform: "",
-        fileBrowserType: "any",
-        fileBrowserTitle: "",
-        fileBrowserCallback: null,
-        fileBrowserCurrentPath: "",
-        fileBrowserParentPath: "",
-        fileBrowserEntries: [],
-        fileBrowserLoading: false,
-        fileBrowserError: "",
-        fileBrowserSelectedPath: "",
-        fileBrowserTypedPath: "",
-        searchQuery: "",
-        sortMode: "default",
-        deleteTarget: null,
-        version: null,
-        githubVersion: null,
-      };
-    },
-    computed: {
-      installedVersionNotStable() {
-        if (!this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.version.isGreater(this.githubVersion);
-      },
-      documentationBaseUrl() {
-        const docsVersion = this.installedVersionNotStable ? 'master' : 'latest'
-        return `https://docs.lizardbyte.dev/projects/sunshine/${docsVersion}`
-      },
-      displayedApps() {
-        let list = this.apps.map((app, index) => ({ app, index }));
-
-        const query = this.searchQuery.trim().toLowerCase();
-        if (query) {
-          list = list.filter(({ app }) =>
-            (app.name || "").toLowerCase().includes(query)
-          );
-        }
-
-        if (this.sortMode !== "default") {
-          // Apps can be created without a name, so we compare name || ""
-          list.sort((a, b) => {
-            const result = (a.app.name || "").localeCompare(
-              b.app.name || "", undefined, { sensitivity: "base" }
-            );
-            // localeCompare returns 0 if the strings are equal, a negative value if a < b, and a positive value if a > b
-            return this.sortMode === "asc"
-              ? result
-              : -result;
-          });
-        }
-
-        return list;
-      },
-      sortModeLabel() {
-        switch (this.sortMode) {
-          case "asc":
-            return this.$t("apps.sort_ascending");
-          case "desc":
-            return this.$t("apps.sort_descending");
-          default:
-            return this.$t("apps.sort_default");
-        }
-      },
-      appCountLabel() {
-        const total = this.apps.length;
-        const shown = this.displayedApps.length;
-        return shown === total
-          ? `${total}`
-          : `${shown} / ${total}`;
-      },
-      editModalTitle() {
-        if (!this.editForm) {
-          return "";
-        }
-        const action = this.editForm.index === -1
-          ? this.$t("apps.add_new")
-          : this.$t("apps.edit");
-
-        return this.editForm.name
-          ? `${action}: ${this.editForm.name}`
-          : action;
-      },
-    },
-    created() {
-      this.loadApps();
-
-      fetch("./api/config")
-        .then(r => r.json())
-        .then(r => {
-          this.platform = r.platform;
-          this.version = new SunshineVersion(null, r.version);
-        });
-
-      fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest")
-        .then((r) => r.json())
-        .then((r) => this.githubVersion = new SunshineVersion(r, null))
-        .catch((e) => console.error(e));
-    },
-    methods: {
-      newApp() {
-        this.editForm = {
-          name: "",
-          output: "",
-          cmd: "",
-          index: -1,
-          "exclude-global-prep-cmd": false,
-          elevated: false,
-          "auto-detach": true,
-          "wait-all": true,
-          "exit-timeout": 5,
-          "prep-cmd": [],
-          detached: [],
-          "image-path": ""
-        };
-        this.openEditModal();
-      },
-      editApp(id) {
-        this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
-        this.editForm.index = id;
-        if (this.editForm["prep-cmd"] === undefined)
-          this.editForm["prep-cmd"] = [];
-        if (this.editForm["detached"] === undefined)
-          this.editForm["detached"] = [];
-        if (this.editForm["exclude-global-prep-cmd"] === undefined)
-          this.editForm["exclude-global-prep-cmd"] = false;
-        if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
-          this.editForm["elevated"] = false;
-        }
-        if (this.editForm["auto-detach"] === undefined) {
-          this.editForm["auto-detach"] = true;
-        }
-        if (this.editForm["wait-all"] === undefined) {
-          this.editForm["wait-all"] = true;
-        }
-        if (this.editForm["exit-timeout"] === undefined) {
-          this.editForm["exit-timeout"] = 5;
-        }
-        this.openEditModal();
-      },
-      showDeleteModal(id) {
-        this.deleteTarget = { index: id, name: this.apps[id].name };
-        this.$nextTick(() => {
-          Modal.getOrCreateInstance(this.$refs.deleteModal).show();
-        });
-      },
-      closeDeleteModal() {
-        const modal = Modal.getInstance(this.$refs.deleteModal);
-        if (modal) modal.hide();
-      },
-      loadApps() {
-        return fetch("./api/apps")
-          .then((r) => r.json())
-          .then((r) => {
-            this.apps = r.apps;
-          });
-      },
-      confirmDelete() {
-        apiFetch("./api/apps/" + this.deleteTarget.index, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json"
-          },
-        }).then((r) => {
-          if (r.status === 200) document.location.reload();
-        });
-      },
-      addPrepCmd() {
-        let template = {
-          do: "",
-          undo: ""
-        };
-
-        if (this.platform === 'windows') {
-          template = { ...template, elevated: false };
-        }
-
-        this.editForm["prep-cmd"].push(template);
-      },
-      deletePrepCmd(index) {
-        this.editForm["prep-cmd"].splice(index, 1);
-      },
-      addDetached() {
-        this.editForm.detached.push("");
-      },
-      showCoverFinder() {
-        // Reset search state
-        this.coverCandidates = [];
-        this.coverSearchQuery = "";
-
-        this.showStacked(this.$refs.coverFinderModal);
-
-        // Perform initial search with app name
-        this.performCoverSearch();
-      },
-      performCoverSearch() {
-        this.coverSearching = true;
-        this.coverCandidates = [];
-
-        // Use search query if provided, otherwise fall back to app name
-        const searchTerm = this.coverSearchQuery.trim() || this.editForm["name"].toString();
-
-        function getSearchBucket(name) {
-          let bucket = name.substring(0, Math.min(name.length, 2)).toLowerCase().replaceAll(/[^a-z\d]/g, '');
-          if (!bucket) {
-            return '@';
-          }
-          return bucket;
-        }
-
-        function searchCovers(name) {
-          if (!name) {
-            return Promise.resolve([]);
-          }
-          let searchName = name.replaceAll(/\s+/g, '.').toLowerCase();
-
-          // Use raw.githubusercontent.com to avoid CORS issues as we migrate the CNAME
-          let dbUrl = "https://raw.githubusercontent.com/LizardByte/GameDB/gh-pages";
-          let bucket = getSearchBucket(name);
-          return fetch(`${dbUrl}/buckets/${bucket}.json`).then(function (r) {
-            if (!r.ok) throw new Error("Failed to search covers");
-            return r.json();
-          }).then(maps => Promise.all(Object.keys(maps).map(id => {
-            let item = maps[id];
-            if (item.name.replaceAll(/\s+/g, '.').toLowerCase().startsWith(searchName)) {
-              return fetch(`${dbUrl}/games/${id}.json`).then(function (r) {
-                return r.json();
-              }).catch(() => null);
-            }
-            return null;
-          }).filter(item => item)))
-            .then(results => results
-              .filter(item => item && item.cover && item.cover.url)
-              .map(game => {
-                const thumb = game.cover.url;
-                const dotIndex = thumb.lastIndexOf('.');
-                const slashIndex = thumb.lastIndexOf('/');
-                if (dotIndex < 0 || slashIndex < 0) {
-                  return null;
-                }
-                const slug = thumb.substring(slashIndex + 1, dotIndex);
-                return {
-                  name: game.name,
-                  key: `igdb_${game.id}`,
-                  url: `https://images.igdb.com/igdb/image/upload/t_cover_big/${slug}.jpg`,
-                  saveUrl: `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${slug}.png`,
-                }
-              }).filter(item => item));
-        }
-
-        searchCovers(searchTerm)
-          .then(list => this.coverCandidates = list)
-          .finally(() => this.coverSearching = false);
-      },
-      useCover(cover) {
-        this.coverFinderBusy = true;
-        apiFetch("./api/covers/upload", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            key: cover.key,
-            url: cover.saveUrl,
-          })
-        }).then(r => {
-          if (!r.ok) throw new Error("Failed to download covers");
-          return r.json();
-        }).then(body => {
-          this.editForm["image-path"] = body.path;
-          // Close the modal
-          const modalEl = this.$refs.coverFinderModal;
-          if (modalEl) {
-            const modal = Modal.getInstance(modalEl);
-            if (modal) {
-              modal.hide();
-            }
-          }
-        })
-          .finally(() => this.coverFinderBusy = false);
-      },
-      browseFor(type, titleKey, startPath, callback) {
-        this.fileBrowserType = type;
-        this.fileBrowserTitle = this.$t(titleKey);
-        this.fileBrowserCallback = callback;
-        this.fileBrowserSelectedPath = startPath || '';
-        this.fileBrowserTypedPath = startPath || '';
-        this.fileBrowserError = '';
-        this.fileBrowserNavigate(startPath || '');
-        this.showStacked(this.$refs.fileBrowserModal);
-      },
-      fileBrowserClose() {
-        const modal = Modal.getInstance(this.$refs.fileBrowserModal);
-        if (modal) modal.hide();
-      },
-      fileBrowserConfirm() {
-        const path = this.fileBrowserSelectedPath || this.fileBrowserTypedPath;
-        if (path) {
-          if (this.fileBrowserCallback) {
-            this.fileBrowserCallback(path);
-            this.fileBrowserCallback = null;
-          }
-          this.fileBrowserClose();
-        }
-      },
-      fileBrowserNavigate(path) {
-        this.fileBrowserLoading = true;
-        this.fileBrowserError = '';
-        const params = new URLSearchParams({ type: this.fileBrowserType });
-        if (path) params.set('path', path);
-        fetch(`./api/browse?${params.toString()}`)
-          .then(r => r.ok ? r.json() : r.json().then(e => { throw new Error(e.error || 'Browse failed'); }))
-          .then(data => {
-            this.fileBrowserCurrentPath = data.path ?? '';
-            this.fileBrowserParentPath = data.parent ?? '';
-            this.fileBrowserEntries = data.entries ?? [];
-            this.fileBrowserTypedPath = data.path ?? '';
-            this.fileBrowserSelectedPath = this.fileBrowserType === 'directory' ? (data.path ?? '') : '';
-          })
-          .catch(err => { this.fileBrowserError = err.message; })
-          .finally(() => { this.fileBrowserLoading = false; });
-      },
-      fileBrowserNavigateUp() {
-        this.fileBrowserNavigate(this.fileBrowserParentPath);
-      },
-      fileBrowserSelectEntry(entry) {
-        if (entry.type === 'directory') {
-          this.fileBrowserNavigate(entry.path);
-        } else {
-          this.fileBrowserSelectedPath = entry.path;
-          this.fileBrowserTypedPath = entry.path;
-        }
-      },
-      fileBrowserActivateEntry(entry) {
-        if (entry.type === 'directory') {
-          this.fileBrowserNavigate(entry.path);
-        } else {
-          this.fileBrowserSelectedPath = entry.path;
-          this.fileBrowserTypedPath = entry.path;
-          this.fileBrowserConfirm();
-        }
-      },
-      fileBrowserOnTypedInput() {
-        this.fileBrowserSelectedPath = this.fileBrowserTypedPath;
-      },
-      browsePrep(index, field) {
-        const current = this.editForm['prep-cmd'][index][field] || '';
-        this.browseFor('executable', 'file_browser.select_executable', current, (path) => {
-          this.editForm['prep-cmd'][index][field] = path;
-        });
-      },
-      browseDetached(index) {
-        const current = this.editForm.detached[index] || '';
-        this.browseFor('executable', 'file_browser.select_executable', current, (path) => {
-          this.editForm.detached[index] = path;
-        });
-      },
-      save() {
-        this.editForm["image-path"] = this.editForm["image-path"].toString().replace(/"/g, '');
-        apiFetch("./api/apps", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(this.editForm),
-        }).then((r) => {
-          if (r.status === 200) document.location.reload();
-        });
-      },
-      handleImageError(event) {
-        // Hide the broken image and show placeholder instead
-        event.target.style.display = 'none';
-        const placeholder = event.target.nextElementSibling;
-        if (placeholder && placeholder.classList.contains('app-poster-placeholder')) {
-          placeholder.style.display = 'flex';
-        }
-      },
-      resetSearchQuery() {
-        this.searchQuery = "";
-      },
-      toggleSort() {
-        // Sorting goes default -> ascending -> descending -> default
-        if (this.sortMode === "default")
-          this.sortMode = "asc";
-        else if (this.sortMode === "asc")
-          this.sortMode = "desc";
-        else
-          this.sortMode = "default";
-      },
-      openEditModal() {
-        // Use $nextTick because if the edit version of the modal is created too early, it breaks...
-        this.$nextTick(() => {
-          Modal.getOrCreateInstance(this.$refs.editModal).show();
-        });
-      },
-      closeEditModal() {
-        const modal = Modal.getInstance(this.$refs.editModal);
-        if (modal) modal.hide();
-      },
-      // We need to update the z-index since bootstrap gives all modals the same z-index
-      // Fixes the stacking issue of modals (cover finder / file browser)
-      showStacked(modalEl) {
-        modalEl.addEventListener('show.bs.modal', () => {
-          const openCount = document.querySelectorAll('.modal.show').length;
-          const z = 1055 + (openCount + 1) * 20;
-          modalEl.style.zIndex = z;
-
-          requestAnimationFrame(() => {
-            const backdrops = document.querySelectorAll('.modal-backdrop');
-            const backdrop = backdrops[backdrops.length - 1];
-            if (backdrop) backdrop.style.zIndex = z - 10;
-          });
-        }, { once: true });
-        Modal.getOrCreateInstance(modalEl).show();
-      },
-    },
-  });
-
-
-  initApp(app);
-</script>

From 0357480aa94e84896d358ef9946e3bcbff4b1177 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 01:37:53 +0000
Subject: [PATCH 08/24] Migrate featured apps page

---
 .../common/assets/web/src/assets/sunshine.css |   3 +
 .../web/src/components/FeaturedAppCard.vue    | 233 ++++++++
 .../web/src/components/ScreenshotModal.vue    | 110 ++++
 .../assets/web/src/views/FeaturedView.vue     | 134 ++++-
 .../common/assets/web/src/views/featured.html | 498 ------------------
 5 files changed, 474 insertions(+), 504 deletions(-)
 create mode 100644 src_assets/common/assets/web/src/components/FeaturedAppCard.vue
 create mode 100644 src_assets/common/assets/web/src/components/ScreenshotModal.vue
 delete mode 100644 src_assets/common/assets/web/src/views/featured.html

diff --git a/src_assets/common/assets/web/src/assets/sunshine.css b/src_assets/common/assets/web/src/assets/sunshine.css
index 38d8ea23fd0..3cb492c12c6 100644
--- a/src_assets/common/assets/web/src/assets/sunshine.css
+++ b/src_assets/common/assets/web/src/assets/sunshine.css
@@ -2805,7 +2805,10 @@ p {
     right: var(--spacing-lg);
     z-index: 3;
     background: rgba(0, 0, 0, 0.5);
+    border: none;
     border-radius: 50%;
+    color: white;
+    cursor: pointer;
     padding: var(--spacing-sm);
     transition: background var(--transition-fast), transform var(--transition-fast);
 }
diff --git a/src_assets/common/assets/web/src/components/FeaturedAppCard.vue b/src_assets/common/assets/web/src/components/FeaturedAppCard.vue
new file mode 100644
index 00000000000..fc1b9480b5f
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/FeaturedAppCard.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="card h-100 featured-app-card">
+    <div class="card-body">
+      <div class="d-flex align-items-start mb-3">
+        <div class="featured-app-icon me-3">
+          <img v-if="app.icon" :src="app.icon + '?size=64'" :alt="app.name" class="rounded"
+            @error="handleIconError($event)" />
+          <div v-else class="featured-app-icon-placeholder">
+            <box :size="32" class="icon"></box>
+          </div>
+        </div>
+        <div class="flex-grow-1 min-w-0">
+          <h5 class="card-title mb-1">{{ app.name }}</h5>
+          <p class="text-muted small mb-0" v-if="app.tagline">{{ app.tagline }}</p>
+        </div>
+        <span v-if="app.official" class="badge bg-primary flex-shrink-0 ms-2">{{ $t('featured.official') }}</span>
+      </div>
+
+      <p class="card-text text-muted small mb-3">{{ app.description }}</p>
+
+      <!-- GitHub Metadata -->
+      <div v-if="app.github" class="github-stats mb-3 d-flex gap-3 text-muted small">
+        <span v-if="app.github.stars !== undefined" :title="$t('featured.github_stars')">
+          <star :size="14" class="icon" fill="currentColor"></star>
+          {{ formatNumber(app.github.stars) }}
+        </span>
+        <span v-if="app.github.forks !== undefined" :title="$t('featured.github_forks')">
+          <git-fork :size="14" class="icon"></git-fork>
+          {{ formatNumber(app.github.forks) }}
+        </span>
+        <span v-if="app.github.openIssues !== undefined" :title="$t('featured.github_issues')">
+          <circle-dot :size="14" class="icon"></circle-dot>
+          {{ formatNumber(app.github.openIssues) }}
+        </span>
+      </div>
+
+      <!-- Last Updated -->
+      <div v-if="app.github && app.github.lastUpdated" class="text-muted small mb-3">
+        <span :title="formatDate(app.github.lastUpdated).absolute">
+          {{ $t('featured.last_updated') }}: {{ formatDate(app.github.lastUpdated).relative }}
+        </span>
+      </div>
+
+      <!-- Screenshots Section -->
+      <div v-if="app.screenshots && app.screenshots.length > 0" class="screenshots-container mb-3">
+        <div class="screenshots-scroll">
+          <img v-for="(screenshot, index) in app.screenshots" :key="index" :src="screenshot"
+            :alt="app.name + ' screenshot ' + (index + 1)" class="screenshot-thumbnail"
+            @click="$emit('open-screenshot', screenshot, app.screenshots)" @error="handleScreenshotError" />
+        </div>
+      </div>
+
+      <!-- Platform Icons -->
+      <div class="mb-3">
+        <span class="badge bg-secondary me-1" v-for="platform in app.platforms" :key="platform">
+          <smartphone v-if="platform === 'android'" :size="14" class="icon"></smartphone>
+          <gamepad2 v-else-if="platform === 'console'" :size="14" class="icon"></gamepad2>
+          <gamepad v-else-if="platform === 'handheld'" :size="14" class="icon"></gamepad>
+          <smartphone v-else-if="platform === 'ios'" :size="14" class="icon"></smartphone>
+          <monitor v-else-if="platform === 'linux'" :size="14" class="icon"></monitor>
+          <monitor v-else-if="platform === 'macos'" :size="14" class="icon"></monitor>
+          <tv v-else-if="platform === 'tv'" :size="14" class="icon"></tv>
+          <globe v-else-if="platform === 'web'" :size="14" class="icon"></globe>
+          <monitor v-else-if="platform === 'windows'" :size="14" class="icon"></monitor>
+          {{ platformName(platform) }}
+        </span>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="d-flex gap-2 flex-wrap align-items-center">
+        <template v-if="app.downloads && app.downloads.length > 0">
+          <a v-for="(download, index) in app.downloads" :key="index" :href="download.url" target="_blank"
+            rel="noopener noreferrer"
+            :class="download.img ? 'flex-fill text-center d-inline-flex align-items-center justify-content-center' : 'btn btn-primary btn-sm flex-fill d-inline-flex align-items-center justify-content-center gap-1'">
+            <img v-if="download.img" :src="download.img" :alt="download.label"
+              :height="getDownloadHeight(download.img)" :style="getDownloadStyle(download.img)" />
+            <template v-else>
+              <simple-icon v-if="isGithubUrl(download.url)" icon="GitHub" :size="16" class="icon"></simple-icon>
+              <arrow-down-circle v-else :size="16" class="icon"></arrow-down-circle>
+              {{ download.label }}
+            </template>
+          </a>
+        </template>
+        <template v-else>
+          <a v-if="app.links && app.links.download" :href="app.links.download" target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-primary btn-sm flex-fill d-inline-flex align-items-center justify-content-center gap-1">
+            <arrow-down-circle :size="16" class="icon"></arrow-down-circle>
+            {{ $t('featured.get') }}
+          </a>
+        </template>
+        <a v-if="app.links && app.links.documentation" :href="app.links.documentation" target="_blank"
+          rel="noopener noreferrer"
+          class="btn btn-outline-primary btn-sm d-inline-flex align-items-center justify-content-center gap-1"
+          :title="$t('featured.documentation')">
+          <external-link :size="16" class="icon"></external-link>
+          {{ $t('featured.docs') }}
+        </a>
+        <a v-if="app.links && app.links.website" :href="app.links.website" target="_blank" rel="noopener noreferrer"
+          class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center justify-content-center"
+          :title="$t('featured.website')">
+          <external-link :size="16" class="icon"></external-link>
+        </a>
+        <a v-if="app.links && app.links.github" :href="app.links.github" target="_blank" rel="noopener noreferrer"
+          class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center justify-content-center"
+          :title="$t('featured.github')">
+          <simple-icon icon="GitHub" :size="16" class="icon"></simple-icon>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatDistanceToNow, format } from 'date-fns'
+import SimpleIcon from './SimpleIcon.vue'
+import {
+  ArrowDownCircle,
+  Box,
+  CircleDot,
+  ExternalLink,
+  Gamepad,
+  Gamepad2,
+  GitFork,
+  Globe,
+  Monitor,
+  Smartphone,
+  Star,
+  Tv,
+} from '@lucide/vue'
+
+export default {
+  components: {
+    SimpleIcon,
+    ArrowDownCircle,
+    Box,
+    CircleDot,
+    ExternalLink,
+    Gamepad,
+    Gamepad2,
+    GitFork,
+    Globe,
+    Monitor,
+    Smartphone,
+    Star,
+    Tv,
+  },
+  props: {
+    app: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['open-screenshot'],
+  methods: {
+    platformName(platform) {
+      const names = {
+        'android': 'Android',
+        'console': 'Console',
+        'handheld': 'Handheld',
+        'ios': 'iOS',
+        'linux': 'Linux',
+        'macos': 'macOS',
+        'tv': 'TV',
+        'web': 'Web',
+        'windows': 'Windows',
+      };
+      return names[platform] || platform;
+    },
+    handleIconError(event) {
+      // Hide broken icon and show placeholder
+      event.target.style.display = 'none';
+    },
+    handleScreenshotError(event) {
+      event.target.style.display = 'none';
+    },
+    formatNumber(num) {
+      if (num === undefined || num === null) return '0';
+
+      const absNum = Math.abs(num);
+
+      if (absNum >= 1000000000) {
+        return (num / 1000000000).toFixed(1) + 'B';
+      } else if (absNum >= 1000000) {
+        return (num / 1000000).toFixed(1) + 'M';
+      } else if (absNum >= 1000) {
+        return (num / 1000).toFixed(1) + 'k';
+      }
+
+      return num.toString();
+    },
+    formatDate(dateString) {
+      if (!dateString) return { relative: '', absolute: '' };
+
+      const date = new Date(dateString);
+
+      // Format absolute date like GitHub: "Jan 28, 2026, 1:52 PM UTC"
+      const absolute = format(date, 'MMM d, yyyy, h:mm a zzz');
+
+      // Use date-fns to get relative time like "2 days ago"
+      const relative = formatDistanceToNow(date, { addSuffix: true });
+
+      return { relative, absolute };
+    },
+    getDownloadHeight(img) {
+      if (!img) return '40';
+      let imgHost = '';
+      try { imgHost = new URL(img).hostname; } catch (e) {}
+      if (imgHost === 'play.google.com' || imgHost.endsWith('.ssl-images-amazon.com') || imgHost === 'fdroid.gitlab.io') {
+        return '60';
+      }
+      return '40';
+    },
+    getDownloadStyle(img) {
+      if (!img) return '';
+      let imgHost = '';
+      try { imgHost = new URL(img).hostname; } catch (e) {}
+      if (imgHost.endsWith('.ssl-images-amazon.com')) {
+        return 'padding: 10px;';
+      }
+      return '';
+    },
+    isGithubUrl(url) {
+      if (!url) return false;
+      try {
+        return new URL(url).hostname === 'github.com';
+      } catch (e) {
+        return false;
+      }
+    }
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/ScreenshotModal.vue b/src_assets/common/assets/web/src/components/ScreenshotModal.vue
new file mode 100644
index 00000000000..361f6e548d6
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/ScreenshotModal.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="screenshot-modal" @click="close" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
+    <div class="screenshot-modal-content">
+      <button type="button" class="screenshot-close" @click="close" aria-label="Close">
+        <x :size="20"></x>
+      </button>
+
+      <!-- Previous Button -->
+      <button v-if="screenshots.length > 1" type="button" class="screenshot-nav screenshot-nav-prev" @click.stop="prev"
+        aria-label="Previous screenshot">
+        <chevron-left :size="32"></chevron-left>
+      </button>
+
+      <!-- Next Button -->
+      <button v-if="screenshots.length > 1" type="button" class="screenshot-nav screenshot-nav-next" @click.stop="next"
+        aria-label="Next screenshot">
+        <chevron-right :size="32"></chevron-right>
+      </button>
+
+      <!-- Screenshot Counter -->
+      <div v-if="screenshots.length > 1" class="screenshot-counter">
+        {{ index + 1 }} / {{ screenshots.length }}
+      </div>
+
+      <img :src="screenshots[index]" alt="Screenshot" @click.stop />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ChevronLeft, ChevronRight, X } from '@lucide/vue'
+
+export default {
+  components: {
+    ChevronLeft,
+    ChevronRight,
+    X,
+  },
+  props: {
+    screenshots: {
+      type: Array,
+      required: true
+    },
+    startIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['close'],
+  data() {
+    return {
+      index: this.startIndex,
+      touchStartX: 0,
+      touchEndX: 0,
+    };
+  },
+  mounted() {
+    window.addEventListener('keydown', this.handleKeydown);
+  },
+  beforeUnmount() {
+    window.removeEventListener('keydown', this.handleKeydown);
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    next() {
+      if (this.screenshots.length === 0) return;
+      this.index = (this.index + 1) % this.screenshots.length;
+    },
+    prev() {
+      if (this.screenshots.length === 0) return;
+      this.index = (this.index - 1 + this.screenshots.length) % this.screenshots.length;
+    },
+    handleKeydown(event) {
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        this.next();
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        this.prev();
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
+        this.close();
+      }
+    },
+    handleTouchStart(event) {
+      this.touchStartX = event.changedTouches[0].screenX;
+    },
+    handleTouchEnd(event) {
+      this.touchEndX = event.changedTouches[0].screenX;
+      this.handleSwipe();
+    },
+    handleSwipe() {
+      const swipeThreshold = 50;
+      const diff = this.touchStartX - this.touchEndX;
+
+      if (Math.abs(diff) > swipeThreshold) {
+        if (diff > 0) {
+          // Swiped left, show next
+          this.next();
+        } else {
+          // Swiped right, show previous
+          this.prev();
+        }
+      }
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/FeaturedView.vue b/src_assets/common/assets/web/src/views/FeaturedView.vue
index 56888ab8e97..157e8999a79 100644
--- a/src_assets/common/assets/web/src/views/FeaturedView.vue
+++ b/src_assets/common/assets/web/src/views/FeaturedView.vue
@@ -1,8 +1,130 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Featured</h1>
-  <p>TODO: migrate content from src/views/featured.html</p>
+  <div class="my-4">
+    <h1>{{ $t('featured.title') }}</h1>
+    <p>{{ $t('featured.description') }}</p>
+  </div>
+
+  <!-- Category Filter -->
+  <div class="toolbar mb-4">
+    <div class="btn-group" role="group" aria-label="Category filter">
+      <button type="button" class="btn btn-outline-primary" :class="{ active: selectedCategory === null }"
+        @click="selectedCategory = null">
+        {{ $t('_common.all') }}
+      </button>
+      <button v-for="category in categories" :key="category.id" type="button" class="btn btn-outline-primary"
+        :class="{ active: selectedCategory === category.id }" @click="selectedCategory = category.id">
+        {{ $t(`featured.categories.${category.originalId}`) }}
+      </button>
+    </div>
+  </div>
+
+  <!-- Loading State -->
+  <div v-if="loading" class="text-center py-5">
+    <LoadingSpinner :label="$t('_common.loading')" />
+  </div>
+
+  <!-- Error State -->
+  <AlertBox v-else-if="error" variant="danger">
+    {{ $t('_common.error') }}
+    <template #body>
+      <p class="mb-0">{{ error }}</p>
+    </template>
+  </AlertBox>
+
+  <!-- Apps Grid -->
+  <div v-else class="row g-4">
+    <div v-for="app in filteredApps" :key="app.id" class="col-12 col-md-6 col-lg-4">
+      <FeaturedAppCard :app="app" @open-screenshot="openScreenshot" />
+    </div>
+  </div>
+
+  <!-- Empty State -->
+  <div v-if="!loading && !error && filteredApps.length === 0" class="text-center py-5">
+    <p class="text-muted">{{ $t('featured.no_apps') }}</p>
+  </div>
+
+  <!-- Screenshot Modal -->
+  <ScreenshotModal v-if="activeScreenshots" :screenshots="activeScreenshots" :start-index="activeScreenshotIndex"
+    @close="closeScreenshot" />
 </template>
+
+<script>
+import AlertBox from '../components/AlertBox.vue'
+import FeaturedAppCard from '../components/FeaturedAppCard.vue'
+import LoadingSpinner from '../components/LoadingSpinner.vue'
+import ScreenshotModal from '../components/ScreenshotModal.vue'
+
+export default {
+  components: {
+    AlertBox,
+    FeaturedAppCard,
+    LoadingSpinner,
+    ScreenshotModal,
+  },
+  data() {
+    return {
+      apps: [],
+      categories: [],
+      selectedCategory: null,
+      loading: true,
+      error: null,
+      activeScreenshots: null,
+      activeScreenshotIndex: 0,
+    };
+  },
+  computed: {
+    filteredApps() {
+      let filtered = this.selectedCategory
+        ? this.apps.filter(app => app.category === this.selectedCategory)
+        : this.apps;
+
+      // Sort by official status first, then by GitHub stars
+      return filtered.slice().sort((a, b) => {
+        // Official apps first
+        if (a.official && !b.official) return -1;
+        if (!a.official && b.official) return 1;
+
+        // Then sort by GitHub stars (descending)
+        const aStars = a.github?.stars || 0;
+        const bStars = b.github?.stars || 0;
+        return bStars - aStars;
+      });
+    }
+  },
+  created() {
+    this.loadFeaturedApps();
+  },
+  methods: {
+    async loadFeaturedApps() {
+      try {
+        this.loading = true;
+        this.error = null;
+
+        // Fetch the app directory for Sunshine
+        const indexUrl = 'https://app.lizardbyte.dev/app-directory/sunshine.json';
+
+        const response = await fetch(indexUrl);
+        if (!response.ok) {
+          throw new Error('Failed to load featured apps');
+        }
+
+        const data = await response.json();
+        this.apps = data.apps || [];
+        this.categories = data.categories || [];
+      } catch (err) {
+        console.error('Error loading featured apps:', err);
+        this.error = err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+    openScreenshot(url, screenshots) {
+      this.activeScreenshots = screenshots || [];
+      this.activeScreenshotIndex = this.activeScreenshots.indexOf(url);
+    },
+    closeScreenshot() {
+      this.activeScreenshots = null;
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/featured.html b/src_assets/common/assets/web/src/views/featured.html
deleted file mode 100644
index c927805960a..00000000000
--- a/src_assets/common/assets/web/src/views/featured.html
+++ /dev/null
@@ -1,498 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-      <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <div class="my-4">
-      <h1>{{ $t('featured.title') }}</h1>
-      <p>{{ $t('featured.description') }}</p>
-    </div>
-
-    <!-- Category Filter -->
-    <div class="toolbar mb-4">
-      <div class="btn-group" role="group" aria-label="Category filter">
-        <button
-          type="button"
-          class="btn btn-outline-primary"
-          :class="{ active: selectedCategory === null }"
-          @click="selectedCategory = null">
-          {{ $t('_common.all') }}
-        </button>
-        <button
-          v-for="category in categories"
-          :key="category.id"
-          type="button"
-          class="btn btn-outline-primary"
-          :class="{ active: selectedCategory === category.id }"
-          @click="selectedCategory = category.id">
-          {{ $t(`featured.categories.${category.originalId}`) }}
-        </button>
-      </div>
-    </div>
-
-    <!-- Loading State -->
-    <div v-if="loading" class="text-center py-5">
-      <div class="spinner-border" role="status">
-        <span class="visually-hidden">{{ $t('_common.loading') }}</span>
-      </div>
-    </div>
-
-    <!-- Error State -->
-    <div v-else-if="error" class="alert alert-danger" role="alert">
-      <h4 class="alert-heading">{{ $t('_common.error') }}</h4>
-      <p>{{ error }}</p>
-    </div>
-
-    <!-- Apps Grid -->
-    <div v-else class="row g-4">
-      <div
-        v-for="app in filteredApps"
-        :key="app.id"
-        class="col-12 col-md-6 col-lg-4">
-        <div class="card h-100 featured-app-card">
-          <div class="card-body">
-            <div class="d-flex align-items-start mb-3">
-              <div class="featured-app-icon me-3">
-                <img
-                  v-if="app.icon"
-                  :src="app.icon + '?size=64'"
-                  :alt="app.name"
-                  class="rounded"
-                  @error="handleIconError($event)"
-                />
-                <div v-else class="featured-app-icon-placeholder">
-                  <box :size="32" class="icon"></box>
-                </div>
-              </div>
-              <div class="flex-grow-1 min-w-0">
-                <h5 class="card-title mb-1">{{ app.name }}</h5>
-                <p class="text-muted small mb-0" v-if="app.tagline">{{ app.tagline }}</p>
-              </div>
-              <span v-if="app.official" class="badge bg-primary flex-shrink-0 ms-2">{{ $t('featured.official') }}</span>
-            </div>
-
-            <p class="card-text text-muted small mb-3">{{ app.description }}</p>
-
-            <!-- GitHub Metadata -->
-            <div v-if="app.github" class="github-stats mb-3 d-flex gap-3 text-muted small">
-              <span v-if="app.github.stars !== undefined" :title="$t('featured.github_stars')">
-                <star :size="14" class="icon" fill="currentColor"></star>
-                {{ formatNumber(app.github.stars) }}
-              </span>
-              <span v-if="app.github.forks !== undefined" :title="$t('featured.github_forks')">
-                <git-fork :size="14" class="icon"></git-fork>
-                {{ formatNumber(app.github.forks) }}
-              </span>
-              <span v-if="app.github.openIssues !== undefined" :title="$t('featured.github_issues')">
-                <circle-dot :size="14" class="icon"></circle-dot>
-                {{ formatNumber(app.github.openIssues) }}
-              </span>
-            </div>
-
-            <!-- Last Updated -->
-            <div v-if="app.github && app.github.lastUpdated" class="text-muted small mb-3">
-              <span :title="formatDate(app.github.lastUpdated).absolute">
-                {{ $t('featured.last_updated') }}: {{ formatDate(app.github.lastUpdated).relative }}
-              </span>
-            </div>
-
-            <!-- Screenshots Section -->
-            <div v-if="app.screenshots && app.screenshots.length > 0" class="screenshots-container mb-3">
-              <div class="screenshots-scroll">
-                <img
-                  v-for="(screenshot, index) in app.screenshots"
-                  :key="index"
-                  :src="screenshot"
-                  :alt="app.name + ' screenshot ' + (index + 1)"
-                  class="screenshot-thumbnail"
-                  @click="openScreenshot(screenshot, app.screenshots)"
-                  @error="handleScreenshotError"
-                />
-              </div>
-            </div>
-
-            <!-- Platform Icons -->
-            <div class="mb-3">
-              <span class="badge bg-secondary me-1" v-for="platform in app.platforms" :key="platform">
-                <smartphone v-if="platform === 'android'" :size="14" class="icon"></smartphone>
-                <gamepad2 v-else-if="platform === 'console'" :size="14" class="icon"></gamepad2>
-                <gamepad v-else-if="platform === 'handheld'" :size="14" class="icon"></gamepad>
-                <smartphone v-else-if="platform === 'ios'" :size="14" class="icon"></smartphone>
-                <monitor v-else-if="platform === 'linux'" :size="14" class="icon"></monitor>
-                <monitor v-else-if="platform === 'macos'" :size="14" class="icon"></monitor>
-                <tv v-else-if="platform === 'tv'" :size="14" class="icon"></tv>
-                <globe v-else-if="platform === 'web'" :size="14" class="icon"></globe>
-                <monitor v-else-if="platform === 'windows'" :size="14" class="icon"></monitor>
-                {{ platformName(platform) }}
-              </span>
-            </div>
-
-            <!-- Action Buttons -->
-            <div class="d-flex gap-2 flex-wrap align-items-center">
-              <template v-if="app.downloads && app.downloads.length > 0">
-                <a
-                  v-for="(download, index) in app.downloads"
-                  :key="index"
-                  :href="download.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  :class="download.img ? 'flex-fill text-center d-inline-flex align-items-center justify-content-center' : 'btn btn-primary btn-sm flex-fill d-inline-flex align-items-center justify-content-center gap-1'">
-
-                  <img v-if="download.img"
-                       :src="download.img"
-                       :alt="download.label"
-                       :height="getDownloadHeight(download.img)"
-                       :style="getDownloadStyle(download.img)" />
-
-                  <template v-else>
-                    <simple-icon v-if="isGithubUrl(download.url)" icon="GitHub" :size="16" class="icon"></simple-icon>
-                    <arrow-down-circle v-else :size="16" class="icon"></arrow-down-circle>
-                    {{ download.label }}
-                  </template>
-                </a>
-              </template>
-              <template v-else>
-                <a
-                  v-if="app.links && app.links.download"
-                  :href="app.links.download"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="btn btn-primary btn-sm flex-fill d-inline-flex align-items-center justify-content-center gap-1">
-                  <arrow-down-circle :size="16" class="icon"></arrow-down-circle>
-                  {{ $t('featured.get') }}
-                </a>
-              </template>
-              <a
-                v-if="app.links && app.links.documentation"
-                :href="app.links.documentation"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="btn btn-outline-primary btn-sm d-inline-flex align-items-center justify-content-center gap-1"
-                :title="$t('featured.documentation')">
-                <external-link :size="16" class="icon"></external-link>
-                {{ $t('featured.docs') }}
-              </a>
-              <a
-                v-if="app.links && app.links.website"
-                :href="app.links.website"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center justify-content-center"
-                :title="$t('featured.website')">
-                <external-link :size="16" class="icon"></external-link>
-              </a>
-              <a
-                v-if="app.links && app.links.github"
-                :href="app.links.github"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center justify-content-center"
-                :title="$t('featured.github')">
-                <simple-icon icon="GitHub" :size="16" class="icon"></simple-icon>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Empty State -->
-    <div v-if="!loading && !error && filteredApps.length === 0" class="text-center py-5">
-      <p class="text-muted">{{ $t('featured.no_apps') }}</p>
-    </div>
-
-    <!-- Screenshot Modal -->
-    <div
-      v-if="selectedScreenshot"
-      class="screenshot-modal"
-      @click="closeScreenshot"
-      @touchstart="handleTouchStart"
-      @touchend="handleTouchEnd">
-      <div class="screenshot-modal-content">
-        <button
-          type="button"
-          class="btn-close btn-close-white screenshot-close"
-          @click="closeScreenshot"
-          aria-label="Close"></button>
-
-        <!-- Previous Button -->
-        <button
-          v-if="currentAppScreenshots.length > 1"
-          type="button"
-          class="screenshot-nav screenshot-nav-prev"
-          @click.stop="prevScreenshot"
-          aria-label="Previous screenshot">
-          <chevron-left :size="32"></chevron-left>
-        </button>
-
-        <!-- Next Button -->
-        <button
-          v-if="currentAppScreenshots.length > 1"
-          type="button"
-          class="screenshot-nav screenshot-nav-next"
-          @click.stop="nextScreenshot"
-          aria-label="Next screenshot">
-          <chevron-right :size="32"></chevron-right>
-        </button>
-
-        <!-- Screenshot Counter -->
-        <div v-if="currentAppScreenshots.length > 1" class="screenshot-counter">
-          {{ selectedScreenshotIndex + 1 }} / {{ currentAppScreenshots.length }}
-        </div>
-
-        <img :src="selectedScreenshot" alt="Screenshot" @click.stop />
-      </div>
-    </div>
-  </div>
-</body>
-
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import SimpleIcon from './SimpleIcon.vue'
-  import { formatDistanceToNow, format } from 'date-fns'
-  import {
-    ArrowDownCircle,
-    Box,
-    ChevronLeft,
-    ChevronRight,
-    CircleDot,
-    ExternalLink,
-    Gamepad,
-    Gamepad2,
-    GitFork,
-    Globe,
-    Monitor,
-    Smartphone,
-    Star,
-    Tv,
-  } from '@lucide/vue'
-
-  const app = createApp({
-    components: {
-      Navbar,
-      SimpleIcon,
-      ArrowDownCircle,
-      Box,
-      ChevronLeft,
-      ChevronRight,
-      CircleDot,
-      ExternalLink,
-      Gamepad,
-      Gamepad2,
-      GitFork,
-      Globe,
-      Monitor,
-      Smartphone,
-      Star,
-      Tv,
-    },
-    data() {
-      return {
-        apps: [],
-        categories: [],
-        selectedCategory: null,
-        loading: true,
-        error: null,
-        selectedScreenshot: null,
-        selectedScreenshotIndex: -1,
-        currentAppScreenshots: [],
-        touchStartX: 0,
-        touchEndX: 0,
-      };
-    },
-    computed: {
-      filteredApps() {
-        let filtered = this.selectedCategory
-          ? this.apps.filter(app => app.category === this.selectedCategory)
-          : this.apps;
-
-        // Sort by official status first, then by GitHub stars
-        return filtered.slice().sort((a, b) => {
-          // Official apps first
-          if (a.official && !b.official) return -1;
-          if (!a.official && b.official) return 1;
-
-          // Then sort by GitHub stars (descending)
-          const aStars = a.github?.stars || 0;
-          const bStars = b.github?.stars || 0;
-          return bStars - aStars;
-        });
-      }
-    },
-    created() {
-      this.loadFeaturedApps();
-    },
-    mounted() {
-      window.addEventListener('keydown', this.handleKeydown);
-    },
-    beforeUnmount() {
-      window.removeEventListener('keydown', this.handleKeydown);
-    },
-    methods: {
-      async loadFeaturedApps() {
-        try {
-          this.loading = true;
-          this.error = null;
-
-          // Fetch the app directory for Sunshine
-          const indexUrl = 'https://app.lizardbyte.dev/app-directory/sunshine.json';
-
-          const response = await fetch(indexUrl);
-          if (!response.ok) {
-            throw new Error('Failed to load featured apps');
-          }
-
-          const data = await response.json();
-          this.apps = data.apps || [];
-          this.categories = data.categories || [];
-        } catch (err) {
-          console.error('Error loading featured apps:', err);
-          this.error = err.message;
-        } finally {
-          this.loading = false;
-        }
-      },
-      platformName(platform) {
-        const names = {
-          'android': 'Android',
-          'console': 'Console',
-          'handheld': 'Handheld',
-          'ios': 'iOS',
-          'linux': 'Linux',
-          'macos': 'macOS',
-          'tv': 'TV',
-          'web': 'Web',
-          'windows': 'Windows',
-        };
-        return names[platform] || platform;
-      },
-      handleIconError(event) {
-        // Hide broken icon and show placeholder
-        event.target.style.display = 'none';
-      },
-      openScreenshot(url, screenshots) {
-        this.currentAppScreenshots = screenshots || [];
-        this.selectedScreenshotIndex = this.currentAppScreenshots.indexOf(url);
-        this.selectedScreenshot = url;
-      },
-      closeScreenshot() {
-        this.selectedScreenshot = null;
-        this.selectedScreenshotIndex = -1;
-        this.currentAppScreenshots = [];
-      },
-      nextScreenshot() {
-        if (this.currentAppScreenshots.length === 0) return;
-        this.selectedScreenshotIndex = (this.selectedScreenshotIndex + 1) % this.currentAppScreenshots.length;
-        this.selectedScreenshot = this.currentAppScreenshots[this.selectedScreenshotIndex];
-      },
-      prevScreenshot() {
-        if (this.currentAppScreenshots.length === 0) return;
-        this.selectedScreenshotIndex = (this.selectedScreenshotIndex - 1 + this.currentAppScreenshots.length) % this.currentAppScreenshots.length;
-        this.selectedScreenshot = this.currentAppScreenshots[this.selectedScreenshotIndex];
-      },
-      handleKeydown(event) {
-        if (!this.selectedScreenshot) return;
-
-        if (event.key === 'ArrowRight') {
-          event.preventDefault();
-          this.nextScreenshot();
-        } else if (event.key === 'ArrowLeft') {
-          event.preventDefault();
-          this.prevScreenshot();
-        } else if (event.key === 'Escape') {
-          event.preventDefault();
-          this.closeScreenshot();
-        }
-      },
-      handleTouchStart(event) {
-        this.touchStartX = event.changedTouches[0].screenX;
-      },
-      handleTouchEnd(event) {
-        this.touchEndX = event.changedTouches[0].screenX;
-        this.handleSwipe();
-      },
-      handleSwipe() {
-        const swipeThreshold = 50;
-        const diff = this.touchStartX - this.touchEndX;
-
-        if (Math.abs(diff) > swipeThreshold) {
-          if (diff > 0) {
-            // Swiped left, show next
-            this.nextScreenshot();
-          } else {
-            // Swiped right, show previous
-            this.prevScreenshot();
-          }
-        }
-      },
-      handleScreenshotError(event) {
-        event.target.style.display = 'none';
-      },
-      formatNumber(num) {
-        if (num === undefined || num === null) return '0';
-
-        const absNum = Math.abs(num);
-
-        if (absNum >= 1000000000) {
-          return (num / 1000000000).toFixed(1) + 'B';
-        } else if (absNum >= 1000000) {
-          return (num / 1000000).toFixed(1) + 'M';
-        } else if (absNum >= 1000) {
-          return (num / 1000).toFixed(1) + 'k';
-        }
-
-        return num.toString();
-      },
-      formatDate(dateString) {
-        if (!dateString) return { relative: '', absolute: '' };
-
-        const date = new Date(dateString);
-
-        // Format absolute date like GitHub: "Jan 28, 2026, 1:52 PM UTC"
-        const absolute = format(date, 'MMM d, yyyy, h:mm a zzz');
-
-        // Use date-fns to get relative time like "2 days ago"
-        const relative = formatDistanceToNow(date, { addSuffix: true });
-
-        return { relative, absolute };
-      },
-      getDownloadHeight(img) {
-        if (!img) return '40';
-        let imgHost = '';
-        try { imgHost = new URL(img).hostname; } catch (e) {}
-        if (imgHost === 'play.google.com' || imgHost.endsWith('.ssl-images-amazon.com') || imgHost === 'fdroid.gitlab.io') {
-            return '60';
-        }
-        return '40';
-      },
-      getDownloadStyle(img) {
-        if (!img) return '';
-        let imgHost = '';
-        try { imgHost = new URL(img).hostname; } catch (e) {}
-        if (imgHost.endsWith('.ssl-images-amazon.com')) {
-            return 'padding: 10px;';
-        }
-        return '';
-      },
-      isGithubUrl(url) {
-        if (!url) return false;
-        try {
-          return new URL(url).hostname === 'github.com';
-        } catch (e) {
-          return false;
-        }
-      }
-    },
-  });
-
-  initApp(app);
-</script>
-
-</html>

From 03283a2414754364a1a115cf5d6af0f00b402b8c Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 01:58:40 +0000
Subject: [PATCH 09/24] Update import to use @ paths

---
 src_assets/common/assets/web/src/App.vue       |  2 +-
 .../web/src/components/FeaturedAppCard.vue     |  2 +-
 .../assets/web/src/components/Layout.vue       |  4 ++--
 .../assets/web/src/components/Navbar.vue       |  2 +-
 .../assets/web/src/components/ResourceCard.vue |  2 +-
 .../assets/web/src/components/ThemeToggle.vue  |  2 +-
 .../src/components/configs/tabs/Advanced.vue   |  2 +-
 .../src/components/configs/tabs/AudioVideo.vue | 14 +++++++-------
 .../configs/tabs/ContainerEncoders.vue         | 14 +++++++-------
 .../src/components/configs/tabs/General.vue    |  2 +-
 .../web/src/components/configs/tabs/Inputs.vue |  4 ++--
 .../src/components/configs/tabs/Network.vue    |  2 +-
 .../tabs/audiovideo/AdapterNameSelector.vue    |  4 ++--
 .../tabs/audiovideo/DisplayDeviceOptions.vue   |  4 ++--
 .../tabs/audiovideo/DisplayModesSettings.vue   |  4 ++--
 .../tabs/audiovideo/DisplayOutputSelector.vue  |  4 ++--
 .../configs/tabs/encoders/AmdAmfEncoder.vue    |  2 +-
 .../tabs/encoders/IntelQuickSyncEncoder.vue    |  2 +-
 .../tabs/encoders/NvidiaNvencEncoder.vue       |  2 +-
 .../configs/tabs/encoders/VAAPIEncoder.vue     |  2 +-
 .../tabs/encoders/VideotoolboxEncoder.vue      |  2 +-
 src_assets/common/assets/web/src/main.js       |  6 +++---
 .../common/assets/web/src/router/index.js      | 18 +++++++++---------
 .../common/assets/web/src/utils/fetch_utils.js |  2 +-
 src_assets/common/assets/web/src/utils/init.js |  2 +-
 .../common/assets/web/src/views/AppsView.vue   | 12 ++++++------
 .../assets/web/src/views/FeaturedView.vue      |  8 ++++----
 .../common/assets/web/src/views/IndexView.vue  |  6 +++---
 .../common/assets/web/src/views/PinView.vue    |  4 ++--
 .../assets/web/src/views/WelcomeView.vue       |  8 ++++----
 30 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/src_assets/common/assets/web/src/App.vue b/src_assets/common/assets/web/src/App.vue
index be0a23fba65..5b3859d24c7 100644
--- a/src_assets/common/assets/web/src/App.vue
+++ b/src_assets/common/assets/web/src/App.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Layout from './components/Layout.vue'
+import Layout from '@/components/Layout.vue'
 
 export default {
   components: {
diff --git a/src_assets/common/assets/web/src/components/FeaturedAppCard.vue b/src_assets/common/assets/web/src/components/FeaturedAppCard.vue
index fc1b9480b5f..82aa89c2ce6 100644
--- a/src_assets/common/assets/web/src/components/FeaturedAppCard.vue
+++ b/src_assets/common/assets/web/src/components/FeaturedAppCard.vue
@@ -113,7 +113,7 @@
 
 <script>
 import { formatDistanceToNow, format } from 'date-fns'
-import SimpleIcon from './SimpleIcon.vue'
+import SimpleIcon from '@/components/SimpleIcon.vue'
 import {
   ArrowDownCircle,
   Box,
diff --git a/src_assets/common/assets/web/src/components/Layout.vue b/src_assets/common/assets/web/src/components/Layout.vue
index d5e63d89be8..163d4b4c23f 100644
--- a/src_assets/common/assets/web/src/components/Layout.vue
+++ b/src_assets/common/assets/web/src/components/Layout.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import Navbar from './Navbar.vue'
-import Notification from './Notification.vue'
+import Navbar from '@/components/Navbar.vue'
+import Notification from '@/components/Notification.vue'
 
 export default {
     components: {
diff --git a/src_assets/common/assets/web/src/components/Navbar.vue b/src_assets/common/assets/web/src/components/Navbar.vue
index 46008cc00c2..720ec4ed4c3 100644
--- a/src_assets/common/assets/web/src/components/Navbar.vue
+++ b/src_assets/common/assets/web/src/components/Navbar.vue
@@ -61,7 +61,7 @@
 
 <script>
 import { CircleUserRound, LogOut, Shield } from '@lucide/vue'
-import ThemeToggle from './ThemeToggle.vue'
+import ThemeToggle from '@/components/ThemeToggle.vue'
 
 export default {
   components: {
diff --git a/src_assets/common/assets/web/src/components/ResourceCard.vue b/src_assets/common/assets/web/src/components/ResourceCard.vue
index 581a9c07c7f..f69e9fbd6c5 100644
--- a/src_assets/common/assets/web/src/components/ResourceCard.vue
+++ b/src_assets/common/assets/web/src/components/ResourceCard.vue
@@ -50,7 +50,7 @@ import {
   FileText,
   Globe,
 } from '@lucide/vue'
-import SimpleIcon from './SimpleIcon.vue'
+import SimpleIcon from '@/components/SimpleIcon.vue'
 
 export default {
   props: {
diff --git a/src_assets/common/assets/web/src/components/ThemeToggle.vue b/src_assets/common/assets/web/src/components/ThemeToggle.vue
index 7f3f4e85fbe..f1a89f2c229 100644
--- a/src_assets/common/assets/web/src/components/ThemeToggle.vue
+++ b/src_assets/common/assets/web/src/components/ThemeToggle.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { loadAutoTheme, setupThemeToggleListener } from '../utils/theme'
+import { loadAutoTheme, setupThemeToggleListener } from '@/utils/theme'
 import { onMounted } from 'vue'
 import {
   CloudMoon,
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue b/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
index 108d2b3362d..02f8fbb32db 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import PlatformLayout from '../../PlatformLayout.vue'
+import PlatformLayout from '@/components/PlatformLayout.vue'
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
index cc6a88110b3..14d2bfdef94 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
@@ -1,12 +1,12 @@
 <script setup>
 import {ref} from 'vue'
-import {$tp} from '../../platform-i18n'
-import PlatformLayout from '../../PlatformLayout.vue'
-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";
+import {$tp} from '@/utils/platform-i18n'
+import PlatformLayout from '@/components/PlatformLayout.vue'
+import AdapterNameSelector from '@/components/configs/tabs/audiovideo/AdapterNameSelector.vue'
+import DisplayOutputSelector from '@/components/configs/tabs/audiovideo/DisplayOutputSelector.vue'
+import DisplayDeviceOptions from "@/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue";
+import DisplayModesSettings from "@/components/configs/tabs/audiovideo/DisplayModesSettings.vue";
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
index d8827ebd720..6346ddceea8 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
@@ -1,12 +1,12 @@
 <script setup>
 import { ref } from 'vue'
-import NvidiaNvencEncoder from './encoders/NvidiaNvencEncoder.vue'
-import IntelQuickSyncEncoder from './encoders/IntelQuickSyncEncoder.vue'
-import AmdAmfEncoder from './encoders/AmdAmfEncoder.vue'
-import VideotoolboxEncoder from './encoders/VideotoolboxEncoder.vue'
-import SoftwareEncoder from './encoders/SoftwareEncoder.vue'
-import VAAPIEncoder from './encoders/VAAPIEncoder.vue'
-import VulkanEncoder from './encoders/VulkanEncoder.vue'
+import NvidiaNvencEncoder from '@/components/configs/tabs/encoders/NvidiaNvencEncoder.vue'
+import IntelQuickSyncEncoder from '@/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue'
+import AmdAmfEncoder from '@/components/configs/tabs/encoders/AmdAmfEncoder.vue'
+import VideotoolboxEncoder from '@/components/configs/tabs/encoders/VideotoolboxEncoder.vue'
+import SoftwareEncoder from '@/components/configs/tabs/encoders/SoftwareEncoder.vue'
+import VAAPIEncoder from '@/components/configs/tabs/encoders/VAAPIEncoder.vue'
+import VulkanEncoder from '@/components/configs/tabs/encoders/VulkanEncoder.vue'
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/General.vue b/src_assets/common/assets/web/src/components/configs/tabs/General.vue
index c6498988022..aef1d73f5d4 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/General.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/General.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Checkbox from '../../Checkbox.vue'
+import Checkbox from '@/components/Checkbox.vue'
 import { ref } from 'vue'
 import {
   Play,
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue b/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
index 6e39b384550..5e869cc0457 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
-import PlatformLayout from '../../PlatformLayout.vue'
-import Checkbox from "../../Checkbox.vue";
+import PlatformLayout from '@/components/PlatformLayout.vue'
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/Network.vue b/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
index aff9555a978..f00ec6da6b3 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
@@ -4,7 +4,7 @@ import {
   Info,
   TriangleAlert,
 } from '@lucide/vue'
-import Checkbox from "../../Checkbox.vue";
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
index b1d2e2a8c2e..ef81f36586e 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
-import { $tp } from '../../../platform-i18n'
-import PlatformLayout from '../../../PlatformLayout.vue'
+import { $tp } from '@/utils/platform-i18n'
+import PlatformLayout from '@/components/PlatformLayout.vue'
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
index 4496badb96b..b186d3f05af 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { ref } from 'vue'
 import { Trash2 } from '@lucide/vue'
-import PlatformLayout from '../../../PlatformLayout.vue'
-import Checkbox from "../../../Checkbox.vue";
+import PlatformLayout from '@/components/PlatformLayout.vue'
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps({
   platform: String,
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
index 51b5b8c227c..9a1116b5a60 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
-import { $tp } from '../../../platform-i18n'
-import PlatformLayout from '../../../PlatformLayout.vue'
+import { $tp } from '@/utils/platform-i18n'
+import PlatformLayout from '@/components/PlatformLayout.vue'
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
index d001b079ba0..d49fb384431 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
-import { $tp } from '../../../platform-i18n'
-import PlatformLayout from '../../../PlatformLayout.vue'
+import { $tp } from '@/utils/platform-i18n'
+import PlatformLayout from '@/components/PlatformLayout.vue'
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
index de9d3f3a9cd..4a68233ce12 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import Checkbox from "../../../Checkbox.vue";
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
index 1a13beba054..474ad92a344 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import Checkbox from "../../../Checkbox.vue";
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
index 37873c1ddd3..94ab2d8a315 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import Checkbox from "../../../Checkbox.vue";
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
index df5a6b69404..91816a34ac9 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import Checkbox from "../../../Checkbox.vue";
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
index 084e5f1def0..fb37b2bd3d1 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import Checkbox from "../../../Checkbox.vue";
+import Checkbox from "@/components/Checkbox.vue";
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/src/main.js b/src_assets/common/assets/web/src/main.js
index 579bfb0f47b..bdeeeccb99d 100644
--- a/src_assets/common/assets/web/src/main.js
+++ b/src_assets/common/assets/web/src/main.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { initApp } from './utils/init'
+import App from '@/App.vue'
+import router from '@/router'
+import { initApp } from '@/utils/init'
 
 const app = createApp(App)
 
diff --git a/src_assets/common/assets/web/src/router/index.js b/src_assets/common/assets/web/src/router/index.js
index 46f8f46aaf6..157521ea3b0 100644
--- a/src_assets/common/assets/web/src/router/index.js
+++ b/src_assets/common/assets/web/src/router/index.js
@@ -9,54 +9,54 @@ const router = createRouter({
     {
       path: '/',
       name: 'index',
-      component: () => import('../views/IndexView.vue'),
+      component: () => import('@/views/IndexView.vue'),
       meta: { nav: { icon: Home, label: 'navbar.home' } },
     },
     {
       path: '/pin',
       name: 'pin',
-      component: () => import('../views/PinView.vue'),
+      component: () => import('@/views/PinView.vue'),
       meta: { nav: { icon: Lock, label: 'navbar.pin' } },
     },
     {
       path: '/apps',
       name: 'apps',
-      component: () => import('../views/AppsView.vue'),
+      component: () => import('@/views/AppsView.vue'),
       meta: { nav: { icon: Layers, label: 'navbar.applications' } },
     },
     {
       path: '/featured',
       name: 'featured',
-      component: () => import('../views/FeaturedView.vue'),
+      component: () => import('@/views/FeaturedView.vue'),
       meta: { nav: { icon: Star, label: 'navbar.featured' } },
     },
     {
       path: '/config',
       name: 'config',
-      component: () => import('../views/ConfigView.vue'),
+      component: () => import('@/views/ConfigView.vue'),
       meta: { nav: { icon: Settings, label: 'navbar.configuration' } },
     },
     {
       path: '/troubleshooting',
       name: 'troubleshooting',
-      component: () => import('../views/TroubleshootingView.vue'),
+      component: () => import('@/views/TroubleshootingView.vue'),
       meta: { nav: { icon: Info, label: 'navbar.troubleshoot' } },
     },
     {
       path: '/password',
       name: 'password',
-      component: () => import('../views/PasswordView.vue'),
+      component: () => import('@/views/PasswordView.vue'),
     },
     {
       path: '/logout',
       name: 'logout',
-      component: () => import('../views/LogoutView.vue'),
+      component: () => import('@/views/LogoutView.vue'),
       meta: { public: true },
     },
     {
       path: '/welcome',
       name: 'welcome',
-      component: () => import('../views/WelcomeView.vue'),
+      component: () => import('@/views/WelcomeView.vue'),
       meta: { public: true },
     },
   ],
diff --git a/src_assets/common/assets/web/src/utils/fetch_utils.js b/src_assets/common/assets/web/src/utils/fetch_utils.js
index dc4966e606a..a0ef8dde6a9 100644
--- a/src_assets/common/assets/web/src/utils/fetch_utils.js
+++ b/src_assets/common/assets/web/src/utils/fetch_utils.js
@@ -1,4 +1,4 @@
-import { notifyKey } from '../components/Notification.vue'
+import { notifyKey } from '@/components/Notification.vue'
 
 /**
  * The set of error messages that indicate a CSRF validation failure.
diff --git a/src_assets/common/assets/web/src/utils/init.js b/src_assets/common/assets/web/src/utils/init.js
index 36eaa96dbae..1383f160402 100644
--- a/src_assets/common/assets/web/src/utils/init.js
+++ b/src_assets/common/assets/web/src/utils/init.js
@@ -1,4 +1,4 @@
-import i18n from './locale'
+import i18n from '@/utils/locale'
 
 import 'bootstrap/dist/css/bootstrap.min.css'
 // Load Sunshine.css after bootstrap to override some of the styles.
diff --git a/src_assets/common/assets/web/src/views/AppsView.vue b/src_assets/common/assets/web/src/views/AppsView.vue
index b87a00e5cd1..c5883d5eb48 100644
--- a/src_assets/common/assets/web/src/views/AppsView.vue
+++ b/src_assets/common/assets/web/src/views/AppsView.vue
@@ -465,12 +465,12 @@
 </template>
 
 <script>
-import Modal from '../components/Modal.vue'
-import FormGroup from '../components/FormGroup.vue'
-import LoadingSpinner from '../components/LoadingSpinner.vue'
-import Checkbox from '../components/Checkbox.vue'
-import { apiFetch } from '../utils/fetch_utils'
-import SunshineVersion from '../utils/sunshine_version'
+import Modal from '@/components/Modal.vue'
+import FormGroup from '@/components/FormGroup.vue'
+import LoadingSpinner from '@/components/LoadingSpinner.vue'
+import Checkbox from '@/components/Checkbox.vue'
+import { apiFetch } from '@/utils/fetch_utils'
+import SunshineVersion from '@/utils/sunshine_version'
 import {
   ArrowDown,
   ArrowRight,
diff --git a/src_assets/common/assets/web/src/views/FeaturedView.vue b/src_assets/common/assets/web/src/views/FeaturedView.vue
index 157e8999a79..f8e174a7c77 100644
--- a/src_assets/common/assets/web/src/views/FeaturedView.vue
+++ b/src_assets/common/assets/web/src/views/FeaturedView.vue
@@ -49,10 +49,10 @@
 </template>
 
 <script>
-import AlertBox from '../components/AlertBox.vue'
-import FeaturedAppCard from '../components/FeaturedAppCard.vue'
-import LoadingSpinner from '../components/LoadingSpinner.vue'
-import ScreenshotModal from '../components/ScreenshotModal.vue'
+import AlertBox from '@/components/AlertBox.vue'
+import FeaturedAppCard from '@/components/FeaturedAppCard.vue'
+import LoadingSpinner from '@/components/LoadingSpinner.vue'
+import ScreenshotModal from '@/components/ScreenshotModal.vue'
 
 export default {
   components: {
diff --git a/src_assets/common/assets/web/src/views/IndexView.vue b/src_assets/common/assets/web/src/views/IndexView.vue
index 6ff0597c59b..d23fa465c09 100644
--- a/src_assets/common/assets/web/src/views/IndexView.vue
+++ b/src_assets/common/assets/web/src/views/IndexView.vue
@@ -114,9 +114,9 @@
 
 <script>
 import { marked } from 'marked'
-import AlertBox from '../components/AlertBox.vue'
-import ResourceCard from '../components/ResourceCard.vue'
-import SunshineVersion from '../utils/sunshine_version'
+import AlertBox from '@/components/AlertBox.vue'
+import ResourceCard from '@/components/ResourceCard.vue'
+import SunshineVersion from '@/utils/sunshine_version'
 import {
   AlertCircle,
   ChevronLeft,
diff --git a/src_assets/common/assets/web/src/views/PinView.vue b/src_assets/common/assets/web/src/views/PinView.vue
index a0e8f4d0a3d..ccf20d72e5f 100644
--- a/src_assets/common/assets/web/src/views/PinView.vue
+++ b/src_assets/common/assets/web/src/views/PinView.vue
@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import StatusAlert from '../components/StatusAlert.vue'
-import { apiFetch } from '../utils/fetch_utils'
+import StatusAlert from '@/components/StatusAlert.vue'
+import { apiFetch } from '@/utils/fetch_utils'
 import { Forward, Hash, Monitor } from '@lucide/vue'
 
 export default {
diff --git a/src_assets/common/assets/web/src/views/WelcomeView.vue b/src_assets/common/assets/web/src/views/WelcomeView.vue
index 02f5dc16a23..fa5e51a62b1 100644
--- a/src_assets/common/assets/web/src/views/WelcomeView.vue
+++ b/src_assets/common/assets/web/src/views/WelcomeView.vue
@@ -36,10 +36,10 @@
 </template>
 
 <script>
-import ResourceCard from '../components/ResourceCard.vue'
-import FormGroup from '../components/FormGroup.vue'
-import StatusAlert from '../components/StatusAlert.vue'
-import { apiFetch } from '../utils/fetch_utils'
+import ResourceCard from '@/components/ResourceCard.vue'
+import FormGroup from '@/components/FormGroup.vue'
+import StatusAlert from '@/components/StatusAlert.vue'
+import { apiFetch } from '@/utils/fetch_utils'
 import { LogIn } from '@lucide/vue'
 
 export default {

From 7fca88d162198243da0ec5a6e23a51522774dafd Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 01:59:13 +0000
Subject: [PATCH 10/24] Migrate Config page

---
 .../assets/web/src/views/ConfigView.vue       | 604 +++++++++++++++-
 .../common/assets/web/src/views/config.html   | 657 ------------------
 2 files changed, 598 insertions(+), 663 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/config.html

diff --git a/src_assets/common/assets/web/src/views/ConfigView.vue b/src_assets/common/assets/web/src/views/ConfigView.vue
index dff195a4dfe..51d333c0fc4 100644
--- a/src_assets/common/assets/web/src/views/ConfigView.vue
+++ b/src_assets/common/assets/web/src/views/ConfigView.vue
@@ -1,8 +1,600 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Config</h1>
-  <p>TODO: migrate content from src/views/config.html</p>
+  <div class="my-4">
+    <h1>{{ $t('config.configuration') }}</h1>
+    <p>{{ $t('config.configuration_desc') }}</p>
+  </div>
+
+  <!-- Search Bar with Autocomplete -->
+  <div class="toolbar mb-3 d-flex flex-wrap align-items-center gap-3">
+    <div class="input-group config-search">
+      <span class="input-group-text">
+        <search :size="18" class="icon"></search>
+      </span>
+      <input type="text" class="form-control" v-model="searchQuery" :placeholder="$t('config.search_options')"
+        @input="handleSearch" list="config-options" />
+    </div>
+    <datalist id="config-options">
+      <option v-for="option in allConfigOptions" :key="option.key" :value="option.label">
+        {{ option.tab }} - {{ option.label }}
+      </option>
+    </datalist>
+    <span v-if="searchQuery && searchResults.length === 0" class="text-muted small flex-shrink-0">
+      No results found for "{{ searchQuery }}"
+    </span>
+    <span v-else-if="searchQuery" class="text-muted small flex-shrink-0">
+      Found {{ searchResults.length }} result(s)
+    </span>
+  </div>
+
+  <div class="form" v-if="config">
+    <div class="config-layout">
+      <!-- Sidebar navigation -->
+      <nav class="config-nav">
+        <ul class="nav config-nav-list">
+          <li class="nav-item" v-for="tab in generalTabs" :key="tab.id">
+            <a class="nav-link" :class="{ active: tab.id === currentTab }" href="#" @click="currentTab = tab.id">
+              <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+              {{ tab.name }}
+            </a>
+          </li>
+        </ul>
+        <template v-if="encoderTabs.length">
+          <div class="config-nav-heading">{{ $t('config.encoders') }}</div>
+          <ul class="nav config-nav-list">
+            <li class="nav-item" v-for="tab in encoderTabs" :key="tab.id">
+              <a class="nav-link" :class="{ active: tab.id === currentTab }" href="#" @click="currentTab = tab.id">
+                <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                {{ tab.name }}
+              </a>
+            </li>
+          </ul>
+        </template>
+
+        <div class="config-actions">
+          <button class="btn btn-primary" @click="save">
+            <save :size="18" class="icon"></save>
+            {{ $t('_common.save') }}
+          </button>
+          <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
+            <check :size="18" class="icon"></check>
+            {{ $t('_common.apply') }}
+          </button>
+        </div>
+      </nav>
+
+      <!-- Tab content -->
+      <div class="config-content">
+        <StatusAlert v-if="saved && !restarted" success :success-message="$t('config.apply_note')" alert-class="mb-4" />
+        <StatusAlert v-if="restarted" success :success-message="$t('config.restart_note')" alert-class="mb-4" />
+
+        <!-- General Tab -->
+        <general v-if="currentTab === 'general'" :config="config" :platform="platform"></general>
+
+        <!-- Input Tab -->
+        <inputs v-if="currentTab === 'input'" :config="config" :platform="platform"></inputs>
+
+        <!-- Audio/Video Tab -->
+        <audio-video v-if="currentTab === 'av'" :config="config" :platform="platform"></audio-video>
+
+        <!-- Network Tab -->
+        <network v-if="currentTab === 'network'" :config="config" :platform="platform"></network>
+
+        <!-- Files Tab -->
+        <files v-if="currentTab === 'files'" :config="config" :platform="platform"></files>
+
+        <!-- Advanced Tab -->
+        <advanced v-if="currentTab === 'advanced'" :config="config" :platform="platform"></advanced>
+
+        <container-encoders :current-tab="currentTab" :config="config" :platform="platform"></container-encoders>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import { computed } from 'vue'
+import General from '@/components/configs/tabs/General.vue'
+import Inputs from '@/components/configs/tabs/Inputs.vue'
+import Network from '@/components/configs/tabs/Network.vue'
+import Files from '@/components/configs/tabs/Files.vue'
+import Advanced from '@/components/configs/tabs/Advanced.vue'
+import AudioVideo from '@/components/configs/tabs/AudioVideo.vue'
+import ContainerEncoders from '@/components/configs/tabs/ContainerEncoders.vue'
+import StatusAlert from '@/components/StatusAlert.vue'
+import { apiFetch } from '@/utils/fetch_utils'
+import {
+  Check,
+  Cpu,
+  FileCog,
+  Gamepad2,
+  Gpu,
+  Network as NetworkIcon,
+  Save,
+  Search,
+  Settings,
+  Sliders,
+  Volume2,
+} from '@lucide/vue'
+
+const ENCODER_TAB_IDS = new Set(["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"]);
+
+export default {
+  components: {
+    General,
+    Inputs,
+    Network,
+    Files,
+    Advanced,
+    // They will be accessible via audio-video, container-encoders only.
+    AudioVideo,
+    ContainerEncoders,
+    StatusAlert,
+    // icons
+    Cpu,
+    Check,
+    FileCog,
+    Gamepad2,
+    Gpu,
+    NetworkIcon,
+    Save,
+    Search,
+    Settings,
+    Sliders,
+    Volume2,
+  },
+  data() {
+    return {
+      platform: "",
+      saved: false,
+      restarted: false,
+      config: null,
+      currentTab: "general",
+      searchQuery: "",
+      tabs: [ // TODO: Move the options to each Component instead, encapsulate.
+        {
+          id: "general",
+          name: "General",
+          options: {
+            "locale": "en",
+            "sunshine_name": "",
+            "min_log_level": 2,
+            "global_prep_cmd": [],
+            "notify_pre_releases": "disabled",
+            "system_tray": "enabled",
+          },
+        },
+        {
+          id: "input",
+          name: "Input",
+          options: {
+            "controller": "enabled",
+            "gamepad": "auto",
+            "ds4_back_as_touchpad_click": "enabled",
+            "motion_as_ds4": "enabled",
+            "touchpad_as_ds4": "enabled",
+            "virtualhid_randomize_mac": "enabled",
+            "back_button_timeout": -1,
+            "keyboard": "enabled",
+            "key_repeat_delay": 500,
+            "key_repeat_frequency": 24.9,
+            "always_send_scancodes": "enabled",
+            "key_rightalt_to_key_win": "disabled",
+            "mouse": "enabled",
+            "high_resolution_scrolling": "enabled",
+            "native_pen_touch": "enabled",
+            "keybindings": "[0x10,0xA0,0x11,0xA2,0x12,0xA4]",  // todo: add this to UI
+          },
+        },
+        {
+          id: "av",
+          name: "Audio/Video",
+          options: {
+            "audio_sink": "",
+            "virtual_sink": "",
+            "stream_audio": "enabled",
+            "install_steam_audio_drivers": "enabled",
+            "adapter_name": "",
+            "output_name": "",
+            "dd_configuration_option": "disabled",
+            "dd_resolution_option": "auto",
+            "dd_manual_resolution": "",
+            "dd_refresh_rate_option": "auto",
+            "dd_manual_refresh_rate": "",
+            "dd_hdr_option": "auto",
+            "dd_wa_hdr_toggle_delay": 0,
+            "dd_config_revert_delay": 3000,
+            "dd_config_revert_on_disconnect": "disabled",
+            "dd_mode_remapping": { "mixed": [], "resolution_only": [], "refresh_rate_only": [] },
+            "max_bitrate": 0,
+            "minimum_fps_target": 0
+          },
+        },
+        {
+          id: "network",
+          name: "Network",
+          options: {
+            "upnp": "disabled",
+            "address_family": "ipv4",
+            "bind_address": "",
+            "port": 47989,
+            "origin_web_ui_allowed": "lan",
+            "csrf_allowed_origins": "",
+            "external_ip": "",
+            "lan_encryption_mode": 0,
+            "wan_encryption_mode": 1,
+            "ping_timeout": 10000,
+            "packetsize": 0,
+          },
+        },
+        {
+          id: "files",
+          name: "Config Files",
+          options: {
+            "file_apps": "",
+            "credentials_file": "",
+            "log_path": "",
+            "pkey": "",
+            "cert": "",
+            "file_state": "",
+          },
+        },
+        {
+          id: "advanced",
+          name: "Advanced",
+          options: {
+            "fec_percentage": 20,
+            "qp": 28,
+            "min_threads": 2,
+            "hevc_mode": 0,
+            "av1_mode": 0,
+            "capture": "",
+            "encoder": "",
+          },
+        },
+        {
+          id: "nv",
+          name: "NVIDIA NVENC Encoder",
+          options: {
+            "nvenc_preset": 1,
+            "nvenc_twopass": "quarter_res",
+            "nvenc_spatial_aq": "disabled",
+            "nvenc_vbv_increase": 0,
+            "nvenc_realtime_hags": "enabled",
+            "nvenc_split_encode": "driver_decides",
+            "nvenc_latency_over_power": "enabled",
+            "nvenc_opengl_vulkan_on_dxgi": "enabled",
+            "nvenc_h264_cavlc": "disabled",
+          },
+        },
+        {
+          id: "qsv",
+          name: "Intel QuickSync Encoder",
+          options: {
+            "qsv_preset": "medium",
+            "qsv_coder": "auto",
+            "qsv_slow_hevc": "disabled",
+          },
+        },
+        {
+          id: "amd",
+          name: "AMD AMF Encoder",
+          options: {
+            "amd_usage": "ultralowlatency",
+            "amd_rc": "vbr_latency",
+            "amd_enforce_hrd": "disabled",
+            "amd_max_au_size": "",
+            "amd_quality": "balanced",
+            "amd_preanalysis": "disabled",
+            "amd_vbaq": "enabled",
+            "amd_coder": "auto",
+          },
+        },
+        {
+          id: "vt",
+          name: "VideoToolbox Encoder",
+          options: {
+            "vt_coder": "auto",
+            "vt_software": "auto",
+            "vt_realtime": "enabled",
+          },
+        },
+        {
+          id: "vaapi",
+          name: "VA-API Encoder",
+          options: {
+            "vaapi_blbrc": "disabled",
+            "vaapi_quality": "auto",
+            "vaapi_rc": "auto",
+            "vaapi_strict_rc_buffer": "disabled",
+          },
+        },
+        {
+          id: "vulkan",
+          name: "Vulkan Encoder",
+          options: {
+            "vk_tune": 2,
+            "vk_rc_mode": 2,
+          },
+        },
+        {
+          id: "sw",
+          name: "Software Encoder",
+          options: {
+            "sw_preset": "superfast",
+            "sw_tune": "zerolatency",
+          },
+        },
+      ],
+    };
+  },
+  provide() {
+    return {
+      platform: computed(() => this.platform),
+      searchQuery: computed(() => this.searchQuery),
+    }
+  },
+  computed: {
+    generalTabs() {
+      return this.tabs.filter(tab => !ENCODER_TAB_IDS.has(tab.id));
+    },
+    encoderTabs() {
+      return this.tabs.filter(tab => ENCODER_TAB_IDS.has(tab.id));
+    },
+    allConfigOptions() {
+      const options = [];
+      this.tabs.forEach(tab => {
+        Object.keys(tab.options).forEach(key => {
+          options.push({
+            key: key,
+            label: key.replaceAll('_', ' ').replaceAll(/\b\w/g, l => l.toUpperCase()),
+            tab: tab.name,
+            tabId: tab.id
+          });
+        });
+      });
+      return options;
+    },
+    searchResults() {
+      if (!this.searchQuery) return [];
+      const query = this.searchQuery.toLowerCase();
+      return this.allConfigOptions.filter(option =>
+        option.key.toLowerCase().includes(query) ||
+        option.label.toLowerCase().includes(query)
+      );
+    }
+  },
+  created() {
+    fetch("./api/config")
+      .then((r) => r.json())
+      .then((r) => {
+        this.config = r;
+        this.platform = this.config.platform;
+
+        var app = document.getElementById("app");
+        if (this.platform === "windows") {
+          this.tabs = this.tabs.filter((el) => {
+            return el.id !== "vt" && el.id !== "vaapi" && el.id !== "vulkan";
+          });
+        }
+        if (this.platform === "freebsd" || this.platform === "linux") {
+          this.tabs = this.tabs.filter((el) => {
+            return el.id !== "amd" && el.id !== "qsv" && el.id !== "vt";
+          });
+        }
+        if (this.platform === "macos") {
+          this.tabs = this.tabs.filter((el) => {
+            return el.id !== "amd" && el.id !== "nv" && el.id !== "qsv" && el.id !== "vaapi" && el.id !== "vulkan";
+          });
+        }
+
+        // remove values we don't want in the config file
+        delete this.config.platform;
+        delete this.config.status;
+        delete this.config.version;
+
+        // TODO: let each tab's Component handle it's own data instead of doing it here
+
+        // Parse the special options before population if available
+        const specialOptions = ["dd_mode_remapping", "global_prep_cmd"]
+        for (const optionKey of specialOptions) {
+          if (this.config.hasOwnProperty(optionKey)) {
+            this.config[optionKey] = JSON.parse(this.config[optionKey]);
+          }
+        }
+
+        // Populate default values from tabs options
+        this.tabs.forEach(tab => {
+          Object.keys(tab.options).forEach(optionKey => {
+            if (this.config[optionKey] === undefined) {
+              // Make sure to copy by value
+              this.config[optionKey] = JSON.parse(JSON.stringify(tab.options[optionKey]));
+            }
+          });
+        });
+      });
+  },
+  methods: {
+    getTabIcon(tabId) {
+      const iconMap = {
+        'general': 'Settings',
+        'input': 'Gamepad2',
+        'av': 'Volume2',
+        'network': 'NetworkIcon',
+        'files': 'FileCog',
+        'advanced': 'Sliders',
+        'nv': 'Gpu',
+        'amd': 'Gpu',
+        'qsv': 'Gpu',
+        'vaapi': 'Gpu',
+        'vt': 'Gpu',
+        'vulkan': 'Gpu',
+        'sw': 'Cpu',
+      };
+      return iconMap[tabId] || 'Settings';
+    },
+    forceUpdate() {
+      this.$forceUpdate()
+    },
+    serialize() {
+      return JSON.parse(JSON.stringify(this.config));
+    },
+    save() {
+      this.saved = false;
+      this.restarted = false;
+
+      // create a temp copy of this.config to use for the post request
+      let config = this.serialize();
+
+      // delete default values from this.config
+      this.tabs.forEach(tab => {
+        Object.keys(tab.options).forEach(optionKey => {
+          let delete_value = false
+
+          // todo: add proper type checking
+          if (JSON.stringify(config[optionKey]) === JSON.stringify(tab.options[optionKey])) {
+            delete_value = true
+          }
+
+          if (delete_value) {
+            delete config[optionKey]
+          }
+        });
+      });
+
+      return apiFetch("./api/config", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(config),
+      }).then((r) => {
+        if (r.status === 200) {
+          this.saved = true
+          return this.saved
+        }
+        else {
+          return false
+        }
+      });
+    },
+    apply() {
+      this.saved = this.restarted = false;
+      let saved = this.save();
+
+      saved.then((result) => {
+        if (result === true) {
+          this.restarted = true;
+          setTimeout(() => {
+            this.saved = this.restarted = false;
+          }, 5000);
+          apiFetch("./api/restart", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            }
+          });
+        }
+      });
+    },
+    handleSearch() {
+      // Clear all highlighting
+      document.querySelectorAll('.config-search-highlight').forEach(el => {
+        el.classList.remove('config-search-highlight');
+      });
+
+      if (!this.searchQuery) {
+        // Show all form groups when search is cleared
+        document.querySelectorAll('.mb-3').forEach(el => {
+          el.style.display = '';
+        });
+        return;
+      }
+
+      const results = this.searchResults;
+
+      if (results.length === 0) {
+        return;
+      }
+
+      // Switch to the tab of the first result
+      if (results.length > 0 && results[0].tabId !== this.currentTab) {
+        this.currentTab = results[0].tabId;
+      }
+
+      // Wait for tab content to render
+      this.$nextTick(() => {
+        // Hide all form groups first
+        document.querySelectorAll('.config-page .mb-3').forEach(el => {
+          el.style.display = 'none';
+        });
+
+        // Show only matching elements
+        results.forEach(result => {
+          const element = document.getElementById(result.key);
+
+          if (element) {
+            // Show the element's container
+            const container = element.closest('.mb-3');
+            if (container) {
+              container.style.display = '';
+            }
+          }
+        });
+
+        // Scroll to and highlight the first result
+        if (results.length > 0) {
+          const firstElement = document.getElementById(results[0].key);
+          if (firstElement) {
+            const container = firstElement.closest('.mb-3');
+            if (container) {
+              container.scrollIntoView({ behavior: 'smooth', block: 'center' });
+              container.classList.add('config-search-highlight');
+              setTimeout(() => {
+                container.classList.remove('config-search-highlight');
+              }, 3000);
+            }
+          }
+        }
+      });
+    },
+  },
+  mounted() {
+    // Handle hashchange events
+    const handleHash = () => {
+      let hash = window.location.hash;
+      if (hash) {
+        // remove the # from the hash
+        let stripped_hash = hash.substring(1);
+
+        this.tabs.forEach(tab => {
+          Object.keys(tab.options).forEach(key => {
+            if (tab.id === stripped_hash || key === stripped_hash) {
+              this.currentTab = tab.id;
+            }
+            if (key === stripped_hash) {
+              // sleep for 2 seconds to allow the page to load
+              setTimeout(() => {
+                let element = document.getElementById(stripped_hash);
+                if (element) {
+                  window.location.hash = hash;
+                }
+              }, 2000);
+            }
+
+            if (this.currentTab === tab.id) {
+              // stop looping
+              return true;
+            }
+          });
+        });
+      }
+    };
+
+    // Call handleHash for the initial load
+    handleHash();
+
+    // Add hashchange event listener
+    window.addEventListener("hashchange", handleHash);
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/config.html b/src_assets/common/assets/web/src/views/config.html
deleted file mode 100644
index f8df1ae4d24..00000000000
--- a/src_assets/common/assets/web/src/views/config.html
+++ /dev/null
@@ -1,657 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <div class="my-4">
-      <h1>{{ $t('config.configuration') }}</h1>
-      <p>{{ $t('config.configuration_desc') }}</p>
-    </div>
-
-    <!-- Search Bar with Autocomplete -->
-    <div class="toolbar mb-3 d-flex flex-wrap align-items-center gap-3">
-      <div class="input-group config-search">
-        <span class="input-group-text">
-          <search :size="18" class="icon"></search>
-        </span>
-        <input
-          type="text"
-          class="form-control"
-          v-model="searchQuery"
-          :placeholder="$t('config.search_options')"
-          @input="handleSearch"
-          list="config-options"
-        />
-      </div>
-      <datalist id="config-options">
-        <option v-for="option in allConfigOptions" :key="option.key" :value="option.label">
-          {{ option.tab }} - {{ option.label }}
-        </option>
-      </datalist>
-      <span v-if="searchQuery && searchResults.length === 0" class="text-muted small flex-shrink-0">
-        No results found for "{{ searchQuery }}"
-      </span>
-      <span v-else-if="searchQuery" class="text-muted small flex-shrink-0">
-        Found {{ searchResults.length }} result(s)
-      </span>
-    </div>
-
-    <div class="form" v-if="config">
-      <div class="config-layout">
-        <!-- Sidebar navigation -->
-        <nav class="config-nav">
-          <ul class="nav config-nav-list">
-            <li class="nav-item" v-for="tab in generalTabs" :key="tab.id">
-              <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
-                @click="currentTab = tab.id">
-                <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
-                {{tab.name}}
-              </a>
-            </li>
-          </ul>
-          <template v-if="encoderTabs.length">
-            <div class="config-nav-heading">{{ $t('config.encoders') }}</div>
-            <ul class="nav config-nav-list">
-              <li class="nav-item" v-for="tab in encoderTabs" :key="tab.id">
-                <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
-                  @click="currentTab = tab.id">
-                  <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
-                  {{tab.name}}
-                </a>
-              </li>
-            </ul>
-          </template>
-
-          <div class="config-actions">
-            <button class="btn btn-primary" @click="save">
-              <save :size="18" class="icon"></save>
-              {{ $t('_common.save') }}
-            </button>
-            <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
-              <check :size="18" class="icon"></check>
-              {{ $t('_common.apply') }}
-            </button>
-          </div>
-        </nav>
-
-        <!-- Tab content -->
-        <div class="config-content">
-          <div class="alert alert-success mb-4" v-if="saved && !restarted">
-            <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
-          </div>
-          <div class="alert alert-success mb-4" v-if="restarted">
-            <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
-          </div>
-
-      <!-- General Tab -->
-      <general
-        v-if="currentTab === 'general'"
-        :config="config"
-        :platform="platform">
-      </general>
-
-      <!-- Input Tab -->
-      <inputs
-        v-if="currentTab === 'input'"
-        :config="config"
-        :platform="platform">
-      </inputs>
-
-      <!-- Audio/Video Tab -->
-      <audio-video
-        v-if="currentTab === 'av'"
-        :config="config"
-        :platform="platform"
-      >
-      </audio-video>
-
-      <!-- Network Tab -->
-      <network
-        v-if="currentTab === 'network'"
-        :config="config"
-        :platform="platform">
-      </network>
-
-      <!-- Files Tab -->
-      <files
-        v-if="currentTab === 'files'"
-        :config="config"
-        :platform="platform">
-      </files>
-
-      <!-- Advanced Tab -->
-      <advanced
-        v-if="currentTab === 'advanced'"
-        :config="config"
-        :platform="platform">
-      </advanced>
-
-      <container-encoders
-        :current-tab="currentTab"
-        :config="config"
-        :platform="platform">
-      </container-encoders>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</body>
-
-
-<script type="module">
-  import { computed, createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import { apiFetch } from './fetch_utils'
-  import General from './configs/tabs/General.vue'
-  import Inputs from './configs/tabs/Inputs.vue'
-  import Network from './configs/tabs/Network.vue'
-  import Files from './configs/tabs/Files.vue'
-  import Advanced from './configs/tabs/Advanced.vue'
-  import AudioVideo from './configs/tabs/AudioVideo.vue'
-  import ContainerEncoders from './configs/tabs/ContainerEncoders.vue'
-  import {$tp, usePlatformI18n} from './platform-i18n'
-  import {
-    Check,
-    Cpu,
-    FileCog,
-    Gamepad2,
-    Gpu,
-    Network as NetworkIcon,
-    Save,
-    Search,
-    Settings,
-    Sliders,
-    Volume2,
-  } from '@lucide/vue'
-
-  const ENCODER_TAB_IDS = new Set(["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"]);
-
-  const app = createApp({
-    components: {
-      Navbar,
-      General,
-      Inputs,
-      Network,
-      Files,
-      Advanced,
-      // They will be accessible via audio-video, container-encoders only.
-      AudioVideo,
-      ContainerEncoders,
-      // icons
-      Cpu,
-      Check,
-      FileCog,
-      Gamepad2,
-      Gpu,
-      NetworkIcon,
-      Save,
-      Search,
-      Settings,
-      Sliders,
-      Volume2,
-    },
-    data() {
-      return {
-        platform: "",
-        saved: false,
-        restarted: false,
-        config: null,
-        currentTab: "general",
-        searchQuery: "",
-        tabs: [ // TODO: Move the options to each Component instead, encapsulate.
-          {
-            id: "general",
-            name: "General",
-            options: {
-              "locale": "en",
-              "sunshine_name": "",
-              "min_log_level": 2,
-              "global_prep_cmd": [],
-              "notify_pre_releases": "disabled",
-              "system_tray": "enabled",
-            },
-          },
-          {
-            id: "input",
-            name: "Input",
-            options: {
-              "controller": "enabled",
-              "gamepad": "auto",
-              "ds4_back_as_touchpad_click": "enabled",
-              "motion_as_ds4": "enabled",
-              "touchpad_as_ds4": "enabled",
-              "virtualhid_randomize_mac": "enabled",
-              "back_button_timeout": -1,
-              "keyboard": "enabled",
-              "key_repeat_delay": 500,
-              "key_repeat_frequency": 24.9,
-              "always_send_scancodes": "enabled",
-              "key_rightalt_to_key_win": "disabled",
-              "mouse": "enabled",
-              "high_resolution_scrolling": "enabled",
-              "native_pen_touch": "enabled",
-              "keybindings": "[0x10,0xA0,0x11,0xA2,0x12,0xA4]",  // todo: add this to UI
-            },
-          },
-          {
-            id: "av",
-            name: "Audio/Video",
-            options: {
-              "audio_sink": "",
-              "virtual_sink": "",
-              "stream_audio": "enabled",
-              "install_steam_audio_drivers": "enabled",
-              "adapter_name": "",
-              "output_name": "",
-              "dd_configuration_option": "disabled",
-              "dd_resolution_option": "auto",
-              "dd_manual_resolution": "",
-              "dd_refresh_rate_option": "auto",
-              "dd_manual_refresh_rate": "",
-              "dd_hdr_option": "auto",
-              "dd_wa_hdr_toggle_delay": 0,
-              "dd_config_revert_delay": 3000,
-              "dd_config_revert_on_disconnect": "disabled",
-              "dd_mode_remapping": {"mixed": [], "resolution_only": [], "refresh_rate_only": []},
-              "max_bitrate": 0,
-              "minimum_fps_target": 0
-            },
-          },
-          {
-            id: "network",
-            name: "Network",
-            options: {
-              "upnp": "disabled",
-              "address_family": "ipv4",
-              "bind_address": "",
-              "port": 47989,
-              "origin_web_ui_allowed": "lan",
-              "csrf_allowed_origins": "",
-              "external_ip": "",
-              "lan_encryption_mode": 0,
-              "wan_encryption_mode": 1,
-              "ping_timeout": 10000,
-              "packetsize": 0,
-            },
-          },
-          {
-            id: "files",
-            name: "Config Files",
-            options: {
-              "file_apps": "",
-              "credentials_file": "",
-              "log_path": "",
-              "pkey": "",
-              "cert": "",
-              "file_state": "",
-            },
-          },
-          {
-            id: "advanced",
-            name: "Advanced",
-            options: {
-              "fec_percentage": 20,
-              "qp": 28,
-              "min_threads": 2,
-              "hevc_mode": 0,
-              "av1_mode": 0,
-              "capture": "",
-              "encoder": "",
-            },
-          },
-          {
-            id: "nv",
-            name: "NVIDIA NVENC Encoder",
-            options: {
-              "nvenc_preset": 1,
-              "nvenc_twopass": "quarter_res",
-              "nvenc_spatial_aq": "disabled",
-              "nvenc_vbv_increase": 0,
-              "nvenc_realtime_hags": "enabled",
-              "nvenc_split_encode": "driver_decides",
-              "nvenc_latency_over_power": "enabled",
-              "nvenc_opengl_vulkan_on_dxgi": "enabled",
-              "nvenc_h264_cavlc": "disabled",
-            },
-          },
-          {
-            id: "qsv",
-            name: "Intel QuickSync Encoder",
-            options: {
-              "qsv_preset": "medium",
-              "qsv_coder": "auto",
-              "qsv_slow_hevc": "disabled",
-            },
-          },
-          {
-            id: "amd",
-            name: "AMD AMF Encoder",
-            options: {
-              "amd_usage": "ultralowlatency",
-              "amd_rc": "vbr_latency",
-              "amd_enforce_hrd": "disabled",
-              "amd_max_au_size": "",
-              "amd_quality": "balanced",
-              "amd_preanalysis": "disabled",
-              "amd_vbaq": "enabled",
-              "amd_coder": "auto",
-            },
-          },
-          {
-            id: "vt",
-            name: "VideoToolbox Encoder",
-            options: {
-              "vt_coder": "auto",
-              "vt_software": "auto",
-              "vt_realtime": "enabled",
-            },
-          },
-          {
-            id: "vaapi",
-            name: "VA-API Encoder",
-            options: {
-              "vaapi_blbrc": "disabled",
-              "vaapi_quality": "auto",
-              "vaapi_rc": "auto",
-              "vaapi_strict_rc_buffer": "disabled",
-            },
-          },
-          {
-            id: "vulkan",
-            name: "Vulkan Encoder",
-            options: {
-              "vk_tune": 2,
-              "vk_rc_mode": 2,
-            },
-          },
-          {
-            id: "sw",
-            name: "Software Encoder",
-            options: {
-              "sw_preset": "superfast",
-              "sw_tune": "zerolatency",
-            },
-          },
-        ],
-      };
-    },
-    provide() {
-       return {
-         platform: computed(() => this.platform),
-         searchQuery: computed(() => this.searchQuery),
-       }
-    },
-    computed: {
-      generalTabs() {
-        return this.tabs.filter(tab => !ENCODER_TAB_IDS.has(tab.id));
-      },
-      encoderTabs() {
-        return this.tabs.filter(tab => ENCODER_TAB_IDS.has(tab.id));
-      },
-      allConfigOptions() {
-        const options = [];
-        this.tabs.forEach(tab => {
-          Object.keys(tab.options).forEach(key => {
-            options.push({
-              key: key,
-              label: key.replaceAll('_', ' ').replaceAll(/\b\w/g, l => l.toUpperCase()),
-              tab: tab.name,
-              tabId: tab.id
-            });
-          });
-        });
-        return options;
-      },
-      searchResults() {
-        if (!this.searchQuery) return [];
-        const query = this.searchQuery.toLowerCase();
-        return this.allConfigOptions.filter(option =>
-          option.key.toLowerCase().includes(query) ||
-          option.label.toLowerCase().includes(query)
-        );
-      }
-    },
-    created() {
-      fetch("./api/config")
-        .then((r) => r.json())
-        .then((r) => {
-          this.config = r;
-          this.platform = this.config.platform;
-
-          var app = document.getElementById("app");
-          if (this.platform === "windows") {
-            this.tabs = this.tabs.filter((el) => {
-              return el.id !== "vt" && el.id !== "vaapi" && el.id !== "vulkan";
-            });
-          }
-          if (this.platform === "freebsd" || this.platform === "linux") {
-            this.tabs = this.tabs.filter((el) => {
-              return el.id !== "amd" && el.id !== "qsv" && el.id !== "vt";
-            });
-          }
-          if (this.platform === "macos") {
-            this.tabs = this.tabs.filter((el) => {
-              return el.id !== "amd" && el.id !== "nv" && el.id !== "qsv" && el.id !== "vaapi" && el.id !== "vulkan";
-            });
-          }
-
-          // remove values we don't want in the config file
-          delete this.config.platform;
-          delete this.config.status;
-          delete this.config.version;
-
-          // TODO: let each tab's Component handle it's own data instead of doing it here
-
-          // Parse the special options before population if available
-          const specialOptions = ["dd_mode_remapping", "global_prep_cmd"]
-          for (const optionKey of specialOptions) {
-            if (this.config.hasOwnProperty(optionKey)) {
-              this.config[optionKey] = JSON.parse(this.config[optionKey]);
-            }
-          }
-
-          // Populate default values from tabs options
-          this.tabs.forEach(tab => {
-            Object.keys(tab.options).forEach(optionKey => {
-              if (this.config[optionKey] === undefined) {
-                // Make sure to copy by value
-                this.config[optionKey] = JSON.parse(JSON.stringify(tab.options[optionKey]));
-              }
-            });
-          });
-        });
-    },
-    methods: {
-      getTabIcon(tabId) {
-        const iconMap = {
-          'general': 'Settings',
-          'input': 'Gamepad2',
-          'av': 'Volume2',
-          'network': 'NetworkIcon',
-          'files': 'FileCog',
-          'advanced': 'Sliders',
-          'nv': 'Gpu',
-          'amd': 'Gpu',
-          'qsv': 'Gpu',
-          'vaapi': 'Gpu',
-          'vt': 'Gpu',
-          'vulkan': 'Gpu',
-          'sw': 'Cpu',
-        };
-        return iconMap[tabId] || 'Settings';
-      },
-      forceUpdate() {
-        this.$forceUpdate()
-      },
-      serialize() {
-        return JSON.parse(JSON.stringify(this.config));
-      },
-      save() {
-        this.saved = false;
-        this.restarted = false;
-
-        // create a temp copy of this.config to use for the post request
-        let config = this.serialize();
-
-        // delete default values from this.config
-        this.tabs.forEach(tab => {
-          Object.keys(tab.options).forEach(optionKey => {
-            let delete_value = false
-
-            // todo: add proper type checking
-            if (JSON.stringify(config[optionKey]) === JSON.stringify(tab.options[optionKey])) {
-              delete_value = true
-            }
-
-            if (delete_value) {
-              delete config[optionKey]
-            }
-          });
-        });
-
-        return apiFetch("./api/config", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(config),
-        }).then((r) => {
-          if (r.status === 200) {
-            this.saved = true
-            return this.saved
-          }
-          else {
-            return false
-          }
-        });
-      },
-      apply() {
-        this.saved = this.restarted = false;
-        let saved = this.save();
-
-        saved.then((result) => {
-          if (result === true) {
-            this.restarted = true;
-            setTimeout(() => {
-              this.saved = this.restarted = false;
-            }, 5000);
-            apiFetch("./api/restart", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json"
-              }
-            });
-          }
-        });
-      },
-      handleSearch() {
-        // Clear all highlighting
-        document.querySelectorAll('.config-search-highlight').forEach(el => {
-          el.classList.remove('config-search-highlight');
-        });
-
-        if (!this.searchQuery) {
-          // Show all form groups when search is cleared
-          document.querySelectorAll('.mb-3').forEach(el => {
-            el.style.display = '';
-          });
-          return;
-        }
-
-        const results = this.searchResults;
-
-        if (results.length === 0) {
-          return;
-        }
-
-        // Switch to the tab of the first result
-        if (results.length > 0 && results[0].tabId !== this.currentTab) {
-          this.currentTab = results[0].tabId;
-        }
-
-        // Wait for tab content to render
-        this.$nextTick(() => {
-          // Hide all form groups first
-          document.querySelectorAll('.config-page .mb-3').forEach(el => {
-            el.style.display = 'none';
-          });
-
-          // Show only matching elements
-          results.forEach(result => {
-            const element = document.getElementById(result.key);
-
-            if (element) {
-              // Show the element's container
-              const container = element.closest('.mb-3');
-              if (container) {
-                container.style.display = '';
-              }
-            }
-          });
-
-          // Scroll to and highlight the first result
-          if (results.length > 0) {
-            const firstElement = document.getElementById(results[0].key);
-            if (firstElement) {
-              const container = firstElement.closest('.mb-3');
-              if (container) {
-                container.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                container.classList.add('config-search-highlight');
-                setTimeout(() => {
-                  container.classList.remove('config-search-highlight');
-                }, 3000);
-              }
-            }
-          }
-        });
-      },
-    },
-    mounted() {
-      // Handle hashchange events
-      const handleHash = () => {
-        let hash = window.location.hash;
-        if (hash) {
-          // remove the # from the hash
-          let stripped_hash = hash.substring(1);
-
-          this.tabs.forEach(tab => {
-            Object.keys(tab.options).forEach(key => {
-              if (tab.id === stripped_hash || key === stripped_hash) {
-                this.currentTab = tab.id;
-              }
-              if (key === stripped_hash) {
-                // sleep for 2 seconds to allow the page to load
-                setTimeout(() => {
-                  let element = document.getElementById(stripped_hash);
-                  if (element) {
-                    window.location.hash = hash;
-                  }
-                }, 2000);
-              }
-
-              if (this.currentTab === tab.id) {
-                // stop looping
-                return true;
-              }
-            });
-          });
-        }
-      };
-
-      // Call handleHash for the initial load
-      handleHash();
-
-      // Add hashchange event listener
-      window.addEventListener("hashchange", handleHash);
-    },
-  });
-
-  initApp(app);
-</script>

From f9ebe7482351ba57ad4507a70705882f0c65b5dc Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 02:17:55 +0000
Subject: [PATCH 11/24] Migrate troubleshooting page

---
 .../assets/web/src/components/AlertBox.vue    |    6 +-
 .../web/src/views/TroubleshootingView.vue     | 1104 ++++++++++++++-
 .../assets/web/src/views/troubleshooting.html | 1181 -----------------
 3 files changed, 1101 insertions(+), 1190 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/troubleshooting.html

diff --git a/src_assets/common/assets/web/src/components/AlertBox.vue b/src_assets/common/assets/web/src/components/AlertBox.vue
index 0600a5f5565..f4a54ca004e 100644
--- a/src_assets/common/assets/web/src/components/AlertBox.vue
+++ b/src_assets/common/assets/web/src/components/AlertBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="alert" :class="`alert-${variant}`">
-    <template v-if="compact">
-      <component :is="resolvedIcon" :size="18" class="icon"></component>
+    <div v-if="compact" class="d-flex align-items-center">
+      <component :is="resolvedIcon" :size="18" class="icon me-3"></component>
       <slot></slot>
-    </template>
+    </div>
     <div v-else>
       <div class="d-flex align-items-center" :class="{ 'mb-3': $slots.body || action }">
         <component :is="resolvedIcon" :size="32" class="icon-lg me-3"></component>
diff --git a/src_assets/common/assets/web/src/views/TroubleshootingView.vue b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
index a30e8abbbd0..813687b2718 100644
--- a/src_assets/common/assets/web/src/views/TroubleshootingView.vue
+++ b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
@@ -1,8 +1,1100 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Troubleshooting</h1>
-  <p>TODO: migrate content from src/views/troubleshooting.html</p>
+  <h1 class="my-4">{{ $t('troubleshooting.troubleshooting') }}</h1>
+  <!-- Virtual gamepad and Virtual HID Driver license -->
+  <div class="card my-4 virtual-gamepad-card" v-if="platform === 'windows'">
+    <div class="card-body">
+      <header class="virtual-gamepad-hero">
+        <div class="virtual-gamepad-heading-icon" aria-hidden="true">
+          <gamepad-2 :size="28"></gamepad-2>
+        </div>
+        <div>
+          <h2 id="virtualhid" class="mb-1">{{ $t('troubleshooting.virtual_gamepad') }}</h2>
+          <p class="mb-0">{{ $t('troubleshooting.virtual_gamepad_desc') }}</p>
+        </div>
+      </header>
+
+      <div class="virtual-gamepad-feature-grid" :aria-label="$t('troubleshooting.virtualhid_benefits_title')">
+        <FeatureCard :icon="Gamepad2" :title="$t('troubleshooting.virtualhid_benefit_gamepads_title')"
+          :description="$t('troubleshooting.virtualhid_benefit_gamepads')" />
+        <FeatureCard :icon="Sparkles" :title="$t('troubleshooting.virtualhid_benefit_features_title')"
+          :description="$t('troubleshooting.virtualhid_benefit_features')" />
+        <FeatureCard :icon="ShieldCheck" :title="$t('troubleshooting.virtualhid_benefit_maintained_title')"
+          :description="$t('troubleshooting.virtualhid_benefit_maintained')" />
+      </div>
+
+      <section class="virtual-gamepad-section" v-if="controllerEnabled">
+        <div class="virtual-gamepad-section-heading">
+          <div>
+            <h3 class="h4 mb-1">{{ $t('troubleshooting.virtual_gamepad_drivers') }}</h3>
+            <p class="mb-0">{{ $t('troubleshooting.virtual_gamepad_drivers_desc') }}</p>
+          </div>
+          <button class="btn btn-outline-secondary driver-refresh-button" type="button"
+            @click="refreshDriverInformation">
+            <refresh-cw :size="17" :class="{ 'driver-release-spinning': driverReleaseLoading }"></refresh-cw>
+            {{ $t('troubleshooting.driver_refresh') }}
+          </button>
+        </div>
+
+        <div class="table-responsive driver-table-shell">
+          <table class="table align-middle mb-0">
+            <thead>
+              <tr>
+                <th scope="col">{{ $t('troubleshooting.driver_name') }}</th>
+                <th scope="col">{{ $t('troubleshooting.driver_installed_version') }}</th>
+                <th scope="col">{{ $t('troubleshooting.driver_latest_version') }}</th>
+                <th scope="col">{{ $t('troubleshooting.driver_supported_versions') }}</th>
+                <th scope="col">{{ $t('troubleshooting.driver_status') }}</th>
+                <th scope="col" class="driver-download-column">
+                  <span class="visually-hidden">{{ $t('troubleshooting.driver_download') }}</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">{{ $t('troubleshooting.virtualhid_driver') }}</th>
+                <td>{{ driverVersion(virtualhid) }}</td>
+                <td>
+                  <div class="driver-release-state" :class="driverReleaseStateClass(virtualhid, virtualhidRelease)"
+                    :title="driverReleaseStatusText(virtualhid, virtualhidRelease)" aria-live="polite">
+                    <refresh-cw v-if="virtualhidRelease.loading" :size="17" class="driver-release-spinning"></refresh-cw>
+                    <check-circle v-else-if="driverReleaseState(virtualhid, virtualhidRelease) === 'current'"
+                      :size="17"></check-circle>
+                    <alert-triangle v-else-if="driverReleaseState(virtualhid, virtualhidRelease) === 'outdated'"
+                      :size="17"></alert-triangle>
+                    <alert-circle v-else :size="17"></alert-circle>
+                    <span>{{ driverLatestVersion(virtualhidRelease) }}</span>
+                  </div>
+                  <small class="driver-release-detail">{{ driverReleaseStatusText(virtualhid, virtualhidRelease) }}</small>
+                </td>
+                <td>{{ virtualhid.supported_versions }}</td>
+                <td>
+                  <span :class="driverStatusClass(virtualhid)">
+                    {{ driverStatusText(virtualhid) }}
+                  </span>
+                </td>
+                <td class="driver-download-column">
+                  <a class="btn btn-outline-primary driver-download-button" :href="virtualhidRelease.url"
+                    target="_blank" rel="noopener noreferrer">
+                    <download :size="17"></download>
+                    {{ $t('troubleshooting.driver_download') }}
+                  </a>
+                </td>
+              </tr>
+              <tr id="vigembus" v-if="showVigembus">
+                <th scope="row">{{ $t('troubleshooting.vigembus_driver') }}</th>
+                <td>{{ driverVersion(vigembus) }}</td>
+                <td>
+                  <div class="driver-release-state" :class="driverReleaseStateClass(vigembus, vigembusRelease)"
+                    :title="driverReleaseStatusText(vigembus, vigembusRelease)" aria-live="polite">
+                    <refresh-cw v-if="vigembusRelease.loading" :size="17" class="driver-release-spinning"></refresh-cw>
+                    <check-circle v-else-if="driverReleaseState(vigembus, vigembusRelease) === 'current'"
+                      :size="17"></check-circle>
+                    <alert-triangle v-else-if="driverReleaseState(vigembus, vigembusRelease) === 'outdated'"
+                      :size="17"></alert-triangle>
+                    <alert-circle v-else :size="17"></alert-circle>
+                    <span>{{ driverLatestVersion(vigembusRelease) }}</span>
+                  </div>
+                  <small class="driver-release-detail">{{ driverReleaseStatusText(vigembus, vigembusRelease) }}</small>
+                </td>
+                <td>{{ vigembus.supported_versions }}</td>
+                <td>
+                  <span :class="driverStatusClass(vigembus)">
+                    {{ driverStatusText(vigembus) }}
+                  </span>
+                </td>
+                <td class="driver-download-column">
+                  <a class="btn btn-outline-primary driver-download-button" :href="vigembusRelease.url"
+                    target="_blank" rel="noopener noreferrer">
+                    <download :size="17"></download>
+                    {{ $t('troubleshooting.driver_download') }}
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section class="virtualhid-license-section" aria-labelledby="virtualhid-license">
+        <div class="virtualhid-license-heading">
+          <div>
+            <h3 id="virtualhid-license" class="h4 mb-1">{{ $t('troubleshooting.virtualhid_license') }}</h3>
+            <p class="mb-0">{{ $t('troubleshooting.virtualhid_license_desc') }}</p>
+          </div>
+          <span :class="licenseStatusClass()">{{ licenseStatusText() }}</span>
+        </div>
+
+        <AlertBox v-if="licenseError" variant="danger" compact class="alert-inline">
+          {{ licenseError }}
+        </AlertBox>
+        <AlertBox v-else-if="!virtualhidLicense.service_available" variant="warning" compact class="alert-inline">
+          {{ virtualhidLicense.message || $t('troubleshooting.virtualhid_license_unavailable') }}
+        </AlertBox>
+
+        <div class="virtualhid-license-stats">
+          <dl class="virtualhid-license-stat" v-if="virtualhidLicense.plan_name">
+            <dt>{{ $t('troubleshooting.virtualhid_license_plan') }}</dt>
+            <dd>{{ virtualhidLicense.plan_name }}</dd>
+          </dl>
+          <dl class="virtualhid-license-stat">
+            <dt>{{ $t('troubleshooting.virtualhid_license_activations') }}</dt>
+            <dd>{{ licenseActivationText() }}</dd>
+          </dl>
+          <dl class="virtualhid-license-stat">
+            <dt>{{ $t('troubleshooting.virtualhid_license_active_devices') }}</dt>
+            <dd>{{ virtualhidLicense.active_devices }}</dd>
+          </dl>
+          <dl class="virtualhid-license-stat" v-if="virtualhidLicense.customer_email">
+            <dt>{{ $t('troubleshooting.virtualhid_license_customer') }}</dt>
+            <dd>{{ virtualhidLicense.customer_email }}</dd>
+          </dl>
+        </div>
+
+        <p class="virtualhid-license-message" v-if="virtualhidLicense.message && virtualhidLicense.service_available">
+          {{ virtualhidLicense.message }}
+        </p>
+
+        <div class="virtualhid-license-toolbar">
+          <button class="btn btn-secondary" type="button" :disabled="licenseBusy || !virtualhidLicense.service_available"
+            @click="updateLicense('validate')">
+            <refresh-cw :size="18" :class="{ 'driver-release-spinning': licenseBusy }"></refresh-cw>
+            {{ $t('troubleshooting.virtualhid_license_refresh') }}
+          </button>
+          <a class="btn btn-outline-primary" v-if="virtualhidLicense.manage_account_url"
+            :href="virtualhidLicense.manage_account_url" target="_blank" rel="noopener noreferrer">
+            <external-link :size="18"></external-link>
+            {{ $t('troubleshooting.virtualhid_license_manage') }}
+          </a>
+          <a class="btn btn-success" v-if="virtualhidLicense.purchase_url && !virtualhidLicense.licensed"
+            :href="virtualhidLicense.purchase_url" target="_blank" rel="noopener noreferrer">
+            {{ $t('troubleshooting.virtualhid_license_buy') }}
+          </a>
+          <button class="btn btn-outline-danger" type="button" v-if="virtualhidLicense.licensed"
+            :disabled="licenseBusy || !virtualhidLicense.service_available" @click="updateLicense('deactivate')">
+            {{ $t('troubleshooting.virtualhid_license_deactivate') }}
+          </button>
+        </div>
+
+        <div class="virtualhid-license-activation" v-if="!virtualhidLicense.licensed">
+          <label for="virtualhid-license-key" class="form-label">
+            {{ $t('troubleshooting.virtualhid_license_key') }}
+          </label>
+          <div class="input-group virtualhid-license-input">
+            <input id="virtualhid-license-key" class="form-control" type="password" v-model="licenseKey"
+              :placeholder="$t('troubleshooting.virtualhid_license_key_placeholder')"
+              :disabled="licenseBusy || !virtualhidLicense.service_available" autocomplete="off" autocapitalize="off"
+              spellcheck="false" @keyup.enter="updateLicense('activate')" />
+            <button class="btn btn-primary" type="button"
+              :disabled="licenseBusy || !virtualhidLicense.service_available || !licenseKey.trim()"
+              @click="updateLicense('activate')">
+              <key-round :size="18"></key-round>
+              {{ $t('troubleshooting.virtualhid_license_activate') }}
+            </button>
+          </div>
+          <div class="form-text">{{ $t('troubleshooting.virtualhid_license_key_desc') }}</div>
+        </div>
+
+        <div class="virtualhid-license-active" v-else>
+          <check-circle :size="22" aria-hidden="true"></check-circle>
+          <div>
+            <strong>{{ $t('troubleshooting.virtualhid_license_machine_activated') }}</strong>
+            <p class="mb-0">{{ $t('troubleshooting.virtualhid_license_machine_activated_desc') }}</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+  <!-- Force Close App -->
+  <div class="card my-4">
+    <div class="card-body">
+      <h2 id="close_apps">{{ $t('troubleshooting.force_close') }}</h2>
+      <p>{{ $t('troubleshooting.force_close_desc') }}</p>
+      <AlertBox v-if="closeAppStatus === true" variant="success" compact>
+        {{ $t('troubleshooting.force_close_success') }}
+      </AlertBox>
+      <AlertBox v-if="closeAppStatus === false" variant="danger" compact>
+        {{ $t('troubleshooting.force_close_error') }}
+      </AlertBox>
+      <div>
+        <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
+          <x-circle :size="18" class="icon"></x-circle>
+          {{ $t('troubleshooting.force_close') }}
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Restart Sunshine -->
+  <div class="card my-4">
+    <div class="card-body">
+      <h2 id="restart">{{ $t('troubleshooting.restart_sunshine') }}</h2>
+      <p>{{ $t('troubleshooting.restart_sunshine_desc') }}</p>
+      <AlertBox v-if="restartPressed === true" variant="success" compact>
+        {{ $t('troubleshooting.restart_sunshine_success') }}
+      </AlertBox>
+      <div>
+        <button class="btn btn-warning" :disabled="restartPressed" @click="restart">
+          <refresh-cw :size="18" class="icon"></refresh-cw>
+          {{ $t('troubleshooting.restart_sunshine') }}
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Reset persistent display device settings -->
+  <div class="card my-4" v-if="platform === 'windows'">
+    <div class="card-body">
+      <h2 id="dd_reset">{{ $t('troubleshooting.dd_reset') }}</h2>
+      <p style="white-space: pre-line">{{ $t('troubleshooting.dd_reset_desc') }}</p>
+      <AlertBox v-if="ddResetStatus === true" variant="success" compact>
+        {{ $t('troubleshooting.dd_reset_success') }}
+      </AlertBox>
+      <AlertBox v-if="ddResetStatus === false" variant="danger" compact>
+        {{ $t('troubleshooting.dd_reset_error') }}
+      </AlertBox>
+      <div>
+        <button class="btn btn-warning" :disabled="ddResetPressed" @click="ddResetPersistence">
+          <rotate-ccw :size="18" class="icon"></rotate-ccw>
+          {{ $t('troubleshooting.dd_reset') }}
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Unpair Clients -->
+  <div class="card my-4">
+    <div class="card-body">
+      <h2 id="unpair">{{ $t('troubleshooting.unpair_title') }}</h2>
+      <p>{{ $t('troubleshooting.unpair_desc') }}</p>
+      <div class="alert alert-success d-flex align-items-center" v-if="showApplyMessage">
+        <check-circle :size="18" class="icon"></check-circle>
+        <div><b>{{ $t('_common.success') }}</b> {{ $t('troubleshooting.unpair_single_success') }}</div>
+        <button class="btn btn-success ms-auto" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
+      </div>
+      <AlertBox v-if="unpairAllStatus === true" variant="success" compact>
+        {{ $t('troubleshooting.unpair_all_success') }}
+      </AlertBox>
+      <AlertBox v-if="unpairAllStatus === false" variant="danger" compact>
+        {{ $t('troubleshooting.unpair_all_error') }}
+      </AlertBox>
+      <div>
+        <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
+          <trash-2 :size="18" class="icon"></trash-2>
+          {{ $t('troubleshooting.unpair_all') }}
+        </button>
+      </div>
+    </div>
+    <ul class="list-group list-group-flush" v-if="clients && clients.length > 0">
+      <li v-for="client in clients" :key="client.uuid" class="list-group-item d-flex align-items-center">
+        <div class="flex-grow-1">
+          {{ client.name !== "" ? client.name : $t('troubleshooting.unpair_single_unknown') }}
+        </div>
+        <div class="form-check form-switch ms-2 mb-0">
+          <input class="form-check-input" type="checkbox" role="switch" :id="'toggle-' + client.uuid"
+            :checked="client.enabled" :aria-checked="client.enabled.toString()"
+            @change="toggleClient(client.uuid, !client.enabled)">
+        </div>
+        <button class="btn btn-danger btn-sm ms-2" @click="unpairSingle(client.uuid)">
+          <trash-2 :size="18" class="icon"></trash-2>
+        </button>
+      </li>
+    </ul>
+    <ul v-else class="list-group list-group-flush">
+      <li class="list-group-item p-3 text-center">
+        <em>{{ $t('troubleshooting.unpair_single_no_devices') }}</em>
+      </li>
+    </ul>
+  </div>
+  <!-- Logs -->
+  <div class="card my-4">
+    <div class="card-body">
+      <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
+      <div class="d-flex justify-content-between align-items-baseline py-2">
+        <p>{{ $t('troubleshooting.logs_desc') }}</p>
+        <div class="input-group" style="max-width: 300px">
+          <span class="input-group-text">
+            <search :size="18" class="icon"></search>
+          </span>
+          <input type="text" class="form-control" v-model="logFilter" :placeholder="$t('troubleshooting.logs_find')" />
+        </div>
+      </div>
+      <div>
+        <div class="troubleshooting-logs" ref="logsContainer">
+          <div class="log-nav-overlay">
+            <div class="log-nav-controls">
+              <button class="log-nav-btn" @click="scrollLogsTo('top')" title="Jump to Top">
+                <chevrons-up :size="18" class="icon"></chevrons-up>
+              </button>
+              <button class="log-nav-btn" @click="navigateToLog('prev')" :disabled="!hasPrevLog"
+                title="Previous Warning/Error">
+                <chevron-up :size="18" class="icon"></chevron-up>
+              </button>
+              <button class="log-nav-btn" @click="navigateToLog('next')" :disabled="!hasNextLog"
+                title="Next Warning/Error">
+                <chevron-down :size="18" class="icon"></chevron-down>
+              </button>
+              <button class="log-nav-btn" @click="scrollLogsTo('bottom')" title="Jump to Bottom">
+                <chevrons-down :size="18" class="icon"></chevrons-down>
+              </button>
+              <button class="log-nav-btn" @click="copyLogs" title="Copy Logs">
+                <check :size="18" class="icon text-success" v-if="logsCopied"></check>
+                <copy :size="18" class="icon" v-else></copy>
+              </button>
+            </div>
+          </div>
+          <pre class="mb-0" v-html="highlightedLogs"></pre>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import AlertBox from '@/components/AlertBox.vue'
+import FeatureCard from '@/components/FeatureCard.vue'
+import { apiFetch } from '@/utils/fetch_utils'
+import {
+  AlertCircle,
+  AlertTriangle,
+  Check,
+  CheckCircle,
+  ChevronDown,
+  ChevronUp,
+  ChevronsDown,
+  ChevronsUp,
+  Copy,
+  Download,
+  ExternalLink,
+  Gamepad2,
+  KeyRound,
+  RefreshCw,
+  RotateCcw,
+  Search,
+  ShieldCheck,
+  Sparkles,
+  Trash2,
+  XCircle,
+} from '@lucide/vue'
+
+export default {
+  components: {
+    AlertBox,
+    FeatureCard,
+    AlertCircle,
+    AlertTriangle,
+    Check,
+    CheckCircle,
+    ChevronDown,
+    ChevronUp,
+    ChevronsDown,
+    ChevronsUp,
+    Copy,
+    Download,
+    ExternalLink,
+    Gamepad2,
+    KeyRound,
+    RefreshCw,
+    RotateCcw,
+    Search,
+    ShieldCheck,
+    Sparkles,
+    Trash2,
+    XCircle,
+  },
+  data() {
+    return {
+      Gamepad2,
+      Sparkles,
+      ShieldCheck,
+      clients: [],
+      closeAppPressed: false,
+      closeAppStatus: null,
+      ddResetPressed: false,
+      ddResetStatus: null,
+      logsCopied: false,
+      logs: 'Loading...',
+      logFilter: null,
+      logInterval: null,
+      licenseBusy: false,
+      licenseError: '',
+      licenseKey: '',
+      restartPressed: false,
+      showApplyMessage: false,
+      platform: "",
+      controllerEnabled: false,
+      virtualInputStatusLoaded: false,
+      unpairAllPressed: false,
+      unpairAllStatus: null,
+      virtualhid: {
+        installed: false,
+        version: '',
+        version_compatible: false,
+        minimum_version: '',
+        supported_versions: '',
+      },
+      virtualhidLicense: {
+        operation_ok: false,
+        service_available: false,
+        state: 'unavailable',
+        licensed: false,
+        active_devices: 0,
+        activation_limit: 0,
+        activation_usage: 0,
+        plan_name: '',
+        customer_email: '',
+        message: '',
+        purchase_url: '',
+        manage_account_url: '',
+      },
+      virtualhidRelease: {
+        loading: false,
+        version: '',
+        url: 'https://github.com/LizardByte/libvirtualhid/releases/latest',
+        error: false,
+      },
+      vigembus: {
+        installed: false,
+        version: '',
+        version_compatible: false,
+        minimum_version: '',
+        supported_versions: '',
+      },
+      vigembusRelease: {
+        loading: false,
+        version: '',
+        url: 'https://github.com/nefarius/ViGEmBus/releases/latest',
+        error: false,
+      },
+      currentLogIndex: -1,
+      logLines: [],
+    };
+  },
+  computed: {
+    actualLogs() {
+      if (!this.logFilter) return this.logs;
+      const filterLower = this.logFilter.toLowerCase();
+      return this.logs
+        .split("\n")
+        .filter((x) => x.toLowerCase().includes(filterLower))
+        .join("\n");
+    },
+
+    /**
+     * Parse the (possibly multi-line) log output into timestamp-prefixed entries.
+     * Each entry starts with: [YYYY-MM-DD HH:MM:SS.mmm]:
+     */
+    parsedLogEntries() {
+      const text = this.actualLogs || '';
+
+      // Match on timestamp tokens, but keep everything between them as the entry body.
+      // Using a global exec loop lets us split without losing delimiters and works
+      // even when entries span multiple lines.
+      const tsRegex = /\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}\]:/g;
+
+      const entries = [];
+      const matches = Array.from(text.matchAll(tsRegex));
+
+      // If no timestamps are found, treat everything as a single entry.
+      if (matches.length === 0) {
+        const raw = text.trimEnd();
+        if (!raw) return [];
+        return [
+          {
+            index: 0,
+            raw,
+            level: 'Info',
+            cssClass: 'log-line-info',
+          },
+        ];
+      }
+
+      for (let i = 0; i < matches.length; i++) {
+        const start = matches[i].index;
+        const end = i + 1 < matches.length ? matches[i + 1].index : text.length;
+        const raw = text.slice(start, end).trimEnd();
+        if (!raw) continue;
+
+        // Determine level based on the *first* level token in the entry.
+        // Sunshine logs are typically: "[ts]: Level: message".
+        // Some messages may contain additional embedded timestamps, but we treat
+        // those as part of the entry content.
+        let level = 'Info';
+        let cssClass = 'log-line-info';
+
+        if (/\]:\s*Fatal:/i.test(raw)) {
+          level = 'Fatal';
+          cssClass = 'log-line-fatal';
+        } else if (/\]:\s*(Error|Critical):/i.test(raw)) {
+          level = 'Error';
+          cssClass = 'log-line-error';
+        } else if (/\]:\s*Warning:/i.test(raw)) {
+          level = 'Warning';
+          cssClass = 'log-line-warning';
+        } else if (/\]:\s*Debug:/i.test(raw)) {
+          level = 'Debug';
+          cssClass = 'log-line-debug';
+        }
+
+        entries.push({
+          index: entries.length,
+          raw,
+          level,
+          cssClass,
+        });
+      }
+
+      return entries;
+    },
+
+    highlightedLogs() {
+      const escapeHtml = (s) =>
+        s
+          .replaceAll('&', '&amp;')
+          .replaceAll('<', '&lt;')
+          .replaceAll('>', '&gt;')
+          .replaceAll('"', '&quot;')
+          .replaceAll("'", '&#39;');
+
+      return this.parsedLogEntries
+        .map((entry) => {
+          const safe = escapeHtml(entry.raw);
+          const isSelected = entry.index === this.currentLogIndex;
+          const selectedClass = isSelected ? ' log-entry-selected' : '';
+          return `<span data-entry-index="${entry.index}" data-log-level="${entry.cssClass}" class="${entry.cssClass}${selectedClass}">${safe}</span>`;
+        })
+        // Separate entries visually with a newline.
+        .join("\n");
+    },
+
+    errorWarningEntries() {
+      // Only navigate between warnings/errors/fatal/critical
+      return this.parsedLogEntries
+        .filter((e) => e.level === 'Warning' || e.level === 'Error' || e.level === 'Fatal')
+        .map((e) => e.index);
+    },
+
+    hasNextLog() {
+      const indices = this.errorWarningEntries;
+      if (indices.length === 0) return false;
+      if (this.currentLogIndex === -1) return true;
+      return indices.some((i) => i > this.currentLogIndex);
+    },
+
+    hasPrevLog() {
+      const indices = this.errorWarningEntries;
+      if (indices.length === 0) return false;
+      if (this.currentLogIndex === -1) return false;
+      return indices.some((i) => i < this.currentLogIndex);
+    },
+
+    driverReleaseLoading() {
+      return this.virtualhidRelease.loading || (this.showVigembus && this.vigembusRelease.loading);
+    },
+
+    showVigembus() {
+      return this.virtualInputStatusLoaded && (!this.virtualhid.installed || this.vigembus.installed);
+    }
+  },
+  created() {
+    this._logsCopyTimeout = null;
+    fetch("/api/config")
+      .then((r) => r.json())
+      .then((r) => {
+        this.platform = r.platform;
+        this.controllerEnabled = r.controller !== "disabled";
+        // Fetch virtual input driver status only on Windows when gamepad is enabled
+        if (this.platform === 'windows' && this.controllerEnabled) {
+          this.refreshDriverInformation();
+        }
+        if (this.platform === 'windows') {
+          this.refreshLicenseStatus();
+        }
+      });
+
+    this.logInterval = setInterval(() => {
+      this.refreshLogs();
+    }, 5000);
+    this.refreshLogs();
+    this.refreshClients();
+  },
+  beforeUnmount() {
+    clearInterval(this.logInterval);
+  },
+  methods: {
+    refreshLogs() {
+      fetch("./api/logs",)
+        .then((r) => r.text())
+        .then((r) => {
+          this.logs = r;
+        });
+    },
+    closeApp() {
+      this.closeAppPressed = true;
+      apiFetch("./api/apps/close", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        } })
+        .then((r) => r.json())
+        .then((r) => {
+          this.closeAppPressed = false;
+          this.closeAppStatus = r.status;
+          setTimeout(() => {
+            this.closeAppStatus = null;
+          }, 5000);
+        });
+    },
+    unpairAll() {
+      this.unpairAllPressed = true;
+      apiFetch("./api/clients/unpair-all", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        }
+       })
+        .then((r) => r.json())
+        .then((r) => {
+          this.unpairAllPressed = false;
+          this.unpairAllStatus = r.status;
+          setTimeout(() => {
+            this.unpairAllStatus = null;
+          }, 5000);
+          this.refreshClients();
+        });
+    },
+    unpairSingle(uuid) {
+      apiFetch("./api/clients/unpair", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ uuid })
+      }).then(() => {
+        this.showApplyMessage = true;
+        this.refreshClients();
+      });
+    },
+    toggleClient(uuid, enabled) {
+      fetch("./api/clients/update", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ uuid, enabled })
+      }).then(() => {
+        this.refreshClients();
+      });
+    },
+    refreshClients() {
+      fetch("./api/clients/list")
+        .then((response) => response.json())
+        .then((response) => {
+          const clientList = document.querySelector("#client-list");
+          if (response.status === true && response.named_certs && response.named_certs.length) {
+            this.clients = response.named_certs.sort((a, b) => {
+              return (a.name.toLowerCase() > b.name.toLowerCase() || a.name === "" ? 1 : -1)
+            });
+          } else {
+            this.clients = [];
+          }
+        });
+    },
+    clickedApplyBanner() {
+      this.showApplyMessage = false;
+    },
+    copyLogs() {
+      // Copy the filtered view if a filter is active.
+      navigator.clipboard.writeText(this.actualLogs).then(() => {
+        // Clear any existing reset timer (handles rapid successive clicks).
+        if (this._logsCopyTimeout) clearTimeout(this._logsCopyTimeout);
+
+        // Show checkmark feedback.
+        this.logsCopied = true;
+
+        // Revert icon after 2 seconds.
+        this._logsCopyTimeout = setTimeout(() => {
+          this.logsCopied = false;
+        }, 2000);
+      }).catch((err) => {
+        console.error('Failed to copy logs:', err);
+      });
+    },
+    restart() {
+      this.restartPressed = true;
+      setTimeout(() => {
+        this.restartPressed = false;
+      }, 5000);
+      apiFetch("./api/restart", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        }
+      });
+    },
+    ddResetPersistence() {
+      this.ddResetPressed = true;
+      apiFetch("/api/reset-display-device-persistence", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      })
+        .then((r) => r.json())
+        .then((r) => {
+          this.ddResetPressed = false;
+          this.ddResetStatus = r.status;
+          setTimeout(() => {
+            this.ddResetStatus = null;
+          }, 5000);
+        });
+    },
+    /**
+     * @brief Refresh the installed driver details and latest stable GitHub releases.
+     */
+    refreshDriverInformation() {
+      this.refreshVirtualInputStatus();
+      this.refreshDriverReleases();
+    },
+    /**
+     * @brief Refresh the latest stable release metadata for both Windows gamepad drivers.
+     */
+    refreshDriverReleases() {
+      this.updateLatestRelease(
+        'virtualhidRelease',
+        'LizardByte/libvirtualhid',
+        'https://github.com/LizardByte/libvirtualhid/releases/latest',
+      );
+      this.updateLatestRelease(
+        'vigembusRelease',
+        'nefarius/ViGEmBus',
+        'https://github.com/nefarius/ViGEmBus/releases/latest',
+      );
+    },
+    /**
+     * @brief Fetch one repository's latest non-prerelease release from GitHub.
+     *
+     * @param {string} property Component data property that stores the release metadata.
+     * @param {string} repository GitHub repository in owner/name form.
+     * @param {string} fallbackUrl Releases page used if the API request fails.
+     */
+    updateLatestRelease(property, repository, fallbackUrl) {
+      this[property] = {
+        ...this[property],
+        loading: true,
+        error: false,
+      };
+
+      fetch(`https://api.github.com/repos/${repository}/releases/latest`, {
+        headers: {
+          Accept: 'application/vnd.github+json',
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`GitHub returned ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((release) => {
+          if (!release.tag_name || release.draft || release.prerelease) {
+            throw new Error('GitHub did not return a stable release');
+          }
+          this[property] = {
+            loading: false,
+            version: release.tag_name,
+            url: release.html_url || fallbackUrl,
+            error: false,
+          };
+        })
+        .catch((error) => {
+          console.error(`Failed to fetch the latest ${repository} release:`, error);
+          this[property] = {
+            loading: false,
+            version: '',
+            url: fallbackUrl,
+            error: true,
+          };
+        });
+    },
+    refreshVirtualInputStatus() {
+      fetch("/api/virtual-input/status")
+        .then((r) => r.json())
+        .then((r) => {
+          const virtualhid = r.virtualhid || {};
+          const vigembus = r.vigembus || {};
+          this.virtualhid = {
+            installed: virtualhid.installed || false,
+            version: virtualhid.version || '',
+            version_compatible: virtualhid.version_compatible || false,
+            minimum_version: virtualhid.minimum_version || '',
+            supported_versions: virtualhid.supported_versions || '',
+          };
+          this.vigembus = {
+            installed: vigembus.installed || false,
+            version: vigembus.version || '',
+            version_compatible: vigembus.version_compatible || false,
+            minimum_version: vigembus.minimum_version || '',
+            supported_versions: vigembus.supported_versions || '',
+          };
+          this.virtualInputStatusLoaded = true;
+        })
+        .catch((err) => {
+          console.error("Failed to fetch virtual input driver status:", err);
+        });
+    },
+    /**
+     * @brief Parse a numeric dotted driver or release version.
+     *
+     * @param {string} version Version string, optionally prefixed with "v".
+     * @return {number[]|null} Numeric version parts, or null for an invalid version.
+     */
+    parseDriverVersion(version) {
+      const match = /^v?(\d+(?:\.\d+)*)/i.exec(String(version || '').trim());
+      return match ? match[1].split('.').map(Number) : null;
+    },
+    /**
+     * @brief Compare installed and latest driver versions.
+     *
+     * @param {string} installedVersion Installed driver version.
+     * @param {string} latestVersion Latest stable release version.
+     * @return {number|null} Negative if outdated, zero if equal, positive if newer, or null if invalid.
+     */
+    compareDriverVersions(installedVersion, latestVersion) {
+      const installedParts = this.parseDriverVersion(installedVersion);
+      const latestParts = this.parseDriverVersion(latestVersion);
+      if (!installedParts || !latestParts) {
+        return null;
+      }
+
+      const partCount = Math.max(installedParts.length, latestParts.length);
+      for (let index = 0; index < partCount; ++index) {
+        const installedPart = installedParts[index] || 0;
+        const latestPart = latestParts[index] || 0;
+        if (installedPart !== latestPart) {
+          return installedPart > latestPart ? 1 : -1;
+        }
+      }
+      return 0;
+    },
+    /**
+     * @brief Get the availability state for one installed driver and GitHub release.
+     *
+     * @param {object} driver Installed driver status.
+     * @param {object} release Latest GitHub release status.
+     * @return {string} Release state used to select the icon and message.
+     */
+    driverReleaseState(driver, release) {
+      if (release.loading) {
+        return 'loading';
+      }
+      if (release.error || !release.version) {
+        return 'unavailable';
+      }
+      if (!driver.installed) {
+        return 'not-installed';
+      }
+
+      const comparison = this.compareDriverVersions(driver.version, release.version);
+      if (comparison === null) {
+        return 'unknown';
+      }
+      return comparison >= 0 ? 'current' : 'outdated';
+    },
+    /**
+     * @brief Get the localized release comparison message for a driver.
+     *
+     * @param {object} driver Installed driver status.
+     * @param {object} release Latest GitHub release status.
+     * @return {string} Localized release comparison message.
+     */
+    driverReleaseStatusText(driver, release) {
+      const state = this.driverReleaseState(driver, release).replace('-', '_');
+      return this.$t(`troubleshooting.driver_release_${state}`);
+    },
+    /**
+     * @brief Get a theme-aware text class for a driver release state.
+     *
+     * @param {object} driver Installed driver status.
+     * @param {object} release Latest GitHub release status.
+     * @return {string} CSS class for the release icon and version.
+     */
+    driverReleaseStateClass(driver, release) {
+      const state = this.driverReleaseState(driver, release);
+      if (state === 'current') {
+        return 'driver-release-current';
+      }
+      if (state === 'outdated') {
+        return 'driver-release-outdated';
+      }
+      return 'driver-release-neutral';
+    },
+    /**
+     * @brief Format a latest release version for the drivers table.
+     *
+     * @param {object} release Latest GitHub release status.
+     * @return {string} Release version or a localized placeholder.
+     */
+    driverLatestVersion(release) {
+      if (release.loading) {
+        return this.$t('troubleshooting.driver_release_checking');
+      }
+      return release.version || this.$t('troubleshooting.driver_release_unavailable');
+    },
+    applyLicenseStatus(status) {
+      this.virtualhidLicense = {
+        ...this.virtualhidLicense,
+        ...status,
+      };
+      this.licenseError = status.error || '';
+    },
+    refreshLicenseStatus() {
+      this.licenseBusy = true;
+      this.licenseError = '';
+      fetch("/api/virtual-input/license")
+        .then(async (response) => {
+          const status = await response.json();
+          if (!response.ok) {
+            throw new Error(status.error || this.$t('troubleshooting.virtualhid_license_request_failed'));
+          }
+          this.applyLicenseStatus(status);
+        })
+        .catch((error) => {
+          this.licenseError = error.message;
+        })
+        .finally(() => {
+          this.licenseBusy = false;
+        });
+    },
+    updateLicense(action) {
+      if (this.licenseBusy || (action === 'activate' && !this.licenseKey.trim())) {
+        return;
+      }
+
+      this.licenseBusy = true;
+      this.licenseError = '';
+      const body = { action };
+      if (action === 'activate') {
+        body.license_key = this.licenseKey.trim();
+      }
+
+      apiFetch("/api/virtual-input/license", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+      })
+        .then(async (response) => {
+          const status = await response.json();
+          if (!response.ok) {
+            throw new Error(status.error || this.$t('troubleshooting.virtualhid_license_request_failed'));
+          }
+          this.applyLicenseStatus(status);
+          if (action === 'activate' && status.operation_ok) {
+            this.licenseKey = '';
+          }
+        })
+        .catch((error) => {
+          this.licenseError = error.message;
+        })
+        .finally(() => {
+          body.license_key = '';
+          this.licenseBusy = false;
+        });
+    },
+    licenseStatusClass() {
+      if (this.virtualhidLicense.state === 'licensed') {
+        return 'badge text-bg-success';
+      }
+      if (['expired', 'disabled', 'invalid'].includes(this.virtualhidLicense.state)) {
+        return 'badge text-bg-danger';
+      }
+      return 'badge text-bg-secondary';
+    },
+    licenseStatusText() {
+      const key = `troubleshooting.virtualhid_license_state_${this.virtualhidLicense.state}`;
+      return this.$t(key);
+    },
+    licenseActivationText() {
+      if (!this.virtualhidLicense.activation_limit) {
+        return this.$t('troubleshooting.virtualhid_license_not_reported');
+      }
+      return `${this.virtualhidLicense.activation_usage} / ${this.virtualhidLicense.activation_limit}`;
+    },
+    driverVersion(driver) {
+      if (!driver.installed) {
+        return this.$t('troubleshooting.driver_not_installed');
+      }
+      return driver.version || this.$t('troubleshooting.driver_version_unknown');
+    },
+    driverStatusClass(driver) {
+      if (!driver.installed) {
+        return 'badge text-bg-secondary';
+      }
+      return driver.version_compatible ? 'badge text-bg-success' : 'badge text-bg-danger';
+    },
+    driverStatusText(driver) {
+      if (!driver.installed) {
+        return this.$t('troubleshooting.driver_status_not_installed');
+      }
+      if (driver.version_compatible) {
+        return this.$t('troubleshooting.driver_status_compatible');
+      }
+      return this.$t('troubleshooting.driver_status_unsupported');
+    },
+    navigateToLog(direction) {
+      const indices = this.errorWarningEntries;
+      if (indices.length === 0) return;
+
+      let targetIndex;
+
+      if (direction === 'next') {
+        if (this.currentLogIndex === -1) {
+          targetIndex = indices[0];
+        } else {
+          const nextIndices = indices.filter((i) => i > this.currentLogIndex);
+          if (nextIndices.length === 0) return;
+          targetIndex = nextIndices[0];
+        }
+      } else if (direction === 'prev') {
+        if (this.currentLogIndex === -1) return;
+        const prevIndices = indices.filter((i) => i < this.currentLogIndex);
+        if (prevIndices.length === 0) return;
+        targetIndex = prevIndices[prevIndices.length - 1];
+      } else {
+        return;
+      }
+
+      this.currentLogIndex = targetIndex;
+
+      this.$nextTick(() => {
+        const container = this.$refs.logsContainer;
+        if (!container) return;
+
+        const el = container.querySelector(`[data-entry-index="${targetIndex}"]`);
+        if (!el) return;
+
+        // Ensure it's visible even for tall multi-line entries.
+        const containerRect = container.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        const relativeTop = elRect.top - containerRect.top;
+
+        container.scrollTop = container.scrollTop + relativeTop - containerRect.height * 0.15;
+      });
+    },
+    scrollLogsTo(where) {
+      const container = this.$refs.logsContainer;
+      if (!container) return;
+
+      // Reset the selected error/warning index when jumping to top or bottom
+      this.currentLogIndex = -1;
+
+      if (where === 'top') {
+        container.scrollTo({ top: 0, behavior: 'smooth' });
+        return;
+      }
+
+      if (where === 'bottom') {
+        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+      }
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/troubleshooting.html b/src_assets/common/assets/web/src/views/troubleshooting.html
deleted file mode 100644
index 75e0fa290bd..00000000000
--- a/src_assets/common/assets/web/src/views/troubleshooting.html
+++ /dev/null
@@ -1,1181 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-      <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <h1 class="my-4">{{ $t('troubleshooting.troubleshooting') }}</h1>
-    <!-- Virtual input driver and license -->
-    <div class="card my-4 virtual-gamepad-card" v-if="platform === 'windows'">
-      <div class="card-body">
-        <header class="virtual-gamepad-hero">
-          <div class="virtual-gamepad-heading-icon" aria-hidden="true">
-            <gamepad-2 :size="28"></gamepad-2>
-          </div>
-          <div>
-            <h2 id="virtualhid" class="mb-1">{{ $t('troubleshooting.virtual_gamepad') }}</h2>
-            <p class="mb-0">{{ $t('troubleshooting.virtual_gamepad_desc') }}</p>
-          </div>
-        </header>
-
-        <div class="virtual-gamepad-feature-grid" :aria-label="$t('troubleshooting.virtualhid_benefits_title')">
-          <article class="virtual-gamepad-feature">
-            <div class="virtual-gamepad-feature-icon" aria-hidden="true">
-              <gamepad-2 :size="21"></gamepad-2>
-            </div>
-            <div>
-              <h3>{{ $t('troubleshooting.virtualhid_benefit_gamepads_title') }}</h3>
-              <p>{{ $t('troubleshooting.virtualhid_benefit_gamepads') }}</p>
-            </div>
-          </article>
-          <article class="virtual-gamepad-feature">
-            <div class="virtual-gamepad-feature-icon" aria-hidden="true">
-              <mouse-pointer-2 :size="21"></mouse-pointer-2>
-            </div>
-            <div>
-              <h3>{{ $t('troubleshooting.virtualhid_benefit_mouse_title') }}</h3>
-              <p>{{ $t('troubleshooting.virtualhid_benefit_mouse') }}</p>
-            </div>
-          </article>
-          <article class="virtual-gamepad-feature">
-            <div class="virtual-gamepad-feature-icon" aria-hidden="true">
-              <sparkles :size="21"></sparkles>
-            </div>
-            <div>
-              <h3>{{ $t('troubleshooting.virtualhid_benefit_features_title') }}</h3>
-              <p>{{ $t('troubleshooting.virtualhid_benefit_features') }}</p>
-            </div>
-          </article>
-          <article class="virtual-gamepad-feature">
-            <div class="virtual-gamepad-feature-icon" aria-hidden="true">
-              <shield-check :size="21"></shield-check>
-            </div>
-            <div>
-              <h3>{{ $t('troubleshooting.virtualhid_benefit_maintained_title') }}</h3>
-              <p>{{ $t('troubleshooting.virtualhid_benefit_maintained') }}</p>
-            </div>
-          </article>
-        </div>
-
-        <section class="virtual-gamepad-section">
-          <div class="virtual-gamepad-section-heading">
-            <div>
-              <h3 class="h4 mb-1">{{ $t('troubleshooting.virtual_gamepad_drivers') }}</h3>
-              <p class="mb-0">{{ $t('troubleshooting.virtual_gamepad_drivers_desc') }}</p>
-            </div>
-            <button class="btn btn-outline-secondary driver-refresh-button"
-                    type="button"
-                    @click="refreshDriverInformation">
-              <refresh-cw :size="17" :class="{ 'driver-release-spinning': driverReleaseLoading }"></refresh-cw>
-              {{ $t('troubleshooting.driver_refresh') }}
-            </button>
-          </div>
-
-          <div class="table-responsive driver-table-shell">
-            <table class="table align-middle mb-0">
-              <thead>
-                <tr>
-                  <th scope="col">{{ $t('troubleshooting.driver_name') }}</th>
-                  <th scope="col">{{ $t('troubleshooting.driver_installed_version') }}</th>
-                  <th scope="col">{{ $t('troubleshooting.driver_latest_version') }}</th>
-                  <th scope="col">{{ $t('troubleshooting.driver_supported_versions') }}</th>
-                  <th scope="col">{{ $t('troubleshooting.driver_status') }}</th>
-                  <th scope="col" class="driver-download-column">
-                    <span class="visually-hidden">{{ $t('troubleshooting.driver_download') }}</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th scope="row">{{ $t('troubleshooting.virtualhid_driver') }}</th>
-                  <td>{{ driverVersion(virtualhid) }}</td>
-                  <td>
-                    <div class="driver-release-state"
-                         :class="driverReleaseStateClass(virtualhid, virtualhidRelease)"
-                         :title="driverReleaseStatusText(virtualhid, virtualhidRelease)"
-                         aria-live="polite">
-                      <refresh-cw v-if="virtualhidRelease.loading"
-                                  :size="17"
-                                  class="driver-release-spinning"></refresh-cw>
-                      <check-circle v-else-if="driverReleaseState(virtualhid, virtualhidRelease) === 'current'"
-                                    :size="17"></check-circle>
-                      <alert-triangle v-else-if="driverReleaseState(virtualhid, virtualhidRelease) === 'outdated'"
-                                      :size="17"></alert-triangle>
-                      <alert-circle v-else :size="17"></alert-circle>
-                      <span>{{ driverLatestVersion(virtualhidRelease) }}</span>
-                    </div>
-                    <small class="driver-release-detail">{{ driverReleaseStatusText(virtualhid, virtualhidRelease) }}</small>
-                  </td>
-                  <td>{{ virtualhid.supported_versions }}</td>
-                  <td>
-                    <span :class="driverStatusClass(virtualhid)">
-                      {{ driverStatusText(virtualhid) }}
-                    </span>
-                  </td>
-                  <td class="driver-download-column">
-                    <a class="btn btn-outline-primary driver-download-button"
-                       :href="virtualhidRelease.url"
-                       target="_blank"
-                       rel="noopener noreferrer">
-                      <download :size="17"></download>
-                      {{ $t('troubleshooting.driver_download') }}
-                    </a>
-                  </td>
-                </tr>
-                <tr id="vigembus" v-if="showVigembus">
-                  <th scope="row">{{ $t('troubleshooting.vigembus_driver') }}</th>
-                  <td>{{ driverVersion(vigembus) }}</td>
-                  <td>
-                    <div class="driver-release-state"
-                         :class="driverReleaseStateClass(vigembus, vigembusRelease)"
-                         :title="driverReleaseStatusText(vigembus, vigembusRelease)"
-                         aria-live="polite">
-                      <refresh-cw v-if="vigembusRelease.loading"
-                                  :size="17"
-                                  class="driver-release-spinning"></refresh-cw>
-                      <check-circle v-else-if="driverReleaseState(vigembus, vigembusRelease) === 'current'"
-                                    :size="17"></check-circle>
-                      <alert-triangle v-else-if="driverReleaseState(vigembus, vigembusRelease) === 'outdated'"
-                                      :size="17"></alert-triangle>
-                      <alert-circle v-else :size="17"></alert-circle>
-                      <span>{{ driverLatestVersion(vigembusRelease) }}</span>
-                    </div>
-                    <small class="driver-release-detail">{{ driverReleaseStatusText(vigembus, vigembusRelease) }}</small>
-                  </td>
-                  <td>{{ vigembus.supported_versions }}</td>
-                  <td>
-                    <span :class="driverStatusClass(vigembus)">
-                      {{ driverStatusText(vigembus) }}
-                    </span>
-                  </td>
-                  <td class="driver-download-column">
-                    <a class="btn btn-outline-primary driver-download-button"
-                       :href="vigembusRelease.url"
-                       target="_blank"
-                       rel="noopener noreferrer">
-                      <download :size="17"></download>
-                      {{ $t('troubleshooting.driver_download') }}
-                    </a>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        <section class="virtualhid-license-section" aria-labelledby="virtualhid-license">
-          <div class="virtualhid-license-heading">
-            <div>
-              <h3 id="virtualhid-license" class="h4 mb-1">{{ $t('troubleshooting.virtualhid_license') }}</h3>
-              <p class="mb-0">{{ $t('troubleshooting.virtualhid_license_desc') }}</p>
-            </div>
-            <span :class="licenseStatusClass()">{{ licenseStatusText() }}</span>
-          </div>
-
-          <div class="alert alert-danger alert-inline" role="alert" v-if="licenseError">
-            <alert-circle :size="18" class="icon flex-shrink-0"></alert-circle>
-            <span>{{ licenseError }}</span>
-          </div>
-          <div class="alert alert-warning alert-inline" role="alert" v-else-if="!virtualhidLicense.service_available">
-            <alert-triangle :size="18" class="icon flex-shrink-0"></alert-triangle>
-            <span>{{ virtualhidLicense.message || $t('troubleshooting.virtualhid_license_unavailable') }}</span>
-          </div>
-
-          <div class="virtualhid-license-stats">
-            <dl class="virtualhid-license-stat" v-if="virtualhidLicense.plan_name">
-              <dt>{{ $t('troubleshooting.virtualhid_license_plan') }}</dt>
-              <dd>{{ virtualhidLicense.plan_name }}</dd>
-            </dl>
-            <dl class="virtualhid-license-stat">
-              <dt>{{ $t('troubleshooting.virtualhid_license_activations') }}</dt>
-              <dd>{{ licenseActivationText() }}</dd>
-            </dl>
-            <dl class="virtualhid-license-stat">
-              <dt>{{ $t('troubleshooting.virtualhid_license_active_devices') }}</dt>
-              <dd>{{ virtualhidLicense.active_devices }}</dd>
-            </dl>
-            <dl class="virtualhid-license-stat" v-if="virtualhidLicense.customer_email">
-              <dt>{{ $t('troubleshooting.virtualhid_license_customer') }}</dt>
-              <dd>{{ virtualhidLicense.customer_email }}</dd>
-            </dl>
-          </div>
-
-          <p class="virtualhid-license-message"
-             v-if="virtualhidLicense.message && virtualhidLicense.service_available">
-            {{ virtualhidLicense.message }}
-          </p>
-
-          <div class="virtualhid-license-toolbar">
-            <button class="btn btn-secondary"
-                    type="button"
-                    :disabled="licenseBusy || !virtualhidLicense.service_available"
-                    @click="updateLicense('validate')">
-              <refresh-cw :size="18" :class="{ 'driver-release-spinning': licenseBusy }"></refresh-cw>
-              {{ $t('troubleshooting.virtualhid_license_refresh') }}
-            </button>
-            <a class="btn btn-outline-primary"
-               v-if="virtualhidLicense.manage_account_url"
-               :href="virtualhidLicense.manage_account_url"
-               target="_blank"
-               rel="noopener noreferrer">
-              <external-link :size="18"></external-link>
-              {{ $t('troubleshooting.virtualhid_license_manage') }}
-            </a>
-            <a class="btn btn-success"
-               v-if="virtualhidLicense.purchase_url && !virtualhidLicense.licensed"
-               :href="virtualhidLicense.purchase_url"
-               target="_blank"
-               rel="noopener noreferrer">
-              {{ $t('troubleshooting.virtualhid_license_buy') }}
-            </a>
-            <button class="btn btn-outline-danger"
-                    type="button"
-                    v-if="virtualhidLicense.licensed"
-                    :disabled="licenseBusy || !virtualhidLicense.service_available"
-                    @click="updateLicense('deactivate')">
-              {{ $t('troubleshooting.virtualhid_license_deactivate') }}
-            </button>
-          </div>
-
-          <div class="virtualhid-license-activation" v-if="!virtualhidLicense.licensed">
-            <label for="virtualhid-license-key" class="form-label">
-              {{ $t('troubleshooting.virtualhid_license_key') }}
-            </label>
-            <div class="input-group virtualhid-license-input">
-              <input id="virtualhid-license-key"
-                     class="form-control"
-                     type="password"
-                     v-model="licenseKey"
-                     :placeholder="$t('troubleshooting.virtualhid_license_key_placeholder')"
-                     :disabled="licenseBusy || !virtualhidLicense.service_available"
-                     autocomplete="off"
-                     autocapitalize="off"
-                     spellcheck="false"
-                     @keyup.enter="updateLicense('activate')" />
-              <button class="btn btn-primary"
-                      type="button"
-                      :disabled="licenseBusy || !virtualhidLicense.service_available || !licenseKey.trim()"
-                      @click="updateLicense('activate')">
-                <key-round :size="18"></key-round>
-                {{ $t('troubleshooting.virtualhid_license_activate') }}
-              </button>
-            </div>
-            <div class="form-text">{{ $t('troubleshooting.virtualhid_license_key_desc') }}</div>
-          </div>
-
-          <div class="virtualhid-license-active" v-else>
-            <check-circle :size="22" aria-hidden="true"></check-circle>
-            <div>
-              <strong>{{ $t('troubleshooting.virtualhid_license_machine_activated') }}</strong>
-              <p class="mb-0">{{ $t('troubleshooting.virtualhid_license_machine_activated_desc') }}</p>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-    <!-- Force Close App -->
-    <div class="card my-4">
-      <div class="card-body">
-        <h2 id="close_apps">{{ $t('troubleshooting.force_close') }}</h2>
-        <p>{{ $t('troubleshooting.force_close_desc') }}</p>
-        <div class="alert alert-success" v-if="closeAppStatus === true">
-          <check-circle :size="18" class="icon"></check-circle>
-          {{ $t('troubleshooting.force_close_success') }}
-        </div>
-        <div class="alert alert-danger" v-if="closeAppStatus === false">
-          <alert-circle :size="18" class="icon"></alert-circle>
-          {{ $t('troubleshooting.force_close_error') }}
-        </div>
-        <div>
-          <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
-            <x-circle :size="18" class="icon"></x-circle>
-            {{ $t('troubleshooting.force_close') }}
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- Restart Sunshine -->
-    <div class="card my-4">
-      <div class="card-body">
-        <h2 id="restart">{{ $t('troubleshooting.restart_sunshine') }}</h2>
-        <p>{{ $t('troubleshooting.restart_sunshine_desc') }}</p>
-        <div class="alert alert-success" v-if="restartPressed === true">
-          <check-circle :size="18" class="icon"></check-circle>
-          {{ $t('troubleshooting.restart_sunshine_success') }}
-        </div>
-        <div>
-          <button class="btn btn-warning" :disabled="restartPressed" @click="restart">
-            <refresh-cw :size="18" class="icon"></refresh-cw>
-            {{ $t('troubleshooting.restart_sunshine') }}
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- Reset persistent display device settings -->
-    <div class="card my-4" v-if="platform === 'windows'">
-      <div class="card-body">
-        <h2 id="dd_reset">{{ $t('troubleshooting.dd_reset') }}</h2>
-        <p style="white-space: pre-line">{{ $t('troubleshooting.dd_reset_desc') }}</p>
-        <div class="alert alert-success" v-if="ddResetStatus === true">
-          <check-circle :size="18" class="icon"></check-circle>
-          {{ $t('troubleshooting.dd_reset_success') }}
-        </div>
-        <div class="alert alert-danger" v-if="ddResetStatus === false">
-          <alert-circle :size="18" class="icon"></alert-circle>
-          {{ $t('troubleshooting.dd_reset_error') }}
-        </div>
-        <div>
-          <button class="btn btn-warning" :disabled="ddResetPressed" @click="ddResetPersistence">
-            <rotate-ccw :size="18" class="icon"></rotate-ccw>
-            {{ $t('troubleshooting.dd_reset') }}
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- Unpair Clients -->
-    <div class="card my-4">
-      <div class="card-body">
-        <div class="d-flex justify-content-between align-items-center mb-3">
-          <h2 id="unpair" class="mb-0">{{ $t('troubleshooting.unpair_title') }}</h2>
-          <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
-            <trash-2 :size="18" class="icon"></trash-2>
-            {{ $t('troubleshooting.unpair_all') }}
-          </button>
-        </div>
-        <p>{{ $t('troubleshooting.unpair_desc') }}</p>
-        <div class="alert alert-success d-flex align-items-center" v-if="showApplyMessage">
-          <check-circle :size="18" class="icon"></check-circle>
-          <div><b>{{ $t('_common.success') }}</b> {{ $t('troubleshooting.unpair_single_success') }}</div>
-          <button class="btn btn-success ms-auto" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
-        </div>
-        <div class="alert alert-success" v-if="unpairAllStatus === true">
-          <check-circle :size="18" class="icon"></check-circle>
-          {{ $t('troubleshooting.unpair_all_success') }}
-        </div>
-        <div class="alert alert-danger" v-if="unpairAllStatus === false">
-          <alert-circle :size="18" class="icon"></alert-circle>
-          {{ $t('troubleshooting.unpair_all_error') }}
-        </div>
-      </div>
-      <ul class="list-group list-group-flush" v-if="clients && clients.length > 0">
-        <li v-for="client in clients" :key="client.uuid" class="list-group-item d-flex align-items-center">
-          <div class="flex-grow-1">
-            {{ client.name !== "" ? client.name : $t('troubleshooting.unpair_single_unknown') }}
-          </div>
-          <div class="form-check form-switch ms-2 mb-0">
-            <input class="form-check-input" type="checkbox" role="switch"
-                   :id="'toggle-' + client.uuid"
-                   :checked="client.enabled"
-                   :aria-checked="client.enabled.toString()"
-                   @change="toggleClient(client.uuid, !client.enabled)">
-          </div>
-          <button class="btn btn-danger btn-sm ms-2" @click="unpairSingle(client.uuid)">
-            <trash-2 :size="18" class="icon"></trash-2>
-          </button>
-        </li>
-      </ul>
-      <ul v-else class="list-group list-group-flush">
-        <li class="list-group-item p-3 text-center">
-          <em>{{ $t('troubleshooting.unpair_single_no_devices') }}</em>
-        </li>
-      </ul>
-    </div>
-    <!-- Logs -->
-    <div class="card my-4">
-      <div class="card-body">
-        <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
-        <div class="d-flex justify-content-between align-items-baseline py-2">
-          <p>{{ $t('troubleshooting.logs_desc') }}</p>
-          <div class="input-group" style="max-width: 300px">
-            <span class="input-group-text">
-              <search :size="18" class="icon"></search>
-            </span>
-            <input type="text" class="form-control" v-model="logFilter" :placeholder="$t('troubleshooting.logs_find')" />
-          </div>
-        </div>
-        <div>
-          <div class="troubleshooting-logs" ref="logsContainer">
-            <div class="log-nav-overlay">
-              <div class="log-nav-controls">
-                <button class="log-nav-btn" @click="scrollLogsTo('top')" title="Jump to Top">
-                  <chevrons-up :size="18" class="icon"></chevrons-up>
-                </button>
-                <button class="log-nav-btn" @click="navigateToLog('prev')" :disabled="!hasPrevLog" title="Previous Warning/Error">
-                  <chevron-up :size="18" class="icon"></chevron-up>
-                </button>
-                <button class="log-nav-btn" @click="navigateToLog('next')" :disabled="!hasNextLog" title="Next Warning/Error">
-                  <chevron-down :size="18" class="icon"></chevron-down>
-                </button>
-                <button class="log-nav-btn" @click="scrollLogsTo('bottom')" title="Jump to Bottom">
-                  <chevrons-down :size="18" class="icon"></chevrons-down>
-                </button>
-                <button class="log-nav-btn" @click="copyLogs" title="Copy Logs">
-                  <check :size="18" class="icon text-success" v-if="logsCopied"></check>
-                  <copy :size="18" class="icon" v-else></copy>
-                </button>
-              </div>
-            </div>
-            <pre class="mb-0" v-html="highlightedLogs"></pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script type="module">
-    import { createApp } from 'vue'
-    import { initApp } from './init'
-    import Navbar from './Navbar.vue'
-    import { apiFetch } from './fetch_utils'
-    import {
-      AlertCircle,
-      AlertTriangle,
-      Check,
-      CheckCircle,
-      ChevronDown,
-      ChevronUp,
-      ChevronsDown,
-      ChevronsUp,
-      Copy,
-      Download,
-      ExternalLink,
-      Gamepad2,
-      KeyRound,
-      MousePointer2,
-      RefreshCw,
-      RotateCcw,
-      Search,
-      ShieldCheck,
-      Sparkles,
-      Trash2,
-      XCircle,
-    } from '@lucide/vue'
-
-    const app = createApp({
-      components: {
-        Navbar,
-        AlertCircle,
-        AlertTriangle,
-        Check,
-        CheckCircle,
-        ChevronDown,
-        ChevronUp,
-        ChevronsDown,
-        ChevronsUp,
-        Copy,
-        Download,
-        ExternalLink,
-        Gamepad2,
-        KeyRound,
-        MousePointer2,
-        RefreshCw,
-        RotateCcw,
-        Search,
-        ShieldCheck,
-        Sparkles,
-        Trash2,
-        XCircle,
-      },
-      data() {
-        return {
-          clients: [],
-          closeAppPressed: false,
-          closeAppStatus: null,
-          ddResetPressed: false,
-          ddResetStatus: null,
-          logsCopied: false,
-          logs: 'Loading...',
-          logFilter: null,
-          logInterval: null,
-          licenseBusy: false,
-          licenseError: '',
-          licenseKey: '',
-          restartPressed: false,
-          showApplyMessage: false,
-          platform: "",
-          controllerEnabled: false,
-          virtualInputStatusLoaded: false,
-          unpairAllPressed: false,
-          unpairAllStatus: null,
-          virtualhid: {
-            installed: false,
-            version: '',
-            version_compatible: false,
-            minimum_version: '',
-            supported_versions: '',
-          },
-          virtualhidLicense: {
-            operation_ok: false,
-            service_available: false,
-            state: 'unavailable',
-            licensed: false,
-            active_devices: 0,
-            activation_limit: 0,
-            activation_usage: 0,
-            plan_name: '',
-            customer_email: '',
-            message: '',
-            purchase_url: '',
-            manage_account_url: '',
-          },
-          virtualhidRelease: {
-            loading: false,
-            version: '',
-            url: 'https://github.com/LizardByte/libvirtualhid/releases/latest',
-            error: false,
-          },
-          vigembus: {
-            installed: false,
-            version: '',
-            version_compatible: false,
-            minimum_version: '',
-            supported_versions: '',
-          },
-          vigembusRelease: {
-            loading: false,
-            version: '',
-            url: 'https://github.com/nefarius/ViGEmBus/releases/latest',
-            error: false,
-          },
-          currentLogIndex: -1,
-          logLines: [],
-        };
-      },
-      computed: {
-        actualLogs() {
-          if (!this.logFilter) return this.logs;
-          const filterLower = this.logFilter.toLowerCase();
-          return this.logs
-            .split("\n")
-            .filter((x) => x.toLowerCase().includes(filterLower))
-            .join("\n");
-        },
-
-        /**
-         * Parse the (possibly multi-line) log output into timestamp-prefixed entries.
-         * Each entry starts with: [YYYY-MM-DD HH:MM:SS.mmm]:
-         */
-        parsedLogEntries() {
-          const text = this.actualLogs || '';
-
-          // Match on timestamp tokens, but keep everything between them as the entry body.
-          // Using a global exec loop lets us split without losing delimiters and works
-          // even when entries span multiple lines.
-          const tsRegex = /\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}\]:/g;
-
-          const entries = [];
-          const matches = Array.from(text.matchAll(tsRegex));
-
-          // If no timestamps are found, treat everything as a single entry.
-          if (matches.length === 0) {
-            const raw = text.trimEnd();
-            if (!raw) return [];
-            return [
-              {
-                index: 0,
-                raw,
-                level: 'Info',
-                cssClass: 'log-line-info',
-              },
-            ];
-          }
-
-          for (let i = 0; i < matches.length; i++) {
-            const start = matches[i].index;
-            const end = i + 1 < matches.length ? matches[i + 1].index : text.length;
-            const raw = text.slice(start, end).trimEnd();
-            if (!raw) continue;
-
-            // Determine level based on the *first* level token in the entry.
-            // Sunshine logs are typically: "[ts]: Level: message".
-            // Some messages may contain additional embedded timestamps, but we treat
-            // those as part of the entry content.
-            let level = 'Info';
-            let cssClass = 'log-line-info';
-
-            if (/\]:\s*Fatal:/i.test(raw)) {
-              level = 'Fatal';
-              cssClass = 'log-line-fatal';
-            } else if (/\]:\s*(Error|Critical):/i.test(raw)) {
-              level = 'Error';
-              cssClass = 'log-line-error';
-            } else if (/\]:\s*Warning:/i.test(raw)) {
-              level = 'Warning';
-              cssClass = 'log-line-warning';
-            } else if (/\]:\s*Debug:/i.test(raw)) {
-              level = 'Debug';
-              cssClass = 'log-line-debug';
-            }
-
-            entries.push({
-              index: entries.length,
-              raw,
-              level,
-              cssClass,
-            });
-          }
-
-          return entries;
-        },
-
-        highlightedLogs() {
-          const escapeHtml = (s) =>
-            s
-              .replaceAll('&', '&amp;')
-              .replaceAll('<', '&lt;')
-              .replaceAll('>', '&gt;')
-              .replaceAll('"', '&quot;')
-              .replaceAll("'", '&#39;');
-
-          return this.parsedLogEntries
-            .map((entry) => {
-              const safe = escapeHtml(entry.raw);
-              const isSelected = entry.index === this.currentLogIndex;
-              const selectedClass = isSelected ? ' log-entry-selected' : '';
-              return `<span data-entry-index="${entry.index}" data-log-level="${entry.cssClass}" class="${entry.cssClass}${selectedClass}">${safe}</span>`;
-            })
-            // Separate entries visually with a newline.
-            .join("\n");
-        },
-
-        errorWarningEntries() {
-          // Only navigate between warnings/errors/fatal/critical
-          return this.parsedLogEntries
-            .filter((e) => e.level === 'Warning' || e.level === 'Error' || e.level === 'Fatal')
-            .map((e) => e.index);
-        },
-
-        hasNextLog() {
-          const indices = this.errorWarningEntries;
-          if (indices.length === 0) return false;
-          if (this.currentLogIndex === -1) return true;
-          return indices.some((i) => i > this.currentLogIndex);
-        },
-
-        hasPrevLog() {
-          const indices = this.errorWarningEntries;
-          if (indices.length === 0) return false;
-          if (this.currentLogIndex === -1) return false;
-          return indices.some((i) => i < this.currentLogIndex);
-        },
-
-        driverReleaseLoading() {
-          return this.virtualhidRelease.loading || (this.showVigembus && this.vigembusRelease.loading);
-        },
-
-        showVigembus() {
-          return this.controllerEnabled && this.virtualInputStatusLoaded && (!this.virtualhid.installed || this.vigembus.installed);
-        }
-      },
-      created() {
-        this._logsCopyTimeout = null;
-        fetch("/api/config")
-          .then((r) => r.json())
-          .then((r) => {
-            this.platform = r.platform;
-            this.controllerEnabled = r.controller !== "disabled";
-            // The Virtual HID Driver also backs relative mouse input when gamepads are disabled.
-            if (this.platform === 'windows') {
-              this.refreshDriverInformation();
-              this.refreshLicenseStatus();
-            }
-          });
-
-        this.logInterval = setInterval(() => {
-          this.refreshLogs();
-        }, 5000);
-        this.refreshLogs();
-        this.refreshClients();
-      },
-      beforeDestroy() {
-        clearInterval(this.logInterval);
-      },
-      methods: {
-        refreshLogs() {
-          fetch("./api/logs",)
-            .then((r) => r.text())
-            .then((r) => {
-              this.logs = r;
-            });
-        },
-        closeApp() {
-          this.closeAppPressed = true;
-          apiFetch("./api/apps/close", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            } })
-            .then((r) => r.json())
-            .then((r) => {
-              this.closeAppPressed = false;
-              this.closeAppStatus = r.status;
-              setTimeout(() => {
-                this.closeAppStatus = null;
-              }, 5000);
-            });
-        },
-        unpairAll() {
-          this.unpairAllPressed = true;
-          apiFetch("./api/clients/unpair-all", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            }
-           })
-            .then((r) => r.json())
-            .then((r) => {
-              this.unpairAllPressed = false;
-              this.unpairAllStatus = r.status;
-              setTimeout(() => {
-                this.unpairAllStatus = null;
-              }, 5000);
-              this.refreshClients();
-            });
-        },
-        unpairSingle(uuid) {
-          apiFetch("./api/clients/unpair", {
-            method: "POST",
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ uuid })
-          }).then(() => {
-            this.showApplyMessage = true;
-            this.refreshClients();
-          });
-        },
-        toggleClient(uuid, enabled) {
-          fetch("./api/clients/update", {
-            method: "POST",
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ uuid, enabled })
-          }).then(() => {
-            this.refreshClients();
-          });
-        },
-        refreshClients() {
-          fetch("./api/clients/list")
-            .then((response) => response.json())
-            .then((response) => {
-              const clientList = document.querySelector("#client-list");
-              if (response.status === true && response.named_certs && response.named_certs.length) {
-                this.clients = response.named_certs.sort((a, b) => {
-                  return (a.name.toLowerCase() > b.name.toLowerCase() || a.name === "" ? 1 : -1)
-                });
-              } else {
-                this.clients = [];
-              }
-            });
-        },
-        clickedApplyBanner() {
-          this.showApplyMessage = false;
-        },
-        copyLogs() {
-          // Copy the filtered view if a filter is active.
-          navigator.clipboard.writeText(this.actualLogs).then(() => {
-            // Clear any existing reset timer (handles rapid successive clicks).
-            if (this._logsCopyTimeout) clearTimeout(this._logsCopyTimeout);
-
-            // Show checkmark feedback.
-            this.logsCopied = true;
-
-            // Revert icon after 2 seconds.
-            this._logsCopyTimeout = setTimeout(() => {
-              this.logsCopied = false;
-            }, 2000);
-          }).catch((err) => {
-            console.error('Failed to copy logs:', err);
-          });
-        },
-        restart() {
-          this.restartPressed = true;
-          setTimeout(() => {
-            this.restartPressed = false;
-          }, 5000);
-          apiFetch("./api/restart", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            }
-          });
-        },
-        ddResetPersistence() {
-          this.ddResetPressed = true;
-          apiFetch("/api/reset-display-device-persistence", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json"
-            }
-          })
-            .then((r) => r.json())
-            .then((r) => {
-              this.ddResetPressed = false;
-              this.ddResetStatus = r.status;
-              setTimeout(() => {
-                this.ddResetStatus = null;
-              }, 5000);
-            });
-        },
-        /**
-         * @brief Refresh the installed driver details and latest stable GitHub releases.
-         */
-        refreshDriverInformation() {
-          this.refreshVirtualInputStatus();
-          this.refreshDriverReleases();
-        },
-        /**
-         * @brief Refresh the latest stable release metadata for the Windows virtual input drivers.
-         */
-        refreshDriverReleases() {
-          this.updateLatestRelease(
-            'virtualhidRelease',
-            'LizardByte/libvirtualhid',
-            'https://github.com/LizardByte/libvirtualhid/releases/latest',
-          );
-          this.updateLatestRelease(
-            'vigembusRelease',
-            'nefarius/ViGEmBus',
-            'https://github.com/nefarius/ViGEmBus/releases/latest',
-          );
-        },
-        /**
-         * @brief Fetch one repository's latest non-prerelease release from GitHub.
-         *
-         * @param {string} property Component data property that stores the release metadata.
-         * @param {string} repository GitHub repository in owner/name form.
-         * @param {string} fallbackUrl Releases page used if the API request fails.
-         */
-        updateLatestRelease(property, repository, fallbackUrl) {
-          this[property] = {
-            ...this[property],
-            loading: true,
-            error: false,
-          };
-
-          fetch(`https://api.github.com/repos/${repository}/releases/latest`, {
-            headers: {
-              Accept: 'application/vnd.github+json',
-            },
-          })
-            .then((response) => {
-              if (!response.ok) {
-                throw new Error(`GitHub returned ${response.status}`);
-              }
-              return response.json();
-            })
-            .then((release) => {
-              if (!release.tag_name || release.draft || release.prerelease) {
-                throw new Error('GitHub did not return a stable release');
-              }
-              this[property] = {
-                loading: false,
-                version: release.tag_name,
-                url: release.html_url || fallbackUrl,
-                error: false,
-              };
-            })
-            .catch((error) => {
-              console.error(`Failed to fetch the latest ${repository} release:`, error);
-              this[property] = {
-                loading: false,
-                version: '',
-                url: fallbackUrl,
-                error: true,
-              };
-            });
-        },
-        refreshVirtualInputStatus() {
-          fetch("/api/virtual-input/status")
-            .then((r) => r.json())
-            .then((r) => {
-              const virtualhid = r.virtualhid || {};
-              const vigembus = r.vigembus || {};
-              this.virtualhid = {
-                installed: virtualhid.installed || false,
-                version: virtualhid.version || '',
-                version_compatible: virtualhid.version_compatible || false,
-                minimum_version: virtualhid.minimum_version || '',
-                supported_versions: virtualhid.supported_versions || '',
-              };
-              this.vigembus = {
-                installed: vigembus.installed || false,
-                version: vigembus.version || '',
-                version_compatible: vigembus.version_compatible || false,
-                minimum_version: vigembus.minimum_version || '',
-                supported_versions: vigembus.supported_versions || '',
-              };
-              this.virtualInputStatusLoaded = true;
-            })
-            .catch((err) => {
-              console.error("Failed to fetch virtual input driver status:", err);
-            });
-        },
-        /**
-         * @brief Parse a numeric dotted driver or release version.
-         *
-         * @param {string} version Version string, optionally prefixed with "v".
-         * @return {number[]|null} Numeric version parts, or null for an invalid version.
-         */
-        parseDriverVersion(version) {
-          const match = /^v?(\d+(?:\.\d+)*)/i.exec(String(version || '').trim());
-          return match ? match[1].split('.').map(Number) : null;
-        },
-        /**
-         * @brief Compare installed and latest driver versions.
-         *
-         * @param {string} installedVersion Installed driver version.
-         * @param {string} latestVersion Latest stable release version.
-         * @return {number|null} Negative if outdated, zero if equal, positive if newer, or null if invalid.
-         */
-        compareDriverVersions(installedVersion, latestVersion) {
-          const installedParts = this.parseDriverVersion(installedVersion);
-          const latestParts = this.parseDriverVersion(latestVersion);
-          if (!installedParts || !latestParts) {
-            return null;
-          }
-
-          const partCount = Math.max(installedParts.length, latestParts.length);
-          for (let index = 0; index < partCount; ++index) {
-            const installedPart = installedParts[index] || 0;
-            const latestPart = latestParts[index] || 0;
-            if (installedPart !== latestPart) {
-              return installedPart > latestPart ? 1 : -1;
-            }
-          }
-          return 0;
-        },
-        /**
-         * @brief Get the availability state for one installed driver and GitHub release.
-         *
-         * @param {object} driver Installed driver status.
-         * @param {object} release Latest GitHub release status.
-         * @return {string} Release state used to select the icon and message.
-         */
-        driverReleaseState(driver, release) {
-          if (release.loading) {
-            return 'loading';
-          }
-          if (release.error || !release.version) {
-            return 'unavailable';
-          }
-          if (!driver.installed) {
-            return 'not-installed';
-          }
-
-          const comparison = this.compareDriverVersions(driver.version, release.version);
-          if (comparison === null) {
-            return 'unknown';
-          }
-          return comparison >= 0 ? 'current' : 'outdated';
-        },
-        /**
-         * @brief Get the localized release comparison message for a driver.
-         *
-         * @param {object} driver Installed driver status.
-         * @param {object} release Latest GitHub release status.
-         * @return {string} Localized release comparison message.
-         */
-        driverReleaseStatusText(driver, release) {
-          const state = this.driverReleaseState(driver, release).replace('-', '_');
-          return this.$t(`troubleshooting.driver_release_${state}`);
-        },
-        /**
-         * @brief Get a theme-aware text class for a driver release state.
-         *
-         * @param {object} driver Installed driver status.
-         * @param {object} release Latest GitHub release status.
-         * @return {string} CSS class for the release icon and version.
-         */
-        driverReleaseStateClass(driver, release) {
-          const state = this.driverReleaseState(driver, release);
-          if (state === 'current') {
-            return 'driver-release-current';
-          }
-          if (state === 'outdated') {
-            return 'driver-release-outdated';
-          }
-          return 'driver-release-neutral';
-        },
-        /**
-         * @brief Format a latest release version for the drivers table.
-         *
-         * @param {object} release Latest GitHub release status.
-         * @return {string} Release version or a localized placeholder.
-         */
-        driverLatestVersion(release) {
-          if (release.loading) {
-            return this.$t('troubleshooting.driver_release_checking');
-          }
-          return release.version || this.$t('troubleshooting.driver_release_unavailable');
-        },
-        applyLicenseStatus(status) {
-          this.virtualhidLicense = {
-            ...this.virtualhidLicense,
-            ...status,
-          };
-          this.licenseError = status.error || '';
-        },
-        refreshLicenseStatus() {
-          this.licenseBusy = true;
-          this.licenseError = '';
-          fetch("/api/virtual-input/license")
-            .then(async (response) => {
-              const status = await response.json();
-              if (!response.ok) {
-                throw new Error(status.error || this.$t('troubleshooting.virtualhid_license_request_failed'));
-              }
-              this.applyLicenseStatus(status);
-            })
-            .catch((error) => {
-              this.licenseError = error.message;
-            })
-            .finally(() => {
-              this.licenseBusy = false;
-            });
-        },
-        updateLicense(action) {
-          if (this.licenseBusy || (action === 'activate' && !this.licenseKey.trim())) {
-            return;
-          }
-
-          this.licenseBusy = true;
-          this.licenseError = '';
-          const body = { action };
-          if (action === 'activate') {
-            body.license_key = this.licenseKey.trim();
-          }
-
-          apiFetch("/api/virtual-input/license", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(body),
-          })
-            .then(async (response) => {
-              const status = await response.json();
-              if (!response.ok) {
-                throw new Error(status.error || this.$t('troubleshooting.virtualhid_license_request_failed'));
-              }
-              this.applyLicenseStatus(status);
-              if (action === 'activate' && status.operation_ok) {
-                this.licenseKey = '';
-              }
-            })
-            .catch((error) => {
-              this.licenseError = error.message;
-            })
-            .finally(() => {
-              body.license_key = '';
-              this.licenseBusy = false;
-            });
-        },
-        licenseStatusClass() {
-          if (this.virtualhidLicense.state === 'licensed') {
-            return 'badge text-bg-success';
-          }
-          if (['expired', 'disabled', 'invalid'].includes(this.virtualhidLicense.state)) {
-            return 'badge text-bg-danger';
-          }
-          return 'badge text-bg-secondary';
-        },
-        licenseStatusText() {
-          const key = `troubleshooting.virtualhid_license_state_${this.virtualhidLicense.state}`;
-          return this.$t(key);
-        },
-        licenseActivationText() {
-          if (!this.virtualhidLicense.activation_limit) {
-            return this.$t('troubleshooting.virtualhid_license_not_reported');
-          }
-          return `${this.virtualhidLicense.activation_usage} / ${this.virtualhidLicense.activation_limit}`;
-        },
-        driverVersion(driver) {
-          if (!driver.installed) {
-            return this.$t('troubleshooting.driver_not_installed');
-          }
-          return driver.version || this.$t('troubleshooting.driver_version_unknown');
-        },
-        driverStatusClass(driver) {
-          if (!driver.installed) {
-            return 'badge text-bg-secondary';
-          }
-          return driver.version_compatible ? 'badge text-bg-success' : 'badge text-bg-danger';
-        },
-        driverStatusText(driver) {
-          if (!driver.installed) {
-            return this.$t('troubleshooting.driver_status_not_installed');
-          }
-          if (driver.version_compatible) {
-            return this.$t('troubleshooting.driver_status_compatible');
-          }
-          return this.$t('troubleshooting.driver_status_unsupported');
-        },
-        navigateToLog(direction) {
-          const indices = this.errorWarningEntries;
-          if (indices.length === 0) return;
-
-          let targetIndex;
-
-          if (direction === 'next') {
-            if (this.currentLogIndex === -1) {
-              targetIndex = indices[0];
-            } else {
-              const nextIndices = indices.filter((i) => i > this.currentLogIndex);
-              if (nextIndices.length === 0) return;
-              targetIndex = nextIndices[0];
-            }
-          } else if (direction === 'prev') {
-            if (this.currentLogIndex === -1) return;
-            const prevIndices = indices.filter((i) => i < this.currentLogIndex);
-            if (prevIndices.length === 0) return;
-            targetIndex = prevIndices[prevIndices.length - 1];
-          } else {
-            return;
-          }
-
-          this.currentLogIndex = targetIndex;
-
-          this.$nextTick(() => {
-            const container = this.$refs.logsContainer;
-            if (!container) return;
-
-            const el = container.querySelector(`[data-entry-index="${targetIndex}"]`);
-            if (!el) return;
-
-            // Ensure it's visible even for tall multi-line entries.
-            const containerRect = container.getBoundingClientRect();
-            const elRect = el.getBoundingClientRect();
-            const relativeTop = elRect.top - containerRect.top;
-
-            container.scrollTop = container.scrollTop + relativeTop - containerRect.height * 0.15;
-          });
-        },
-        scrollLogsTo(where) {
-          const container = this.$refs.logsContainer;
-          if (!container) return;
-
-          // Reset the selected error/warning index when jumping to top or bottom
-          this.currentLogIndex = -1;
-
-          if (where === 'top') {
-            container.scrollTo({ top: 0, behavior: 'smooth' });
-            return;
-          }
-
-          if (where === 'bottom') {
-            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
-          }
-        },
-      },
-    });
-
-    initApp(app);
-  </script>
-
-</body>

From 08d2bfa48cb59033f9aaf1ba118e90c228b45187 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 02:31:06 +0000
Subject: [PATCH 12/24] Migrate password change page

---
 .../assets/web/src/views/PasswordView.vue     | 104 ++++++++++++++-
 .../common/assets/web/src/views/password.html | 121 ------------------
 2 files changed, 98 insertions(+), 127 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/password.html

diff --git a/src_assets/common/assets/web/src/views/PasswordView.vue b/src_assets/common/assets/web/src/views/PasswordView.vue
index 2fec3f27ace..6dfb21d58cd 100644
--- a/src_assets/common/assets/web/src/views/PasswordView.vue
+++ b/src_assets/common/assets/web/src/views/PasswordView.vue
@@ -1,8 +1,100 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Password</h1>
-  <p>TODO: migrate content from src/views/password.html</p>
+  <div class="my-4">
+    <h1>{{ $t('password.password_change') }}</h1>
+    <p>{{ $t('password.password_change_desc') }}</p>
+  </div>
+  <form @submit.prevent="save">
+    <div class="card">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-6">
+            <h4>{{ $t('password.current_creds') }}</h4>
+            <FormGroup id="currentUsername" :label="$t('_common.username')">
+              <input required type="text" class="form-control" id="currentUsername"
+                v-model="passwordData.currentUsername" />
+            </FormGroup>
+            <FormGroup id="currentPassword" :label="$t('_common.password')">
+              <input autocomplete="current-password" type="password" class="form-control" id="currentPassword"
+                v-model="passwordData.currentPassword" />
+            </FormGroup>
+          </div>
+          <div class="col-md-6">
+            <h4>{{ $t('password.new_creds') }}</h4>
+            <FormGroup id="newUsername" :label="$t('_common.username')" :description="$t('password.new_username_desc')">
+              <input type="text" class="form-control" id="newUsername" v-model="passwordData.newUsername" />
+            </FormGroup>
+            <FormGroup id="newPassword" :label="$t('_common.password')">
+              <input autocomplete="new-password" required type="password" class="form-control" id="newPassword"
+                v-model="passwordData.newPassword" />
+            </FormGroup>
+            <FormGroup id="confirmNewPassword" :label="$t('password.confirm_password')">
+              <input autocomplete="new-password" required type="password" class="form-control" id="confirmNewPassword"
+                v-model="passwordData.confirmNewPassword" />
+            </FormGroup>
+          </div>
+        </div>
+        <StatusAlert :error="error" :success="success" :success-message="$t('password.success_msg')"
+          alert-class="mt-3 mb-0" />
+      </div>
+    </div>
+    <button class="btn btn-primary mt-4">
+      <save :size="18" class="icon"></save>
+      {{ $t('_common.save') }}
+    </button>
+  </form>
 </template>
+
+<script>
+import FormGroup from '@/components/FormGroup.vue'
+import StatusAlert from '@/components/StatusAlert.vue'
+import { apiFetch } from '@/utils/fetch_utils'
+import { Save } from '@lucide/vue'
+
+export default {
+  components: {
+    FormGroup,
+    StatusAlert,
+    Save,
+  },
+  data() {
+    return {
+      error: null,
+      success: false,
+      passwordData: {
+        currentUsername: "",
+        currentPassword: "",
+        newUsername: "",
+        newPassword: "",
+        confirmNewPassword: "",
+      },
+    };
+  },
+  methods: {
+    save() {
+      this.error = null;
+      apiFetch("./api/password", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(this.passwordData),
+      }).then((r) => {
+        if (r.status === 200) {
+          r.json().then((rj) => {
+            this.success = rj.status;
+            if (this.success === true) {
+              setTimeout(() => {
+                document.location.reload();
+              }, 5000);
+            } else {
+              this.error = rj.error;
+            }
+          });
+        } else {
+          this.error = "Internal Server Error";
+        }
+      });
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/password.html b/src_assets/common/assets/web/src/views/password.html
deleted file mode 100644
index f20bc9218fd..00000000000
--- a/src_assets/common/assets/web/src/views/password.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <div class="my-4">
-      <h1>{{ $t('password.password_change') }}</h1>
-      <p>{{ $t('password.password_change_desc') }}</p>
-    </div>
-    <form @submit.prevent="save">
-      <div class="card">
-        <div class="card-body">
-          <div class="row">
-            <div class="col-md-6">
-              <h4>{{ $t('password.current_creds') }}</h4>
-              <div class="mb-3">
-                <label for="currentUsername" class="form-label">{{ $t('_common.username') }}</label>
-                <input required type="text" class="form-control" id="currentUsername"
-                  v-model="passwordData.currentUsername" />
-              </div>
-              <div class="mb-3">
-                <label for="currentPassword" class="form-label">{{ $t('_common.password') }}</label>
-                <input autocomplete="current-password" type="password" class="form-control" id="currentPassword"
-                  v-model="passwordData.currentPassword" />
-              </div>
-            </div>
-            <div class="col-md-6">
-              <h4>{{ $t('password.new_creds') }}</h4>
-              <div class="mb-3">
-                <label for="newUsername" class="form-label">{{ $t('_common.username') }}</label>
-                <input type="text" class="form-control" id="newUsername" v-model="passwordData.newUsername" />
-                <div class="form-text">{{ $t('password.new_username_desc') }}</div>
-              </div>
-              <div class="mb-3">
-                <label for="newPassword" class="form-label">{{ $t('_common.password') }}</label>
-                <input autocomplete="new-password" required type="password" class="form-control" id="newPassword"
-                  v-model="passwordData.newPassword" />
-              </div>
-              <div class="mb-3">
-                <label for="confirmNewPassword" class="form-label">{{ $t('password.confirm_password') }}</label>
-                <input autocomplete="new-password" required type="password" class="form-control" id="confirmNewPassword"
-                  v-model="passwordData.confirmNewPassword" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="alert alert-danger my-3" v-if="error"><b>Error: </b>{{error}}</div>
-      <div class="alert alert-success my-3" v-if="success">
-        <b>{{ $t('_common.success') }}</b> {{ $t('password.success_msg') }}
-      </div>
-      <div class="mb-3 mt-4">
-        <button class="btn btn-primary">
-          <save :size="18" class="icon"></save>
-          {{ $t('_common.save') }}
-        </button>
-      </div>
-    </form>
-  </div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import { apiFetch } from './fetch_utils'
-  import { Save } from '@lucide/vue'
-
-  const app = createApp({
-    components: {
-      Navbar,
-      Save,
-    },
-    data() {
-      return {
-        error: null,
-        success: false,
-        passwordData: {
-          currentUsername: "",
-          currentPassword: "",
-          newUsername: "",
-          newPassword: "",
-          confirmNewPassword: "",
-        },
-      };
-    },
-    methods: {
-      save() {
-        this.error = null;
-        apiFetch("./api/password", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(this.passwordData),
-        }).then((r) => {
-          if (r.status === 200) {
-            r.json().then((rj) => {
-              this.success = rj.status;
-              if (this.success === true) {
-                setTimeout(() => {
-                  document.location.reload();
-                }, 5000);
-              } else {
-                this.error = rj.error;
-              }
-            });
-          } else {
-            this.error = "Internal Server Error";
-          }
-        });
-      },
-    },
-  });
-
-  initApp(app);
-</script>

From 1d7806ce6f4f55c8b7c5d10564327ca6dfcf8ab3 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 09:00:25 +0000
Subject: [PATCH 13/24] Fix bug with some bootstrap components not working on
 load

---
 src_assets/common/assets/web/src/utils/init.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src_assets/common/assets/web/src/utils/init.js b/src_assets/common/assets/web/src/utils/init.js
index 1383f160402..ce3ce14521d 100644
--- a/src_assets/common/assets/web/src/utils/init.js
+++ b/src_assets/common/assets/web/src/utils/init.js
@@ -5,10 +5,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 // Makes themes load and style correctly.
 import '../assets/sunshine.css'
 
-// must import even if not implicitly using here
-// https://github.com/aurelia/skeleton-navigation/issues/894
-// https://discourse.aurelia.io/t/bootstrap-import-bootstrap-breaks-dropdown-menu-in-navbar/641/9
-import 'bootstrap/dist/js/bootstrap'
+import 'bootstrap'
 
 export function initApp(app, config) {
     //Wait for locale initialization, then render

From d3207a18867d69522bf689b0cc3fa78ad8ab5cd9 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 09:00:56 +0000
Subject: [PATCH 14/24] Refactor theme swtiching logic

---
 .../assets/web/src/components/ThemeToggle.vue | 178 +++++++-----------
 .../common/assets/web/src/utils/theme.js      | 100 ++--------
 2 files changed, 86 insertions(+), 192 deletions(-)

diff --git a/src_assets/common/assets/web/src/components/ThemeToggle.vue b/src_assets/common/assets/web/src/components/ThemeToggle.vue
index f1a89f2c229..c8cc6c8bb50 100644
--- a/src_assets/common/assets/web/src/components/ThemeToggle.vue
+++ b/src_assets/common/assets/web/src/components/ThemeToggle.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { loadAutoTheme, setupThemeToggleListener } from '@/utils/theme'
-import { onMounted } from 'vue'
+import { currentTheme, loadAutoTheme, pickRandomTheme, selectTheme } from '@/utils/theme'
+import { computed, onMounted, ref } from 'vue'
 import {
   CloudMoon,
   CloudRain,
@@ -27,29 +27,76 @@ import {
   Waves,
 } from '@lucide/vue'
 
+const darkThemes = [
+  { value: 'dark', icon: Moon, labelKey: 'navbar.theme_dark' },
+  { value: 'dracula', icon: Ghost, labelKey: 'navbar.theme_dracula' },
+  { value: 'mocha', icon: Coffee, labelKey: 'navbar.theme_mocha' },
+  { value: 'ember', icon: Flame, labelKey: 'navbar.theme_ember' },
+  { value: 'rose-pine', icon: TreePine, labelKey: 'navbar.theme_rose_pine' },
+  { value: 'moonlight', icon: CloudMoon, labelKey: 'navbar.theme_moonlight' },
+  { value: 'slate', icon: Layers, labelKey: 'navbar.theme_slate' },
+  { value: 'midnight', icon: CloudRain, labelKey: 'navbar.theme_midnight' },
+  { value: 'nord', icon: Mountain, labelKey: 'navbar.theme_nord' },
+]
+
+const lightThemes = [
+  { value: 'light', icon: Sun, labelKey: 'navbar.theme_light' },
+  { value: 'alucard', icon: Droplet, labelKey: 'navbar.theme_alucard' },
+  { value: 'latte', icon: Milk, labelKey: 'navbar.theme_latte' },
+  { value: 'ember-light', icon: Sunset, labelKey: 'navbar.theme_ember_light' },
+  { value: 'rose-pine-dawn', icon: Sprout, labelKey: 'navbar.theme_rose_pine_dawn' },
+  { value: 'sunshine', icon: Sunrise, labelKey: 'navbar.theme_sunshine' },
+  { value: 'indigo', icon: Sparkles, labelKey: 'navbar.theme_indigo' },
+  { value: 'ocean', icon: Waves, labelKey: 'navbar.theme_ocean' },
+  { value: 'forest', icon: Trees, labelKey: 'navbar.theme_forest' },
+  { value: 'rose', icon: Flower, labelKey: 'navbar.theme_rose' },
+  { value: 'lavender', icon: Flower2, labelKey: 'navbar.theme_lavender' },
+  { value: 'monochrome', icon: Contrast, labelKey: 'navbar.theme_monochrome' },
+]
+
+const allThemes = [{ value: 'auto', icon: MonitorSmartphone, labelKey: 'navbar.theme_auto' }, ...darkThemes, ...lightThemes]
+const themeIcons = Object.fromEntries(allThemes.map(t => [t.value, t.icon]))
+const themeLabelKeys = Object.fromEntries(allThemes.map(t => [t.value, t.labelKey]))
+
+const activeThemeIcon = computed(() => themeIcons[currentTheme.value] || MonitorSmartphone)
+const activeThemeLabelKey = computed(() => themeLabelKeys[currentTheme.value] || 'navbar.theme_auto')
+
+const toggleEl = ref(null)
+
+function onSelect(value) {
+  selectTheme(value)
+  toggleEl.value?.focus()
+}
+
+function onRandom() {
+  const values = allThemes.map(t => t.value).filter(value => value !== 'auto')
+  onSelect(pickRandomTheme(values))
+}
+
 onMounted(() => {
   loadAutoTheme()
-  setupThemeToggleListener()
 })
 </script>
 
 <template>
   <div class="dropdown bd-mode-toggle">
-    <a class="nav-link dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false"
-      data-bs-toggle="dropdown" aria-label="{{ $t('navbar.toggle_theme') }} ({{ $t('navbar.theme_auto') }})">
+    <a ref="toggleEl" class="nav-link dropdown-toggle d-flex align-items-center" id="bd-theme" type="button"
+      aria-expanded="false" data-bs-toggle="dropdown"
+      :aria-label="`${$t('navbar.toggle_theme')} (${$t(activeThemeLabelKey)})`">
       <span class="theme-icon-active">
-        <MonitorSmartphone :size="18" class="icon"></MonitorSmartphone>
+        <component :is="activeThemeIcon" :size="18" class="icon"></component>
       </span>
       <span id="bd-theme-text">{{ $t('navbar.toggle_theme') }}</span>
     </a>
     <ul class="dropdown-menu dropdown-menu-end theme-menu" aria-labelledby="bd-theme-text">
       <li class="theme-menu-full">
-        <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
-          aria-pressed="true">
+        <button type="button" class="dropdown-item d-flex align-items-center"
+          :class="{ active: currentTheme === 'auto' }" :aria-pressed="currentTheme === 'auto'"
+          @click="onSelect('auto')">
           <MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
           {{ $t('navbar.theme_auto') }}
         </button>
-        <button type="button" id="bd-theme-random" class="dropdown-item d-flex align-items-center">
+        <button type="button" id="bd-theme-random" class="dropdown-item d-flex align-items-center" @click="onRandom">
           <Shuffle :size="18" class="theme-icon icon"></Shuffle>
           {{ $t('navbar.theme_random') }}
         </button>
@@ -57,114 +104,21 @@ onMounted(() => {
       <!-- Dark Themes -->
       <li class="theme-menu-group">
         <h6 class="dropdown-header">{{ $t('navbar.theme_group_dark') }}</h6>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
-          aria-pressed="false">
-          <Moon :size="18" class="theme-icon icon"></Moon>
-          {{ $t('navbar.theme_dark') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula"
-          aria-pressed="false">
-          <Ghost :size="18" class="theme-icon icon"></Ghost>
-          {{ $t('navbar.theme_dracula') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="mocha"
-          aria-pressed="false">
-          <Coffee :size="18" class="theme-icon icon"></Coffee>
-          {{ $t('navbar.theme_mocha') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember"
-          aria-pressed="false">
-          <Flame :size="18" class="theme-icon icon"></Flame>
-          {{ $t('navbar.theme_ember') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine"
-          aria-pressed="false">
-          <TreePine :size="18" class="theme-icon icon"></TreePine>
-          {{ $t('navbar.theme_rose_pine') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight"
-          aria-pressed="false">
-          <CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
-          {{ $t('navbar.theme_moonlight') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate"
-          aria-pressed="false">
-          <Layers :size="18" class="theme-icon icon"></Layers>
-          {{ $t('navbar.theme_slate') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight"
-          aria-pressed="false">
-          <CloudRain :size="18" class="theme-icon icon"></CloudRain>
-          {{ $t('navbar.theme_midnight') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord"
-          aria-pressed="false">
-          <Mountain :size="18" class="theme-icon icon"></Mountain>
-          {{ $t('navbar.theme_nord') }}
+        <button v-for="theme in darkThemes" :key="theme.value" type="button"
+          class="dropdown-item d-flex align-items-center" :class="{ active: currentTheme === theme.value }"
+          :aria-pressed="currentTheme === theme.value" @click="onSelect(theme.value)">
+          <component :is="theme.icon" :size="18" class="theme-icon icon"></component>
+          {{ $t(theme.labelKey) }}
         </button>
       </li>
       <!-- Light Themes -->
       <li class="theme-menu-group">
         <h6 class="dropdown-header">{{ $t('navbar.theme_group_light') }}</h6>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
-          aria-pressed="false">
-          <Sun :size="18" class="theme-icon icon"></Sun>
-          {{ $t('navbar.theme_light') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard"
-          aria-pressed="false">
-          <Droplet :size="18" class="theme-icon icon"></Droplet>
-          {{ $t('navbar.theme_alucard') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="latte"
-          aria-pressed="false">
-          <Milk :size="18" class="theme-icon icon"></Milk>
-          {{ $t('navbar.theme_latte') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember-light"
-          aria-pressed="false">
-          <Sunset :size="18" class="theme-icon icon"></Sunset>
-          {{ $t('navbar.theme_ember_light') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine-dawn"
-          aria-pressed="false">
-          <Sprout :size="18" class="theme-icon icon"></Sprout>
-          {{ $t('navbar.theme_rose_pine_dawn') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine"
-          aria-pressed="false">
-          <Sunrise :size="18" class="theme-icon icon"></Sunrise>
-          {{ $t('navbar.theme_sunshine') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo"
-          aria-pressed="false">
-          <Sparkles :size="18" class="theme-icon icon"></Sparkles>
-          {{ $t('navbar.theme_indigo') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean"
-          aria-pressed="false">
-          <Waves :size="18" class="theme-icon icon"></Waves>
-          {{ $t('navbar.theme_ocean') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="forest"
-          aria-pressed="false">
-          <Trees :size="18" class="theme-icon icon"></Trees>
-          {{ $t('navbar.theme_forest') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose"
-          aria-pressed="false">
-          <Flower :size="18" class="theme-icon icon"></Flower>
-          {{ $t('navbar.theme_rose') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="lavender"
-          aria-pressed="false">
-          <Flower2 :size="18" class="theme-icon icon"></Flower2>
-          {{ $t('navbar.theme_lavender') }}
-        </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="monochrome"
-          aria-pressed="false">
-          <Contrast :size="18" class="theme-icon icon"></Contrast>
-          {{ $t('navbar.theme_monochrome') }}
+        <button v-for="theme in lightThemes" :key="theme.value" type="button"
+          class="dropdown-item d-flex align-items-center" :class="{ active: currentTheme === theme.value }"
+          :aria-pressed="currentTheme === theme.value" @click="onSelect(theme.value)">
+          <component :is="theme.icon" :size="18" class="theme-icon icon"></component>
+          {{ $t(theme.labelKey) }}
         </button>
       </li>
     </ul>
diff --git a/src_assets/common/assets/web/src/utils/theme.js b/src_assets/common/assets/web/src/utils/theme.js
index b7e7c4437fe..a509c8a0b5f 100644
--- a/src_assets/common/assets/web/src/utils/theme.js
+++ b/src_assets/common/assets/web/src/utils/theme.js
@@ -1,3 +1,5 @@
+import { ref } from 'vue'
+
 const getStoredTheme = () => localStorage.getItem('theme')
 const setStoredTheme = theme => localStorage.setItem('theme', theme)
 
@@ -10,6 +12,11 @@ export const getPreferredTheme = () => {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
+// The active theme, kept reactive so components render theme-dependent UI
+// (active icon, active menu item, toggle label) through Vue instead of
+// querying/mutating the DOM directly.
+export const currentTheme = ref(getPreferredTheme())
+
 // Define which themes are dark (for Bootstrap compatibility)
 const darkThemes = new Set([
     'dark',
@@ -28,7 +35,6 @@ const setTheme = theme => {
         const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
         document.documentElement.dataset.bsTheme = preferredTheme
         document.documentElement.dataset.theme = preferredTheme
-        console.log(`Theme set to auto (resolved to: ${preferredTheme})`)
     } else {
         // Set Bootstrap's data-bs-theme to 'light' or 'dark' for Bootstrap's own styles
         const bsTheme = darkThemes.has(theme) ? 'dark' : 'light'
@@ -36,95 +42,29 @@ const setTheme = theme => {
 
         // Set our custom data-theme attribute for our color schemes
         document.documentElement.dataset.theme = theme
-        console.log(`Theme set to: ${theme} (Bootstrap: ${bsTheme})`)
-    }
-}
-
-export const showActiveTheme = (theme, focus = false) => {
-    const themeSwitcher = document.querySelector('#bd-theme')
-
-    if (!themeSwitcher) {
-        return
-    }
-
-    const themeSwitcherText = document.querySelector('#bd-theme-text')
-    const activeThemeIcon = document.querySelector('.theme-icon-active svg')
-    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-
-    if (!btnToActive) {
-        return
-    }
-
-    const btnIcon = btnToActive.querySelector('svg')
-
-    if (!activeThemeIcon || !btnIcon) {
-        return
-    }
-
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-        element.classList.remove('active')
-        element.setAttribute('aria-pressed', 'false')
-    })
-
-    btnToActive.classList.add('active')
-    btnToActive.setAttribute('aria-pressed', 'true')
-
-    // Clone the SVG icon from the active button to the theme switcher
-    const clonedIcon = btnIcon.cloneNode(true)
-    activeThemeIcon.parentNode.replaceChild(clonedIcon, activeThemeIcon)
-
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.textContent.trim()})`
-    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
-
-    if (focus) {
-        themeSwitcher.focus()
     }
 }
 
-const applyTheme = theme => {
+export function selectTheme(theme) {
     setStoredTheme(theme)
     setTheme(theme)
-    showActiveTheme(theme, true)
+    currentTheme.value = theme
 }
 
-const pickRandomTheme = () => {
+export function pickRandomTheme(themeValues) {
     const current = getStoredTheme()
-    const values = Array.from(document.querySelectorAll('[data-bs-theme-value]'))
-        .map(el => el.dataset.bsThemeValue)
-        .filter(value => value !== 'auto' && value !== current)
+    const values = themeValues.filter(value => value !== current)
     return values[Math.floor(Math.random() * values.length)]  // NOSONAR(javascript:S2245) random not used for cryptography here
 }
 
-export function setupThemeToggleListener() {
-    document.querySelectorAll('[data-bs-theme-value]')
-        .forEach(toggle => {
-            toggle.addEventListener('click', () => applyTheme(toggle.dataset.bsThemeValue))
-        })
-
-    const randomToggle = document.querySelector('#bd-theme-random')
-    if (randomToggle) {
-        randomToggle.addEventListener('click', () => applyTheme(pickRandomTheme()))
-    }
-
-    showActiveTheme(getPreferredTheme(), false)
-}
-
 export function loadAutoTheme() {
-    (() => {
-        'use strict'
-
-        setTheme(getPreferredTheme())
-
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-            const storedTheme = getStoredTheme()
-            // Only auto-switch if theme is set to 'auto'
-            if (storedTheme === 'auto' || !storedTheme) {
-                setTheme(getPreferredTheme())
-            }
-        })
-
-        window.addEventListener('DOMContentLoaded', () => {
-            showActiveTheme(getPreferredTheme())
-        })
-    })()
+    setTheme(getPreferredTheme())
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const storedTheme = getStoredTheme()
+        // Only auto-switch if theme is set to 'auto'
+        if (storedTheme === 'auto' || !storedTheme) {
+            setTheme(getPreferredTheme())
+        }
+    })
 }

From cfa8b78d42bbab7c38a925d9fe82bbcc41faf962 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 09:01:13 +0000
Subject: [PATCH 15/24] Make navbar sticky

---
 src_assets/common/assets/web/src/components/Navbar.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src_assets/common/assets/web/src/components/Navbar.vue b/src_assets/common/assets/web/src/components/Navbar.vue
index 720ec4ed4c3..d11f17f0ebb 100644
--- a/src_assets/common/assets/web/src/components/Navbar.vue
+++ b/src_assets/common/assets/web/src/components/Navbar.vue
@@ -1,8 +1,9 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-sunshine">
+  <nav class="navbar navbar-expand-lg navbar-sunshine sticky-top">
     <div class="container-fluid">
-      <router-link class="navbar-brand" to="/" title="Sunshine">
+      <router-link class="navbar-brand d-flex align-items-center" to="/" title="Sunshine">
         <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
+        <span v-if="isPublic" class="ms-2 fw-semibold">Sunshine</span>
       </router-link>
       <template v-if="!isPublic">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
@@ -104,4 +105,8 @@ export default {
 .navbar-sunshine .navbar-toggler-icon {
   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
 }
+
+.navbar-sunshine .navbar-brand span {
+  color: var(--navbar-text-muted);
+}
 </style>

From b4086fc8c6ba2d9f96aca74700bd57bc1db7a600 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 09:01:38 +0000
Subject: [PATCH 16/24] Migrate logout page

---
 .../assets/web/src/views/LogoutView.vue       | 30 +++++++++---
 .../common/assets/web/src/views/logout.html   | 46 -------------------
 2 files changed, 24 insertions(+), 52 deletions(-)
 delete mode 100644 src_assets/common/assets/web/src/views/logout.html

diff --git a/src_assets/common/assets/web/src/views/LogoutView.vue b/src_assets/common/assets/web/src/views/LogoutView.vue
index 65cd9b85811..ca009387d32 100644
--- a/src_assets/common/assets/web/src/views/LogoutView.vue
+++ b/src_assets/common/assets/web/src/views/LogoutView.vue
@@ -1,8 +1,26 @@
-<script>
-export default {}
-</script>
-
 <template>
-  <h1>Logout</h1>
-  <p>TODO: migrate content from src/views/logout.html</p>
+  <div class="row justify-content-center py-5">
+    <div class="col-md-8 col-lg-6">
+      <div class="card">
+        <div class="card-body text-center">
+          <h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1>
+          <p class="text-muted mb-4">{{ $t('logout.logged_out_desc') }}</p>
+          <a class="btn btn-primary" href="./">
+            <log-in :size="18" class="icon"></log-in>
+            {{ $t('logout.login') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import { LogIn } from '@lucide/vue'
+
+export default {
+  components: {
+    LogIn,
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/logout.html b/src_assets/common/assets/web/src/views/logout.html
deleted file mode 100644
index 2e6325cfddc..00000000000
--- a/src_assets/common/assets/web/src/views/logout.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar-Simple></Navbar-Simple>
-  <div class="container py-5">
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-lg-6">
-        <div class="card">
-          <div class="card-body text-center">
-            <h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1>
-            <p class="text-muted mb-4">{{ $t('logout.logged_out_desc') }}</p>
-            <a class="btn btn-primary" href="./">
-              <log-in :size="18" class="icon"></log-in>
-              {{ $t('logout.login') }}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import { loadAutoTheme } from './theme'
-  import { LogIn } from '@lucide/vue'
-  import NavbarSimple from './NavbarSimple.vue'
-
-  loadAutoTheme();
-
-  const app = createApp({
-    components: {
-      LogIn,
-      NavbarSimple,
-    },
-  });
-
-  initApp(app);
-</script>
-
-</html>

From 1bd55b7e10e54f4805cb8597f70309ae9a16e15f Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 09:49:18 +0000
Subject: [PATCH 17/24] Sync index and troubleshooting page with html after
 rebase

---
 .../common/assets/web/src/views/IndexView.vue |  8 ++++----
 .../web/src/views/TroubleshootingView.vue     | 19 +++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src_assets/common/assets/web/src/views/IndexView.vue b/src_assets/common/assets/web/src/views/IndexView.vue
index d23fa465c09..516f26915c4 100644
--- a/src_assets/common/assets/web/src/views/IndexView.vue
+++ b/src_assets/common/assets/web/src/views/IndexView.vue
@@ -15,7 +15,7 @@
 
   <!-- libvirtualhid Warning -->
   <AlertBox
-    v-if="platform === 'windows' && controllerEnabled && virtualhid && (!virtualhid.installed || !virtualhid.version_compatible)"
+    v-if="platform === 'windows' && virtualhid && (!virtualhid.installed || !virtualhid.version_compatible)"
     variant="warning" class="my-4"
     :action="{ to: { path: '/troubleshooting', hash: '#virtualhid' }, icon: Wrench, label: $t('index.fix_now') }">
     <div v-if="!virtualhid.installed">
@@ -39,7 +39,7 @@
   </AlertBox>
 
   <!-- Virtual HID Driver license warning -->
-  <AlertBox v-if="platform === 'windows' && controllerEnabled && virtualhidLicense && !virtualhidLicense.licensed"
+  <AlertBox v-if="platform === 'windows' && virtualhidLicense && !virtualhidLicense.licensed"
     variant="warning" class="my-4"
     :action="{ to: { path: '/troubleshooting', hash: '#virtualhid-license' }, icon: Wrench, label: $t('index.fix_now') }">
     <p class="mb-1"><strong>{{ $t('index.virtualhid_license_required_title') }}</strong></p>
@@ -170,8 +170,8 @@ export default {
       this.githubVersion = new SunshineVersion(await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()), null);
       this.preReleaseVersion = new SunshineVersion((await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease), null);
 
-      // Fetch virtual input driver status only on Windows when controller is enabled
-      if (this.platform === 'windows' && this.controllerEnabled) {
+      // The Virtual HID Driver also backs relative mouse input when controllers are disabled.
+      if (this.platform === 'windows') {
         try {
           const virtualInputStatus = await fetch("./api/virtual-input/status").then((r) => r.json());
           this.virtualhid = virtualInputStatus.virtualhid;
diff --git a/src_assets/common/assets/web/src/views/TroubleshootingView.vue b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
index 813687b2718..2745eb3353a 100644
--- a/src_assets/common/assets/web/src/views/TroubleshootingView.vue
+++ b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
@@ -1,6 +1,6 @@
 <template>
   <h1 class="my-4">{{ $t('troubleshooting.troubleshooting') }}</h1>
-  <!-- Virtual gamepad and Virtual HID Driver license -->
+  <!-- Virtual input driver and license -->
   <div class="card my-4 virtual-gamepad-card" v-if="platform === 'windows'">
     <div class="card-body">
       <header class="virtual-gamepad-hero">
@@ -16,13 +16,15 @@
       <div class="virtual-gamepad-feature-grid" :aria-label="$t('troubleshooting.virtualhid_benefits_title')">
         <FeatureCard :icon="Gamepad2" :title="$t('troubleshooting.virtualhid_benefit_gamepads_title')"
           :description="$t('troubleshooting.virtualhid_benefit_gamepads')" />
+        <FeatureCard :icon="MousePointer2" :title="$t('troubleshooting.virtualhid_benefit_mouse_title')"
+          :description="$t('troubleshooting.virtualhid_benefit_mouse')" />
         <FeatureCard :icon="Sparkles" :title="$t('troubleshooting.virtualhid_benefit_features_title')"
           :description="$t('troubleshooting.virtualhid_benefit_features')" />
         <FeatureCard :icon="ShieldCheck" :title="$t('troubleshooting.virtualhid_benefit_maintained_title')"
           :description="$t('troubleshooting.virtualhid_benefit_maintained')" />
       </div>
 
-      <section class="virtual-gamepad-section" v-if="controllerEnabled">
+      <section class="virtual-gamepad-section">
         <div class="virtual-gamepad-section-heading">
           <div>
             <h3 class="h4 mb-1">{{ $t('troubleshooting.virtual_gamepad_drivers') }}</h3>
@@ -364,6 +366,7 @@ import {
   ExternalLink,
   Gamepad2,
   KeyRound,
+  MousePointer2,
   RefreshCw,
   RotateCcw,
   Search,
@@ -390,6 +393,7 @@ export default {
     ExternalLink,
     Gamepad2,
     KeyRound,
+    MousePointer2,
     RefreshCw,
     RotateCcw,
     Search,
@@ -401,6 +405,7 @@ export default {
   data() {
     return {
       Gamepad2,
+      MousePointer2,
       Sparkles,
       ShieldCheck,
       clients: [],
@@ -589,7 +594,7 @@ export default {
     },
 
     showVigembus() {
-      return this.virtualInputStatusLoaded && (!this.virtualhid.installed || this.vigembus.installed);
+      return this.controllerEnabled && this.virtualInputStatusLoaded && (!this.virtualhid.installed || this.vigembus.installed);
     }
   },
   created() {
@@ -599,11 +604,9 @@ export default {
       .then((r) => {
         this.platform = r.platform;
         this.controllerEnabled = r.controller !== "disabled";
-        // Fetch virtual input driver status only on Windows when gamepad is enabled
-        if (this.platform === 'windows' && this.controllerEnabled) {
-          this.refreshDriverInformation();
-        }
+        // The Virtual HID Driver also backs relative mouse input when gamepads are disabled.
         if (this.platform === 'windows') {
+          this.refreshDriverInformation();
           this.refreshLicenseStatus();
         }
       });
@@ -753,7 +756,7 @@ export default {
       this.refreshDriverReleases();
     },
     /**
-     * @brief Refresh the latest stable release metadata for both Windows gamepad drivers.
+     * @brief Refresh the latest stable release metadata for the Windows virtual input drivers.
      */
     refreshDriverReleases() {
       this.updateLatestRelease(

From 7bbe01ee56c4f3505ed0b468cec6b801912062b6 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 09:50:45 +0000
Subject: [PATCH 18/24] Fix bug with auto translation key for VAAPI rate
 control and quality options

---
 .../web/src/components/configs/tabs/encoders/VAAPIEncoder.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
index 91816a34ac9..9b5c23470dd 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
@@ -28,7 +28,7 @@ const config = ref(props.config)
             <div class="mb-3">
               <label for="vaapi_rc" class="form-label">{{ $t('config.vaapi_rc') }}</label>
               <select id="vaapi_rc" class="form-select" v-model="config.vaapi_rc">
-                <option value="auto">{{ $t('auto') }}</option>
+                <option value="auto">{{ $t('_common.auto') }}</option>
                 <option value="avbr">{{ $t('config.vaapi_rc_avbr') }}</option>
                 <option value="vbr">{{ $t('config.vaapi_rc_vbr') }}</option>
                 <option value="cbr">{{ $t('config.vaapi_rc_cbr') }}</option>
@@ -75,7 +75,7 @@ const config = ref(props.config)
             <div class="mb-3">
               <label for="vaapi_quality" class="form-label">{{ $t('config.vaapi_quality') }}</label>
               <select id="vaapi_quality" class="form-select" v-model="config.vaapi_quality">
-                <option value="auto">{{ $t('auto') }}</option>
+                <option value="auto">{{ $t('_common.auto') }}</option>
                 <option value="speed">{{ $t('config.vaapi_quality_speed') }}</option>
                 <option value="balanced">{{ $t('config.vaapi_quality_balanced') }}</option>
                 <option value="quality">{{ $t('config.vaapi_quality_quality') }}</option>

From 2b8d9d51083c494ffe42a24fd7fce4ee24a047bc Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Mon, 24 Aug 2026 13:32:43 +0000
Subject: [PATCH 19/24] Add login page, apis, session based auth support and
 update tests

---
 src/confighttp.cpp                            | 365 +++++++++++++++---
 src/confighttp.h                              |   7 +-
 .../assets/web/public/assets/locale/en.json   |   9 +-
 .../common/assets/web/src/assets/sunshine.css |   4 +
 .../assets/web/src/components/Navbar.vue      |  52 ++-
 .../common/assets/web/src/router/index.js     |  28 +-
 .../common/assets/web/src/utils/auth.js       |  20 +
 .../assets/web/src/utils/fetch_utils.js       |  12 +-
 .../common/assets/web/src/views/LoginView.vue |  78 ++++
 .../assets/web/src/views/LogoutView.vue       |  26 --
 tests/CMakeLists.txt                          |   2 +-
 tests/integration/test_config_consistency.cpp |  84 ++--
 tests/integration/test_locale_consistency.cpp |   2 +-
 tests/unit/test_confighttp.cpp                | 226 +++++++++--
 14 files changed, 715 insertions(+), 200 deletions(-)
 create mode 100644 src_assets/common/assets/web/src/utils/auth.js
 create mode 100644 src_assets/common/assets/web/src/views/LoginView.vue
 delete mode 100644 src_assets/common/assets/web/src/views/LogoutView.vue

diff --git a/src/confighttp.cpp b/src/confighttp.cpp
index eee5677b526..9dc91fdc3d9 100644
--- a/src/confighttp.cpp
+++ b/src/confighttp.cpp
@@ -175,6 +175,142 @@ namespace confighttp {
    */
   constexpr auto CSRF_TOKEN_LIFETIME = std::chrono::hours(1);  // Tokens valid for 1 hour
 
+  // Session management
+  /**
+   * @brief Session identity and its expiration deadline.
+   */
+  struct session_t {
+    std::string username;  ///< The authenticated username this session belongs to.
+    std::chrono::steady_clock::time_point expiration;  ///< Monotonic deadline after which the session is rejected.
+  };
+
+  std::map<std::string, session_t, std::less<>> sessions;  ///< Sessions by token. NOSONAR(cpp:S5421) - intentionally mutable global
+  std::mutex sessions_mutex;  ///< Mutex protecting session storage. NOSONAR(cpp:S5421) - intentionally mutable global
+
+  // Session configuration
+  /**
+   * @brief Number of random bytes used when generating a session token.
+   */
+  constexpr auto SESSION_TOKEN_SIZE = 32;  // 32 bytes = 256 bits
+  /**
+   * @brief Amount of time a generated session remains valid.
+   */
+  constexpr auto SESSION_LIFETIME = std::chrono::hours(24);
+  /**
+   * @brief Name of the cookie used to carry the session token.
+   */
+  constexpr std::string_view SESSION_COOKIE_NAME = "sunshine_session"sv;
+  /**
+   * @brief Alphabet used for session tokens.
+   *
+   * Deliberately alphanumeric-only (unlike CSRF tokens' default alphabet, which includes '%')
+   * because session tokens are round-tripped through a percent-decoding cookie parser; a
+   * literal '%' in the token would corrupt it on read.
+   */
+  constexpr std::string_view SESSION_TOKEN_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"sv;
+
+  /**
+   * @brief Read the session token from the request's Cookie header, if present.
+   * @param request The HTTP request object.
+   * @return The session token, or nullopt if no session cookie is present.
+   */
+  std::optional<std::string> get_session_token(const req_https_t &request) {
+    const auto cookie_header = request->header.find("cookie");
+    if (cookie_header == request->header.end()) {
+      return std::nullopt;
+    }
+    auto cookies = SimpleWeb::HttpHeader::FieldValue::SemicolonSeparatedAttributes::parse(cookie_header->second);
+    const auto it = cookies.find(std::string(SESSION_COOKIE_NAME));
+    if (it == cookies.end()) {
+      return std::nullopt;
+    }
+    return it->second;
+  }
+
+  /**
+   * @brief Validate the session cookie on a request.
+   * @param request The HTTP request object.
+   * @return The session's username, or nullopt if there is no valid session.
+   */
+  std::optional<std::string> validate_session(const req_https_t &request) {
+    const auto token = get_session_token(request);
+    if (!token) {
+      return std::nullopt;
+    }
+
+    std::scoped_lock lock(sessions_mutex);
+    const auto it = sessions.find(*token);
+    if (it == sessions.end()) {
+      return std::nullopt;
+    }
+    if (it->second.expiration < std::chrono::steady_clock::now()) {
+      sessions.erase(it);
+      return std::nullopt;
+    }
+    return it->second.username;
+  }
+
+  /**
+   * @brief Create a new session for a username.
+   * @param username The username the session belongs to.
+   * @return The new session token.
+   */
+  std::string create_session(const std::string &username) {
+    std::string token = crypto::rand_alphabet(SESSION_TOKEN_SIZE, SESSION_TOKEN_ALPHABET);
+
+    std::scoped_lock lock(sessions_mutex);
+
+    // Clean up expired sessions first
+    const auto now = std::chrono::steady_clock::now();
+    std::erase_if(sessions, [&now](const auto &entry) {
+      return entry.second.expiration < now;
+    });
+
+    sessions[token] = session_t {
+      username,
+      now + SESSION_LIFETIME
+    };
+
+    return token;
+  }
+
+  /**
+   * @brief Destroy the session referenced by a request's session cookie, if any.
+   * @param request The HTTP request object.
+   */
+  void destroy_session(const req_https_t &request) {
+    if (const auto token = get_session_token(request)) {
+      std::scoped_lock lock(sessions_mutex);
+      sessions.erase(*token);
+    }
+  }
+
+  /**
+   * @brief Add a Set-Cookie header establishing a session.
+   * @param headers The response headers to add to.
+   * @param token The session token.
+   */
+  void set_session_cookie(SimpleWeb::CaseInsensitiveMultimap &headers, const std::string &token) {
+    using namespace std::chrono;
+    headers.emplace(
+      "Set-Cookie",
+      std::format(
+        "{}={}; Path=/; Max-Age={}; HttpOnly; Secure; SameSite=Strict",
+        SESSION_COOKIE_NAME,
+        token,
+        duration_cast<seconds>(SESSION_LIFETIME).count()
+      )
+    );
+  }
+
+  /**
+   * @brief Add a Set-Cookie header clearing the session cookie.
+   * @param headers The response headers to add to.
+   */
+  void clear_session_cookie(SimpleWeb::CaseInsensitiveMultimap &headers) {
+    headers.emplace("Set-Cookie", std::string(SESSION_COOKIE_NAME) + "=; Path=/; Max-Age=0; HttpOnly; Secure; SameSite=Strict");
+  }
+
   constexpr auto LIBVIRTUALHID_MINIMUM_VERSION = "2026.823.352.3"sv;  ///< Minimum supported libvirtualhid driver version.  // NOSONAR(cpp:S1313): not an IP address
   constexpr auto VIGEMBUS_MINIMUM_VERSION = "1.17.0.0"sv;  ///< Minimum supported ViGEmBus fallback driver version.  // NOSONAR(cpp:S1313): not an IP address
 
@@ -512,8 +648,10 @@ namespace confighttp {
    * @brief Send a 401 Unauthorized response.
    * @param response The HTTP response object.
    * @param request The HTTP request object.
+   * @param challenge Pass true to initiate the browser's native Basic Auth prompt, false to
+   *                  use the login UI and session auth instead.
    */
-  void send_unauthorized(const resp_https_t &response, const req_https_t &request) {
+  void send_unauthorized(const resp_https_t &response, const req_https_t &request, bool challenge) {
     auto address = net::addr_to_normalized_string(request->remote_endpoint().address());
     BOOST_LOG(info) << "Web UI: ["sv << address << "] -- not authorized"sv;
 
@@ -524,12 +662,14 @@ namespace confighttp {
     tree["status"] = false;
     tree["error"] = "Unauthorized";
 
-    const SimpleWeb::CaseInsensitiveMultimap headers {
+    SimpleWeb::CaseInsensitiveMultimap headers {
       {"Content-Type", "application/json"},
-      {"WWW-Authenticate", R"(Basic realm="Sunshine Gamestream Host", charset="UTF-8")"},
       {"X-Frame-Options", "DENY"},
       {"Content-Security-Policy", "frame-ancestors 'none';"}
     };
+    if (challenge) {
+      headers.emplace("WWW-Authenticate", R"(Basic realm="Sunshine Gamestream Host", charset="UTF-8")");
+    }
 
     response->write(code, tree.dump(), headers);
   }
@@ -552,52 +692,81 @@ namespace confighttp {
   }
 
   /**
-   * @brief Authenticate the user.
+   * @brief Check the caller's IP against the web UI's origin allowlist.
    * @param response The HTTP response object.
    * @param request The HTTP request object.
-   * @return True if the user is authenticated, false otherwise.
+   * @return True if allowed, false if a 403 was sent.
    */
-  bool authenticate(const resp_https_t &response, const req_https_t &request) {
+  bool check_origin_allowed(const resp_https_t &response, const req_https_t &request) {
     auto address = net::addr_to_normalized_string(request->remote_endpoint().address());
-
     if (const auto ip_type = net::from_address(address); ip_type > http::origin_web_ui_allowed) {
       BOOST_LOG(info) << "Web UI: ["sv << address << "] -- denied"sv;
       response->write(SimpleWeb::StatusCode::client_error_forbidden);
       return false;
     }
+    return true;
+  }
 
-    // If credentials are shown, redirect the user to a /welcome page
+  /**
+   * @brief Validate HTTP Basic Auth credentials on a request.
+   * @param request The HTTP request object.
+   * @return The authenticated username, or nullopt if missing/invalid credentials.
+   */
+  std::optional<std::string> validate_basic_auth(const req_https_t &request) {
     if (config::sunshine.username.empty()) {
-      send_redirect(response, request, "/welcome");
-      return false;
+      return std::nullopt;
     }
 
-    auto fg = util::fail_guard([&]() {
-      send_unauthorized(response, request);
-    });
-
     const auto auth = request->header.find("authorization");
     if (auth == request->header.end()) {
-      return false;
+      return std::nullopt;
     }
 
     const auto &rawAuth = auth->second;
-    auto authData = SimpleWeb::Crypto::Base64::decode(rawAuth.substr("Basic "sv.length()));
+    if (rawAuth.rfind("Basic "sv, 0) != 0) {
+      return std::nullopt;
+    }
+
+    const auto authData = SimpleWeb::Crypto::Base64::decode(rawAuth.substr("Basic "sv.length()));
 
     const auto index = static_cast<int>(authData.find(':'));
     if (index >= authData.size() - 1) {
-      return false;
+      return std::nullopt;
     }
 
     const auto username = authData.substr(0, index);
     const auto password = authData.substr(index + 1);
 
     if (const auto hash = util::hex(crypto::hash(password + config::sunshine.salt)).to_string(); !boost::iequals(username, config::sunshine.username) || hash != config::sunshine.password) {
+      return std::nullopt;
+    }
+
+    return username;
+  }
+
+  /**
+   * @brief Authenticate the user.
+   * @param response The HTTP response object.
+   * @param request The HTTP request object.
+   * @return True if the user is authenticated, false otherwise.
+   */
+  bool authenticate(const resp_https_t &response, const req_https_t &request) {
+    if (!check_origin_allowed(response, request)) {
       return false;
     }
 
-    fg.disable();
-    return true;
+    if (config::sunshine.username.empty()) {
+      // Nothing to log into yet; the frontend routes to /welcome based on /api/auth/status.
+      send_unauthorized(response, request, false);
+      return false;
+    }
+
+    if (validate_session(request) || validate_basic_auth(request)) {
+      return true;
+    }
+
+    send_unauthorized(response, request);
+    return false;
   }
 
   /**
@@ -678,17 +847,14 @@ namespace confighttp {
    * @return A unique identifier based on username or IP address.
    */
   std::string get_client_id(const req_https_t &request) {
-    // Try to use the authenticated username as client ID
-    if (const auto auth = request->header.find("authorization"); !config::sunshine.username.empty() && auth != request->header.end()) {
-      if (const auto &rawAuth = auth->second; rawAuth.rfind("Basic "sv, 0) == 0) {
-        auto authData = SimpleWeb::Crypto::Base64::decode(rawAuth.substr("Basic "sv.length()));
-        if (const auto index = static_cast<int>(authData.find(':')); index < authData.size() - 1) {
-          return authData.substr(0, index);  // Return username
-        }
-      }
+    if (const auto session_user = validate_session(request)) {
+      return *session_user;
+    }
+    if (const auto basic_user = validate_basic_auth(request)) {
+      return *basic_user;
     }
 
-    // Fall back to IP address if no username
+    // Fall back to IP address if no session or Basic Auth credentials
     return net::addr_to_normalized_string(request->remote_endpoint().address());
   }
 
@@ -841,20 +1007,8 @@ namespace confighttp {
    * @param response The HTTP response object.
    * @param request The HTTP request object.
    * @param html_file The HTML file to serve (relative to WEB_DIR).
-   * @param require_auth Whether to require authentication (default: true).
-   * @param redirect_if_username If true, redirect to "/" when the username is set (for welcome page).
    */
-  void getPage(const resp_https_t &response, const req_https_t &request, const char *html_file, const bool require_auth, const bool redirect_if_username) {
-    // Special handling for welcome page: redirect if the username is already set
-    if (redirect_if_username && !config::sunshine.username.empty()) {
-      send_redirect(response, request, "/");
-      return;
-    }
-
-    if (require_auth && !authenticate(response, request)) {
-      return;
-    }
-
+  void getPage(const resp_https_t &response, const req_https_t &request, const char *html_file) {
     print_req(request);
 
     const std::string content = file_handler::read_file((std::string(WEB_DIR) + html_file).c_str());
@@ -980,6 +1134,112 @@ namespace confighttp {
     send_response(response, output_tree);
   }
 
+  /**
+   * @brief Get whether the web UI is configured and the caller is authenticated.
+   * @param response The HTTP response object.
+   * @param request The HTTP request object.
+   *
+   * Unauthenticated by design: the frontend polls this to decide whether to route to
+   * /welcome, /login, or the requested page, without ever risking a native Basic Auth
+   * prompt (this never sends a WWW-Authenticate challenge).
+   *
+   * @api_examples{/api/auth/status| GET| null}
+   */
+  void getAuthStatus(const resp_https_t &response, const req_https_t &request) {
+    if (!check_origin_allowed(response, request)) {
+      return;
+    }
+
+    print_req(request);
+
+    nlohmann::json output_tree;
+    output_tree["configured"] = !config::sunshine.username.empty();
+    output_tree["authenticated"] = validate_session(request).has_value() || validate_basic_auth(request).has_value();
+
+    // Should never be cached.
+    SimpleWeb::CaseInsensitiveMultimap headers;
+    headers.emplace("Content-Type", "application/json");
+    headers.emplace("X-Frame-Options", "DENY");
+    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
+    headers.emplace("Cache-Control", "no-store");
+    response->write(output_tree.dump(), headers);
+  }
+
+  /**
+   * @brief Log in and establish a session cookie.
+   * @param response The HTTP response object.
+   * @param request The HTTP request object.
+   *
+   * @api_examples{/api/login| POST| {"username":"admin","password":"password"}}
+   */
+  void login(const resp_https_t &response, const req_https_t &request) {
+    if (!check_origin_allowed(response, request)) {
+      return;
+    }
+    if (!check_content_type(response, request, "application/json")) {
+      return;
+    }
+
+    const std::string client_id = get_client_id(request);
+    if (!validate_csrf_token(response, request, client_id)) {
+      return;
+    }
+
+    print_req(request);
+
+    std::stringstream ss;
+    ss << request->content.rdbuf();
+    try {
+      const nlohmann::json input_tree = nlohmann::json::parse(ss);
+      const std::string username = input_tree.value("username", "");
+      const std::string password = input_tree.value("password", "");
+      const auto hash = util::hex(crypto::hash(password + config::sunshine.salt)).to_string();
+
+      if (config::sunshine.username.empty() || !boost::iequals(username, config::sunshine.username) || hash != config::sunshine.password) {
+        // No challenge here: the user already has our own login form open.
+        send_unauthorized(response, request, false);
+        return;
+      }
+
+      const std::string token = create_session(config::sunshine.username);
+
+      nlohmann::json output_tree;
+      output_tree["status"] = true;
+
+      SimpleWeb::CaseInsensitiveMultimap headers;
+      headers.emplace("Content-Type", "application/json");
+      set_session_cookie(headers, token);
+      response->write(output_tree.dump(), headers);
+    } catch (const nlohmann::json::exception &) {
+      bad_request(response, request, "Invalid JSON");
+    }
+  }
+
+  /**
+   * @brief Log out and destroy the current session.
+   * @param response The HTTP response object.
+   * @param request The HTTP request object.
+   *
+   * @api_examples{/api/logout| POST| null}
+   */
+  void logout(const resp_https_t &response, const req_https_t &request) {
+    const std::string client_id = get_client_id(request);
+    if (!validate_csrf_token(response, request, client_id)) {
+      return;
+    }
+
+    print_req(request);
+    destroy_session(request);
+
+    nlohmann::json output_tree;
+    output_tree["status"] = true;
+
+    SimpleWeb::CaseInsensitiveMultimap headers;
+    headers.emplace("Content-Type", "application/json");
+    clear_session_cookie(headers);
+    response->write(output_tree.dump(), headers);
+  }
+
   /**
    * @brief Get the list of available applications.
    * @param response The HTTP response object.
@@ -2167,9 +2427,9 @@ namespace confighttp {
     https_server_t server {config::nvhttp.cert, config::nvhttp.pkey};
 
     // Helper to create page handler lambdas without repeating the signature
-    auto page_handler = [](const char *file, bool require_auth = true, bool redirect_if_username = false) {
-      return [file, require_auth, redirect_if_username](const resp_https_t &response, const req_https_t &request) {
-        getPage(response, request, file, require_auth, redirect_if_username);
+    auto page_handler = [](const char *file) {
+      return [file](const resp_https_t &response, const req_https_t &request) {
+        getPage(response, request, file);
       };
     };
 
@@ -2188,17 +2448,9 @@ namespace confighttp {
     server.default_resource["PUT"] = bad_request_handler;
     server.default_resource["GET"] = not_found_handler;
 
-    // web pages
-    server.resource["^/$"]["GET"] = page_handler("index.html");
-    server.resource["^/apps/?$"]["GET"] = page_handler("apps.html");
-    server.resource["^/clients/?$"]["GET"] = page_handler("clients.html");
-    server.resource["^/config/?$"]["GET"] = page_handler("config.html");
-    server.resource["^/featured/?$"]["GET"] = page_handler("featured.html");
-    server.resource["^/logout/?$"]["GET"] = page_handler("logout.html", false);
-    server.resource["^/password/?$"]["GET"] = page_handler("password.html");
-    server.resource["^/pin/?$"]["GET"] = page_handler("pin.html");
-    server.resource["^/troubleshooting/?$"]["GET"] = page_handler("troubleshooting.html");
-    server.resource["^/welcome/?$"]["GET"] = page_handler("welcome.html", false, true);
+    // web pages: the frontend is a single-page app, so any GET not under /api,
+    // /assets, or /images falls back to index.html and vue-router takes over.
+    server.resource["^/(?!api/|assets/|images/).*$"]["GET"] = page_handler("index.html");
 
     // rest api
     server.resource["^/api/browse$"]["GET"] = browseDirectory;
@@ -2216,6 +2468,9 @@ namespace confighttp {
     server.resource["^/api/covers/([0-9]+)$"]["GET"] = getCover;
     server.resource["^/api/covers/upload$"]["POST"] = uploadCover;
     server.resource["^/api/csrf-token$"]["GET"] = getCSRFToken;
+    server.resource["^/api/auth/status$"]["GET"] = getAuthStatus;
+    server.resource["^/api/login$"]["POST"] = login;
+    server.resource["^/api/logout$"]["POST"] = logout;
     server.resource["^/api/password$"]["POST"] = savePassword;
     server.resource["^/api/pin$"]["POST"] = savePin;
     server.resource["^/api/logs$"]["GET"] = getLogs;
diff --git a/src/confighttp.h b/src/confighttp.h
index fb737b3272b..484642495ac 100644
--- a/src/confighttp.h
+++ b/src/confighttp.h
@@ -38,7 +38,7 @@ namespace confighttp {
 
   void print_req(const req_https_t &request);
   void send_response(const resp_https_t &response, const nlohmann::json &output_tree);
-  void send_unauthorized(const resp_https_t &response, const req_https_t &request);
+  void send_unauthorized(const resp_https_t &response, const req_https_t &request, bool challenge = true);
   void send_redirect(const resp_https_t &response, const req_https_t &request, const char *path);
   bool authenticate(const resp_https_t &response, const req_https_t &request);
   void not_found(const resp_https_t &response, const req_https_t &request, const std::string &error_message = "Not Found");
@@ -72,11 +72,14 @@ namespace confighttp {
    * @return True when the request passes validation and processing may continue.
    */
   bool check_app_index(const resp_https_t &response, const req_https_t &request, int index);
-  void getPage(const resp_https_t &response, const req_https_t &request, const char *html_file, bool require_auth = true, bool redirect_if_username = false);
+  void getPage(const resp_https_t &response, const req_https_t &request, const char *html_file);
   void getAsset(const resp_https_t &response, const req_https_t &request);
   void browseDirectory(const resp_https_t &response, const req_https_t &request);
   void getLocale(const resp_https_t &response, const req_https_t &request);
   void getCSRFToken(const resp_https_t &response, const req_https_t &request);
+  void getAuthStatus(const resp_https_t &response, const req_https_t &request);
+  void login(const resp_https_t &response, const req_https_t &request);
+  void logout(const resp_https_t &response, const req_https_t &request);
 
   /**
    * @brief Check whether a detected driver version satisfies a minimum version.
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 47d4163a27d..da00b65de64 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -500,10 +500,15 @@
     "toggle_theme": "Theme",
     "troubleshoot": "Troubleshooting"
   },
+  "login": {
+    "description": "Sign in to access the Web UI.",
+    "error": "Incorrect username or password.",
+    "submit": "Log In",
+    "title": "Log In"
+  },
   "logout": {
     "logged_out": "Logged Out",
-    "logged_out_desc": "You have successfully logged out.",
-    "login": "Log In"
+    "logged_out_desc": "You have successfully logged out."
   },
   "password": {
     "confirm_password": "Confirm Password",
diff --git a/src_assets/common/assets/web/src/assets/sunshine.css b/src_assets/common/assets/web/src/assets/sunshine.css
index 3cb492c12c6..f46443e0be0 100644
--- a/src_assets/common/assets/web/src/assets/sunshine.css
+++ b/src_assets/common/assets/web/src/assets/sunshine.css
@@ -1196,6 +1196,10 @@ body {
     box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15);
 }
 
+.navbar-sunshine .navbar-brand span {
+    color: var(--navbar-text-muted);
+}
+
 /* ==========================================================================
    Typography
    ========================================================================== */
diff --git a/src_assets/common/assets/web/src/components/Navbar.vue b/src_assets/common/assets/web/src/components/Navbar.vue
index d11f17f0ebb..ba099565602 100644
--- a/src_assets/common/assets/web/src/components/Navbar.vue
+++ b/src_assets/common/assets/web/src/components/Navbar.vue
@@ -8,7 +8,7 @@
       <template v-if="!isPublic">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
+          <Menu :size="18" class="icon"></Menu>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
@@ -61,15 +61,18 @@
 </template>
 
 <script>
-import { CircleUserRound, LogOut, Shield } from '@lucide/vue'
+import { CircleUserRound, LogOut, Menu, Shield } from '@lucide/vue'
 import ThemeToggle from '@/components/ThemeToggle.vue'
+import { apiFetch } from '@/utils/fetch_utils'
+import { notifyKey } from '@/components/Notification.vue'
 
 export default {
   components: {
     ThemeToggle,
     Shield,
     CircleUserRound,
-    LogOut
+    LogOut,
+    Menu
   },
   computed: {
     isPublic() {
@@ -81,32 +84,27 @@ export default {
   },
   methods: {
     logout() {
-      const cacheBuster = Date.now().toString()
-      const logoutPageUrl = new URL('/logout', globalThis.location.href)
-      const request = new XMLHttpRequest()
-      const finish = () => {
-        globalThis.location.replace(logoutPageUrl.toString())
-      }
+      apiFetch('/api/logout', { method: 'POST' }).catch(() => { }).finally(() => {
+        // No real "log out" for Fallback Basic Auth, so force the browser to forget cached credentials.
+        const cacheBuster = Date.now().toString()
+        const request = new XMLHttpRequest()
+        const finish = () => {
+          notifyKey.success('logout.logged_out_desc', 'logout.logged_out')
+          this.$router.push('/login')
+        }
 
-      request.open('GET', '/', true, 'sunshine-logout', cacheBuster)
-      request.setRequestHeader('Cache-Control', 'no-store')
-      request.onload = finish
-      request.onerror = finish
-      request.ontimeout = finish
-      request.timeout = 5000
-      request.send()
+        // Must target a route that still requires auth (unlike '/', the public SPA shell) so the
+        // browser actually gets a 401 challenge and evicts its cached credentials.
+        // TODO: remove this whole fallback once the Basic Auth browser prompt is no longer needed.
+        request.open('GET', '/api/apps', true, 'sunshine-logout', cacheBuster)
+        request.setRequestHeader('Cache-Control', 'no-store')
+        request.onload = finish
+        request.onerror = finish
+        request.ontimeout = finish
+        request.timeout = 5000
+        request.send()
+      })
     }
   }
 }
 </script>
-
-<style>
-/* Navbar toggler icon for dark text on light background */
-.navbar-sunshine .navbar-toggler-icon {
-  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
-}
-
-.navbar-sunshine .navbar-brand span {
-  color: var(--navbar-text-muted);
-}
-</style>
diff --git a/src_assets/common/assets/web/src/router/index.js b/src_assets/common/assets/web/src/router/index.js
index 157521ea3b0..9d59c608d4d 100644
--- a/src_assets/common/assets/web/src/router/index.js
+++ b/src_assets/common/assets/web/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { Home, Info, Layers, Lock, Settings, Star } from '@lucide/vue'
+import { authState, refreshAuthStatus } from '@/utils/auth'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -48,9 +49,9 @@ const router = createRouter({
       component: () => import('@/views/PasswordView.vue'),
     },
     {
-      path: '/logout',
-      name: 'logout',
-      component: () => import('@/views/LogoutView.vue'),
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/LoginView.vue'),
       meta: { public: true },
     },
     {
@@ -62,4 +63,25 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach(async (to) => {
+  await refreshAuthStatus()
+
+  if (!authState.configured) {
+    return to.name === 'welcome' ? true : { path: '/welcome' }
+  }
+  if (to.name === 'welcome') {
+    return { path: '/' }
+  }
+  if (to.name === 'login' && authState.authenticated) {
+    return { path: '/' }
+  }
+  if (to.meta.public) {
+    return true
+  }
+  if (!authState.authenticated) {
+    return { path: '/login', query: { redirect: to.fullPath } }
+  }
+  return true
+})
+
 export default router
diff --git a/src_assets/common/assets/web/src/utils/auth.js b/src_assets/common/assets/web/src/utils/auth.js
new file mode 100644
index 00000000000..e6e5a6e6ff1
--- /dev/null
+++ b/src_assets/common/assets/web/src/utils/auth.js
@@ -0,0 +1,20 @@
+import { reactive } from 'vue'
+import { apiFetch } from '@/utils/fetch_utils'
+
+export const authState = reactive({
+  configured: null,
+  authenticated: null,
+})
+
+/**
+ * Refresh authState from the backend.
+ *
+ * @returns {Promise<typeof authState>}
+ */
+export async function refreshAuthStatus() {
+  const r = await apiFetch('/api/auth/status')
+  const data = await r.json()
+  authState.configured = data.configured
+  authState.authenticated = data.authenticated
+  return authState
+}
diff --git a/src_assets/common/assets/web/src/utils/fetch_utils.js b/src_assets/common/assets/web/src/utils/fetch_utils.js
index a0ef8dde6a9..359dbcb156e 100644
--- a/src_assets/common/assets/web/src/utils/fetch_utils.js
+++ b/src_assets/common/assets/web/src/utils/fetch_utils.js
@@ -1,4 +1,6 @@
 import { notifyKey } from '@/components/Notification.vue'
+import router from '@/router'
+import { authState } from '@/utils/auth'
 
 /**
  * The set of error messages that indicate a CSRF validation failure.
@@ -7,7 +9,8 @@ const CSRF_ERRORS = new Set(['Missing CSRF token', 'Invalid CSRF token', 'CSRF t
 
 /**
  * Wrapper around the native fetch that automatically detects CSRF errors
- * (HTTP 400 with a known CSRF error message) and displays a notification.
+ * (HTTP 400 with a known CSRF error message) and displays a notification,
+ * and redirects to /login on a 401 (session expired or never established).
  *
  * @param {string} url - The URL to fetch.
  * @param {RequestInit} [options] - Standard fetch options.
@@ -29,5 +32,12 @@ export async function apiFetch(url, options) {
     }
   }
 
+  if (response.status === 401) {
+    authState.authenticated = false
+    if (router.currentRoute.value.name !== 'login') {
+      router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
+    }
+  }
+
   return response
 }
diff --git a/src_assets/common/assets/web/src/views/LoginView.vue b/src_assets/common/assets/web/src/views/LoginView.vue
new file mode 100644
index 00000000000..b0faa373272
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/LoginView.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="row justify-content-center py-5">
+    <div class="col-md-6 col-lg-4">
+      <div class="card">
+        <div class="card-body">
+          <h1 class="h3 mb-3 text-center">{{ $t('login.title') }}</h1>
+          <p class="text-muted text-center mb-4">{{ $t('login.description') }}</p>
+          <form @submit.prevent="login">
+            <FormGroup id="username" :label="$t('_common.username')">
+              <input required type="text" class="form-control" id="username" autocomplete="username"
+                v-model="credentials.username" />
+            </FormGroup>
+            <FormGroup id="password" :label="$t('_common.password')">
+              <input required type="password" class="form-control" id="password" autocomplete="current-password"
+                v-model="credentials.password" />
+            </FormGroup>
+            <StatusAlert :error="error" alert-class="mt-3 mb-0" />
+            <button type="submit" class="btn btn-primary w-100 mt-4">
+              <log-in :size="18" class="icon"></log-in>
+              {{ $t('login.submit') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FormGroup from '@/components/FormGroup.vue'
+import StatusAlert from '@/components/StatusAlert.vue'
+import { apiFetch } from '@/utils/fetch_utils'
+import { LogIn } from '@lucide/vue'
+
+export default {
+  components: {
+    FormGroup,
+    StatusAlert,
+    LogIn,
+  },
+  data() {
+    return {
+      error: null,
+      credentials: {
+        username: "",
+        password: "",
+      },
+    };
+  },
+  methods: {
+    login() {
+      this.error = null;
+      apiFetch("./api/login", {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(this.credentials),
+      }).then((r) => {
+        if (r.status === 200) {
+          r.json().then((rj) => {
+            if (rj.status === true) {
+              const redirect = this.$route.query.redirect;
+              this.$router.push(typeof redirect === 'string' ? redirect : '/');
+            } else {
+              this.error = rj.error || this.$t('login.error');
+            }
+          });
+        } else if (r.status === 401) {
+          this.error = this.$t('login.error');
+        } else {
+          this.error = "Internal Server Error";
+        }
+      });
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/LogoutView.vue b/src_assets/common/assets/web/src/views/LogoutView.vue
deleted file mode 100644
index ca009387d32..00000000000
--- a/src_assets/common/assets/web/src/views/LogoutView.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="row justify-content-center py-5">
-    <div class="col-md-8 col-lg-6">
-      <div class="card">
-        <div class="card-body text-center">
-          <h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1>
-          <p class="text-muted mb-4">{{ $t('logout.logged_out_desc') }}</p>
-          <a class="btn btn-primary" href="./">
-            <log-in :size="18" class="icon"></log-in>
-            {{ $t('logout.login') }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { LogIn } from '@lucide/vue'
-
-export default {
-  components: {
-    LogIn,
-  },
-}
-</script>
diff --git a/tests/CMakeLists.txt b/tests/CMakeLists.txt
index 6a7b3de4297..0d8b0ae8f3a 100644
--- a/tests/CMakeLists.txt
+++ b/tests/CMakeLists.txt
@@ -191,7 +191,7 @@ add_executable(${PROJECT_NAME}
 # Using configure_file ensures files are copied when they change between builds
 set(INTEGRATION_TEST_FILES
     "src/config.cpp"
-    "src_assets/common/assets/web/src/views/config.html"
+    "src_assets/common/assets/web/src/views/ConfigView.vue"
     "docs/configuration.md"
     "src_assets/common/assets/web/public/assets/locale/en.json"
     "src_assets/common/assets/web/src/components/configs/tabs/General.vue"
diff --git a/tests/integration/test_config_consistency.cpp b/tests/integration/test_config_consistency.cpp
index 412db71f547..30a8dd105fd 100644
--- a/tests/integration/test_config_consistency.cpp
+++ b/tests/integration/test_config_consistency.cpp
@@ -98,7 +98,7 @@ class ConfigConsistencyTest: public BaseTest {
     return "";
   }
 
-  // Helper function to find and extract tabs content from HTML
+  // Helper function to find and extract tabs content from ConfigView.vue
   static std::string extractTabsContent(const std::string &content) {
     const size_t tabsStart = content.find("tabs: [");
     if (tabsStart == std::string::npos) {
@@ -195,10 +195,10 @@ class ConfigConsistencyTest: public BaseTest {
     return "";
   }
 
-  // Extract config options from config.html
-  static std::map<std::string, std::string, std::less<>> extractConfigHtmlOptions() {
+  // Extract config options from ConfigView.vue
+  static std::map<std::string, std::string, std::less<>> extractConfigViewOptions() {
     std::map<std::string, std::string, std::less<>> options;
-    const std::string content = file_handler::read_file("src_assets/common/assets/web/config.html");
+    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/views/ConfigView.vue");
 
     const std::string tabsContent = extractTabsContent(content);
     if (tabsContent.empty()) {
@@ -214,10 +214,10 @@ class ConfigConsistencyTest: public BaseTest {
     extractOptionsFromTabGeneric(tabObject, optionsByTab);
   }
 
-  // Extract config options from config.html with order preserved
-  static std::map<std::string, std::vector<std::string>, std::less<>> extractConfigHtmlOptionsWithOrder() {
+  // Extract config options from ConfigView.vue with order preserved
+  static std::map<std::string, std::vector<std::string>, std::less<>> extractConfigViewOptionsWithOrder() {
     std::map<std::string, std::vector<std::string>, std::less<>> optionsByTab;
-    const std::string content = file_handler::read_file("src_assets/common/assets/web/config.html");
+    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/views/ConfigView.vue");
 
     const std::string tabsContent = extractTabsContent(content);
     if (tabsContent.empty()) {
@@ -360,9 +360,9 @@ class ConfigConsistencyTest: public BaseTest {
 
   std::map<std::string, std::string, std::less<>> expectedDocToTabMapping;
 
-  // Helper function to check if an option exists in HTML options
-  static bool isOptionInHtml(const std::string &option, const std::map<std::string, std::string, std::less<>> &htmlOptions) {
-    return htmlOptions.contains(option);
+  // Helper function to check if an option exists in ConfigView.vue's options
+  static bool isOptionInConfigView(const std::string &option, const std::map<std::string, std::string, std::less<>> &configViewOptions) {
+    return configViewOptions.contains(option);
   }
 
   // Helper function to check if an option exists in MD options
@@ -371,9 +371,9 @@ class ConfigConsistencyTest: public BaseTest {
   }
 
   // Helper function to validate option existence across files
-  static void validateOptionExistence(const std::string &option, const std::map<std::string, std::string, std::less<>> &htmlOptions, const std::map<std::string, std::string, std::less<>> &mdOptions, const std::set<std::string, std::less<>> &jsonOptions, std::vector<std::string> &missingFromFiles) {
-    if (!isOptionInHtml(option, htmlOptions)) {
-      missingFromFiles.push_back(std::format("config.html missing: {}", option));
+  static void validateOptionExistence(const std::string &option, const std::map<std::string, std::string, std::less<>> &configViewOptions, const std::map<std::string, std::string, std::less<>> &mdOptions, const std::set<std::string, std::less<>> &jsonOptions, std::vector<std::string> &missingFromFiles) {
+    if (!isOptionInConfigView(option, configViewOptions)) {
+      missingFromFiles.push_back(std::format("ConfigView.vue missing: {}", option));
     }
 
     if (!isOptionInMd(option, mdOptions)) {
@@ -407,14 +407,14 @@ class ConfigConsistencyTest: public BaseTest {
   }
 
   // Helper function to check if a test fake option is found in missing files
-  static void checkTestDummyDetection(const std::vector<std::string> &missingFromFiles, const std::string &testDummyOption, bool &foundMissingDummyInHtml, bool &foundMissingDummyInMd, bool &foundMissingDummyInJson) {
+  static void checkTestDummyDetection(const std::vector<std::string> &missingFromFiles, const std::string &testDummyOption, bool &foundMissingDummyInConfigView, bool &foundMissingDummyInMd, bool &foundMissingDummyInJson) {
     for (const auto &missing : missingFromFiles) {
       if (!missing.contains(testDummyOption)) {
         continue;
       }
 
-      if (missing.contains("config.html")) {
-        foundMissingDummyInHtml = true;
+      if (missing.contains("ConfigView.vue")) {
+        foundMissingDummyInConfigView = true;
       }
       if (missing.contains("configuration.md")) {
         foundMissingDummyInMd = true;
@@ -440,7 +440,7 @@ class ConfigConsistencyTest: public BaseTest {
 
 TEST_F(ConfigConsistencyTest, AllConfigOptionsExistInAllFiles) {
   const auto cppOptions = extractConfigCppOptions();
-  const auto htmlOptions = extractConfigHtmlOptions();
+  const auto configViewOptions = extractConfigViewOptions();
   const auto mdOptions = extractConfigMdOptions();
   const auto jsonOptions = extractEnJsonConfigOptions();
 
@@ -457,7 +457,7 @@ TEST_F(ConfigConsistencyTest, AllConfigOptionsExistInAllFiles) {
       continue;  // Skip internal options
     }
 
-    validateOptionExistence(option, htmlOptions, mdOptions, jsonOptions, missingFromFiles);
+    validateOptionExistence(option, configViewOptions, mdOptions, jsonOptions, missingFromFiles);
   }
 
   if (!missingFromFiles.empty()) {
@@ -470,15 +470,15 @@ TEST_F(ConfigConsistencyTest, AllConfigOptionsExistInAllFiles) {
 }
 
 TEST_F(ConfigConsistencyTest, ConfigTabsMatchDocumentationSections) {
-  auto htmlOptions = extractConfigHtmlOptions();
+  auto configViewOptions = extractConfigViewOptions();
   auto mdOptions = extractConfigMdOptions();
 
   // Get unique tabs and sections
-  std::set<std::string, std::less<>> htmlTabs;
+  std::set<std::string, std::less<>> configViewTabs;
   std::set<std::string, std::less<>> mdSections;
 
-  for (const auto &tab : htmlOptions | std::views::values) {
-    htmlTabs.insert(tab);
+  for (const auto &tab : configViewOptions | std::views::values) {
+    configViewTabs.insert(tab);
   }
 
   for (const auto &section : mdOptions | std::views::values) {
@@ -487,12 +487,12 @@ TEST_F(ConfigConsistencyTest, ConfigTabsMatchDocumentationSections) {
 
   std::vector<std::string> inconsistencies;
 
-  // Check that each HTML tab has a corresponding documentation section
-  for (const auto &tab : htmlTabs) {
+  // Check that each ConfigView.vue tab has a corresponding documentation section
+  for (const auto &tab : configViewTabs) {
     checkTabCorrespondence(tab, expectedDocToTabMapping, mdSections, inconsistencies);
   }
 
-  // Check that each documentation section has a corresponding HTML tab
+  // Check that each documentation section has a corresponding ConfigView.vue tab
   for (const auto &section : mdSections) {
     if (!expectedDocToTabMapping.contains(section)) {
       inconsistencies.push_back(std::format("Documentation section '{}' has no corresponding UI tab", section));
@@ -510,23 +510,23 @@ TEST_F(ConfigConsistencyTest, ConfigTabsMatchDocumentationSections) {
 
 TEST_F(ConfigConsistencyTest, ConfigOptionsInSameOrderWithinSections) {
   // Extract options with order preserved
-  auto htmlOptionsByTab = extractConfigHtmlOptionsWithOrder();
+  auto configViewOptionsByTab = extractConfigViewOptionsWithOrder();
   auto mdOptionsBySection = extractConfigMdOptionsWithOrder();
 
   std::vector<std::string> orderInconsistencies;
 
   // Compare order for each tab/section pair
   for (const auto &[docSection, tabId] : expectedDocToTabMapping) {
-    if (!htmlOptionsByTab.contains(tabId) || !mdOptionsBySection.contains(docSection)) {
+    if (!configViewOptionsByTab.contains(tabId) || !mdOptionsBySection.contains(docSection)) {
       continue;  // Skip if either tab or section doesn't exist
     }
 
-    const auto &htmlOrder = htmlOptionsByTab.at(tabId);
+    const auto &configViewOrder = configViewOptionsByTab.at(tabId);
     const auto &mdOrder = mdOptionsBySection.at(docSection);
 
-    // Find options that exist in both HTML and MD for this section
+    // Find options that exist in both ConfigView.vue and MD for this section
     std::vector<std::string> commonOptions;
-    for (const auto &option : htmlOrder) {
+    for (const auto &option : configViewOrder) {
       if (std::ranges::find(mdOrder, option) != mdOrder.end()) {
         commonOptions.push_back(option);
       }
@@ -543,16 +543,16 @@ TEST_F(ConfigConsistencyTest, ConfigOptionsInSameOrderWithinSections) {
     // Compare the order of common options
     if (commonOptions != mdOrderFiltered && !commonOptions.empty() && !mdOrderFiltered.empty()) {
       // Create readable string representations of the option lists
-      std::string htmlOrderStr = buildCommaSeparatedString(commonOptions);
+      std::string configViewOrderStr = buildCommaSeparatedString(commonOptions);
       std::string mdOrderStr = buildCommaSeparatedString(mdOrderFiltered);
 
       std::string detailMsg = std::format(
         "Section '{}' (tab '{}') has different option order:\n"
-        "  HTML order: [{}]\n"
+        "  ConfigView.vue order: [{}]\n"
         "  MD order:   [{}]",
         docSection,
         tabId,
-        htmlOrderStr,
+        configViewOrderStr,
         mdOrderStr
       );
       orderInconsistencies.push_back(detailMsg);
@@ -570,7 +570,7 @@ TEST_F(ConfigConsistencyTest, ConfigOptionsInSameOrderWithinSections) {
 
 TEST_F(ConfigConsistencyTest, DummyConfigOptionsDoNotExist) {
   const auto cppOptions = extractConfigCppOptions();
-  const auto htmlOptions = extractConfigHtmlOptions();
+  const auto configViewOptions = extractConfigViewOptions();
   const auto mdOptions = extractConfigMdOptions();
   const auto jsonOptions = extractEnJsonConfigOptions();
 
@@ -591,8 +591,8 @@ TEST_F(ConfigConsistencyTest, DummyConfigOptionsDoNotExist) {
       unexpectedlyFound.push_back(std::format("config.cpp contains dummy option: {}", dummyOption));
     }
 
-    if (htmlOptions.contains(dummyOption)) {
-      unexpectedlyFound.push_back(std::format("config.html contains dummy option: {}", dummyOption));
+    if (configViewOptions.contains(dummyOption)) {
+      unexpectedlyFound.push_back(std::format("ConfigView.vue contains dummy option: {}", dummyOption));
     }
 
     if (mdOptions.contains(dummyOption)) {
@@ -617,7 +617,7 @@ TEST_F(ConfigConsistencyTest, DummyConfigOptionsDoNotExist) {
 
 TEST_F(ConfigConsistencyTest, TestFrameworkDetectsMissingOptions) {
   const auto cppOptions = extractConfigCppOptions();
-  const auto htmlOptions = extractConfigHtmlOptions();
+  const auto configViewOptions = extractConfigViewOptions();
   const auto mdOptions = extractConfigMdOptions();
   const auto jsonOptions = extractEnJsonConfigOptions();
 
@@ -639,8 +639,8 @@ TEST_F(ConfigConsistencyTest, TestFrameworkDetectsMissingOptions) {
       continue;  // Skip internal options
     }
 
-    if (!htmlOptions.contains(option)) {
-      missingFromFiles.push_back(std::format("config.html missing: {}", option));
+    if (!configViewOptions.contains(option)) {
+      missingFromFiles.push_back(std::format("ConfigView.vue missing: {}", option));
     }
 
     if (!mdOptions.contains(option)) {
@@ -653,14 +653,14 @@ TEST_F(ConfigConsistencyTest, TestFrameworkDetectsMissingOptions) {
   }
 
   // Verify that the test framework detected the missing fake option
-  bool foundMissingDummyInHtml = false;
+  bool foundMissingDummyInConfigView = false;
   bool foundMissingDummyInMd = false;
   bool foundMissingDummyInJson = false;
 
-  checkTestDummyDetection(missingFromFiles, testDummyOption, foundMissingDummyInHtml, foundMissingDummyInMd, foundMissingDummyInJson);
+  checkTestDummyDetection(missingFromFiles, testDummyOption, foundMissingDummyInConfigView, foundMissingDummyInMd, foundMissingDummyInJson);
 
   // The test framework should have detected the fake option as missing from all files
-  EXPECT_TRUE(foundMissingDummyInHtml) << "Test framework failed to detect missing option in config.html";
+  EXPECT_TRUE(foundMissingDummyInConfigView) << "Test framework failed to detect missing option in ConfigView.vue";
   EXPECT_TRUE(foundMissingDummyInMd) << "Test framework failed to detect missing option in configuration.md";
   EXPECT_TRUE(foundMissingDummyInJson) << "Test framework failed to detect missing option in en.json";
 
diff --git a/tests/integration/test_locale_consistency.cpp b/tests/integration/test_locale_consistency.cpp
index c842e31744f..33b4f57925e 100644
--- a/tests/integration/test_locale_consistency.cpp
+++ b/tests/integration/test_locale_consistency.cpp
@@ -51,7 +51,7 @@ class LocaleConsistencyTest: public BaseTest {
   // Extract locale options from General.vue
   static std::map<std::string, std::string, std::less<>> extractGeneralVueLocales() {
     std::map<std::string, std::string, std::less<>> locales;
-    const std::string content = file_handler::read_file("src_assets/common/assets/web/configs/tabs/General.vue");
+    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/components/configs/tabs/General.vue");
 
     // Find the locale select section specifically
     const std::regex localeSelectPattern("id=\"locale\"[^>]*>([^<]*(?:<option[^>]*>[^<]*</option>[^<]*)*)</select>");
diff --git a/tests/unit/test_confighttp.cpp b/tests/unit/test_confighttp.cpp
index eb43564f13e..80b7676e63e 100644
--- a/tests/unit/test_confighttp.cpp
+++ b/tests/unit/test_confighttp.cpp
@@ -277,30 +277,38 @@ class ConfigHttpTest: public BaseTest {  // NOSONAR(cpp:S3656): protected member
       // If validation fails, validate_csrf_token already sent an error response
     };
 
-    // Add a route to test getPage (requires auth)
+    // Add a route to test getPage
     server->resource["^/page-test$"]["GET"] = [](
                                                 const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Response> &response,
                                                 const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Request> &request
                                               ) {
       // Call the actual confighttp::getPage function
       // Note: This will read from WEB_DIR, so we need to ensure the file exists there
-      confighttp::getPage(response, request, "test_page.html", true, false);
+      confighttp::getPage(response, request, "test_page.html");
     };
 
-    // Add a route to test getPage without auth requirement
-    server->resource["^/page-noauth-test$"]["GET"] = [](
+    // Add a route to test login
+    server->resource["^/login-test$"]["POST"] = [](
+                                                  const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Response> &response,
+                                                  const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Request> &request
+                                                ) {
+      confighttp::login(response, request);
+    };
+
+    // Add a route to test logout
+    server->resource["^/logout-test$"]["POST"] = [](
+                                                   const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Response> &response,
+                                                   const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Request> &request
+                                                 ) {
+      confighttp::logout(response, request);
+    };
+
+    // Add a route to test getAuthStatus
+    server->resource["^/auth-status-test$"]["GET"] = [](
                                                        const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Response> &response,
                                                        const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Request> &request
                                                      ) {
-      confighttp::getPage(response, request, "test_page.html", false, false);
-    };
-
-    // Add a route to test getPage with redirect_if_username
-    server->resource["^/page-redirect-test$"]["GET"] = [](
-                                                         const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Response> &response,
-                                                         const std::shared_ptr<SimpleWeb::ServerBase<SimpleWeb::HTTPS>::Request> &request
-                                                       ) {
-      confighttp::getPage(response, request, "test_page.html", false, true);
+      confighttp::getAuthStatus(response, request);
     };
 
     // Add a route to test getLocale
@@ -378,6 +386,18 @@ class ConfigHttpTest: public BaseTest {  // NOSONAR(cpp:S3656): protected member
     return "Basic " + SimpleWeb::Crypto::Base64::encode(username + ":" + password);
   }
 
+  // Returns the "name=value" pair from a Set-Cookie response header, ready to send back
+  // as a Cookie request header. Empty if no matching cookie was set.
+  static std::string extract_cookie(const std::shared_ptr<SimpleWeb::Client<SimpleWeb::HTTPS>::Response> &response, const std::string &cookie_name) {
+    const auto set_cookie = response->header.find("Set-Cookie");
+    if (set_cookie == response->header.end() || set_cookie->second.rfind(cookie_name + "=", 0) != 0) {
+      return "";
+    }
+    const auto &value = set_cookie->second;
+    const auto semicolon = value.find(';');
+    return semicolon == std::string::npos ? value : value.substr(0, semicolon);
+  }
+
   static void assert_security_headers(const std::shared_ptr<SimpleWeb::Client<SimpleWeb::HTTPS>::Response> &response) {
     const auto x_frame = response->header.find("X-Frame-Options");
     ASSERT_NE(x_frame, response->header.end());
@@ -468,7 +488,6 @@ INSTANTIATE_TEST_SUITE_P(
   ConfigHttpEndpoints,
   AuthenticatedConfigHttpEndpointTest,
   testing::Values(
-    endpoint_request_t {"Page", "GET", "/page-test", ""},
     endpoint_request_t {"CsrfToken", "GET", "/csrf-token-test", ""},
     endpoint_request_t {"BrowseDirectory", "GET", "/browse-test", ""},
     endpoint_request_t {"VirtualInputStatus", "GET", "/virtual-input-status-test", ""},
@@ -787,12 +806,10 @@ TEST_F(ConfigHttpTest, CSRFSameOriginExemptionWithReferer) {
   ASSERT_EQ(body, "csrf-valid");
 }
 
-// Test: confighttp::getPage() serves HTML with authentication
-TEST_F(ConfigHttpTest, GetPageWithAuth) {
-  SimpleWeb::CaseInsensitiveMultimap headers;
-  headers.emplace("Authorization", create_auth_header("testuser", "testpass"));
-
-  const auto response = client->request("GET", "/page-test", "", headers);
+// Test: confighttp::getPage() serves HTML without requiring authentication
+// (the SPA shell is always public; real access control happens per-API-call)
+TEST_F(ConfigHttpTest, GetPageServesHtml) {
+  const auto response = client->request("GET", "/page-test");
   ASSERT_EQ(response->status_code, "200 OK");
 
   // Check Content-Type
@@ -811,38 +828,167 @@ TEST_F(ConfigHttpTest, GetPageWithAuth) {
   ASSERT_TRUE(body.find("</html>") != std::string::npos);
 }
 
-// Test: confighttp::getPage() works without authentication when require_auth=false
-TEST_F(ConfigHttpTest, GetPageWithoutAuthRequired) {
-  const auto response = client->request("GET", "/page-noauth-test");
+// Test: confighttp::authenticate() rejects without a WWW-Authenticate challenge when
+// no admin account is configured yet (avoids a native Basic Auth popup pre-/welcome)
+TEST_F(ConfigHttpTest, AuthenticateRejectsWhenUnconfigured) {
+  const std::string saved = config::sunshine.username;
+  config::sunshine.username = "";
+
+  const auto response = client->request("GET", "/auth-test");
+  ASSERT_EQ(response->status_code, "401 Unauthorized");
+  ASSERT_EQ(response->header.find("WWW-Authenticate"), response->header.end());
+
+  config::sunshine.username = saved;
+}
+
+// Test: confighttp::login() establishes a session on valid credentials
+TEST_F(ConfigHttpTest, LoginSucceedsWithValidCredentials) {
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Content-Type", "application/json");
+  headers.emplace("Origin", std::format("https://localhost:{}", port));
+
+  const auto response = client->request("POST", "/login-test", R"({"username":"testuser","password":"testpass"})", headers);
   ASSERT_EQ(response->status_code, "200 OK");
 
-  // Check HTML content is served
   const std::string body = response->content.string();
-  ASSERT_TRUE(body.find("Test Page Content") != std::string::npos);
+  nlohmann::json json_body = nlohmann::json::parse(body);
+  ASSERT_TRUE(json_body.value("status", false));
+
+  const auto set_cookie = response->header.find("Set-Cookie");
+  ASSERT_NE(set_cookie, response->header.end());
+  EXPECT_TRUE(set_cookie->second.find("sunshine_session=") != std::string::npos);
+  EXPECT_TRUE(set_cookie->second.find("HttpOnly") != std::string::npos);
+  EXPECT_TRUE(set_cookie->second.find("Secure") != std::string::npos);
+  EXPECT_TRUE(set_cookie->second.find("SameSite=Strict") != std::string::npos);
 }
 
-// Test: confighttp::getPage() redirects when redirect_if_username=true and username is set
-TEST_F(ConfigHttpTest, GetPageRedirectsWhenUsernameSet) {
-  // Username is set in SetUp(), so redirect_if_username should trigger redirect
-  const auto response = client->request("GET", "/page-redirect-test");
-  ASSERT_EQ(response->status_code, "307 Temporary Redirect");
+// Test: confighttp::login() rejects invalid credentials without a WWW-Authenticate
+// challenge (the user already has our own login form open)
+TEST_F(ConfigHttpTest, LoginRejectsInvalidCredentials) {
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Content-Type", "application/json");
+  headers.emplace("Origin", std::format("https://localhost:{}", port));
 
-  // Check redirect location
-  const auto location = response->header.find("Location");
-  ASSERT_NE(location, response->header.end());
-  ASSERT_EQ(location->second, "/");
+  const auto response = client->request("POST", "/login-test", R"({"username":"testuser","password":"wrongpass"})", headers);
+  ASSERT_EQ(response->status_code, "401 Unauthorized");
+  ASSERT_EQ(response->header.find("WWW-Authenticate"), response->header.end());
+
+  const std::string body = response->content.string();
+  nlohmann::json json_body = nlohmann::json::parse(body);
+  ASSERT_FALSE(json_body.value("status", true));
+}
+
+// Test: confighttp::login() rejects malformed JSON
+TEST_F(ConfigHttpTest, LoginRejectsMalformedJson) {
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Content-Type", "application/json");
+  headers.emplace("Origin", std::format("https://localhost:{}", port));
+
+  const auto response = client->request("POST", "/login-test", "not json", headers);
+  ASSERT_EQ(response->status_code, "400 Bad Request");
 }
 
-// Test: confighttp::getPage() doesn't redirect when username is empty
-TEST_F(ConfigHttpTest, GetPageNoRedirectWhenUsernameEmpty) {
-  // Temporarily clear username
+// Test: a session cookie from confighttp::login() is accepted by confighttp::authenticate()
+TEST_F(ConfigHttpTest, AuthenticateAcceptsSessionCookie) {
+  SimpleWeb::CaseInsensitiveMultimap login_headers;
+  login_headers.emplace("Content-Type", "application/json");
+  login_headers.emplace("Origin", std::format("https://localhost:{}", port));
+  const auto login_response = client->request("POST", "/login-test", R"({"username":"testuser","password":"testpass"})", login_headers);
+  ASSERT_EQ(login_response->status_code, "200 OK");
+
+  const std::string cookie = extract_cookie(login_response, "sunshine_session");
+  ASSERT_FALSE(cookie.empty());
+
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Cookie", cookie);
+  const auto response = client->request("GET", "/auth-test", "", headers);
+  ASSERT_EQ(response->status_code, "200 OK");
+  ASSERT_EQ(response->content.string(), "authenticated");
+}
+
+// Test: confighttp::logout() destroys an active session
+TEST_F(ConfigHttpTest, LogoutClearsSession) {
+  SimpleWeb::CaseInsensitiveMultimap login_headers;
+  login_headers.emplace("Content-Type", "application/json");
+  login_headers.emplace("Origin", std::format("https://localhost:{}", port));
+  const auto login_response = client->request("POST", "/login-test", R"({"username":"testuser","password":"testpass"})", login_headers);
+  const std::string cookie = extract_cookie(login_response, "sunshine_session");
+  ASSERT_FALSE(cookie.empty());
+
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Cookie", cookie);
+  headers.emplace("Origin", std::format("https://localhost:{}", port));
+
+  // Session works before logout
+  ASSERT_EQ(client->request("GET", "/auth-test", "", headers)->status_code, "200 OK");
+
+  const auto logout_response = client->request("POST", "/logout-test", "", headers);
+  ASSERT_EQ(logout_response->status_code, "200 OK");
+
+  // Same cookie no longer works after logout
+  ASSERT_EQ(client->request("GET", "/auth-test", "", headers)->status_code, "401 Unauthorized");
+}
+
+// Test: confighttp::logout() is a no-op success when there is no session to clear
+TEST_F(ConfigHttpTest, LogoutWithoutSessionSucceeds) {
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Origin", std::format("https://localhost:{}", port));
+
+  const auto response = client->request("POST", "/logout-test", "", headers);
+  ASSERT_EQ(response->status_code, "200 OK");
+
+  const std::string body = response->content.string();
+  nlohmann::json json_body = nlohmann::json::parse(body);
+  ASSERT_TRUE(json_body.value("status", false));
+}
+
+// Test: confighttp::getAuthStatus() reflects an unauthenticated, configured install
+TEST_F(ConfigHttpTest, GetAuthStatusReflectsUnauthenticated) {
+  const auto response = client->request("GET", "/auth-status-test");
+  ASSERT_EQ(response->status_code, "200 OK");
+
+  nlohmann::json json_body = nlohmann::json::parse(response->content.string());
+  ASSERT_TRUE(json_body.value("configured", false));
+  ASSERT_FALSE(json_body.value("authenticated", true));
+}
+
+// Test: confighttp::getAuthStatus() reflects a session-authenticated caller
+TEST_F(ConfigHttpTest, GetAuthStatusReflectsSessionAuthenticated) {
+  SimpleWeb::CaseInsensitiveMultimap login_headers;
+  login_headers.emplace("Content-Type", "application/json");
+  login_headers.emplace("Origin", std::format("https://localhost:{}", port));
+  const auto login_response = client->request("POST", "/login-test", R"({"username":"testuser","password":"testpass"})", login_headers);
+  const std::string cookie = extract_cookie(login_response, "sunshine_session");
+  ASSERT_FALSE(cookie.empty());
+
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Cookie", cookie);
+  const auto response = client->request("GET", "/auth-status-test", "", headers);
+
+  nlohmann::json json_body = nlohmann::json::parse(response->content.string());
+  ASSERT_TRUE(json_body.value("configured", false));
+  ASSERT_TRUE(json_body.value("authenticated", false));
+}
+
+// Test: confighttp::getAuthStatus() reflects a Basic Auth-authenticated caller
+TEST_F(ConfigHttpTest, GetAuthStatusReflectsBasicAuthAuthenticated) {
+  SimpleWeb::CaseInsensitiveMultimap headers;
+  headers.emplace("Authorization", create_auth_header("testuser", "testpass"));
+
+  const auto response = client->request("GET", "/auth-status-test", "", headers);
+  nlohmann::json json_body = nlohmann::json::parse(response->content.string());
+  ASSERT_TRUE(json_body.value("authenticated", false));
+}
+
+// Test: confighttp::getAuthStatus() reflects an unconfigured install
+TEST_F(ConfigHttpTest, GetAuthStatusReflectsUnconfigured) {
   const std::string saved = config::sunshine.username;
   config::sunshine.username = "";
 
-  const auto response = client->request("GET", "/page-redirect-test");
-  ASSERT_EQ(response->status_code, "200 OK");
+  const auto response = client->request("GET", "/auth-status-test");
+  nlohmann::json json_body = nlohmann::json::parse(response->content.string());
+  ASSERT_FALSE(json_body.value("configured", true));
 
-  // Restore username
   config::sunshine.username = saved;
 }
 

From aebe7a40ce960d3ccf31342d42e46e58d606c1fc Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Wed, 26 Aug 2026 09:35:18 +0000
Subject: [PATCH 20/24] Address sonarqube issues

---
 .../assets/web/public/assets/locale/en.json   |  1 +
 .../assets/web/src/components/FormGroup.vue   |  4 +-
 .../web/src/components/LoadingSpinner.vue     |  4 +-
 .../assets/web/src/components/ThemeToggle.vue |  2 -
 .../common/assets/web/src/views/AppsView.vue  | 87 ++++++++++---------
 .../assets/web/src/views/ConfigView.vue       | 11 ++-
 .../assets/web/src/views/FeaturedView.vue     |  4 +-
 .../common/assets/web/src/views/IndexView.vue |  6 +-
 .../common/assets/web/src/views/LoginView.vue |  4 +-
 .../assets/web/src/views/PasswordView.vue     | 12 +--
 .../common/assets/web/src/views/PinView.vue   |  9 +-
 .../web/src/views/TroubleshootingView.vue     | 26 +++---
 .../assets/web/src/views/WelcomeView.vue      |  6 +-
 vite.config.js                                | 11 ++-
 14 files changed, 94 insertions(+), 93 deletions(-)

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 da00b65de64..fc8cd0fa01b 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -644,6 +644,7 @@
   },
   "file_browser": {
     "empty": "No items to display",
+    "path": "Path",
     "root": "Root",
     "select": "Select",
     "select_directory": "Select Directory",
diff --git a/src_assets/common/assets/web/src/components/FormGroup.vue b/src_assets/common/assets/web/src/components/FormGroup.vue
index f9c05e0f0d8..c42904a381e 100644
--- a/src_assets/common/assets/web/src/components/FormGroup.vue
+++ b/src_assets/common/assets/web/src/components/FormGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-3">
-    <label :for="id" class="form-label">{{ label }}</label>
+    <label :for="fieldId" class="form-label">{{ label }}</label>
     <slot></slot>
     <div class="form-text" v-if="description">{{ description }}</div>
   </div>
@@ -9,7 +9,7 @@
 <script>
 export default {
   props: {
-    id: {
+    fieldId: {
       type: String,
       default: null
     },
diff --git a/src_assets/common/assets/web/src/components/LoadingSpinner.vue b/src_assets/common/assets/web/src/components/LoadingSpinner.vue
index fd9c7956e7a..d76f871a57c 100644
--- a/src_assets/common/assets/web/src/components/LoadingSpinner.vue
+++ b/src_assets/common/assets/web/src/components/LoadingSpinner.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="spinner-border" :class="{ 'spinner-border-sm': small }" role="status">
+  <output class="spinner-border" :class="{ 'spinner-border-sm': small }">
     <span class="visually-hidden">{{ label }}</span>
-  </div>
+  </output>
 </template>
 
 <script>
diff --git a/src_assets/common/assets/web/src/components/ThemeToggle.vue b/src_assets/common/assets/web/src/components/ThemeToggle.vue
index c8cc6c8bb50..c96aa8be37b 100644
--- a/src_assets/common/assets/web/src/components/ThemeToggle.vue
+++ b/src_assets/common/assets/web/src/components/ThemeToggle.vue
@@ -124,5 +124,3 @@ onMounted(() => {
     </ul>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/src_assets/common/assets/web/src/views/AppsView.vue b/src_assets/common/assets/web/src/views/AppsView.vue
index c5883d5eb48..53daff4c303 100644
--- a/src_assets/common/assets/web/src/views/AppsView.vue
+++ b/src_assets/common/assets/web/src/views/AppsView.vue
@@ -9,7 +9,7 @@
     <!-- Left side actions -->
     <div class="d-flex align-items-center gap-2">
       <!-- Add new application -->
-      <button class="btn btn-primary" @click="newApp">
+      <button type="button" class="btn btn-primary" @click="newApp">
         <layers-plus :size="18" class="icon"></layers-plus>
         {{ $t('apps.add_new') }}
       </button>
@@ -27,7 +27,8 @@
       </button>
       <!-- Search box -->
       <div class="input-group">
-        <input type="text" class="form-control" v-model="searchQuery" :placeholder="$t('apps.search_placeholder')" />
+        <input type="text" class="form-control" v-model="searchQuery" :placeholder="$t('apps.search_placeholder')"
+          :aria-label="$t('apps.search_placeholder')" />
         <button v-if="searchQuery" class="btn btn-outline-secondary" type="button" @click="resetSearchQuery"
           :aria-label="$t('_common.close')">
           <x :size="16" class="icon"></x>
@@ -73,11 +74,11 @@
         <div class="card-body d-flex flex-column">
           <h5 class="card-title mb-3">{{ app.name }}</h5>
           <div class="mt-auto d-flex gap-2">
-            <button class="btn btn-sm btn-primary flex-fill" @click="editApp(index)">
+            <button type="button" class="btn btn-sm btn-primary flex-fill" @click="editApp(index)">
               <edit :size="16" class="icon"></edit>
               {{ $t('apps.edit') }}
             </button>
-            <button class="btn btn-sm btn-danger" @click="showDeleteModal(index)">
+            <button type="button" class="btn btn-sm btn-danger" @click="showDeleteModal(index)">
               <trash-2 :size="16" class="icon"></trash-2>
             </button>
           </div>
@@ -106,11 +107,11 @@
     <template #title>{{ editModalTitle }}</template>
     <template v-if="editForm">
       <!-- Application Name -->
-      <FormGroup id="appName" :label="$t('apps.app_name')" :description="$t('apps.app_name_desc')">
+      <FormGroup field-id="appName" :label="$t('apps.app_name')" :description="$t('apps.app_name_desc')">
         <input type="text" class="form-control" id="appName" v-model="editForm.name" />
       </FormGroup>
       <!-- output -->
-      <FormGroup id="appOutput" :label="$t('apps.output_name')" :description="$t('apps.output_desc')">
+      <FormGroup field-id="appOutput" :label="$t('apps.output_name')" :description="$t('apps.output_desc')">
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appOutput" v-model="editForm.output" />
           <button class="btn btn-secondary" type="button"
@@ -123,7 +124,7 @@
       <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" inverse-values></Checkbox>
       <div class="mb-3">
-        <label class="form-label">{{ $t('apps.cmd_prep_name') }}</label>
+        <div class="form-label">{{ $t('apps.cmd_prep_name') }}</div>
         <div class="form-text">{{ $t('apps.cmd_prep_desc') }}</div>
         <div class="row g-2 align-items-center mx-0 my-2" v-if="editForm['prep-cmd'].length > 0">
           <div class="col-12 col-md text-muted small text-uppercase fw-semibold ps-3 d-flex align-items-center">
@@ -138,7 +139,7 @@
           </div>
           <div class="col-auto" style="height: 0;">
             <div class="invisible">
-              <button class="btn btn-danger btn-sm" tabindex="-1" aria-hidden="true">
+              <button type="button" class="btn btn-danger btn-sm" tabindex="-1" aria-hidden="true">
                 <trash-2 :size="16" class="icon"></trash-2>
               </button>
             </div>
@@ -150,7 +151,8 @@
               <span class="input-group-text">
                 <play :size="14" class="icon"></play>
               </span>
-              <input type="text" class="form-control monospace" v-model="cmd.do" :placeholder="$t('_common.do_cmd')" />
+              <input type="text" class="form-control monospace" v-model="cmd.do" :placeholder="$t('_common.do_cmd')"
+                :aria-label="$t('_common.do_cmd')" />
               <button class="btn btn-secondary" type="button" @click="browsePrep(index, 'do')">
                 <folder-open :size="14" class="icon"></folder-open>
               </button>
@@ -160,7 +162,7 @@
             <div class="input-group">
               <span class="input-group-text"><rotate-ccw :size="14" class="icon"></rotate-ccw></span>
               <input type="text" class="form-control monospace" v-model="cmd.undo"
-                :placeholder="$t('_common.undo_cmd')" />
+                :placeholder="$t('_common.undo_cmd')" :aria-label="$t('_common.undo_cmd')" />
               <button class="btn btn-secondary" type="button" @click="browsePrep(index, 'undo')">
                 <folder-open :size="14" class="icon"></folder-open>
               </button>
@@ -171,13 +173,13 @@
             </Checkbox>
           </div>
           <div class="col-auto">
-            <button class="btn btn-danger btn-sm" @click="deletePrepCmd(index)">
+            <button type="button" class="btn btn-danger btn-sm" @click="deletePrepCmd(index)">
               <trash-2 :size="16" class="icon"></trash-2>
             </button>
           </div>
         </div>
         <div class="d-flex justify-content-start my-3">
-          <button class="btn btn-success" @click="addPrepCmd">
+          <button type="button" class="btn btn-success" @click="addPrepCmd">
             <plus :size="18" class="icon"></plus>
             {{ $t('apps.add_cmds') }}
           </button>
@@ -185,29 +187,30 @@
       </div>
       <!-- detached -->
       <div class="mb-3">
-        <label class="form-label">{{ $t('apps.detached_cmds') }}</label>
+        <div class="form-label">{{ $t('apps.detached_cmds') }}</div>
         <div class="form-text">
           {{ $t('apps.detached_cmds_desc') }}<br>
           <b>{{ $t('_common.note') }}</b> {{ $t('apps.detached_cmds_note') }}
         </div>
         <div v-for="(_, index) in editForm.detached" :key="index" class="d-flex align-items-center gap-2 my-2">
-          <input type="text" v-model="editForm.detached[index]" class="form-control monospace">
-          <button class="btn btn-secondary btn-sm" @click="browseDetached(index)">
+          <input type="text" v-model="editForm.detached[index]" class="form-control monospace"
+            :aria-label="$t('apps.detached_cmds')">
+          <button type="button" class="btn btn-secondary btn-sm" @click="browseDetached(index)">
             <folder-open :size="14" class="icon"></folder-open>
           </button>
-          <button class="btn btn-danger btn-sm" @click="editForm.detached.splice(index, 1)">
+          <button type="button" class="btn btn-danger btn-sm" @click="editForm.detached.splice(index, 1)">
             <trash-2 :size="16" class="icon"></trash-2>
           </button>
         </div>
         <div class="d-flex justify-content-start mb-3 mt-3">
-          <button class="btn btn-success" @click="addDetached">
+          <button type="button" class="btn btn-success" @click="addDetached">
             <plus :size="18" class="icon"></plus>
             {{ $t('apps.detached_cmds_add') }}
           </button>
         </div>
       </div>
       <!-- command -->
-      <FormGroup id="appCmd" :label="$t('apps.cmd')">
+      <FormGroup field-id="appCmd" :label="$t('apps.cmd')">
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appCmd" v-model="editForm.cmd" />
           <button class="btn btn-secondary" type="button"
@@ -221,7 +224,7 @@
         </div>
       </FormGroup>
       <!-- working dir -->
-      <FormGroup id="appWorkingDir" :label="$t('apps.working_dir')" :description="$t('apps.working_dir_desc')">
+      <FormGroup field-id="appWorkingDir" :label="$t('apps.working_dir')" :description="$t('apps.working_dir_desc')">
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appWorkingDir" v-model="editForm['working-dir']" />
           <button class="btn btn-secondary" type="button"
@@ -240,11 +243,11 @@
       <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 -->
-      <FormGroup id="exitTimeout" :label="$t('apps.exit_timeout')" :description="$t('apps.exit_timeout_desc')">
+      <FormGroup field-id="exitTimeout" :label="$t('apps.exit_timeout')" :description="$t('apps.exit_timeout_desc')">
         <input type="number" class="form-control monospace" id="exitTimeout" v-model="editForm['exit-timeout']" min="0"
           placeholder="5" />
       </FormGroup>
-      <FormGroup id="appImagePath" :label="$t('apps.image')" :description="$t('apps.image_desc')">
+      <FormGroup field-id="appImagePath" :label="$t('apps.image')" :description="$t('apps.image_desc')">
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appImagePath" v-model="editForm['image-path']" />
           <button class="btn btn-secondary" type="button"
@@ -265,8 +268,8 @@
         <table class="env-table">
           <thead>
             <tr>
-              <td><b>{{ $t('apps.env_var_name') }}</b></td>
-              <td><b></b></td>
+              <th scope="col"><b>{{ $t('apps.env_var_name') }}</b></th>
+              <th scope="col"><b></b></th>
             </tr>
           </thead>
           <tbody>
@@ -327,11 +330,11 @@
       </div>
     </template>
     <template #footer>
-      <button @click="editModalOpen = false" class="btn btn-secondary">
+      <button type="button" @click="editModalOpen = false" class="btn btn-secondary">
         <x :size="18" class="icon"></x>
         {{ $t('_common.cancel') }}
       </button>
-      <button class="btn btn-primary" @click="save">
+      <button type="button" class="btn btn-primary" @click="save">
         <save :size="18" class="icon"></save>
         {{ $t('_common.save') }}
       </button>
@@ -349,7 +352,7 @@
     <div class="mb-3">
       <div class="input-group">
         <input type="text" class="form-control" v-model="coverSearchQuery" :placeholder="editForm?.name"
-          @keyup.enter="performCoverSearch" />
+          :aria-label="$t('_common.search')" @keyup.enter="performCoverSearch" />
         <button class="btn btn-primary" type="button" @click="performCoverSearch">
           <search :size="18" class="icon"></search>
           {{ $t('_common.search') }}
@@ -370,11 +373,11 @@
         <div v-for="cover in coverCandidates" :key="cover.url" class="col-12 col-sm-6 col-lg-3 mb-3"
           @click="useCover(cover)">
           <div class="cover-container result">
-            <img class="rounded" :src="cover.url" />
+            <img class="rounded" :src="cover.url" :alt="cover.name" />
           </div>
-          <label class="d-block text-nowrap text-center text-truncate">
+          <div class="d-block text-nowrap text-center text-truncate">
             {{ cover.name }}
-          </label>
+          </div>
         </div>
       </div>
     </div>
@@ -411,7 +414,7 @@
     <!-- Path input -->
     <div class="input-group mb-2">
       <input type="text" class="form-control monospace" v-model="fileBrowserTypedPath" @input="fileBrowserOnTypedInput"
-        @keyup.enter="fileBrowserNavigate(fileBrowserTypedPath)" />
+        :aria-label="$t('file_browser.path')" @keyup.enter="fileBrowserNavigate(fileBrowserTypedPath)" />
       <button class="btn btn-secondary" type="button" @click="fileBrowserNavigate(fileBrowserTypedPath)">
         <arrow-right :size="16" class="icon"></arrow-right>
       </button>
@@ -495,6 +498,14 @@ import {
   X,
 } from '@lucide/vue'
 
+function getSearchBucket(name) {
+  let bucket = name.substring(0, Math.min(name.length, 2)).toLowerCase().replaceAll(/[^a-z\d]/g, '');
+  if (!bucket) {
+    return '@';
+  }
+  return bucket;
+}
+
 export default {
   components: {
     Modal,
@@ -653,7 +664,7 @@ export default {
       this.editModalOpen = true;
     },
     editApp(id) {
-      this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
+      this.editForm = structuredClone(this.apps[id]);
       this.editForm.index = id;
       if (this.editForm["prep-cmd"] === undefined)
         this.editForm["prep-cmd"] = [];
@@ -731,14 +742,6 @@ export default {
       // Use search query if provided, otherwise fall back to app name
       const searchTerm = this.coverSearchQuery.trim() || this.editForm["name"].toString();
 
-      function getSearchBucket(name) {
-        let bucket = name.substring(0, Math.min(name.length, 2)).toLowerCase().replaceAll(/[^a-z\d]/g, '');
-        if (!bucket) {
-          return '@';
-        }
-        return bucket;
-      }
-
       function searchCovers(name) {
         if (!name) {
           return Promise.resolve([]);
@@ -759,7 +762,7 @@ export default {
             }).catch(() => null);
           }
           return null;
-        }).filter(item => item)))
+        }).filter(Boolean)))
           .then(results => results
             .filter(item => item && item.cover && item.cover.url)
             .map(game => {
@@ -776,7 +779,7 @@ export default {
                 url: `https://images.igdb.com/igdb/image/upload/t_cover_big/${slug}.jpg`,
                 saveUrl: `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${slug}.png`,
               }
-            }).filter(item => item));
+            }).filter(Boolean));
       }
 
       searchCovers(searchTerm)
@@ -879,7 +882,7 @@ export default {
       });
     },
     save() {
-      this.editForm["image-path"] = this.editForm["image-path"].toString().replace(/"/g, '');
+      this.editForm["image-path"] = this.editForm["image-path"].toString().replaceAll('"', '');
       apiFetch("./api/apps", {
         method: "POST",
         headers: {
diff --git a/src_assets/common/assets/web/src/views/ConfigView.vue b/src_assets/common/assets/web/src/views/ConfigView.vue
index 51d333c0fc4..b3d15bbe778 100644
--- a/src_assets/common/assets/web/src/views/ConfigView.vue
+++ b/src_assets/common/assets/web/src/views/ConfigView.vue
@@ -11,7 +11,7 @@
         <search :size="18" class="icon"></search>
       </span>
       <input type="text" class="form-control" v-model="searchQuery" :placeholder="$t('config.search_options')"
-        @input="handleSearch" list="config-options" />
+        :aria-label="$t('config.search_options')" @input="handleSearch" list="config-options" />
     </div>
     <datalist id="config-options">
       <option v-for="option in allConfigOptions" :key="option.key" :value="option.label">
@@ -51,11 +51,11 @@
         </template>
 
         <div class="config-actions">
-          <button class="btn btn-primary" @click="save">
+          <button type="button" class="btn btn-primary" @click="save">
             <save :size="18" class="icon"></save>
             {{ $t('_common.save') }}
           </button>
-          <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
+          <button type="button" class="btn btn-success" @click="apply" v-if="saved && !restarted">
             <check :size="18" class="icon"></check>
             {{ $t('_common.apply') }}
           </button>
@@ -370,7 +370,6 @@ export default {
         this.config = r;
         this.platform = this.config.platform;
 
-        var app = document.getElementById("app");
         if (this.platform === "windows") {
           this.tabs = this.tabs.filter((el) => {
             return el.id !== "vt" && el.id !== "vaapi" && el.id !== "vulkan";
@@ -407,7 +406,7 @@ export default {
           Object.keys(tab.options).forEach(optionKey => {
             if (this.config[optionKey] === undefined) {
               // Make sure to copy by value
-              this.config[optionKey] = JSON.parse(JSON.stringify(tab.options[optionKey]));
+              this.config[optionKey] = structuredClone(tab.options[optionKey]);
             }
           });
         });
@@ -436,7 +435,7 @@ export default {
       this.$forceUpdate()
     },
     serialize() {
-      return JSON.parse(JSON.stringify(this.config));
+      return structuredClone(this.config);
     },
     save() {
       this.saved = false;
diff --git a/src_assets/common/assets/web/src/views/FeaturedView.vue b/src_assets/common/assets/web/src/views/FeaturedView.vue
index f8e174a7c77..98f08ca848c 100644
--- a/src_assets/common/assets/web/src/views/FeaturedView.vue
+++ b/src_assets/common/assets/web/src/views/FeaturedView.vue
@@ -6,7 +6,7 @@
 
   <!-- Category Filter -->
   <div class="toolbar mb-4">
-    <div class="btn-group" role="group" aria-label="Category filter">
+    <fieldset class="btn-group border-0 p-0 m-0" aria-label="Category filter">
       <button type="button" class="btn btn-outline-primary" :class="{ active: selectedCategory === null }"
         @click="selectedCategory = null">
         {{ $t('_common.all') }}
@@ -15,7 +15,7 @@
         :class="{ active: selectedCategory === category.id }" @click="selectedCategory = category.id">
         {{ $t(`featured.categories.${category.originalId}`) }}
       </button>
-    </div>
+    </fieldset>
   </div>
 
   <!-- Loading State -->
diff --git a/src_assets/common/assets/web/src/views/IndexView.vue b/src_assets/common/assets/web/src/views/IndexView.vue
index 516f26915c4..8e66f6984a1 100644
--- a/src_assets/common/assets/web/src/views/IndexView.vue
+++ b/src_assets/common/assets/web/src/views/IndexView.vue
@@ -3,12 +3,12 @@
   <p>{{ $t('index.description') }}</p>
 
   <!-- Fatal Errors Alert -->
-  <AlertBox v-if="fancyLogs.find(x => x.level === 'Fatal')" variant="danger" class="my-4"
+  <AlertBox v-if="fancyLogs.some(x => x.level === 'Fatal')" variant="danger" class="my-4"
     :action="{ to: { path: '/troubleshooting', hash: '#logs' }, icon: FileText, label: 'View Logs' }">
     <div v-html="$t('index.startup_errors')"></div>
     <template #body>
       <ul class="mb-3">
-        <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{ v.value }}</li>
+        <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')" :key="v.timestamp">{{ v.value }}</li>
       </ul>
     </template>
   </AlertBox>
@@ -216,7 +216,7 @@ export default {
     },
     buildVersionIsDirty() {
       return this.version.version?.split(".").length === 5 &&
-        this.version.version.indexOf("dirty") !== -1
+        this.version.version.includes("dirty")
     },
     releaseAnnouncements() {
       const list = [];
diff --git a/src_assets/common/assets/web/src/views/LoginView.vue b/src_assets/common/assets/web/src/views/LoginView.vue
index b0faa373272..78c1c8f617d 100644
--- a/src_assets/common/assets/web/src/views/LoginView.vue
+++ b/src_assets/common/assets/web/src/views/LoginView.vue
@@ -6,11 +6,11 @@
           <h1 class="h3 mb-3 text-center">{{ $t('login.title') }}</h1>
           <p class="text-muted text-center mb-4">{{ $t('login.description') }}</p>
           <form @submit.prevent="login">
-            <FormGroup id="username" :label="$t('_common.username')">
+            <FormGroup field-id="username" :label="$t('_common.username')">
               <input required type="text" class="form-control" id="username" autocomplete="username"
                 v-model="credentials.username" />
             </FormGroup>
-            <FormGroup id="password" :label="$t('_common.password')">
+            <FormGroup field-id="password" :label="$t('_common.password')">
               <input required type="password" class="form-control" id="password" autocomplete="current-password"
                 v-model="credentials.password" />
             </FormGroup>
diff --git a/src_assets/common/assets/web/src/views/PasswordView.vue b/src_assets/common/assets/web/src/views/PasswordView.vue
index 6dfb21d58cd..eb606656487 100644
--- a/src_assets/common/assets/web/src/views/PasswordView.vue
+++ b/src_assets/common/assets/web/src/views/PasswordView.vue
@@ -9,25 +9,25 @@
         <div class="row">
           <div class="col-md-6">
             <h4>{{ $t('password.current_creds') }}</h4>
-            <FormGroup id="currentUsername" :label="$t('_common.username')">
+            <FormGroup field-id="currentUsername" :label="$t('_common.username')">
               <input required type="text" class="form-control" id="currentUsername"
                 v-model="passwordData.currentUsername" />
             </FormGroup>
-            <FormGroup id="currentPassword" :label="$t('_common.password')">
+            <FormGroup field-id="currentPassword" :label="$t('_common.password')">
               <input autocomplete="current-password" type="password" class="form-control" id="currentPassword"
                 v-model="passwordData.currentPassword" />
             </FormGroup>
           </div>
           <div class="col-md-6">
             <h4>{{ $t('password.new_creds') }}</h4>
-            <FormGroup id="newUsername" :label="$t('_common.username')" :description="$t('password.new_username_desc')">
+            <FormGroup field-id="newUsername" :label="$t('_common.username')" :description="$t('password.new_username_desc')">
               <input type="text" class="form-control" id="newUsername" v-model="passwordData.newUsername" />
             </FormGroup>
-            <FormGroup id="newPassword" :label="$t('_common.password')">
+            <FormGroup field-id="newPassword" :label="$t('_common.password')">
               <input autocomplete="new-password" required type="password" class="form-control" id="newPassword"
                 v-model="passwordData.newPassword" />
             </FormGroup>
-            <FormGroup id="confirmNewPassword" :label="$t('password.confirm_password')">
+            <FormGroup field-id="confirmNewPassword" :label="$t('password.confirm_password')">
               <input autocomplete="new-password" required type="password" class="form-control" id="confirmNewPassword"
                 v-model="passwordData.confirmNewPassword" />
             </FormGroup>
@@ -37,7 +37,7 @@
           alert-class="mt-3 mb-0" />
       </div>
     </div>
-    <button class="btn btn-primary mt-4">
+    <button type="submit" class="btn btn-primary mt-4">
       <save :size="18" class="icon"></save>
       {{ $t('_common.save') }}
     </button>
diff --git a/src_assets/common/assets/web/src/views/PinView.vue b/src_assets/common/assets/web/src/views/PinView.vue
index ccf20d72e5f..38ff92803a5 100644
--- a/src_assets/common/assets/web/src/views/PinView.vue
+++ b/src_assets/common/assets/web/src/views/PinView.vue
@@ -6,16 +6,17 @@
         <span class="input-group-text">
           <hash :size="18" class="icon"></hash>
         </span>
-        <input type="text" pattern="\d*" :placeholder="$t('navbar.pin')" autofocus class="form-control" required
-          v-model="pin" />
+        <input type="text" pattern="\d*" :placeholder="$t('navbar.pin')" :aria-label="$t('navbar.pin')" autofocus
+          class="form-control" required v-model="pin" />
       </div>
       <div class="input-group my-4">
         <span class="input-group-text">
           <monitor :size="18" class="icon"></monitor>
         </span>
-        <input type="text" :placeholder="$t('pin.device_name')" class="form-control" required v-model="name" />
+        <input type="text" :placeholder="$t('pin.device_name')" :aria-label="$t('pin.device_name')"
+          class="form-control" required v-model="name" />
       </div>
-      <button class="btn btn-primary">
+      <button type="submit" class="btn btn-primary">
         <forward :size="18" class="icon"></forward>
         {{ $t('pin.send') }}
       </button>
diff --git a/src_assets/common/assets/web/src/views/TroubleshootingView.vue b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
index 2745eb3353a..6cee41554d3 100644
--- a/src_assets/common/assets/web/src/views/TroubleshootingView.vue
+++ b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
@@ -218,7 +218,7 @@
         {{ $t('troubleshooting.force_close_error') }}
       </AlertBox>
       <div>
-        <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
+        <button type="button" class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
           <x-circle :size="18" class="icon"></x-circle>
           {{ $t('troubleshooting.force_close') }}
         </button>
@@ -234,7 +234,7 @@
         {{ $t('troubleshooting.restart_sunshine_success') }}
       </AlertBox>
       <div>
-        <button class="btn btn-warning" :disabled="restartPressed" @click="restart">
+        <button type="button" class="btn btn-warning" :disabled="restartPressed" @click="restart">
           <refresh-cw :size="18" class="icon"></refresh-cw>
           {{ $t('troubleshooting.restart_sunshine') }}
         </button>
@@ -253,7 +253,7 @@
         {{ $t('troubleshooting.dd_reset_error') }}
       </AlertBox>
       <div>
-        <button class="btn btn-warning" :disabled="ddResetPressed" @click="ddResetPersistence">
+        <button type="button" class="btn btn-warning" :disabled="ddResetPressed" @click="ddResetPersistence">
           <rotate-ccw :size="18" class="icon"></rotate-ccw>
           {{ $t('troubleshooting.dd_reset') }}
         </button>
@@ -268,7 +268,7 @@
       <div class="alert alert-success d-flex align-items-center" v-if="showApplyMessage">
         <check-circle :size="18" class="icon"></check-circle>
         <div><b>{{ $t('_common.success') }}</b> {{ $t('troubleshooting.unpair_single_success') }}</div>
-        <button class="btn btn-success ms-auto" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
+        <button type="button" class="btn btn-success ms-auto" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
       </div>
       <AlertBox v-if="unpairAllStatus === true" variant="success" compact>
         {{ $t('troubleshooting.unpair_all_success') }}
@@ -277,7 +277,7 @@
         {{ $t('troubleshooting.unpair_all_error') }}
       </AlertBox>
       <div>
-        <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
+        <button type="button" class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
           <trash-2 :size="18" class="icon"></trash-2>
           {{ $t('troubleshooting.unpair_all') }}
         </button>
@@ -293,7 +293,7 @@
             :checked="client.enabled" :aria-checked="client.enabled.toString()"
             @change="toggleClient(client.uuid, !client.enabled)">
         </div>
-        <button class="btn btn-danger btn-sm ms-2" @click="unpairSingle(client.uuid)">
+        <button type="button" class="btn btn-danger btn-sm ms-2" @click="unpairSingle(client.uuid)">
           <trash-2 :size="18" class="icon"></trash-2>
         </button>
       </li>
@@ -314,28 +314,29 @@
           <span class="input-group-text">
             <search :size="18" class="icon"></search>
           </span>
-          <input type="text" class="form-control" v-model="logFilter" :placeholder="$t('troubleshooting.logs_find')" />
+          <input type="text" class="form-control" v-model="logFilter" :placeholder="$t('troubleshooting.logs_find')"
+            :aria-label="$t('troubleshooting.logs_find')" />
         </div>
       </div>
       <div>
         <div class="troubleshooting-logs" ref="logsContainer">
           <div class="log-nav-overlay">
             <div class="log-nav-controls">
-              <button class="log-nav-btn" @click="scrollLogsTo('top')" title="Jump to Top">
+              <button type="button" class="log-nav-btn" @click="scrollLogsTo('top')" title="Jump to Top">
                 <chevrons-up :size="18" class="icon"></chevrons-up>
               </button>
-              <button class="log-nav-btn" @click="navigateToLog('prev')" :disabled="!hasPrevLog"
+              <button type="button" class="log-nav-btn" @click="navigateToLog('prev')" :disabled="!hasPrevLog"
                 title="Previous Warning/Error">
                 <chevron-up :size="18" class="icon"></chevron-up>
               </button>
-              <button class="log-nav-btn" @click="navigateToLog('next')" :disabled="!hasNextLog"
+              <button type="button" class="log-nav-btn" @click="navigateToLog('next')" :disabled="!hasNextLog"
                 title="Next Warning/Error">
                 <chevron-down :size="18" class="icon"></chevron-down>
               </button>
-              <button class="log-nav-btn" @click="scrollLogsTo('bottom')" title="Jump to Bottom">
+              <button type="button" class="log-nav-btn" @click="scrollLogsTo('bottom')" title="Jump to Bottom">
                 <chevrons-down :size="18" class="icon"></chevrons-down>
               </button>
-              <button class="log-nav-btn" @click="copyLogs" title="Copy Logs">
+              <button type="button" class="log-nav-btn" @click="copyLogs" title="Copy Logs">
                 <check :size="18" class="icon text-success" v-if="logsCopied"></check>
                 <copy :size="18" class="icon" v-else></copy>
               </button>
@@ -689,7 +690,6 @@ export default {
       fetch("./api/clients/list")
         .then((response) => response.json())
         .then((response) => {
-          const clientList = document.querySelector("#client-list");
           if (response.status === true && response.named_certs && response.named_certs.length) {
             this.clients = response.named_certs.sort((a, b) => {
               return (a.name.toLowerCase() > b.name.toLowerCase() || a.name === "" ? 1 : -1)
diff --git a/src_assets/common/assets/web/src/views/WelcomeView.vue b/src_assets/common/assets/web/src/views/WelcomeView.vue
index fa5e51a62b1..460269fface 100644
--- a/src_assets/common/assets/web/src/views/WelcomeView.vue
+++ b/src_assets/common/assets/web/src/views/WelcomeView.vue
@@ -8,15 +8,15 @@
           {{ $t('welcome.create_creds_alert') }}
         </div>
         <form @submit.prevent="save">
-          <FormGroup id="usernameInput" :label="$t('_common.username')">
+          <FormGroup field-id="usernameInput" :label="$t('_common.username')">
             <input type="text" class="form-control" id="usernameInput" autocomplete="username"
               v-model="passwordData.newUsername" />
           </FormGroup>
-          <FormGroup id="passwordInput" :label="$t('_common.password')">
+          <FormGroup field-id="passwordInput" :label="$t('_common.password')">
             <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
               v-model="passwordData.newPassword" required />
           </FormGroup>
-          <FormGroup id="confirmPasswordInput" :label="$t('welcome.confirm_password')">
+          <FormGroup field-id="confirmPasswordInput" :label="$t('welcome.confirm_password')">
             <input type="password" class="form-control" id="confirmPasswordInput" autocomplete="new-password"
               v-model="passwordData.confirmNewPassword" required />
           </FormGroup>
diff --git a/vite.config.js b/vite.config.js
index f93565ae195..c08009e1871 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -55,7 +55,7 @@ export default defineConfig(({ command, mode }) => {
             vue({ template: { transformAssetUrls: false } }),
             vueJsx(),
             vueDevTools(),
-            // HTTPS only matters for `vite dev`; the production build is served by the backend.
+            // HTTPS for vite dev.
             ...(command === 'serve' ? [basicSsl()] : []),
             // The Codecov vite plugin should be after all other plugins
             codecovVitePlugin({
@@ -67,11 +67,10 @@ export default defineConfig(({ command, mode }) => {
         ],
         root: resolve(assetsSrcPath),
         server: {
-            // Bind address/port for `vite dev`; override via VITE_DEV_HOST / VITE_DEV_PORT in .env
-            // (e.g. VITE_DEV_HOST=0.0.0.0 for devcontainer/Codespaces port forwarding).
-            host: env.VITE_DEV_HOST,
-            port: Number(env.VITE_DEV_PORT) ?? 5173,
-            // WSL2/devcontainer bind mounts don't reliably propagate inotify events, so poll instead.
+            // Override via VITE_DEV_HOST/VITE_DEV_PORT in .env (e.g. VITE_DEV_HOST=0.0.0.0 for devcontainers).
+            host: env.VITE_DEV_HOST || 'localhost',
+            port: Number(env.VITE_DEV_PORT || 5173),
+            // WSL2/devcontainers don't propagate changes reliably, so use polling.
             watch: {
                 usePolling: true,
             },

From 7e2715c82ffffdbb9af0bd272f6b8d3662972b66 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Thu, 27 Aug 2026 13:08:02 +0000
Subject: [PATCH 21/24] Address config TODO: Refactor config page into modular
 components

Update tests for config refactoring
---
 .../assets/web/public/assets/locale/en.json   |   1 +
 .../common/assets/web/src/assets/sunshine.css |  24 +-
 .../web/src/components/ConfigSearch.vue       |  90 ++++
 .../web/src/components/FileBrowserModal.vue   | 162 ++++++
 .../web/src/components/PlatformLayout.vue     |  19 +-
 .../web/src/components/PrepCommandList.vue    | 143 +++++
 .../assets/web/src/components/Select.vue      |  33 ++
 .../src/components/configs/tabs/Advanced.vue  | 180 ++++---
 .../components/configs/tabs/AudioVideo.vue    |  91 ++--
 .../configs/tabs/ContainerEncoders.vue        |  80 +--
 .../web/src/components/configs/tabs/Files.vue |  37 +-
 .../src/components/configs/tabs/General.vue   | 160 ++----
 .../src/components/configs/tabs/Inputs.vue    | 188 +++----
 .../src/components/configs/tabs/Network.vue   | 218 ++++----
 .../tabs/audiovideo/AdapterNameSelector.vue   |   2 +-
 .../tabs/audiovideo/DisplayDeviceOptions.vue  |   2 +-
 .../tabs/audiovideo/DisplayOutputSelector.vue |   2 +-
 .../configs/tabs/encoders/AmdAmfEncoder.vue   | 148 +++---
 .../tabs/encoders/IntelQuickSyncEncoder.vue   |  79 +--
 .../tabs/encoders/NvidiaNvencEncoder.vue      | 153 +++---
 .../configs/tabs/encoders/SoftwareEncoder.vue |  82 +--
 .../configs/tabs/encoders/VAAPIEncoder.vue    |  74 ++-
 .../tabs/encoders/VideotoolboxEncoder.vue     |  62 ++-
 .../configs/tabs/encoders/VulkanEncoder.vue   |  66 ++-
 .../web/src/composables/useConfigTab.js       |  22 +
 .../common/assets/web/src/utils/locale.js     |  25 +
 .../common/assets/web/src/views/AppsView.vue  | 261 +--------
 .../assets/web/src/views/ConfigView.vue       | 496 ++++--------------
 tests/CMakeLists.txt                          |  13 +
 tests/integration/test_config_consistency.cpp | 165 +++---
 tests/integration/test_locale_consistency.cpp |  86 +--
 31 files changed, 1559 insertions(+), 1605 deletions(-)
 create mode 100644 src_assets/common/assets/web/src/components/ConfigSearch.vue
 create mode 100644 src_assets/common/assets/web/src/components/FileBrowserModal.vue
 create mode 100644 src_assets/common/assets/web/src/components/PrepCommandList.vue
 create mode 100644 src_assets/common/assets/web/src/components/Select.vue
 create mode 100644 src_assets/common/assets/web/src/composables/useConfigTab.js

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 fc8cd0fa01b..0385698d854 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -370,6 +370,7 @@
     "qsv_slow_hevc": "Allow Slow HEVC Encoding",
     "qsv_slow_hevc_desc": "This can enable HEVC encoding on older Intel GPUs, at the cost of higher GPU usage and worse performance.",
     "restart_note": "Sunshine is restarting to apply changes.",
+    "search_no_results": "No results found for \"{query}\"",
     "search_options": "Search configuration options...",
     "stream_audio": "Stream Audio",
     "stream_audio_desc": "Whether to stream audio or not. Disabling this can be useful for streaming headless displays as second monitors.",
diff --git a/src_assets/common/assets/web/src/assets/sunshine.css b/src_assets/common/assets/web/src/assets/sunshine.css
index f46443e0be0..b0e9436c5bd 100644
--- a/src_assets/common/assets/web/src/assets/sunshine.css
+++ b/src_assets/common/assets/web/src/assets/sunshine.css
@@ -1467,10 +1467,6 @@ p {
     width: 14rem;
 }
 
-.config-search {
-    flex: 0 1 28rem;
-}
-
 /* ==========================================================================
    Form Styles
    ========================================================================== */
@@ -1889,8 +1885,26 @@ p {
     gap: var(--spacing-lg);
 }
 
+.config-search-toolbar .config-search-wrapper {
+    max-width: 28rem;
+}
+
+.config-search-wrapper {
+    position: relative;
+}
+
+.config-search-results {
+    width: 100%;
+    max-height: 20rem;
+    overflow-y: auto;
+}
+
+.config-search-results .dropdown-item {
+    white-space: normal;
+}
+
 .config-nav {
-    flex: 0 0 15rem;
+    flex: 0 0 18rem;
     position: sticky;
     top: var(--spacing-lg);
 }
diff --git a/src_assets/common/assets/web/src/components/ConfigSearch.vue b/src_assets/common/assets/web/src/components/ConfigSearch.vue
new file mode 100644
index 00000000000..b2b32b69fbb
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/ConfigSearch.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { Search, X } from '@lucide/vue'
+
+const props = defineProps({
+  options: { type: Array, required: true }
+})
+
+const emit = defineEmits(['select'])
+
+const query = ref('')
+const isOpen = ref(false)
+const activeIndex = ref(-1)
+
+const results = computed(() => {
+  if (!query.value) return []
+  const q = query.value.toLowerCase()
+  return props.options.filter(option =>
+    (option.key.toLowerCase().includes(q) || option.label.toLowerCase().includes(q) || option.tab.toLowerCase().includes(q)) &&
+    // Only surface options that are actually rendered right now - platform or
+    // config-value gates (e.g. platform === 'macos') keep some out of the DOM.
+    document.getElementById(option.key)
+  )
+})
+
+function onInput() {
+  isOpen.value = true
+  activeIndex.value = -1
+}
+
+function clear() {
+  query.value = ''
+  isOpen.value = false
+  activeIndex.value = -1
+}
+
+function choose(option) {
+  emit('select', option)
+  query.value = option.label
+  isOpen.value = false
+  activeIndex.value = -1
+}
+
+function onKeydown(e) {
+  if (!isOpen.value || results.value.length === 0) return
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value + 1) % results.value.length
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value - 1 + results.value.length) % results.value.length
+  } else if (e.key === 'Enter' && activeIndex.value >= 0) {
+    e.preventDefault()
+    choose(results.value[activeIndex.value])
+  } else if (e.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="config-search-wrapper">
+    <div class="input-group">
+      <input type="text" class="form-control config-search" v-model="query" :placeholder="$t('config.search_options')"
+        :aria-label="$t('config.search_options')" autocomplete="off" @input="onInput" @focus="isOpen = true"
+        @blur="isOpen = false" @keydown="onKeydown" />
+      <button v-if="query" class="btn btn-outline-secondary" type="button" @mousedown.prevent="clear"
+        :aria-label="$t('_common.close')">
+        <X :size="16" class="icon"></X>
+      </button>
+      <span v-else class="input-group-text">
+        <Search :size="16" class="icon"></Search>
+      </span>
+    </div>
+
+    <ul class="dropdown-menu config-search-results" :class="{ show: isOpen && query }">
+      <li v-if="results.length === 0">
+        <span class="dropdown-item disabled">{{ $t('config.search_no_results', { query }) }}</span>
+      </li>
+      <li v-for="(option, index) in results" :key="option.key">
+        <button type="button" class="dropdown-item" :class="{ active: index === activeIndex }"
+          @mousedown.prevent="choose(option)">
+          <div>{{ option.label }}</div>
+          <div class="text-muted small">{{ option.tab }}</div>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/src_assets/common/assets/web/src/components/FileBrowserModal.vue b/src_assets/common/assets/web/src/components/FileBrowserModal.vue
new file mode 100644
index 00000000000..6496521e69e
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/FileBrowserModal.vue
@@ -0,0 +1,162 @@
+<template>
+  <Modal :model-value="open" @update:model-value="$emit('update:open', $event)"
+    dialog-class="modal-lg modal-dialog-scrollable modal-fullscreen-md-down" stacked>
+    <template #title>{{ title || $t('file_browser.title') }}</template>
+    <!-- Path input -->
+    <div class="input-group mb-2">
+      <input type="text" class="form-control monospace" v-model="typedPath" @input="onTypedInput"
+        :aria-label="$t('file_browser.path')" @keyup.enter="navigate(typedPath)" />
+      <button class="btn btn-secondary" type="button" @click="navigate(typedPath)">
+        <arrow-right :size="16" class="icon"></arrow-right>
+      </button>
+    </div>
+    <!-- Up button -->
+    <div class="mb-2">
+      <button class="btn btn-sm btn-outline-secondary" type="button" :disabled="loading || parentPath === currentPath"
+        @click="navigateUp">
+        <folder-up :size="16" class="icon me-1"></folder-up>
+        {{ $t('file_browser.up') }}
+      </button>
+    </div>
+    <!-- Error -->
+    <div v-if="error" class="alert alert-danger py-2 small">{{ error }}</div>
+    <!-- Loading -->
+    <div v-if="loading" class="text-center py-3">
+      <LoadingSpinner :label="$t('_common.loading')" small />
+    </div>
+    <!-- Entries -->
+    <div v-else class="list-group" style="max-height: 400px; overflow-y: auto;">
+      <div v-if="entries.length === 0" class="list-group-item text-muted text-center">
+        {{ $t('file_browser.empty') }}
+      </div>
+      <button v-for="entry in entries" :key="entry.path" type="button"
+        class="list-group-item list-group-item-action d-flex align-items-center py-1"
+        :class="{ active: selectedPath === entry.path }" @click="selectEntry(entry)"
+        @dblclick="activateEntry(entry)">
+        <hard-drive v-if="!currentPath && entry.type === 'directory'" :size="16"
+          class="icon me-2 flex-shrink-0"></hard-drive>
+        <folder v-else-if="entry.type === 'directory'" :size="16" class="icon me-2 flex-shrink-0 text-warning"></folder>
+        <file-text v-else :size="16" class="icon me-2 flex-shrink-0"></file-text>
+        <span class="text-truncate">{{ entry.name }}</span>
+      </button>
+    </div>
+    <template #footer>
+      <div class="flex-grow-1 text-muted small text-truncate" v-if="selectedPath">
+        <code>{{ selectedPath }}</code>
+      </div>
+      <button type="button" class="btn btn-secondary" @click="$emit('update:open', false)">
+        <x :size="16" class="icon me-1"></x>
+        {{ $t('_common.cancel') }}
+      </button>
+      <button type="button" class="btn btn-primary" @click="confirm" :disabled="!selectedPath && !typedPath">
+        <check :size="16" class="icon me-1"></check>
+        {{ $t('file_browser.select') }}
+      </button>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import Modal from '@/components/Modal.vue'
+import LoadingSpinner from '@/components/LoadingSpinner.vue'
+import {
+  ArrowRight,
+  Check,
+  FileText,
+  Folder,
+  FolderUp,
+  HardDrive,
+  X,
+} from '@lucide/vue'
+
+export default {
+  components: {
+    Modal,
+    LoadingSpinner,
+    ArrowRight,
+    Check,
+    FileText,
+    Folder,
+    FolderUp,
+    HardDrive,
+    X,
+  },
+  props: {
+    open: { type: Boolean, default: false },
+    type: { type: String, default: 'any' },
+    title: { type: String, default: '' },
+    startPath: { type: String, default: '' },
+  },
+  emits: ['update:open', 'confirm'],
+  data() {
+    return {
+      currentPath: "",
+      parentPath: "",
+      entries: [],
+      loading: false,
+      error: "",
+      selectedPath: "",
+      typedPath: "",
+    };
+  },
+  watch: {
+    open(isOpen) {
+      if (isOpen) {
+        this.error = '';
+        this.selectedPath = this.startPath || '';
+        this.typedPath = this.startPath || '';
+        this.navigate(this.startPath || '');
+      }
+    },
+  },
+  methods: {
+    confirm() {
+      const path = this.selectedPath || this.typedPath;
+      if (path) {
+        this.$emit('confirm', path);
+        this.$emit('update:open', false);
+      }
+    },
+    navigate(path) {
+      this.loading = true;
+      this.error = '';
+      const params = new URLSearchParams({ type: this.type });
+      if (path) params.set('path', path);
+      fetch(`./api/browse?${params.toString()}`)
+        .then(r => r.ok ? r.json() : r.json().then(e => { throw new Error(e.error || 'Browse failed'); }))
+        .then(data => {
+          this.currentPath = data.path ?? '';
+          this.parentPath = data.parent ?? '';
+          this.entries = data.entries ?? [];
+          this.typedPath = data.path ?? '';
+          this.selectedPath = this.type === 'directory' ? (data.path ?? '') : '';
+        })
+        .catch(err => { this.error = err.message; })
+        .finally(() => { this.loading = false; });
+    },
+    navigateUp() {
+      this.navigate(this.parentPath);
+    },
+    selectEntry(entry) {
+      if (entry.type === 'directory') {
+        this.navigate(entry.path);
+      } else {
+        this.selectedPath = entry.path;
+        this.typedPath = entry.path;
+      }
+    },
+    activateEntry(entry) {
+      if (entry.type === 'directory') {
+        this.navigate(entry.path);
+      } else {
+        this.selectedPath = entry.path;
+        this.typedPath = entry.path;
+        this.confirm();
+      }
+    },
+    onTypedInput() {
+      this.selectedPath = this.typedPath;
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/PlatformLayout.vue b/src_assets/common/assets/web/src/components/PlatformLayout.vue
index 49cbacc0fa0..c0eec96ad16 100644
--- a/src_assets/common/assets/web/src/components/PlatformLayout.vue
+++ b/src_assets/common/assets/web/src/components/PlatformLayout.vue
@@ -1,10 +1,7 @@
 <script setup>
-const props = defineProps({
-  platform: {
-    type: String,
-    required: true
-  }
-})
+import { inject } from 'vue'
+
+const platform = inject('platform')
 </script>
 
 <template>
@@ -23,9 +20,9 @@ const props = defineProps({
   <template v-if="$slots.macos && platform === 'macos'">
     <slot name="macos"></slot>
   </template>
-</template>
-
 
-<style scoped>
-
-</style>
+  <!-- common: rendered for any platform -->
+  <template v-if="$slots.default">
+    <slot></slot>
+  </template>
+</template>
diff --git a/src_assets/common/assets/web/src/components/PrepCommandList.vue b/src_assets/common/assets/web/src/components/PrepCommandList.vue
new file mode 100644
index 00000000000..a1c927d70eb
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/PrepCommandList.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="mb-3">
+    <label class="form-label">{{ label }}</label>
+    <div class="form-text">{{ description }}</div>
+
+    <!-- Column headers (only once there's at least one row) -->
+    <div class="row g-2 align-items-center mx-0 my-2" v-if="modelValue.length > 0">
+      <div class="col-12 col-md text-muted small text-uppercase fw-semibold ps-3 d-flex align-items-center">
+        <play :size="14" class="icon me-1"></play>{{ $t('_common.do_cmd') }}
+      </div>
+      <div class="col-12 col-md text-muted small text-uppercase fw-semibold ps-3 d-flex align-items-center">
+        <rotate-ccw :size="14" class="icon me-1"></rotate-ccw>{{ $t('_common.undo_cmd') }}
+      </div>
+      <div class="col-auto text-muted small text-uppercase fw-semibold d-flex align-items-center"
+        v-if="platform === 'windows'">
+        <shield :size="14" class="icon me-1"></shield>{{ $t('_common.run_as') }}
+      </div>
+      <div class="col-auto" style="height: 0;">
+        <div class="invisible">
+          <button type="button" class="btn btn-danger btn-sm" tabindex="-1" aria-hidden="true">
+            <trash-2 :size="16" class="icon"></trash-2>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-for="(cmd, index) in modelValue" :key="index" class="row g-2 align-items-center mx-0 my-2">
+      <div class="col-12 col-md">
+        <div class="input-group">
+          <span class="input-group-text">
+            <play :size="14" class="icon"></play>
+          </span>
+          <input type="text" class="form-control monospace" v-model="cmd.do" :placeholder="$t('_common.do_cmd')"
+            :aria-label="$t('_common.do_cmd')" />
+          <button class="btn btn-secondary" type="button" @click="browse(index, 'do')">
+            <folder-open :size="14" class="icon"></folder-open>
+          </button>
+        </div>
+      </div>
+      <div class="col-12 col-md">
+        <div class="input-group">
+          <span class="input-group-text"><rotate-ccw :size="14" class="icon"></rotate-ccw></span>
+          <input type="text" class="form-control monospace" v-model="cmd.undo" :placeholder="$t('_common.undo_cmd')"
+            :aria-label="$t('_common.undo_cmd')" />
+          <button class="btn btn-secondary" type="button" @click="browse(index, 'undo')">
+            <folder-open :size="14" class="icon"></folder-open>
+          </button>
+        </div>
+      </div>
+      <div class="col-auto" v-if="platform === 'windows'">
+        <Checkbox :id="'prep-cmd-admin-' + index" label="_common.elevated" desc="" v-model="cmd.elevated"></Checkbox>
+      </div>
+      <div class="col-auto">
+        <button type="button" class="btn btn-danger btn-sm" @click="removeCmd(index)">
+          <trash-2 :size="16" class="icon"></trash-2>
+        </button>
+      </div>
+    </div>
+
+    <div class="d-flex justify-content-start my-3">
+      <button type="button" class="btn btn-success" @click="addCmd">
+        <plus :size="18" class="icon"></plus>
+        {{ addLabel }}
+      </button>
+    </div>
+
+    <FileBrowserModal v-model:open="browserOpen" type="executable" :title="$t('file_browser.select_executable')"
+      :start-path="browserStartPath" @confirm="onBrowserConfirm" />
+  </div>
+</template>
+
+<script>
+import Checkbox from '@/components/Checkbox.vue'
+import FileBrowserModal from '@/components/FileBrowserModal.vue'
+import {
+  FolderOpen,
+  Play,
+  Plus,
+  RotateCcw,
+  Shield,
+  Trash2,
+} from '@lucide/vue'
+
+export default {
+  components: {
+    Checkbox,
+    FileBrowserModal,
+    FolderOpen,
+    Play,
+    Plus,
+    RotateCcw,
+    Shield,
+    Trash2,
+  },
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    platform: String,
+    label: String,
+    description: String,
+    addLabel: String,
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      browserOpen: false,
+      browserTargetIndex: null,
+      browserTargetField: null,
+    };
+  },
+  computed: {
+    browserStartPath() {
+      if (this.browserTargetIndex === null) {
+        return '';
+      }
+      return this.modelValue[this.browserTargetIndex][this.browserTargetField] || '';
+    },
+  },
+  methods: {
+    addCmd() {
+      let template = {
+        do: "",
+        undo: "",
+      };
+
+      if (this.platform === 'windows') {
+        template = { ...template, elevated: false };
+      }
+      this.modelValue.push(template);
+    },
+    removeCmd(index) {
+      this.modelValue.splice(index, 1);
+    },
+    browse(index, field) {
+      this.browserTargetIndex = index;
+      this.browserTargetField = field;
+      this.browserOpen = true;
+    },
+    onBrowserConfirm(path) {
+      this.modelValue[this.browserTargetIndex][this.browserTargetField] = path;
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/components/Select.vue b/src_assets/common/assets/web/src/components/Select.vue
new file mode 100644
index 00000000000..c959ee13a2d
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/Select.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="mb-3">
+    <label :for="id" class="form-label">{{ label }}</label>
+    <select :id="id" class="form-select" v-model="model">
+      <slot name="prepend"></slot>
+      <PlatformLayout>
+        <template v-for="(list, slotName) in optionsBySlot" :key="slotName" #[slotName]>
+          <option v-for="opt in list" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+        </template>
+      </PlatformLayout>
+      <slot name="append"></slot>
+    </select>
+    <div class="form-text" v-if="desc">{{ desc }}</div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import PlatformLayout from '@/components/PlatformLayout.vue'
+
+const props = defineProps({
+  id: { type: String, required: true },
+  label: String,
+  desc: String,
+  // Array (same for all platforms or default) or object keyed by platform (default/freebsd/linux/windows/macos).
+  options: { type: [Array, Object], required: true },
+})
+
+const model = defineModel()
+
+// Normalizes to { slotName: options[] } for PlatformLayout.
+const optionsBySlot = computed(() => Array.isArray(props.options) ? { default: props.options } : props.options)
+</script>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue b/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
index 02f8fbb32db..f0a9eaf6487 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
@@ -1,14 +1,88 @@
 <script setup>
-import { ref } from 'vue'
-import PlatformLayout from '@/components/PlatformLayout.vue'
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config',
-  'global_prep_cmd'
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  },
+  global_prep_cmd: Array
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const HEVC_MODE_OPTIONS = [
+  { value: '0', label: t('config.hevc_mode_0') },
+  { value: '1', label: t('config.hevc_mode_1') },
+  { value: '2', label: t('config.hevc_mode_2') },
+  { value: '3', label: t('config.hevc_mode_3') },
+]
+
+const AV1_MODE_OPTIONS = [
+  { value: '0', label: t('config.av1_mode_0') },
+  { value: '1', label: t('config.av1_mode_1') },
+  { value: '2', label: t('config.av1_mode_2') },
+  { value: '3', label: t('config.av1_mode_3') },
+]
+
+const CAPTURE_OPTIONS = {
+  freebsd: [
+    { value: 'wlr', label: 'wlroots' },
+    { value: 'x11', label: 'X11' },
+    { value: 'portal', label: 'XDG Portal' },
+  ],
+  linux: [
+    { value: 'nvfbc', label: 'NvFBC' },
+    { value: 'wlr', label: 'wlroots' },
+    { value: 'kms', label: 'KMS' },
+    { value: 'x11', label: 'X11' },
+    { value: 'kwin', label: 'KWin Screencast' },
+    { value: 'portal', label: 'XDG Portal' },
+  ],
+  windows: [
+    { value: 'ddx', label: 'Desktop Duplication API' },
+    { value: 'wgc', label: `Windows.Graphics.Capture ${t('_common.beta')}` },
+  ],
+}
+
+const ENCODER_OPTIONS = {
+  windows: [
+    { value: 'nvenc', label: 'NVIDIA NVENC' },
+    { value: 'quicksync', label: 'Intel QuickSync' },
+    { value: 'amdvce', label: 'AMD AMF/VCE' },
+  ],
+  freebsd: [
+    { value: 'vulkan', label: 'Vulkan' },
+    { value: 'vaapi', label: 'VA-API' },
+  ],
+  linux: [
+    { value: 'nvenc', label: 'NVIDIA NVENC' },
+    { value: 'vaapi', label: 'VA-API' },
+    { value: 'vulkan', label: 'Vulkan' },
+  ],
+  macos: [
+    { value: 'videotoolbox', label: 'VideoToolbox' },
+  ],
+}
+</script>
+
+<script>
+export const OPTIONS = {
+  "fec_percentage": 20,
+  "qp": 28,
+  "min_threads": 2,
+  "hevc_mode": 0,
+  "av1_mode": 0,
+  "capture": "",
+  "encoder": "",
+}
 </script>
 
 <template>
@@ -35,89 +109,31 @@ const config = ref(props.config)
     </div>
 
     <!-- HEVC Support -->
-    <div class="mb-3">
-      <label for="hevc_mode" class="form-label">{{ $t('config.hevc_mode') }}</label>
-      <select id="hevc_mode" class="form-select" v-model="config.hevc_mode">
-        <option value="0">{{ $t('config.hevc_mode_0') }}</option>
-        <option value="1">{{ $t('config.hevc_mode_1') }}</option>
-        <option value="2">{{ $t('config.hevc_mode_2') }}</option>
-        <option value="3">{{ $t('config.hevc_mode_3') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.hevc_mode_desc') }}</div>
-    </div>
+    <Select id="hevc_mode" v-model="config.hevc_mode" :label="$t('config.hevc_mode')"
+      :desc="$t('config.hevc_mode_desc')" :options="HEVC_MODE_OPTIONS" />
 
     <!-- AV1 Support -->
-    <div class="mb-3">
-      <label for="av1_mode" class="form-label">{{ $t('config.av1_mode') }}</label>
-      <select id="av1_mode" class="form-select" v-model="config.av1_mode">
-        <option value="0">{{ $t('config.av1_mode_0') }}</option>
-        <option value="1">{{ $t('config.av1_mode_1') }}</option>
-        <option value="2">{{ $t('config.av1_mode_2') }}</option>
-        <option value="3">{{ $t('config.av1_mode_3') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.av1_mode_desc') }}</div>
-    </div>
+    <Select id="av1_mode" v-model="config.av1_mode" :label="$t('config.av1_mode')" :desc="$t('config.av1_mode_desc')"
+      :options="AV1_MODE_OPTIONS" />
 
     <!-- Capture -->
-    <div class="mb-3" v-if="platform !== 'macos'">
-      <label for="capture" class="form-label">{{ $t('config.capture') }}</label>
-      <select id="capture" class="form-select" v-model="config.capture">
+    <Select v-if="platform !== 'macos'" id="capture" v-model="config.capture" :label="$t('config.capture')"
+      :desc="$t('config.capture_desc')" :options="CAPTURE_OPTIONS">
+      <template #prepend>
         <option value="">{{ $t('_common.autodetect') }}</option>
-        <PlatformLayout :platform="platform">
-          <template #freebsd>
-            <option value="wlr">wlroots</option>
-            <option value="x11">X11</option>
-            <option value="portal">XDG Portal</option>
-          </template>
-          <template #linux>
-            <option value="nvfbc">NvFBC</option>
-            <option value="wlr">wlroots</option>
-            <option value="kms">KMS</option>
-            <option value="x11">X11</option>
-            <option value="kwin">KWin Screencast</option>
-            <option value="portal">XDG Portal</option>
-          </template>
-          <template #windows>
-            <option value="ddx">Desktop Duplication API</option>
-            <option value="wgc">Windows.Graphics.Capture {{ $t('_common.beta') }}</option>
-          </template>
-        </PlatformLayout>
-      </select>
-      <div class="form-text">{{ $t('config.capture_desc') }}</div>
-    </div>
+      </template>
+    </Select>
 
     <!-- Encoder -->
-    <div class="mb-3">
-      <label for="encoder" class="form-label">{{ $t('config.encoder') }}</label>
-      <select id="encoder" class="form-select" v-model="config.encoder">
+    <Select id="encoder" v-model="config.encoder" :label="$t('config.encoder')" :desc="$t('config.encoder_desc')"
+      :options="ENCODER_OPTIONS">
+      <template #prepend>
         <option value="">{{ $t('_common.autodetect') }}</option>
-        <PlatformLayout :platform="platform">
-          <template #windows>
-            <option value="nvenc">NVIDIA NVENC</option>
-            <option value="quicksync">Intel QuickSync</option>
-            <option value="amdvce">AMD AMF/VCE</option>
-          </template>
-          <template #freebsd>
-            <option value="vulkan">Vulkan</option>
-            <option value="vaapi">VA-API</option>
-          </template>
-          <template #linux>
-            <option value="nvenc">NVIDIA NVENC</option>
-            <option value="vaapi">VA-API</option>
-            <option value="vulkan">Vulkan</option>
-          </template>
-          <template #macos>
-            <option value="videotoolbox">VideoToolbox</option>
-          </template>
-        </PlatformLayout>
+      </template>
+      <template #append>
         <option value="software">{{ $t('config.encoder_software') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.encoder_desc') }}</div>
-    </div>
+      </template>
+    </Select>
 
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
index 14d2bfdef94..3a791ab9734 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
@@ -1,6 +1,6 @@
 <script setup>
-import {ref} from 'vue'
-import {$tp} from '@/utils/platform-i18n'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { $tp } from '@/utils/platform-i18n'
 import PlatformLayout from '@/components/PlatformLayout.vue'
 import AdapterNameSelector from '@/components/configs/tabs/audiovideo/AdapterNameSelector.vue'
 import DisplayOutputSelector from '@/components/configs/tabs/audiovideo/DisplayOutputSelector.vue'
@@ -8,12 +8,40 @@ import DisplayDeviceOptions from "@/components/configs/tabs/audiovideo/DisplayDe
 import DisplayModesSettings from "@/components/configs/tabs/audiovideo/DisplayModesSettings.vue";
 import Checkbox from "@/components/Checkbox.vue";
 
-const props = defineProps([
-  'platform',
-  'config',
-])
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
 
-const config = ref(props.config)
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+</script>
+
+<script>
+export const OPTIONS = {
+  "audio_sink": "",
+  "virtual_sink": "",
+  "stream_audio": "enabled",
+  "install_steam_audio_drivers": "enabled",
+  "adapter_name": "",
+  "output_name": "",
+  "dd_configuration_option": "disabled",
+  "dd_resolution_option": "auto",
+  "dd_manual_resolution": "",
+  "dd_refresh_rate_option": "auto",
+  "dd_manual_refresh_rate": "",
+  "dd_hdr_option": "auto",
+  "dd_wa_hdr_toggle_delay": 0,
+  "dd_config_revert_delay": 3000,
+  "dd_config_revert_on_disconnect": "disabled",
+  "dd_mode_remapping": { "mixed": [], "resolution_only": [], "refresh_rate_only": [] },
+  "max_bitrate": 0,
+  "minimum_fps_target": 0
+}
 </script>
 
 <template>
@@ -22,11 +50,11 @@ const config = ref(props.config)
     <div class="mb-3">
       <label for="audio_sink" class="form-label">{{ $t('config.audio_sink') }}</label>
       <input type="text" class="form-control" id="audio_sink"
-             :placeholder="$tp('config.audio_sink_placeholder', 'alsa_output.pci-0000_09_00.3.analog-stereo')"
-             v-model="config.audio_sink" />
+        :placeholder="$tp('config.audio_sink_placeholder', 'alsa_output.pci-0000_09_00.3.analog-stereo')"
+        v-model="config.audio_sink" />
       <div class="form-text">
         {{ $tp('config.audio_sink_desc') }}<br>
-        <PlatformLayout :platform="platform">
+        <PlatformLayout>
           <template #windows>
             <pre>tools\audio-info.exe</pre>
           </template>
@@ -47,57 +75,34 @@ const config = ref(props.config)
     </div>
 
 
-    <PlatformLayout :platform="platform">
+    <PlatformLayout>
       <template #windows>
         <!-- Virtual Sink -->
         <div class="mb-3">
           <label for="virtual_sink" class="form-label">{{ $t('config.virtual_sink') }}</label>
           <input type="text" class="form-control" id="virtual_sink" :placeholder="$t('config.virtual_sink_placeholder')"
-                 v-model="config.virtual_sink" />
+            v-model="config.virtual_sink" />
           <div class="form-text">{{ $t('config.virtual_sink_desc') }}</div>
         </div>
 
         <!-- Install Steam Audio Drivers -->
-        <Checkbox class="mb-3"
-                  id="install_steam_audio_drivers"
-                  locale-prefix="config"
-                  v-model="config.install_steam_audio_drivers"
-                  default="true"
-        ></Checkbox>
+        <Checkbox class="mb-3" id="install_steam_audio_drivers" locale-prefix="config"
+          v-model="config.install_steam_audio_drivers" default="true"></Checkbox>
       </template>
     </PlatformLayout>
 
     <!-- Disable Audio -->
-    <Checkbox class="mb-3"
-              id="stream_audio"
-              locale-prefix="config"
-              v-model="config.stream_audio"
-              default="true"
-    ></Checkbox>
+    <Checkbox class="mb-3" id="stream_audio" locale-prefix="config" v-model="config.stream_audio" default="true">
+    </Checkbox>
 
-    <AdapterNameSelector
-        :platform="platform"
-        :config="config"
-    />
+    <AdapterNameSelector :platform="platform" :config="config" />
 
-    <DisplayOutputSelector
-      :platform="platform"
-      :config="config"
-    />
+    <DisplayOutputSelector :platform="platform" :config="config" />
 
-    <DisplayDeviceOptions
-      :platform="platform"
-      :config="config"
-    />
+    <DisplayDeviceOptions :platform="platform" :config="config" />
 
     <!-- Display Modes -->
-    <DisplayModesSettings
-        :platform="platform"
-        :config="config"
-    />
+    <DisplayModesSettings :platform="platform" :config="config" />
 
   </div>
 </template>
-
-<style scoped>
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
index 6346ddceea8..434364de799 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
@@ -15,60 +15,66 @@ const props = defineProps([
 ])
 
 const config = ref(props.config)
+
+const nv = ref(null)
+const qsv = ref(null)
+const amd = ref(null)
+const vt = ref(null)
+const vaapi = ref(null)
+const vulkan = ref(null)
+const sw = ref(null)
+
+const tabRefsById = { nv, qsv, amd, vt, vaapi, vulkan, sw }
+
+function getOptions() {
+  const result = {};
+  Object.keys(tabRefsById).forEach(id => {
+    const tabRef = tabRefsById[id];
+    if (tabRef.value) {
+      Object.assign(result, tabRef.value.getOwnConfigOptions());
+    }
+  });
+  return result;
+}
+
+// Same as getOptions(), but keeps each encoder's options grouped under its own tab id.
+function getOptionsById() {
+  const result = {};
+  Object.keys(tabRefsById).forEach(id => {
+    const tabRef = tabRefsById[id];
+    if (tabRef.value) {
+      result[id] = tabRef.value.getOwnConfigOptions();
+    }
+  });
+  return result;
+}
+
+defineExpose({ getOptions, getOptionsById })
 </script>
 
 <template>
 
   <!-- NVIDIA NVENC Encoder Tab -->
-  <NvidiaNvencEncoder
-      v-if="currentTab === 'nv'"
-      :platform="platform"
-      :config="config"
-  />
+  <NvidiaNvencEncoder ref="nv" v-show="currentTab === 'nv'" :platform="platform" :config="config" />
 
   <!-- Intel QuickSync Encoder Tab -->
-  <IntelQuickSyncEncoder
-      v-if="currentTab === 'qsv'"
-      :platform="platform"
-      :config="config"
-  />
+  <IntelQuickSyncEncoder ref="qsv" v-show="currentTab === 'qsv'" :platform="platform" :config="config" />
 
   <!-- AMD AMF Encoder Tab -->
-  <AmdAmfEncoder
-      v-if="currentTab === 'amd'"
-      :platform="platform"
-      :config="config"
-  />
+  <AmdAmfEncoder ref="amd" v-show="currentTab === 'amd'" :platform="platform" :config="config" />
 
   <!-- VideoToolbox Encoder Tab -->
-  <VideotoolboxEncoder
-      v-if="currentTab === 'vt'"
-      :platform="platform"
-      :config="config"
-  />
+  <VideotoolboxEncoder ref="vt" v-show="currentTab === 'vt'" :platform="platform" :config="config" />
 
   <!-- VAAPI Encoder Tab -->
-  <VAAPIEncoder
-      v-if="currentTab === 'vaapi'"
-      :platform="platform"
-      :config="config"
-  />
+  <VAAPIEncoder ref="vaapi" v-show="currentTab === 'vaapi'" :platform="platform" :config="config" />
 
   <!-- Vulkan Encoder Tab -->
-  <VulkanEncoder
-      v-if="currentTab === 'vulkan'"
-      :platform="platform"
-      :config="config"
-  />
+  <VulkanEncoder ref="vulkan" v-show="currentTab === 'vulkan'" :platform="platform" :config="config" />
 
   <!-- Software Encoder Tab -->
-  <SoftwareEncoder
-      v-if="currentTab === 'sw'"
-      :platform="platform"
-      :config="config"
-  />
+  <SoftwareEncoder ref="sw" v-show="currentTab === 'sw'" :platform="platform" :config="config" />
 
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/Files.vue b/src_assets/common/assets/web/src/components/configs/tabs/Files.vue
index 87b8f9500e7..92ae014403a 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/Files.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/Files.vue
@@ -1,12 +1,28 @@
 <script setup>
-import { ref } from 'vue'
+import { useConfigTab } from '@/composables/useConfigTab'
 
-const props = defineProps([
-  'platform',
-  'config'
-])
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
 
-const config = ref(props.config)
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+</script>
+
+<script>
+export const OPTIONS = {
+  "file_apps": "",
+  "credentials_file": "",
+  "log_path": "",
+  "pkey": "",
+  "cert": "",
+  "file_state": "",
+}
 </script>
 
 <template>
@@ -21,7 +37,8 @@ const config = ref(props.config)
     <!-- Credentials File -->
     <div class="mb-3">
       <label for="credentials_file" class="form-label">{{ $t('config.credentials_file') }}</label>
-      <input type="text" class="form-control" id="credentials_file" placeholder="sunshine_state.json" v-model="config.credentials_file" />
+      <input type="text" class="form-control" id="credentials_file" placeholder="sunshine_state.json"
+        v-model="config.credentials_file" />
       <div class="form-text">{{ $t('config.credentials_file_desc') }}</div>
     </div>
 
@@ -50,13 +67,9 @@ const config = ref(props.config)
     <div class="mb-3">
       <label for="file_state" class="form-label">{{ $t('config.file_state') }}</label>
       <input type="text" class="form-control" id="file_state" placeholder="sunshine_state.json"
-             v-model="config.file_state" />
+        v-model="config.file_state" />
       <div class="form-text">{{ $t('config.file_state_desc') }}</div>
     </div>
 
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/General.vue b/src_assets/common/assets/web/src/components/configs/tabs/General.vue
index aef1d73f5d4..fa9e7ce5163 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/General.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/General.vue
@@ -1,34 +1,44 @@
 <script setup>
 import Checkbox from '@/components/Checkbox.vue'
-import { ref } from 'vue'
-import {
-  Play,
-  Plus,
-  Shield,
-  Trash2,
-  Undo,
-} from '@lucide/vue'
+import PrepCommandList from '@/components/PrepCommandList.vue'
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
+import { SUPPORTED_LOCALES } from '@/utils/locale'
+
+const { t } = useI18n()
+
+const LOG_LEVEL_OPTIONS = [
+  { value: 0, label: t('config.min_log_level_0') },
+  { value: 1, label: t('config.min_log_level_1') },
+  { value: 2, label: t('config.min_log_level_2') },
+  { value: 3, label: t('config.min_log_level_3') },
+  { value: 4, label: t('config.min_log_level_4') },
+  { value: 5, label: t('config.min_log_level_5') },
+  { value: 6, label: t('config.min_log_level_6') },
+]
 
 const props = defineProps({
   platform: String,
-  config: Object
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
 })
-const config = ref(props.config)
 
-function addCmd() {
-  let template = {
-    do: "",
-    undo: "",
-  };
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
 
-  if (props.platform === 'windows') {
-    template = { ...template, elevated: false };
-  }
-  config.value.global_prep_cmd.push(template);
-}
+defineExpose({ getOwnConfigOptions })
+</script>
 
-function removeCmd(index) {
-  config.value.global_prep_cmd.splice(index,1)
+<script>
+export const OPTIONS = {
+  "locale": "en",
+  "sunshine_name": "",
+  "min_log_level": 2,
+  "global_prep_cmd": [],
+  "notify_pre_releases": "disabled",
+  "system_tray": "enabled",
 }
 </script>
 
@@ -38,28 +48,7 @@ function removeCmd(index) {
     <div class="mb-3">
       <label for="locale" class="form-label">{{ $t('config.locale') }}</label>
       <select id="locale" class="form-select" v-model="config.locale">
-        <option value="bg">Български (Bulgarian)</option>
-        <option value="cs">Čeština (Czech)</option>
-        <option value="de">Deutsch (German)</option>
-        <option value="en">English</option>
-        <option value="en_GB">English, United Kingdom</option>
-        <option value="en_US">English, United States</option>
-        <option value="es">Español (Spanish)</option>
-        <option value="fr">Français (French)</option>
-        <option value="hu">Magyar (Hungarian)</option>
-        <option value="it">Italiano (Italian)</option>
-        <option value="ja">日本語 (Japanese)</option>
-        <option value="ko">한국어 (Korean)</option>
-        <option value="pl">Polski (Polish)</option>
-        <option value="pt">Português (Portuguese)</option>
-        <option value="pt_BR">Português, Brasileiro (Portuguese, Brazilian)</option>
-        <option value="ru">Русский (Russian)</option>
-        <option value="sv">svenska (Swedish)</option>
-        <option value="tr">Türkçe (Turkish)</option>
-        <option value="uk">Українська (Ukranian)</option>
-        <option value="vi">Tiếng Việt (Vietnamese)</option>
-        <option value="zh">简体中文 (Chinese Simplified)</option>
-        <option value="zh_TW">繁體中文 (Chinese Traditional)</option>
+        <option v-for="loc in SUPPORTED_LOCALES" :key="loc.value" :value="loc.value">{{ loc.label }}</option>
       </select>
       <div class="form-text">{{ $t('config.locale_desc') }}</div>
     </div>
@@ -68,89 +57,24 @@ function removeCmd(index) {
     <div class="mb-3">
       <label for="sunshine_name" class="form-label">{{ $t('config.sunshine_name') }}</label>
       <input type="text" class="form-control" id="sunshine_name" placeholder="Sunshine"
-             v-model="config.sunshine_name" />
+        v-model="config.sunshine_name" />
       <div class="form-text">{{ $t('config.sunshine_name_desc') }}</div>
     </div>
 
     <!-- Log Level -->
-    <div class="mb-3">
-      <label for="min_log_level" class="form-label">{{ $t('config.min_log_level') }}</label>
-      <select id="min_log_level" class="form-select" v-model="config.min_log_level">
-        <option value="0">{{ $t('config.min_log_level_0') }}</option>
-        <option value="1">{{ $t('config.min_log_level_1') }}</option>
-        <option value="2">{{ $t('config.min_log_level_2') }}</option>
-        <option value="3">{{ $t('config.min_log_level_3') }}</option>
-        <option value="4">{{ $t('config.min_log_level_4') }}</option>
-        <option value="5">{{ $t('config.min_log_level_5') }}</option>
-        <option value="6">{{ $t('config.min_log_level_6') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.min_log_level_desc') }}</div>
-    </div>
+    <Select id="min_log_level" v-model="config.min_log_level" :label="$t('config.min_log_level')"
+      :desc="$t('config.min_log_level_desc')" :options="LOG_LEVEL_OPTIONS" />
 
     <!-- Global Prep Commands -->
-    <div id="global_prep_cmd" class="mb-3 d-flex flex-column">
-      <label class="form-label">{{ $t('config.global_prep_cmd') }}</label>
-      <div class="form-text">{{ $t('config.global_prep_cmd_desc') }}</div>
-      <table class="table" v-if="config.global_prep_cmd.length > 0">
-        <thead>
-        <tr>
-          <th scope="col"><Play :size="16" /> {{ $t('_common.do_cmd') }}</th>
-          <th scope="col"><Undo :size="16" /> {{ $t('_common.undo_cmd') }}</th>
-          <th scope="col" v-if="platform === 'windows'">
-            <Shield :size="16" /> {{ $t('_common.run_as') }}
-          </th>
-          <th scope="col"></th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr v-for="(c, i) in config.global_prep_cmd">
-          <td>
-            <input type="text" class="form-control monospace" v-model="c.do" />
-          </td>
-          <td>
-            <input type="text" class="form-control monospace" v-model="c.undo" />
-          </td>
-          <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)">
-              <Trash2 :size="16" />
-            </button>
-            <button class="btn btn-success" @click="addCmd">
-              <Plus :size="16" />
-            </button>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-      <button class="ms-0 mt-2 btn btn-success" style="margin: 0 auto" @click="addCmd">
-        &plus; {{ $t('config.add') }}
-      </button>
-    </div>
+    <PrepCommandList v-model="config.global_prep_cmd" :platform="platform" :label="$t('config.global_prep_cmd')"
+      :description="$t('config.global_prep_cmd_desc')" :add-label="$t('config.add')" />
 
     <!-- Notify Pre-Releases -->
-    <Checkbox class="mb-3"
-              id="notify_pre_releases"
-              locale-prefix="config"
-              v-model="config.notify_pre_releases"
-              default="false"
-    ></Checkbox>
+    <Checkbox class="mb-3" id="notify_pre_releases" locale-prefix="config" v-model="config.notify_pre_releases"
+      default="false"></Checkbox>
 
     <!-- Enable system tray -->
-    <Checkbox class="mb-3"
-              id="system_tray"
-              locale-prefix="config"
-              v-model="config.system_tray"
-              default="true"
-    ></Checkbox>
+    <Checkbox class="mb-3" id="system_tray" locale-prefix="config" v-model="config.system_tray" default="true">
+    </Checkbox>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue b/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
index 5e869cc0457..2f04600de60 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
@@ -1,62 +1,60 @@
 <script setup>
-import { ref } from 'vue'
+import { useConfigTab } from '@/composables/useConfigTab'
 import PlatformLayout from '@/components/PlatformLayout.vue'
 import Checkbox from "@/components/Checkbox.vue";
 
-const props = defineProps([
-  'platform',
-  'config'
-])
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
 
-const config = ref(props.config)
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+</script>
+
+<script>
+export const OPTIONS = {
+  "controller": "enabled",
+  "gamepad": "auto",
+  "ds4_back_as_touchpad_click": "enabled",
+  "motion_as_ds4": "enabled",
+  "touchpad_as_ds4": "enabled",
+  "virtualhid_randomize_mac": "enabled",
+  "back_button_timeout": -1,
+  "keyboard": "enabled",
+  "key_repeat_delay": 500,
+  "key_repeat_frequency": 24.9,
+  "always_send_scancodes": "enabled",
+  "key_rightalt_to_key_win": "disabled",
+  "mouse": "enabled",
+  "high_resolution_scrolling": "enabled",
+  "native_pen_touch": "enabled",
+  "keybindings": "[0x10,0xA0,0x11,0xA2,0x12,0xA4]",  // todo: add this to UI
+}
 </script>
 
 <template>
   <div id="input" class="config-page">
     <!-- Enable Gamepad Input -->
-    <Checkbox class="mb-3"
-              id="controller"
-              locale-prefix="config"
-              v-model="config.controller"
-              default="true"
-    ></Checkbox>
+    <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'">
       <label for="gamepad" class="form-label">{{ $t('config.gamepad') }}</label>
       <select id="gamepad" class="form-select" v-model="config.gamepad">
-        <option value="auto">{{ $t('_common.auto') }}</option>
-
-        <PlatformLayout :platform="platform">
-          <template #freebsd>
-            <option value="generic">{{ $t("config.gamepad_generic") }}</option>
-            <option value="x360">{{ $t('config.gamepad_x360') }}</option>
-            <option value="xone">{{ $t("config.gamepad_xone") }}</option>
-            <option value="xseries">{{ $t("config.gamepad_xseries") }}</option>
-            <option value="ds4">{{ $t('config.gamepad_ds4') }}</option>
-            <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
-            <option value="switch">{{ $t("config.gamepad_switch") }}</option>
-          </template>
-
-          <template #linux>
-            <option value="generic">{{ $t("config.gamepad_generic") }}</option>
-            <option value="x360">{{ $t('config.gamepad_x360') }}</option>
-            <option value="xone">{{ $t("config.gamepad_xone") }}</option>
-            <option value="xseries">{{ $t("config.gamepad_xseries") }}</option>
-            <option value="ds4">{{ $t('config.gamepad_ds4') }}</option>
-            <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
-            <option value="switch">{{ $t("config.gamepad_switch") }}</option>
-          </template>
-
-          <template #windows>
-            <option value="generic">{{ $t("config.gamepad_generic") }}</option>
-            <option value="x360">{{ $t('config.gamepad_x360') }}</option>
-            <option value="xone">{{ $t("config.gamepad_xone") }}</option>
-            <option value="xseries">{{ $t("config.gamepad_xseries") }}</option>
-            <option value="ds4">{{ $t('config.gamepad_ds4') }}</option>
-            <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
-            <option value="switch">{{ $t("config.gamepad_switch") }}</option>
-          </template>
+        <PlatformLayout>
+          <option value="auto">{{ $t('_common.auto') }}</option>
+          <option value="generic">{{ $t("config.gamepad_generic") }}</option>
+          <option value="x360">{{ $t('config.gamepad_x360') }}</option>
+          <option value="xone">{{ $t("config.gamepad_xone") }}</option>
+          <option value="xseries">{{ $t("config.gamepad_xseries") }}</option>
+          <option value="ds4">{{ $t('config.gamepad_ds4') }}</option>
+          <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
+          <option value="switch">{{ $t("config.gamepad_switch") }}</option>
         </PlatformLayout>
       </select>
       <div class="form-text">{{ $t('config.gamepad_desc') }}</div>
@@ -64,52 +62,38 @@ const config = ref(props.config)
 
     <!-- Additional options based on gamepad type -->
     <template v-if="config.controller === 'enabled'">
-      <template v-if="config.gamepad === 'ds4' || config.gamepad === 'ds5' || (config.gamepad === 'auto' && platform !== 'macos')">
+      <template
+        v-if="config.gamepad === 'ds4' || config.gamepad === 'ds5' || (config.gamepad === 'auto' && platform !== 'macos')">
         <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">
+                data-bs-target="#panelsStayOpen-collapseOne">
                 {{ $t(config.gamepad === 'auto' ? 'config.gamepad_auto' : 'config.gamepad_ds4_manual') }}
               </button>
             </h2>
             <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-                 aria-labelledby="panelsStayOpen-headingOne">
+              aria-labelledby="panelsStayOpen-headingOne">
               <div class="accordion-body">
                 <!-- Automatic PlayStation-style detection options -->
                 <template v-if="config.gamepad === 'auto' && (platform === 'windows' || platform === 'linux')">
                   <!-- Gamepad with motion capability as a PlayStation-style controller -->
-                  <Checkbox class="mb-3"
-                            id="motion_as_ds4"
-                            locale-prefix="config"
-                            v-model="config.motion_as_ds4"
-                            default="true"
-                  ></Checkbox>
+                  <Checkbox class="mb-3" id="motion_as_ds4" locale-prefix="config" v-model="config.motion_as_ds4"
+                    default="true"></Checkbox>
                   <!-- Gamepad with touch capability as a PlayStation-style controller -->
-                  <Checkbox class="mb-3"
-                            id="touchpad_as_ds4"
-                            locale-prefix="config"
-                            v-model="config.touchpad_as_ds4"
-                            default="true"
-                  ></Checkbox>
+                  <Checkbox class="mb-3" id="touchpad_as_ds4" locale-prefix="config" v-model="config.touchpad_as_ds4"
+                    default="true"></Checkbox>
                 </template>
                 <!-- PlayStation-style option: Back/Select as touchpad click -->
                 <template v-if="config.gamepad === 'ds4' || config.gamepad === 'ds5' || config.gamepad === 'auto'">
-                  <Checkbox class="mb-3"
-                            id="ds4_back_as_touchpad_click"
-                            locale-prefix="config"
-                            v-model="config.ds4_back_as_touchpad_click"
-                            default="true"
-                  ></Checkbox>
+                  <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>
                 <!-- Virtual HID option: Controller MAC randomization -->
-                <template v-if="config.gamepad === 'ds4' || config.gamepad === 'ds5' || (config.gamepad === 'auto' && platform !== 'macos')">
-                  <Checkbox class="mb-3"
-                            id="virtualhid_randomize_mac"
-                            locale-prefix="config"
-                            v-model="config.virtualhid_randomize_mac"
-                            default="true"
-                  ></Checkbox>
+                <template
+                  v-if="config.gamepad === 'ds4' || config.gamepad === 'ds5' || (config.gamepad === 'auto' && platform !== 'macos')">
+                  <Checkbox class="mb-3" id="virtualhid_randomize_mac" locale-prefix="config"
+                    v-model="config.virtualhid_randomize_mac" default="true"></Checkbox>
                 </template>
               </div>
             </div>
@@ -122,24 +106,19 @@ const config = ref(props.config)
     <div class="mb-3" v-if="config.controller === 'enabled'">
       <label for="back_button_timeout" class="form-label">{{ $t('config.back_button_timeout') }}</label>
       <input type="text" class="form-control" id="back_button_timeout" placeholder="-1"
-             v-model="config.back_button_timeout" />
+        v-model="config.back_button_timeout" />
       <div class="form-text">{{ $t('config.back_button_timeout_desc') }}</div>
     </div>
 
     <!-- Enable Keyboard Input -->
     <hr>
-    <Checkbox class="mb-3"
-              id="keyboard"
-              locale-prefix="config"
-              v-model="config.keyboard"
-              default="true"
-    ></Checkbox>
+    <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'">
       <label for="key_repeat_delay" class="form-label">{{ $t('config.key_repeat_delay') }}</label>
       <input type="text" class="form-control" id="key_repeat_delay" placeholder="500"
-             v-model="config.key_repeat_delay" />
+        v-model="config.key_repeat_delay" />
       <div class="form-text">{{ $t('config.key_repeat_delay_desc') }}</div>
     </div>
 
@@ -147,57 +126,28 @@ const config = ref(props.config)
     <div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
       <label for="key_repeat_frequency" class="form-label">{{ $t('config.key_repeat_frequency') }}</label>
       <input type="text" class="form-control" id="key_repeat_frequency" placeholder="24.9"
-             v-model="config.key_repeat_frequency" />
+        v-model="config.key_repeat_frequency" />
       <div class="form-text">{{ $t('config.key_repeat_frequency_desc') }}</div>
     </div>
 
     <!-- Always send scancodes -->
-    <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>
+    <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 -->
-    <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>
+    <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>
-    <Checkbox class="mb-3"
-              id="mouse"
-              locale-prefix="config"
-              v-model="config.mouse"
-              default="true"
-    ></Checkbox>
+    <Checkbox class="mb-3" id="mouse" locale-prefix="config" v-model="config.mouse" default="true"></Checkbox>
 
     <!-- High resolution scrolling support -->
-    <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>
+    <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 -->
-    <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>
+    <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>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/Network.vue b/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
index f00ec6da6b3..265e15fb616 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
@@ -1,41 +1,79 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import {
   Info,
   TriangleAlert,
 } from '@lucide/vue'
 import Checkbox from "@/components/Checkbox.vue";
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config'
-])
+const { t } = useI18n()
+
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
 
 const defaultMoonlightPort = 47989
 
-const config = ref(props.config)
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
 const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort)
+
+const ADDRESS_FAMILY_OPTIONS = [
+  { value: 'ipv4', label: t('config.address_family_ipv4') },
+  { value: 'both', label: t('config.address_family_both') },
+]
+
+const ORIGIN_WEB_UI_ALLOWED_OPTIONS = [
+  { value: 'pc', label: t('config.origin_web_ui_allowed_pc') },
+  { value: 'lan', label: t('config.origin_web_ui_allowed_lan') },
+  { value: 'wan', label: t('config.origin_web_ui_allowed_wan') },
+]
+
+const LAN_ENCRYPTION_MODE_OPTIONS = [
+  { value: '0', label: t('_common.disabled_def') },
+  { value: '1', label: t('config.lan_encryption_mode_1') },
+  { value: '2', label: t('config.lan_encryption_mode_2') },
+]
+
+const WAN_ENCRYPTION_MODE_OPTIONS = [
+  { value: '0', label: t('_common.disabled') },
+  { value: '1', label: t('config.wan_encryption_mode_1') },
+  { value: '2', label: t('config.wan_encryption_mode_2') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "upnp": "disabled",
+  "address_family": "ipv4",
+  "bind_address": "",
+  "port": 47989,
+  "origin_web_ui_allowed": "lan",
+  "csrf_allowed_origins": "",
+  "external_ip": "",
+  "lan_encryption_mode": 0,
+  "wan_encryption_mode": 1,
+  "ping_timeout": 10000,
+  "packetsize": 0,
+}
 </script>
 
 <template>
   <div id="network" class="config-page">
     <!-- UPnP -->
-    <Checkbox class="mb-3"
-              id="upnp"
-              locale-prefix="config"
-              v-model="config.upnp"
-              default="false"
-    ></Checkbox>
+    <Checkbox class="mb-3" id="upnp" locale-prefix="config" v-model="config.upnp" default="false"></Checkbox>
 
     <!-- Address family -->
-    <div class="mb-3">
-      <label for="address_family" class="form-label">{{ $t('config.address_family') }}</label>
-      <select id="address_family" class="form-select" v-model="config.address_family">
-        <option value="ipv4">{{ $t('config.address_family_ipv4') }}</option>
-        <option value="both">{{ $t('config.address_family_both') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.address_family_desc') }}</div>
-    </div>
+    <Select id="address_family" v-model="config.address_family" :label="$t('config.address_family')"
+      :desc="$t('config.address_family_desc')" :options="ADDRESS_FAMILY_OPTIONS" />
 
     <!-- Bind address -->
     <div class="mb-3">
@@ -48,7 +86,7 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
     <div class="mb-3">
       <label for="port" class="form-label">{{ $t('config.port') }}</label>
       <input type="number" min="1029" max="65514" class="form-control" id="port" :placeholder="defaultMoonlightPort"
-             v-model="config.port" />
+        v-model="config.port" />
       <div class="form-text">{{ $t('config.port_desc') }}</div>
       <!-- Add warning if any port is less than 1024 -->
       <div class="alert alert-danger" v-if="(+effectivePort - 5) < 1024">
@@ -61,53 +99,53 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
       <!-- Create a port table for the various ports needed by Sunshine -->
       <table class="table">
         <thead>
-        <tr>
-          <th scope="col">{{ $t('config.port_protocol') }}</th>
-          <th scope="col">{{ $t('config.port_port') }}</th>
-          <th scope="col">{{ $t('config.port_note') }}</th>
-        </tr>
+          <tr>
+            <th scope="col">{{ $t('config.port_protocol') }}</th>
+            <th scope="col">{{ $t('config.port_port') }}</th>
+            <th scope="col">{{ $t('config.port_note') }}</th>
+          </tr>
         </thead>
         <tbody>
-        <tr>
-          <!-- HTTPS -->
-          <td>{{ $t('config.port_tcp') }}</td>
-          <td>{{+effectivePort - 5}}</td>
-          <td></td>
-        </tr>
-        <tr>
-          <!-- HTTP -->
-          <td>{{ $t('config.port_tcp') }}</td>
-          <td>{{+effectivePort}}</td>
-          <td>
-            <div class="alert alert-primary" role="alert" v-if="+effectivePort !== defaultMoonlightPort">
-              <Info :size="20" /> {{ $t('config.port_http_port_note') }}
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <!-- Web UI -->
-          <td>{{ $t('config.port_tcp') }}</td>
-          <td>{{+effectivePort + 1}}</td>
-          <td>{{ $t('config.port_web_ui') }}</td>
-        </tr>
-        <tr>
-          <!-- RTSP -->
-          <td>{{ $t('config.port_tcp') }}</td>
-          <td>{{+effectivePort + 21}}</td>
-          <td></td>
-        </tr>
-        <tr>
-          <!-- Video, Control, Audio -->
-          <td>{{ $t('config.port_udp') }}</td>
-          <td>{{+effectivePort + 9}} - {{+effectivePort + 11}}</td>
-          <td></td>
-        </tr>
-        <!--            <tr>-->
-        <!--              &lt;!&ndash; Mic &ndash;&gt;-->
-        <!--              <td>UDP</td>-->
-        <!--              <td>{{+effectivePort + 13}}</td>-->
-        <!--              <td></td>-->
-        <!--            </tr>-->
+          <tr>
+            <!-- HTTPS -->
+            <td>{{ $t('config.port_tcp') }}</td>
+            <td>{{+effectivePort - 5 }}</td>
+            <td></td>
+          </tr>
+          <tr>
+            <!-- HTTP -->
+            <td>{{ $t('config.port_tcp') }}</td>
+            <td>{{+effectivePort }}</td>
+            <td>
+              <div class="alert alert-primary" role="alert" v-if="+effectivePort !== defaultMoonlightPort">
+                <Info :size="20" /> {{ $t('config.port_http_port_note') }}
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <!-- Web UI -->
+            <td>{{ $t('config.port_tcp') }}</td>
+            <td>{{+effectivePort + 1 }}</td>
+            <td>{{ $t('config.port_web_ui') }}</td>
+          </tr>
+          <tr>
+            <!-- RTSP -->
+            <td>{{ $t('config.port_tcp') }}</td>
+            <td>{{+effectivePort + 21 }}</td>
+            <td></td>
+          </tr>
+          <tr>
+            <!-- Video, Control, Audio -->
+            <td>{{ $t('config.port_udp') }}</td>
+            <td>{{+effectivePort + 9 }} - {{+effectivePort + 11 }}</td>
+            <td></td>
+          </tr>
+          <!--            <tr>-->
+          <!--              &lt;!&ndash; Mic &ndash;&gt;-->
+          <!--              <td>UDP</td>-->
+          <!--              <td>{{+effectivePort + 13}}</td>-->
+          <!--              <td></td>-->
+          <!--            </tr>-->
         </tbody>
       </table>
       <!-- add warning about exposing web ui to the internet -->
@@ -117,54 +155,31 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
     </div>
 
     <!-- Origin Web UI Allowed -->
-    <div class="mb-3">
-      <label for="origin_web_ui_allowed" class="form-label">{{ $t('config.origin_web_ui_allowed') }}</label>
-      <select id="origin_web_ui_allowed" class="form-select" v-model="config.origin_web_ui_allowed">
-        <option value="pc">{{ $t('config.origin_web_ui_allowed_pc') }}</option>
-        <option value="lan">{{ $t('config.origin_web_ui_allowed_lan') }}</option>
-        <option value="wan">{{ $t('config.origin_web_ui_allowed_wan') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.origin_web_ui_allowed_desc') }}</div>
-    </div>
+    <Select id="origin_web_ui_allowed" v-model="config.origin_web_ui_allowed" :label="$t('config.origin_web_ui_allowed')"
+      :desc="$t('config.origin_web_ui_allowed_desc')" :options="ORIGIN_WEB_UI_ALLOWED_OPTIONS" />
 
     <!-- CSRF Allowed Origins -->
     <div class="mb-3">
       <label for="csrf_allowed_origins" class="form-label">{{ $t('config.csrf_allowed_origins') }}</label>
-      <input type="text"
-             class="form-control"
-             id="csrf_allowed_origins"
-             v-model="config.csrf_allowed_origins" />
+      <input type="text" class="form-control" id="csrf_allowed_origins" v-model="config.csrf_allowed_origins" />
       <div class="form-text">{{ $t('config.csrf_allowed_origins_desc') }}</div>
     </div>
 
     <!-- External IP -->
     <div class="mb-3">
       <label for="external_ip" class="form-label">{{ $t('config.external_ip') }}</label>
-      <input type="text" class="form-control" id="external_ip" placeholder="123.456.789.12" v-model="config.external_ip" />
+      <input type="text" class="form-control" id="external_ip" placeholder="123.456.789.12"
+        v-model="config.external_ip" />
       <div class="form-text">{{ $t('config.external_ip_desc') }}</div>
     </div>
 
     <!-- LAN Encryption Mode -->
-    <div class="mb-3">
-      <label for="lan_encryption_mode" class="form-label">{{ $t('config.lan_encryption_mode') }}</label>
-      <select id="lan_encryption_mode" class="form-select" v-model="config.lan_encryption_mode">
-        <option value="0">{{ $t('_common.disabled_def') }}</option>
-        <option value="1">{{ $t('config.lan_encryption_mode_1') }}</option>
-        <option value="2">{{ $t('config.lan_encryption_mode_2') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.lan_encryption_mode_desc') }}</div>
-    </div>
+    <Select id="lan_encryption_mode" v-model="config.lan_encryption_mode" :label="$t('config.lan_encryption_mode')"
+      :desc="$t('config.lan_encryption_mode_desc')" :options="LAN_ENCRYPTION_MODE_OPTIONS" />
 
     <!-- WAN Encryption Mode -->
-    <div class="mb-3">
-      <label for="wan_encryption_mode" class="form-label">{{ $t('config.wan_encryption_mode') }}</label>
-      <select id="wan_encryption_mode" class="form-select" v-model="config.wan_encryption_mode">
-        <option value="0">{{ $t('_common.disabled') }}</option>
-        <option value="1">{{ $t('config.wan_encryption_mode_1') }}</option>
-        <option value="2">{{ $t('config.wan_encryption_mode_2') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.wan_encryption_mode_desc') }}</div>
-    </div>
+    <Select id="wan_encryption_mode" v-model="config.wan_encryption_mode" :label="$t('config.wan_encryption_mode')"
+      :desc="$t('config.wan_encryption_mode_desc')" :options="WAN_ENCRYPTION_MODE_OPTIONS" />
 
     <!-- Ping Timeout -->
     <div class="mb-3">
@@ -176,13 +191,10 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
     <!-- Packet Size Limit -->
     <div class="mb-3">
       <label for="packetsize" class="form-label">{{ $t('config.packetsize') }}</label>
-      <input type="number" min="0" max="65535" class="form-control" id="packetsize" placeholder="0" v-model="config.packetsize" />
+      <input type="number" min="0" max="65535" class="form-control" id="packetsize" placeholder="0"
+        v-model="config.packetsize" />
       <div class="form-text">{{ $t('config.packetsize_desc') }}</div>
     </div>
 
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
index ef81f36586e..47cb2c1d7e7 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
@@ -18,7 +18,7 @@ const config = ref(props.config)
            :placeholder="$tp('config.adapter_name_placeholder', '/dev/dri/renderD128')"
            v-model="config.adapter_name" />
     <div class="form-text">
-      <PlatformLayout :platform="platform">
+      <PlatformLayout>
         <template #windows>
           {{ $t('config.adapter_name_desc_windows') }}<br>
           <pre>tools\dxgi-info.exe</pre>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
index b186d3f05af..623f66bb41a 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
@@ -49,7 +49,7 @@ function addRemappingEntry() {
 </script>
 
 <template>
-  <PlatformLayout :platform="platform">
+  <PlatformLayout>
     <template #windows>
       <div class="mb-3 accordion">
         <div class="accordion-item">
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
index d49fb384431..e5fdd0fd39a 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
@@ -25,7 +25,7 @@ const outputNamePlaceholder = _outputNamePlaceholder;  // NOSONAR(javascript:S14
            v-model="config.output_name"/>
     <div class="form-text">
       {{ $tp('config.output_name_desc') }}<br>
-      <PlatformLayout :platform="platform">
+      <PlatformLayout>
         <template #windows>
           <pre style="white-space: pre-line;">
             <b>&nbsp;&nbsp;{</b>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
index 4a68233ce12..e57c5fa1e00 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
@@ -1,67 +1,95 @@
 <script setup>
-import { ref } from 'vue'
 import Checkbox from "@/components/Checkbox.vue";
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config',
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const USAGE_OPTIONS = [
+  { value: 'transcoding', label: t('config.amd_usage_transcoding') },
+  { value: 'webcam', label: t('config.amd_usage_webcam') },
+  { value: 'lowlatency_high_quality', label: t('config.amd_usage_lowlatency_high_quality') },
+  { value: 'lowlatency', label: t('config.amd_usage_lowlatency') },
+  { value: 'ultralowlatency', label: t('config.amd_usage_ultralowlatency') },
+]
+
+const RC_OPTIONS = [
+  { value: 'cbr', label: t('config.amd_rc_cbr') },
+  { value: 'cqp', label: t('config.amd_rc_cqp') },
+  { value: 'vbr_latency', label: t('config.amd_rc_vbr_latency') },
+  { value: 'vbr_peak', label: t('config.amd_rc_vbr_peak') },
+]
+
+const QUALITY_OPTIONS = [
+  { value: 'speed', label: t('config.amd_quality_speed') },
+  { value: 'balanced', label: t('config.amd_quality_balanced') },
+  { value: 'quality', label: t('config.amd_quality_quality') },
+]
+
+const CODER_OPTIONS = [
+  { value: 'auto', label: t('config.ffmpeg_auto') },
+  { value: 'cabac', label: t('config.coder_cabac') },
+  { value: 'cavlc', label: t('config.coder_cavlc') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "amd_usage": "ultralowlatency",
+  "amd_rc": "vbr_latency",
+  "amd_enforce_hrd": "disabled",
+  "amd_max_au_size": "",
+  "amd_quality": "balanced",
+  "amd_preanalysis": "disabled",
+  "amd_vbaq": "enabled",
+  "amd_coder": "auto",
+}
 </script>
 
 <template>
   <div id="amd-amf-encoder" class="config-page">
     <!-- AMF Usage -->
-    <div class="mb-3">
-      <label for="amd_usage" class="form-label">{{ $t('config.amd_usage') }}</label>
-      <select id="amd_usage" class="form-select" v-model="config.amd_usage">
-        <option value="transcoding">{{ $t('config.amd_usage_transcoding') }}</option>
-        <option value="webcam">{{ $t('config.amd_usage_webcam') }}</option>
-        <option value="lowlatency_high_quality">{{ $t('config.amd_usage_lowlatency_high_quality') }}</option>
-        <option value="lowlatency">{{ $t('config.amd_usage_lowlatency') }}</option>
-        <option value="ultralowlatency">{{ $t('config.amd_usage_ultralowlatency') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.amd_usage_desc') }}</div>
-    </div>
+    <Select id="amd_usage" v-model="config.amd_usage" :label="$t('config.amd_usage')"
+      :desc="$t('config.amd_usage_desc')" :options="USAGE_OPTIONS" />
 
     <!-- AMD Rate Control group options -->
     <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">
+            data-bs-target="#panelsStayOpen-collapseOne">
             {{ $t('config.amd_rc_group') }}
           </button>
         </h2>
         <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
+          aria-labelledby="panelsStayOpen-headingOne">
           <div class="accordion-body">
             <!-- AMF Rate Control -->
-            <div class="mb-3">
-              <label for="amd_rc" class="form-label">{{ $t('config.amd_rc') }}</label>
-              <select id="amd_rc" class="form-select" v-model="config.amd_rc">
-                <option value="cbr">{{ $t('config.amd_rc_cbr') }}</option>
-                <option value="cqp">{{ $t('config.amd_rc_cqp') }}</option>
-                <option value="vbr_latency">{{ $t('config.amd_rc_vbr_latency') }}</option>
-                <option value="vbr_peak">{{ $t('config.amd_rc_vbr_peak') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_rc_desc') }}</div>
-            </div>
+            <Select id="amd_rc" v-model="config.amd_rc" :label="$t('config.amd_rc')" :desc="$t('config.amd_rc_desc')"
+              :options="RC_OPTIONS" />
 
             <!-- AMF HRD Enforcement -->
-            <Checkbox class="mb-3"
-                      id="amd_enforce_hrd"
-                      locale-prefix="config"
-                      v-model="config.amd_enforce_hrd"
-                      default="false"
-            ></Checkbox>
+            <Checkbox class="mb-3" id="amd_enforce_hrd" locale-prefix="config" v-model="config.amd_enforce_hrd"
+              default="false"></Checkbox>
 
             <!-- AMF Max AU Size -->
             <div class="mb-3">
               <label for="amd_max_au_size" class="form-label">{{ $t('config.amd_max_au_size') }}</label>
-              <input type="number" class="form-control" id="amd_max_au_size"
-                     placeholder="-1" min="-1" max="2147483647" v-model="config.amd_max_au_size" />
+              <input type="number" class="form-control" id="amd_max_au_size" placeholder="-1" min="-1" max="2147483647"
+                v-model="config.amd_max_au_size" />
               <div class="form-text">{{ $t('config.amd_max_au_size_desc') }}</div>
             </div>
           </div>
@@ -74,57 +102,31 @@ const config = ref(props.config)
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#panelsStayOpen-collapseTwo">
+            data-bs-target="#panelsStayOpen-collapseTwo">
             {{ $t('config.amd_quality_group') }}
           </button>
         </h2>
         <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingTwo">
+          aria-labelledby="panelsStayOpen-headingTwo">
           <div class="accordion-body">
             <!-- AMF Quality -->
-            <div class="mb-3">
-              <label for="amd_quality" class="form-label">{{ $t('config.amd_quality') }}</label>
-              <select id="amd_quality" class="form-select" v-model="config.amd_quality">
-                <option value="speed">{{ $t('config.amd_quality_speed') }}</option>
-                <option value="balanced">{{ $t('config.amd_quality_balanced') }}</option>
-                <option value="quality">{{ $t('config.amd_quality_quality') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_quality_desc') }}</div>
-            </div>
+            <Select id="amd_quality" v-model="config.amd_quality" :label="$t('config.amd_quality')"
+              :desc="$t('config.amd_quality_desc')" :options="QUALITY_OPTIONS" />
 
             <!-- AMD Preanalysis -->
-            <Checkbox class="mb-3"
-                      id="amd_preanalysis"
-                      locale-prefix="config"
-                      v-model="config.amd_preanalysis"
-                      default="false"
-            ></Checkbox>
+            <Checkbox class="mb-3" id="amd_preanalysis" locale-prefix="config" v-model="config.amd_preanalysis"
+              default="false"></Checkbox>
 
             <!-- AMD VBAQ -->
-            <Checkbox class="mb-3"
-                      id="amd_vbaq"
-                      locale-prefix="config"
-                      v-model="config.amd_vbaq"
-                      default="true"
-            ></Checkbox>
+            <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">
-              <label for="amd_coder" class="form-label">{{ $t('config.amd_coder') }}</label>
-              <select id="amd_coder" class="form-select" v-model="config.amd_coder">
-                <option value="auto">{{ $t('config.ffmpeg_auto') }}</option>
-                <option value="cabac">{{ $t('config.coder_cabac') }}</option>
-                <option value="cavlc">{{ $t('config.coder_cavlc') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_coder_desc') }}</div>
-            </div>
+            <Select id="amd_coder" v-model="config.amd_coder" :label="$t('config.amd_coder')"
+              :desc="$t('config.amd_coder_desc')" :options="CODER_OPTIONS" />
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
index 474ad92a344..29bd0201937 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
@@ -1,51 +1,58 @@
 <script setup>
-import { ref } from 'vue'
 import Checkbox from "@/components/Checkbox.vue";
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config',
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const PRESET_OPTIONS = [
+  { value: 'veryfast', label: t('config.qsv_preset_veryfast') },
+  { value: 'faster', label: t('config.qsv_preset_faster') },
+  { value: 'fast', label: t('config.qsv_preset_fast') },
+  { value: 'medium', label: t('config.qsv_preset_medium') },
+  { value: 'slow', label: t('config.qsv_preset_slow') },
+  { value: 'slower', label: t('config.qsv_preset_slower') },
+  { value: 'slowest', label: t('config.qsv_preset_slowest') },
+]
+
+const CODER_OPTIONS = [
+  { value: 'auto', label: t('config.ffmpeg_auto') },
+  { value: 'cabac', label: t('config.coder_cabac') },
+  { value: 'cavlc', label: t('config.coder_cavlc') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "qsv_preset": "medium",
+  "qsv_coder": "auto",
+  "qsv_slow_hevc": "disabled",
+}
 </script>
 
 <template>
   <div id="intel-quicksync-encoder" class="config-page">
     <!-- QuickSync Preset -->
-    <div class="mb-3">
-      <label for="qsv_preset" class="form-label">{{ $t('config.qsv_preset') }}</label>
-      <select id="qsv_preset" class="form-select" v-model="config.qsv_preset">
-        <option value="veryfast">{{ $t('config.qsv_preset_veryfast') }}</option>
-        <option value="faster">{{ $t('config.qsv_preset_faster') }}</option>
-        <option value="fast">{{ $t('config.qsv_preset_fast') }}</option>
-        <option value="medium">{{ $t('config.qsv_preset_medium') }}</option>
-        <option value="slow">{{ $t('config.qsv_preset_slow') }}</option>
-        <option value="slower">{{ $t('config.qsv_preset_slower') }}</option>
-        <option value="slowest">{{ $t('config.qsv_preset_slowest') }}</option>
-      </select>
-    </div>
+    <Select id="qsv_preset" v-model="config.qsv_preset" :label="$t('config.qsv_preset')" :options="PRESET_OPTIONS" />
 
     <!-- QuickSync Coder (H264) -->
-    <div class="mb-3">
-      <label for="qsv_coder" class="form-label">{{ $t('config.qsv_coder') }}</label>
-      <select id="qsv_coder" class="form-select" v-model="config.qsv_coder">
-        <option value="auto">{{ $t('config.ffmpeg_auto') }}</option>
-        <option value="cabac">{{ $t('config.coder_cabac') }}</option>
-        <option value="cavlc">{{ $t('config.coder_cavlc') }}</option>
-      </select>
-    </div>
+    <Select id="qsv_coder" v-model="config.qsv_coder" :label="$t('config.qsv_coder')" :options="CODER_OPTIONS" />
 
     <!-- Allow Slow HEVC Encoding -->
-    <Checkbox class="mb-3"
-              id="qsv_slow_hevc"
-              locale-prefix="config"
-              v-model="config.qsv_slow_hevc"
-              default="false"
-    ></Checkbox>
+    <Checkbox class="mb-3" id="qsv_slow_hevc" locale-prefix="config" v-model="config.qsv_slow_hevc" default="false">
+    </Checkbox>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
index 94ab2d8a315..7a27107a4dd 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
@@ -1,71 +1,87 @@
 <script setup>
-import { ref } from 'vue'
 import Checkbox from "@/components/Checkbox.vue";
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config',
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const PRESET_OPTIONS = [
+  { value: '1', label: `P1 ${t('config.nvenc_preset_1')}` },
+  { value: '2', label: 'P2' },
+  { value: '3', label: 'P3' },
+  { value: '4', label: 'P4' },
+  { value: '5', label: 'P5' },
+  { value: '6', label: 'P6' },
+  { value: '7', label: `P7 ${t('config.nvenc_preset_7')}` },
+]
+
+const SPLIT_ENCODE_OPTIONS = [
+  { value: 'disabled', label: t('_common.disabled') },
+  { value: 'driver_decides', label: t('config.nvenc_split_encode_driver_decides_def') },
+  { value: 'enabled', label: t('_common.enabled') },
+]
+
+const TWOPASS_OPTIONS = [
+  { value: 'disabled', label: t('config.nvenc_twopass_disabled') },
+  { value: 'quarter_res', label: t('config.nvenc_twopass_quarter_res') },
+  { value: 'full_res', label: t('config.nvenc_twopass_full_res') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "nvenc_preset": 1,
+  "nvenc_twopass": "quarter_res",
+  "nvenc_spatial_aq": "disabled",
+  "nvenc_vbv_increase": 0,
+  "nvenc_realtime_hags": "enabled",
+  "nvenc_split_encode": "driver_decides",
+  "nvenc_latency_over_power": "enabled",
+  "nvenc_opengl_vulkan_on_dxgi": "enabled",
+  "nvenc_h264_cavlc": "disabled",
+}
 </script>
 
 <template>
   <div id="nvidia-nvenc-encoder" class="config-page">
     <!-- Performance preset -->
-    <div class="mb-3">
-      <label for="nvenc_preset" class="form-label">{{ $t('config.nvenc_preset') }}</label>
-      <select id="nvenc_preset" class="form-select" v-model="config.nvenc_preset">
-        <option value="1">P1 {{ $t('config.nvenc_preset_1') }}</option>
-        <option value="2">P2</option>
-        <option value="3">P3</option>
-        <option value="4">P4</option>
-        <option value="5">P5</option>
-        <option value="6">P6</option>
-        <option value="7">P7 {{ $t('config.nvenc_preset_7') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.nvenc_preset_desc') }}</div>
-    </div>
+    <Select id="nvenc_preset" v-model="config.nvenc_preset" :label="$t('config.nvenc_preset')"
+      :desc="$t('config.nvenc_preset_desc')" :options="PRESET_OPTIONS" />
 
     <!-- Split frame encoding -->
-    <div class="mb-3" v-if="platform === 'windows'">
-      <label for="nvenc_split_encode" class="form-label">{{ $t('config.nvenc_split_encode') }}</label>
-      <select id="nvenc_split_encode" class="form-select" v-model="config.nvenc_split_encode">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="driver_decides">{{ $t('config.nvenc_split_encode_driver_decides_def') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.nvenc_split_encode_desc') }}</div>
-    </div>
+    <Select v-if="platform === 'windows'" id="nvenc_split_encode" v-model="config.nvenc_split_encode"
+      :label="$t('config.nvenc_split_encode')" :desc="$t('config.nvenc_split_encode_desc')"
+      :options="SPLIT_ENCODE_OPTIONS" />
 
     <!-- Two-pass mode -->
-    <div class="mb-3">
-      <label for="nvenc_twopass" class="form-label">{{ $t('config.nvenc_twopass') }}</label>
-      <select id="nvenc_twopass" class="form-select" v-model="config.nvenc_twopass">
-        <option value="disabled">{{ $t('config.nvenc_twopass_disabled') }}</option>
-        <option value="quarter_res">{{ $t('config.nvenc_twopass_quarter_res') }}</option>
-        <option value="full_res">{{ $t('config.nvenc_twopass_full_res') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.nvenc_twopass_desc') }}</div>
-    </div>
+    <Select id="nvenc_twopass" v-model="config.nvenc_twopass" :label="$t('config.nvenc_twopass')"
+      :desc="$t('config.nvenc_twopass_desc')" :options="TWOPASS_OPTIONS" />
 
     <!-- Spatial AQ -->
-    <Checkbox class="mb-3"
-              id="nvenc_spatial_aq"
-              locale-prefix="config"
-              v-model="config.nvenc_spatial_aq"
-              default="false"
-    ></Checkbox>
+    <Checkbox class="mb-3" id="nvenc_spatial_aq" locale-prefix="config" v-model="config.nvenc_spatial_aq"
+      default="false"></Checkbox>
 
     <!-- Single-frame VBV/HRD percentage increase -->
     <div class="mb-3">
       <label for="nvenc_vbv_increase" class="form-label">{{ $t('config.nvenc_vbv_increase') }}</label>
       <input type="number" min="0" max="400" class="form-control" id="nvenc_vbv_increase" placeholder="0"
-             v-model="config.nvenc_vbv_increase" />
+        v-model="config.nvenc_vbv_increase" />
       <div class="form-text">
-        {{ $t('config.nvenc_vbv_increase_desc') }}<br>
-        <br>
-        <a href="https://en.wikipedia.org/wiki/Video_buffering_verifier">VBV/HRD</a>
+        <div>{{ $t('config.nvenc_vbv_increase_desc') }}</div>
+        <div class="mt-1"><a href="https://en.wikipedia.org/wiki/Video_buffering_verifier">VBV/HRD</a></div>
       </div>
     </div>
 
@@ -74,58 +90,35 @@ const config = ref(props.config)
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#panelsStayOpen-collapseOne">
+            data-bs-target="#panelsStayOpen-collapseOne">
             {{ $t('config.misc') }}
           </button>
         </h2>
         <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
+          aria-labelledby="panelsStayOpen-headingOne">
           <div class="accordion-body">
             <!-- NVENC Realtime HAGS priority -->
-            <Checkbox v-if="platform === 'windows'"
-                      class="mb-3"
-                      id="nvenc_realtime_hags"
-                      locale-prefix="config"
-                      v-model="config.nvenc_realtime_hags"
-                      default="true"
-            >
+            <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 -->
-            <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>
+            <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 -->
-            <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>
+            <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 -->
-            <Checkbox class="mb-3"
-                      id="nvenc_h264_cavlc"
-                      locale-prefix="config"
-                      v-model="config.nvenc_h264_cavlc"
-                      default="false"
-            ></Checkbox>
+            <Checkbox class="mb-3" id="nvenc_h264_cavlc" locale-prefix="config" v-model="config.nvenc_h264_cavlc"
+              default="false"></Checkbox>
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue
index d9e7c5dba54..0af476e5115 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue
@@ -1,44 +1,58 @@
 <script setup>
-import { ref } from 'vue'
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config'
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const PRESET_OPTIONS = [
+  { value: 'ultrafast', label: t('config.sw_preset_ultrafast') },
+  { value: 'superfast', label: t('config.sw_preset_superfast') },
+  { value: 'veryfast', label: t('config.sw_preset_veryfast') },
+  { value: 'faster', label: t('config.sw_preset_faster') },
+  { value: 'fast', label: t('config.sw_preset_fast') },
+  { value: 'medium', label: t('config.sw_preset_medium') },
+  { value: 'slow', label: t('config.sw_preset_slow') },
+  { value: 'slower', label: t('config.sw_preset_slower') },
+  { value: 'veryslow', label: t('config.sw_preset_veryslow') },
+]
+
+const TUNE_OPTIONS = [
+  { value: 'film', label: t('config.sw_tune_film') },
+  { value: 'animation', label: t('config.sw_tune_animation') },
+  { value: 'grain', label: t('config.sw_tune_grain') },
+  { value: 'stillimage', label: t('config.sw_tune_stillimage') },
+  { value: 'fastdecode', label: t('config.sw_tune_fastdecode') },
+  { value: 'zerolatency', label: t('config.sw_tune_zerolatency') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "sw_preset": "superfast",
+  "sw_tune": "zerolatency",
+}
 </script>
 
 <template>
   <div id="software-encoder" class="config-page">
-    <div class="mb-3">
-      <label for="sw_preset" class="form-label">{{ $t('config.sw_preset') }}</label>
-      <select id="sw_preset" class="form-select" v-model="config.sw_preset">
-        <option value="ultrafast">{{ $t('config.sw_preset_ultrafast') }}</option>
-        <option value="superfast">{{ $t('config.sw_preset_superfast') }}</option>
-        <option value="veryfast">{{ $t('config.sw_preset_veryfast') }}</option>
-        <option value="faster">{{ $t('config.sw_preset_faster') }}</option>
-        <option value="fast">{{ $t('config.sw_preset_fast') }}</option>
-        <option value="medium">{{ $t('config.sw_preset_medium') }}</option>
-        <option value="slow">{{ $t('config.sw_preset_slow') }}</option>
-        <option value="slower">{{ $t('config.sw_preset_slower') }}</option>
-        <option value="veryslow">{{ $t('config.sw_preset_veryslow') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.sw_preset_desc') }}</div>
-    </div>
-
-    <div class="mb-3">
-      <label for="sw_tune" class="form-label">{{ $t('config.sw_tune') }}</label>
-      <select id="sw_tune" class="form-select" v-model="config.sw_tune">
-        <option value="film">{{ $t('config.sw_tune_film') }}</option>
-        <option value="animation">{{ $t('config.sw_tune_animation') }}</option>
-        <option value="grain">{{ $t('config.sw_tune_grain') }}</option>
-        <option value="stillimage">{{ $t('config.sw_tune_stillimage') }}</option>
-        <option value="fastdecode">{{ $t('config.sw_tune_fastdecode') }}</option>
-        <option value="zerolatency">{{ $t('config.sw_tune_zerolatency') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.sw_tune_desc') }}</div>
-    </div>
+    <Select id="sw_preset" v-model="config.sw_preset" :label="$t('config.sw_preset')"
+      :desc="$t('config.sw_preset_desc')" :options="PRESET_OPTIONS" />
+
+    <Select id="sw_tune" v-model="config.sw_tune" :label="$t('config.sw_tune')" :desc="$t('config.sw_tune_desc')"
+      :options="TUNE_OPTIONS" />
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
index 9b5c23470dd..cb96434245d 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
@@ -1,13 +1,48 @@
 <script setup>
-import { ref } from 'vue'
 import Checkbox from "@/components/Checkbox.vue";
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config',
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const RC_OPTIONS = [
+  { value: 'auto', label: t('_common.auto') },
+  { value: 'avbr', label: t('config.vaapi_rc_avbr') },
+  { value: 'vbr', label: t('config.vaapi_rc_vbr') },
+  { value: 'cbr', label: t('config.vaapi_rc_cbr') },
+  { value: 'cqp', label: t('config.vaapi_rc_cqp') },
+  { value: 'icq', label: t('config.vaapi_rc_icq') },
+  { value: 'qvbr', label: t('config.vaapi_rc_qvbr') },
+]
+
+const QUALITY_OPTIONS = [
+  { value: 'auto', label: t('_common.auto') },
+  { value: 'speed', label: t('config.vaapi_quality_speed') },
+  { value: 'balanced', label: t('config.vaapi_quality_balanced') },
+  { value: 'quality', label: t('config.vaapi_quality_quality') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "vaapi_blbrc": "disabled",
+  "vaapi_quality": "auto",
+  "vaapi_rc": "auto",
+  "vaapi_strict_rc_buffer": "disabled",
+}
 </script>
 
 <template>
@@ -25,19 +60,8 @@ const config = ref(props.config)
              aria-labelledby="panelsStayOpen-headingOne">
           <div class="accordion-body">
             <!-- VAAPI Rate Control -->
-            <div class="mb-3">
-              <label for="vaapi_rc" class="form-label">{{ $t('config.vaapi_rc') }}</label>
-              <select id="vaapi_rc" class="form-select" v-model="config.vaapi_rc">
-                <option value="auto">{{ $t('_common.auto') }}</option>
-                <option value="avbr">{{ $t('config.vaapi_rc_avbr') }}</option>
-                <option value="vbr">{{ $t('config.vaapi_rc_vbr') }}</option>
-                <option value="cbr">{{ $t('config.vaapi_rc_cbr') }}</option>
-                <option value="cqp">{{ $t('config.vaapi_rc_cqp') }}</option>
-                <option value="icq">{{ $t('config.vaapi_rc_icq') }}</option>
-                <option value="qvbr">{{ $t('config.vaapi_rc_qvbr') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.vaapi_rc_desc') }}</div>
-            </div>
+            <Select id="vaapi_rc" v-model="config.vaapi_rc" :label="$t('config.vaapi_rc')"
+              :desc="$t('config.vaapi_rc_desc')" :options="RC_OPTIONS" />
 
             <!-- BLBRC -->
             <Checkbox class="mb-3"
@@ -72,16 +96,8 @@ const config = ref(props.config)
              aria-labelledby="panelsStayOpen-headingTwo">
           <div class="accordion-body">
             <!-- VAAPI Quality -->
-            <div class="mb-3">
-              <label for="vaapi_quality" class="form-label">{{ $t('config.vaapi_quality') }}</label>
-              <select id="vaapi_quality" class="form-select" v-model="config.vaapi_quality">
-                <option value="auto">{{ $t('_common.auto') }}</option>
-                <option value="speed">{{ $t('config.vaapi_quality_speed') }}</option>
-                <option value="balanced">{{ $t('config.vaapi_quality_balanced') }}</option>
-                <option value="quality">{{ $t('config.vaapi_quality_quality') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.vaapi_quality_desc') }}</div>
-            </div>
+            <Select id="vaapi_quality" v-model="config.vaapi_quality" :label="$t('config.vaapi_quality')"
+              :desc="$t('config.vaapi_quality_desc')" :options="QUALITY_OPTIONS" />
           </div>
         </div>
       </div>
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
index fb37b2bd3d1..d710b65cf4b 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
@@ -1,35 +1,51 @@
 <script setup>
-import { ref } from 'vue'
 import Checkbox from "@/components/Checkbox.vue";
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config',
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const CODER_OPTIONS = [
+  { value: 'auto', label: t('config.ffmpeg_auto') },
+  { value: 'cabac', label: t('config.coder_cabac') },
+  { value: 'cavlc', label: t('config.coder_cavlc') },
+]
+
+const SOFTWARE_OPTIONS = [
+  { value: 'auto', label: t('_common.auto') },
+  { value: 'disabled', label: t('_common.disabled') },
+  { value: 'allowed', label: t('config.vt_software_allowed') },
+  { value: 'forced', label: t('config.vt_software_forced') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "vt_coder": "auto",
+  "vt_software": "auto",
+  "vt_realtime": "enabled",
+}
 </script>
 
 <template>
   <div id="videotoolbox-encoder" class="config-page">
     <!-- Presets -->
-    <div class="mb-3">
-      <label for="vt_coder" class="form-label">{{ $t('config.vt_coder') }}</label>
-      <select id="vt_coder" class="form-select" v-model="config.vt_coder">
-        <option value="auto">{{ $t('config.ffmpeg_auto') }}</option>
-        <option value="cabac">{{ $t('config.coder_cabac') }}</option>
-        <option value="cavlc">{{ $t('config.coder_cavlc') }}</option>
-      </select>
-    </div>
-    <div class="mb-3">
-      <label for="vt_software" class="form-label">{{ $t('config.vt_software') }}</label>
-      <select id="vt_software" class="form-select" v-model="config.vt_software">
-        <option value="auto">{{ $t('_common.auto') }}</option>
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="allowed">{{ $t('config.vt_software_allowed') }}</option>
-        <option value="forced">{{ $t('config.vt_software_forced') }}</option>
-      </select>
-    </div>
+    <Select id="vt_coder" v-model="config.vt_coder" :label="$t('config.vt_coder')" :options="CODER_OPTIONS" />
+    <Select id="vt_software" v-model="config.vt_software" :label="$t('config.vt_software')"
+      :options="SOFTWARE_OPTIONS" />
     <Checkbox class="mb-3"
               id="vt_realtime"
               desc=""
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue
index 377f7532bcb..cf020ab0a78 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue
@@ -1,38 +1,52 @@
 <script setup>
-import { ref } from 'vue'
+import Select from '@/components/Select.vue'
+import { useConfigTab } from '@/composables/useConfigTab'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps([
-  'platform',
-  'config',
-])
+const { t } = useI18n()
 
-const config = ref(props.config)
+const props = defineProps({
+  platform: String,
+  config: {
+    type: Object,
+    default: () => structuredClone(OPTIONS)
+  }
+})
+
+const { config, getOwnConfigOptions } = useConfigTab(props.config, OPTIONS)
+
+defineExpose({ getOwnConfigOptions })
+
+const TUNE_OPTIONS = [
+  { value: '0', label: t('_common.auto') },
+  { value: '1', label: t('config.vk_tune_hq') },
+  { value: '2', label: t('config.vk_tune_ll') },
+  { value: '3', label: t('config.vk_tune_ull') },
+]
+
+const RC_MODE_OPTIONS = [
+  { value: '0', label: t('_common.auto') },
+  { value: '1', label: t('config.vk_rc_cqp') },
+  { value: '2', label: t('config.vk_rc_cbr') },
+  { value: '4', label: t('config.vk_rc_vbr') },
+]
+</script>
+
+<script>
+export const OPTIONS = {
+  "vk_tune": 2,
+  "vk_rc_mode": 2,
+}
 </script>
 
 <template>
   <div id="vulkan-encoder" class="config-page">
     <!-- Tuning -->
-    <div class="mb-3">
-      <label for="vk_tune" class="form-label">{{ $t('config.vk_tune') }}</label>
-      <select id="vk_tune" class="form-select" v-model="config.vk_tune">
-        <option value="0">{{ $t('_common.auto') }}</option>
-        <option value="1">{{ $t('config.vk_tune_hq') }}</option>
-        <option value="2">{{ $t('config.vk_tune_ll') }}</option>
-        <option value="3">{{ $t('config.vk_tune_ull') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.vk_tune_desc') }}</div>
-    </div>
+    <Select id="vk_tune" v-model="config.vk_tune" :label="$t('config.vk_tune')" :desc="$t('config.vk_tune_desc')"
+      :options="TUNE_OPTIONS" />
 
     <!-- Rate Control -->
-    <div class="mb-3">
-      <label for="vk_rc_mode" class="form-label">{{ $t('config.vk_rc_mode') }}</label>
-      <select id="vk_rc_mode" class="form-select" v-model="config.vk_rc_mode">
-        <option value="0">{{ $t('_common.auto') }}</option>
-        <option value="1">{{ $t('config.vk_rc_cqp') }}</option>
-        <option value="2">{{ $t('config.vk_rc_cbr') }}</option>
-        <option value="4">{{ $t('config.vk_rc_vbr') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.vk_rc_mode_desc') }}</div>
-    </div>
+    <Select id="vk_rc_mode" v-model="config.vk_rc_mode" :label="$t('config.vk_rc_mode')"
+      :desc="$t('config.vk_rc_mode_desc')" :options="RC_MODE_OPTIONS" />
   </div>
 </template>
diff --git a/src_assets/common/assets/web/src/composables/useConfigTab.js b/src_assets/common/assets/web/src/composables/useConfigTab.js
new file mode 100644
index 00000000000..77187ea09e7
--- /dev/null
+++ b/src_assets/common/assets/web/src/composables/useConfigTab.js
@@ -0,0 +1,22 @@
+import { ref, toRaw } from 'vue'
+
+export function useConfigTab(rawConfig, defaults = {}) {
+  const config = ref(rawConfig)
+
+  Object.keys(defaults).forEach(key => {
+    if (config.value[key] === undefined) {
+      config.value[key] = structuredClone(defaults[key]);
+    }
+  })
+
+  function getOwnConfigOptions() {
+    const raw = toRaw(config.value);
+    const result = {};
+    Object.keys(defaults).forEach(key => {
+      result[key] = raw[key];
+    });
+    return structuredClone(result);
+  }
+
+  return { config, getOwnConfigOptions }
+}
diff --git a/src_assets/common/assets/web/src/utils/locale.js b/src_assets/common/assets/web/src/utils/locale.js
index fc0aa21de54..a04652fbf2a 100644
--- a/src_assets/common/assets/web/src/utils/locale.js
+++ b/src_assets/common/assets/web/src/utils/locale.js
@@ -1,5 +1,30 @@
 import {createI18n} from "vue-i18n";
 
+export const SUPPORTED_LOCALES = [
+    {value: 'bg', label: 'Български (Bulgarian)'},
+    {value: 'cs', label: 'Čeština (Czech)'},
+    {value: 'de', label: 'Deutsch (German)'},
+    {value: 'en', label: 'English'},
+    {value: 'en_GB', label: 'English, United Kingdom'},
+    {value: 'en_US', label: 'English, United States'},
+    {value: 'es', label: 'Español (Spanish)'},
+    {value: 'fr', label: 'Français (French)'},
+    {value: 'hu', label: 'Magyar (Hungarian)'},
+    {value: 'it', label: 'Italiano (Italian)'},
+    {value: 'ja', label: '日本語 (Japanese)'},
+    {value: 'ko', label: '한국어 (Korean)'},
+    {value: 'pl', label: 'Polski (Polish)'},
+    {value: 'pt', label: 'Português (Portuguese)'},
+    {value: 'pt_BR', label: 'Português, Brasileiro (Portuguese, Brazilian)'},
+    {value: 'ru', label: 'Русский (Russian)'},
+    {value: 'sv', label: 'svenska (Swedish)'},
+    {value: 'tr', label: 'Türkçe (Turkish)'},
+    {value: 'uk', label: 'Українська (Ukranian)'},
+    {value: 'vi', label: 'Tiếng Việt (Vietnamese)'},
+    {value: 'zh', label: '简体中文 (Chinese Simplified)'},
+    {value: 'zh_TW', label: '繁體中文 (Chinese Traditional)'},
+]
+
 export default async function() {
     let r = await (await fetch("./api/configLocale")).json();
     let locale = r.locale ?? "en";
diff --git a/src_assets/common/assets/web/src/views/AppsView.vue b/src_assets/common/assets/web/src/views/AppsView.vue
index 53daff4c303..a1b32de6d33 100644
--- a/src_assets/common/assets/web/src/views/AppsView.vue
+++ b/src_assets/common/assets/web/src/views/AppsView.vue
@@ -115,7 +115,7 @@
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appOutput" v-model="editForm.output" />
           <button class="btn btn-secondary" type="button"
-            @click="browseFor('any', 'file_browser.select_file', editForm.output, v => editForm.output = v)">
+            @click="openFileBrowser('any', 'file_browser.select_file', editForm.output, { field: 'output' })">
             <folder-open :size="18" class="icon"></folder-open>
           </button>
         </div>
@@ -123,68 +123,8 @@
       <!-- prep-cmd -->
       <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" inverse-values></Checkbox>
-      <div class="mb-3">
-        <div class="form-label">{{ $t('apps.cmd_prep_name') }}</div>
-        <div class="form-text">{{ $t('apps.cmd_prep_desc') }}</div>
-        <div class="row g-2 align-items-center mx-0 my-2" v-if="editForm['prep-cmd'].length > 0">
-          <div class="col-12 col-md text-muted small text-uppercase fw-semibold ps-3 d-flex align-items-center">
-            <play :size="14" class="icon me-1"></play>{{ $t('_common.do_cmd') }}
-          </div>
-          <div class="col-12 col-md text-muted small text-uppercase fw-semibold ps-3 d-flex align-items-center">
-            <rotate-ccw :size="14" class="icon me-1"></rotate-ccw>{{ $t('_common.undo_cmd') }}
-          </div>
-          <div class="col-auto text-muted small text-uppercase fw-semibold d-flex align-items-center"
-            v-if="platform === 'windows'">
-            <shield :size="14" class="icon me-1"></shield>{{ $t('_common.run_as') }}
-          </div>
-          <div class="col-auto" style="height: 0;">
-            <div class="invisible">
-              <button type="button" class="btn btn-danger btn-sm" tabindex="-1" aria-hidden="true">
-                <trash-2 :size="16" class="icon"></trash-2>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div v-for="(cmd, index) in editForm['prep-cmd']" :key="index" class="row g-2 align-items-center mx-0 my-2">
-          <div class="col-12 col-md">
-            <div class="input-group">
-              <span class="input-group-text">
-                <play :size="14" class="icon"></play>
-              </span>
-              <input type="text" class="form-control monospace" v-model="cmd.do" :placeholder="$t('_common.do_cmd')"
-                :aria-label="$t('_common.do_cmd')" />
-              <button class="btn btn-secondary" type="button" @click="browsePrep(index, 'do')">
-                <folder-open :size="14" class="icon"></folder-open>
-              </button>
-            </div>
-          </div>
-          <div class="col-12 col-md">
-            <div class="input-group">
-              <span class="input-group-text"><rotate-ccw :size="14" class="icon"></rotate-ccw></span>
-              <input type="text" class="form-control monospace" v-model="cmd.undo"
-                :placeholder="$t('_common.undo_cmd')" :aria-label="$t('_common.undo_cmd')" />
-              <button class="btn btn-secondary" type="button" @click="browsePrep(index, 'undo')">
-                <folder-open :size="14" class="icon"></folder-open>
-              </button>
-            </div>
-          </div>
-          <div class="col-auto" v-if="platform === 'windows'">
-            <Checkbox :id="'prep-cmd-admin-' + index" label="_common.elevated" desc="" v-model="cmd.elevated">
-            </Checkbox>
-          </div>
-          <div class="col-auto">
-            <button type="button" class="btn btn-danger btn-sm" @click="deletePrepCmd(index)">
-              <trash-2 :size="16" class="icon"></trash-2>
-            </button>
-          </div>
-        </div>
-        <div class="d-flex justify-content-start my-3">
-          <button type="button" class="btn btn-success" @click="addPrepCmd">
-            <plus :size="18" class="icon"></plus>
-            {{ $t('apps.add_cmds') }}
-          </button>
-        </div>
-      </div>
+      <PrepCommandList v-model="editForm['prep-cmd']" :platform="platform" :label="$t('apps.cmd_prep_name')"
+        :description="$t('apps.cmd_prep_desc')" :add-label="$t('apps.add_cmds')" />
       <!-- detached -->
       <div class="mb-3">
         <div class="form-label">{{ $t('apps.detached_cmds') }}</div>
@@ -214,7 +154,7 @@
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appCmd" v-model="editForm.cmd" />
           <button class="btn btn-secondary" type="button"
-            @click="browseFor('executable', 'file_browser.select_executable', editForm.cmd, v => editForm.cmd = v)">
+            @click="openFileBrowser('executable', 'file_browser.select_executable', editForm.cmd, { field: 'cmd' })">
             <folder-open :size="18" class="icon"></folder-open>
           </button>
         </div>
@@ -228,7 +168,7 @@
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appWorkingDir" v-model="editForm['working-dir']" />
           <button class="btn btn-secondary" type="button"
-            @click="browseFor('directory', 'file_browser.select_directory', editForm['working-dir'], v => editForm['working-dir'] = v)">
+            @click="openFileBrowser('directory', 'file_browser.select_directory', editForm['working-dir'], { field: 'working-dir' })">
             <folder-open :size="18" class="icon"></folder-open>
           </button>
         </div>
@@ -251,7 +191,7 @@
         <div class="input-group">
           <input type="text" class="form-control monospace" id="appImagePath" v-model="editForm['image-path']" />
           <button class="btn btn-secondary" type="button"
-            @click="browseFor('file', 'file_browser.select_file', editForm['image-path'], v => editForm['image-path'] = v)">
+            @click="openFileBrowser('file', 'file_browser.select_file', editForm['image-path'], { field: 'image-path' })">
             <folder-open :size="18" class="icon"></folder-open>
           </button>
           <button class="btn btn-secondary" type="button" @click="showCoverFinder">
@@ -408,91 +348,31 @@
   </Modal>
 
   <!-- Shared file browser modal -->
-  <Modal v-model="fileBrowserModalOpen" dialog-class="modal-lg modal-dialog-scrollable modal-fullscreen-md-down"
-    stacked>
-    <template #title>{{ fileBrowserTitle || $t('file_browser.title') }}</template>
-    <!-- Path input -->
-    <div class="input-group mb-2">
-      <input type="text" class="form-control monospace" v-model="fileBrowserTypedPath" @input="fileBrowserOnTypedInput"
-        :aria-label="$t('file_browser.path')" @keyup.enter="fileBrowserNavigate(fileBrowserTypedPath)" />
-      <button class="btn btn-secondary" type="button" @click="fileBrowserNavigate(fileBrowserTypedPath)">
-        <arrow-right :size="16" class="icon"></arrow-right>
-      </button>
-    </div>
-    <!-- Up button -->
-    <div class="mb-2">
-      <button class="btn btn-sm btn-outline-secondary" type="button"
-        :disabled="fileBrowserLoading || fileBrowserParentPath === fileBrowserCurrentPath"
-        @click="fileBrowserNavigateUp">
-        <folder-up :size="16" class="icon me-1"></folder-up>
-        {{ $t('file_browser.up') }}
-      </button>
-    </div>
-    <!-- Error -->
-    <div v-if="fileBrowserError" class="alert alert-danger py-2 small">{{ fileBrowserError }}</div>
-    <!-- Loading -->
-    <div v-if="fileBrowserLoading" class="text-center py-3">
-      <LoadingSpinner :label="$t('_common.loading')" small />
-    </div>
-    <!-- Entries -->
-    <div v-else class="list-group" style="max-height: 400px; overflow-y: auto;">
-      <div v-if="fileBrowserEntries.length === 0" class="list-group-item text-muted text-center">
-        {{ $t('file_browser.empty') }}
-      </div>
-      <button v-for="entry in fileBrowserEntries" :key="entry.path" type="button"
-        class="list-group-item list-group-item-action d-flex align-items-center py-1"
-        :class="{ active: fileBrowserSelectedPath === entry.path }" @click="fileBrowserSelectEntry(entry)"
-        @dblclick="fileBrowserActivateEntry(entry)">
-        <hard-drive v-if="!fileBrowserCurrentPath && entry.type === 'directory'" :size="16"
-          class="icon me-2 flex-shrink-0"></hard-drive>
-        <folder v-else-if="entry.type === 'directory'" :size="16" class="icon me-2 flex-shrink-0 text-warning"></folder>
-        <file-text v-else :size="16" class="icon me-2 flex-shrink-0"></file-text>
-        <span class="text-truncate">{{ entry.name }}</span>
-      </button>
-    </div>
-    <template #footer>
-      <div class="flex-grow-1 text-muted small text-truncate" v-if="fileBrowserSelectedPath">
-        <code>{{ fileBrowserSelectedPath }}</code>
-      </div>
-      <button type="button" class="btn btn-secondary" @click="fileBrowserClose">
-        <x :size="16" class="icon me-1"></x>
-        {{ $t('_common.cancel') }}
-      </button>
-      <button type="button" class="btn btn-primary" @click="fileBrowserConfirm"
-        :disabled="!fileBrowserSelectedPath && !fileBrowserTypedPath">
-        <check :size="16" class="icon me-1"></check>
-        {{ $t('file_browser.select') }}
-      </button>
-    </template>
-  </Modal>
+  <FileBrowserModal v-model:open="fileBrowserOpen" :type="fileBrowserType" :title="fileBrowserTitle"
+    :start-path="fileBrowserStartPath" @confirm="onFileBrowserConfirm" />
 </template>
 
 <script>
+import { toRaw } from 'vue'
 import Modal from '@/components/Modal.vue'
 import FormGroup from '@/components/FormGroup.vue'
 import LoadingSpinner from '@/components/LoadingSpinner.vue'
 import Checkbox from '@/components/Checkbox.vue'
+import FileBrowserModal from '@/components/FileBrowserModal.vue'
+import PrepCommandList from '@/components/PrepCommandList.vue'
 import { apiFetch } from '@/utils/fetch_utils'
 import SunshineVersion from '@/utils/sunshine_version'
 import {
   ArrowDown,
-  ArrowRight,
   ArrowUp,
   ArrowUpDown,
-  Check,
   Edit,
-  FileText,
   Folder,
   FolderOpen,
-  FolderUp,
-  HardDrive,
   LayersPlus,
-  Play,
   Plus,
-  RotateCcw,
   Save,
   Search,
-  Shield,
   Terminal,
   Trash2,
   X,
@@ -512,24 +392,18 @@ export default {
     FormGroup,
     LoadingSpinner,
     Checkbox,
+    FileBrowserModal,
+    PrepCommandList,
     ArrowDown,
-    ArrowRight,
     ArrowUp,
     ArrowUpDown,
-    Check,
     Edit,
-    FileText,
     Folder,
     FolderOpen,
-    FolderUp,
-    HardDrive,
     LayersPlus,
-    Play,
     Plus,
-    RotateCcw,
     Save,
     Search,
-    Shield,
     Terminal,
     Trash2,
     X,
@@ -543,23 +417,17 @@ export default {
       coverCandidates: [],
       coverSearchQuery: "",
       platform: "",
-      fileBrowserType: "any",
-      fileBrowserTitle: "",
-      fileBrowserCallback: null,
-      fileBrowserCurrentPath: "",
-      fileBrowserParentPath: "",
-      fileBrowserEntries: [],
-      fileBrowserLoading: false,
-      fileBrowserError: "",
-      fileBrowserSelectedPath: "",
-      fileBrowserTypedPath: "",
       searchQuery: "",
       sortMode: "default",
       deleteTarget: null,
       deleteModalOpen: false,
       editModalOpen: false,
       coverFinderModalOpen: false,
-      fileBrowserModalOpen: false,
+      fileBrowserOpen: false,
+      fileBrowserType: "any",
+      fileBrowserTitle: "",
+      fileBrowserStartPath: "",
+      fileBrowserTarget: null,
       version: null,
       githubVersion: null,
     };
@@ -664,7 +532,7 @@ export default {
       this.editModalOpen = true;
     },
     editApp(id) {
-      this.editForm = structuredClone(this.apps[id]);
+      this.editForm = structuredClone(toRaw(this.apps[id]));
       this.editForm.index = id;
       if (this.editForm["prep-cmd"] === undefined)
         this.editForm["prep-cmd"] = [];
@@ -707,21 +575,6 @@ export default {
         if (r.status === 200) document.location.reload();
       });
     },
-    addPrepCmd() {
-      let template = {
-        do: "",
-        undo: ""
-      };
-
-      if (this.platform === 'windows') {
-        template = { ...template, elevated: false };
-      }
-
-      this.editForm["prep-cmd"].push(template);
-    },
-    deletePrepCmd(index) {
-      this.editForm["prep-cmd"].splice(index, 1);
-    },
     addDetached() {
       this.editForm.detached.push("");
     },
@@ -806,80 +659,24 @@ export default {
       })
         .finally(() => this.coverFinderBusy = false);
     },
-    browseFor(type, titleKey, startPath, callback) {
+    openFileBrowser(type, titleKey, startPath, target) {
       this.fileBrowserType = type;
       this.fileBrowserTitle = this.$t(titleKey);
-      this.fileBrowserCallback = callback;
-      this.fileBrowserSelectedPath = startPath || '';
-      this.fileBrowserTypedPath = startPath || '';
-      this.fileBrowserError = '';
-      this.fileBrowserNavigate(startPath || '');
-      this.fileBrowserModalOpen = true;
-    },
-    fileBrowserClose() {
-      this.fileBrowserModalOpen = false;
-    },
-    fileBrowserConfirm() {
-      const path = this.fileBrowserSelectedPath || this.fileBrowserTypedPath;
-      if (path) {
-        if (this.fileBrowserCallback) {
-          this.fileBrowserCallback(path);
-          this.fileBrowserCallback = null;
-        }
-        this.fileBrowserClose();
-      }
-    },
-    fileBrowserNavigate(path) {
-      this.fileBrowserLoading = true;
-      this.fileBrowserError = '';
-      const params = new URLSearchParams({ type: this.fileBrowserType });
-      if (path) params.set('path', path);
-      fetch(`./api/browse?${params.toString()}`)
-        .then(r => r.ok ? r.json() : r.json().then(e => { throw new Error(e.error || 'Browse failed'); }))
-        .then(data => {
-          this.fileBrowserCurrentPath = data.path ?? '';
-          this.fileBrowserParentPath = data.parent ?? '';
-          this.fileBrowserEntries = data.entries ?? [];
-          this.fileBrowserTypedPath = data.path ?? '';
-          this.fileBrowserSelectedPath = this.fileBrowserType === 'directory' ? (data.path ?? '') : '';
-        })
-        .catch(err => { this.fileBrowserError = err.message; })
-        .finally(() => { this.fileBrowserLoading = false; });
-    },
-    fileBrowserNavigateUp() {
-      this.fileBrowserNavigate(this.fileBrowserParentPath);
+      this.fileBrowserStartPath = startPath || '';
+      this.fileBrowserTarget = target;
+      this.fileBrowserOpen = true;
     },
-    fileBrowserSelectEntry(entry) {
-      if (entry.type === 'directory') {
-        this.fileBrowserNavigate(entry.path);
+    onFileBrowserConfirm(path) {
+      const target = this.fileBrowserTarget;
+      if (target.field === 'detached') {
+        this.editForm.detached[target.index] = path;
       } else {
-        this.fileBrowserSelectedPath = entry.path;
-        this.fileBrowserTypedPath = entry.path;
+        this.editForm[target.field] = path;
       }
     },
-    fileBrowserActivateEntry(entry) {
-      if (entry.type === 'directory') {
-        this.fileBrowserNavigate(entry.path);
-      } else {
-        this.fileBrowserSelectedPath = entry.path;
-        this.fileBrowserTypedPath = entry.path;
-        this.fileBrowserConfirm();
-      }
-    },
-    fileBrowserOnTypedInput() {
-      this.fileBrowserSelectedPath = this.fileBrowserTypedPath;
-    },
-    browsePrep(index, field) {
-      const current = this.editForm['prep-cmd'][index][field] || '';
-      this.browseFor('executable', 'file_browser.select_executable', current, (path) => {
-        this.editForm['prep-cmd'][index][field] = path;
-      });
-    },
     browseDetached(index) {
       const current = this.editForm.detached[index] || '';
-      this.browseFor('executable', 'file_browser.select_executable', current, (path) => {
-        this.editForm.detached[index] = path;
-      });
+      this.openFileBrowser('executable', 'file_browser.select_executable', current, { field: 'detached', index });
     },
     save() {
       this.editForm["image-path"] = this.editForm["image-path"].toString().replaceAll('"', '');
diff --git a/src_assets/common/assets/web/src/views/ConfigView.vue b/src_assets/common/assets/web/src/views/ConfigView.vue
index b3d15bbe778..020cc06e745 100644
--- a/src_assets/common/assets/web/src/views/ConfigView.vue
+++ b/src_assets/common/assets/web/src/views/ConfigView.vue
@@ -4,26 +4,9 @@
     <p>{{ $t('config.configuration_desc') }}</p>
   </div>
 
-  <!-- Search Bar with Autocomplete -->
-  <div class="toolbar mb-3 d-flex flex-wrap align-items-center gap-3">
-    <div class="input-group config-search">
-      <span class="input-group-text">
-        <search :size="18" class="icon"></search>
-      </span>
-      <input type="text" class="form-control" v-model="searchQuery" :placeholder="$t('config.search_options')"
-        :aria-label="$t('config.search_options')" @input="handleSearch" list="config-options" />
-    </div>
-    <datalist id="config-options">
-      <option v-for="option in allConfigOptions" :key="option.key" :value="option.label">
-        {{ option.tab }} - {{ option.label }}
-      </option>
-    </datalist>
-    <span v-if="searchQuery && searchResults.length === 0" class="text-muted small flex-shrink-0">
-      No results found for "{{ searchQuery }}"
-    </span>
-    <span v-else-if="searchQuery" class="text-muted small flex-shrink-0">
-      Found {{ searchResults.length }} result(s)
-    </span>
+  <!-- Search toolbar -->
+  <div class="toolbar config-search-toolbar mb-3">
+    <ConfigSearch :options="getAllConfigOptions" @select="onSearchSelect" />
   </div>
 
   <div class="form" v-if="config">
@@ -31,19 +14,19 @@
       <!-- Sidebar navigation -->
       <nav class="config-nav">
         <ul class="nav config-nav-list">
-          <li class="nav-item" v-for="tab in generalTabs" :key="tab.id">
+          <li class="nav-item" v-for="tab in tabs.general" :key="tab.id">
             <a class="nav-link" :class="{ active: tab.id === currentTab }" href="#" @click="currentTab = tab.id">
-              <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+              <component :is="tab.icon" :size="18" class="icon"></component>
               {{ tab.name }}
             </a>
           </li>
         </ul>
-        <template v-if="encoderTabs.length">
+        <template v-if="tabs.encoders.length">
           <div class="config-nav-heading">{{ $t('config.encoders') }}</div>
           <ul class="nav config-nav-list">
-            <li class="nav-item" v-for="tab in encoderTabs" :key="tab.id">
+            <li class="nav-item" v-for="tab in tabs.encoders" :key="tab.id">
               <a class="nav-link" :class="{ active: tab.id === currentTab }" href="#" @click="currentTab = tab.id">
-                <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                <component :is="tab.icon" :size="18" class="icon"></component>
                 {{ tab.name }}
               </a>
             </li>
@@ -68,24 +51,25 @@
         <StatusAlert v-if="restarted" success :success-message="$t('config.restart_note')" alert-class="mb-4" />
 
         <!-- General Tab -->
-        <general v-if="currentTab === 'general'" :config="config" :platform="platform"></general>
+        <general ref="general" v-show="currentTab === 'general'" :config="config" :platform="platform"></general>
 
         <!-- Input Tab -->
-        <inputs v-if="currentTab === 'input'" :config="config" :platform="platform"></inputs>
+        <inputs ref="input" v-show="currentTab === 'input'" :config="config" :platform="platform"></inputs>
 
         <!-- Audio/Video Tab -->
-        <audio-video v-if="currentTab === 'av'" :config="config" :platform="platform"></audio-video>
+        <audio-video ref="av" v-show="currentTab === 'av'" :config="config" :platform="platform"></audio-video>
 
         <!-- Network Tab -->
-        <network v-if="currentTab === 'network'" :config="config" :platform="platform"></network>
+        <network ref="network" v-show="currentTab === 'network'" :config="config" :platform="platform"></network>
 
         <!-- Files Tab -->
-        <files v-if="currentTab === 'files'" :config="config" :platform="platform"></files>
+        <files ref="files" v-show="currentTab === 'files'" :config="config" :platform="platform"></files>
 
         <!-- Advanced Tab -->
-        <advanced v-if="currentTab === 'advanced'" :config="config" :platform="platform"></advanced>
+        <advanced ref="advanced" v-show="currentTab === 'advanced'" :config="config" :platform="platform"></advanced>
 
-        <container-encoders :current-tab="currentTab" :config="config" :platform="platform"></container-encoders>
+        <container-encoders ref="containerEncoders" :current-tab="currentTab" :config="config"
+          :platform="platform"></container-encoders>
       </div>
     </div>
   </div>
@@ -93,6 +77,7 @@
 
 <script>
 import { computed } from 'vue'
+import ConfigSearch from '@/components/ConfigSearch.vue'
 import General from '@/components/configs/tabs/General.vue'
 import Inputs from '@/components/configs/tabs/Inputs.vue'
 import Network from '@/components/configs/tabs/Network.vue'
@@ -110,16 +95,14 @@ import {
   Gpu,
   Network as NetworkIcon,
   Save,
-  Search,
   Settings,
   Sliders,
   Volume2,
 } from '@lucide/vue'
 
-const ENCODER_TAB_IDS = new Set(["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"]);
-
 export default {
   components: {
+    ConfigSearch,
     General,
     Inputs,
     Network,
@@ -130,17 +113,8 @@ export default {
     ContainerEncoders,
     StatusAlert,
     // icons
-    Cpu,
     Check,
-    FileCog,
-    Gamepad2,
-    Gpu,
-    NetworkIcon,
     Save,
-    Search,
-    Settings,
-    Sliders,
-    Volume2,
   },
   data() {
     return {
@@ -149,219 +123,70 @@ export default {
       restarted: false,
       config: null,
       currentTab: "general",
-      searchQuery: "",
-      tabs: [ // TODO: Move the options to each Component instead, encapsulate.
-        {
-          id: "general",
-          name: "General",
-          options: {
-            "locale": "en",
-            "sunshine_name": "",
-            "min_log_level": 2,
-            "global_prep_cmd": [],
-            "notify_pre_releases": "disabled",
-            "system_tray": "enabled",
-          },
-        },
-        {
-          id: "input",
-          name: "Input",
-          options: {
-            "controller": "enabled",
-            "gamepad": "auto",
-            "ds4_back_as_touchpad_click": "enabled",
-            "motion_as_ds4": "enabled",
-            "touchpad_as_ds4": "enabled",
-            "virtualhid_randomize_mac": "enabled",
-            "back_button_timeout": -1,
-            "keyboard": "enabled",
-            "key_repeat_delay": 500,
-            "key_repeat_frequency": 24.9,
-            "always_send_scancodes": "enabled",
-            "key_rightalt_to_key_win": "disabled",
-            "mouse": "enabled",
-            "high_resolution_scrolling": "enabled",
-            "native_pen_touch": "enabled",
-            "keybindings": "[0x10,0xA0,0x11,0xA2,0x12,0xA4]",  // todo: add this to UI
-          },
-        },
-        {
-          id: "av",
-          name: "Audio/Video",
-          options: {
-            "audio_sink": "",
-            "virtual_sink": "",
-            "stream_audio": "enabled",
-            "install_steam_audio_drivers": "enabled",
-            "adapter_name": "",
-            "output_name": "",
-            "dd_configuration_option": "disabled",
-            "dd_resolution_option": "auto",
-            "dd_manual_resolution": "",
-            "dd_refresh_rate_option": "auto",
-            "dd_manual_refresh_rate": "",
-            "dd_hdr_option": "auto",
-            "dd_wa_hdr_toggle_delay": 0,
-            "dd_config_revert_delay": 3000,
-            "dd_config_revert_on_disconnect": "disabled",
-            "dd_mode_remapping": { "mixed": [], "resolution_only": [], "refresh_rate_only": [] },
-            "max_bitrate": 0,
-            "minimum_fps_target": 0
-          },
-        },
-        {
-          id: "network",
-          name: "Network",
-          options: {
-            "upnp": "disabled",
-            "address_family": "ipv4",
-            "bind_address": "",
-            "port": 47989,
-            "origin_web_ui_allowed": "lan",
-            "csrf_allowed_origins": "",
-            "external_ip": "",
-            "lan_encryption_mode": 0,
-            "wan_encryption_mode": 1,
-            "ping_timeout": 10000,
-            "packetsize": 0,
-          },
-        },
-        {
-          id: "files",
-          name: "Config Files",
-          options: {
-            "file_apps": "",
-            "credentials_file": "",
-            "log_path": "",
-            "pkey": "",
-            "cert": "",
-            "file_state": "",
-          },
-        },
-        {
-          id: "advanced",
-          name: "Advanced",
-          options: {
-            "fec_percentage": 20,
-            "qp": 28,
-            "min_threads": 2,
-            "hevc_mode": 0,
-            "av1_mode": 0,
-            "capture": "",
-            "encoder": "",
-          },
-        },
-        {
-          id: "nv",
-          name: "NVIDIA NVENC Encoder",
-          options: {
-            "nvenc_preset": 1,
-            "nvenc_twopass": "quarter_res",
-            "nvenc_spatial_aq": "disabled",
-            "nvenc_vbv_increase": 0,
-            "nvenc_realtime_hags": "enabled",
-            "nvenc_split_encode": "driver_decides",
-            "nvenc_latency_over_power": "enabled",
-            "nvenc_opengl_vulkan_on_dxgi": "enabled",
-            "nvenc_h264_cavlc": "disabled",
-          },
-        },
-        {
-          id: "qsv",
-          name: "Intel QuickSync Encoder",
-          options: {
-            "qsv_preset": "medium",
-            "qsv_coder": "auto",
-            "qsv_slow_hevc": "disabled",
-          },
-        },
-        {
-          id: "amd",
-          name: "AMD AMF Encoder",
-          options: {
-            "amd_usage": "ultralowlatency",
-            "amd_rc": "vbr_latency",
-            "amd_enforce_hrd": "disabled",
-            "amd_max_au_size": "",
-            "amd_quality": "balanced",
-            "amd_preanalysis": "disabled",
-            "amd_vbaq": "enabled",
-            "amd_coder": "auto",
-          },
-        },
-        {
-          id: "vt",
-          name: "VideoToolbox Encoder",
-          options: {
-            "vt_coder": "auto",
-            "vt_software": "auto",
-            "vt_realtime": "enabled",
-          },
-        },
-        {
-          id: "vaapi",
-          name: "VA-API Encoder",
-          options: {
-            "vaapi_blbrc": "disabled",
-            "vaapi_quality": "auto",
-            "vaapi_rc": "auto",
-            "vaapi_strict_rc_buffer": "disabled",
-          },
-        },
-        {
-          id: "vulkan",
-          name: "Vulkan Encoder",
-          options: {
-            "vk_tune": 2,
-            "vk_rc_mode": 2,
-          },
-        },
-        {
-          id: "sw",
-          name: "Software Encoder",
-          options: {
-            "sw_preset": "superfast",
-            "sw_tune": "zerolatency",
-          },
-        },
-      ],
+      // True once config is fetched. Allows getAllConfigOptions to recompute after $refs exist.
+      refsReady: false,
+      tabs: {
+        general: [
+          { id: "general", name: "General", icon: Settings },
+          { id: "input", name: "Input", icon: Gamepad2 },
+          { id: "av", name: "Audio/Video", icon: Volume2 },
+          { id: "network", name: "Network", icon: NetworkIcon },
+          { id: "files", name: "Config Files", icon: FileCog },
+          { id: "advanced", name: "Advanced", icon: Sliders },
+        ],
+        encoders: [
+          { id: "nv", name: "NVIDIA NVENC Encoder", icon: Gpu, excludedIn: ["macos"] },
+          { id: "qsv", name: "Intel QuickSync Encoder", icon: Gpu, excludedIn: ["freebsd", "linux", "macos"] },
+          { id: "amd", name: "AMD AMF Encoder", icon: Gpu, excludedIn: ["freebsd", "linux", "macos"] },
+          { id: "vt", name: "VideoToolbox Encoder", icon: Gpu, excludedIn: ["windows", "freebsd", "linux"] },
+          { id: "vaapi", name: "VA-API Encoder", icon: Gpu, excludedIn: ["windows", "macos"] },
+          { id: "vulkan", name: "Vulkan Encoder", icon: Gpu, excludedIn: ["windows", "macos"] },
+          { id: "sw", name: "Software Encoder", icon: Cpu, excludedIn: [] },
+        ],
+      },
     };
   },
   provide() {
     return {
       platform: computed(() => this.platform),
-      searchQuery: computed(() => this.searchQuery),
     }
   },
   computed: {
-    generalTabs() {
-      return this.tabs.filter(tab => !ENCODER_TAB_IDS.has(tab.id));
-    },
-    encoderTabs() {
-      return this.tabs.filter(tab => ENCODER_TAB_IDS.has(tab.id));
-    },
-    allConfigOptions() {
+    getAllConfigOptions() {
       const options = [];
-      this.tabs.forEach(tab => {
-        Object.keys(tab.options).forEach(key => {
+
+      if (!this.refsReady) {
+        return options;
+      }
+
+      const pushOptions = (tabOptions, tabName, tabId) => {
+        Object.keys(tabOptions).forEach(key => {
           options.push({
             key: key,
-            label: key.replaceAll('_', ' ').replaceAll(/\b\w/g, l => l.toUpperCase()),
-            tab: tab.name,
-            tabId: tab.id
+            label: this.$t(`config.${key}`),
+            tab: tabName,
+            tabId: tabId
           });
         });
+      };
+
+      this.tabs.general.forEach(tab => {
+        if (this.$refs[tab.id]) {
+          pushOptions(this.$refs[tab.id].getOwnConfigOptions(), tab.name, tab.id);
+        }
       });
+
+      if (this.$refs.containerEncoders) {
+        const encoderOptionsById = this.$refs.containerEncoders.getOptionsById();
+        this.tabs.encoders.forEach(tab => {
+          if (encoderOptionsById[tab.id]) {
+            pushOptions(encoderOptionsById[tab.id], tab.name, tab.id);
+          }
+        });
+      }
+
       return options;
     },
-    searchResults() {
-      if (!this.searchQuery) return [];
-      const query = this.searchQuery.toLowerCase();
-      return this.allConfigOptions.filter(option =>
-        option.key.toLowerCase().includes(query) ||
-        option.label.toLowerCase().includes(query)
-      );
-    }
   },
   created() {
     fetch("./api/config")
@@ -370,95 +195,38 @@ export default {
         this.config = r;
         this.platform = this.config.platform;
 
-        if (this.platform === "windows") {
-          this.tabs = this.tabs.filter((el) => {
-            return el.id !== "vt" && el.id !== "vaapi" && el.id !== "vulkan";
-          });
-        }
-        if (this.platform === "freebsd" || this.platform === "linux") {
-          this.tabs = this.tabs.filter((el) => {
-            return el.id !== "amd" && el.id !== "qsv" && el.id !== "vt";
-          });
-        }
-        if (this.platform === "macos") {
-          this.tabs = this.tabs.filter((el) => {
-            return el.id !== "amd" && el.id !== "nv" && el.id !== "qsv" && el.id !== "vaapi" && el.id !== "vulkan";
-          });
-        }
+        this.tabs.encoders = this.tabs.encoders.filter(el => !el.excludedIn.includes(this.platform));
 
         // remove values we don't want in the config file
         delete this.config.platform;
         delete this.config.status;
         delete this.config.version;
 
-        // TODO: let each tab's Component handle it's own data instead of doing it here
-
         // Parse the special options before population if available
-        const specialOptions = ["dd_mode_remapping", "global_prep_cmd"]
-        for (const optionKey of specialOptions) {
-          if (this.config.hasOwnProperty(optionKey)) {
-            this.config[optionKey] = JSON.parse(this.config[optionKey]);
+        ["dd_mode_remapping", "global_prep_cmd"].forEach(key => {
+          if (this.config.hasOwnProperty(key)) {
+            this.config[key] = JSON.parse(this.config[key]);
           }
-        }
+        });
 
-        // Populate default values from tabs options
-        this.tabs.forEach(tab => {
-          Object.keys(tab.options).forEach(optionKey => {
-            if (this.config[optionKey] === undefined) {
-              // Make sure to copy by value
-              this.config[optionKey] = structuredClone(tab.options[optionKey]);
-            }
-          });
+        // Wait for the resulting v-if="config" mount to actually land before
+        // flipping this - that's what guarantees $refs are populated by then.
+        this.$nextTick(() => {
+          this.refsReady = true;
         });
       });
   },
   methods: {
-    getTabIcon(tabId) {
-      const iconMap = {
-        'general': 'Settings',
-        'input': 'Gamepad2',
-        'av': 'Volume2',
-        'network': 'NetworkIcon',
-        'files': 'FileCog',
-        'advanced': 'Sliders',
-        'nv': 'Gpu',
-        'amd': 'Gpu',
-        'qsv': 'Gpu',
-        'vaapi': 'Gpu',
-        'vt': 'Gpu',
-        'vulkan': 'Gpu',
-        'sw': 'Cpu',
-      };
-      return iconMap[tabId] || 'Settings';
-    },
-    forceUpdate() {
-      this.$forceUpdate()
-    },
-    serialize() {
-      return structuredClone(this.config);
-    },
     save() {
       this.saved = false;
       this.restarted = false;
 
-      // create a temp copy of this.config to use for the post request
-      let config = this.serialize();
-
-      // delete default values from this.config
-      this.tabs.forEach(tab => {
-        Object.keys(tab.options).forEach(optionKey => {
-          let delete_value = false
-
-          // todo: add proper type checking
-          if (JSON.stringify(config[optionKey]) === JSON.stringify(tab.options[optionKey])) {
-            delete_value = true
-          }
-
-          if (delete_value) {
-            delete config[optionKey]
-          }
-        });
+      // collect each tab's current values via its own getOwnConfigOptions()
+      let config = {};
+      this.tabs.general.forEach(tab => {
+        Object.assign(config, this.$refs[tab.id].getOwnConfigOptions());
       });
+      Object.assign(config, this.$refs.containerEncoders.getOptions());
 
       return apiFetch("./api/config", {
         method: "POST",
@@ -495,105 +263,31 @@ export default {
         }
       });
     },
-    handleSearch() {
-      // Clear all highlighting
+    onSearchSelect(option) {
+      // Clear any previous highlight
       document.querySelectorAll('.config-search-highlight').forEach(el => {
         el.classList.remove('config-search-highlight');
       });
 
-      if (!this.searchQuery) {
-        // Show all form groups when search is cleared
-        document.querySelectorAll('.mb-3').forEach(el => {
-          el.style.display = '';
-        });
-        return;
-      }
-
-      const results = this.searchResults;
-
-      if (results.length === 0) {
-        return;
+      if (option.tabId !== this.currentTab) {
+        this.currentTab = option.tabId;
       }
 
-      // Switch to the tab of the first result
-      if (results.length > 0 && results[0].tabId !== this.currentTab) {
-        this.currentTab = results[0].tabId;
-      }
-
-      // Wait for tab content to render
+      // Wait for the tab to render before locating the element
       this.$nextTick(() => {
-        // Hide all form groups first
-        document.querySelectorAll('.config-page .mb-3').forEach(el => {
-          el.style.display = 'none';
-        });
-
-        // Show only matching elements
-        results.forEach(result => {
-          const element = document.getElementById(result.key);
-
-          if (element) {
-            // Show the element's container
-            const container = element.closest('.mb-3');
-            if (container) {
-              container.style.display = '';
-            }
-          }
-        });
-
-        // Scroll to and highlight the first result
-        if (results.length > 0) {
-          const firstElement = document.getElementById(results[0].key);
-          if (firstElement) {
-            const container = firstElement.closest('.mb-3');
-            if (container) {
-              container.scrollIntoView({ behavior: 'smooth', block: 'center' });
-              container.classList.add('config-search-highlight');
-              setTimeout(() => {
-                container.classList.remove('config-search-highlight');
-              }, 3000);
-            }
-          }
+        const element = document.getElementById(option.key);
+        const container = element ? element.closest('.mb-3') : null;
+        if (!container) {
+          return;
         }
+
+        container.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        container.classList.add('config-search-highlight');
+        setTimeout(() => {
+          container.classList.remove('config-search-highlight');
+        }, 3000);
       });
     },
   },
-  mounted() {
-    // Handle hashchange events
-    const handleHash = () => {
-      let hash = window.location.hash;
-      if (hash) {
-        // remove the # from the hash
-        let stripped_hash = hash.substring(1);
-
-        this.tabs.forEach(tab => {
-          Object.keys(tab.options).forEach(key => {
-            if (tab.id === stripped_hash || key === stripped_hash) {
-              this.currentTab = tab.id;
-            }
-            if (key === stripped_hash) {
-              // sleep for 2 seconds to allow the page to load
-              setTimeout(() => {
-                let element = document.getElementById(stripped_hash);
-                if (element) {
-                  window.location.hash = hash;
-                }
-              }, 2000);
-            }
-
-            if (this.currentTab === tab.id) {
-              // stop looping
-              return true;
-            }
-          });
-        });
-      }
-    };
-
-    // Call handleHash for the initial load
-    handleHash();
-
-    // Add hashchange event listener
-    window.addEventListener("hashchange", handleHash);
-  },
 }
 </script>
diff --git a/tests/CMakeLists.txt b/tests/CMakeLists.txt
index 0d8b0ae8f3a..ff8394a7f26 100644
--- a/tests/CMakeLists.txt
+++ b/tests/CMakeLists.txt
@@ -194,7 +194,20 @@ set(INTEGRATION_TEST_FILES
     "src_assets/common/assets/web/src/views/ConfigView.vue"
     "docs/configuration.md"
     "src_assets/common/assets/web/public/assets/locale/en.json"
+    "src_assets/common/assets/web/src/utils/locale.js"
     "src_assets/common/assets/web/src/components/configs/tabs/General.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/Network.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/Files.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue"
+    "src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue"
     "src_assets/linux/misc/60-sunshine.rules"
 )
 
diff --git a/tests/integration/test_config_consistency.cpp b/tests/integration/test_config_consistency.cpp
index 30a8dd105fd..cfee5148f05 100644
--- a/tests/integration/test_config_consistency.cpp
+++ b/tests/integration/test_config_consistency.cpp
@@ -87,96 +87,75 @@ class ConfigConsistencyTest: public BaseTest {
     return pos - 1;
   }
 
-  // Helper function to extract tab ID from a tab object
-  static std::string extractTabId(const std::string &tabObject) {
-    const std::regex idPattern(R"DELIM(id:\s*"([^"]+)")DELIM");
-
-    if (std::smatch idMatch; std::regex_search(tabObject, idMatch, idPattern)) {
-      return idMatch[1].str();
-    }
-
-    return "";
+  // Maps a tab id to the component file that declares its config OPTIONS.
+  static std::string tabIdToFilePath(const std::string &tabId) {
+    static const std::map<std::string, std::string, std::less<>> pathById = {
+      {"general", "src_assets/common/assets/web/src/components/configs/tabs/General.vue"},
+      {"input", "src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue"},
+      {"av", "src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue"},
+      {"network", "src_assets/common/assets/web/src/components/configs/tabs/Network.vue"},
+      {"files", "src_assets/common/assets/web/src/components/configs/tabs/Files.vue"},
+      {"advanced", "src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue"},
+      {"nv", "src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue"},
+      {"qsv", "src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue"},
+      {"amd", "src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue"},
+      {"vt", "src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue"},
+      {"vaapi", "src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue"},
+      {"vulkan", "src_assets/common/assets/web/src/components/configs/tabs/encoders/VulkanEncoder.vue"},
+      {"sw", "src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue"},
+    };
+    const auto it = pathById.find(tabId);
+    return it != pathById.end() ? it->second : "";
   }
 
-  // Helper function to find and extract tabs content from ConfigView.vue
-  static std::string extractTabsContent(const std::string &content) {
-    const size_t tabsStart = content.find("tabs: [");
+  // Extract every tab id declared in ConfigView.vue's tabs.general/tabs.encoders arrays.
+  static std::vector<std::string> extractConfigViewTabIds() {
+    std::vector<std::string> ids;
+    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/views/ConfigView.vue");
+
+    const size_t tabsStart = content.find("tabs: {");
     if (tabsStart == std::string::npos) {
-      return "";
+      return ids;
     }
 
-    // Find the end of the tab array
-    size_t pos = tabsStart + 7;  // Skip "tabs: ["
-    int bracketLevel = 1;
-    size_t tabsEnd = pos;
+    const size_t braceStart = content.find('{', tabsStart);
+    const size_t braceEnd = findClosingBrace(content, braceStart);
+    const std::string tabsSection = content.substr(braceStart + 1, braceEnd - braceStart - 1);
 
-    while (pos < content.length() && bracketLevel > 0) {
-      if (content[pos] == '[') {
-        bracketLevel++;
-      } else if (content[pos] == ']') {
-        bracketLevel--;
-      }
-      tabsEnd = pos;
-      pos++;
+    const std::regex idPattern(R"DELIM(id:\s*"([^"]+)")DELIM");
+    std::sregex_iterator iter(tabsSection.begin(), tabsSection.end(), idPattern);
+
+    for (const std::sregex_iterator end; iter != end; ++iter) {
+      ids.push_back((*iter)[1].str());
     }
 
-    return content.substr(tabsStart + 7, tabsEnd - tabsStart - 7);
+    return ids;
   }
 
-  // Helper function to extract options from a tab object (generic version)
-  template<typename Container>
-  static void extractOptionsFromTabGeneric(const std::string &tabObject, Container &container) {
-    const std::string tabId = extractTabId(tabObject);
-    if (tabId.empty()) {
-      return;
-    }
+  // Extract the option keys declared in a tab component's OPTIONS constant.
+  static std::vector<std::string> extractOptionsFromTabFile(const std::string &filePath) {
+    std::vector<std::string> keys;
+    const std::string content = file_handler::read_file(filePath.c_str());
 
-    const size_t optionsStart = tabObject.find("options:");
+    // Anchored to "export const OPTIONS = {" specifically - a plain "OPTIONS = {" search would
+    // also match inside an unrelated constant like "CAPTURE_OPTIONS = {" or "ENCODER_OPTIONS = {".
+    const size_t optionsStart = content.find("export const OPTIONS = {");
     if (optionsStart == std::string::npos) {
-      return;
-    }
-
-    const size_t optStart = tabObject.find('{', optionsStart);
-    if (optStart == std::string::npos) {
-      return;
+      return keys;
     }
 
-    const size_t optEnd = findClosingBrace(tabObject, optStart);
-    std::string optionsSection = tabObject.substr(optStart + 1, optEnd - optStart - 1);
+    const size_t braceStart = content.find('{', optionsStart);
+    const size_t braceEnd = findClosingBrace(content, braceStart);
+    const std::string optionsSection = content.substr(braceStart + 1, braceEnd - braceStart - 1);
 
-    // Extract option names
-    const std::regex optionPattern(R"DELIM("([^"]+)":\s*)DELIM");
-    std::sregex_iterator optionIter(optionsSection.begin(), optionsSection.end(), optionPattern);
-
-    for (const std::sregex_iterator optionEnd; optionIter != optionEnd; ++optionIter) {
-      std::string optionName = (*optionIter)[1].str();
+    const std::regex keyPattern(R"DELIM("([^"]+)":\s*)DELIM");
+    std::sregex_iterator iter(optionsSection.begin(), optionsSection.end(), keyPattern);
 
-      // Use if constexpr to handle different container types
-      if constexpr (std::is_same_v<Container, std::map<std::string, std::string, std::less<>>>) {
-        container[optionName] = tabId;
-      } else if constexpr (std::is_same_v<Container, std::map<std::string, std::vector<std::string>, std::less<>>>) {
-        container[tabId].push_back(optionName);
-      }
+    for (const std::sregex_iterator end; iter != end; ++iter) {
+      keys.push_back((*iter)[1].str());
     }
-  }
-
-  // Helper function to process tab objects from tabs content
-  template<typename Container>
-  static void processTabObjects(const std::string &tabsContent, Container &container) {
-    size_t tabPos = 0;
-    while (tabPos < tabsContent.length()) {
-      const size_t objStart = tabsContent.find('{', tabPos);
-      if (objStart == std::string::npos) {
-        break;
-      }
-
-      const size_t objEnd = findClosingBrace(tabsContent, objStart);
-      std::string tabObject = tabsContent.substr(objStart, objEnd - objStart + 1);
 
-      extractOptionsFromTabGeneric(tabObject, container);
-
-      tabPos = objEnd + 1;
-    }
+    return keys;
   }
 
   // Helper function to trim whitespace from string
@@ -195,37 +174,33 @@ class ConfigConsistencyTest: public BaseTest {
     return "";
   }
 
-  // Extract config options from ConfigView.vue
-  static std::map<std::string, std::string, std::less<>> extractConfigViewOptions() {
-    std::map<std::string, std::string, std::less<>> options;
-    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/views/ConfigView.vue");
+  // Extract config options from each tab component's OPTIONS constant, with order preserved.
+  static std::map<std::string, std::vector<std::string>, std::less<>> extractConfigViewOptionsWithOrder() {
+    std::map<std::string, std::vector<std::string>, std::less<>> optionsByTab;
 
-    const std::string tabsContent = extractTabsContent(content);
-    if (tabsContent.empty()) {
-      return options;
-    }
+    for (const auto &tabId : extractConfigViewTabIds()) {
+      const std::string filePath = tabIdToFilePath(tabId);
+      if (filePath.empty()) {
+        continue;
+      }
 
-    processTabObjects(tabsContent, options);
-    return options;
-  }
+      optionsByTab[tabId] = extractOptionsFromTabFile(filePath);
+    }
 
-  // Helper function to extract options from a single tab object (now using generic function)
-  static void extractOptionsFromTab(const std::string &tabObject, std::map<std::string, std::vector<std::string>, std::less<>> &optionsByTab) {
-    extractOptionsFromTabGeneric(tabObject, optionsByTab);
+    return optionsByTab;
   }
 
-  // Extract config options from ConfigView.vue with order preserved
-  static std::map<std::string, std::vector<std::string>, std::less<>> extractConfigViewOptionsWithOrder() {
-    std::map<std::string, std::vector<std::string>, std::less<>> optionsByTab;
-    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/views/ConfigView.vue");
+  // Extract config options from each tab component's OPTIONS constant, keyed by tab id.
+  static std::map<std::string, std::string, std::less<>> extractConfigViewOptions() {
+    std::map<std::string, std::string, std::less<>> options;
 
-    const std::string tabsContent = extractTabsContent(content);
-    if (tabsContent.empty()) {
-      return optionsByTab;
+    for (const auto &[tabId, optionNames] : extractConfigViewOptionsWithOrder()) {
+      for (const auto &optionName : optionNames) {
+        options[optionName] = tabId;
+      }
     }
 
-    processTabObjects(tabsContent, optionsByTab);
-    return optionsByTab;
+    return options;
   }
 
   // Helper function to process markdown line for section headers
diff --git a/tests/integration/test_locale_consistency.cpp b/tests/integration/test_locale_consistency.cpp
index 33b4f57925e..9a5d5d98d32 100644
--- a/tests/integration/test_locale_consistency.cpp
+++ b/tests/integration/test_locale_consistency.cpp
@@ -48,20 +48,20 @@ class LocaleConsistencyTest: public BaseTest {
     return locales;
   }
 
-  // Extract locale options from General.vue
-  static std::map<std::string, std::string, std::less<>> extractGeneralVueLocales() {
+  // Extract SUPPORTED_LOCALES entries from locale.js
+  static std::map<std::string, std::string, std::less<>> extractSupportedLocales() {
     std::map<std::string, std::string, std::less<>> locales;
-    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/components/configs/tabs/General.vue");
+    const std::string content = file_handler::read_file("src_assets/common/assets/web/src/utils/locale.js");
 
-    // Find the locale select section specifically
-    const std::regex localeSelectPattern("id=\"locale\"[^>]*>([^<]*(?:<option[^>]*>[^<]*</option>[^<]*)*)</select>");
+    // Find the SUPPORTED_LOCALES array specifically
+    const std::regex supportedLocalesPattern(R"(SUPPORTED_LOCALES\s*=\s*\[([^\]]*)\])");
 
-    if (std::smatch selectMatch; std::regex_search(content, selectMatch, localeSelectPattern)) {
-      const std::string localeSection = selectMatch[1].str();
+    if (std::smatch arrayMatch; std::regex_search(content, arrayMatch, supportedLocalesPattern)) {
+      const std::string localesSection = arrayMatch[1].str();
 
-      // Extract option elements with locale codes and display names from the locale section
-      const std::regex optionPattern(R"delimiter(<option\s+value="([^"]+)">([^<]+)</option>)delimiter");
-      std::sregex_iterator iter(localeSection.begin(), localeSection.end(), optionPattern);
+      // Extract {value: '...', label: '...'} entries from the array
+      const std::regex entryPattern(R"delimiter(value:\s*'([^']+)',\s*label:\s*'([^']*)')delimiter");
+      std::sregex_iterator iter(localesSection.begin(), localesSection.end(), entryPattern);
 
       for (const std::sregex_iterator end; iter != end; ++iter) {
         const std::string localeCode = (*iter)[1].str();
@@ -136,21 +136,21 @@ TEST_F(LocaleConsistencyTest, AllLocaleFilesHaveConfigCppEntries) {
   }
 }
 
-TEST_F(LocaleConsistencyTest, AllLocaleFilesHaveGeneralVueEntries) {
-  const auto vueLocales = extractGeneralVueLocales();
+TEST_F(LocaleConsistencyTest, AllLocaleFilesHaveSupportedLocalesEntries) {
+  const auto supportedLocales = extractSupportedLocales();
   const auto localeFiles = getAvailableLocaleFiles();
 
   std::vector<std::string> missingFromVue;
 
-  // Check that every locale file has a corresponding entry in General.vue
+  // Check that every locale file has a corresponding entry in locale.js
   for (const auto &localeFile : localeFiles) {
-    if (!vueLocales.contains(localeFile)) {
+    if (!supportedLocales.contains(localeFile)) {
       missingFromVue.push_back(localeFile);
     }
   }
 
   if (!missingFromVue.empty()) {
-    std::string errorMsg = "Locale files missing from General.vue:\n";
+    std::string errorMsg = "Locale files missing from locale.js:\n";
     for (const auto &missing : missingFromVue) {
       errorMsg += std::format("  {}.json\n", missing);
     }
@@ -180,21 +180,21 @@ TEST_F(LocaleConsistencyTest, AllConfigCppLocalesHaveFiles) {
   }
 }
 
-TEST_F(LocaleConsistencyTest, AllGeneralVueLocalesHaveFiles) {
-  const auto vueLocales = extractGeneralVueLocales();
+TEST_F(LocaleConsistencyTest, AllSupportedLocalesHaveFiles) {
+  const auto supportedLocales = extractSupportedLocales();
   const auto localeFiles = getAvailableLocaleFiles();
 
   std::vector<std::string> missingFiles;
 
-  // Check that every General.vue locale has a corresponding JSON file
-  for (const auto &vueLocale : vueLocales | std::views::keys) {
-    if (!localeFiles.contains(vueLocale)) {
-      missingFiles.push_back(vueLocale);
+  // Check that every locale.js locale has a corresponding JSON file
+  for (const auto &supportedLocale : supportedLocales | std::views::keys) {
+    if (!localeFiles.contains(supportedLocale)) {
+      missingFiles.push_back(supportedLocale);
     }
   }
 
   if (!missingFiles.empty()) {
-    std::string errorMsg = "General.vue locales missing JSON files:\n";
+    std::string errorMsg = "locale.js locales missing JSON files:\n";
     for (const auto &missing : missingFiles) {
       errorMsg += std::format("  {}.json\n", missing);
     }
@@ -202,38 +202,38 @@ TEST_F(LocaleConsistencyTest, AllGeneralVueLocalesHaveFiles) {
   }
 }
 
-TEST_F(LocaleConsistencyTest, ConfigCppAndGeneralVueLocalesMatch) {
+TEST_F(LocaleConsistencyTest, ConfigCppAndSupportedLocalesMatch) {
   const auto configLocales = extractConfigCppLocales();
-  const auto vueLocales = extractGeneralVueLocales();
+  const auto supportedLocales = extractSupportedLocales();
 
   std::vector<std::string> configOnlyLocales;
   std::vector<std::string> vueOnlyLocales;
 
-  // Find locales in config.cpp but not in General.vue
+  // Find locales in config.cpp but not in locale.js
   for (const auto &configLocale : configLocales) {
-    if (!vueLocales.contains(configLocale)) {
+    if (!supportedLocales.contains(configLocale)) {
       configOnlyLocales.push_back(configLocale);
     }
   }
 
-  // Find locales in General.vue but not in config.cpp
-  for (const auto &vueLocale : vueLocales | std::views::keys) {
-    if (!configLocales.contains(vueLocale)) {
-      vueOnlyLocales.push_back(vueLocale);
+  // Find locales in locale.js but not in config.cpp
+  for (const auto &supportedLocale : supportedLocales | std::views::keys) {
+    if (!configLocales.contains(supportedLocale)) {
+      vueOnlyLocales.push_back(supportedLocale);
     }
   }
 
   std::string errorMsg;
 
   if (!configOnlyLocales.empty()) {
-    errorMsg += "Locales in config.cpp but not in General.vue:\n";
+    errorMsg += "Locales in config.cpp but not in locale.js:\n";
     for (const auto &locale : configOnlyLocales) {
       errorMsg += std::format("  {}\n", locale);
     }
   }
 
   if (!vueOnlyLocales.empty()) {
-    errorMsg += "Locales in General.vue but not in config.cpp:\n";
+    errorMsg += "Locales in locale.js but not in config.cpp:\n";
     for (const auto &locale : vueOnlyLocales) {
       errorMsg += std::format("  {}\n", locale);
     }
@@ -265,12 +265,12 @@ TEST_F(LocaleConsistencyTest, AllLocaleFilesAreValid) {
 }
 
 TEST_F(LocaleConsistencyTest, LocaleDisplayNamesAreConsistent) {
-  const auto vueLocales = extractGeneralVueLocales();
+  const auto supportedLocales = extractSupportedLocales();
   const auto localeFiles = getAvailableLocaleFiles();
   std::vector<std::string> inconsistentDisplayNames;
 
-  // Check that all locales in General.vue have corresponding JSON files
-  for (const auto &[localeCode, displayName] : vueLocales) {
+  // Check that all locales in locale.js have corresponding JSON files
+  for (const auto &[localeCode, displayName] : supportedLocales) {
     if (!localeFiles.contains(localeCode)) {
       inconsistentDisplayNames.push_back(
         std::format("{}: has display name '{}' but no corresponding JSON file exists", localeCode, displayName)
@@ -278,11 +278,11 @@ TEST_F(LocaleConsistencyTest, LocaleDisplayNamesAreConsistent) {
     }
   }
 
-  // Also check that locale files that exist have entries in General.vue
+  // Also check that locale files that exist have entries in locale.js
   for (const auto &localeFile : localeFiles) {
-    if (!vueLocales.contains(localeFile)) {
+    if (!supportedLocales.contains(localeFile)) {
       inconsistentDisplayNames.push_back(
-        std::format("{}: has JSON file but no display name in General.vue", localeFile)
+        std::format("{}: has JSON file but no display name in locale.js", localeFile)
       );
     }
   }
@@ -298,7 +298,7 @@ TEST_F(LocaleConsistencyTest, LocaleDisplayNamesAreConsistent) {
 
 TEST_F(LocaleConsistencyTest, NoOrphanedLocaleReferences) {
   const auto configLocales = extractConfigCppLocales();
-  const auto vueLocales = extractGeneralVueLocales();
+  const auto supportedLocales = extractSupportedLocales();
   const auto localeFiles = getAvailableLocaleFiles();
 
   std::vector<std::string> orphanedReferences;
@@ -310,9 +310,9 @@ TEST_F(LocaleConsistencyTest, NoOrphanedLocaleReferences) {
     }
   }
 
-  for (const auto &vueLocale : vueLocales | std::views::keys) {
-    if (!localeFiles.contains(vueLocale)) {
-      orphanedReferences.push_back(std::format("General.vue references missing file: {}.json", vueLocale));
+  for (const auto &supportedLocale : supportedLocales | std::views::keys) {
+    if (!localeFiles.contains(supportedLocale)) {
+      orphanedReferences.push_back(std::format("locale.js references missing file: {}.json", supportedLocale));
     }
   }
 
@@ -330,7 +330,7 @@ TEST_F(LocaleConsistencyTest, TestFrameworkDetectsLocaleInconsistencies) {
   const std::string testLocale = "test_framework_validation_locale";
 
   auto configLocales = extractConfigCppLocales();
-  auto vueLocales = extractGeneralVueLocales();
+  auto supportedLocales = extractSupportedLocales();
   const auto localeFiles = getAvailableLocaleFiles();
 
   // Add a fake locale to config to simulate a missing file

From e48605d9ca7abacab2e02e65cbfa9235726780f7 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Thu, 27 Aug 2026 16:11:17 +0000
Subject: [PATCH 22/24] Small changes and fix bug with prepCommandList v-model

---
 .../web/src/components/PrepCommandList.vue    | 113 ++++++++----------
 .../assets/web/src/components/Select.vue      |   2 +-
 .../configs/tabs/ContainerEncoders.vue        |   2 -
 3 files changed, 53 insertions(+), 64 deletions(-)

diff --git a/src_assets/common/assets/web/src/components/PrepCommandList.vue b/src_assets/common/assets/web/src/components/PrepCommandList.vue
index a1c927d70eb..6b6b849b010 100644
--- a/src_assets/common/assets/web/src/components/PrepCommandList.vue
+++ b/src_assets/common/assets/web/src/components/PrepCommandList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="mb-3">
-    <label class="form-label">{{ label }}</label>
+  <fieldset class="mb-3">
+    <legend class="form-label h6">{{ label }}</legend>
     <div class="form-text">{{ description }}</div>
 
     <!-- Column headers (only once there's at least one row) -->
@@ -66,10 +66,11 @@
 
     <FileBrowserModal v-model:open="browserOpen" type="executable" :title="$t('file_browser.select_executable')"
       :start-path="browserStartPath" @confirm="onBrowserConfirm" />
-  </div>
+  </fieldset>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue'
 import Checkbox from '@/components/Checkbox.vue'
 import FileBrowserModal from '@/components/FileBrowserModal.vue'
 import {
@@ -81,63 +82,53 @@ import {
   Trash2,
 } from '@lucide/vue'
 
-export default {
-  components: {
-    Checkbox,
-    FileBrowserModal,
-    FolderOpen,
-    Play,
-    Plus,
-    RotateCcw,
-    Shield,
-    Trash2,
-  },
-  props: {
-    modelValue: { type: Array, default: () => [] },
-    platform: String,
-    label: String,
-    description: String,
-    addLabel: String,
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      browserOpen: false,
-      browserTargetIndex: null,
-      browserTargetField: null,
-    };
-  },
-  computed: {
-    browserStartPath() {
-      if (this.browserTargetIndex === null) {
-        return '';
-      }
-      return this.modelValue[this.browserTargetIndex][this.browserTargetField] || '';
-    },
-  },
-  methods: {
-    addCmd() {
-      let template = {
-        do: "",
-        undo: "",
-      };
+const props = defineProps({
+  platform: String,
+  label: String,
+  description: String,
+  addLabel: String,
+})
 
-      if (this.platform === 'windows') {
-        template = { ...template, elevated: false };
-      }
-      this.modelValue.push(template);
-    },
-    removeCmd(index) {
-      this.modelValue.splice(index, 1);
-    },
-    browse(index, field) {
-      this.browserTargetIndex = index;
-      this.browserTargetField = field;
-      this.browserOpen = true;
-    },
-    onBrowserConfirm(path) {
-      this.modelValue[this.browserTargetIndex][this.browserTargetField] = path;
-    },
-  },
+const modelValue = defineModel({ type: Array, default: () => [] })
+
+const browserOpen = ref(false)
+const browserTargetIndex = ref(null)
+const browserTargetField = ref(null)
+
+const browserStartPath = computed(() => {
+  if (browserTargetIndex.value === null) {
+    return '';
+  }
+  return modelValue.value[browserTargetIndex.value][browserTargetField.value] || '';
+})
+
+function addCmd() {
+  let template = {
+    do: "",
+    undo: "",
+  };
+
+  if (props.platform === 'windows') {
+    template = { ...template, elevated: false };
+  }
+  modelValue.value = [...modelValue.value, template];
+}
+
+function removeCmd(index) {
+  const updated = [...modelValue.value];
+  updated.splice(index, 1);
+  modelValue.value = updated;
+}
+
+function browse(index, field) {
+  browserTargetIndex.value = index;
+  browserTargetField.value = field;
+  browserOpen.value = true;
+}
+
+function onBrowserConfirm(path) {
+  const updated = [...modelValue.value];
+  updated[browserTargetIndex.value] = { ...updated[browserTargetIndex.value], [browserTargetField.value]: path };
+  modelValue.value = updated;
 }
 </script>
diff --git a/src_assets/common/assets/web/src/components/Select.vue b/src_assets/common/assets/web/src/components/Select.vue
index c959ee13a2d..6953ed8798c 100644
--- a/src_assets/common/assets/web/src/components/Select.vue
+++ b/src_assets/common/assets/web/src/components/Select.vue
@@ -26,7 +26,7 @@ const props = defineProps({
   options: { type: [Array, Object], required: true },
 })
 
-const model = defineModel()
+const model = defineModel({ type: [String, Number] })
 
 // Normalizes to { slotName: options[] } for PlatformLayout.
 const optionsBySlot = computed(() => Array.isArray(props.options) ? { default: props.options } : props.options)
diff --git a/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
index 434364de799..1a84e2801e1 100644
--- a/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
@@ -76,5 +76,3 @@ defineExpose({ getOptions, getOptionsById })
   <SoftwareEncoder ref="sw" v-show="currentTab === 'sw'" :platform="platform" :config="config" />
 
 </template>
-
-<style scoped></style>

From 83819f6d65e4db827b81624707eb10c54d1e4464 Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sat, 29 Aug 2026 18:38:28 +0000
Subject: [PATCH 23/24] Adds CSRF token support to the UI

---
 src/confighttp.cpp                            | 14 ++++++--
 .../assets/web/src/utils/fetch_utils.js       | 36 +++++++++++++++++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/confighttp.cpp b/src/confighttp.cpp
index 9dc91fdc3d9..98eebd1b62e 100644
--- a/src/confighttp.cpp
+++ b/src/confighttp.cpp
@@ -1113,14 +1113,19 @@ namespace confighttp {
   }
 
   /**
-   * @brief Get a CSRF token for the authenticated user.
+   * @brief Get a CSRF token.
+   *
+   * No authentication required: login and initial setup need to fetch a token
+   * before a session exists. Still safe, since the Same-Origin Policy prevents
+   * a cross-origin page from ever reading the response.
+   *
    * @param response The HTTP response object.
    * @param request The HTTP request object.
    *
    * @api_examples{/api/csrf-token| GET| null}
    */
   void getCSRFToken(const resp_https_t &response, const req_https_t &request) {
-    if (!authenticate(response, request)) {
+    if (!check_origin_allowed(response, request)) {
       return;
     }
 
@@ -1819,6 +1824,11 @@ namespace confighttp {
       return;
     }
 
+    const std::string client_id = get_client_id(request);
+    if (!validate_csrf_token(response, request, client_id)) {
+      return;
+    }
+
     std::stringstream ss;
     ss << request->content.rdbuf();
     try {
diff --git a/src_assets/common/assets/web/src/utils/fetch_utils.js b/src_assets/common/assets/web/src/utils/fetch_utils.js
index 359dbcb156e..67c1d6f033b 100644
--- a/src_assets/common/assets/web/src/utils/fetch_utils.js
+++ b/src_assets/common/assets/web/src/utils/fetch_utils.js
@@ -7,17 +7,46 @@ import { authState } from '@/utils/auth'
  */
 const CSRF_ERRORS = new Set(['Missing CSRF token', 'Invalid CSRF token', 'CSRF token expired'])
 
+/**
+ * Cached in-flight/fetched CSRF token, shared across calls so concurrent requests
+ * don't each trigger their own GET /api/csrf-token. Cleared on a CSRF failure so
+ * the next request fetches a fresh one instead of retrying the same rejected token.
+ */
+let csrfTokenPromise = null
+
+function getCsrfToken() {
+  if (!csrfTokenPromise) {
+    csrfTokenPromise = fetch('./api/csrf-token')
+      .then(r => r.json())
+      .then(data => data.csrf_token)
+  }
+  return csrfTokenPromise
+}
+
 /**
  * Wrapper around the native fetch that automatically detects CSRF errors
  * (HTTP 400 with a known CSRF error message) and displays a notification,
  * and redirects to /login on a 401 (session expired or never established).
+ * State-changing requests (anything other than GET/HEAD) automatically fetch
+ * and attach an X-CSRF-Token header first.
  *
  * @param {string} url - The URL to fetch.
  * @param {RequestInit} [options] - Standard fetch options.
  * @returns {Promise<Response>} The fetch Response.
  */
-export async function apiFetch(url, options) {
-  const response = await fetch(url, options)
+export async function apiFetch(url, options = {}) {
+  const method = (options.method || 'GET').toUpperCase()
+  const needsCsrfToken = method !== 'GET' && method !== 'HEAD'
+
+  let response
+  if (needsCsrfToken) {
+    const token = await getCsrfToken()
+    const headers = new Headers(options.headers || {})
+    headers.set('X-CSRF-Token', token)
+    response = await fetch(url, { ...options, headers })
+  } else {
+    response = await fetch(url, options)
+  }
 
   if (response.status === 400) {
     let body = null
@@ -28,6 +57,9 @@ export async function apiFetch(url, options) {
     }
 
     if (body && CSRF_ERRORS.has(body.error)) {
+      // The cached token was rejected (missing/invalid/expired) - drop it so the
+      // next request fetches a fresh one instead of repeating the same failure.
+      csrfTokenPromise = null
       notifyKey.error('_common.csrf_error_desc', '_common.csrf_error')
     }
   }

From 086f71d677d41f58f31d00321eefb57f3abc9a0a Mon Sep 17 00:00:00 2001
From: Abhishek <theabhishekroy77@gmail.com>
Date: Sun, 30 Aug 2026 13:53:28 +0000
Subject: [PATCH 24/24] Fix restart logic with session auth

---
 src/confighttp.cpp                            |  4 ++
 .../web/src/views/TroubleshootingView.vue     | 54 +++++++++++--------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/confighttp.cpp b/src/confighttp.cpp
index 98eebd1b62e..10c9350862f 100644
--- a/src/confighttp.cpp
+++ b/src/confighttp.cpp
@@ -2068,6 +2068,10 @@ namespace confighttp {
 
     print_req(request);
 
+    nlohmann::json output_tree;
+    output_tree["status"] = true;
+    send_response(response, output_tree);
+
     // We may not return from this call
     platf::restart();
   }
diff --git a/src_assets/common/assets/web/src/views/TroubleshootingView.vue b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
index 6cee41554d3..90c25c1a500 100644
--- a/src_assets/common/assets/web/src/views/TroubleshootingView.vue
+++ b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
@@ -58,7 +58,8 @@
                 <td>
                   <div class="driver-release-state" :class="driverReleaseStateClass(virtualhid, virtualhidRelease)"
                     :title="driverReleaseStatusText(virtualhid, virtualhidRelease)" aria-live="polite">
-                    <refresh-cw v-if="virtualhidRelease.loading" :size="17" class="driver-release-spinning"></refresh-cw>
+                    <refresh-cw v-if="virtualhidRelease.loading" :size="17"
+                      class="driver-release-spinning"></refresh-cw>
                     <check-circle v-else-if="driverReleaseState(virtualhid, virtualhidRelease) === 'current'"
                       :size="17"></check-circle>
                     <alert-triangle v-else-if="driverReleaseState(virtualhid, virtualhidRelease) === 'outdated'"
@@ -66,7 +67,8 @@
                     <alert-circle v-else :size="17"></alert-circle>
                     <span>{{ driverLatestVersion(virtualhidRelease) }}</span>
                   </div>
-                  <small class="driver-release-detail">{{ driverReleaseStatusText(virtualhid, virtualhidRelease) }}</small>
+                  <small class="driver-release-detail">{{ driverReleaseStatusText(virtualhid, virtualhidRelease)
+                    }}</small>
                 </td>
                 <td>{{ virtualhid.supported_versions }}</td>
                 <td>
@@ -105,8 +107,8 @@
                   </span>
                 </td>
                 <td class="driver-download-column">
-                  <a class="btn btn-outline-primary driver-download-button" :href="vigembusRelease.url"
-                    target="_blank" rel="noopener noreferrer">
+                  <a class="btn btn-outline-primary driver-download-button" :href="vigembusRelease.url" target="_blank"
+                    rel="noopener noreferrer">
                     <download :size="17"></download>
                     {{ $t('troubleshooting.driver_download') }}
                   </a>
@@ -157,8 +159,8 @@
         </p>
 
         <div class="virtualhid-license-toolbar">
-          <button class="btn btn-secondary" type="button" :disabled="licenseBusy || !virtualhidLicense.service_available"
-            @click="updateLicense('validate')">
+          <button class="btn btn-secondary" type="button"
+            :disabled="licenseBusy || !virtualhidLicense.service_available" @click="updateLicense('validate')">
             <refresh-cw :size="18" :class="{ 'driver-release-spinning': licenseBusy }"></refresh-cw>
             {{ $t('troubleshooting.virtualhid_license_refresh') }}
           </button>
@@ -230,11 +232,8 @@
     <div class="card-body">
       <h2 id="restart">{{ $t('troubleshooting.restart_sunshine') }}</h2>
       <p>{{ $t('troubleshooting.restart_sunshine_desc') }}</p>
-      <AlertBox v-if="restartPressed === true" variant="success" compact>
-        {{ $t('troubleshooting.restart_sunshine_success') }}
-      </AlertBox>
       <div>
-        <button type="button" class="btn btn-warning" :disabled="restartPressed" @click="restart">
+        <button type="button" class="btn btn-warning" @click="restart">
           <refresh-cw :size="18" class="icon"></refresh-cw>
           {{ $t('troubleshooting.restart_sunshine') }}
         </button>
@@ -268,7 +267,8 @@
       <div class="alert alert-success d-flex align-items-center" v-if="showApplyMessage">
         <check-circle :size="18" class="icon"></check-circle>
         <div><b>{{ $t('_common.success') }}</b> {{ $t('troubleshooting.unpair_single_success') }}</div>
-        <button type="button" class="btn btn-success ms-auto" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
+        <button type="button" class="btn btn-success ms-auto" @click="clickedApplyBanner">{{ $t('_common.dismiss')
+          }}</button>
       </div>
       <AlertBox v-if="unpairAllStatus === true" variant="success" compact>
         {{ $t('troubleshooting.unpair_all_success') }}
@@ -353,6 +353,8 @@
 import AlertBox from '@/components/AlertBox.vue'
 import FeatureCard from '@/components/FeatureCard.vue'
 import { apiFetch } from '@/utils/fetch_utils'
+import { authState } from '@/utils/auth'
+import { notifyKey } from '@/components/Notification.vue'
 import {
   AlertCircle,
   AlertTriangle,
@@ -421,7 +423,6 @@ export default {
       licenseBusy: false,
       licenseError: '',
       licenseKey: '',
-      restartPressed: false,
       showApplyMessage: false,
       platform: "",
       controllerEnabled: false,
@@ -634,8 +635,9 @@ export default {
       apiFetch("./api/apps/close", {
         method: "POST",
         headers: {
-            "Content-Type": "application/json"
-        } })
+          "Content-Type": "application/json"
+        }
+      })
         .then((r) => r.json())
         .then((r) => {
           this.closeAppPressed = false;
@@ -650,9 +652,9 @@ export default {
       apiFetch("./api/clients/unpair-all", {
         method: "POST",
         headers: {
-            "Content-Type": "application/json"
+          "Content-Type": "application/json"
         }
-       })
+      })
         .then((r) => r.json())
         .then((r) => {
           this.unpairAllPressed = false;
@@ -720,16 +722,24 @@ export default {
       });
     },
     restart() {
-      this.restartPressed = true;
-      setTimeout(() => {
-        this.restartPressed = false;
-      }, 5000);
       apiFetch("./api/restart", {
         method: "POST",
         headers: {
-            "Content-Type": "application/json"
+          "Content-Type": "application/json"
         }
-      });
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          if (data.status) {
+            notifyKey.success('troubleshooting.restart_sunshine_success');
+          }
+        })
+        .catch(() => { })
+        .finally(() => {
+          // Session is gone after restart. Redirect to /login.
+          authState.authenticated = false;
+          this.$router.push('/login');
+        });
     },
     ddResetPersistence() {
       this.ddResetPressed = true;