From 239769a9c7dea09ec8cc8829bb677388cc5d4ca5 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Thu, 14 Sep 2023 22:13:26 +0200
Subject: [PATCH 01/82] Started Migration to Vue3 built by Vite

---
 package.json                                  |   6 +-
 src/confighttp.cpp                            |   6 +-
 src_assets/common/assets/web/apps.html        | 279 +++++------
 src_assets/common/assets/web/config.html      | 471 +++++-------------
 .../common/assets/web/header-no-nav.html      |   5 +-
 src_assets/common/assets/web/header.html      |  18 +-
 src_assets/common/assets/web/index.html       |  19 +-
 src_assets/common/assets/web/password.html    |   8 +-
 .../common/assets/web/troubleshooting.html    |   8 +-
 src_assets/common/assets/web/welcome.html     |  52 +-
 vite.config.js                                |  40 ++
 11 files changed, 316 insertions(+), 596 deletions(-)
 create mode 100644 vite.config.js

diff --git a/package.json b/package.json
index 76e3bec701c..d5caf30f2da 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,11 @@
 {
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.4.2",
+    "@popperjs/core": "^2.11.8",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vue/compat": "^3.3.4",
     "bootstrap": "5.3.1",
-    "vue": "2.6.12"
+    "vite": "^4.4.9",
+    "vue": "^3.1.0"
   }
 }
diff --git a/src/confighttp.cpp b/src/confighttp.cpp
index ba7c21ee942..5cde76c30bf 100644
--- a/src/confighttp.cpp
+++ b/src/confighttp.cpp
@@ -295,14 +295,14 @@ namespace confighttp {
   getNodeModules(resp_https_t response, req_https_t request) {
     print_req(request);
     fs::path webDirPath(WEB_DIR);
-    fs::path nodeModulesPath(webDirPath / "node_modules");
+    fs::path nodeModulesPath(webDirPath / "assets");
 
     // .relative_path is needed to shed any leading slash that might exist in the request path
     auto filePath = fs::weakly_canonical(webDirPath / fs::path(request->path).relative_path());
 
     // Don't do anything if file does not exist or is outside the node_modules directory
     if (!isChildPath(filePath, nodeModulesPath)) {
-      BOOST_LOG(warning) << "Someone requested a path " << filePath << " that is outside the node_modules folder";
+      BOOST_LOG(warning) << "Someone requested a path " << filePath << " that is outside the assets folder";
       response->write(SimpleWeb::StatusCode::client_error_bad_request, "Bad Request");
     }
     else if (!fs::exists(filePath)) {
@@ -757,7 +757,7 @@ namespace confighttp {
     server.resource["^/api/covers/upload$"]["POST"] = uploadCover;
     server.resource["^/images/favicon.ico$"]["GET"] = getFaviconImage;
     server.resource["^/images/logo-sunshine-45.png$"]["GET"] = getSunshineLogoImage;
-    server.resource["^/node_modules\\/.+$"]["GET"] = getNodeModules;
+    server.resource["^/assets\\/.+$"]["GET"] = getNodeModules;
     server.config.reuse_address = true;
     server.config.address = net::af_to_any_address_string(address_family);
     server.config.port = port_https;
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index f8257ccaf5b..b251968a5d0 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -31,13 +31,7 @@ <h1>Applications</h1>
       <!--name-->
       <div class="mb-3">
         <label for="appName" class="form-label">Application Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="appName"
-          aria-describedby="appNameHelp"
-          v-model="editForm.name"
-        />
+        <input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name" />
         <div id="appNameHelp" class="form-text">
           Application Name, as shown on Moonlight
         </div>
@@ -45,13 +39,8 @@ <h1>Applications</h1>
       <!--output-->
       <div class="mb-3">
         <label for="appOutput" class="form-label">Output</label>
-        <input
-          type="text"
-          class="form-control monospace"
-          id="appOutput"
-          aria-describedby="appOutputHelp"
-          v-model="editForm.output"
-        />
+        <input type="text" class="form-control monospace" id="appOutput" aria-describedby="appOutputHelp"
+          v-model="editForm.output" />
         <div id="appOutputHelp" class="form-text">
           The file where the output of the command is stored, if it is not
           specified, the output is ignored
@@ -59,14 +48,8 @@ <h1>Applications</h1>
       </div>
       <!--prep-cmd-->
       <div class="mb-3">
-        <label for="excludeGlobalPrep" class="form-label"
-          >Global Prep Commands</label
-        >
-        <select
-          id="excludeGlobalPrep"
-          class="form-select"
-          v-model="editForm['exclude-global-prep-cmd']"
-        >
+        <label for="excludeGlobalPrep" class="form-label">Global Prep Commands</label>
+        <select id="excludeGlobalPrep" class="form-select" v-model="editForm['exclude-global-prep-cmd']">
           <option v-for="val in [false, true]" :value="val">
             {{ !val ? 'Enabled' : 'Disabled' }}
           </option>
@@ -82,10 +65,7 @@ <h1>Applications</h1>
           A list of commands to be run before/after this application.<br />
           If any of the prep-commands fail, starting the application is aborted.
         </div>
-        <div
-          class="d-flex justify-content-start mb-3 mt-3"
-          v-if="editForm['prep-cmd'].length === 0"
-        >
+        <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">
             <i class="fas fa-plus mr-1"></i> Add Commands
           </button>
@@ -104,39 +84,20 @@ <h1>Applications</h1>
           <tbody>
             <tr v-for="(c, i) in editForm['prep-cmd']">
               <td>
-                <input
-                  type="text"
-                  class="form-control monospace"
-                  v-model="c.do"
-                />
+                <input type="text" class="form-control monospace" v-model="c.do" />
               </td>
               <td>
-                <input
-                  type="text"
-                  class="form-control monospace"
-                  v-model="c.undo"
-                />
+                <input type="text" class="form-control monospace" v-model="c.undo" />
               </td>
               <td v-if="platform === 'windows'">
                 <div class="form-check">
-                  <input
-                    type="checkbox"
-                    class="form-check-input"
-                    :id="'prep-cmd-admin-' + i"
-                    v-model="c.elevated"
-                    true-value="true"
-                    false-value="false"
-                  />
-                  <label :for="'prep-cmd-admin-' + i" class="form-check-label"
-                    >Elevated</label
-                  >
+                  <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
+                    true-value="true" false-value="false" />
+                  <label :for="'prep-cmd-admin-' + i" class="form-check-label">Elevated</label>
                 </div>
               </td>
               <td>
-                <button
-                  class="btn btn-danger"
-                  @click="$delete(editForm['prep-cmd'], i)"
-                >
+                <button class="btn btn-danger" @click="$delete(editForm['prep-cmd'], i)">
                   <i class="fas fa-trash"></i>
                 </button>
                 <button class="btn btn-success" @click="addPrepCmd">
@@ -150,28 +111,15 @@ <h1>Applications</h1>
       <!--detatched-->
       <div class="mb-3">
         <label for="appName" class="form-label">Detached Commands</label>
-        <div
-          v-for="(c,i) in editForm.detached"
-          class="d-flex justify-content-between my-2"
-        >
+        <div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2">
           <pre>{{c}}</pre>
-          <button
-            class="btn btn-danger mx-2"
-            @click="editForm.detached.splice(i,1)"
-          >
+          <button class="btn btn-danger mx-2" @click="editForm.detached.splice(i,1)">
             &times;
           </button>
         </div>
         <div class="d-flex justify-content-between">
-          <input
-            type="text"
-            class="form-control monospace"
-            v-model="detachedCmd"
-          />
-          <button
-            class="btn btn-success mx-2"
-            @click="editForm.detached.push(detachedCmd);detachedCmd = '';"
-          >
+          <input type="text" class="form-control monospace" v-model="detachedCmd" />
+          <button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">
             +
           </button>
         </div>
@@ -182,13 +130,8 @@ <h1>Applications</h1>
       <!--command-->
       <div class="mb-3">
         <label for="appCmd" class="form-label">Command</label>
-        <input
-          type="text"
-          class="form-control monospace"
-          id="appCmd"
-          aria-describedby="appCmdHelp"
-          v-model="editForm.cmd"
-        />
+        <input type="text" class="form-control monospace" id="appCmd" aria-describedby="appCmdHelp"
+          v-model="editForm.cmd" />
         <div id="appCmdHelp" class="form-text">
           The main application, if it is not specified, a process is started
           that sleeps indefinitely
@@ -197,13 +140,8 @@ <h1>Applications</h1>
       <!--working dir-->
       <div class="mb-3">
         <label for="appWorkingDir" class="form-label">Working Directory</label>
-        <input
-          type="text"
-          class="form-control monospace"
-          id="appWorkingDir"
-          aria-describedby="appWorkingDirHelp"
-          v-model="editForm['working-dir']"
-        />
+        <input type="text" class="form-control monospace" id="appWorkingDir" aria-describedby="appWorkingDirHelp"
+          v-model="editForm['working-dir']" />
         <div id="appWorkingDirHelp" class="form-text">
           The working directory that should be passed to the process. For
           example, some applications use the working directory to search for
@@ -213,17 +151,9 @@ <h1>Applications</h1>
       </div>
       <!-- elevation -->
       <div class="mb-3 form-check" v-if="platform === 'windows'">
-        <label for="appElevation" class="form-check-label"
-          >Run as administrator</label
-        >
-        <input
-          type="checkbox"
-          class="form-check-input"
-          id="appElevation"
-          v-model="editForm.elevated"
-          true-value="true"
-          false-value="false"
-        />
+        <label for="appElevation" class="form-check-label">Run as administrator</label>
+        <input type="checkbox" class="form-check-input" id="appElevation" v-model="editForm.elevated" true-value="true"
+          false-value="false" />
         <div class="form-text">
           This can be necessary for some applications that require administrator
           permissions to run properly.
@@ -233,59 +163,30 @@ <h1>Applications</h1>
       <div class="mb-3">
         <label for="appImagePath" class="form-label">Image</label>
         <div class="input-group dropup">
-          <input
-            type="text"
-            class="form-control monospace"
-            id="appImagePath"
-            aria-describedby="appImagePathHelp"
-            v-model="editForm['image-path']"
-          />
-          <button
-            class="btn btn-secondary dropdown-toggle"
-            type="button"
-            id="findCoverToggle"
-            data-bs-toggle="dropdown"
-            data-bs-auto-close="outside"
-            aria-expanded="false"
-            v-dropdown-show="showCoverFinder"
-            ref="coverFinderDropdown"
-          >
+          <input type="text" class="form-control monospace" id="appImagePath" aria-describedby="appImagePathHelp"
+            v-model="editForm['image-path']" />
+          <button class="btn btn-secondary dropdown-toggle" type="button" id="findCoverToggle" data-bs-toggle="dropdown"
+            data-bs-auto-close="outside" aria-expanded="false" v-dropdown-show="showCoverFinder"
+            ref="coverFinderDropdown">
             Find Cover
           </button>
-          <div
-            class="dropdown-menu dropdown-menu-end w-50 cover-finder overflow-hidden"
-            aria-labelledby="findCoverToggle"
-          >
+          <div class="dropdown-menu dropdown-menu-end w-50 cover-finder overflow-hidden"
+            aria-labelledby="findCoverToggle">
             <div class="modal-header">
               <h4 class="modal-title">Covers Found</h4>
-              <button
-                type="button"
-                class="btn-close"
-                aria-label="Close"
-                @click="closeCoverFinder"
-              ></button>
+              <button type="button" class="btn-close" aria-label="Close" @click="closeCoverFinder"></button>
             </div>
-            <div
-              class="modal-body cover-results px-3 pt-3"
-              :class="{ busy: coverFinderBusy }"
-            >
+            <div class="modal-body cover-results px-3 pt-3" :class="{ busy: coverFinderBusy }">
               <div class="row">
-                <div
-                  v-if="coverSearching"
-                  class="col-12 col-sm-6 col-lg-4 mb-3"
-                >
+                <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">Loading...</span>
                     </div>
                   </div>
                 </div>
-                <div
-                  v-for="(cover,i) in coverCandidates"
-                  :key="'i'"
-                  class="col-12 col-sm-6 col-lg-4 mb-3"
-                  @click="useCover(cover)"
-                >
+                <div v-for="(cover,i) in coverCandidates" :key="'i'" class="col-12 col-sm-6 col-lg-4 mb-3"
+                  @click="useCover(cover)">
                   <div class="cover-container result">
                     <img class="rounded" :src="cover.url" />
                   </div>
@@ -303,24 +204,67 @@ <h4 class="modal-title">Covers Found</h4>
         </div>
       </div>
       <div class="env-hint">
-        <div class="form-text"><b>About Environment Variables: </b> All commands get these environment variables by default: </div>
+        <div class="form-text"><b>About Environment Variables: </b> All commands get these environment variables by
+          default: </div>
         <table>
-          <tr><td><b>Var Name</b></td><td><b></b></td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_APP_ID</td><td>App ID</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_APP_NAME</td><td>App Name</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_WIDTH</td><td>The Width requested by the client</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_HEIGHT</td><td>The Height requested by the client</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_FPS</td><td>The FPS requested by the client</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_HDR</td><td>(true/false) if HDR is enabled by the client</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_GCMAP</td><td>(int) the requested gamepad mask, in a bitset/bitfield format</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_HOST_AUDIO</td><td>(true/false) if the client has requested host audio</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_ENABLE_SOPS</td><td>(true/false) if the client has requested the option to optimize the game for optimal streaming</td></tr>
-          <tr><td style="font-family: monospace">SUNSHINE_CLIENT_AUDIO_CONFIGURATION</td><td>The Audio Configuration requested by the client (2.0/5.1/7.1)</td></tr>
+          <tr>
+            <td><b>Var Name</b></td>
+            <td><b></b></td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_APP_ID</td>
+            <td>App ID</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_APP_NAME</td>
+            <td>App Name</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_WIDTH</td>
+            <td>The Width requested by the client</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_HEIGHT</td>
+            <td>The Height requested by the client</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_FPS</td>
+            <td>The FPS requested by the client</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_HDR</td>
+            <td>(true/false) if HDR is enabled by the client</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_GCMAP</td>
+            <td>(int) the requested gamepad mask, in a bitset/bitfield format</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_HOST_AUDIO</td>
+            <td>(true/false) if the client has requested host audio</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_ENABLE_SOPS</td>
+            <td>(true/false) if the client has requested the option to optimize the game for optimal streaming</td>
+          </tr>
+          <tr>
+            <td style="font-family: monospace">SUNSHINE_CLIENT_AUDIO_CONFIGURATION</td>
+            <td>The Audio Configuration requested by the client (2.0/5.1/7.1)</td>
+          </tr>
         </table>
-        <div class="form-text" v-if="platform === 'windows'"><b>Example - QRes for Resolution Automation:</b> <pre>cmd /C &lt;qres path&gt;\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT%</pre></div>
-        <div class="form-text" v-else-if="platform === 'linux'"><b>Example - Xrandr for Resolution Automation:</b> <pre>sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate 60"</pre></div>
-        <div class="form-text" v-else-if="platform === 'macos'"><b>Example - displayplacer for Resolution Automation:</b> <pre>sh -c "displayplacer "id:<screenId> res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:60 scaling:on origin:(0,0) degree:0""</pre></div>
-        <div class="form-text"><a href="https://docs.lizardbyte.dev/projects/sunshine/en/latest/about/guides/app_examples.html" target="_blank">See More</a></div>
+        <div class="form-text" v-if="platform === 'windows'"><b>Example - QRes for Resolution Automation:</b>
+          <pre>cmd /C &lt;qres path&gt;\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT%</pre>
+        </div>
+        <div class="form-text" v-else-if="platform === 'linux'"><b>Example - Xrandr for Resolution Automation:</b>
+          <pre>sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate 60"</pre>
+        </div>
+        <div class="form-text" v-else-if="platform === 'macos'"><b>Example - displayplacer for Resolution
+            Automation:</b>
+          <pre>sh -c "displayplacer "id:<screenId> res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:60 scaling:on origin:(0,0) degree:0""</pre>
+        </div>
+        <div class="form-text"><a
+            href="https://docs.lizardbyte.dev/projects/sunshine/en/latest/about/guides/app_examples.html"
+            target="_blank">See More</a></div>
       </div>
       <!--buttons-->
       <div class="d-flex">
@@ -337,15 +281,9 @@ <h4 class="modal-title">Covers Found</h4>
     </button>
   </div>
 </div>
-<script>
-  Vue.directive('dropdown-show', {
-    bind: function (el, binding) {
-      el.addEventListener('show.bs.dropdown', binding.value);
-    }
-  });
-
-  new Vue({
-    el: "#app",
+<script type="module">
+  import { createApp } from 'vue';
+  const app = createApp({
     data() {
       return {
         apps: [],
@@ -365,7 +303,7 @@ <h4 class="modal-title">Covers Found</h4>
           console.log(r);
           this.apps = r.apps;
         });
-      
+
       fetch("/api/config")
         .then(r => r.json())
         .then(r => this.platform = r.platform);
@@ -395,7 +333,7 @@ <h4 class="modal-title">Covers Found</h4>
           this.$set(this.editForm, "detached", []);
         if (this.editForm["exclude-global-prep-cmd"] === undefined)
           this.$set(this.editForm, "exclude-global-prep-cmd", false);
-        if(this.editForm["elevated"] === undefined && this.platform === 'windows'){
+        if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
           this.$set(this.editForm, "elevated", false);
         }
         this.showEditForm = true;
@@ -416,8 +354,8 @@ <h4 class="modal-title">Covers Found</h4>
           undo: ""
         };
 
-        if(this.platform === 'windows'){
-          template = {...template, elevated: false};
+        if (this.platform === 'windows') {
+          template = { ...template, elevated: false };
         }
 
         this.editForm["prep-cmd"].push(template);
@@ -512,6 +450,15 @@ <h4 class="modal-title">Covers Found</h4>
       },
     },
   });
+
+  app.directive('dropdown-show', {
+    bind: function (el, binding) {
+      el.addEventListener('show.bs.dropdown', binding.value);
+    }
+  });
+
+  app.mount("#app")
+
 </script>
 
 <style>
@@ -523,8 +470,7 @@ <h4 class="modal-title">Covers Found</h4>
     font-family: monospace;
   }
 
-  .cover-finder {
-  }
+  .cover-finder {}
 
   .cover-finder .cover-results {
     max-height: 400px;
@@ -573,5 +519,4 @@ <h4 class="modal-title">Covers Found</h4>
   td {
     padding: 0 0.5em;
   }
-
-</style>
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index d85004cdbcd..fe3044b95c8 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -4,13 +4,8 @@ <h1 class="my-4">Configuration</h1>
     <!--Header-->
     <ul class="nav nav-tabs">
       <li class="nav-item" v-for="tab in tabs" :key="tab.id">
-        <a
-          class="nav-link"
-          :class="{'active': tab.id === currentTab}"
-          href="#"
-          @click="currentTab = tab.id"
-          >{{tab.name}}</a
-        >
+        <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+          @click="currentTab = tab.id">{{tab.name}}</a>
       </li>
     </ul>
     <!--General Tab-->
@@ -18,13 +13,8 @@ <h1 class="my-4">Configuration</h1>
       <!--Sunshine Name-->
       <div class="mb-3">
         <label for="sunshine_name" class="form-label">Sunshine Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="sunshine_name"
-          placeholder="Sunshine"
-          v-model="config.sunshine_name"
-        />
+        <input type="text" class="form-control" id="sunshine_name" placeholder="Sunshine"
+          v-model="config.sunshine_name" />
         <div class="form-text">
           The name displayed by Moonlight. If not specified, the PC's hostname is used
         </div>
@@ -32,11 +22,7 @@ <h1 class="my-4">Configuration</h1>
       <!--Log Level-->
       <div class="mb-3">
         <label for="min_log_level" class="form-label">Log Level</label>
-        <select
-          id="min_log_level"
-          class="form-select"
-          v-model="config.min_log_level"
-        >
+        <select id="min_log_level" class="form-select" v-model="config.min_log_level">
           <option value="0">Verbose</option>
           <option value="1">Debug</option>
           <option value="2">Info</option>
@@ -52,27 +38,15 @@ <h1 class="my-4">Configuration</h1>
       <!--Log Path-->
       <div class="mb-3">
         <label for="log_path" class="form-label">Logfile Path</label>
-        <input
-          type="text"
-          class="form-control"
-          id="log_path"
-          placeholder="sunshine.log"
-          v-model="config.log_path"
-        />
+        <input type="text" class="form-control" id="log_path" placeholder="sunshine.log" v-model="config.log_path" />
         <div class="form-text">
           The file where the current logs of Sunshine are stored.
         </div>
       </div>
       <!--Origin Web UI Allowed-->
       <div class="mb-3">
-        <label for="origin_web_ui_allowed" class="form-label"
-          >Origin Web UI Allowed</label
-        >
-        <select
-          id="origin_web_ui_allowed"
-          class="form-select"
-          v-model="config.origin_web_ui_allowed"
-        >
+        <label for="origin_web_ui_allowed" class="form-label">Origin Web UI Allowed</label>
+        <select id="origin_web_ui_allowed" class="form-select" v-model="config.origin_web_ui_allowed">
           <option value="pc">Only localhost may access Web UI</option>
           <option value="lan">Only those in LAN may access Web UI</option>
           <option value="wan">Anyone may access Web UI</option>
@@ -103,54 +77,27 @@ <h1 class="my-4">Configuration</h1>
       <!--Ping Timeout-->
       <div class="mb-3">
         <label for="ping_timeout" class="form-label">Ping Timeout</label>
-        <input
-          type="text"
-          class="form-control"
-          id="ping_timeout"
-          placeholder="10000"
-          v-model="config.ping_timeout"
-        />
+        <input type="text" class="form-control" id="ping_timeout" placeholder="10000" v-model="config.ping_timeout" />
         <div class="form-text">
           How long to wait in milliseconds for data from moonlight before shutting down the stream
         </div>
       </div>
       <!--Advertised FPS and Resolutions-->
       <div class="mb-3">
-        <label for="ping_timeout" class="form-label"
-          >Advertised Resolutions and FPS</label
-        >
+        <label for="ping_timeout" class="form-label">Advertised Resolutions and FPS</label>
         <div class="resolutions-container">
           <label>Resolutions</label>
           <div class="resolutions d-flex flex-wrap">
-            <div
-              class="p-2 ms-item m-2 d-flex justify-content-between"
-              v-for="(r,i) in resolutions"
-              :key="r"
-            >
+            <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(r,i) in resolutions" :key="r">
               <span class="px-2">{{r}}</span>
-              <span style="cursor: pointer" @click="resolutions.splice(i,1)"
-                >&times;</span
-              >
+              <span style="cursor: pointer" @click="resolutions.splice(i,1)">&times;</span>
             </div>
-            <form
-              @submit.prevent="resolutions.push(resIn);resIn = '';"
-              class="d-flex align-items-center"
-            >
-              <input
-                type="text"
-                v-model="resIn"
-                required
-                pattern="[0-9]+x[0-9]+"
-                style="
+            <form @submit.prevent="resolutions.push(resIn);resIn = '';" class="d-flex align-items-center">
+              <input type="text" v-model="resIn" required pattern="[0-9]+x[0-9]+" style="
                   border-top-right-radius: 0;
                   border-bottom-right-radius: 0;
-                "
-                class="form-control"
-              />
-              <button
-                style="border-top-left-radius: 0; border-bottom-left-radius: 0"
-                class="btn btn-success"
-              >
+                " class="form-control" />
+              <button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
                 +
               </button>
             </form>
@@ -159,36 +106,17 @@ <h1 class="my-4">Configuration</h1>
         <div class="fps-container">
           <label>FPS</label>
           <div class="fps d-flex flex-wrap">
-            <div
-              class="p-2 ms-item m-2 d-flex justify-content-between"
-              v-for="(f,i) in fps"
-              :key="f"
-            >
+            <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(f,i) in fps" :key="f">
               <span class="px-2">{{f}}</span>
-              <span style="cursor: pointer" @click="fps.splice(i,1)"
-                >&times;</span
-              >
+              <span style="cursor: pointer" @click="fps.splice(i,1)">&times;</span>
             </div>
-            <form
-              @submit.prevent="fps.push(fpsIn);fpsIn = '';"
-              class="d-flex align-items-center"
-            >
-              <input
-                type="text"
-                v-model="fpsIn"
-                required
-                pattern="[0-9]+"
-                style="
+            <form @submit.prevent="fps.push(fpsIn);fpsIn = '';" class="d-flex align-items-center">
+              <input type="text" v-model="fpsIn" required pattern="[0-9]+" style="
                   width: 6ch;
                   border-top-right-radius: 0;
                   border-bottom-right-radius: 0;
-                "
-                class="form-control"
-              />
-              <button
-                style="border-top-left-radius: 0; border-bottom-left-radius: 0"
-                class="btn btn-success"
-              >
+                " class="form-control" />
+              <button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
                 +
               </button>
             </form>
@@ -203,14 +131,8 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!-- Mapping Key AltRight to Key Windows -->
       <div class="mb-3">
-        <label for="mapkey" class="form-label"
-          >Map Right Alt key to Windows key</label
-        >
-        <select
-          id="mapkey"
-          class="form-select"
-          v-model="config.key_rightalt_to_key_win"
-        >
+        <label for="mapkey" class="form-label">Map Right Alt key to Windows key</label>
+        <select id="mapkey" class="form-select" v-model="config.key_rightalt_to_key_win">
           <option value="disabled">Disabled</option>
           <option value="enabled">Enabled</option>
         </select>
@@ -223,7 +145,7 @@ <h1 class="my-4">Configuration</h1>
       <div class="mb-3 d-flex flex-column">
         <label class="form-label">Command Preparations</label>
         <div class="form-text">
-          Configure a list of commands to be executed before or after running any application. 
+          Configure a list of commands to be executed before or after running any application.
           If any of the specified preparation commands fail, the application launch process will be aborted.
         </div>
         <table class="table" v-if="global_prep_cmd.length > 0">
@@ -247,17 +169,9 @@ <h1 class="my-4">Configuration</h1>
               </td>
               <td v-if="platform === 'windows'">
                 <div class="form-check">
-                  <input
-                    type="checkbox"
-                    class="form-check-input"
-                    :id="'prep-cmd-admin-' + i"
-                    v-model="c.elevated"
-                    true-value="true"
-                    false-value="false"
-                  />
-                  <label :for="'prep-cmd-admin-' + i" class="form-check-label"
-                    >Elevated</label
-                  >
+                  <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
+                    true-value="true" false-value="false" />
+                  <label :for="'prep-cmd-admin-' + i" class="form-check-label">Elevated</label>
                 </div>
               </td>
               <td>
@@ -270,7 +184,7 @@ <h1 class="my-4">Configuration</h1>
               </td>
             </tr>
           </tbody>
-        </table>              
+        </table>
         <button class="mt-2 btn btn-success" style="margin: 0 auto" @click="add_global_prep_cmd">
           &plus; Add
         </button>
@@ -281,25 +195,13 @@ <h1 class="my-4">Configuration</h1>
       <!--Private Key-->
       <div class="mb-3">
         <label for="pkey" class="form-label">Private Key</label>
-        <input
-          type="text"
-          class="form-control"
-          id="pkey"
-          placeholder="/dir/pkey.pem"
-          v-model="config.pkey"
-        />
+        <input type="text" class="form-control" id="pkey" placeholder="/dir/pkey.pem" v-model="config.pkey" />
         <div class="form-text">The private key must be 2048 bits</div>
       </div>
       <!--Cert-->
       <div class="mb-3">
         <label for="cert" class="form-label">Cert</label>
-        <input
-          type="text"
-          class="form-control"
-          id="cert"
-          placeholder="/dir/cert.pem"
-          v-model="config.cert"
-        />
+        <input type="text" class="form-control" id="cert" placeholder="/dir/cert.pem" v-model="config.cert" />
         <div class="form-text">
           The certificate must be signed with a 2048 bit key
         </div>
@@ -308,13 +210,8 @@ <h1 class="my-4">Configuration</h1>
       <!--State File-->
       <div class="mb-3">
         <label for="file_state" class="form-label">State File</label>
-        <input
-          type="text"
-          class="form-control"
-          id="file_state"
-          placeholder="sunshine_state.json"
-          v-model="config.file_state"
-        />
+        <input type="text" class="form-control" id="file_state" placeholder="sunshine_state.json"
+          v-model="config.file_state" />
         <div class="form-text">
           The file where current state of Sunshine is stored
         </div>
@@ -322,13 +219,7 @@ <h1 class="my-4">Configuration</h1>
       <!--Apps File-->
       <div class="mb-3">
         <label for="file_apps" class="form-label">Apps File</label>
-        <input
-          type="text"
-          class="form-control"
-          id="file_apps"
-          placeholder="apps.json"
-          v-model="config.file_apps"
-        />
+        <input type="text" class="form-control" id="file_apps" placeholder="apps.json" v-model="config.file_apps" />
         <div class="form-text">
           The file where current apps of Sunshine are stored
         </div>
@@ -337,31 +228,20 @@ <h1 class="my-4">Configuration</h1>
     <div v-if="currentTab === 'input'" class="config-page">
       <!--Home/Guide Button Emulation Timeout-->
       <div class="mb-3">
-        <label for="back_button_timeout" class="form-label"
-          >Home/Guide Button Emulation Timeout</label
-        >
-        <input
-          type="text"
-          class="form-control"
-          id="back_button_timeout"
-          placeholder="-1"
-          v-model="config.back_button_timeout"
-        />
+        <label for="back_button_timeout" class="form-label">Home/Guide Button Emulation Timeout</label>
+        <input type="text" class="form-control" id="back_button_timeout" placeholder="-1"
+          v-model="config.back_button_timeout" />
         <div class="form-text">
-          If the Back/Select button is held down for the specified number of milliseconds, a Home/Guide button press is emulated.<br />
-          If set to a value &lt; 0 (default), holding the Back/Select button will not emulate the Home/Guide button.<br />
+          If the Back/Select button is held down for the specified number of milliseconds, a Home/Guide button press is
+          emulated.<br />
+          If set to a value &lt; 0 (default), holding the Back/Select button will not emulate the Home/Guide
+          button.<br />
         </div>
       </div>
       <!--Enable Mouse Input-->
       <div class="mb-3">
-        <label for="mouse" class="form-label"
-          >Enable Mouse Input</label
-        >
-        <select
-          id="mouse"
-          class="form-select"
-          v-model="config.mouse"
-        >
+        <label for="mouse" class="form-label">Enable Mouse Input</label>
+        <select id="mouse" class="form-select" v-model="config.mouse">
           <option value="disabled">Disabled</option>
           <option value="enabled">Enabled</option>
         </select>
@@ -371,14 +251,8 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!--Enable Keyboard Input-->
       <div class="mb-3">
-        <label for="keyboard" class="form-label"
-          >Enable Keyboard Input</label
-        >
-        <select
-          id="keyboard"
-          class="form-select"
-          v-model="config.keyboard"
-        >
+        <label for="keyboard" class="form-label">Enable Keyboard Input</label>
+        <select id="keyboard" class="form-select" v-model="config.keyboard">
           <option value="disabled">Disabled</option>
           <option value="enabled">Enabled</option>
         </select>
@@ -388,14 +262,8 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!--Enable Gamepad Input-->
       <div class="mb-3">
-        <label for="gamepad" class="form-label"
-          >Enable Gamepad Input</label
-        >
-        <select
-          id="gamepad"
-          class="form-select"
-          v-model="config.controller"
-        >
+        <label for="gamepad" class="form-label">Enable Gamepad Input</label>
+        <select id="gamepad" class="form-select" v-model="config.controller">
           <option value="disabled">Disabled</option>
           <option value="enabled">Enabled</option>
         </select>
@@ -405,16 +273,9 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!-- Key Repeat Delay-->
       <div class="mb-3" v-if="platform === 'windows'">
-        <label for="key_repeat_delay" class="form-label"
-          >Key Repeat Delay</label
-        >
-        <input
-          type="text"
-          class="form-control"
-          id="key_repeat_delay"
-          placeholder="500"
-          v-model="config.key_repeat_delay"
-        />
+        <label for="key_repeat_delay" class="form-label">Key Repeat Delay</label>
+        <input type="text" class="form-control" id="key_repeat_delay" placeholder="500"
+          v-model="config.key_repeat_delay" />
         <div class="form-text">
           Control how fast keys will repeat themselves<br />
           The initial delay in milliseconds before repeating keys
@@ -422,16 +283,9 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!-- Key Repeat Frequency-->
       <div class="mb-3" v-if="platform === 'windows'">
-        <label for="key_repeat_frequency" class="form-label"
-          >Key Repeat Frequency</label
-        >
-        <input
-          type="text"
-          class="form-control"
-          id="key_repeat_frequency"
-          placeholder="24.9"
-          v-model="config.key_repeat_frequency"
-        />
+        <label for="key_repeat_frequency" class="form-label">Key Repeat Frequency</label>
+        <input type="text" class="form-control" id="key_repeat_frequency" placeholder="24.9"
+          v-model="config.key_repeat_frequency" />
         <div class="form-text">
           How often keys repeat every second<br />
           This configurable option supports decimals
@@ -439,14 +293,8 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!-- Always send scancodes -->
       <div class="mb-3" v-if="platform === 'windows'">
-        <label for="always_send_scancodes" class="form-label"
-          >Always Send Scancodes</label
-        >
-        <select
-          id="always_send_scancodes"
-          class="form-select"
-          v-model="config.always_send_scancodes"
-        >
+        <label for="always_send_scancodes" class="form-label">Always Send Scancodes</label>
+        <select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
           <option value="disabled">Disabled</option>
           <option value="enabled">Enabled</option>
         </select>
@@ -464,29 +312,20 @@ <h1 class="my-4">Configuration</h1>
       <!--Audio Sink-->
       <div class="mb-3" v-if="platform === 'windows'">
         <label for="audio_sink" class="form-label">Audio Sink</label>
-        <input
-          type="text"
-          class="form-control"
-          id="audio_sink"
-          placeholder="Speakers (High Definition Audio Device)"
-          v-model="config.audio_sink"
-        />
+        <input type="text" class="form-control" id="audio_sink" placeholder="Speakers (High Definition Audio Device)"
+          v-model="config.audio_sink" />
         <div class="form-text">
           Manually specify a specific audio device to capture. If unset, the device is chosen automatically.<br />
           <b>We strongly recommend leaving this field blank to use automatic device selection!</b><br />
-          If you have multiple audio devices with identical names, you can get the Device ID using the following command:<br />
+          If you have multiple audio devices with identical names, you can get the Device ID using the following
+          command:<br />
           <pre>tools\audio-info.exe</pre>
         </div>
       </div>
       <div class="mb-3" v-if="platform === 'linux'">
         <label for="audio_sink" class="form-label">Audio Sink</label>
-        <input
-          type="text"
-          class="form-control"
-          id="audio_sink"
-          placeholder="alsa_output.pci-0000_09_00.3.analog-stereo"
-          v-model="config.audio_sink"
-        />
+        <input type="text" class="form-control" id="audio_sink" placeholder="alsa_output.pci-0000_09_00.3.analog-stereo"
+          v-model="config.audio_sink" />
         <div class="form-text">
           The name of the audio sink used for Audio Loopback<br />
           If you do not specify this variable, pulseaudio will select the default monitor device.<br />
@@ -499,23 +338,14 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <div class="mb-3" v-if="platform === 'macos'">
         <label for="audio_sink" class="form-label">Audio Sink</label>
-        <input
-          type="text"
-          class="form-control"
-          id="audio_sink"
-          placeholder="BlackHole 2ch"
-          v-model="config.audio_sink"
-        />
+        <input type="text" class="form-control" id="audio_sink" placeholder="BlackHole 2ch"
+          v-model="config.audio_sink" />
         <div class="form-text">
           The name of the audio sink used for Audio Loopback<br />
           Sunshine can only access microphones on macOS due to system limitations.<br />
-          To stream system audio using <a
-            href="https://github.com/mattingalls/Soundflower"
-            target="_blank">
+          To stream system audio using <a href="https://github.com/mattingalls/Soundflower" target="_blank">
             Soundflower
-          </a> or <a
-            href="https://github.com/ExistentialAudio/BlackHole"
-            target="_blank">
+          </a> or <a href="https://github.com/ExistentialAudio/BlackHole" target="_blank">
             BlackHole
           </a>.
         </div>
@@ -523,13 +353,8 @@ <h1 class="my-4">Configuration</h1>
       <!--Virtual Sink-->
       <div class="mb-3" v-if="platform === 'windows'">
         <label for="virtual_sink" class="form-label">Virtual Sink</label>
-        <input
-          type="text"
-          class="form-control"
-          id="virtual_sink"
-          placeholder="Steam Streaming Speakers"
-          v-model="config.virtual_sink"
-        />
+        <input type="text" class="form-control" id="virtual_sink" placeholder="Steam Streaming Speakers"
+          v-model="config.virtual_sink" />
         <div class="form-text">
           Manually specify a virtual audio device to use. If unset, the device is chosen automatically.<br />
           <b>We strongly recommend leaving this field blank to use automatic device selection!</b><br />
@@ -550,13 +375,8 @@ <h1 class="my-4">Configuration</h1>
       <!--Adapter Name -->
       <div class="mb-3" v-if="platform === 'windows'">
         <label for="adapter_name" class="form-label">Adapter Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="adapter_name"
-          placeholder="Radeon RX 580 Series"
-          v-model="config.adapter_name"
-        />
+        <input type="text" class="form-control" id="adapter_name" placeholder="Radeon RX 580 Series"
+          v-model="config.adapter_name" />
         <div class="form-text" v-if="platform === 'windows'">
           Manually specify a GPU to use for capture. If unset, the GPU is chosen automatically.<br />
           <b>We strongly recommend leaving this field blank to use automatic GPU selection!</b><br />
@@ -568,13 +388,8 @@ <h1 class="my-4">Configuration</h1>
       <!--Output Name -->
       <div class="mb-3" v-if="platform === 'windows'">
         <label for="output_name" class="form-label">Output Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="output_name"
-          placeholder="\\.\DISPLAY1"
-          v-model="config.output_name"
-        />
+        <input type="text" class="form-control" id="output_name" placeholder="\\.\DISPLAY1"
+          v-model="config.output_name" />
         <div class="form-text">
           Manually specify a display to use for capture. If unset, the primary display is captured.<br />
           Note: If you specified a GPU above, this display must be connected to that GPU.<br />
@@ -584,13 +399,7 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <div class="mb-3" v-if="platform === 'linux'">
         <label for="output_name" class="form-label">Monitor number</label>
-        <input
-          type="text"
-          class="form-control"
-          id="output_name"
-          placeholder="0"
-          v-model="config.output_name"
-        />
+        <input type="text" class="form-control" id="output_name" placeholder="0" v-model="config.output_name" />
         <div class="form-text">
           During Sunshine startup, you should see the list of detected monitors, e.g.:<br />
           <br />
@@ -610,11 +419,7 @@ <h1 class="my-4">Configuration</h1>
       <!--Address family-->
       <div class="mb-3">
         <label for="address_family" class="form-label">Address Family</label>
-        <select
-          id="address_family"
-          class="form-select"
-          v-model="config.address_family"
-        >
+        <select id="address_family" class="form-select" v-model="config.address_family">
           <option value="ipv4">IPv4 only</option>
           <option value="both">IPv4+IPv6</option>
         </select>
@@ -623,27 +428,14 @@ <h1 class="my-4">Configuration</h1>
       <!--Port family-->
       <div class="mb-3">
         <label for="port" class="form-label">Port</label>
-        <input
-          type="number"
-          min="0"
-          max="65529"
-          class="form-control"
-          id="port"
-          placeholder="47989"
-          v-model="config.port"
-        />
+        <input type="number" min="0" max="65529" class="form-control" id="port" placeholder="47989"
+          v-model="config.port" />
         <div class="form-text">Set the family of ports used by Sunshine</div>
       </div>
       <!-- Quantization Parameter -->
       <div class="mb-3">
         <label for="qp" class="form-label">Quantization Parameter</label>
-        <input
-          type="number"
-          class="form-control"
-          id="qp"
-          placeholder="28"
-          v-model="config.qp"
-        />
+        <input type="number" class="form-control" id="qp" placeholder="28" v-model="config.qp" />
         <div class="form-text">
           Quantization Parameter<br />
           Some devices may not support Constant Bit Rate.<br />
@@ -653,17 +445,9 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!-- Min Threads -->
       <div class="mb-3">
-        <label for="min_threads" class="form-label"
-          >Minimum Software Encoding Thread Count</label
-        >
-        <input
-          type="number"
-          min="1"
-          class="form-control"
-          id="min_threads"
-          placeholder="1"
-          v-model="config.min_threads"
-        />
+        <label for="min_threads" class="form-label">Minimum Software Encoding Thread Count</label>
+        <input type="number" min="1" class="form-control" id="min_threads" placeholder="1"
+          v-model="config.min_threads" />
         <div class="form-text">
           Increasing the value slightly reduces encoding efficiency, but the tradeoff is usually<br />
           worth it to gain the use of more CPU cores for encoding. The ideal value is the lowest<br />
@@ -725,7 +509,8 @@ <h1 class="my-4">Configuration</h1>
           <option value="x11">X11</option>
         </select>
         <div class="form-text">
-          Force a specific capture method, otherwise Sunshine will use the first one that works. NvFBC requires patched nvidia drivers.
+          Force a specific capture method, otherwise Sunshine will use the first one that works. NvFBC requires patched
+          nvidia drivers.
         </div>
       </div>
       <!--Encoder-->
@@ -748,13 +533,7 @@ <h1 class="my-4">Configuration</h1>
       <!--FEC Percentage-->
       <div class="mb-3">
         <label for="fec_percentage" class="form-label">FEC Percentage</label>
-        <input
-          type="text"
-          class="form-control"
-          id="fec_percentage"
-          placeholder="20"
-          v-model="config.fec_percentage"
-        />
+        <input type="text" class="form-control" id="fec_percentage" placeholder="20" v-model="config.fec_percentage" />
         <div class="form-text">
           Percentage of error correcting packets per data packet in each video frame.<br />
           Higher values can correct for more network packet loss, but at the cost of increasing bandwidth usage.<br />
@@ -764,13 +543,7 @@ <h1 class="my-4">Configuration</h1>
       <!--Channels-->
       <div class="mb-3">
         <label for="channels" class="form-label">Channels</label>
-        <input
-          type="text"
-          class="form-control"
-          id="channels"
-          placeholder="1"
-          v-model="config.channels"
-        />
+        <input type="text" class="form-control" id="channels" placeholder="1" v-model="config.channels" />
         <div class="form-text">
           When multicasting, it could be useful to have different configurations for each connected Client. For example:
           <ul>
@@ -787,30 +560,17 @@ <h1 class="my-4">Configuration</h1>
       </div>
       <!--Credentials File-->
       <div class="mb-3">
-        <label for="credentials_file" class="form-label"
-          >Web Manager Credentials File</label
-        >
-        <input
-          type="text"
-          class="form-control"
-          id="credentials_file"
-          placeholder="sunshine_state.json"
-          v-model="config.credentials_file"
-        />
+        <label for="credentials_file" class="form-label">Web Manager Credentials File</label>
+        <input type="text" class="form-control" id="credentials_file" placeholder="sunshine_state.json"
+          v-model="config.credentials_file" />
         <div class="form-text">
           Store Username/Password separately from Sunshine's state file.
         </div>
       </div>
       <!--Origin PIN Allowed-->
       <div class="mb-3">
-        <label for="origin_pin_allowed" class="form-label"
-          >Origin PIN Allowed</label
-        >
-        <select
-          id="origin_pin_allowed"
-          class="form-select"
-          v-model="config.origin_pin_allowed"
-        >
+        <label for="origin_pin_allowed" class="form-label">Origin PIN Allowed</label>
+        <select id="origin_pin_allowed" class="form-select" v-model="config.origin_pin_allowed">
           <option value="pc">Only localhost may access /pin</option>
           <option value="lan">Only those in LAN may access /pin</option>
           <option value="wan">Anyone may access /pin</option>
@@ -822,13 +582,8 @@ <h1 class="my-4">Configuration</h1>
       <!--External IP-->
       <div class="mb-3">
         <label for="external_ip" class="form-label">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">
           If no external IP address is given, Sunshine will automatically detect external IP
         </div>
@@ -850,14 +605,16 @@ <h1 class="my-4">Configuration</h1>
           <option value="veryslow">veryslow</option>
         </select>
         <div class="form-text">
-          Optimize the trade-off between encoding speed (encoded frames per second) and compression efficiency (quality per bit in the bitstream). Defaults to superfast.
+          Optimize the trade-off between encoding speed (encoded frames per second) and compression efficiency (quality
+          per bit in the bitstream). Defaults to superfast.
         </div>
       </div>
       <div class="mb-3">
         <label for="sw_tune" class="form-label">SW Tune</label>
         <select id="sw_tune" class="form-select" v-model="config.sw_tune">
           <option value="film">film -- use for high quality movie content; lowers deblocking</option>
-          <option value="animation">animation -- good for cartoons; uses higher deblocking and more reference frames</option>
+          <option value="animation">animation -- good for cartoons; uses higher deblocking and more reference frames
+          </option>
           <option value="grain">grain -- preserves the grain structure in old, grainy film material</option>
           <option value="stillimage">stillimage -- good for slideshow-like content</option>
           <option value="fastdecode">fastdecode -- allows faster decoding by disabling certain filters</option>
@@ -896,9 +653,11 @@ <h1 class="my-4">Configuration</h1>
           <option value="full_res">Full resolution (slower)</option>
         </select>
         <div class="form-text">Adds preliminary encoding pass.<br>
-          This allows to detect more motion vectors, better distribute bitrate across the frame and more strictly adhere to
+          This allows to detect more motion vectors, better distribute bitrate across the frame and more strictly adhere
+          to
           bitrate limits.<br>
-          Disabling it is not recommended since this can lead to occasional bitrate overshoot and subsequent packet loss.
+          Disabling it is not recommended since this can lead to occasional bitrate overshoot and subsequent packet
+          loss.
         </div>
       </div>
       <div class="accordion">
@@ -913,7 +672,8 @@ <h2 class="accordion-header">
             aria-labelledby="panelsStayOpen-headingOne">
             <div class="accordion-body">
               <div class="mb-3" v-if="platform === 'windows'">
-                <label for="nvenc_realtime_hags" class="form-label">Use realtime priority in hardware accelerated gpu scheduling</label>
+                <label for="nvenc_realtime_hags" class="form-label">Use realtime priority in hardware accelerated gpu
+                  scheduling</label>
                 <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
                   <option value="disabled">Disabled</option>
                   <option value="enabled">Enabled (default)</option>
@@ -921,7 +681,8 @@ <h2 class="accordion-header">
                 <div class="form-text">Currently NVIDIA drivers may freeze in encoder when
                   <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
                   is enabled, realtime priority is used and VRAM utilization is close to maximum.<br>
-                  Disabling this option lowers the priority to high, sidestepping the freeze at the cost of reduced capture
+                  Disabling this option lowers the priority to high, sidestepping the freeze at the cost of reduced
+                  capture
                   performance when the GPU is heavily loaded.
                 </div>
               </div>
@@ -969,10 +730,7 @@ <h2 class="accordion-header">
       <!--Presets-->
       <div class="mb-3">
         <label for="amd_quality" class="form-label">AMF Quality</label>
-        <select
-          id="amd_quality"
-          class="form-select"
-          v-model="config.amd_quality">
+        <select id="amd_quality" class="form-select" v-model="config.amd_quality">
           <option value="speed">speed -- prefer speed</option>
           <option value="balanced">balanced -- balanced (default)</option>
           <option value="quality">quality -- prefer quality</option>
@@ -1021,12 +779,7 @@ <h2 class="accordion-header">
     </div>
     <!--VA-API Encoder Settings-->
     <div v-if="currentTab === 'va-api'" class="config-page">
-      <input
-        class="form-control"
-        id="adapter_name"
-        placeholder="/dev/dri/renderD128"
-        v-model="config.adapter_name"
-      />
+      <input class="form-control" id="adapter_name" placeholder="/dev/dri/renderD128" v-model="config.adapter_name" />
     </div>
     <!--VideoToolbox Encoder Settings-->
     <div v-if="currentTab === 'vt'" class="config-page">
@@ -1069,7 +822,8 @@ <h2 class="accordion-header">
   </div>
 </div>
 
-<script>
+<script type="module">
+  import { createApp } from 'vue'
   // create dictionary for defaultConfig
   const defaultConfig = {
     "address_family": "ipv4",
@@ -1111,8 +865,7 @@ <h2 class="accordion-header">
     "global_prep_cmd": "[]",
   }
 
-  new Vue({
-    el: "#app",
+  const app = createApp({
     data() {
       return {
         platform: "",
@@ -1217,7 +970,7 @@ <h2 class="accordion-header">
           let resolutions = [];
           res.split(",").forEach((r) => resolutions.push(r.trim()));
           this.resolutions = resolutions;
-          
+
           this.config.global_prep_cmd = this.config.global_prep_cmd || [];
           this.global_prep_cmd = JSON.parse(this.config.global_prep_cmd);
         });
@@ -1303,13 +1056,15 @@ <h2 class="accordion-header">
           undo: "",
         };
 
-        if(this.platform === 'windows'){
-          template = {...template, elevated: false};
+        if (this.platform === 'windows') {
+          template = { ...template, elevated: false };
         }
         this.global_prep_cmd.push(template);
       },
     },
   });
+
+  app.mount("#app");
 </script>
 
 <style>
@@ -1328,4 +1083,4 @@ <h2 class="accordion-header">
     font-size: 12px;
     font-weight: bold;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/header-no-nav.html b/src_assets/common/assets/web/header-no-nav.html
index 28ef76defe5..58b5ea2aef9 100644
--- a/src_assets/common/assets/web/header-no-nav.html
+++ b/src_assets/common/assets/web/header-no-nav.html
@@ -5,9 +5,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 href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/node_modules/vue/dist/vue.min.js"></script>
+    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script type="module">import bootstrap from 'bootstrap' </script>
   </head>
 
   <body></body>
diff --git a/src_assets/common/assets/web/header.html b/src_assets/common/assets/web/header.html
index 5e463612e34..1c0b82c86b6 100644
--- a/src_assets/common/assets/web/header.html
+++ b/src_assets/common/assets/web/header.html
@@ -6,10 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sunshine</title>
     <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-    <link href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/node_modules/vue/dist/vue.min.js"></script>
+    <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   </head>
 
   <body>
@@ -71,13 +70,4 @@
   .form-control::placeholder {
     opacity: 0.5;
   }
-</style>
-
-<!-- Discord WidgetBot Crate-->
-<script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
-  new Crate({
-    server: '804382334370578482',
-    channel: '804383092822900797',
-    defer: false,
-  })
-</script>
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index e83d43ee351..fa21680ade3 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -21,7 +21,8 @@ <h2>Version {{version}}</h2>
         <div class="alert alert-warning">
           <div class="d-flex justify-content-between">
             <div class="my-2">A new <b>Nightly</b> Version is Available!</div>
-            <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev" target="_blank">Download</a>
+            <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev"
+              target="_blank">Download</a>
           </div>
           <pre><b>{{nightlyData.head_sha}}</b></pre>
           <pre>{{nightlyData.display_title}}</pre>
@@ -74,9 +75,10 @@ <h2>Legal</h2>
   </div>
 </div>
 
-<script>
-  new Vue({
-    el: "#content",
+<script type="module">
+  import { createApp } from 'vue'
+  console.log("Hello, Sunshine!")
+  let app = createApp({
     data() {
       return {
         version: null,
@@ -92,7 +94,7 @@ <h2>Legal</h2>
         if (this.buildVersionIsNightly) {
           this.nightlyData = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/actions/workflows/CI.yml/runs?branch=nightly&event=push&exclude_pull_requests=true&per_page=1").then((r) => r.json())).workflow_runs[0];
         }
-      } catch(e){
+      } catch (e) {
       }
       this.loading = false;
     },
@@ -125,11 +127,11 @@ <h2>Legal</h2>
         // return true if the commit hash is different, otherwise false
         return this.nightlyData.head_sha.indexOf(commit) !== 0;
       },
-	  buildVersionIsDirty() {
+      buildVersionIsDirty() {
         return this.version?.split(".").length === 5 &&
           this.version.indexOf("dirty") !== -1
       },
-	  buildVersionIsNightly() {
+      buildVersionIsNightly() {
         return this.version?.split(".").length === 4
       },
       buildVersionIsStable() {
@@ -137,4 +139,5 @@ <h2>Legal</h2>
       }
     }
   });
-</script>
+  app.mount('#content');
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index 6ad76d5e748..03074d7060a 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -77,9 +77,9 @@ <h4>New Credentials</h4>
   </form>
 </div>
 
-<script>
-  new Vue({
-    el: "#app",
+<script type="module">
+  import {createApp} from 'vue'
+  const app = createApp({
     data() {
       return {
         error: null,
@@ -118,6 +118,8 @@ <h4>New Credentials</h4>
       },
     },
   });
+
+  app.mount("#app");
 </script>
 
 <style>
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index 0ada5a8ae33..b94a5791a12 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -78,9 +78,9 @@ <h2>Logs</h2>
   </div>
 </div>
 
-<script>
-  new Vue({
-    el: "#app",
+<script  type="module">
+  import {createApp} from 'vue'
+  const app = createApp({
     data() {
       return {
         closeAppPressed: false,
@@ -156,6 +156,8 @@ <h2>Logs</h2>
       },
     },
   });
+
+  app.mount("#app");
 </script>
 
 <style>
diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/welcome.html
index 8b728609c7e..c2026eecbd2 100644
--- a/src_assets/common/assets/web/welcome.html
+++ b/src_assets/common/assets/web/welcome.html
@@ -1,6 +1,8 @@
 <main role="main" id="app" style="max-width: 600px; margin: 0 auto">
   <header>
-    <h1 class="mb-0">Welcome to Sunshine!</h1>
+    <h1 class="mb-0">
+      Welcome to Sunshine!
+    </h1>
     <p class="mb-0 align-self-start">
       Before Getting Started, we need you to make a new username and password for accessing the Web UI.
     </p>
@@ -12,43 +14,20 @@ <h1 class="mb-0">Welcome to Sunshine!</h1>
   <form @submit.prevent="save">
     <div class="mb-2">
       <label for="usernameInput" class="form-label">Username:</label>
-      <input
-        type="text"
-        class="form-control"
-        id="usernameInput"
-        autocomplete="username"
-        v-model="passwordData.newUsername"
-      />
+      <input type="text" class="form-control" id="usernameInput" autocomplete="username"
+        v-model="passwordData.newUsername" />
     </div>
     <div class="mb-2">
       <label for="passwordInput" class="form-label">Password:</label>
-      <input
-        type="password"
-        class="form-control"
-        id="passwordInput"
-        autocomplete="new-password"
-        v-model="passwordData.newPassword"
-        required
-      />
+      <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
+        v-model="passwordData.newPassword" required />
     </div>
     <div class="mb-2">
-      <label for="confirmPasswordInput" class="form-label"
-        >Password (confirm):</label
-      >
-      <input
-        type="password"
-        class="form-control"
-        id="confirmPasswordInput"
-        autocomplete="new-password"
-        v-model="passwordData.confirmNewPassword"
-        required
-      />
+      <label for="confirmPasswordInput" class="form-label">Password (confirm):</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 w-100 mb-2"
-      v-bind:disabled="loading"
-    >
+    <button type="submit" class="btn btn-primary w-100 mb-2" v-bind:disabled="loading">
       Login
     </button>
     <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
@@ -59,9 +38,9 @@ <h1 class="mb-0">Welcome to Sunshine!</h1>
   </form>
 </main>
 
-<script>
-  new Vue({
-    el: "#app",
+<script type="module">
+  import { createApp } from "vue"
+  let app = createApp({
     data() {
       return {
         error: null,
@@ -101,4 +80,5 @@ <h1 class="mb-0">Welcome to Sunshine!</h1>
       },
     },
   });
-</script>
+  app.mount("#app");
+</script>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000000..12c47535313
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,40 @@
+import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    resolve: {
+        alias: {
+            vue: 'vue/dist/vue.esm-bundler.js'
+        }
+    },
+    plugins: [vue({
+        template: {
+            compilerOptions: {
+                compatConfig: {
+                    MODE: 2
+                }
+            }
+        }
+    })],
+    root: resolve(__dirname, "src_assets/common/assets/web"),
+    build: {
+        outDir: resolve(__dirname, "build/assets/web"), //TODO Handle SRC_PATH by CMAKE
+        rollupOptions: {
+            input: {
+                apps: resolve(__dirname, 'src_assets/common/assets/web/apps.html'),
+                clients: resolve(__dirname, 'src_assets/common/assets/web/clients.html'),
+                config: resolve(__dirname, 'src_assets/common/assets/web/config.html'),
+                'header-no-nav': resolve(__dirname, 'src_assets/common/assets/web/header-no-nav.html'),
+                header: resolve(__dirname, 'src_assets/common/assets/web/header.html'),
+                index: resolve(__dirname, 'src_assets/common/assets/web/index.html'),
+                password: resolve(__dirname, 'src_assets/common/assets/web/password.html'),
+                pin: resolve(__dirname, 'src_assets/common/assets/web/pin.html'),
+                troubleshooting: resolve(__dirname, 'src_assets/common/assets/web/troubleshooting.html'),
+                welcome: resolve(__dirname, 'src_assets/common/assets/web/welcome.html'),
+            },
+        },
+    },
+})

From 4c326e5ee281d1ae30dd34b92be38172ee26b8ec Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Sep 2023 18:05:18 +0200
Subject: [PATCH 02/82] Removed Server-Side include

---
 src/confighttp.cpp                            |   24 +-
 src_assets/common/assets/web/ResourceCard.vue |   36 +
 .../common/assets/web/SunshineHeader.vue      |   56 +
 src_assets/common/assets/web/apps.html        |  545 +++---
 src_assets/common/assets/web/clients.html     |    3 -
 src_assets/common/assets/web/config.html      | 1517 +++++++++--------
 .../common/assets/web/header-no-nav.html      |   13 -
 src_assets/common/assets/web/header.html      |   73 -
 src_assets/common/assets/web/index.html       |  130 +-
 src_assets/common/assets/web/password.html    |  146 +-
 src_assets/common/assets/web/pin.html         |   65 +-
 .../common/assets/web/troubleshooting.html    |  189 +-
 src_assets/common/assets/web/welcome.html     |   98 +-
 vite.config.js                                |   13 +-
 14 files changed, 1496 insertions(+), 1412 deletions(-)
 create mode 100644 src_assets/common/assets/web/ResourceCard.vue
 create mode 100644 src_assets/common/assets/web/SunshineHeader.vue
 delete mode 100644 src_assets/common/assets/web/clients.html
 delete mode 100644 src_assets/common/assets/web/header-no-nav.html
 delete mode 100644 src_assets/common/assets/web/header.html

diff --git a/src/confighttp.cpp b/src/confighttp.cpp
index 5cde76c30bf..282c5b29313 100644
--- a/src/confighttp.cpp
+++ b/src/confighttp.cpp
@@ -161,11 +161,10 @@ namespace confighttp {
 
     print_req(request);
 
-    std::string header = read_file(WEB_DIR "header.html");
     std::string content = read_file(WEB_DIR "index.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
@@ -174,11 +173,10 @@ namespace confighttp {
 
     print_req(request);
 
-    std::string header = read_file(WEB_DIR "header.html");
     std::string content = read_file(WEB_DIR "pin.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
@@ -187,12 +185,11 @@ namespace confighttp {
 
     print_req(request);
 
-    std::string header = read_file(WEB_DIR "header.html");
     std::string content = read_file(WEB_DIR "apps.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
     headers.emplace("Access-Control-Allow-Origin", "https://images.igdb.com/");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
@@ -201,11 +198,10 @@ namespace confighttp {
 
     print_req(request);
 
-    std::string header = read_file(WEB_DIR "header.html");
     std::string content = read_file(WEB_DIR "clients.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
@@ -214,11 +210,10 @@ namespace confighttp {
 
     print_req(request);
 
-    std::string header = read_file(WEB_DIR "header.html");
     std::string content = read_file(WEB_DIR "config.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
@@ -227,11 +222,10 @@ namespace confighttp {
 
     print_req(request);
 
-    std::string header = read_file(WEB_DIR "header.html");
     std::string content = read_file(WEB_DIR "password.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
@@ -241,11 +235,10 @@ namespace confighttp {
       send_redirect(response, request, "/");
       return;
     }
-    std::string header = read_file(WEB_DIR "header-no-nav.html");
     std::string content = read_file(WEB_DIR "welcome.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
@@ -254,11 +247,10 @@ namespace confighttp {
 
     print_req(request);
 
-    std::string header = read_file(WEB_DIR "header.html");
     std::string content = read_file(WEB_DIR "troubleshooting.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
-    response->write(header + content, headers);
+    response->write(content, headers);
   }
 
   void
diff --git a/src_assets/common/assets/web/ResourceCard.vue b/src_assets/common/assets/web/ResourceCard.vue
new file mode 100644
index 00000000000..c0a4cd07f66
--- /dev/null
+++ b/src_assets/common/assets/web/ResourceCard.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="card p-2 my-4">
+        <div class="card-body">
+            <h2>Resources</h2>
+            <br />
+            <p>
+                Resources for Sunshine!
+            </p>
+            <div class="card-group p-4 align-items-center">
+                <a class="btn btn-success m-1" href="https://app.lizardbyte.dev" target="_blank">LizardByte Website</a>
+                <a class="btn btn-primary m-1" href="https://app.lizardbyte.dev/discord" target="_blank">
+                    <i class="fab fa-fw fa-discord"></i> Discord</a>
+                <a class="btn btn-secondary m-1" href="https://github.com/LizardByte/Sunshine/discussions" target="_blank">
+                    <i class="fab fa-fw fa-github"></i> Github Discussions</a>
+            </div>
+        </div>
+    </div>
+    <!--Legal-->
+    <div class="card p-2 my-4">
+        <div class="card-body">
+            <h2>Legal</h2>
+            <br />
+            <p>
+                By continuing to use this software you agree to the terms and conditions in the following documents.
+            </p>
+            <div class="card-group p-4 align-items-center">
+                <a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/LICENSE"
+                    target="_blank">
+                    <i class="fas fa-fw fa-file-alt"></i> License</a>
+                <a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/NOTICE"
+                    target="_blank">
+                    <i class="fas fa-fw fa-exclamation"></i> Third Party Notice</a>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/SunshineHeader.vue b/src_assets/common/assets/web/SunshineHeader.vue
new file mode 100644
index 00000000000..9f9a475791f
--- /dev/null
+++ b/src_assets/common/assets/web/SunshineHeader.vue
@@ -0,0 +1,56 @@
+<template>
+    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #ffc400">
+        <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="/"><i class="fas fa-fw fa-home"></i> Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/pin"><i class="fas fa-fw fa-unlock"></i> PIN</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/apps"><i class="fas fa-fw fa-stream"></i> Applications</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/config"><i class="fas fa-fw fa-cog"></i> Configuration</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/password"><i class="fas fa-fw fa-user-shield"></i> Change Password</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/troubleshooting"><i class="fas fa-fw fa-info"></i> Troubleshooting</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+    export default {
+        created(){
+            console.log("Header mounted!")
+        },
+        mounted(){
+            let el = document.querySelector("a[href='"+document.location.pathname+"']");
+            if(el)el.classList.add("active")
+        }
+    }
+</script>
+
+<style>
+  .nav-link.active {
+    font-weight: 500;
+  }
+  .form-control::placeholder {
+    opacity: 0.5;
+  }
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index b251968a5d0..7b50f86dc87 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -1,289 +1,310 @@
-<div id="app" class="container">
-  <div class="my-4">
-    <h1>Applications</h1>
-    <div>Applications are refreshed only when Client is restarted</div>
-  </div>
-  <div class="card p-4">
-    <table class="table">
-      <thead>
-        <tr>
-          <th scope="col">Name</th>
-          <th scope="col">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(app,i) in apps" :key="i">
-          <td>{{app.name}}</td>
-          <td>
-            <button class="btn btn-primary" @click="editApp(i)">
-              <i class="fas fa-edit"></i> Edit
-            </button>
-            <button class="btn btn-danger" @click="showDeleteForm(i)">
-              <i class="fas fa-trash"></i> Delete
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div class="edit-form card mt-2" v-if="showEditForm">
-    <div class="p-4">
-      <!--name-->
-      <div class="mb-3">
-        <label for="appName" class="form-label">Application Name</label>
-        <input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name" />
-        <div id="appNameHelp" class="form-text">
-          Application Name, as shown on Moonlight
-        </div>
-      </div>
-      <!--output-->
-      <div class="mb-3">
-        <label for="appOutput" class="form-label">Output</label>
-        <input type="text" class="form-control monospace" id="appOutput" aria-describedby="appOutputHelp"
-          v-model="editForm.output" />
-        <div id="appOutputHelp" class="form-text">
-          The file where the output of the command is stored, if it is not
-          specified, the output is ignored
-        </div>
-      </div>
-      <!--prep-cmd-->
-      <div class="mb-3">
-        <label for="excludeGlobalPrep" class="form-label">Global Prep Commands</label>
-        <select id="excludeGlobalPrep" class="form-select" v-model="editForm['exclude-global-prep-cmd']">
-          <option v-for="val in [false, true]" :value="val">
-            {{ !val ? 'Enabled' : 'Disabled' }}
-          </option>
-        </select>
-        <div class="form-text">
-          Enable/Disable the execution of Global Prep Commands for this
-          application.
-        </div>
-      </div>
-      <div class="mb-3">
-        <label for="appName" class="form-label">Command Preparations</label>
-        <div class="form-text">
-          A list of commands to be run before/after this application.<br />
-          If any of the prep-commands fail, starting the application is aborted.
+<!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" />
+  <title>Sunshine</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body id="app">
+  <Sunshine-Header></Sunshine-Header>
+  <div class="container">
+    <div class="my-4">
+      <h1>Applications</h1>
+      <div>Applications are refreshed only when Client is restarted</div>
+    </div>
+    <div class="card p-4">
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(app,i) in apps" :key="i">
+            <td>{{app.name}}</td>
+            <td>
+              <button class="btn btn-primary" @click="editApp(i)">
+                <i class="fas fa-edit"></i> Edit
+              </button>
+              <button class="btn btn-danger" @click="showDeleteForm(i)">
+                <i class="fas fa-trash"></i> Delete
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="edit-form card mt-2" v-if="showEditForm">
+      <div class="p-4">
+        <!--name-->
+        <div class="mb-3">
+          <label for="appName" class="form-label">Application Name</label>
+          <input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name" />
+          <div id="appNameHelp" class="form-text">
+            Application Name, as shown on Moonlight
+          </div>
         </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">
-            <i class="fas fa-plus mr-1"></i> Add Commands
-          </button>
+        <!--output-->
+        <div class="mb-3">
+          <label for="appOutput" class="form-label">Output</label>
+          <input type="text" class="form-control monospace" id="appOutput" aria-describedby="appOutputHelp"
+            v-model="editForm.output" />
+          <div id="appOutputHelp" class="form-text">
+            The file where the output of the command is stored, if it is not
+            specified, the output is ignored
+          </div>
         </div>
-        <table class="table" v-if="editForm['prep-cmd'].length > 0">
-          <thead>
-            <tr>
-              <th scope="col"><i class="fas fa-play"></i> Do Command</th>
-              <th scope="col"><i class="fas fa-undo"></i> Undo Command</th>
-              <th scope="col" v-if="platform === 'windows'">
-                <i class="fas fa-shield-alt"></i> Run as Admin
-              </th>
-              <th scope="col"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(c, i) in editForm['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'">
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
-                    true-value="true" false-value="false" />
-                  <label :for="'prep-cmd-admin-' + i" class="form-check-label">Elevated</label>
-                </div>
-              </td>
-              <td>
-                <button class="btn btn-danger" @click="$delete(editForm['prep-cmd'], i)">
-                  <i class="fas fa-trash"></i>
-                </button>
-                <button class="btn btn-success" @click="addPrepCmd">
-                  <i class="fas fa-plus"></i>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <!--detatched-->
-      <div class="mb-3">
-        <label for="appName" class="form-label">Detached Commands</label>
-        <div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2">
-          <pre>{{c}}</pre>
-          <button class="btn btn-danger mx-2" @click="editForm.detached.splice(i,1)">
-            &times;
-          </button>
+        <!--prep-cmd-->
+        <div class="mb-3">
+          <label for="excludeGlobalPrep" class="form-label">Global Prep Commands</label>
+          <select id="excludeGlobalPrep" class="form-select" v-model="editForm['exclude-global-prep-cmd']">
+            <option v-for="val in [false, true]" :value="val">
+              {{ !val ? 'Enabled' : 'Disabled' }}
+            </option>
+          </select>
+          <div class="form-text">
+            Enable/Disable the execution of Global Prep Commands for this
+            application.
+          </div>
         </div>
-        <div class="d-flex justify-content-between">
-          <input type="text" class="form-control monospace" v-model="detachedCmd" />
-          <button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">
-            +
-          </button>
+        <div class="mb-3">
+          <label for="appName" class="form-label">Command Preparations</label>
+          <div class="form-text">
+            A list of commands to be run before/after this application.<br />
+            If any of the prep-commands fail, starting the application is aborted.
+          </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">
+              <i class="fas fa-plus mr-1"></i> Add Commands
+            </button>
+          </div>
+          <table class="table" v-if="editForm['prep-cmd'].length > 0">
+            <thead>
+              <tr>
+                <th scope="col"><i class="fas fa-play"></i> Do Command</th>
+                <th scope="col"><i class="fas fa-undo"></i> Undo Command</th>
+                <th scope="col" v-if="platform === 'windows'">
+                  <i class="fas fa-shield-alt"></i> Run as Admin
+                </th>
+                <th scope="col"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(c, i) in editForm['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'">
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
+                      true-value="true" false-value="false" />
+                    <label :for="'prep-cmd-admin-' + i" class="form-check-label">Elevated</label>
+                  </div>
+                </td>
+                <td>
+                  <button class="btn btn-danger" @click="$delete(editForm['prep-cmd'], i)">
+                    <i class="fas fa-trash"></i>
+                  </button>
+                  <button class="btn btn-success" @click="addPrepCmd">
+                    <i class="fas fa-plus"></i>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
-        <div class="form-text">
-          A list of commands to be run and forgotten about
+        <!--detatched-->
+        <div class="mb-3">
+          <label for="appName" class="form-label">Detached Commands</label>
+          <div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2">
+            <pre>{{c}}</pre>
+            <button class="btn btn-danger mx-2" @click="editForm.detached.splice(i,1)">
+              &times;
+            </button>
+          </div>
+          <div class="d-flex justify-content-between">
+            <input type="text" class="form-control monospace" v-model="detachedCmd" />
+            <button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">
+              +
+            </button>
+          </div>
+          <div class="form-text">
+            A list of commands to be run and forgotten about
+          </div>
         </div>
-      </div>
-      <!--command-->
-      <div class="mb-3">
-        <label for="appCmd" class="form-label">Command</label>
-        <input type="text" class="form-control monospace" id="appCmd" aria-describedby="appCmdHelp"
-          v-model="editForm.cmd" />
-        <div id="appCmdHelp" class="form-text">
-          The main application, if it is not specified, a process is started
-          that sleeps indefinitely
+        <!--command-->
+        <div class="mb-3">
+          <label for="appCmd" class="form-label">Command</label>
+          <input type="text" class="form-control monospace" id="appCmd" aria-describedby="appCmdHelp"
+            v-model="editForm.cmd" />
+          <div id="appCmdHelp" class="form-text">
+            The main application, if it is not specified, a process is started
+            that sleeps indefinitely
+          </div>
         </div>
-      </div>
-      <!--working dir-->
-      <div class="mb-3">
-        <label for="appWorkingDir" class="form-label">Working Directory</label>
-        <input type="text" class="form-control monospace" id="appWorkingDir" aria-describedby="appWorkingDirHelp"
-          v-model="editForm['working-dir']" />
-        <div id="appWorkingDirHelp" class="form-text">
-          The working directory that should be passed to the process. For
-          example, some applications use the working directory to search for
-          configuration files. If not set, Sunshine will default to the parent
-          directory of the command
+        <!--working dir-->
+        <div class="mb-3">
+          <label for="appWorkingDir" class="form-label">Working Directory</label>
+          <input type="text" class="form-control monospace" id="appWorkingDir" aria-describedby="appWorkingDirHelp"
+            v-model="editForm['working-dir']" />
+          <div id="appWorkingDirHelp" class="form-text">
+            The working directory that should be passed to the process. For
+            example, some applications use the working directory to search for
+            configuration files. If not set, Sunshine will default to the parent
+            directory of the command
+          </div>
         </div>
-      </div>
-      <!-- elevation -->
-      <div class="mb-3 form-check" v-if="platform === 'windows'">
-        <label for="appElevation" class="form-check-label">Run as administrator</label>
-        <input type="checkbox" class="form-check-input" id="appElevation" v-model="editForm.elevated" true-value="true"
-          false-value="false" />
-        <div class="form-text">
-          This can be necessary for some applications that require administrator
-          permissions to run properly.
+        <!-- elevation -->
+        <div class="mb-3 form-check" v-if="platform === 'windows'">
+          <label for="appElevation" class="form-check-label">Run as administrator</label>
+          <input type="checkbox" class="form-check-input" id="appElevation" v-model="editForm.elevated"
+            true-value="true" false-value="false" />
+          <div class="form-text">
+            This can be necessary for some applications that require administrator
+            permissions to run properly.
+          </div>
         </div>
-      </div>
-      <!-- Image path -->
-      <div class="mb-3">
-        <label for="appImagePath" class="form-label">Image</label>
-        <div class="input-group dropup">
-          <input type="text" class="form-control monospace" id="appImagePath" aria-describedby="appImagePathHelp"
-            v-model="editForm['image-path']" />
-          <button class="btn btn-secondary dropdown-toggle" type="button" id="findCoverToggle" data-bs-toggle="dropdown"
-            data-bs-auto-close="outside" aria-expanded="false" v-dropdown-show="showCoverFinder"
-            ref="coverFinderDropdown">
-            Find Cover
-          </button>
-          <div class="dropdown-menu dropdown-menu-end w-50 cover-finder overflow-hidden"
-            aria-labelledby="findCoverToggle">
-            <div class="modal-header">
-              <h4 class="modal-title">Covers Found</h4>
-              <button type="button" class="btn-close" aria-label="Close" @click="closeCoverFinder"></button>
-            </div>
-            <div class="modal-body cover-results px-3 pt-3" :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">Loading...</span>
+        <!-- Image path -->
+        <div class="mb-3">
+          <label for="appImagePath" class="form-label">Image</label>
+          <div class="input-group dropup">
+            <input type="text" class="form-control monospace" id="appImagePath" aria-describedby="appImagePathHelp"
+              v-model="editForm['image-path']" />
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="findCoverToggle"
+              data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"
+              v-dropdown-show="showCoverFinder" ref="coverFinderDropdown">
+              Find Cover
+            </button>
+            <div class="dropdown-menu dropdown-menu-end w-50 cover-finder overflow-hidden"
+              aria-labelledby="findCoverToggle">
+              <div class="modal-header">
+                <h4 class="modal-title">Covers Found</h4>
+                <button type="button" class="btn-close" aria-label="Close" @click="closeCoverFinder"></button>
+              </div>
+              <div class="modal-body cover-results px-3 pt-3" :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">Loading...</span>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div v-for="(cover,i) in coverCandidates" :key="'i'" class="col-12 col-sm-6 col-lg-4 mb-3"
-                  @click="useCover(cover)">
-                  <div class="cover-container result">
-                    <img class="rounded" :src="cover.url" />
+                  <div v-for="(cover,i) in coverCandidates" :key="'i'" class="col-12 col-sm-6 col-lg-4 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>
-                  <label class="d-block text-nowrap text-center text-truncate">
-                    {{cover.name}}
-                  </label>
                 </div>
               </div>
             </div>
           </div>
+          <div id="appImagePathHelp" class="form-text">
+            Application icon/picture/image path that will be sent to client. Image
+            must be a PNG file. If not set, Sunshine will send default box image.
+          </div>
         </div>
-        <div id="appImagePathHelp" class="form-text">
-          Application icon/picture/image path that will be sent to client. Image
-          must be a PNG file. If not set, Sunshine will send default box image.
-        </div>
-      </div>
-      <div class="env-hint">
-        <div class="form-text"><b>About Environment Variables: </b> All commands get these environment variables by
-          default: </div>
-        <table>
-          <tr>
-            <td><b>Var Name</b></td>
-            <td><b></b></td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_APP_ID</td>
-            <td>App ID</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_APP_NAME</td>
-            <td>App Name</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_WIDTH</td>
-            <td>The Width requested by the client</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_HEIGHT</td>
-            <td>The Height requested by the client</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_FPS</td>
-            <td>The FPS requested by the client</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_HDR</td>
-            <td>(true/false) if HDR is enabled by the client</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_GCMAP</td>
-            <td>(int) the requested gamepad mask, in a bitset/bitfield format</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_HOST_AUDIO</td>
-            <td>(true/false) if the client has requested host audio</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_ENABLE_SOPS</td>
-            <td>(true/false) if the client has requested the option to optimize the game for optimal streaming</td>
-          </tr>
-          <tr>
-            <td style="font-family: monospace">SUNSHINE_CLIENT_AUDIO_CONFIGURATION</td>
-            <td>The Audio Configuration requested by the client (2.0/5.1/7.1)</td>
-          </tr>
-        </table>
-        <div class="form-text" v-if="platform === 'windows'"><b>Example - QRes for Resolution Automation:</b>
-          <pre>cmd /C &lt;qres path&gt;\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT%</pre>
-        </div>
-        <div class="form-text" v-else-if="platform === 'linux'"><b>Example - Xrandr for Resolution Automation:</b>
-          <pre>sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate 60"</pre>
+        <div class="env-hint">
+          <div class="form-text"><b>About Environment Variables: </b> All commands get these environment variables by
+            default: </div>
+          <table>
+            <tr>
+              <td><b>Var Name</b></td>
+              <td><b></b></td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_APP_ID</td>
+              <td>App ID</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_APP_NAME</td>
+              <td>App Name</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_WIDTH</td>
+              <td>The Width requested by the client</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_HEIGHT</td>
+              <td>The Height requested by the client</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_FPS</td>
+              <td>The FPS requested by the client</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_HDR</td>
+              <td>(true/false) if HDR is enabled by the client</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_GCMAP</td>
+              <td>(int) the requested gamepad mask, in a bitset/bitfield format</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_HOST_AUDIO</td>
+              <td>(true/false) if the client has requested host audio</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_ENABLE_SOPS</td>
+              <td>(true/false) if the client has requested the option to optimize the game for optimal streaming</td>
+            </tr>
+            <tr>
+              <td style="font-family: monospace">SUNSHINE_CLIENT_AUDIO_CONFIGURATION</td>
+              <td>The Audio Configuration requested by the client (2.0/5.1/7.1)</td>
+            </tr>
+          </table>
+          <div class="form-text" v-if="platform === 'windows'"><b>Example - QRes for Resolution Automation:</b>
+            <pre>cmd /C &lt;qres path&gt;\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT%</pre>
+          </div>
+          <div class="form-text" v-else-if="platform === 'linux'"><b>Example - Xrandr for Resolution Automation:</b>
+            <pre>sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate 60"</pre>
+          </div>
+          <div class="form-text" v-else-if="platform === 'macos'"><b>Example - displayplacer for Resolution
+              Automation:</b>
+            <pre>sh -c "displayplacer "id:<screenId> res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:60 scaling:on origin:(0,0) degree:0""</pre>
+          </div>
+          <div class="form-text"><a
+              href="https://docs.lizardbyte.dev/projects/sunshine/en/latest/about/guides/app_examples.html"
+              target="_blank">See More</a></div>
         </div>
-        <div class="form-text" v-else-if="platform === 'macos'"><b>Example - displayplacer for Resolution
-            Automation:</b>
-          <pre>sh -c "displayplacer "id:<screenId> res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:60 scaling:on origin:(0,0) degree:0""</pre>
+        <!--buttons-->
+        <div class="d-flex">
+          <button @click="showEditForm = false" class="btn btn-secondary m-2">
+            Cancel
+          </button>
+          <button class="btn btn-primary m-2" @click="save">Save</button>
         </div>
-        <div class="form-text"><a
-            href="https://docs.lizardbyte.dev/projects/sunshine/en/latest/about/guides/app_examples.html"
-            target="_blank">See More</a></div>
-      </div>
-      <!--buttons-->
-      <div class="d-flex">
-        <button @click="showEditForm = false" class="btn btn-secondary m-2">
-          Cancel
-        </button>
-        <button class="btn btn-primary m-2" @click="save">Save</button>
       </div>
     </div>
+    <div class="mt-2" v-else>
+      <button class="btn btn-primary" @click="newApp">
+        <i class="fas fa-plus"></i> Add New
+      </button>
+    </div>
   </div>
-  <div class="mt-2" v-else>
-    <button class="btn btn-primary" @click="newApp">
-      <i class="fas fa-plus"></i> Add New
-    </button>
-  </div>
-</div>
+</body>
 <script type="module">
   import { createApp } from 'vue';
+  import SunshineHeader from './SunshineHeader.vue'
   const app = createApp({
+    components: {
+      SunshineHeader
+    },
     data() {
       return {
         apps: [],
diff --git a/src_assets/common/assets/web/clients.html b/src_assets/common/assets/web/clients.html
deleted file mode 100644
index 5eaf56a4dfa..00000000000
--- a/src_assets/common/assets/web/clients.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="content" class="container">
-  <h1>Clients</h1>
-</div>
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index fe3044b95c8..8b9219541b0 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -1,409 +1,426 @@
-<div id="app" class="container">
-  <h1 class="my-4">Configuration</h1>
-  <div class="form" v-if="config">
-    <!--Header-->
-    <ul class="nav nav-tabs">
-      <li class="nav-item" v-for="tab in tabs" :key="tab.id">
-        <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
-          @click="currentTab = tab.id">{{tab.name}}</a>
-      </li>
-    </ul>
-    <!--General Tab-->
-    <div v-if="currentTab === 'general'" class="config-page">
-      <!--Sunshine Name-->
-      <div class="mb-3">
-        <label for="sunshine_name" class="form-label">Sunshine Name</label>
-        <input type="text" class="form-control" id="sunshine_name" placeholder="Sunshine"
-          v-model="config.sunshine_name" />
-        <div class="form-text">
-          The name displayed by Moonlight. If not specified, the PC's hostname is used
+<!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" />
+  <title>Sunshine</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body id="app">
+  <Sunshine-Header></Sunshine-Header>
+  <div class="container">
+    <h1 class="my-4">Configuration</h1>
+    <div class="form" v-if="config">
+      <!--Header-->
+      <ul class="nav nav-tabs">
+        <li class="nav-item" v-for="tab in tabs" :key="tab.id">
+          <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+            @click="currentTab = tab.id">{{tab.name}}</a>
+        </li>
+      </ul>
+      <!--General Tab-->
+      <div v-if="currentTab === 'general'" class="config-page">
+        <!--Sunshine Name-->
+        <div class="mb-3">
+          <label for="sunshine_name" class="form-label">Sunshine Name</label>
+          <input type="text" class="form-control" id="sunshine_name" placeholder="Sunshine"
+            v-model="config.sunshine_name" />
+          <div class="form-text">
+            The name displayed by Moonlight. If not specified, the PC's hostname is used
+          </div>
         </div>
-      </div>
-      <!--Log Level-->
-      <div class="mb-3">
-        <label for="min_log_level" class="form-label">Log Level</label>
-        <select id="min_log_level" class="form-select" v-model="config.min_log_level">
-          <option value="0">Verbose</option>
-          <option value="1">Debug</option>
-          <option value="2">Info</option>
-          <option value="3">Warning</option>
-          <option value="4">Error</option>
-          <option value="5">Fatal</option>
-          <option value="6">None</option>
-        </select>
-        <div class="form-text">
-          The minimum log level printed to standard out
+        <!--Log Level-->
+        <div class="mb-3">
+          <label for="min_log_level" class="form-label">Log Level</label>
+          <select id="min_log_level" class="form-select" v-model="config.min_log_level">
+            <option value="0">Verbose</option>
+            <option value="1">Debug</option>
+            <option value="2">Info</option>
+            <option value="3">Warning</option>
+            <option value="4">Error</option>
+            <option value="5">Fatal</option>
+            <option value="6">None</option>
+          </select>
+          <div class="form-text">
+            The minimum log level printed to standard out
+          </div>
         </div>
-      </div>
-      <!--Log Path-->
-      <div class="mb-3">
-        <label for="log_path" class="form-label">Logfile Path</label>
-        <input type="text" class="form-control" id="log_path" placeholder="sunshine.log" v-model="config.log_path" />
-        <div class="form-text">
-          The file where the current logs of Sunshine are stored.
+        <!--Log Path-->
+        <div class="mb-3">
+          <label for="log_path" class="form-label">Logfile Path</label>
+          <input type="text" class="form-control" id="log_path" placeholder="sunshine.log" v-model="config.log_path" />
+          <div class="form-text">
+            The file where the current logs of Sunshine are stored.
+          </div>
         </div>
-      </div>
-      <!--Origin Web UI Allowed-->
-      <div class="mb-3">
-        <label for="origin_web_ui_allowed" class="form-label">Origin Web UI Allowed</label>
-        <select id="origin_web_ui_allowed" class="form-select" v-model="config.origin_web_ui_allowed">
-          <option value="pc">Only localhost may access Web UI</option>
-          <option value="lan">Only those in LAN may access Web UI</option>
-          <option value="wan">Anyone may access Web UI</option>
-        </select>
-        <div class="form-text">
-          The origin of the remote endpoint address that is not denied access to Web UI
+        <!--Origin Web UI Allowed-->
+        <div class="mb-3">
+          <label for="origin_web_ui_allowed" class="form-label">Origin Web UI Allowed</label>
+          <select id="origin_web_ui_allowed" class="form-select" v-model="config.origin_web_ui_allowed">
+            <option value="pc">Only localhost may access Web UI</option>
+            <option value="lan">Only those in LAN may access Web UI</option>
+            <option value="wan">Anyone may access Web UI</option>
+          </select>
+          <div class="form-text">
+            The origin of the remote endpoint address that is not denied access to Web UI
+          </div>
         </div>
-      </div>
-      <!--UPnP-->
-      <div class="mb-3">
-        <label for="upnp" class="form-label">UPnP</label>
-        <select id="upnp" class="form-select" v-model="config.upnp">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">Automatically configure port forwarding</div>
-      </div>
-      <!--Gamepads-->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="gamepad" class="form-label">Gamepads</label>
-        <select id="gamepad" class="form-select" v-model="config.gamepad">
-          <option value="auto">Automatic</option>
-          <option value="ds4">DS4 (PS4)</option>
-          <option value="x360">X360 (Xbox 360)</option>
-        </select>
-        <div class="form-text">Choose which type of gamepad to emulate on the host</div>
-      </div>
-      <!--Ping Timeout-->
-      <div class="mb-3">
-        <label for="ping_timeout" class="form-label">Ping Timeout</label>
-        <input type="text" class="form-control" id="ping_timeout" placeholder="10000" v-model="config.ping_timeout" />
-        <div class="form-text">
-          How long to wait in milliseconds for data from moonlight before shutting down the stream
+        <!--UPnP-->
+        <div class="mb-3">
+          <label for="upnp" class="form-label">UPnP</label>
+          <select id="upnp" class="form-select" v-model="config.upnp">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">Automatically configure port forwarding</div>
         </div>
-      </div>
-      <!--Advertised FPS and Resolutions-->
-      <div class="mb-3">
-        <label for="ping_timeout" class="form-label">Advertised Resolutions and FPS</label>
-        <div class="resolutions-container">
-          <label>Resolutions</label>
-          <div class="resolutions d-flex flex-wrap">
-            <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(r,i) in resolutions" :key="r">
-              <span class="px-2">{{r}}</span>
-              <span style="cursor: pointer" @click="resolutions.splice(i,1)">&times;</span>
-            </div>
-            <form @submit.prevent="resolutions.push(resIn);resIn = '';" class="d-flex align-items-center">
-              <input type="text" v-model="resIn" required pattern="[0-9]+x[0-9]+" style="
+        <!--Gamepads-->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="gamepad" class="form-label">Gamepads</label>
+          <select id="gamepad" class="form-select" v-model="config.gamepad">
+            <option value="auto">Automatic</option>
+            <option value="ds4">DS4 (PS4)</option>
+            <option value="x360">X360 (Xbox 360)</option>
+          </select>
+          <div class="form-text">Choose which type of gamepad to emulate on the host</div>
+        </div>
+        <!--Ping Timeout-->
+        <div class="mb-3">
+          <label for="ping_timeout" class="form-label">Ping Timeout</label>
+          <input type="text" class="form-control" id="ping_timeout" placeholder="10000" v-model="config.ping_timeout" />
+          <div class="form-text">
+            How long to wait in milliseconds for data from moonlight before shutting down the stream
+          </div>
+        </div>
+        <!--Advertised FPS and Resolutions-->
+        <div class="mb-3">
+          <label for="ping_timeout" class="form-label">Advertised Resolutions and FPS</label>
+          <div class="resolutions-container">
+            <label>Resolutions</label>
+            <div class="resolutions d-flex flex-wrap">
+              <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(r,i) in resolutions" :key="r">
+                <span class="px-2">{{r}}</span>
+                <span style="cursor: pointer" @click="resolutions.splice(i,1)">&times;</span>
+              </div>
+              <form @submit.prevent="resolutions.push(resIn);resIn = '';" class="d-flex align-items-center">
+                <input type="text" v-model="resIn" required pattern="[0-9]+x[0-9]+" style="
                   border-top-right-radius: 0;
                   border-bottom-right-radius: 0;
                 " class="form-control" />
-              <button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
-                +
-              </button>
-            </form>
-          </div>
-        </div>
-        <div class="fps-container">
-          <label>FPS</label>
-          <div class="fps d-flex flex-wrap">
-            <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(f,i) in fps" :key="f">
-              <span class="px-2">{{f}}</span>
-              <span style="cursor: pointer" @click="fps.splice(i,1)">&times;</span>
+                <button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
+                  +
+                </button>
+              </form>
             </div>
-            <form @submit.prevent="fps.push(fpsIn);fpsIn = '';" class="d-flex align-items-center">
-              <input type="text" v-model="fpsIn" required pattern="[0-9]+" style="
+          </div>
+          <div class="fps-container">
+            <label>FPS</label>
+            <div class="fps d-flex flex-wrap">
+              <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(f,i) in fps" :key="f">
+                <span class="px-2">{{f}}</span>
+                <span style="cursor: pointer" @click="fps.splice(i,1)">&times;</span>
+              </div>
+              <form @submit.prevent="fps.push(fpsIn);fpsIn = '';" class="d-flex align-items-center">
+                <input type="text" v-model="fpsIn" required pattern="[0-9]+" style="
                   width: 6ch;
                   border-top-right-radius: 0;
                   border-bottom-right-radius: 0;
                 " class="form-control" />
-              <button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
-                +
-              </button>
-            </form>
+                <button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
+                  +
+                </button>
+              </form>
+            </div>
+          </div>
+          <div class="form-text">
+            The display modes advertised by Sunshine<br />
+            Some versions of Moonlight, such as Moonlight-nx (Switch), rely on this list to ensure that the requested
+            resolutions and fps are supported.<br>
+            This setting does <b>not</b> change how the screen stream is sent to Moonlight
           </div>
         </div>
-        <div class="form-text">
-          The display modes advertised by Sunshine<br />
-          Some versions of Moonlight, such as Moonlight-nx (Switch), rely on this list to ensure that the requested
-          resolutions and fps are supported.<br>
-          This setting does <b>not</b> change how the screen stream is sent to Moonlight
+        <!-- Mapping Key AltRight to Key Windows -->
+        <div class="mb-3">
+          <label for="mapkey" class="form-label">Map Right Alt key to Windows key</label>
+          <select id="mapkey" class="form-select" v-model="config.key_rightalt_to_key_win">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">
+            It may be possible that you cannot send the Windows Key from Moonlight directly.<br />
+            In those cases it may be useful to make Sunshine think the Right Alt key is the Windows key
+          </div>
         </div>
-      </div>
-      <!-- Mapping Key AltRight to Key Windows -->
-      <div class="mb-3">
-        <label for="mapkey" class="form-label">Map Right Alt key to Windows key</label>
-        <select id="mapkey" class="form-select" v-model="config.key_rightalt_to_key_win">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">
-          It may be possible that you cannot send the Windows Key from Moonlight directly.<br />
-          In those cases it may be useful to make Sunshine think the Right Alt key is the Windows key
+        <!-- Global Prep Commands -->
+        <div class="mb-3 d-flex flex-column">
+          <label class="form-label">Command Preparations</label>
+          <div class="form-text">
+            Configure a list of commands to be executed before or after running any application.
+            If any of the specified preparation commands fail, the application launch process will be aborted.
+          </div>
+          <table class="table" v-if="global_prep_cmd.length > 0">
+            <thead>
+              <tr>
+                <th scope="col"><i class="fas fa-play"></i> Do Command</th>
+                <th scope="col"><i class="fas fa-undo"></i> Undo Command</th>
+                <th scope="col" v-if="platform === 'windows'">
+                  <i class="fas fa-shield-alt"></i> Run as Admin
+                </th>
+                <th scope="col"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(c, i) in 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'">
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
+                      true-value="true" false-value="false" />
+                    <label :for="'prep-cmd-admin-' + i" class="form-check-label">Elevated</label>
+                  </div>
+                </td>
+                <td>
+                  <button class="btn btn-danger" @click="$delete(global_prep_cmd, i)">
+                    <i class="fas fa-trash"></i>
+                  </button>
+                  <button class="btn btn-success" @click="add_global_prep_cmd">
+                    <i class="fas fa-plus"></i>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <button class="mt-2 btn btn-success" style="margin: 0 auto" @click="add_global_prep_cmd">
+            &plus; Add
+          </button>
         </div>
       </div>
-      <!-- Global Prep Commands -->
-      <div class="mb-3 d-flex flex-column">
-        <label class="form-label">Command Preparations</label>
-        <div class="form-text">
-          Configure a list of commands to be executed before or after running any application.
-          If any of the specified preparation commands fail, the application launch process will be aborted.
+      <!--Files Tab-->
+      <div v-if="currentTab === 'files'" class="config-page">
+        <!--Private Key-->
+        <div class="mb-3">
+          <label for="pkey" class="form-label">Private Key</label>
+          <input type="text" class="form-control" id="pkey" placeholder="/dir/pkey.pem" v-model="config.pkey" />
+          <div class="form-text">The private key must be 2048 bits</div>
         </div>
-        <table class="table" v-if="global_prep_cmd.length > 0">
-          <thead>
-            <tr>
-              <th scope="col"><i class="fas fa-play"></i> Do Command</th>
-              <th scope="col"><i class="fas fa-undo"></i> Undo Command</th>
-              <th scope="col" v-if="platform === 'windows'">
-                <i class="fas fa-shield-alt"></i> Run as Admin
-              </th>
-              <th scope="col"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(c, i) in 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'">
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
-                    true-value="true" false-value="false" />
-                  <label :for="'prep-cmd-admin-' + i" class="form-check-label">Elevated</label>
-                </div>
-              </td>
-              <td>
-                <button class="btn btn-danger" @click="$delete(global_prep_cmd, i)">
-                  <i class="fas fa-trash"></i>
-                </button>
-                <button class="btn btn-success" @click="add_global_prep_cmd">
-                  <i class="fas fa-plus"></i>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <button class="mt-2 btn btn-success" style="margin: 0 auto" @click="add_global_prep_cmd">
-          &plus; Add
-        </button>
-      </div>
-    </div>
-    <!--Files Tab-->
-    <div v-if="currentTab === 'files'" class="config-page">
-      <!--Private Key-->
-      <div class="mb-3">
-        <label for="pkey" class="form-label">Private Key</label>
-        <input type="text" class="form-control" id="pkey" placeholder="/dir/pkey.pem" v-model="config.pkey" />
-        <div class="form-text">The private key must be 2048 bits</div>
-      </div>
-      <!--Cert-->
-      <div class="mb-3">
-        <label for="cert" class="form-label">Cert</label>
-        <input type="text" class="form-control" id="cert" placeholder="/dir/cert.pem" v-model="config.cert" />
-        <div class="form-text">
-          The certificate must be signed with a 2048 bit key
+        <!--Cert-->
+        <div class="mb-3">
+          <label for="cert" class="form-label">Cert</label>
+          <input type="text" class="form-control" id="cert" placeholder="/dir/cert.pem" v-model="config.cert" />
+          <div class="form-text">
+            The certificate must be signed with a 2048 bit key
+          </div>
         </div>
-      </div>
 
-      <!--State File-->
-      <div class="mb-3">
-        <label for="file_state" class="form-label">State File</label>
-        <input type="text" class="form-control" id="file_state" placeholder="sunshine_state.json"
-          v-model="config.file_state" />
-        <div class="form-text">
-          The file where current state of Sunshine is stored
+        <!--State File-->
+        <div class="mb-3">
+          <label for="file_state" class="form-label">State File</label>
+          <input type="text" class="form-control" id="file_state" placeholder="sunshine_state.json"
+            v-model="config.file_state" />
+          <div class="form-text">
+            The file where current state of Sunshine is stored
+          </div>
         </div>
-      </div>
-      <!--Apps File-->
-      <div class="mb-3">
-        <label for="file_apps" class="form-label">Apps File</label>
-        <input type="text" class="form-control" id="file_apps" placeholder="apps.json" v-model="config.file_apps" />
-        <div class="form-text">
-          The file where current apps of Sunshine are stored
+        <!--Apps File-->
+        <div class="mb-3">
+          <label for="file_apps" class="form-label">Apps File</label>
+          <input type="text" class="form-control" id="file_apps" placeholder="apps.json" v-model="config.file_apps" />
+          <div class="form-text">
+            The file where current apps of Sunshine are stored
+          </div>
         </div>
       </div>
-    </div>
-    <div v-if="currentTab === 'input'" class="config-page">
-      <!--Home/Guide Button Emulation Timeout-->
-      <div class="mb-3">
-        <label for="back_button_timeout" class="form-label">Home/Guide Button Emulation Timeout</label>
-        <input type="text" class="form-control" id="back_button_timeout" placeholder="-1"
-          v-model="config.back_button_timeout" />
-        <div class="form-text">
-          If the Back/Select button is held down for the specified number of milliseconds, a Home/Guide button press is
-          emulated.<br />
-          If set to a value &lt; 0 (default), holding the Back/Select button will not emulate the Home/Guide
-          button.<br />
+      <div v-if="currentTab === 'input'" class="config-page">
+        <!--Home/Guide Button Emulation Timeout-->
+        <div class="mb-3">
+          <label for="back_button_timeout" class="form-label">Home/Guide Button Emulation Timeout</label>
+          <input type="text" class="form-control" id="back_button_timeout" placeholder="-1"
+            v-model="config.back_button_timeout" />
+          <div class="form-text">
+            If the Back/Select button is held down for the specified number of milliseconds, a Home/Guide button press
+            is
+            emulated.<br />
+            If set to a value &lt; 0 (default), holding the Back/Select button will not emulate the Home/Guide
+            button.<br />
+          </div>
         </div>
-      </div>
-      <!--Enable Mouse Input-->
-      <div class="mb-3">
-        <label for="mouse" class="form-label">Enable Mouse Input</label>
-        <select id="mouse" class="form-select" v-model="config.mouse">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">
-          Allows guests to control the host system with the mouse
+        <!--Enable Mouse Input-->
+        <div class="mb-3">
+          <label for="mouse" class="form-label">Enable Mouse Input</label>
+          <select id="mouse" class="form-select" v-model="config.mouse">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">
+            Allows guests to control the host system with the mouse
+          </div>
         </div>
-      </div>
-      <!--Enable Keyboard Input-->
-      <div class="mb-3">
-        <label for="keyboard" class="form-label">Enable Keyboard Input</label>
-        <select id="keyboard" class="form-select" v-model="config.keyboard">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">
-          Allows guests to control the host system with the keyboard
+        <!--Enable Keyboard Input-->
+        <div class="mb-3">
+          <label for="keyboard" class="form-label">Enable Keyboard Input</label>
+          <select id="keyboard" class="form-select" v-model="config.keyboard">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">
+            Allows guests to control the host system with the keyboard
+          </div>
         </div>
-      </div>
-      <!--Enable Gamepad Input-->
-      <div class="mb-3">
-        <label for="gamepad" class="form-label">Enable Gamepad Input</label>
-        <select id="gamepad" class="form-select" v-model="config.controller">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">
-          Allows guests to control the host system with a gamepad / controller
+        <!--Enable Gamepad Input-->
+        <div class="mb-3">
+          <label for="gamepad" class="form-label">Enable Gamepad Input</label>
+          <select id="gamepad" class="form-select" v-model="config.controller">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">
+            Allows guests to control the host system with a gamepad / controller
+          </div>
         </div>
-      </div>
-      <!-- Key Repeat Delay-->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="key_repeat_delay" class="form-label">Key Repeat Delay</label>
-        <input type="text" class="form-control" id="key_repeat_delay" placeholder="500"
-          v-model="config.key_repeat_delay" />
-        <div class="form-text">
-          Control how fast keys will repeat themselves<br />
-          The initial delay in milliseconds before repeating keys
+        <!-- Key Repeat Delay-->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="key_repeat_delay" class="form-label">Key Repeat Delay</label>
+          <input type="text" class="form-control" id="key_repeat_delay" placeholder="500"
+            v-model="config.key_repeat_delay" />
+          <div class="form-text">
+            Control how fast keys will repeat themselves<br />
+            The initial delay in milliseconds before repeating keys
+          </div>
         </div>
-      </div>
-      <!-- Key Repeat Frequency-->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="key_repeat_frequency" class="form-label">Key Repeat Frequency</label>
-        <input type="text" class="form-control" id="key_repeat_frequency" placeholder="24.9"
-          v-model="config.key_repeat_frequency" />
-        <div class="form-text">
-          How often keys repeat every second<br />
-          This configurable option supports decimals
+        <!-- Key Repeat Frequency-->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="key_repeat_frequency" class="form-label">Key Repeat Frequency</label>
+          <input type="text" class="form-control" id="key_repeat_frequency" placeholder="24.9"
+            v-model="config.key_repeat_frequency" />
+          <div class="form-text">
+            How often keys repeat every second<br />
+            This configurable option supports decimals
+          </div>
         </div>
-      </div>
-      <!-- Always send scancodes -->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="always_send_scancodes" class="form-label">Always Send Scancodes</label>
-        <select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">
-          Sending scancodes enhances compatibility with games and apps
-          but may result in incorrect keyboard input from certain clients
-          that aren't using a US English keyboard layout.<br />
-          Enable if keyboard input is not working at all in certain applications.<br />
-          Disable if keys on the client are generating the wrong input on the host.
+        <!-- Always send scancodes -->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="always_send_scancodes" class="form-label">Always Send Scancodes</label>
+          <select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">
+            Sending scancodes enhances compatibility with games and apps
+            but may result in incorrect keyboard input from certain clients
+            that aren't using a US English keyboard layout.<br />
+            Enable if keyboard input is not working at all in certain applications.<br />
+            Disable if keys on the client are generating the wrong input on the host.
+          </div>
         </div>
       </div>
-    </div>
-    <!--Files Tab-->
-    <div v-if="currentTab === 'av'" class="config-page">
-      <!--Audio Sink-->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="audio_sink" class="form-label">Audio Sink</label>
-        <input type="text" class="form-control" id="audio_sink" placeholder="Speakers (High Definition Audio Device)"
-          v-model="config.audio_sink" />
-        <div class="form-text">
-          Manually specify a specific audio device to capture. If unset, the device is chosen automatically.<br />
-          <b>We strongly recommend leaving this field blank to use automatic device selection!</b><br />
-          If you have multiple audio devices with identical names, you can get the Device ID using the following
-          command:<br />
-          <pre>tools\audio-info.exe</pre>
+      <!--Files Tab-->
+      <div v-if="currentTab === 'av'" class="config-page">
+        <!--Audio Sink-->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="audio_sink" class="form-label">Audio Sink</label>
+          <input type="text" class="form-control" id="audio_sink" placeholder="Speakers (High Definition Audio Device)"
+            v-model="config.audio_sink" />
+          <div class="form-text">
+            Manually specify a specific audio device to capture. If unset, the device is chosen automatically.<br />
+            <b>We strongly recommend leaving this field blank to use automatic device selection!</b><br />
+            If you have multiple audio devices with identical names, you can get the Device ID using the following
+            command:<br />
+            <pre>tools\audio-info.exe</pre>
+          </div>
         </div>
-      </div>
-      <div class="mb-3" v-if="platform === 'linux'">
-        <label for="audio_sink" class="form-label">Audio Sink</label>
-        <input type="text" class="form-control" id="audio_sink" placeholder="alsa_output.pci-0000_09_00.3.analog-stereo"
-          v-model="config.audio_sink" />
-        <div class="form-text">
-          The name of the audio sink used for Audio Loopback<br />
-          If you do not specify this variable, pulseaudio will select the default monitor device.<br />
-          <br />
-          You can find the name of the audio sink using either command:<br />
-          <pre>pacmd list-sinks | grep "name:"</pre>
-          <pre>pactl info | grep Source</pre>
-          <br />
+        <div class="mb-3" v-if="platform === 'linux'">
+          <label for="audio_sink" class="form-label">Audio Sink</label>
+          <input type="text" class="form-control" id="audio_sink"
+            placeholder="alsa_output.pci-0000_09_00.3.analog-stereo" v-model="config.audio_sink" />
+          <div class="form-text">
+            The name of the audio sink used for Audio Loopback<br />
+            If you do not specify this variable, pulseaudio will select the default monitor device.<br />
+            <br />
+            You can find the name of the audio sink using either command:<br />
+            <pre>pacmd list-sinks | grep "name:"</pre>
+            <pre>pactl info | grep Source</pre>
+            <br />
+          </div>
         </div>
-      </div>
-      <div class="mb-3" v-if="platform === 'macos'">
-        <label for="audio_sink" class="form-label">Audio Sink</label>
-        <input type="text" class="form-control" id="audio_sink" placeholder="BlackHole 2ch"
-          v-model="config.audio_sink" />
-        <div class="form-text">
-          The name of the audio sink used for Audio Loopback<br />
-          Sunshine can only access microphones on macOS due to system limitations.<br />
-          To stream system audio using <a href="https://github.com/mattingalls/Soundflower" target="_blank">
-            Soundflower
-          </a> or <a href="https://github.com/ExistentialAudio/BlackHole" target="_blank">
-            BlackHole
-          </a>.
+        <div class="mb-3" v-if="platform === 'macos'">
+          <label for="audio_sink" class="form-label">Audio Sink</label>
+          <input type="text" class="form-control" id="audio_sink" placeholder="BlackHole 2ch"
+            v-model="config.audio_sink" />
+          <div class="form-text">
+            The name of the audio sink used for Audio Loopback<br />
+            Sunshine can only access microphones on macOS due to system limitations.<br />
+            To stream system audio using <a href="https://github.com/mattingalls/Soundflower" target="_blank">
+              Soundflower
+            </a> or <a href="https://github.com/ExistentialAudio/BlackHole" target="_blank">
+              BlackHole
+            </a>.
+          </div>
         </div>
-      </div>
-      <!--Virtual Sink-->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="virtual_sink" class="form-label">Virtual Sink</label>
-        <input type="text" class="form-control" id="virtual_sink" placeholder="Steam Streaming Speakers"
-          v-model="config.virtual_sink" />
-        <div class="form-text">
-          Manually specify a virtual audio device to use. If unset, the device is chosen automatically.<br />
-          <b>We strongly recommend leaving this field blank to use automatic device selection!</b><br />
+        <!--Virtual Sink-->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="virtual_sink" class="form-label">Virtual Sink</label>
+          <input type="text" class="form-control" id="virtual_sink" placeholder="Steam Streaming Speakers"
+            v-model="config.virtual_sink" />
+          <div class="form-text">
+            Manually specify a virtual audio device to use. If unset, the device is chosen automatically.<br />
+            <b>We strongly recommend leaving this field blank to use automatic device selection!</b><br />
+          </div>
         </div>
-      </div>
-      <!--Install Steam Audio Drivers-->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="install_steam_audio_drivers" class="form-label">Install Steam Audio Drivers</label>
-        <select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">
-          If Steam is installed, this will automatically install the Steam Streaming Speakers driver to support
-          5.1/7.1 surround sound and muting host audio.
+        <!--Install Steam Audio Drivers-->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="install_steam_audio_drivers" class="form-label">Install Steam Audio Drivers</label>
+          <select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">
+            If Steam is installed, this will automatically install the Steam Streaming Speakers driver to support
+            5.1/7.1 surround sound and muting host audio.
+          </div>
         </div>
-      </div>
-      <!--Adapter Name -->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="adapter_name" class="form-label">Adapter Name</label>
-        <input type="text" class="form-control" id="adapter_name" placeholder="Radeon RX 580 Series"
-          v-model="config.adapter_name" />
-        <div class="form-text" v-if="platform === 'windows'">
-          Manually specify a GPU to use for capture. If unset, the GPU is chosen automatically.<br />
-          <b>We strongly recommend leaving this field blank to use automatic GPU selection!</b><br />
-          Note: This GPU must have a display connected and powered on.<br />
-          The appropriate values can be found using the following command:<br />
-          <pre>tools\dxgi-info.exe</pre>
+        <!--Adapter Name -->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="adapter_name" class="form-label">Adapter Name</label>
+          <input type="text" class="form-control" id="adapter_name" placeholder="Radeon RX 580 Series"
+            v-model="config.adapter_name" />
+          <div class="form-text" v-if="platform === 'windows'">
+            Manually specify a GPU to use for capture. If unset, the GPU is chosen automatically.<br />
+            <b>We strongly recommend leaving this field blank to use automatic GPU selection!</b><br />
+            Note: This GPU must have a display connected and powered on.<br />
+            The appropriate values can be found using the following command:<br />
+            <pre>tools\dxgi-info.exe</pre>
+          </div>
         </div>
-      </div>
-      <!--Output Name -->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="output_name" class="form-label">Output Name</label>
-        <input type="text" class="form-control" id="output_name" placeholder="\\.\DISPLAY1"
-          v-model="config.output_name" />
-        <div class="form-text">
-          Manually specify a display to use for capture. If unset, the primary display is captured.<br />
-          Note: If you specified a GPU above, this display must be connected to that GPU.<br />
-          The appropriate values can be found using the following command:<br />
-          tools\dxgi-info.exe<br />
+        <!--Output Name -->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="output_name" class="form-label">Output Name</label>
+          <input type="text" class="form-control" id="output_name" placeholder="\\.\DISPLAY1"
+            v-model="config.output_name" />
+          <div class="form-text">
+            Manually specify a display to use for capture. If unset, the primary display is captured.<br />
+            Note: If you specified a GPU above, this display must be connected to that GPU.<br />
+            The appropriate values can be found using the following command:<br />
+            tools\dxgi-info.exe<br />
+          </div>
         </div>
-      </div>
-      <div class="mb-3" v-if="platform === 'linux'">
-        <label for="output_name" class="form-label">Monitor number</label>
-        <input type="text" class="form-control" id="output_name" placeholder="0" v-model="config.output_name" />
-        <div class="form-text">
-          During Sunshine startup, you should see the list of detected monitors, e.g.:<br />
-          <br />
-          <pre style="white-space: pre-line;">
+        <div class="mb-3" v-if="platform === 'linux'">
+          <label for="output_name" class="form-label">Monitor number</label>
+          <input type="text" class="form-control" id="output_name" placeholder="0" v-model="config.output_name" />
+          <div class="form-text">
+            During Sunshine startup, you should see the list of detected monitors, e.g.:<br />
+            <br />
+            <pre style="white-space: pre-line;">
             Info: Detecting connected monitors
             Info: Detected monitor 0: DVI-D-0, connected: false
             Info: Detected monitor 1: HDMI-0, connected: true
@@ -411,419 +428,428 @@ <h1 class="my-4">Configuration</h1>
             Info: Detected monitor 3: DP-1, connected: false
             Info: Detected monitor 4: DVI-D-1, connected: false
           </pre>
-          You need to use the value before the colon in the output, e.g. <b>1</b>.
+            You need to use the value before the colon in the output, e.g. <b>1</b>.
+          </div>
         </div>
       </div>
-    </div>
-    <div v-if="currentTab === 'advanced'" class="config-page">
-      <!--Address family-->
-      <div class="mb-3">
-        <label for="address_family" class="form-label">Address Family</label>
-        <select id="address_family" class="form-select" v-model="config.address_family">
-          <option value="ipv4">IPv4 only</option>
-          <option value="both">IPv4+IPv6</option>
-        </select>
-        <div class="form-text">Set the address family used by Sunshine</div>
-      </div>
-      <!--Port family-->
-      <div class="mb-3">
-        <label for="port" class="form-label">Port</label>
-        <input type="number" min="0" max="65529" class="form-control" id="port" placeholder="47989"
-          v-model="config.port" />
-        <div class="form-text">Set the family of ports used by Sunshine</div>
-      </div>
-      <!-- Quantization Parameter -->
-      <div class="mb-3">
-        <label for="qp" class="form-label">Quantization Parameter</label>
-        <input type="number" class="form-control" id="qp" placeholder="28" v-model="config.qp" />
-        <div class="form-text">
-          Quantization Parameter<br />
-          Some devices may not support Constant Bit Rate.<br />
-          For those devices, QP is used instead.<br />
-          Higher value means more compression, but less quality<br />
+      <div v-if="currentTab === 'advanced'" class="config-page">
+        <!--Address family-->
+        <div class="mb-3">
+          <label for="address_family" class="form-label">Address Family</label>
+          <select id="address_family" class="form-select" v-model="config.address_family">
+            <option value="ipv4">IPv4 only</option>
+            <option value="both">IPv4+IPv6</option>
+          </select>
+          <div class="form-text">Set the address family used by Sunshine</div>
         </div>
-      </div>
-      <!-- Min Threads -->
-      <div class="mb-3">
-        <label for="min_threads" class="form-label">Minimum Software Encoding Thread Count</label>
-        <input type="number" min="1" class="form-control" id="min_threads" placeholder="1"
-          v-model="config.min_threads" />
-        <div class="form-text">
-          Increasing the value slightly reduces encoding efficiency, but the tradeoff is usually<br />
-          worth it to gain the use of more CPU cores for encoding. The ideal value is the lowest<br />
-          value that can reliably encode at your desired streaming settings on your hardware.
+        <!--Port family-->
+        <div class="mb-3">
+          <label for="port" class="form-label">Port</label>
+          <input type="number" min="0" max="65529" class="form-control" id="port" placeholder="47989"
+            v-model="config.port" />
+          <div class="form-text">Set the family of ports used by Sunshine</div>
         </div>
-      </div>
-      <!--HEVC Support -->
-      <div class="mb-3">
-        <label for="hevc_mode" class="form-label">HEVC Support</label>
-        <select id="hevc_mode" class="form-select" v-model="config.hevc_mode">
-          <option value="0">
-            Sunshine will advertise support for HEVC based on encoder capabilities (recommended)
-          </option>
-          <option value="1">
-            Sunshine will not advertise support for HEVC
-          </option>
-          <option value="2">
-            Sunshine will advertise support for HEVC Main profile
-          </option>
-          <option value="3">
-            Sunshine will advertise support for HEVC Main and Main10 (HDR) profiles
-          </option>
-        </select>
-        <div class="form-text">
-          Allows the client to request HEVC Main or HEVC Main10 video streams.<br />
-          HEVC is more CPU-intensive to encode, so enabling this may reduce performance when using software encoding.
+        <!-- Quantization Parameter -->
+        <div class="mb-3">
+          <label for="qp" class="form-label">Quantization Parameter</label>
+          <input type="number" class="form-control" id="qp" placeholder="28" v-model="config.qp" />
+          <div class="form-text">
+            Quantization Parameter<br />
+            Some devices may not support Constant Bit Rate.<br />
+            For those devices, QP is used instead.<br />
+            Higher value means more compression, but less quality<br />
+          </div>
         </div>
-      </div>
-      <!--AV1 Support -->
-      <div class="mb-3">
-        <label for="av1_mode" class="form-label">AV1 Support</label>
-        <select id="av1_mode" class="form-select" v-model="config.av1_mode">
-          <option value="0">
-            Sunshine will advertise support for AV1 based on encoder capabilities (recommended)
-          </option>
-          <option value="1">
-            Sunshine will not advertise support for AV1
-          </option>
-          <option value="2">
-            Sunshine will advertise support for AV1 Main 8-bit profile
-          </option>
-          <option value="3">
-            Sunshine will advertise support for AV1 Main 8-bit and 10-bit (HDR) profiles
-          </option>
-        </select>
-        <div class="form-text">
-          Allows the client to request AV1 Main 8-bit or 10-bit video streams.<br />
-          AV1 is more CPU-intensive to encode, so enabling this may reduce performance when using software encoding.
+        <!-- Min Threads -->
+        <div class="mb-3">
+          <label for="min_threads" class="form-label">Minimum Software Encoding Thread Count</label>
+          <input type="number" min="1" class="form-control" id="min_threads" placeholder="1"
+            v-model="config.min_threads" />
+          <div class="form-text">
+            Increasing the value slightly reduces encoding efficiency, but the tradeoff is usually<br />
+            worth it to gain the use of more CPU cores for encoding. The ideal value is the lowest<br />
+            value that can reliably encode at your desired streaming settings on your hardware.
+          </div>
         </div>
-      </div>
-      <!--Capture-->
-      <div class="mb-3" v-if="platform === 'linux'">
-        <label for="capture" class="form-label">Force a Specific Capture Method</label>
-        <select id="capture" class="form-select" v-model="config.capture">
-          <option value="">Autodetect</option>
-          <option value="nvfbc">NvFBC</option>
-          <option value="wlr">wlroots</option>
-          <option value="kms">KMS</option>
-          <option value="x11">X11</option>
-        </select>
-        <div class="form-text">
-          Force a specific capture method, otherwise Sunshine will use the first one that works. NvFBC requires patched
-          nvidia drivers.
+        <!--HEVC Support -->
+        <div class="mb-3">
+          <label for="hevc_mode" class="form-label">HEVC Support</label>
+          <select id="hevc_mode" class="form-select" v-model="config.hevc_mode">
+            <option value="0">
+              Sunshine will advertise support for HEVC based on encoder capabilities (recommended)
+            </option>
+            <option value="1">
+              Sunshine will not advertise support for HEVC
+            </option>
+            <option value="2">
+              Sunshine will advertise support for HEVC Main profile
+            </option>
+            <option value="3">
+              Sunshine will advertise support for HEVC Main and Main10 (HDR) profiles
+            </option>
+          </select>
+          <div class="form-text">
+            Allows the client to request HEVC Main or HEVC Main10 video streams.<br />
+            HEVC is more CPU-intensive to encode, so enabling this may reduce performance when using software encoding.
+          </div>
         </div>
-      </div>
-      <!--Encoder-->
-      <div class="mb-3">
-        <label for="encoder" class="form-label">Force a Specific Encoder</label>
-        <select id="encoder" class="form-select" v-model="config.encoder">
-          <option value="">Autodetect</option>
-          <option value="nvenc" v-if="platform === 'windows' || platform === 'linux'">NVIDIA NVENC</option>
-          <option value="quicksync" v-if="platform === 'windows'">Intel QuickSync</option>
-          <option value="amdvce" v-if="platform === 'windows'">AMD AMF/VCE</option>
-          <option value="vaapi" v-if="platform === 'linux'">VA-API</option>
-          <option value="videotoolbox" v-if="platform === 'macos'">VideoToolbox</option>
-          <option value="software">Software</option>
-        </select>
-        <div class="form-text">
-          Force a specific encoder, otherwise Sunshine will use the first encoder that is available<br />
-          Note: If you specify a hardware encoder on Windows, it must match the GPU where the display is connected.
+        <!--AV1 Support -->
+        <div class="mb-3">
+          <label for="av1_mode" class="form-label">AV1 Support</label>
+          <select id="av1_mode" class="form-select" v-model="config.av1_mode">
+            <option value="0">
+              Sunshine will advertise support for AV1 based on encoder capabilities (recommended)
+            </option>
+            <option value="1">
+              Sunshine will not advertise support for AV1
+            </option>
+            <option value="2">
+              Sunshine will advertise support for AV1 Main 8-bit profile
+            </option>
+            <option value="3">
+              Sunshine will advertise support for AV1 Main 8-bit and 10-bit (HDR) profiles
+            </option>
+          </select>
+          <div class="form-text">
+            Allows the client to request AV1 Main 8-bit or 10-bit video streams.<br />
+            AV1 is more CPU-intensive to encode, so enabling this may reduce performance when using software encoding.
+          </div>
         </div>
-      </div>
-      <!--FEC Percentage-->
-      <div class="mb-3">
-        <label for="fec_percentage" class="form-label">FEC Percentage</label>
-        <input type="text" class="form-control" id="fec_percentage" placeholder="20" v-model="config.fec_percentage" />
-        <div class="form-text">
-          Percentage of error correcting packets per data packet in each video frame.<br />
-          Higher values can correct for more network packet loss, but at the cost of increasing bandwidth usage.<br />
-          The default value of 20 is what GeForce Experience uses.
+        <!--Capture-->
+        <div class="mb-3" v-if="platform === 'linux'">
+          <label for="capture" class="form-label">Force a Specific Capture Method</label>
+          <select id="capture" class="form-select" v-model="config.capture">
+            <option value="">Autodetect</option>
+            <option value="nvfbc">NvFBC</option>
+            <option value="wlr">wlroots</option>
+            <option value="kms">KMS</option>
+            <option value="x11">X11</option>
+          </select>
+          <div class="form-text">
+            Force a specific capture method, otherwise Sunshine will use the first one that works. NvFBC requires
+            patched
+            nvidia drivers.
+          </div>
         </div>
-      </div>
-      <!--Channels-->
-      <div class="mb-3">
-        <label for="channels" class="form-label">Channels</label>
-        <input type="text" class="form-control" id="channels" placeholder="1" v-model="config.channels" />
-        <div class="form-text">
-          When multicasting, it could be useful to have different configurations for each connected Client. For example:
-          <ul>
-            <li>
-              Clients connected through WAN and LAN have different bitrate constraints.
-            </li>
-            <li>
-              Decoders may require different settings for color
-            </li>
-          </ul>
-          Unlike simply broadcasting to multiple Client, this will generate distinct video streams.<br />
-          Note, CPU usage increases for each distinct video stream generated
+        <!--Encoder-->
+        <div class="mb-3">
+          <label for="encoder" class="form-label">Force a Specific Encoder</label>
+          <select id="encoder" class="form-select" v-model="config.encoder">
+            <option value="">Autodetect</option>
+            <option value="nvenc" v-if="platform === 'windows' || platform === 'linux'">NVIDIA NVENC</option>
+            <option value="quicksync" v-if="platform === 'windows'">Intel QuickSync</option>
+            <option value="amdvce" v-if="platform === 'windows'">AMD AMF/VCE</option>
+            <option value="vaapi" v-if="platform === 'linux'">VA-API</option>
+            <option value="videotoolbox" v-if="platform === 'macos'">VideoToolbox</option>
+            <option value="software">Software</option>
+          </select>
+          <div class="form-text">
+            Force a specific encoder, otherwise Sunshine will use the first encoder that is available<br />
+            Note: If you specify a hardware encoder on Windows, it must match the GPU where the display is connected.
+          </div>
         </div>
-      </div>
-      <!--Credentials File-->
-      <div class="mb-3">
-        <label for="credentials_file" class="form-label">Web Manager Credentials File</label>
-        <input type="text" class="form-control" id="credentials_file" placeholder="sunshine_state.json"
-          v-model="config.credentials_file" />
-        <div class="form-text">
-          Store Username/Password separately from Sunshine's state file.
+        <!--FEC Percentage-->
+        <div class="mb-3">
+          <label for="fec_percentage" class="form-label">FEC Percentage</label>
+          <input type="text" class="form-control" id="fec_percentage" placeholder="20"
+            v-model="config.fec_percentage" />
+          <div class="form-text">
+            Percentage of error correcting packets per data packet in each video frame.<br />
+            Higher values can correct for more network packet loss, but at the cost of increasing bandwidth usage.<br />
+            The default value of 20 is what GeForce Experience uses.
+          </div>
         </div>
-      </div>
-      <!--Origin PIN Allowed-->
-      <div class="mb-3">
-        <label for="origin_pin_allowed" class="form-label">Origin PIN Allowed</label>
-        <select id="origin_pin_allowed" class="form-select" v-model="config.origin_pin_allowed">
-          <option value="pc">Only localhost may access /pin</option>
-          <option value="lan">Only those in LAN may access /pin</option>
-          <option value="wan">Anyone may access /pin</option>
-        </select>
-        <div class="form-text">
-          The origin of the remote endpoint address that is not denied for HTTP method /pin
+        <!--Channels-->
+        <div class="mb-3">
+          <label for="channels" class="form-label">Channels</label>
+          <input type="text" class="form-control" id="channels" placeholder="1" v-model="config.channels" />
+          <div class="form-text">
+            When multicasting, it could be useful to have different configurations for each connected Client. For
+            example:
+            <ul>
+              <li>
+                Clients connected through WAN and LAN have different bitrate constraints.
+              </li>
+              <li>
+                Decoders may require different settings for color
+              </li>
+            </ul>
+            Unlike simply broadcasting to multiple Client, this will generate distinct video streams.<br />
+            Note, CPU usage increases for each distinct video stream generated
+          </div>
         </div>
-      </div>
-      <!--External IP-->
-      <div class="mb-3">
-        <label for="external_ip" class="form-label">External IP</label>
-        <input type="text" class="form-control" id="external_ip" placeholder="123.456.789.12"
-          v-model="config.external_ip" />
-        <div class="form-text">
-          If no external IP address is given, Sunshine will automatically detect external IP
+        <!--Credentials File-->
+        <div class="mb-3">
+          <label for="credentials_file" class="form-label">Web Manager Credentials File</label>
+          <input type="text" class="form-control" id="credentials_file" placeholder="sunshine_state.json"
+            v-model="config.credentials_file" />
+          <div class="form-text">
+            Store Username/Password separately from Sunshine's state file.
+          </div>
         </div>
-      </div>
-    </div>
-    <!--Software Settings-->
-    <div v-if="currentTab === 'sw'" class="config-page">
-      <div class="mb-3">
-        <label for="sw_preset" class="form-label">SW Presets</label>
-        <select id="sw_preset" class="form-select" v-model="config.sw_preset">
-          <option value="ultrafast">ultrafast</option>
-          <option value="superfast">superfast (default)</option>
-          <option value="veryfast">veryfast</option>
-          <option value="faster">faster</option>
-          <option value="fast">fast</option>
-          <option value="medium">medium</option>
-          <option value="slow">slow</option>
-          <option value="slower">slower</option>
-          <option value="veryslow">veryslow</option>
-        </select>
-        <div class="form-text">
-          Optimize the trade-off between encoding speed (encoded frames per second) and compression efficiency (quality
-          per bit in the bitstream). Defaults to superfast.
+        <!--Origin PIN Allowed-->
+        <div class="mb-3">
+          <label for="origin_pin_allowed" class="form-label">Origin PIN Allowed</label>
+          <select id="origin_pin_allowed" class="form-select" v-model="config.origin_pin_allowed">
+            <option value="pc">Only localhost may access /pin</option>
+            <option value="lan">Only those in LAN may access /pin</option>
+            <option value="wan">Anyone may access /pin</option>
+          </select>
+          <div class="form-text">
+            The origin of the remote endpoint address that is not denied for HTTP method /pin
+          </div>
         </div>
-      </div>
-      <div class="mb-3">
-        <label for="sw_tune" class="form-label">SW Tune</label>
-        <select id="sw_tune" class="form-select" v-model="config.sw_tune">
-          <option value="film">film -- use for high quality movie content; lowers deblocking</option>
-          <option value="animation">animation -- good for cartoons; uses higher deblocking and more reference frames
-          </option>
-          <option value="grain">grain -- preserves the grain structure in old, grainy film material</option>
-          <option value="stillimage">stillimage -- good for slideshow-like content</option>
-          <option value="fastdecode">fastdecode -- allows faster decoding by disabling certain filters</option>
-          <option value="zerolatency">zerolatency -- good for fast encoding and low-latency streaming (default)</option>
-        </select>
-        <div class="form-text">
-          Tuning options, which are applied after the preset. Defaults to zerolatency.
+        <!--External IP-->
+        <div class="mb-3">
+          <label for="external_ip" class="form-label">External IP</label>
+          <input type="text" class="form-control" id="external_ip" placeholder="123.456.789.12"
+            v-model="config.external_ip" />
+          <div class="form-text">
+            If no external IP address is given, Sunshine will automatically detect external IP
+          </div>
         </div>
       </div>
-    </div>
-    <!--Nvidia Encoder Settings-->
-    <div v-if="currentTab === 'nv'" class="config-page">
-      <!--NVENC SETTINGS-->
-      <div class="mb-3">
-        <label for="nvenc_preset" class="form-label">Performance preset</label>
-        <select id="nvenc_preset" class="form-select" v-model="config.nvenc_preset">
-          <option value="1">P1 (fastest, default)</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 (slowest)</option>
-        </select>
-        <div class="form-text">Higher numbers improve compression (quality at given bitrate) at the cost of
-          <strong>increased encoding latency</strong>.<br>
-          Recommended to change only when limited by network or decoder, otherwise similar effect can be accomplished by
-          increasing bitrate.
+      <!--Software Settings-->
+      <div v-if="currentTab === 'sw'" class="config-page">
+        <div class="mb-3">
+          <label for="sw_preset" class="form-label">SW Presets</label>
+          <select id="sw_preset" class="form-select" v-model="config.sw_preset">
+            <option value="ultrafast">ultrafast</option>
+            <option value="superfast">superfast (default)</option>
+            <option value="veryfast">veryfast</option>
+            <option value="faster">faster</option>
+            <option value="fast">fast</option>
+            <option value="medium">medium</option>
+            <option value="slow">slow</option>
+            <option value="slower">slower</option>
+            <option value="veryslow">veryslow</option>
+          </select>
+          <div class="form-text">
+            Optimize the trade-off between encoding speed (encoded frames per second) and compression efficiency
+            (quality
+            per bit in the bitstream). Defaults to superfast.
+          </div>
         </div>
-      </div>
-      <div class="mb-3">
-        <label for="nvenc_twopass" class="form-label">Two-pass mode</label>
-        <select id="nvenc_twopass" class="form-select" v-model="config.nvenc_twopass">
-          <option value="disabled">Disabled (fastest, not recommended)</option>
-          <option value="quarter_res">Quarter resolution (faster, default)</option>
-          <option value="full_res">Full resolution (slower)</option>
-        </select>
-        <div class="form-text">Adds preliminary encoding pass.<br>
-          This allows to detect more motion vectors, better distribute bitrate across the frame and more strictly adhere
-          to
-          bitrate limits.<br>
-          Disabling it is not recommended since this can lead to occasional bitrate overshoot and subsequent packet
-          loss.
+        <div class="mb-3">
+          <label for="sw_tune" class="form-label">SW Tune</label>
+          <select id="sw_tune" class="form-select" v-model="config.sw_tune">
+            <option value="film">film -- use for high quality movie content; lowers deblocking</option>
+            <option value="animation">animation -- good for cartoons; uses higher deblocking and more reference frames
+            </option>
+            <option value="grain">grain -- preserves the grain structure in old, grainy film material</option>
+            <option value="stillimage">stillimage -- good for slideshow-like content</option>
+            <option value="fastdecode">fastdecode -- allows faster decoding by disabling certain filters</option>
+            <option value="zerolatency">zerolatency -- good for fast encoding and low-latency streaming (default)
+            </option>
+          </select>
+          <div class="form-text">
+            Tuning options, which are applied after the preset. Defaults to zerolatency.
+          </div>
         </div>
       </div>
-      <div class="accordion">
-        <div class="accordion-item">
-          <h2 class="accordion-header">
-            <button class="accordion-button" type="button" data-bs-toggle="collapse"
-              data-bs-target="#panelsStayOpen-collapseOne">
-              Miscellaneous options
-            </button>
-          </h2>
-          <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-            aria-labelledby="panelsStayOpen-headingOne">
-            <div class="accordion-body">
-              <div class="mb-3" v-if="platform === 'windows'">
-                <label for="nvenc_realtime_hags" class="form-label">Use realtime priority in hardware accelerated gpu
-                  scheduling</label>
-                <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
-                  <option value="disabled">Disabled</option>
-                  <option value="enabled">Enabled (default)</option>
-                </select>
-                <div class="form-text">Currently NVIDIA drivers may freeze in encoder when
-                  <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
-                  is enabled, realtime priority is used and VRAM utilization is close to maximum.<br>
-                  Disabling this option lowers the priority to high, sidestepping the freeze at the cost of reduced
-                  capture
-                  performance when the GPU is heavily loaded.
+      <!--Nvidia Encoder Settings-->
+      <div v-if="currentTab === 'nv'" class="config-page">
+        <!--NVENC SETTINGS-->
+        <div class="mb-3">
+          <label for="nvenc_preset" class="form-label">Performance preset</label>
+          <select id="nvenc_preset" class="form-select" v-model="config.nvenc_preset">
+            <option value="1">P1 (fastest, default)</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 (slowest)</option>
+          </select>
+          <div class="form-text">Higher numbers improve compression (quality at given bitrate) at the cost of
+            <strong>increased encoding latency</strong>.<br>
+            Recommended to change only when limited by network or decoder, otherwise similar effect can be accomplished
+            by
+            increasing bitrate.
+          </div>
+        </div>
+        <div class="mb-3">
+          <label for="nvenc_twopass" class="form-label">Two-pass mode</label>
+          <select id="nvenc_twopass" class="form-select" v-model="config.nvenc_twopass">
+            <option value="disabled">Disabled (fastest, not recommended)</option>
+            <option value="quarter_res">Quarter resolution (faster, default)</option>
+            <option value="full_res">Full resolution (slower)</option>
+          </select>
+          <div class="form-text">Adds preliminary encoding pass.<br>
+            This allows to detect more motion vectors, better distribute bitrate across the frame and more strictly
+            adhere
+            to
+            bitrate limits.<br>
+            Disabling it is not recommended since this can lead to occasional bitrate overshoot and subsequent packet
+            loss.
+          </div>
+        </div>
+        <div class="accordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                data-bs-target="#panelsStayOpen-collapseOne">
+                Miscellaneous options
+              </button>
+            </h2>
+            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+              aria-labelledby="panelsStayOpen-headingOne">
+              <div class="accordion-body">
+                <div class="mb-3" v-if="platform === 'windows'">
+                  <label for="nvenc_realtime_hags" class="form-label">Use realtime priority in hardware accelerated gpu
+                    scheduling</label>
+                  <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
+                    <option value="disabled">Disabled</option>
+                    <option value="enabled">Enabled (default)</option>
+                  </select>
+                  <div class="form-text">Currently NVIDIA drivers may freeze in encoder when
+                    <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
+                    is enabled, realtime priority is used and VRAM utilization is close to maximum.<br>
+                    Disabling this option lowers the priority to high, sidestepping the freeze at the cost of reduced
+                    capture
+                    performance when the GPU is heavily loaded.
+                  </div>
                 </div>
-              </div>
-              <div>
-                <label for="nvenc_h264_cavlc" class="form-label">Prefer CAVLC over CABAC in H.264</label>
-                <select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
-                  <option value="disabled">Disabled (default)</option>
-                  <option value="enabled">Enabled</option>
-                </select>
-                <div class="form-text">Simpler form of entropy coding.<br>
-                  CAVLC needs around 10% more bitrate for same quality.<br>
-                  Only relevant for really old decoding devices.
+                <div>
+                  <label for="nvenc_h264_cavlc" class="form-label">Prefer CAVLC over CABAC in H.264</label>
+                  <select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
+                    <option value="disabled">Disabled (default)</option>
+                    <option value="enabled">Enabled</option>
+                  </select>
+                  <div class="form-text">Simpler form of entropy coding.<br>
+                    CAVLC needs around 10% more bitrate for same quality.<br>
+                    Only relevant for really old decoding devices.
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <!--Intel Encoder Settings-->
-    <div v-if="currentTab === 'qsv'" class="config-page">
-      <div class="mb-3">
-        <label for="qsv_preset" class="form-label">QuickSync Preset</label>
-        <select id="qsv_preset" class="form-select" v-model="config.qsv_preset">
-          <option value="veryfast">fastest (lowest quality)</option>
-          <option value="faster">faster (lower quality)</option>
-          <option value="fast">fast (low quality)</option>
-          <option value="medium">medium (default)</option>
-          <option value="slow">slow (good quality)</option>
-          <option value="slower">slower (better quality)</option>
-          <option value="slowest">slowest (best quality)</option>
-        </select>
-      </div>
-      <div class="mb-3">
-        <label for="qsv_coder" class="form-label">QuickSync Coder (H264)</label>
-        <select id="qsv_coder" class="form-select" v-model="config.qsv_coder">
-          <option value="auto">auto -- let ffmpeg decide (default)</option>
-          <option value="cabac">cabac -- context adaptive binary arithmetic coding - higher quality</option>
-          <option value="cavlc">cavlc -- context adaptive variable-length coding - faster decode</option>
-        </select>
-      </div>
-    </div>
-    <!--AMD Encoder Settings-->
-    <div v-if="currentTab === 'amd'" class="config-page">
-      <!--Presets-->
-      <div class="mb-3">
-        <label for="amd_quality" class="form-label">AMF Quality</label>
-        <select id="amd_quality" class="form-select" v-model="config.amd_quality">
-          <option value="speed">speed -- prefer speed</option>
-          <option value="balanced">balanced -- balanced (default)</option>
-          <option value="quality">quality -- prefer quality</option>
-        </select>
-      </div>
-      <div class="mb-3">
-        <label for="amd_rc" class="form-label">AMF Rate Control</label>
-        <select id="amd_rc" class="form-select" v-model="config.amd_rc">
-          <option value="cqp">cqp -- constant qp mode</option>
-          <option value="vbr_latency">vbr_latency -- latency constrained variable bitrate (default)</option>
-          <option value="vbr_peak">vbr_peak -- peak constrained variable bitrate</option>
-          <option value="cbr">cbr -- constant bitrate</option>
-        </select>
-      </div>
-      <div class="mb-3">
-        <label for="amd_usage" class="form-label">AMF Usage</label>
-        <select id="amd_usage" class="form-select" v-model="config.amd_usage">
-          <option value="transcoding">transcoding -- transcoding (slowest)</option>
-          <option value="webcam">webcam -- webcam (slow)</option>
-          <option value="lowlatency">lowlatency - low latency (fast)</option>
-          <option value="ultralowlatency">ultralowlatency - ultra low latency (fastest)</option>
-        </select>
+      <!--Intel Encoder Settings-->
+      <div v-if="currentTab === 'qsv'" class="config-page">
+        <div class="mb-3">
+          <label for="qsv_preset" class="form-label">QuickSync Preset</label>
+          <select id="qsv_preset" class="form-select" v-model="config.qsv_preset">
+            <option value="veryfast">fastest (lowest quality)</option>
+            <option value="faster">faster (lower quality)</option>
+            <option value="fast">fast (low quality)</option>
+            <option value="medium">medium (default)</option>
+            <option value="slow">slow (good quality)</option>
+            <option value="slower">slower (better quality)</option>
+            <option value="slowest">slowest (best quality)</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="qsv_coder" class="form-label">QuickSync Coder (H264)</label>
+          <select id="qsv_coder" class="form-select" v-model="config.qsv_coder">
+            <option value="auto">auto -- let ffmpeg decide (default)</option>
+            <option value="cabac">cabac -- context adaptive binary arithmetic coding - higher quality</option>
+            <option value="cavlc">cavlc -- context adaptive variable-length coding - faster decode</option>
+          </select>
+        </div>
       </div>
-      <div class="mb-3">
-        <label for="amd_preanalysis" class="form-label">AMF Preanalysis</label>
-        <select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
-          <option value="enabled">enabled</option>
-          <option value="disabled">disabled (default)</option>
-        </select>
+      <!--AMD Encoder Settings-->
+      <div v-if="currentTab === 'amd'" class="config-page">
+        <!--Presets-->
+        <div class="mb-3">
+          <label for="amd_quality" class="form-label">AMF Quality</label>
+          <select id="amd_quality" class="form-select" v-model="config.amd_quality">
+            <option value="speed">speed -- prefer speed</option>
+            <option value="balanced">balanced -- balanced (default)</option>
+            <option value="quality">quality -- prefer quality</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="amd_rc" class="form-label">AMF Rate Control</label>
+          <select id="amd_rc" class="form-select" v-model="config.amd_rc">
+            <option value="cqp">cqp -- constant qp mode</option>
+            <option value="vbr_latency">vbr_latency -- latency constrained variable bitrate (default)</option>
+            <option value="vbr_peak">vbr_peak -- peak constrained variable bitrate</option>
+            <option value="cbr">cbr -- constant bitrate</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="amd_usage" class="form-label">AMF Usage</label>
+          <select id="amd_usage" class="form-select" v-model="config.amd_usage">
+            <option value="transcoding">transcoding -- transcoding (slowest)</option>
+            <option value="webcam">webcam -- webcam (slow)</option>
+            <option value="lowlatency">lowlatency - low latency (fast)</option>
+            <option value="ultralowlatency">ultralowlatency - ultra low latency (fastest)</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="amd_preanalysis" class="form-label">AMF Preanalysis</label>
+          <select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
+            <option value="enabled">enabled</option>
+            <option value="disabled">disabled (default)</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="amd_vbaq" class="form-label">AMF Variance Based Adaptive Quantization (VBAQ)</label>
+          <select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
+            <option value="enabled">enabled (default)</option>
+            <option value="disabled">disabled</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="amd_coder" class="form-label">AMF Coder (H264)</label>
+          <select id="amd_coder" class="form-select" v-model="config.amd_coder">
+            <option value="auto">auto -- let ffmpeg decide (default)</option>
+            <option value="cabac">cabac -- context adaptive variable-length coding - higher quality</option>
+            <option value="cavlc">cavlc -- context adaptive binary arithmetic coding - faster decode</option>
+          </select>
+        </div>
       </div>
-      <div class="mb-3">
-        <label for="amd_vbaq" class="form-label">AMF Variance Based Adaptive Quantization (VBAQ)</label>
-        <select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
-          <option value="enabled">enabled (default)</option>
-          <option value="disabled">disabled</option>
-        </select>
+      <!--VA-API Encoder Settings-->
+      <div v-if="currentTab === 'va-api'" class="config-page">
+        <input class="form-control" id="adapter_name" placeholder="/dev/dri/renderD128" v-model="config.adapter_name" />
       </div>
-      <div class="mb-3">
-        <label for="amd_coder" class="form-label">AMF Coder (H264)</label>
-        <select id="amd_coder" class="form-select" v-model="config.amd_coder">
-          <option value="auto">auto -- let ffmpeg decide (default)</option>
-          <option value="cabac">cabac -- context adaptive variable-length coding - higher quality</option>
-          <option value="cavlc">cavlc -- context adaptive binary arithmetic coding - faster decode</option>
-        </select>
+      <!--VideoToolbox Encoder Settings-->
+      <div v-if="currentTab === 'vt'" class="config-page">
+        <!--Presets-->
+        <div class="mb-3">
+          <label for="vt_coder" class="form-label">VideoToolbox Coder</label>
+          <select id="vt_coder" class="form-select" v-model="config.vt_coder">
+            <option value="auto">auto</option>
+            <option value="cabac">cabac</option>
+            <option value="cavlc">cavlc</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="vt_software" class="form-label">VideoToolbox Software Encoding</label>
+          <select id="vt_software" class="form-select" v-model="config.vt_software">
+            <option value="auto">auto</option>
+            <option value="disabled">disabled</option>
+            <option value="allowed">allowed</option>
+            <option value="forced">forced</option>
+          </select>
+        </div>
+        <div class="mb-3">
+          <label for="vt_realtime" class="form-label">VideoToolbox Realtime Encoding</label>
+          <select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
+            <option value="enabled">enabled</option>
+            <option value="disabled">disabled</option>
+          </select>
+        </div>
       </div>
     </div>
-    <!--VA-API Encoder Settings-->
-    <div v-if="currentTab === 'va-api'" class="config-page">
-      <input class="form-control" id="adapter_name" placeholder="/dev/dri/renderD128" v-model="config.adapter_name" />
+    <div class="alert alert-success my-4" v-if="saved && !restarted">
+      <b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.
     </div>
-    <!--VideoToolbox Encoder Settings-->
-    <div v-if="currentTab === 'vt'" class="config-page">
-      <!--Presets-->
-      <div class="mb-3">
-        <label for="vt_coder" class="form-label">VideoToolbox Coder</label>
-        <select id="vt_coder" class="form-select" v-model="config.vt_coder">
-          <option value="auto">auto</option>
-          <option value="cabac">cabac</option>
-          <option value="cavlc">cavlc</option>
-        </select>
-      </div>
-      <div class="mb-3">
-        <label for="vt_software" class="form-label">VideoToolbox Software Encoding</label>
-        <select id="vt_software" class="form-select" v-model="config.vt_software">
-          <option value="auto">auto</option>
-          <option value="disabled">disabled</option>
-          <option value="allowed">allowed</option>
-          <option value="forced">forced</option>
-        </select>
-      </div>
-      <div class="mb-3">
-        <label for="vt_realtime" class="form-label">VideoToolbox Realtime Encoding</label>
-        <select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
-          <option value="enabled">enabled</option>
-          <option value="disabled">disabled</option>
-        </select>
-      </div>
+    <div class="alert alert-success my-4" v-if="restarted">
+      <b>Success!</b> Sunshine is restarting to apply changes.
+    </div>
+    <div class="mb-3 buttons">
+      <button class="btn btn-primary" @click="save">Save</button>
+      <button class="btn btn-success" @click="apply" v-if="saved && !restarted">Apply</button>
     </div>
   </div>
-  <div class="alert alert-success my-4" v-if="saved && !restarted">
-    <b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.
-  </div>
-  <div class="alert alert-success my-4" v-if="restarted">
-    <b>Success!</b> Sunshine is restarting to apply changes.
-  </div>
-  <div class="mb-3 buttons">
-    <button class="btn btn-primary" @click="save">Save</button>
-    <button class="btn btn-success" @click="apply" v-if="saved && !restarted">Apply</button>
-  </div>
-</div>
-
+</body>
 <script type="module">
   import { createApp } from 'vue'
+  import SunshineHeader from './SunshineHeader.vue'
+
   // create dictionary for defaultConfig
   const defaultConfig = {
     "address_family": "ipv4",
@@ -866,6 +892,9 @@ <h2 class="accordion-header">
   }
 
   const app = createApp({
+    components: {
+      SunshineHeader
+    },
     data() {
       return {
         platform: "",
diff --git a/src_assets/common/assets/web/header-no-nav.html b/src_assets/common/assets/web/header-no-nav.html
deleted file mode 100644
index 58b5ea2aef9..00000000000
--- a/src_assets/common/assets/web/header-no-nav.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!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" />
-    <title>Sunshine</title>
-    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <script type="module">import bootstrap from 'bootstrap' </script>
-  </head>
-
-  <body></body>
-</html>
diff --git a/src_assets/common/assets/web/header.html b/src_assets/common/assets/web/header.html
deleted file mode 100644
index 1c0b82c86b6..00000000000
--- a/src_assets/common/assets/web/header.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!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" />
-    <title>Sunshine</title>
-    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-    <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-  </head>
-
-  <body>
-    <nav
-      class="navbar navbar-expand-lg navbar-light"
-      style="background-color: #ffc400"
-    >
-      <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="/"><i class="fas fa-fw fa-home"></i> Home</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="/pin"><i class="fas fa-fw fa-unlock"></i> PIN</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="/apps"><i class="fas fa-fw fa-stream"></i> Applications</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="/config"><i class="fas fa-fw fa-cog"></i> Configuration</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="/password"><i class="fas fa-fw fa-user-shield"></i> Change Password</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="/troubleshooting"><i class="fas fa-fw fa-info"></i> Troubleshooting</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  </body>
-</html>
-
-<script>
-  let el = document.querySelector("a[href='"+document.location.pathname+"']");
-  if(el)el.classList.add("active")
-</script>
-
-<style>
-  .nav-link.active {
-    font-weight: 500;
-  }
-  .form-control::placeholder {
-    opacity: 0.5;
-  }
-</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index fa21680ade3..71bc2c2f87b 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -1,84 +1,76 @@
-<div id="content" class="container">
-  <h1 class="my-4">Hello, Sunshine!</h1>
-  <p>Sunshine is a self-hosted game stream host for Moonlight.</p>
-  <!--Version-->
-  <div class="card p-2 my-4">
-    <div class="card-body" v-if="version">
-      <h2>Version {{version}}</h2>
-      <br />
-      <div v-if="loading">
-        Loading Latest Release...
-      </div>
-      <div class="alert alert-success" v-if="buildVersionIsDirty">
-        Thank you for helping to make Sunshine a better software! 🌇
-      </div>
-      <div v-else-if="!nightlyBuildAvailable && !stableBuildAvailable && !buildVersionIsDirty">
-        <div class="alert alert-success">
-          You're running the latest version of Sunshine
+<!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" />
+  <title>Sunshine</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body id="app">
+  <Sunshine-Header></Sunshine-Header>
+  <div id="content" class="container">
+    <h1 class="my>-4">Hello, Sunshine!</h1>
+    <p>Sunshine is a self-hosted game stream host for Moonlight.</p>
+    <!--Version-->
+    <div class="card p-2 my-4">
+      <div class="card-body" v-if="version">
+        <h2>Version {{version}}</h2>
+        <br />
+        <div v-if="loading">
+          Loading Latest Release...
         </div>
-      </div>
-      <div v-if="nightlyBuildAvailable">
-        <div class="alert alert-warning">
-          <div class="d-flex justify-content-between">
-            <div class="my-2">A new <b>Nightly</b> Version is Available!</div>
-            <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev"
-              target="_blank">Download</a>
+        <div class="alert alert-success" v-if="buildVersionIsDirty">
+          Thank you for helping to make Sunshine a better software! 🌇
+        </div>
+        <div v-else-if="!nightlyBuildAvailable && !stableBuildAvailable && !buildVersionIsDirty">
+          <div class="alert alert-success">
+            You're running the latest version of Sunshine
           </div>
-          <pre><b>{{nightlyData.head_sha}}</b></pre>
-          <pre>{{nightlyData.display_title}}</pre>
         </div>
-      </div>
-      <div v-if="stableBuildAvailable">
-        <div class="alert alert-warning">
-          <div class="d-flex justify-content-between">
-            <div class="my-2">A new <b>Stable</b> Version is Available!</div>
-            <a class="btn btn-success m-1" :href="githubVersion.html_url" target="_blank">Download</a>
+        <div v-if="nightlyBuildAvailable">
+          <div class="alert alert-warning">
+            <div class="d-flex justify-content-between">
+              <div class="my-2">A new <b>Nightly</b> Version is Available!</div>
+              <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev"
+                target="_blank">Download</a>
+            </div>
+            <pre><b>{{nightlyData.head_sha}}</b></pre>
+            <pre>{{nightlyData.display_title}}</pre>
+          </div>
+        </div>
+        <div v-if="stableBuildAvailable">
+          <div class="alert alert-warning">
+            <div class="d-flex justify-content-between">
+              <div class="my-2">A new <b>Stable</b> Version is Available!</div>
+              <a class="btn btn-success m-1" :href="githubVersion.html_url" target="_blank">Download</a>
+            </div>
+            <h3>{{githubVersion.name}}</h3>
+            <pre>{{githubVersion.body}}</pre>
           </div>
-          <h3>{{githubVersion.name}}</h3>
-          <pre>{{githubVersion.body}}</pre>
         </div>
       </div>
     </div>
+    <!--Resources-->
+    <Resource-Card></Resource-Card>
   </div>
-  <!--Resources-->
-  <div class="card p-2 my-4">
-    <div class="card-body">
-      <h2>Resources</h2>
-      <br />
-      <p>
-        Resources for Sunshine!
-      </p>
-      <div class="card-group p-4 align-items-center">
-        <a class="btn btn-success m-1" href="https://app.lizardbyte.dev" target="_blank">LizardByte Website</a>
-        <a class="btn btn-primary m-1" href="https://app.lizardbyte.dev/discord" target="_blank">
-          <i class="fab fa-fw fa-discord"></i> Discord</a>
-        <a class="btn btn-secondary m-1" href="https://github.com/LizardByte/Sunshine/discussions" target="_blank">
-          <i class="fab fa-fw fa-github"></i> Github Discussions</a>
-      </div>
-    </div>
-  </div>
-  <!--Legal-->
-  <div class="card p-2 my-4">
-    <div class="card-body">
-      <h2>Legal</h2>
-      <br />
-      <p>
-        By continuing to use this software you agree to the terms and conditions in the following documents.
-      </p>
-      <div class="card-group p-4 align-items-center">
-        <a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/LICENSE" target="_blank">
-          <i class="fas fa-fw fa-file-alt"></i> License</a>
-        <a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/NOTICE" target="_blank">
-          <i class="fas fa-fw fa-exclamation"></i> Third Party Notice</a>
-      </div>
-    </div>
-  </div>
-</div>
+</body>
 
 <script type="module">
   import { createApp } from 'vue'
+  import SunshineHeader from './SunshineHeader.vue'
+  import ResourceCard from './ResourceCard.vue'
   console.log("Hello, Sunshine!")
   let app = createApp({
+    components: {
+      SunshineHeader,
+      ResourceCard
+    },
     data() {
       return {
         version: null,
@@ -139,5 +131,5 @@ <h2>Legal</h2>
       }
     }
   });
-  app.mount('#content');
+  app.mount('#app');
 </script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index 03074d7060a..2de7f8f7be7 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -1,85 +1,77 @@
-<div id="app" class="container">
-  <h1 class="my-4">Password Change</h1>
-  <form @submit.prevent="save">
-    <div class="card d-flex p-4 flex-row">
-      <div class="col-md-6 px-4">
-        <h4>Current Credentials</h4>
-        <div class="mb-3">
-          <label for="currentUsername" class="form-label">Username</label>
-          <input
-            required
-            type="text"
-            class="form-control"
-            id="currentUsername"
-            v-model="passwordData.currentUsername"
-          />
-          <div class="form-text">&nbsp;</div>
-        </div>
-        <div class="mb-3">
-          <label for="currentPassword" class="form-label">Password</label>
-          <input
-            autocomplete="current-password"
-            type="password"
-            class="form-control"
-            id="currentPassword"
-            v-model="passwordData.currentPassword"
-          />
-        </div>
-      </div>
-      <div class="col-md-6 px-4">
-        <h4>New Credentials</h4>
-        <div class="mb-3">
-          <label for="newUsername" class="form-label">New Username</label>
-          <input
-            type="text"
-            class="form-control"
-            id="newUsername"
-            v-model="passwordData.newUsername"
-          />
-          <div class="form-text">
-            If not specified, the username will not change
+<!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" />
+  <title>Sunshine</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body id="app">
+  <Sunshine-Header></Sunshine-Header>
+  <div class="container">
+    <h1 class="my-4">Password Change</h1>
+    <form @submit.prevent="save">
+      <div class="card d-flex p-4 flex-row">
+        <div class="col-md-6 px-4">
+          <h4>Current Credentials</h4>
+          <div class="mb-3">
+            <label for="currentUsername" class="form-label">Username</label>
+            <input required type="text" class="form-control" id="currentUsername"
+              v-model="passwordData.currentUsername" />
+            <div class="form-text">&nbsp;</div>
+          </div>
+          <div class="mb-3">
+            <label for="currentPassword" class="form-label">Password</label>
+            <input autocomplete="current-password" type="password" class="form-control" id="currentPassword"
+              v-model="passwordData.currentPassword" />
           </div>
         </div>
-        <div class="mb-3">
-          <label for="newPassword" class="form-label">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"
-            >Confirm Password</label
-          >
-          <input
-            autocomplete="new-password"
-            required
-            type="password"
-            class="form-control"
-            id="confirmNewPassword"
-            v-model="passwordData.confirmNewPassword"
-          />
+        <div class="col-md-6 px-4">
+          <h4>New Credentials</h4>
+          <div class="mb-3">
+            <label for="newUsername" class="form-label">New Username</label>
+            <input type="text" class="form-control" id="newUsername" v-model="passwordData.newUsername" />
+            <div class="form-text">
+              If not specified, the username will not change
+            </div>
+          </div>
+          <div class="mb-3">
+            <label for="newPassword" class="form-label">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">Confirm Password</label>
+            <input autocomplete="new-password" required type="password" class="form-control" id="confirmNewPassword"
+              v-model="passwordData.confirmNewPassword" />
+          </div>
         </div>
       </div>
-    </div>
-    <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
-    <div class="alert alert-success" v-if="success">
-      <b>Success! </b>This page will reload soon, your browser will ask you for
-      the new credentials
-    </div>
-    <div class="mb-3 buttons">
-      <button class="btn btn-primary">Save</button>
-    </div>
-  </form>
-</div>
-
+      <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
+      <div class="alert alert-success" v-if="success">
+        <b>Success! </b>This page will reload soon, your browser will ask you for
+        the new credentials
+      </div>
+      <div class="mb-3 buttons">
+        <button class="btn btn-primary">Save</button>
+      </div>
+    </form>
+  </div>
+</body>
 <script type="module">
-  import {createApp} from 'vue'
+  import { createApp } from 'vue'
+  import SunshineHeader from './SunshineHeader.vue'
+
   const app = createApp({
+    components: {
+      SunshineHeader
+    },
     data() {
       return {
         error: null,
@@ -132,4 +124,4 @@ <h4>New Credentials</h4>
   .buttons {
     padding: 1em 0;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
index 12911a4e08d..a1195bc880a 100644
--- a/src_assets/common/assets/web/pin.html
+++ b/src_assets/common/assets/web/pin.html
@@ -1,25 +1,46 @@
-<div id="content" class="container">
-  <h1 class="my-4">PIN Pairing</h1>
-  <form action="" class="form d-flex flex-column align-items-center" id="form">
-    <div class="card flex-column d-flex p-4 mb-4">
-      <input
-        type="number"
-        placeholder="PIN"
-        id="pin-input"
-        class="form-control my-4"
-      />
-      <button class="btn btn-primary">Send</button>
-    </div>
-    <div class="alert alert-warning">
-      <b>Warning!</b> Make sure you have access to the client you are pairing
-      with.<br />
-      This software can give total control to your computer, so be careful!
-    </div>
-    <div id="status"></div>
-  </form>
-</div>
+<!DOCTYPE html>
+<html lang="en">
 
-<script>
+<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" />
+  <title>Sunshine</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body id="app">
+  <Sunshine-Header></Sunshine-Header>
+  <div id="content" class="container">
+    <h1 class="my-4">PIN Pairing</h1>
+    <form action="" class="form d-flex flex-column align-items-center" id="form">
+      <div class="card flex-column d-flex p-4 mb-4">
+        <input type="number" placeholder="PIN" id="pin-input" class="form-control my-4" />
+        <button class="btn btn-primary">Send</button>
+      </div>
+      <div class="alert alert-warning">
+        <b>Warning!</b> Make sure you have access to the client you are pairing
+        with.<br />
+        This software can give total control to your computer, so be careful!
+      </div>
+      <div id="status"></div>
+    </form>
+  </div>
+</body>
+
+<script type="module">
+  import SunshineHeader from './SunshineHeader.vue'
+  import {createApp} from 'vue'
+  let app = createApp({
+    components: {
+      SunshineHeader
+    }
+  });
+  app.mount("#app");
+  
   document.querySelector("#form").addEventListener("submit", (e) => {
     e.preventDefault();
     let pin = document.querySelector("#pin-input").value;
@@ -40,4 +61,4 @@ <h1 class="my-4">PIN Pairing</h1>
         }
       });
   });
-</script>
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index b94a5791a12..ad9cf7de6ce 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -1,86 +1,108 @@
-<div id="app" class="container">
-  <h1 class="my-4">Troubleshooting</h1>
-  <!--Force Close App-->
-  <div class="card p-2 my-4">
-    <div class="card-body">
-      <h2>Force Close</h2>
-      <br />
-      <p>
-        If Moonlight complains about an app currently running, force closing the
-        app should fix the issue.
-      </p>
-      <div class="alert alert-success" v-if="closeAppStatus === true">
-        Application Closed Successfully!
-      </div>
-      <div class="alert alert-danger" v-if="closeAppStatus === false">
-        Error while closing Application
-      </div>
-      <div>
-        <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
-          Force Close
-        </button>
+<!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" />
+  <title>Sunshine</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body id="app">
+  <Sunshine-Header></Sunshine-Header>
+  <div class="container">
+    <h1 class="my-4">Troubleshooting</h1>
+    <!--Force Close App-->
+    <div class="card p-2 my-4">
+      <div class="card-body">
+        <h2>Force Close</h2>
+        <br />
+        <p>
+          If Moonlight complains about an app currently running, force closing the
+          app should fix the issue.
+        </p>
+        <div class="alert alert-success" v-if="closeAppStatus === true">
+          Application Closed Successfully!
+        </div>
+        <div class="alert alert-danger" v-if="closeAppStatus === false">
+          Error while closing Application
+        </div>
+        <div>
+          <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
+            Force Close
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <!--Restart Sunshine-->
-  <div class="card p-2 my-4">
-    <div class="card-body">
-      <h2>Restart Sunshine</h2>
-      <br />
-      <p>
-        If Sunshine isn't working properly, you can try restarting it.
-        This will terminate any running sessions.
-      </p>
-      <div class="alert alert-success" v-if="restartPressed === true">
-        Sunshine is restarting
-      </div>
-      <div>
-        <button class="btn btn-warning" :disabled="restartPressed" @click="restart">
-          Restart Sunshine
-        </button>
+    <!--Restart Sunshine-->
+    <div class="card p-2 my-4">
+      <div class="card-body">
+        <h2>Restart Sunshine</h2>
+        <br />
+        <p>
+          If Sunshine isn't working properly, you can try restarting it.
+          This will terminate any running sessions.
+        </p>
+        <div class="alert alert-success" v-if="restartPressed === true">
+          Sunshine is restarting
+        </div>
+        <div>
+          <button class="btn btn-warning" :disabled="restartPressed" @click="restart">
+            Restart Sunshine
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <!--Unpair all Clients-->
-  <div class="card p-2 my-4">
-    <div class="card-body">
-      <h2>Unpair All Clients</h2>
-      <br />
-      <p>Remove all your paired devices</p>
-      <div class="alert alert-success" v-if="unpairAllStatus === true">
-        Unpair Successful!
-      </div>
-      <div class="alert alert-danger" v-if="unpairAllStatus === false">
-        Error while unpairing
-      </div>
-      <div>
-        <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
-          Unpair All
-        </button>
+    <!--Unpair all Clients-->
+    <div class="card p-2 my-4">
+      <div class="card-body">
+        <h2>Unpair All Clients</h2>
+        <br />
+        <p>Remove all your paired devices</p>
+        <div class="alert alert-success" v-if="unpairAllStatus === true">
+          Unpair Successful!
+        </div>
+        <div class="alert alert-danger" v-if="unpairAllStatus === false">
+          Error while unpairing
+        </div>
+        <div>
+          <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
+            Unpair All
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <!--Logs-->
-  <div class="card p-2 my-4">
-    <div class="card-body">
-      <h2>Logs</h2>
-      <br />
-      <div class="d-flex justify-content-between align-items-baseline py-2">
-        <p>See the logs uploaded by Sunshine</p>
-        <input type="text" class="form-control" v-model="logFilter" placeholder="Find..." style="width: 300px">
-      </div>
-      <div>
-        <div class="troubleshooting-logs">
-          <button class="copy-icon"><i class="fas fa-copy " @click="copyLogs"></i></button>{{actualLogs}}
+    <!--Logs-->
+    <div class="card p-2 my-4">
+      <div class="card-body">
+        <h2>Logs</h2>
+        <br />
+        <div class="d-flex justify-content-between align-items-baseline py-2">
+          <p>See the logs uploaded by Sunshine</p>
+          <input type="text" class="form-control" v-model="logFilter" placeholder="Find..." style="width: 300px">
+        </div>
+        <div>
+          <div class="troubleshooting-logs">
+            <button class="copy-icon"><i class="fas fa-copy " @click="copyLogs"></i></button>{{actualLogs}}
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</body>
+
+<script type="module">
+  import { createApp } from 'vue'
+  import SunshineHeader from './SunshineHeader.vue'
 
-<script  type="module">
-  import {createApp} from 'vue'
   const app = createApp({
+    components: {
+      SunshineHeader
+    },
     data() {
       return {
         closeAppPressed: false,
@@ -94,8 +116,8 @@ <h2>Logs</h2>
       };
     },
     computed: {
-      actualLogs(){
-        if(!this.logFilter)return this.logs;
+      actualLogs() {
+        if (!this.logFilter) return this.logs;
         let lines = this.logs.split("\n");
         lines = lines.filter(x => x.indexOf(this.logFilter) != -1);
         return lines.join("\n");
@@ -107,7 +129,7 @@ <h2>Logs</h2>
       }, 5000);
       this.refreshLogs();
     },
-    beforeDestroy(){
+    beforeDestroy() {
       clearInterval(this.logInterval);
     },
     methods: {
@@ -142,17 +164,17 @@ <h2>Logs</h2>
             }, 5000);
           });
       },
-      copyLogs(){
+      copyLogs() {
         navigator.clipboard.writeText(this.actualLogs);
       },
       restart() {
         this.restartPressed = true;
         setTimeout(() => {
-            this.restartPressed = false;
-          }, 5000);
+          this.restartPressed = false;
+        }, 5000);
         fetch("/api/restart", {
-            method: "POST",
-          });
+          method: "POST",
+        });
       },
     },
   });
@@ -177,16 +199,17 @@ <h2>Logs</h2>
     right: 8px;
     padding: 8px;
     cursor: pointer;
-    color: rgba(0,0,0,1);
+    color: rgba(0, 0, 0, 1);
     appearance: none;
     border: none;
     background: none;
   }
 
   .copy-icon:hover {
-    color: rgba(0,0,0,0.75);
+    color: rgba(0, 0, 0, 0.75);
   }
+
   .copy-icon:active {
-    color: rgba(0,0,0,1);
+    color: rgba(0, 0, 0, 1);
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/welcome.html
index c2026eecbd2..7eaef2f844a 100644
--- a/src_assets/common/assets/web/welcome.html
+++ b/src_assets/common/assets/web/welcome.html
@@ -1,46 +1,68 @@
-<main role="main" id="app" style="max-width: 600px; margin: 0 auto">
-  <header>
-    <h1 class="mb-0">
-      Welcome to Sunshine!
-    </h1>
-    <p class="mb-0 align-self-start">
-      Before Getting Started, we need you to make a new username and password for accessing the Web UI.
-    </p>
-  </header>
-  <div class="alert alert-warning">
-    The credentials below are needed to access Sunshine's Web UI.<br />
-    Keep them safe, since <b>you will never see them again!</b>
-  </div>
-  <form @submit.prevent="save">
-    <div class="mb-2">
-      <label for="usernameInput" class="form-label">Username:</label>
-      <input type="text" class="form-control" id="usernameInput" autocomplete="username"
-        v-model="passwordData.newUsername" />
-    </div>
-    <div class="mb-2">
-      <label for="passwordInput" class="form-label">Password:</label>
-      <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
-        v-model="passwordData.newPassword" required />
-    </div>
-    <div class="mb-2">
-      <label for="confirmPasswordInput" class="form-label">Password (confirm):</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 w-100 mb-2" v-bind:disabled="loading">
-      Login
-    </button>
-    <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
-    <div class="alert alert-success" v-if="success">
-      <b>Success! </b>This page will reload soon, your browser will ask you for
-      the new credentials
+<!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" />
+  <title>Sunshine</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body id="app">
+  <main role="main" style="max-width: 600px; margin: 1em auto">
+    <header>
+      <h1 class="mb-0">
+        <img src="/images/logo-sunshine-45.png" height="45" alt="">
+        Welcome to Sunshine!
+      </h1>
+      <p class="my-2 align-self-start">
+        Before Getting Started, we need you to make a new username and password for accessing the Web UI.
+      </p>
+    </header>
+    <div class="alert alert-warning">
+      The credentials below are needed to access Sunshine's Web UI.<br />
+      Keep them safe, since <b>you will never see them again!</b>
     </div>
-  </form>
-</main>
+    <form @submit.prevent="save">
+      <div class="mb-2">
+        <label for="usernameInput" class="form-label">Username:</label>
+        <input type="text" class="form-control" id="usernameInput" autocomplete="username"
+          v-model="passwordData.newUsername" />
+      </div>
+      <div class="mb-2">
+        <label for="passwordInput" class="form-label">Password:</label>
+        <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
+          v-model="passwordData.newPassword" required />
+      </div>
+      <div class="mb-2">
+        <label for="confirmPasswordInput" class="form-label">Password (confirm):</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 w-100 mb-2" v-bind:disabled="loading">
+        Login
+      </button>
+      <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
+      <div class="alert alert-success" v-if="success">
+        <b>Success! </b>This page will reload soon, your browser will ask you for
+        the new credentials
+      </div>
+    </form>
+    <Resource-Card></Resource-Card>
+  </main>
+</body>
 
 <script type="module">
   import { createApp } from "vue"
+  import ResourceCard from './ResourceCard.vue'
   let app = createApp({
+    components: {
+      ResourceCard
+    },
     data() {
       return {
         error: null,
diff --git a/vite.config.js b/vite.config.js
index 12c47535313..73088c81714 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,25 +10,14 @@ export default defineConfig({
             vue: 'vue/dist/vue.esm-bundler.js'
         }
     },
-    plugins: [vue({
-        template: {
-            compilerOptions: {
-                compatConfig: {
-                    MODE: 2
-                }
-            }
-        }
-    })],
+    plugins: [vue()],
     root: resolve(__dirname, "src_assets/common/assets/web"),
     build: {
         outDir: resolve(__dirname, "build/assets/web"), //TODO Handle SRC_PATH by CMAKE
         rollupOptions: {
             input: {
                 apps: resolve(__dirname, 'src_assets/common/assets/web/apps.html'),
-                clients: resolve(__dirname, 'src_assets/common/assets/web/clients.html'),
                 config: resolve(__dirname, 'src_assets/common/assets/web/config.html'),
-                'header-no-nav': resolve(__dirname, 'src_assets/common/assets/web/header-no-nav.html'),
-                header: resolve(__dirname, 'src_assets/common/assets/web/header.html'),
                 index: resolve(__dirname, 'src_assets/common/assets/web/index.html'),
                 password: resolve(__dirname, 'src_assets/common/assets/web/password.html'),
                 pin: resolve(__dirname, 'src_assets/common/assets/web/pin.html'),

From 7af6580cc15b1c99d3b8349b3b27a3e3dbccf292 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 24 Sep 2023 21:57:34 +0200
Subject: [PATCH 03/82] Migrated to EJS, app page bugfixes

---
 package.json                                  |   2 +
 src_assets/common/assets/web/apps.html        | 158 ++++++------
 src_assets/common/assets/web/config.html      |  49 ++--
 src_assets/common/assets/web/index.html       |  12 +-
 src_assets/common/assets/web/password.html    |  35 ++-
 src_assets/common/assets/web/pin.html         |  12 +-
 .../common/assets/web/template_header.html    |   9 +
 .../assets/web/template_header_main.html      |   8 +
 .../common/assets/web/troubleshooting.html    | 231 +++++++++---------
 src_assets/common/assets/web/welcome.html     |   9 +-
 vite.config.js                                |  14 +-
 11 files changed, 262 insertions(+), 277 deletions(-)
 create mode 100644 src_assets/common/assets/web/template_header.html
 create mode 100644 src_assets/common/assets/web/template_header_main.html

diff --git a/package.json b/package.json
index d5caf30f2da..fb4f4e93cfb 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,10 @@
     "@popperjs/core": "^2.11.8",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/compat": "^3.3.4",
+    "@widgetbot/crate": "^3.7.0",
     "bootstrap": "5.3.1",
     "vite": "^4.4.9",
+    "vite-plugin-ejs": "^1.6.4",
     "vue": "^3.1.0"
   }
 }
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 7b50f86dc87..70441495483 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -2,14 +2,67 @@
 <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" />
-  <title>Sunshine</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <%- header %>
+    <%- headerMain %>
+      <style>
+        .precmd-head {
+          width: 200px;
+        }
+
+        .monospace {
+          font-family: monospace;
+        }
+
+        .cover-finder {}
+
+        .cover-finder .cover-results {
+          max-height: 400px;
+          overflow-x: hidden;
+          overflow-y: auto;
+        }
+
+        .cover-finder .cover-results.busy * {
+          cursor: wait !important;
+          pointer-events: none;
+        }
+
+        .cover-container {
+          padding-top: 133.33%;
+          position: relative;
+        }
+
+        .cover-container.result {
+          cursor: pointer;
+        }
+
+        .spinner-border {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          margin: auto;
+        }
+
+        .cover-container img {
+          display: block;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .config-page {
+          padding: 1em;
+          border: 1px solid #dee2e6;
+          border-top: none;
+        }
+
+        td {
+          padding: 0 0.5em;
+        }
+      </style>
 </head>
 
 <body id="app">
@@ -31,10 +84,10 @@ <h1>Applications</h1>
           <tr v-for="(app,i) in apps" :key="i">
             <td>{{app.name}}</td>
             <td>
-              <button class="btn btn-primary" @click="editApp(i)">
+              <button class="btn btn-primary mx-1" @click="editApp(i)">
                 <i class="fas fa-edit"></i> Edit
               </button>
-              <button class="btn btn-danger" @click="showDeleteForm(i)">
+              <button class="btn btn-danger mx-1" @click="showDeleteForm(i)">
                 <i class="fas fa-trash"></i> Delete
               </button>
             </td>
@@ -113,7 +166,7 @@ <h1>Applications</h1>
                   </div>
                 </td>
                 <td>
-                  <button class="btn btn-danger" @click="$delete(editForm['prep-cmd'], i)">
+                  <button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">
                     <i class="fas fa-trash"></i>
                   </button>
                   <button class="btn btn-success" @click="addPrepCmd">
@@ -128,15 +181,14 @@ <h1>Applications</h1>
         <div class="mb-3">
           <label for="appName" class="form-label">Detached Commands</label>
           <div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2">
-            <pre>{{c}}</pre>
+            <input type="text" v-model="editForm.detached[i]" class="form-control monospace">
             <button class="btn btn-danger mx-2" @click="editForm.detached.splice(i,1)">
               &times;
             </button>
           </div>
           <div class="d-flex justify-content-between">
-            <input type="text" class="form-control monospace" v-model="detachedCmd" />
-            <button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">
-              +
+            <button class="btn btn-success" @click="editForm.detached.push('');">
+              <i class="fas fa-plus mr-1"></i> Add Detatched Command
             </button>
           </div>
           <div class="form-text">
@@ -347,15 +399,15 @@ <h4 class="modal-title">Covers Found</h4>
       },
       editApp(id) {
         this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
-        this.$set(this.editForm, "index", id);
+        this.editForm.index = id;
         if (this.editForm["prep-cmd"] === undefined)
-          this.$set(this.editForm, "prep-cmd", []);
+          this.editForm["prep-cmd"] = [];
         if (this.editForm["detached"] === undefined)
-          this.$set(this.editForm, "detached", []);
+          this.editForm["detatched"] = [];
         if (this.editForm["exclude-global-prep-cmd"] === undefined)
-          this.$set(this.editForm, "exclude-global-prep-cmd", false);
+          this.editForm["exclude-global-prep-cmd"] = [];
         if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
-          this.$set(this.editForm, "elevated", false);
+          this.editForm["elevated"] = [];
         }
         this.showEditForm = true;
       },
@@ -456,7 +508,7 @@ <h4 class="modal-title">Covers Found</h4>
         }).then(r => {
           if (!r.ok) throw new Error("Failed to download covers");
           return r.json();
-        }).then(body => this.$set(this.editForm, "image-path", body.path))
+        }).then(body => this.editForm["image-path"] = body.path)
           .then(() => this.closeCoverFinder())
           .finally(() => this.coverFinderBusy = false);
       },
@@ -473,71 +525,11 @@ <h4 class="modal-title">Covers Found</h4>
   });
 
   app.directive('dropdown-show', {
-    bind: function (el, binding) {
+    mounted: function (el, binding) {
       el.addEventListener('show.bs.dropdown', binding.value);
     }
   });
 
   app.mount("#app")
 
-</script>
-
-<style>
-  .precmd-head {
-    width: 200px;
-  }
-
-  .monospace {
-    font-family: monospace;
-  }
-
-  .cover-finder {}
-
-  .cover-finder .cover-results {
-    max-height: 400px;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  .cover-finder .cover-results.busy * {
-    cursor: wait !important;
-    pointer-events: none;
-  }
-
-  .cover-container {
-    padding-top: 133.33%;
-    position: relative;
-  }
-
-  .cover-container.result {
-    cursor: pointer;
-  }
-
-  .spinner-border {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-  }
-
-  .cover-container img {
-    display: block;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .config-page {
-    padding: 1em;
-    border: 1px solid #dee2e6;
-    border-top: none;
-  }
-
-  td {
-    padding: 0 0.5em;
-  }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 8b9219541b0..832be88a616 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -2,14 +2,25 @@
 <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" />
-  <title>Sunshine</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <%- header %>
+  <%- headerMain %>
+  <style>
+    .config-page {
+      padding: 1em;
+      border: 1px solid #dee2e6;
+      border-top: none;
+    }
+  
+    .buttons {
+      padding: 1em 0;
+    }
+  
+    .ms-item {
+      background-color: #ccc;
+      font-size: 12px;
+      font-weight: bold;
+    }
+  </style>
 </head>
 
 <body id="app">
@@ -191,7 +202,7 @@ <h1 class="my-4">Configuration</h1>
                   </div>
                 </td>
                 <td>
-                  <button class="btn btn-danger" @click="$delete(global_prep_cmd, i)">
+                  <button class="btn btn-danger" @click="editForm['global_prep_cmd'].splice(i,1)">
                     <i class="fas fa-trash"></i>
                   </button>
                   <button class="btn btn-success" @click="add_global_prep_cmd">
@@ -1094,22 +1105,4 @@ <h2 class="accordion-header">
   });
 
   app.mount("#app");
-</script>
-
-<style>
-  .config-page {
-    padding: 1em;
-    border: 1px solid #dee2e6;
-    border-top: none;
-  }
-
-  .buttons {
-    padding: 1em 0;
-  }
-
-  .ms-item {
-    background-color: #ccc;
-    font-size: 12px;
-    font-weight: bold;
-  }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index 71bc2c2f87b..7ec12245262 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -2,20 +2,14 @@
 <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" />
-  <title>Sunshine</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <%- header %>
+  <%- headerMain %>
 </head>
 
 <body id="app">
   <Sunshine-Header></Sunshine-Header>
   <div id="content" class="container">
-    <h1 class="my>-4">Hello, Sunshine!</h1>
+    <h1 class="my-4">Hello, Sunshine!</h1>
     <p>Sunshine is a self-hosted game stream host for Moonlight.</p>
     <!--Version-->
     <div class="card p-2 my-4">
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index 2de7f8f7be7..8d6d1bf2717 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -2,14 +2,19 @@
 <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" />
-  <title>Sunshine</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <%- header %>
+  <%- headerMain %>
+  <style>
+    .config-page {
+      padding: 1em;
+      border: 1px solid #dee2e6;
+      border-top: none;
+    }
+
+    .buttons {
+      padding: 1em 0;
+    }
+  </style>
 </head>
 
 <body id="app">
@@ -112,16 +117,4 @@ <h4>New Credentials</h4>
   });
 
   app.mount("#app");
-</script>
-
-<style>
-  .config-page {
-    padding: 1em;
-    border: 1px solid #dee2e6;
-    border-top: none;
-  }
-
-  .buttons {
-    padding: 1em 0;
-  }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
index a1195bc880a..996317d913b 100644
--- a/src_assets/common/assets/web/pin.html
+++ b/src_assets/common/assets/web/pin.html
@@ -2,14 +2,8 @@
 <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" />
-  <title>Sunshine</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <%- header %>
+  <%- headerMain %>
 </head>
 
 <body id="app">
@@ -18,7 +12,7 @@
     <h1 class="my-4">PIN Pairing</h1>
     <form action="" class="form d-flex flex-column align-items-center" id="form">
       <div class="card flex-column d-flex p-4 mb-4">
-        <input type="number" placeholder="PIN" id="pin-input" class="form-control my-4" />
+        <input type="text" pattern="\d*"  placeholder="PIN" id="pin-input" class="form-control my-4" />
         <button class="btn btn-primary">Send</button>
       </div>
       <div class="alert alert-warning">
diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
new file mode 100644
index 00000000000..1aaea775b13
--- /dev/null
+++ b/src_assets/common/assets/web/template_header.html
@@ -0,0 +1,9 @@
+<!-- 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/favicon.ico">
+<link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+<script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/template_header_main.html b/src_assets/common/assets/web/template_header_main.html
new file mode 100644
index 00000000000..a3bca667ae5
--- /dev/null
+++ b/src_assets/common/assets/web/template_header_main.html
@@ -0,0 +1,8 @@
+<!-- TEMPLATE_HEADER_MAIN - Used for Default UI Pages after Welcome -->
+<script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
+    new Crate({
+        server: '804382334370578482',
+        channel: '804383092822900797',
+        defer: false,
+    })
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index ad9cf7de6ce..a2fd3e68a3d 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -2,14 +2,39 @@
 <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" />
-  <title>Sunshine</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <%- header %>
+    <%- headerMain %>
+      <style>
+        .troubleshooting-logs {
+          white-space: pre;
+          font-family: monospace;
+          overflow: auto;
+          max-height: 500px;
+          min-height: 500px;
+          font-size: 16px;
+          position: relative;
+        }
+
+        .copy-icon {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          padding: 8px;
+          cursor: pointer;
+          color: rgba(0, 0, 0, 1);
+          appearance: none;
+          border: none;
+          background: none;
+        }
+
+        .copy-icon:hover {
+          color: rgba(0, 0, 0, 0.75);
+        }
+
+        .copy-icon:active {
+          color: rgba(0, 0, 0, 1);
+        }
+      </style>
 </head>
 
 <body id="app">
@@ -93,123 +118,93 @@ <h2>Logs</h2>
       </div>
     </div>
   </div>
-</body>
 
-<script type="module">
-  import { createApp } from 'vue'
-  import SunshineHeader from './SunshineHeader.vue'
+  <script type="module">
+    import { createApp } from 'vue'
+    import SunshineHeader from './SunshineHeader.vue'
 
-  const app = createApp({
-    components: {
-      SunshineHeader
-    },
-    data() {
-      return {
-        closeAppPressed: false,
-        closeAppStatus: null,
-        unpairAllPressed: false,
-        unpairAllStatus: null,
-        restartPressed: false,
-        logs: 'Loading...',
-        logFilter: null,
-        logInterval: null,
-      };
-    },
-    computed: {
-      actualLogs() {
-        if (!this.logFilter) return this.logs;
-        let lines = this.logs.split("\n");
-        lines = lines.filter(x => x.indexOf(this.logFilter) != -1);
-        return lines.join("\n");
-      }
-    },
-    created() {
-      this.logInterval = setInterval(() => {
-        this.refreshLogs();
-      }, 5000);
-      this.refreshLogs();
-    },
-    beforeDestroy() {
-      clearInterval(this.logInterval);
-    },
-    methods: {
-      refreshLogs() {
-        fetch("/api/logs",)
-          .then((r) => r.text())
-          .then((r) => {
-            this.logs = r;
-          });
-      },
-      closeApp() {
-        this.closeAppPressed = true;
-        fetch("/api/apps/close", { method: "POST" })
-          .then((r) => r.json())
-          .then((r) => {
-            this.closeAppPressed = false;
-            this.closeAppStatus = r.status.toString() === "true";
-            setTimeout(() => {
-              this.closeAppStatus = null;
-            }, 5000);
-          });
+    const app = createApp({
+      components: {
+        SunshineHeader
       },
-      unpairAll() {
-        this.unpairAllPressed = true;
-        fetch("/api/clients/unpair", { method: "POST" })
-          .then((r) => r.json())
-          .then((r) => {
-            this.unpairAllPressed = false;
-            this.unpairAllStatus = r.status.toString() === "true";
-            setTimeout(() => {
-              this.unpairAllStatus = null;
-            }, 5000);
-          });
+      data() {
+        return {
+          closeAppPressed: false,
+          closeAppStatus: null,
+          unpairAllPressed: false,
+          unpairAllStatus: null,
+          restartPressed: false,
+          logs: 'Loading...',
+          logFilter: null,
+          logInterval: null,
+        };
       },
-      copyLogs() {
-        navigator.clipboard.writeText(this.actualLogs);
+      computed: {
+        actualLogs() {
+          if (!this.logFilter) return this.logs;
+          let lines = this.logs.split("\n");
+          lines = lines.filter(x => x.indexOf(this.logFilter) != -1);
+          return lines.join("\n");
+        }
       },
-      restart() {
-        this.restartPressed = true;
-        setTimeout(() => {
-          this.restartPressed = false;
+      created() {
+        this.logInterval = setInterval(() => {
+          this.refreshLogs();
         }, 5000);
-        fetch("/api/restart", {
-          method: "POST",
-        });
+        this.refreshLogs();
       },
-    },
-  });
-
-  app.mount("#app");
-</script>
-
-<style>
-  .troubleshooting-logs {
-    white-space: pre;
-    font-family: monospace;
-    overflow: auto;
-    max-height: 500px;
-    min-height: 500px;
-    font-size: 16px;
-    position: relative;
-  }
+      beforeDestroy() {
+        clearInterval(this.logInterval);
+      },
+      methods: {
+        refreshLogs() {
+          fetch("/api/logs",)
+            .then((r) => r.text())
+            .then((r) => {
+              this.logs = r;
+            });
+        },
+        closeApp() {
+          this.closeAppPressed = true;
+          fetch("/api/apps/close", { method: "POST" })
+            .then((r) => r.json())
+            .then((r) => {
+              this.closeAppPressed = false;
+              this.closeAppStatus = r.status.toString() === "true";
+              setTimeout(() => {
+                this.closeAppStatus = null;
+              }, 5000);
+            });
+        },
+        unpairAll() {
+          this.unpairAllPressed = true;
+          fetch("/api/clients/unpair", { method: "POST" })
+            .then((r) => r.json())
+            .then((r) => {
+              this.unpairAllPressed = false;
+              this.unpairAllStatus = r.status.toString() === "true";
+              setTimeout(() => {
+                this.unpairAllStatus = null;
+              }, 5000);
+            });
+        },
+        copyLogs() {
+          navigator.clipboard.writeText(this.actualLogs);
+        },
+        restart() {
+          this.restartPressed = true;
+          setTimeout(() => {
+            this.restartPressed = false;
+          }, 5000);
+          fetch("/api/restart", {
+            method: "POST",
+          });
+        },
+      },
+    });
 
-  .copy-icon {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    padding: 8px;
-    cursor: pointer;
-    color: rgba(0, 0, 0, 1);
-    appearance: none;
-    border: none;
-    background: none;
-  }
+    app.mount("#app");
+  </script>
 
-  .copy-icon:hover {
-    color: rgba(0, 0, 0, 0.75);
-  }
 
-  .copy-icon:active {
-    color: rgba(0, 0, 0, 1);
-  }
-</style>
\ No newline at end of file
+</body>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/welcome.html
index 7eaef2f844a..f70194166dc 100644
--- a/src_assets/common/assets/web/welcome.html
+++ b/src_assets/common/assets/web/welcome.html
@@ -2,14 +2,7 @@
 <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" />
-  <title>Sunshine</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-  <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <%- header %>
 </head>
 
 <body id="app">
diff --git a/vite.config.js b/vite.config.js
index 73088c81714..db95c2bb506 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,20 @@
 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 vue from '@vitejs/plugin-vue'
 
+
+/**
+ * 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 header = fs.readFileSync(resolve(__dirname, "src_assets/common/assets/web/template_header.html"))
+let headerMain = fs.readFileSync(resolve(__dirname, "src_assets/common/assets/web/template_header_main.html"))
 // https://vitejs.dev/config/
 export default defineConfig({
     resolve: {
@@ -10,7 +22,7 @@ export default defineConfig({
             vue: 'vue/dist/vue.esm-bundler.js'
         }
     },
-    plugins: [vue()],
+    plugins: [vue(), ViteEjsPlugin({ header, headerMain })],
     root: resolve(__dirname, "src_assets/common/assets/web"),
     build: {
         outDir: resolve(__dirname, "build/assets/web"), //TODO Handle SRC_PATH by CMAKE

From e363a7f7b8845a5c0484d551a3f8686f316e3c5c Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 24 Sep 2023 22:15:44 +0200
Subject: [PATCH 04/82] Welcome new layout and other minifixes

---
 src_assets/common/assets/web/ResourceCard.vue |  4 +-
 src_assets/common/assets/web/apps.html        | 15 +++-
 src_assets/common/assets/web/welcome.html     | 82 ++++++++++---------
 3 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/src_assets/common/assets/web/ResourceCard.vue b/src_assets/common/assets/web/ResourceCard.vue
index c0a4cd07f66..43034219342 100644
--- a/src_assets/common/assets/web/ResourceCard.vue
+++ b/src_assets/common/assets/web/ResourceCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card p-2 my-4">
+    <div class="card p-2">
         <div class="card-body">
             <h2>Resources</h2>
             <br />
@@ -16,7 +16,7 @@
         </div>
     </div>
     <!--Legal-->
-    <div class="card p-2 my-4">
+    <div class="card p-2 mt-4">
         <div class="card-body">
             <h2>Legal</h2>
             <br />
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 70441495483..da4b35d1c63 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -62,6 +62,12 @@
         td {
           padding: 0 0.5em;
         }
+
+        .env-table td {
+          padding: 0.25em;
+          border-bottom: rgba(0,0,0,0.25) 1px solid;
+          vertical-align: top;
+        }
       </style>
 </head>
 
@@ -271,10 +277,11 @@ <h4 class="modal-title">Covers Found</h4>
             must be a PNG file. If not set, Sunshine will send default box image.
           </div>
         </div>
-        <div class="env-hint">
-          <div class="form-text"><b>About Environment Variables: </b> All commands get these environment variables by
-            default: </div>
-          <table>
+        <div class="env-hint alert alert-info">
+          <div class="form-text">
+            <h4>About Environment Variables</h4>
+            All commands get these environment variables by default: </div>
+          <table class="env-table">
             <tr>
               <td><b>Var Name</b></td>
               <td><b></b></td>
diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/welcome.html
index f70194166dc..b7ea3911e17 100644
--- a/src_assets/common/assets/web/welcome.html
+++ b/src_assets/common/assets/web/welcome.html
@@ -6,46 +6,52 @@
 </head>
 
 <body id="app">
-  <main role="main" style="max-width: 600px; margin: 1em auto">
-    <header>
-      <h1 class="mb-0">
-        <img src="/images/logo-sunshine-45.png" height="45" alt="">
-        Welcome to Sunshine!
-      </h1>
-      <p class="my-2 align-self-start">
-        Before Getting Started, we need you to make a new username and password for accessing the Web UI.
-      </p>
-    </header>
-    <div class="alert alert-warning">
-      The credentials below are needed to access Sunshine's Web UI.<br />
-      Keep them safe, since <b>you will never see them again!</b>
-    </div>
-    <form @submit.prevent="save">
-      <div class="mb-2">
-        <label for="usernameInput" class="form-label">Username:</label>
-        <input type="text" class="form-control" id="usernameInput" autocomplete="username"
-          v-model="passwordData.newUsername" />
-      </div>
-      <div class="mb-2">
-        <label for="passwordInput" class="form-label">Password:</label>
-        <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
-          v-model="passwordData.newPassword" required />
+  <main role="main" style="max-width: 1200px; margin: 1em auto">
+    <div class="d-flex gap-4">
+      <div class="card p-2">
+        <header>
+          <h1 class="mb-0">
+            <img src="/images/logo-sunshine-45.png" height="45" alt="">
+            Welcome to Sunshine!
+          </h1>
+        </header>
+        <p class="my-2 align-self-start">
+          Before Getting Started, we need you to make a new username and password for accessing the Web UI.
+        </p>
+        <div class="alert alert-warning">
+          The credentials below are needed to access Sunshine's Web UI.<br />
+          Keep them safe, since <b>you will never see them again!</b>
+        </div>
+        <form @submit.prevent="save">
+          <div class="mb-2">
+            <label for="usernameInput" class="form-label">Username:</label>
+            <input type="text" class="form-control" id="usernameInput" autocomplete="username"
+              v-model="passwordData.newUsername" />
+          </div>
+          <div class="mb-2">
+            <label for="passwordInput" class="form-label">Password:</label>
+            <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
+              v-model="passwordData.newPassword" required />
+          </div>
+          <div class="mb-2">
+            <label for="confirmPasswordInput" class="form-label">Password (confirm):</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 w-100 mb-2" v-bind:disabled="loading">
+            Login
+          </button>
+          <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
+          <div class="alert alert-success" v-if="success">
+            <b>Success! </b>This page will reload soon, your browser will ask you for
+            the new credentials
+          </div>
+        </form>
       </div>
-      <div class="mb-2">
-        <label for="confirmPasswordInput" class="form-label">Password (confirm):</label>
-        <input type="password" class="form-control" id="confirmPasswordInput" autocomplete="new-password"
-          v-model="passwordData.confirmNewPassword" required />
+      <div>
+        <Resource-Card></Resource-Card>
       </div>
-      <button type="submit" class="btn btn-primary w-100 mb-2" v-bind:disabled="loading">
-        Login
-      </button>
-      <div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
-      <div class="alert alert-success" v-if="success">
-        <b>Success! </b>This page will reload soon, your browser will ask you for
-        the new credentials
-      </div>
-    </form>
-    <Resource-Card></Resource-Card>
+    </div>
   </main>
 </body>
 

From 7a62d2310928d657f87a619edf5dc958e29b1bd2 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 24 Sep 2023 22:21:20 +0200
Subject: [PATCH 05/82] Removed widgetbot from package.json

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index fb4f4e93cfb..fa1b9be8f63 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,6 @@
     "@popperjs/core": "^2.11.8",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/compat": "^3.3.4",
-    "@widgetbot/crate": "^3.7.0",
     "bootstrap": "5.3.1",
     "vite": "^4.4.9",
     "vite-plugin-ejs": "^1.6.4",

From c85ef59e5757eb9690e8f756dc6557949169f583 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 26 Sep 2023 21:08:39 +0200
Subject: [PATCH 06/82] Build with cmake

---
 cmake/dependencies/common.cmake | 3 +++
 package.json                    | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/cmake/dependencies/common.cmake b/cmake/dependencies/common.cmake
index 33372c2e991..4a7248ef696 100644
--- a/cmake/dependencies/common.cmake
+++ b/cmake/dependencies/common.cmake
@@ -83,3 +83,6 @@ elseif(UNIX)
         include(${CMAKE_MODULE_PATH}/dependencies/linux.cmake)
     endif()
 endif()
+
+#WebUI build
+add_custom_target (web-ui ALL COMMAND npm ci && npm run build)
\ No newline at end of file
diff --git a/package.json b/package.json
index fa1b9be8f63..cfc6061752c 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,7 @@
 {
+  "scripts": {
+    "build": "vite build"
+  },
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.4.2",
     "@popperjs/core": "^2.11.8",

From 976c80ba738666795b3bd41285180b488aaad40f Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 16:21:17 +0200
Subject: [PATCH 07/82] Update package.json

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index cfc6061752c..4984bfbd18f 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.4.2",
-    "@popperjs/core": "^2.11.8",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/compat": "^3.3.4",
+    "@popperjs/core": "2.11.8",
+    "@vitejs/plugin-vue": "4.3.4",
+    "@vue/compat": "3.3.4",
     "bootstrap": "5.3.1",
     "vite": "^4.4.9",
     "vite-plugin-ejs": "^1.6.4",

From e3197c584505f15a71cfc1e78beee57e171e65e3 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 16:21:26 +0200
Subject: [PATCH 08/82] Update package.json

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4984bfbd18f..db0ad633812 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
     "@vitejs/plugin-vue": "4.3.4",
     "@vue/compat": "3.3.4",
     "bootstrap": "5.3.1",
-    "vite": "^4.4.9",
-    "vite-plugin-ejs": "^1.6.4",
-    "vue": "^3.1.0"
+    "vite": "4.4.9",
+    "vite-plugin-ejs": "1.6.4",
+    "vue": "3.1.0"
   }
 }

From 2ea94b5c3ec712178279e9dc5302eb56b3d1887c Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 16:43:06 +0200
Subject: [PATCH 09/82] Moved npm from CI to cmake, fix Windows Build

---
 .github/workflows/CI.yml                            | 9 +--------
 docker/debian-bookworm.dockerfile                   | 3 ---
 docker/debian-bullseye.dockerfile                   | 3 ---
 docker/fedora-37.dockerfile                         | 3 ---
 docker/fedora-38.dockerfile                         | 3 ---
 docker/ubuntu-20.04.dockerfile                      | 3 ---
 docker/ubuntu-22.04.dockerfile                      | 3 ---
 packaging/linux/Arch/PKGBUILD                       | 4 ----
 packaging/linux/flatpak/dev.lizardbyte.sunshine.yml | 3 ---
 packaging/macos/Portfile                            | 4 ----
 10 files changed, 1 insertion(+), 37 deletions(-)

diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index 290a978ab0a..0511c61b5a6 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -390,8 +390,6 @@ jobs:
           mkdir -p build
           mkdir -p artifacts
 
-          npm install
-
           cd build
           cmake -DCMAKE_BUILD_TYPE=Release \
             -DCMAKE_INSTALL_PREFIX=/usr \
@@ -515,8 +513,6 @@ jobs:
           BUILD_VERSION: ${{ needs.check_changelog.outputs.next_version_bare }}
           COMMIT: ${{ github.event.pull_request.head.sha || github.sha }}
         run: |
-          npm install
-
           mkdir build
           cd build
           cmake -DCMAKE_BUILD_TYPE=Release \
@@ -712,14 +708,11 @@ jobs:
             mingw-w64-x86_64-openssl
             mingw-w64-x86_64-opus
             mingw-w64-x86_64-toolchain
+            mingw-w64-x86_64-nodejs
             nasm
             wget
             yasm
 
-      - name: Install npm packages
-        run: |
-          npm install
-
       - name: Build Windows
         shell: msys2 {0}
         env:
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index f8ccc23d215..2a7e7e238dd 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -93,9 +93,6 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
index 0ba3fdf0ce5..36a35afabfd 100644
--- a/docker/debian-bullseye.dockerfile
+++ b/docker/debian-bullseye.dockerfile
@@ -93,9 +93,6 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
diff --git a/docker/fedora-37.dockerfile b/docker/fedora-37.dockerfile
index 5a94623caf8..44bf9499f24 100644
--- a/docker/fedora-37.dockerfile
+++ b/docker/fedora-37.dockerfile
@@ -92,9 +92,6 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
index 8df4207c635..d660adb3028 100644
--- a/docker/fedora-38.dockerfile
+++ b/docker/fedora-38.dockerfile
@@ -93,9 +93,6 @@ _DEPS
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
diff --git a/docker/ubuntu-20.04.dockerfile b/docker/ubuntu-20.04.dockerfile
index 1dfb69ccf0e..e0cff00289c 100644
--- a/docker/ubuntu-20.04.dockerfile
+++ b/docker/ubuntu-20.04.dockerfile
@@ -130,9 +130,6 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index f007f26725f..aa2548ff4b4 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -94,9 +94,6 @@ _INSTALL_CUDA
 WORKDIR /build/sunshine/
 COPY --link .. .
 
-# setup npm dependencies
-RUN npm install
-
 # setup build directory
 WORKDIR /build/sunshine/build
 
diff --git a/packaging/linux/Arch/PKGBUILD b/packaging/linux/Arch/PKGBUILD
index e078c0cc09a..b3afe73b535 100644
--- a/packaging/linux/Arch/PKGBUILD
+++ b/packaging/linux/Arch/PKGBUILD
@@ -47,10 +47,6 @@ prepare() {
 }
 
 build() {
-    pushd "$pkgname"
-    npm install
-    popd
-
     export BRANCH="@GITHUB_BRANCH@"
     export BUILD_VERSION="@GITHUB_BUILD_VERSION@"
     export COMMIT="@GITHUB_COMMIT@"
diff --git a/packaging/linux/flatpak/dev.lizardbyte.sunshine.yml b/packaging/linux/flatpak/dev.lizardbyte.sunshine.yml
index 4528e7def9a..30e8241cd7b 100644
--- a/packaging/linux/flatpak/dev.lizardbyte.sunshine.yml
+++ b/packaging/linux/flatpak/dev.lizardbyte.sunshine.yml
@@ -210,9 +210,6 @@ modules:
       env:
         npm_config_nodedir: /usr/lib/sdk/node18
         NPM_CONFIG_LOGLEVEL: info
-    build-commands:
-      # Install npm dependencies
-      - cd ${FLATPAK_BUILDER_BUILDDIR} && npm install
     config-opts:
       - -DCMAKE_BUILD_TYPE=Release
       - -DCMAKE_INSTALL_PREFIX=/app
diff --git a/packaging/macos/Portfile b/packaging/macos/Portfile
index c22c1cb9dca..73a775a1dc5 100644
--- a/packaging/macos/Portfile
+++ b/packaging/macos/Portfile
@@ -55,10 +55,6 @@ platform darwin {
     }
 }
 
-pre-build {
-    system -W ${worksrcpath} "npm install"
-}
-
 notes-append "Run @PROJECT_NAME@ by executing 'sunshine <path to user config>', e.g. 'sunshine ~/sunshine.conf' "
 notes-append "The config file will be created if it doesn't exist."
 notes-append "It is recommended to set a location for the apps file in the config."

From 1c010a21f7393d11c74949b7fd600f85298d930b Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 16:50:59 +0200
Subject: [PATCH 10/82] Fix command

---
 cmake/dependencies/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/dependencies/common.cmake b/cmake/dependencies/common.cmake
index 4a7248ef696..25a4692dfdf 100644
--- a/cmake/dependencies/common.cmake
+++ b/cmake/dependencies/common.cmake
@@ -85,4 +85,4 @@ elseif(UNIX)
 endif()
 
 #WebUI build
-add_custom_target (web-ui ALL COMMAND npm ci && npm run build)
\ No newline at end of file
+add_custom_target (web-ui ALL COMMAND npm install && npm run build)
\ No newline at end of file

From aa22599c8cadc3652d8e0b8f4aca5101d51d5940 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 17:00:17 +0200
Subject: [PATCH 11/82] Fix vue3 version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index db0ad633812..c02ac991025 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,6 @@
     "bootstrap": "5.3.1",
     "vite": "4.4.9",
     "vite-plugin-ejs": "1.6.4",
-    "vue": "3.1.0"
+    "vue": "3.2.25"
   }
 }

From 6955b97ef1a4b06d619c7b25f7e5906abb6089e3 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 17:14:32 +0200
Subject: [PATCH 12/82] Removed unused compat

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index c02ac991025..9131500c4cd 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
     "@fortawesome/fontawesome-free": "6.4.2",
     "@popperjs/core": "2.11.8",
     "@vitejs/plugin-vue": "4.3.4",
-    "@vue/compat": "3.3.4",
     "bootstrap": "5.3.1",
     "vite": "4.4.9",
     "vite-plugin-ejs": "1.6.4",

From 7892153843ef58f3bf2f9e8b2204e137217cbaf6 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 19:15:28 +0200
Subject: [PATCH 13/82] Fix build

---
 cmake/dependencies/common.cmake | 2 --
 cmake/packaging/common.cmake    | 2 +-
 cmake/targets/common.cmake      | 4 ++++
 src/confighttp.cpp              | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/cmake/dependencies/common.cmake b/cmake/dependencies/common.cmake
index 25a4692dfdf..3762001a6c1 100644
--- a/cmake/dependencies/common.cmake
+++ b/cmake/dependencies/common.cmake
@@ -84,5 +84,3 @@ elseif(UNIX)
     endif()
 endif()
 
-#WebUI build
-add_custom_target (web-ui ALL COMMAND npm install && npm run build)
\ No newline at end of file
diff --git a/cmake/packaging/common.cmake b/cmake/packaging/common.cmake
index 0b41524f6cb..9d2266bc813 100644
--- a/cmake/packaging/common.cmake
+++ b/cmake/packaging/common.cmake
@@ -13,7 +13,7 @@ set(CPACK_PACKAGE_FILE_NAME "${CMAKE_PROJECT_NAME}")
 set(CPACK_STRIP_FILES YES)
 
 # install npm modules
-install(DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}/node_modules"
+install(DIRECTORY "${CMAKE_CURRENT_BINARY_DIR}/assets/web"
         DESTINATION "${SUNSHINE_ASSETS_DIR}/web")
 
 # platform specific packaging
diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 72f89bf5182..38772fc06ca 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -33,3 +33,7 @@ foreach(flag IN LISTS SUNSHINE_COMPILE_OPTIONS)
 endforeach()
 
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
+
+#WebUI build
+configure_file(${CMAKE_CURRENT_SOURCE_DIR}/package.json ${CMAKE_BINARY_DIR}/package.json COPYONLY)
+add_custom_target (web-ui ALL COMMAND npm install && npm run build)
\ No newline at end of file
diff --git a/src/confighttp.cpp b/src/confighttp.cpp
index 282c5b29313..d255a2769d8 100644
--- a/src/confighttp.cpp
+++ b/src/confighttp.cpp
@@ -292,7 +292,7 @@ namespace confighttp {
     // .relative_path is needed to shed any leading slash that might exist in the request path
     auto filePath = fs::weakly_canonical(webDirPath / fs::path(request->path).relative_path());
 
-    // Don't do anything if file does not exist or is outside the node_modules directory
+    // Don't do anything if file does not exist or is outside the assets directory
     if (!isChildPath(filePath, nodeModulesPath)) {
       BOOST_LOG(warning) << "Someone requested a path " << filePath << " that is outside the assets folder";
       response->write(SimpleWeb::StatusCode::client_error_bad_request, "Bad Request");

From 928d6f0d0d9d9250ca352cdd61d042ed12bdf03a Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 30 Sep 2023 19:26:22 +0200
Subject: [PATCH 14/82] Use src as working directory

---
 cmake/targets/common.cmake | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 38772fc06ca..c5e1ab4fc31 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,5 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-configure_file(${CMAKE_CURRENT_SOURCE_DIR}/package.json ${CMAKE_BINARY_DIR}/package.json COPYONLY)
-add_custom_target (web-ui ALL COMMAND npm install && npm run build)
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  ${CMAKE_CURRENT_SOURCE_DIR} COMMAND npm install && npm run build)
\ No newline at end of file

From 481748520121c44747d01484e183200ee3563ff6 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 1 Oct 2023 14:42:36 +0200
Subject: [PATCH 15/82] Fix zip packaging

---
 cmake/packaging/common.cmake  | 2 +-
 cmake/packaging/windows.cmake | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/cmake/packaging/common.cmake b/cmake/packaging/common.cmake
index 9d2266bc813..d54f7345242 100644
--- a/cmake/packaging/common.cmake
+++ b/cmake/packaging/common.cmake
@@ -14,7 +14,7 @@ set(CPACK_STRIP_FILES YES)
 
 # install npm modules
 install(DIRECTORY "${CMAKE_CURRENT_BINARY_DIR}/assets/web"
-        DESTINATION "${SUNSHINE_ASSETS_DIR}/web")
+        DESTINATION "${SUNSHINE_ASSETS_DIR}")
 
 # platform specific packaging
 if(WIN32)
diff --git a/cmake/packaging/windows.cmake b/cmake/packaging/windows.cmake
index 78f0a0e32c0..344997d06fc 100644
--- a/cmake/packaging/windows.cmake
+++ b/cmake/packaging/windows.cmake
@@ -38,7 +38,8 @@ install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/misc/vigembus/"
 # Sunshine assets
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
         DESTINATION "${SUNSHINE_ASSETS_DIR}"
-        COMPONENT assets)
+        COMPONENT assets
+        PATTERN "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web" EXCLUDE)
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/assets/"
         DESTINATION "${SUNSHINE_ASSETS_DIR}"
         COMPONENT assets)

From 8c7ede171d087698e2bba15a56cf16db9655cadd Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 1 Oct 2023 15:57:47 +0200
Subject: [PATCH 16/82] Fix assets build

---
 cmake/packaging/macos.cmake   |  3 ++-
 cmake/packaging/unix.cmake    |  3 ++-
 cmake/packaging/windows.cmake |  2 +-
 cmake/targets/common.cmake    |  2 +-
 vite.config.js                | 36 +++++++++++++++++++++++------------
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/cmake/packaging/macos.cmake b/cmake/packaging/macos.cmake
index 2b173393bbf..1416fd8d007 100644
--- a/cmake/packaging/macos.cmake
+++ b/cmake/packaging/macos.cmake
@@ -11,7 +11,8 @@ if(SUNSHINE_PACKAGE_MACOS)  # todo
     set(INSTALL_RUNTIME_DIR "${MAC_PREFIX}/MacOS")
 
     install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-            DESTINATION "${SUNSHINE_ASSETS_DIR}")
+            DESTINATION "${SUNSHINE_ASSETS_DIR}"
+            PATTERN "web" EXCLUDE)
     install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/macos/assets/"
             DESTINATION "${SUNSHINE_ASSETS_DIR}")
 
diff --git a/cmake/packaging/unix.cmake b/cmake/packaging/unix.cmake
index 660811f3b33..27b8c68ce50 100644
--- a/cmake/packaging/unix.cmake
+++ b/cmake/packaging/unix.cmake
@@ -15,4 +15,5 @@ endif()
 install(TARGETS sunshine RUNTIME DESTINATION "${CMAKE_INSTALL_BINDIR}")
 
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-        DESTINATION "${SUNSHINE_ASSETS_DIR}")
+        DESTINATION "${SUNSHINE_ASSETS_DIR}"
+        PATTERN "web" EXCLUDE)
diff --git a/cmake/packaging/windows.cmake b/cmake/packaging/windows.cmake
index 344997d06fc..7fd15b84252 100644
--- a/cmake/packaging/windows.cmake
+++ b/cmake/packaging/windows.cmake
@@ -39,7 +39,7 @@ install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/misc/vigembus/"
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
         DESTINATION "${SUNSHINE_ASSETS_DIR}"
         COMPONENT assets
-        PATTERN "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web" EXCLUDE)
+        PATTERN "web" EXCLUDE)
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/assets/"
         DESTINATION "${SUNSHINE_ASSETS_DIR}"
         COMPONENT assets)
diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index c5e1ab4fc31..25f09018b2e 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  ${CMAKE_CURRENT_SOURCE_DIR} COMMAND npm install && npm run build)
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  ${CMAKE_CURRENT_SOURCE_DIR} COMMAND npm install && npm run build -- ${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web ${SUNSHINE_ASSETS_DIR}/web)
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index db95c2bb506..6261f0de696 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,7 +4,7 @@ import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import { ViteEjsPlugin } from "vite-plugin-ejs";
 import vue from '@vitejs/plugin-vue'
-
+import process from 'process'
 
 /**
  * Before actually building the pages with Vite, we do an intermediate build step using ejs
@@ -13,8 +13,20 @@ import vue from '@vitejs/plugin-vue'
  * by Vue itself (e.g. style/script loading, common meta head tags, Widgetbot)
  * The vite-plugin-ejs handles this automatically
  */
-let header = fs.readFileSync(resolve(__dirname, "src_assets/common/assets/web/template_header.html"))
-let headerMain = fs.readFileSync(resolve(__dirname, "src_assets/common/assets/web/template_header_main.html"))
+let assetsSrcPath = 'src_assets/common/assets/web';
+let header = fs.readFileSync(resolve(__dirname, assetsSrcPath, "template_header.html"))
+let headerMain = fs.readFileSync(resolve(__dirname, assetsSrcPath, "template_header_main.html"))
+let assetsDstPath = 'src_assets/common/assets/web';
+
+console.log(process.argv);
+if(process.argv[2]){
+   console.log("Using srcdir from Cmake: " + process.argv[2]);
+   assetsSrcPath = process.argv[2]
+}
+if(process.argv[3]){
+    console.log("Using destdir from Cmake: " + + process.argv[3]);
+    assetsDstPath = process.argv[3]
+ }
 // https://vitejs.dev/config/
 export default defineConfig({
     resolve: {
@@ -23,18 +35,18 @@ export default defineConfig({
         }
     },
     plugins: [vue(), ViteEjsPlugin({ header, headerMain })],
-    root: resolve(__dirname, "src_assets/common/assets/web"),
+    root: resolve(__dirname, assetsSrcPath),
     build: {
-        outDir: resolve(__dirname, "build/assets/web"), //TODO Handle SRC_PATH by CMAKE
+        outDir: resolve(__dirname, assetsDstPath),
         rollupOptions: {
             input: {
-                apps: resolve(__dirname, 'src_assets/common/assets/web/apps.html'),
-                config: resolve(__dirname, 'src_assets/common/assets/web/config.html'),
-                index: resolve(__dirname, 'src_assets/common/assets/web/index.html'),
-                password: resolve(__dirname, 'src_assets/common/assets/web/password.html'),
-                pin: resolve(__dirname, 'src_assets/common/assets/web/pin.html'),
-                troubleshooting: resolve(__dirname, 'src_assets/common/assets/web/troubleshooting.html'),
-                welcome: resolve(__dirname, 'src_assets/common/assets/web/welcome.html'),
+                apps: resolve(__dirname, assetsSrcPath , 'apps.html'),
+                config: resolve(__dirname, assetsSrcPath , 'config.html'),
+                index: resolve(__dirname, assetsSrcPath , 'index.html'),
+                password: resolve(__dirname, assetsSrcPath , 'password.html'),
+                pin: resolve(__dirname, assetsSrcPath , 'pin.html'),
+                troubleshooting: resolve(__dirname, assetsSrcPath , 'troubleshooting.html'),
+                welcome: resolve(__dirname, assetsSrcPath , 'welcome.html'),
             },
         },
     },

From cf89debae07d630eea6031d023e7bdb146887aa3 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 1 Oct 2023 19:39:34 +0200
Subject: [PATCH 17/82] Use env vars to pass vite params

---
 cmake/targets/common.cmake |  2 +-
 vite.config.js             | 41 +++++++++++++++++++-------------------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 25f09018b2e..d84b9a6e46a 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  ${CMAKE_CURRENT_SOURCE_DIR} COMMAND npm install && npm run build -- ${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web ${SUNSHINE_ASSETS_DIR}/web)
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND npm install && bash -c SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} ${SUNSHINE_ASSETS_DIR} npm run build)
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 6261f0de696..a5723ab73e8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,19 +14,20 @@ import process from 'process'
  * The vite-plugin-ejs handles this automatically
  */
 let assetsSrcPath = 'src_assets/common/assets/web';
-let header = fs.readFileSync(resolve(__dirname, assetsSrcPath, "template_header.html"))
-let headerMain = fs.readFileSync(resolve(__dirname, assetsSrcPath, "template_header_main.html"))
 let assetsDstPath = 'src_assets/common/assets/web';
-
-console.log(process.argv);
-if(process.argv[2]){
-   console.log("Using srcdir from Cmake: " + process.argv[2]);
-   assetsSrcPath = process.argv[2]
+console.log(process.env)
+if (process.env.SUNSHINE_SOURCE_ASSETS_DIR) {
+    console.log("Using srcdir from Cmake: " + process.env.SUNSHINE_SOURCE_ASSETS_DIR);
+    assetsSrcPath = process.env.SUNSHINE_SOURCE_ASSETS_DIR
+}
+if (process.env.SUNSHINE_ASSETS_DIR) {
+    console.log("Using destdir from Cmake: " + process.env.SUNSHINE_ASSETS_DIR);
+    assetsDstPath = process.env.SUNSHINE_ASSETS_DIR
 }
-if(process.argv[3]){
-    console.log("Using destdir from Cmake: " + + process.argv[3]);
-    assetsDstPath = process.argv[3]
- }
+
+let header = fs.readFileSync(resolve(assetsSrcPath, "template_header.html"))
+let headerMain = fs.readFileSync(resolve(assetsSrcPath, "template_header_main.html"))
+
 // https://vitejs.dev/config/
 export default defineConfig({
     resolve: {
@@ -35,18 +36,18 @@ export default defineConfig({
         }
     },
     plugins: [vue(), ViteEjsPlugin({ header, headerMain })],
-    root: resolve(__dirname, assetsSrcPath),
+    root: resolve(assetsSrcPath),
     build: {
-        outDir: resolve(__dirname, assetsDstPath),
+        outDir: resolve(assetsDstPath),
         rollupOptions: {
             input: {
-                apps: resolve(__dirname, assetsSrcPath , 'apps.html'),
-                config: resolve(__dirname, assetsSrcPath , 'config.html'),
-                index: resolve(__dirname, assetsSrcPath , 'index.html'),
-                password: resolve(__dirname, assetsSrcPath , 'password.html'),
-                pin: resolve(__dirname, assetsSrcPath , 'pin.html'),
-                troubleshooting: resolve(__dirname, assetsSrcPath , 'troubleshooting.html'),
-                welcome: resolve(__dirname, assetsSrcPath , 'welcome.html'),
+                apps: resolve(assetsSrcPath, 'apps.html'),
+                config: resolve(assetsSrcPath, 'config.html'),
+                index: resolve(assetsSrcPath, 'index.html'),
+                password: resolve(assetsSrcPath, 'password.html'),
+                pin: resolve(assetsSrcPath, 'pin.html'),
+                troubleshooting: resolve(assetsSrcPath, 'troubleshooting.html'),
+                welcome: resolve(assetsSrcPath, 'welcome.html'),
             },
         },
     },

From 294ecb57a020a8115b5b664819ea4405a0583b4f Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 1 Oct 2023 19:53:17 +0200
Subject: [PATCH 18/82] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9131500c4cd..050d996326b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "build": "vite build"
+    "build": "vite build --debug"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.4.2",

From 73e02a0bcaf2796cd7bb3a614d7b2ee35eff2b1a Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 1 Oct 2023 22:30:09 +0200
Subject: [PATCH 19/82] Fix command

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index d84b9a6e46a..cb76b760180 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND npm install && bash -c SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} ${SUNSHINE_ASSETS_DIR} npm run build)
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND npm install && bash -c SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${SUNSHINE_ASSETS_DIR} npm run build)
\ No newline at end of file

From e3a97300e189f81411af430c617056120804fbc0 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 1 Oct 2023 22:57:49 +0200
Subject: [PATCH 20/82] moved bash outisde

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index cb76b760180..7814a97075a 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND npm install && bash -c SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${SUNSHINE_ASSETS_DIR} npm run build)
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${SUNSHINE_ASSETS_DIR} npm run build')
\ No newline at end of file

From f68f7bdef4c9eee77ef883bb48c9cfea822aa0d8 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 1 Oct 2023 23:12:38 +0200
Subject: [PATCH 21/82] Fix path

---
 cmake/targets/common.cmake |  2 +-
 vite.config.js             | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 7814a97075a..b37efc2197c 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${SUNSHINE_ASSETS_DIR} npm run build')
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR}${SUNSHINE_ASSETS_DIR} npm run build')
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index a5723ab73e8..b8254680550 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,14 +14,14 @@ import process from 'process'
  * The vite-plugin-ejs handles this automatically
  */
 let assetsSrcPath = 'src_assets/common/assets/web';
-let assetsDstPath = 'src_assets/common/assets/web';
-console.log(process.env)
+let assetsDstPath = 'build/assets/common/assets/web';
+
 if (process.env.SUNSHINE_SOURCE_ASSETS_DIR) {
-    console.log("Using srcdir from Cmake: " + process.env.SUNSHINE_SOURCE_ASSETS_DIR);
-    assetsSrcPath = process.env.SUNSHINE_SOURCE_ASSETS_DIR
+    console.log("Using srcdir from Cmake: " + resolve(process.env.SUNSHINE_SOURCE_ASSETS_DIR,"common/assets/web"));
+    assetsSrcPath = resolve(process.env.SUNSHINE_SOURCE_ASSETS_DIR,"common/assets/web")
 }
 if (process.env.SUNSHINE_ASSETS_DIR) {
-    console.log("Using destdir from Cmake: " + process.env.SUNSHINE_ASSETS_DIR);
+    console.log("Using destdir from Cmake: " + resolve(process.env.SUNSHINE_ASSETS_DIR,"assets/web"));
     assetsDstPath = process.env.SUNSHINE_ASSETS_DIR
 }
 

From fbf3f9c4f2026ee27727103c7bd843203ad790ae Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Mon, 2 Oct 2023 21:15:02 +0200
Subject: [PATCH 22/82] fix separator

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index b37efc2197c..589a9ca7df9 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR}${SUNSHINE_ASSETS_DIR} npm run build')
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR}/${SUNSHINE_ASSETS_DIR} npm run build')
\ No newline at end of file

From e9c4739df81682997b74abda2b7926946658c924 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Mon, 2 Oct 2023 21:43:28 +0200
Subject: [PATCH 23/82] aa

---
 cmake/targets/common.cmake | 2 +-
 vite.config.js             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 589a9ca7df9..71c5061acd9 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR}/${SUNSHINE_ASSETS_DIR} npm run build')
\ No newline at end of file
+add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index b8254680550..91a9d86d706 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -22,7 +22,7 @@ if (process.env.SUNSHINE_SOURCE_ASSETS_DIR) {
 }
 if (process.env.SUNSHINE_ASSETS_DIR) {
     console.log("Using destdir from Cmake: " + resolve(process.env.SUNSHINE_ASSETS_DIR,"assets/web"));
-    assetsDstPath = process.env.SUNSHINE_ASSETS_DIR
+    assetsDstPath = resolve(process.env.SUNSHINE_ASSETS_DIR,process.env.SUNSHINE_ASSETS_DIR)
 }
 
 let header = fs.readFileSync(resolve(assetsSrcPath, "template_header.html"))

From 84b55cc73bdf52c5ce738b67fb9e66eda47b1199 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Mon, 2 Oct 2023 22:02:00 +0200
Subject: [PATCH 24/82] fix arg

---
 vite.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.js b/vite.config.js
index 91a9d86d706..81dcf7f86c8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -22,7 +22,7 @@ if (process.env.SUNSHINE_SOURCE_ASSETS_DIR) {
 }
 if (process.env.SUNSHINE_ASSETS_DIR) {
     console.log("Using destdir from Cmake: " + resolve(process.env.SUNSHINE_ASSETS_DIR,"assets/web"));
-    assetsDstPath = resolve(process.env.SUNSHINE_ASSETS_DIR,process.env.SUNSHINE_ASSETS_DIR)
+    assetsDstPath = resolve(process.env.SUNSHINE_ASSETS_DIR,"assets/web")
 }
 
 let header = fs.readFileSync(resolve(assetsSrcPath, "template_header.html"))

From 498230a8f43968124d35623abda5d6a64224842f Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 7 Oct 2023 15:26:56 +0200
Subject: [PATCH 25/82] Update documentation

---
 cmake/packaging/common.cmake              |  2 +-
 docs/source/building/linux.rst            |  7 -------
 docs/source/building/macos.rst            |  7 -------
 docs/source/building/windows.rst          | 11 +----------
 docs/source/contributing/contributing.rst | 16 ++++++++++++++++
 package.json                              |  3 ++-
 6 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/cmake/packaging/common.cmake b/cmake/packaging/common.cmake
index d54f7345242..d905cf3b59f 100644
--- a/cmake/packaging/common.cmake
+++ b/cmake/packaging/common.cmake
@@ -12,7 +12,7 @@ set(CPACK_PACKAGE_ICON ${PROJECT_SOURCE_DIR}/sunshine.png)
 set(CPACK_PACKAGE_FILE_NAME "${CMAKE_PROJECT_NAME}")
 set(CPACK_STRIP_FILES YES)
 
-# install npm modules
+# install built vite assets
 install(DIRECTORY "${CMAKE_CURRENT_BINARY_DIR}/assets/web"
         DESTINATION "${SUNSHINE_ASSETS_DIR}")
 
diff --git a/docs/source/building/linux.rst b/docs/source/building/linux.rst
index 3099cda4375..a82f3427254 100644
--- a/docs/source/building/linux.rst
+++ b/docs/source/building/linux.rst
@@ -187,13 +187,6 @@ If the version of CUDA available from your distro is not adequate, manually inst
    ./cuda.run --silent --toolkit --toolkitpath=/usr --no-opengl-libs --no-man-page --no-drm
    rm ./cuda.run
 
-npm dependencies
-----------------
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
-
 Build
 -----
 .. Attention:: Ensure you are in the build directory created during the clone step earlier before continuing.
diff --git a/docs/source/building/macos.rst b/docs/source/building/macos.rst
index 40cc53a91fb..a96cc243263 100644
--- a/docs/source/building/macos.rst
+++ b/docs/source/building/macos.rst
@@ -24,13 +24,6 @@ Install Requirements
       cd /usr/local/include
       ln -s ../opt/openssl/include/openssl .
 
-npm dependencies
-----------------
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
-
 Build
 -----
 .. Attention:: Ensure you are in the build directory created during the clone step earlier before continuing.
diff --git a/docs/source/building/windows.rst b/docs/source/building/windows.rst
index a51b6485372..26d7c272ec6 100644
--- a/docs/source/building/windows.rst
+++ b/docs/source/building/windows.rst
@@ -17,16 +17,7 @@ Install dependencies:
       pacman -S base-devel cmake diffutils gcc git make mingw-w64-x86_64-binutils \
       mingw-w64-x86_64-boost mingw-w64-x86_64-cmake mingw-w64-x86_64-curl \
       mingw-w64-x86_64-libmfx mingw-w64-x86_64-openssl mingw-w64-x86_64-opus \
-      mingw-w64-x86_64-toolchain
-
-npm dependencies
-----------------
-Install nodejs and npm. Downloads available `here <https://nodejs.org/en/download/>`__.
-
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
+      mingw-w64-x86_64-toolchain mingw-w64-x86_64-nodejs
 
 Build
 -----
diff --git a/docs/source/contributing/contributing.rst b/docs/source/contributing/contributing.rst
index a50300d2327..4cd390f04d4 100644
--- a/docs/source/contributing/contributing.rst
+++ b/docs/source/contributing/contributing.rst
@@ -3,3 +3,19 @@ Contributing
 
 Read our contribution guide in our organization level
 `docs <https://lizardbyte.readthedocs.io/en/latest/developers/contributing.html>`__.
+
+Web UI
+------------
+The Web UI uses `Vite <https://vitejs.dev/>`__ as its build system, to handle the integration of the NPM libraries.
+
+The HTML pages used by the Web UI are found in ``src_assets/common/assets/web``.
+
+`EJS <https://www.npmjs.com/package/vite-plugin-ejs>`__ is used as a templating system for the pages (check ``template_header.html`` and ``template_header_main.html``)
+
+The Style System is provided by `Bootstrap <https://getbootstrap.com/>`__
+
+The JS framework used by the more interactive pages is `Vue <https://vuejs.org/>`__
+
+Building
+^^^^^^^^^^^^^
+Sunshine already builds the UI as part of its build process, but you can make faster changes by starting vite manually: ``npm run dev``
\ No newline at end of file
diff --git a/package.json b/package.json
index 050d996326b..c8bd3aac5c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "scripts": {
-    "build": "vite build --debug"
+    "build": "vite build --debug",
+    "dev": "vite build --watch"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.4.2",

From 74cf2c5433f6f55724b0313c30ec876cfa211438 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 15:51:11 +0200
Subject: [PATCH 26/82] Fix config page

---
 src_assets/common/assets/web/config.html | 234 +++++++++++------------
 vite.config.js                           |   2 +-
 2 files changed, 110 insertions(+), 126 deletions(-)

diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 3d41edbb531..dfbd75f56da 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -3,24 +3,24 @@
 
 <head>
   <%- header %>
-  <%- headerMain %>
-  <style>
-    .config-page {
-      padding: 1em;
-      border: 1px solid #dee2e6;
-      border-top: none;
-    }
-  
-    .buttons {
-      padding: 1em 0;
-    }
-  
-    .ms-item {
-      background-color: #ccc;
-      font-size: 12px;
-      font-weight: bold;
-    }
-  </style>
+    <%- headerMain %>
+      <style>
+        .config-page {
+          padding: 1em;
+          border: 1px solid #dee2e6;
+          border-top: none;
+        }
+
+        .buttons {
+          padding: 1em 0;
+        }
+
+        .ms-item {
+          background-color: #ccc;
+          font-size: 12px;
+          font-weight: bold;
+        }
+      </style>
 </head>
 
 <body id="app">
@@ -443,115 +443,99 @@ <h1 class="my-4">Configuration</h1>
           </div>
         </div>
       </div>
-    </div>
-    <div v-if="currentTab === 'advanced'" class="config-page">
-      <!--Address family-->
-      <div class="mb-3">
-        <label for="address_family" class="form-label">Address Family</label>
-        <select
-          id="address_family"
-          class="form-select"
-          v-model="config.address_family"
-        >
-          <option value="ipv4">IPv4 only</option>
-          <option value="both">IPv4+IPv6</option>
-        </select>
-        <div class="form-text">Set the address family used by Sunshine</div>
-      </div>
-      <!--Port family-->
-      <div class="mb-3">
-        <label for="port" class="form-label">Port</label>
-        <input
-          type="number"
-          min="1029"
-          max="65514"
-          class="form-control"
-          id="port"
-          placeholder="47989"
-          v-model="config.port"
-        />
-        <div class="form-text">Set the family of ports used by Sunshine</div>
-        <!-- Add warning if any port is less than 1024 -->
-        <div class="alert alert-danger" v-if="(+effectivePort - 5) < 1024">
-          <i class="fa-solid fa-xl fa-triangle-exclamation"></i> Sunshine cannot use ports below 1024!
-        </div>
-        <!-- Add warning if any port is above 65535 -->
-        <div class="alert alert-danger" v-if="(+effectivePort + 21) > 65535">
-          <i class="fa-solid fa-xl fa-triangle-exclamation"></i> Ports above 65535 are not available!
+      <div v-if="currentTab === 'advanced'" class="config-page">
+        <!--Address family-->
+        <div class="mb-3">
+          <label for="address_family" class="form-label">Address Family</label>
+          <select id="address_family" class="form-select" v-model="config.address_family">
+            <option value="ipv4">IPv4 only</option>
+            <option value="both">IPv4+IPv6</option>
+          </select>
+          <div class="form-text">Set the address family used by Sunshine</div>
         </div>
-        <!-- Create a port table for the various ports needed by Sunshine -->
-        <table class="table">
-          <thead>
-            <tr>
-              <th scope="col">Protocol</th>
-              <th scope="col">Port</th>
-              <th scope="col">Note</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <!-- HTTPS -->
-              <td>TCP</td>
-              <td>{{+effectivePort - 5}}</td>
-              <td></td>
-            </tr>
-            <tr>
-              <!-- HTTP -->
-              <td>TCP</td>
-              <td>{{+effectivePort}}</td>
-              <td>
-                <div class="alert alert-primary" role="alert" v-if="+effectivePort !== 47989">
-                  <i class="fa-solid fa-xl fa-circle-info"></i> Use this port to connect with Moonlight.
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <!-- Web UI -->
-              <td>TCP</td>
-              <td>{{+effectivePort + 1}}</td>
-              <td>Web UI</td>
-            </tr>
-            <tr>
-              <!-- RTSP -->
-              <td>TCP</td>
-              <td>{{+effectivePort + 21}}</td>
-              <td></td>
-            </tr>
-            <tr>
-              <!-- Video, Control, Audio -->
-              <td>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 -->
-        <div class="alert alert-warning" v-if="config.origin_web_ui_allowed === 'wan'">
-          <i class="fa-solid fa-xl fa-triangle-exclamation"></i> Exposing the Web UI to the internet is a security risk!
-          Proceed at your own risk!
+        <!--Port family-->
+        <div class="mb-3">
+          <label for="port" class="form-label">Port</label>
+          <input type="number" min="1029" max="65514" class="form-control" id="port" placeholder="47989"
+            v-model="config.port" />
+          <div class="form-text">Set the family of ports used by Sunshine</div>
+          <!-- Add warning if any port is less than 1024 -->
+          <div class="alert alert-danger" v-if="(+effectivePort - 5) < 1024">
+            <i class="fa-solid fa-xl fa-triangle-exclamation"></i> Sunshine cannot use ports below 1024!
+          </div>
+          <!-- Add warning if any port is above 65535 -->
+          <div class="alert alert-danger" v-if="(+effectivePort + 21) > 65535">
+            <i class="fa-solid fa-xl fa-triangle-exclamation"></i> Ports above 65535 are not available!
+          </div>
+          <!-- Create a port table for the various ports needed by Sunshine -->
+          <table class="table">
+            <thead>
+              <tr>
+                <th scope="col">Protocol</th>
+                <th scope="col">Port</th>
+                <th scope="col">Note</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <!-- HTTPS -->
+                <td>TCP</td>
+                <td>{{+effectivePort - 5}}</td>
+                <td></td>
+              </tr>
+              <tr>
+                <!-- HTTP -->
+                <td>TCP</td>
+                <td>{{+effectivePort}}</td>
+                <td>
+                  <div class="alert alert-primary" role="alert" v-if="+effectivePort !== 47989">
+                    <i class="fa-solid fa-xl fa-circle-info"></i> Use this port to connect with Moonlight.
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <!-- Web UI -->
+                <td>TCP</td>
+                <td>{{+effectivePort + 1}}</td>
+                <td>Web UI</td>
+              </tr>
+              <tr>
+                <!-- RTSP -->
+                <td>TCP</td>
+                <td>{{+effectivePort + 21}}</td>
+                <td></td>
+              </tr>
+              <tr>
+                <!-- Video, Control, Audio -->
+                <td>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 -->
+          <div class="alert alert-warning" v-if="config.origin_web_ui_allowed === 'wan'">
+            <i class="fa-solid fa-xl fa-triangle-exclamation"></i> Exposing the Web UI to the internet is a security
+            risk!
+            Proceed at your own risk!
+          </div>
         </div>
-      </div>
-      <!-- Quantization Parameter -->
-      <div class="mb-3">
-        <label for="qp" class="form-label">Quantization Parameter</label>
-        <input
-          type="number"
-          class="form-control"
-          id="qp"
-          placeholder="28"
-          v-model="config.qp"
-        />
-        <div class="form-text">
-          Quantization Parameter<br />
-          Some devices may not support Constant Bit Rate.<br />
-          For those devices, QP is used instead.<br />
-          Higher value means more compression, but less quality<br />
+        <!-- Quantization Parameter -->
+        <div class="mb-3">
+          <label for="qp" class="form-label">Quantization Parameter</label>
+          <input type="number" class="form-control" id="qp" placeholder="28" v-model="config.qp" />
+          <div class="form-text">
+            Quantization Parameter<br />
+            Some devices may not support Constant Bit Rate.<br />
+            For those devices, QP is used instead.<br />
+            Higher value means more compression, but less quality<br />
+          </div>
         </div>
       </div>
       <!--Software Settings-->
diff --git a/vite.config.js b/vite.config.js
index 81dcf7f86c8..e2117365383 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,7 +14,7 @@ import process from 'process'
  * The vite-plugin-ejs handles this automatically
  */
 let assetsSrcPath = 'src_assets/common/assets/web';
-let assetsDstPath = 'build/assets/common/assets/web';
+let assetsDstPath = 'build/assets/web';
 
 if (process.env.SUNSHINE_SOURCE_ASSETS_DIR) {
     console.log("Using srcdir from Cmake: " + resolve(process.env.SUNSHINE_SOURCE_ASSETS_DIR,"common/assets/web"));

From dce4f75bb296f140a9183855ae246fa482f10e39 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:05:59 +0200
Subject: [PATCH 27/82] Update cmake/targets/common.cmake

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 71c5061acd9..e0a7bb2cc21 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target (web-ui ALL WORKING_DIRECTORY  COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
\ No newline at end of file
+add_custom_target(web-ui ALL WORKING_DIRECTORY COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')

From e89e47b631211bfde1dc4457109e5072b64c8e1f Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:06:13 +0200
Subject: [PATCH 28/82] Update src_assets/common/assets/web/ResourceCard.vue

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/ResourceCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/ResourceCard.vue b/src_assets/common/assets/web/ResourceCard.vue
index 43034219342..8bdfb5f9311 100644
--- a/src_assets/common/assets/web/ResourceCard.vue
+++ b/src_assets/common/assets/web/ResourceCard.vue
@@ -33,4 +33,4 @@
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>

From dd49676b62d352a2a3b4e81a680710671e21e020 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:06:31 +0200
Subject: [PATCH 29/82] Update src_assets/common/assets/web/welcome.html

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/welcome.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/welcome.html
index b7ea3911e17..348ca96c46b 100644
--- a/src_assets/common/assets/web/welcome.html
+++ b/src_assets/common/assets/web/welcome.html
@@ -102,4 +102,4 @@ <h1 class="mb-0">
     },
   });
   app.mount("#app");
-</script>
\ No newline at end of file
+</script>

From a76ead9c1a42504afde973ba7d8eca0017f12c04 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:07:17 +0200
Subject: [PATCH 30/82] Update src_assets/common/assets/web/SunshineHeader.vue

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/SunshineHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/SunshineHeader.vue b/src_assets/common/assets/web/SunshineHeader.vue
index 9f9a475791f..6988e0f8f23 100644
--- a/src_assets/common/assets/web/SunshineHeader.vue
+++ b/src_assets/common/assets/web/SunshineHeader.vue
@@ -53,4 +53,4 @@
   .form-control::placeholder {
     opacity: 0.5;
   }
-</style>
\ No newline at end of file
+</style>

From f282be05f89c6fb32dd572d45009e9b759dee928 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:07:53 +0200
Subject: [PATCH 31/82] Update
 src_assets/common/assets/web/troubleshooting.html

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/troubleshooting.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index a2fd3e68a3d..dd870e08c24 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -207,4 +207,4 @@ <h2>Logs</h2>
   </script>
 
 
-</body>
\ No newline at end of file
+</body>

From 5cf49f62a13c1aa4c8d0f60fd5de2527c478893d Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:08:11 +0200
Subject: [PATCH 32/82] Update docs/source/contributing/contributing.rst

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 docs/source/contributing/contributing.rst | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/source/contributing/contributing.rst b/docs/source/contributing/contributing.rst
index 4cd390f04d4..e0c4bc739b0 100644
--- a/docs/source/contributing/contributing.rst
+++ b/docs/source/contributing/contributing.rst
@@ -10,11 +10,11 @@ The Web UI uses `Vite <https://vitejs.dev/>`__ as its build system, to handle th
 
 The HTML pages used by the Web UI are found in ``src_assets/common/assets/web``.
 
-`EJS <https://www.npmjs.com/package/vite-plugin-ejs>`__ is used as a templating system for the pages (check ``template_header.html`` and ``template_header_main.html``)
+`EJS <https://www.npmjs.com/package/vite-plugin-ejs>`__ is used as a templating system for the pages (check ``template_header.html`` and ``template_header_main.html``).
 
-The Style System is provided by `Bootstrap <https://getbootstrap.com/>`__
+The Style System is provided by `Bootstrap <https://getbootstrap.com/>`__.
 
-The JS framework used by the more interactive pages is `Vue <https://vuejs.org/>`__
+The JS framework used by the more interactive pages is `Vue <https://vuejs.org/>`__.
 
 Building
 ^^^^^^^^^^^^^

From 58fb04141f3e3ae094eb4095750be10808b96dc9 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:09:17 +0200
Subject: [PATCH 33/82] Update docs/source/contributing/contributing.rst

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 docs/source/contributing/contributing.rst | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/source/contributing/contributing.rst b/docs/source/contributing/contributing.rst
index e0c4bc739b0..6a6142d4781 100644
--- a/docs/source/contributing/contributing.rst
+++ b/docs/source/contributing/contributing.rst
@@ -18,4 +18,8 @@ The JS framework used by the more interactive pages is `Vue <https://vuejs.org/>
 
 Building
 ^^^^^^^^^^^^^
-Sunshine already builds the UI as part of its build process, but you can make faster changes by starting vite manually: ``npm run dev``
\ No newline at end of file
+Sunshine already builds the UI as part of its build process, but you can make faster changes by starting vite manually.
+
+.. code-block:: bash
+
+   npm run dev
\ No newline at end of file

From af35968304ea5036ea8713853272a931ae636319 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:10:46 +0200
Subject: [PATCH 34/82] Update
 src_assets/common/assets/web/template_header_main.html

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/template_header_main.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/template_header_main.html b/src_assets/common/assets/web/template_header_main.html
index a3bca667ae5..191fa2d3ae3 100644
--- a/src_assets/common/assets/web/template_header_main.html
+++ b/src_assets/common/assets/web/template_header_main.html
@@ -5,4 +5,4 @@
         channel: '804383092822900797',
         defer: false,
     })
-</script>
\ No newline at end of file
+</script>

From 3848ab217539b4158eb773a98019957c425c0c7a Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:11:23 +0200
Subject: [PATCH 35/82] Update src_assets/common/assets/web/index.html

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index 5967a98d3ec..bf4290fdd86 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -153,4 +153,4 @@ <h3>{{githubVersion.name}}</h3>
     }
   });
   app.mount('#app');
-</script>
\ No newline at end of file
+</script>

From 63671fd753917f2ebb163b2f5360beec1ab58bc7 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:11:37 +0200
Subject: [PATCH 36/82] Update
 src_assets/common/assets/web/template_header.html

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/template_header.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
index 1aaea775b13..db271b3745a 100644
--- a/src_assets/common/assets/web/template_header.html
+++ b/src_assets/common/assets/web/template_header.html
@@ -6,4 +6,4 @@
 <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
 <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
 <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-<script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
\ No newline at end of file
+<script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>

From 9539f8b5fbd48f41152c4276d27d394b69eb68a3 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 8 Oct 2023 20:14:06 +0200
Subject: [PATCH 37/82] Apply suggestions from code review

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/apps.html     | 2 +-
 src_assets/common/assets/web/config.html   | 2 +-
 src_assets/common/assets/web/password.html | 2 +-
 src_assets/common/assets/web/pin.html      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index f9e1fc89fd5..c343f210c0f 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -558,4 +558,4 @@ <h4>About Environment Variables</h4>
 
   app.mount("#app")
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index dfbd75f56da..65fb8b6572d 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -1036,4 +1036,4 @@ <h2 class="accordion-header">
   });
 
   app.mount("#app");
-</script>
\ No newline at end of file
+</script>
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index 8d6d1bf2717..450a18d521c 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -117,4 +117,4 @@ <h4>New Credentials</h4>
   });
 
   app.mount("#app");
-</script>
\ No newline at end of file
+</script>
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
index 996317d913b..d06c86d3b61 100644
--- a/src_assets/common/assets/web/pin.html
+++ b/src_assets/common/assets/web/pin.html
@@ -55,4 +55,4 @@ <h1 class="my-4">PIN Pairing</h1>
         }
       });
   });
-</script>
\ No newline at end of file
+</script>

From 61031bfd6bc22be3b2463bc3e9042ccb98e2cb19 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 22 Oct 2023 15:16:16 +0200
Subject: [PATCH 38/82] Fix alphabetical order of dependencies

---
 .github/workflows/CI.yml         | 4 ++--
 docs/source/building/windows.rst | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index 219d5be78ff..48f5f7fd7b5 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -715,12 +715,12 @@ jobs:
             mingw-w64-x86_64-boost
             mingw-w64-x86_64-cmake
             mingw-w64-x86_64-curl
-            mingw-w64-x86_64-onevpl
+            mingw-w64-x86_64-nodejs
             mingw-w64-x86_64-nsis
+            mingw-w64-x86_64-onevpl
             mingw-w64-x86_64-openssl
             mingw-w64-x86_64-opus
             mingw-w64-x86_64-toolchain
-            mingw-w64-x86_64-nodejs
             nasm
             wget
             yasm
diff --git a/docs/source/building/windows.rst b/docs/source/building/windows.rst
index f6ebc96a3e9..a8164d3cb20 100644
--- a/docs/source/building/windows.rst
+++ b/docs/source/building/windows.rst
@@ -16,8 +16,8 @@ Install dependencies:
 
       pacman -S base-devel cmake diffutils gcc git make mingw-w64-x86_64-binutils \
       mingw-w64-x86_64-boost mingw-w64-x86_64-cmake mingw-w64-x86_64-curl \
-      mingw-w64-x86_64-onevpl mingw-w64-x86_64-openssl mingw-w64-x86_64-opus \
-      mingw-w64-x86_64-toolchain mingw-w64-x86_64-nodejs
+      mingw-w64-x86_64-nodejs mingw-w64-x86_64-onevpl mingw-w64-x86_64-openssl \ 
+      mingw-w64-x86_64-opus mingw-w64-x86_64-toolchain
 
 Build
 -----

From b0162109aaa0ba4a411111673e930d0035321010 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 22 Oct 2023 15:56:06 +0200
Subject: [PATCH 39/82] Rename Header to navbar and dynamically load Widgetbot

---
 .../web/{SunshineHeader.vue => Navbar.vue}    | 35 +++++++++++++------
 src_assets/common/assets/web/apps.html        |  9 +++--
 src_assets/common/assets/web/config.html      |  9 +++--
 src_assets/common/assets/web/index.html       |  7 ++--
 src_assets/common/assets/web/password.html    |  7 ++--
 src_assets/common/assets/web/pin.html         |  7 ++--
 .../assets/web/template_header_main.html      |  8 -----
 .../common/assets/web/troubleshooting.html    |  9 +++--
 vite.config.js                                |  3 +-
 9 files changed, 46 insertions(+), 48 deletions(-)
 rename src_assets/common/assets/web/{SunshineHeader.vue => Navbar.vue} (72%)
 delete mode 100644 src_assets/common/assets/web/template_header_main.html

diff --git a/src_assets/common/assets/web/SunshineHeader.vue b/src_assets/common/assets/web/Navbar.vue
similarity index 72%
rename from src_assets/common/assets/web/SunshineHeader.vue
rename to src_assets/common/assets/web/Navbar.vue
index 6988e0f8f23..fd5bc3b36fa 100644
--- a/src_assets/common/assets/web/SunshineHeader.vue
+++ b/src_assets/common/assets/web/Navbar.vue
@@ -35,22 +35,35 @@
 </template>
 
 <script>
-    export default {
-        created(){
-            console.log("Header mounted!")
-        },
-        mounted(){
-            let el = document.querySelector("a[href='"+document.location.pathname+"']");
-            if(el)el.classList.add("active")
+export default {
+    created() {
+        console.log("Header mounted!")
+    },
+    mounted() {
+        let el = document.querySelector("a[href='" + document.location.pathname + "']");
+        if (el) el.classList.add("active")
+        let widgetbot = document.createElement('script')
+        widgetbot.setAttribute('src', 'https://cdn.jsdelivr.net/npm/@widgetbot/crate@3')
+        widgetbot.async = true;
+        widgetbot.onload = () => {
+            console.log("Widgetbot script created, starting up")
+            new Crate({
+                server: '804382334370578482',
+                channel: '804383092822900797',
+                defer: false,
+            })
         }
+        document.head.appendChild(widgetbot)
     }
+}
 </script>
 
 <style>
-  .nav-link.active {
+.nav-link.active {
     font-weight: 500;
-  }
-  .form-control::placeholder {
+}
+
+.form-control::placeholder {
     opacity: 0.5;
-  }
+}
 </style>
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index c343f210c0f..5f4cc909270 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -2,8 +2,7 @@
 <html lang="en">
 
 <head>
-  <%- header %>
-    <%- headerMain %>
+      <%- header %>
       <style>
         .precmd-head {
           width: 200px;
@@ -72,7 +71,7 @@
 </head>
 
 <body id="app">
-  <Sunshine-Header></Sunshine-Header>
+  <Navbar></Navbar>
   <div class="container">
     <div class="my-4">
       <h1>Applications</h1>
@@ -374,10 +373,10 @@ <h4>About Environment Variables</h4>
 </body>
 <script type="module">
   import { createApp } from 'vue';
-  import SunshineHeader from './SunshineHeader.vue'
+  import Navbar from './Navbar.vue'
   const app = createApp({
     components: {
-      SunshineHeader
+      Navbar
     },
     data() {
       return {
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 65fb8b6572d..9335a6a5f28 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -2,8 +2,7 @@
 <html lang="en">
 
 <head>
-  <%- header %>
-    <%- headerMain %>
+      <%- header %>
       <style>
         .config-page {
           padding: 1em;
@@ -24,7 +23,7 @@
 </head>
 
 <body id="app">
-  <Sunshine-Header></Sunshine-Header>
+  <Navbar></Navbar>
   <div class="container">
     <h1 class="my-4">Configuration</h1>
     <div class="form" v-if="config">
@@ -777,7 +776,7 @@ <h2 class="accordion-header">
 </body>
 <script type="module">
   import { createApp } from 'vue'
-  import SunshineHeader from './SunshineHeader.vue'
+  import Navbar from './Navbar.vue'
 
   // create dictionary for defaultConfig
   const defaultConfig = {
@@ -822,7 +821,7 @@ <h2 class="accordion-header">
 
   const app = createApp({
     components: {
-      SunshineHeader
+      Navbar
     },
     data() {
       return {
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index bf4290fdd86..32ccbc7d3c4 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -3,11 +3,10 @@
 
 <head>
   <%- header %>
-    <%- headerMain %>
 </head>
 
 <body id="app">
-  <Sunshine-Header></Sunshine-Header>
+  <Navbar></Navbar>
   <div id="content" class="container">
     <h1 class="my-4">Hello, Sunshine!</h1>
     <p>Sunshine is a self-hosted game stream host for Moonlight.</p>
@@ -67,12 +66,12 @@ <h3>{{githubVersion.name}}</h3>
 
 <script type="module">
   import { createApp } from 'vue'
-  import SunshineHeader from './SunshineHeader.vue'
+  import Navbar from './Navbar.vue'
   import ResourceCard from './ResourceCard.vue'
   console.log("Hello, Sunshine!")
   let app = createApp({
     components: {
-      SunshineHeader,
+      Navbar,
       ResourceCard
     },
     data() {
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index 450a18d521c..2480c22fd99 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -3,7 +3,6 @@
 
 <head>
   <%- header %>
-  <%- headerMain %>
   <style>
     .config-page {
       padding: 1em;
@@ -18,7 +17,7 @@
 </head>
 
 <body id="app">
-  <Sunshine-Header></Sunshine-Header>
+  <Navbar></Navbar>
   <div class="container">
     <h1 class="my-4">Password Change</h1>
     <form @submit.prevent="save">
@@ -71,11 +70,11 @@ <h4>New Credentials</h4>
 </body>
 <script type="module">
   import { createApp } from 'vue'
-  import SunshineHeader from './SunshineHeader.vue'
+  import Navbar from './Navbar.vue'
 
   const app = createApp({
     components: {
-      SunshineHeader
+      Navbar
     },
     data() {
       return {
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
index d06c86d3b61..492ddd8a2cb 100644
--- a/src_assets/common/assets/web/pin.html
+++ b/src_assets/common/assets/web/pin.html
@@ -3,11 +3,10 @@
 
 <head>
   <%- header %>
-  <%- headerMain %>
 </head>
 
 <body id="app">
-  <Sunshine-Header></Sunshine-Header>
+  <Navbar></Navbar>
   <div id="content" class="container">
     <h1 class="my-4">PIN Pairing</h1>
     <form action="" class="form d-flex flex-column align-items-center" id="form">
@@ -26,11 +25,11 @@ <h1 class="my-4">PIN Pairing</h1>
 </body>
 
 <script type="module">
-  import SunshineHeader from './SunshineHeader.vue'
+  import Navbar from './Navbar.vue'
   import {createApp} from 'vue'
   let app = createApp({
     components: {
-      SunshineHeader
+      Navbar
     }
   });
   app.mount("#app");
diff --git a/src_assets/common/assets/web/template_header_main.html b/src_assets/common/assets/web/template_header_main.html
deleted file mode 100644
index 191fa2d3ae3..00000000000
--- a/src_assets/common/assets/web/template_header_main.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- TEMPLATE_HEADER_MAIN - Used for Default UI Pages after Welcome -->
-<script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
-    new Crate({
-        server: '804382334370578482',
-        channel: '804383092822900797',
-        defer: false,
-    })
-</script>
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index dd870e08c24..58fcb395410 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -2,8 +2,7 @@
 <html lang="en">
 
 <head>
-  <%- header %>
-    <%- headerMain %>
+      <%- header %>
       <style>
         .troubleshooting-logs {
           white-space: pre;
@@ -38,7 +37,7 @@
 </head>
 
 <body id="app">
-  <Sunshine-Header></Sunshine-Header>
+  <Navbar></Navbar>
   <div class="container">
     <h1 class="my-4">Troubleshooting</h1>
     <!--Force Close App-->
@@ -121,11 +120,11 @@ <h2>Logs</h2>
 
   <script type="module">
     import { createApp } from 'vue'
-    import SunshineHeader from './SunshineHeader.vue'
+    import Navbar from './Navbar.vue'
 
     const app = createApp({
       components: {
-        SunshineHeader
+        Navbar
       },
       data() {
         return {
diff --git a/vite.config.js b/vite.config.js
index e2117365383..a41470e4bf5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -26,7 +26,6 @@ if (process.env.SUNSHINE_ASSETS_DIR) {
 }
 
 let header = fs.readFileSync(resolve(assetsSrcPath, "template_header.html"))
-let headerMain = fs.readFileSync(resolve(assetsSrcPath, "template_header_main.html"))
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -35,7 +34,7 @@ export default defineConfig({
             vue: 'vue/dist/vue.esm-bundler.js'
         }
     },
-    plugins: [vue(), ViteEjsPlugin({ header, headerMain })],
+    plugins: [vue(), ViteEjsPlugin({ header })],
     root: resolve(assetsSrcPath),
     build: {
         outDir: resolve(assetsDstPath),

From 52153380906d554b3e240486f360854484fc4ea7 Mon Sep 17 00:00:00 2001
From: TheElixZammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 19:03:56 +0000
Subject: [PATCH 40/82] Use nvm for Node setup

---
 docker/ubuntu-22.04.dockerfile | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 267c6a9c976..2b8e49295e1 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -58,8 +58,6 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
-  nodejs \
-  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -91,6 +89,15 @@ chmod a+x ./cuda.run
 rm ./cuda.run
 _INSTALL_CUDA
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+nvm install lts
+nvm use lts
+_INSTALL_NODE
+
 # copy repository
 WORKDIR /build/sunshine/
 COPY --link .. .

From 22891cdd8faacef7b53cc6a61a90be154c0221f9 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 21:35:24 +0200
Subject: [PATCH 41/82] Change order

---
 docker/ubuntu-22.04.dockerfile | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 2b8e49295e1..21ab5d827a1 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -67,6 +67,15 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+nvm install lts
+nvm use lts
+_INSTALL_NODE
+
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -89,15 +98,6 @@ chmod a+x ./cuda.run
 rm ./cuda.run
 _INSTALL_CUDA
 
-#Install Node
-RUN <<_INSTALL_NODE
-#!/bin/bash
-set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-nvm install lts
-nvm use lts
-_INSTALL_NODE
-
 # copy repository
 WORKDIR /build/sunshine/
 COPY --link .. .

From 94a14dac908b7961aa41fd2eb5f8efd2a2ab208f Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 21:42:41 +0200
Subject: [PATCH 42/82] added nvm source dir

---
 docker/ubuntu-22.04.dockerfile | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 21ab5d827a1..9ee7829e083 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -72,6 +72,8 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+echo $NVM_DIR
+source $NVM_DIR/nvm.sh
 nvm install lts
 nvm use lts
 _INSTALL_NODE

From 82ead4a4458a29ba02970855fa8f8ee9e750a38f Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 21:50:44 +0200
Subject: [PATCH 43/82] Fix path (again)

---
 docker/ubuntu-22.04.dockerfile | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 9ee7829e083..f2545e40ba7 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -72,8 +72,9 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-echo $NVM_DIR
-source $NVM_DIR/nvm.sh
+echo $HOME/.nvm/nvm.sh
+ls $HOME/.nvm/nvm.sh
+source $HOME/.nvm/nvm.sh
 nvm install lts
 nvm use lts
 _INSTALL_NODE

From c68637548f308c0816d0a7c7f9bd8d532364316f Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 22:02:57 +0200
Subject: [PATCH 44/82] replace wget with curl

---
 docker/ubuntu-22.04.dockerfile | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index f2545e40ba7..de5932403dd 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -32,6 +32,7 @@ apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
   cmake=3.22.* \
+  curl \
   git \
   libayatana-appindicator3-dev \
   libavdevice-dev \
@@ -71,7 +72,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 echo $HOME/.nvm/nvm.sh
 ls $HOME/.nvm/nvm.sh
 source $HOME/.nvm/nvm.sh

From 777b9bf51832ae0677caadef13292f7c4843a70e Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 22:14:11 +0200
Subject: [PATCH 45/82] Add CA Certs

---
 docker/ubuntu-22.04.dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index de5932403dd..f5af8cbae42 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -32,6 +32,7 @@ apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
   cmake=3.22.* \
+  ca-certificates \
   curl \
   git \
   libayatana-appindicator3-dev \

From f2441f4b547b50c191e8238d481765de91de4797 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 22:31:25 +0200
Subject: [PATCH 46/82] Change NVM version

---
 docker/ubuntu-22.04.dockerfile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index f5af8cbae42..4ff20a65a36 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -77,8 +77,8 @@ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 echo $HOME/.nvm/nvm.sh
 ls $HOME/.nvm/nvm.sh
 source $HOME/.nvm/nvm.sh
-nvm install lts
-nvm use lts
+nvm install 20.9.0
+nvm use 20.9.0
 _INSTALL_NODE
 
 # install cuda

From 1b9210d63b132799619fc66ce606194a774e65d2 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 24 Oct 2023 22:48:57 +0200
Subject: [PATCH 47/82] Add nvm to build step

---
 docker/ubuntu-22.04.dockerfile | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 4ff20a65a36..9704805cee8 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -74,8 +74,6 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-echo $HOME/.nvm/nvm.sh
-ls $HOME/.nvm/nvm.sh
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0
@@ -114,6 +112,10 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source $HOME/.nvm/nvm.sh
+nvm use 20.9.0
+#Actually build
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \

From 955fe0d1b85eea0d36ca0ad7682e18dd23a220e4 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Thu, 26 Oct 2023 20:29:05 +0200
Subject: [PATCH 48/82] Update NVM to all images

---
 docker/archlinux.dockerfile       | 14 ++++++++++++++
 docker/debian-bookworm.dockerfile | 13 +++++++++++++
 docker/debian-bullseye.dockerfile | 13 +++++++++++++
 docker/fedora-37.dockerfile       | 13 +++++++++++++
 docker/fedora-38.dockerfile       | 13 +++++++++++++
 docker/ubuntu-20.04.dockerfile    | 13 +++++++++++++
 6 files changed, 79 insertions(+)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 15cb5d23685..9df20322223 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -48,9 +48,20 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   namcap
 _DEPS
 
+
 # Setup builder user
 USER builder
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+source $HOME/.nvm/nvm.sh
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # copy repository
 WORKDIR /build/sunshine/
 COPY --link .. .
@@ -67,6 +78,9 @@ if [[ "${BUILD_VERSION}" == '' ]]; then
 else
   sub_version=""
 fi
+#Set Node version
+source $HOME/.nvm/nvm.sh
+nvm use 20.9.0
 cmake \
   -DSUNSHINE_CONFIGURE_PKGBUILD=ON \
   -DSUNSHINE_SUB_VERSION="${sub_version}" \
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index c9d4fccdede..aeee77580fa 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -69,6 +69,16 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+source $HOME/.nvm/nvm.sh
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -102,6 +112,9 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source $HOME/.nvm/nvm.sh
+nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \
diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
index 0b6bf2cc34c..4e3d7b00a10 100644
--- a/docker/debian-bullseye.dockerfile
+++ b/docker/debian-bullseye.dockerfile
@@ -69,6 +69,16 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+source $HOME/.nvm/nvm.sh
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -102,6 +112,9 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source $HOME/.nvm/nvm.sh
+nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \
diff --git a/docker/fedora-37.dockerfile b/docker/fedora-37.dockerfile
index 76a5a2b57e4..b8ef8193d4a 100644
--- a/docker/fedora-37.dockerfile
+++ b/docker/fedora-37.dockerfile
@@ -67,6 +67,16 @@ dnf clean all
 rm -rf /var/cache/yum
 _DEPS
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+source $HOME/.nvm/nvm.sh
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -100,6 +110,9 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source $HOME/.nvm/nvm.sh
+nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \
diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
index 68436688ec5..5242a06932c 100644
--- a/docker/fedora-38.dockerfile
+++ b/docker/fedora-38.dockerfile
@@ -67,6 +67,16 @@ dnf clean all
 rm -rf /var/cache/yum
 _DEPS
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+source $HOME/.nvm/nvm.sh
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # todo - enable cuda once it's supported for gcc 13 and fedora 38
 ## install cuda
 #WORKDIR /build/cuda
@@ -103,6 +113,9 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source $HOME/.nvm/nvm.sh
+nvm use 20.9.0
 cmake \
   -DCMAKE_BUILD_TYPE=Release \
   -DCMAKE_INSTALL_PREFIX=/usr \
diff --git a/docker/ubuntu-20.04.dockerfile b/docker/ubuntu-20.04.dockerfile
index b3f8c96bc21..397fbbdd78f 100644
--- a/docker/ubuntu-20.04.dockerfile
+++ b/docker/ubuntu-20.04.dockerfile
@@ -70,6 +70,16 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
+#Install Node
+RUN <<_INSTALL_NODE
+#!/bin/bash
+set -e
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+source $HOME/.nvm/nvm.sh
+nvm install 20.9.0
+nvm use 20.9.0
+_INSTALL_NODE
+
 # Update gcc alias
 # https://stackoverflow.com/a/70653945/11214013
 RUN <<_GCC_ALIAS
@@ -138,6 +148,9 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
+#Set Node version
+source $HOME/.nvm/nvm.sh
+nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \

From eede70433a7677a143f88f1de5e44f2c6ccd9949 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Thu, 26 Oct 2023 20:40:21 +0200
Subject: [PATCH 49/82] Moved again to wget to fix lint

---
 docker/archlinux.dockerfile       | 2 +-
 docker/debian-bookworm.dockerfile | 4 +---
 docker/debian-bullseye.dockerfile | 4 +---
 docker/fedora-37.dockerfile       | 3 +--
 docker/fedora-38.dockerfile       | 3 +--
 docker/ubuntu-20.04.dockerfile    | 5 ++---
 docker/ubuntu-22.04.dockerfile    | 3 +--
 7 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 9df20322223..28ebad86ecd 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -56,7 +56,7 @@ USER builder
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index aeee77580fa..dfe1ba7d038 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -58,8 +58,6 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
-  nodejs \
-  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -73,7 +71,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
index 4e3d7b00a10..ad5db55a533 100644
--- a/docker/debian-bullseye.dockerfile
+++ b/docker/debian-bullseye.dockerfile
@@ -58,8 +58,6 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
-  nodejs \
-  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -73,7 +71,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/fedora-37.dockerfile b/docker/fedora-37.dockerfile
index b8ef8193d4a..e76ed9feb0c 100644
--- a/docker/fedora-37.dockerfile
+++ b/docker/fedora-37.dockerfile
@@ -52,7 +52,6 @@ dnf -y install \
   libXrandr-devel \
   libXtst-devel \
   mesa-libGL-devel \
-  nodejs-npm \
   numactl-devel \
   openssl-devel \
   opus-devel \
@@ -71,7 +70,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
index 5242a06932c..525c6f4ab26 100644
--- a/docker/fedora-38.dockerfile
+++ b/docker/fedora-38.dockerfile
@@ -52,7 +52,6 @@ dnf -y install \
   libXrandr-devel \
   libXtst-devel \
   mesa-libGL-devel \
-  nodejs-npm \
   numactl-devel \
   openssl-devel \
   opus-devel \
@@ -71,7 +70,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/ubuntu-20.04.dockerfile b/docker/ubuntu-20.04.dockerfile
index 397fbbdd78f..963989490b7 100644
--- a/docker/ubuntu-20.04.dockerfile
+++ b/docker/ubuntu-20.04.dockerfile
@@ -31,6 +31,7 @@ set -e
 apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
+  ca-certificates \
   gcc-10=10.5.* \
   g++-10=10.5.* \
   git \
@@ -59,8 +60,6 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
-  nodejs \
-  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -74,7 +73,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 9704805cee8..7103e1a8ad1 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -33,7 +33,6 @@ apt-get install -y --no-install-recommends \
   build-essential \
   cmake=3.22.* \
   ca-certificates \
-  curl \
   git \
   libayatana-appindicator3-dev \
   libavdevice-dev \
@@ -73,7 +72,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 source $HOME/.nvm/nvm.sh
 nvm install 20.9.0
 nvm use 20.9.0

From 5118d098ec6838c2143690c5546b8d9b1f44ee0a Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Thu, 26 Oct 2023 21:06:26 +0200
Subject: [PATCH 50/82] Fix Debian and Arch build

---
 docker/archlinux.dockerfile       | 3 ++-
 docker/debian-bookworm.dockerfile | 1 +
 docker/debian-bullseye.dockerfile | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 28ebad86ecd..3788e893315 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -45,7 +45,8 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   git \
   libcap \
   libdrm \
-  namcap
+  namcap \
+  wget
 _DEPS
 
 
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index dfe1ba7d038..4eb2dd0a4eb 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -31,6 +31,7 @@ set -e
 apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
+  ca-certificates \
   cmake=3.25.* \
   git \
   libavdevice-dev \
diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
index ad5db55a533..c3b04ed8116 100644
--- a/docker/debian-bullseye.dockerfile
+++ b/docker/debian-bullseye.dockerfile
@@ -31,6 +31,7 @@ set -e
 apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
+  ca-certificates \
   cmake=3.18.* \
   git \
   libavdevice-dev \

From d3624d1ab6206ef528c0165bf2c5f05b4553bb95 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Thu, 26 Oct 2023 21:39:22 +0200
Subject: [PATCH 51/82] Fix arch and lint

---
 docker/archlinux.dockerfile       | 6 ++++--
 docker/debian-bookworm.dockerfile | 4 ++--
 docker/debian-bullseye.dockerfile | 4 ++--
 docker/fedora-37.dockerfile       | 4 ++--
 docker/fedora-38.dockerfile       | 4 ++--
 docker/ubuntu-20.04.dockerfile    | 4 ++--
 docker/ubuntu-22.04.dockerfile    | 4 ++--
 7 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 3788e893315..649d41de298 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -58,7 +58,7 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
 _INSTALL_NODE
@@ -74,13 +74,15 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
+chown -R builder .
+chmod -R 755 .
 if [[ "${BUILD_VERSION}" == '' ]]; then
   sub_version=".r${COMMIT}"
 else
   sub_version=""
 fi
 #Set Node version
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm use 20.9.0
 cmake \
   -DSUNSHINE_CONFIGURE_PKGBUILD=ON \
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index 4eb2dd0a4eb..e133ba9d9d0 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -73,7 +73,7 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
 _INSTALL_NODE
@@ -112,7 +112,7 @@ RUN <<_MAKE
 #!/bin/bash
 set -e
 #Set Node version
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
index c3b04ed8116..1ac98e03482 100644
--- a/docker/debian-bullseye.dockerfile
+++ b/docker/debian-bullseye.dockerfile
@@ -73,7 +73,7 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
 _INSTALL_NODE
@@ -112,7 +112,7 @@ RUN <<_MAKE
 #!/bin/bash
 set -e
 #Set Node version
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
diff --git a/docker/fedora-37.dockerfile b/docker/fedora-37.dockerfile
index e76ed9feb0c..ec9b4e3727d 100644
--- a/docker/fedora-37.dockerfile
+++ b/docker/fedora-37.dockerfile
@@ -71,7 +71,7 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
 _INSTALL_NODE
@@ -110,7 +110,7 @@ RUN <<_MAKE
 #!/bin/bash
 set -e
 #Set Node version
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
index 525c6f4ab26..55850c35936 100644
--- a/docker/fedora-38.dockerfile
+++ b/docker/fedora-38.dockerfile
@@ -71,7 +71,7 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
 _INSTALL_NODE
@@ -113,7 +113,7 @@ RUN <<_MAKE
 #!/bin/bash
 set -e
 #Set Node version
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm use 20.9.0
 cmake \
   -DCMAKE_BUILD_TYPE=Release \
diff --git a/docker/ubuntu-20.04.dockerfile b/docker/ubuntu-20.04.dockerfile
index 963989490b7..cbca7cd0e67 100644
--- a/docker/ubuntu-20.04.dockerfile
+++ b/docker/ubuntu-20.04.dockerfile
@@ -74,7 +74,7 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
 _INSTALL_NODE
@@ -148,7 +148,7 @@ RUN <<_MAKE
 #!/bin/bash
 set -e
 #Set Node version
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 7103e1a8ad1..0b5f819b373 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -73,7 +73,7 @@ RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
 _INSTALL_NODE
@@ -112,7 +112,7 @@ RUN <<_MAKE
 #!/bin/bash
 set -e
 #Set Node version
-source $HOME/.nvm/nvm.sh
+source "$HOME/.nvm/nvm.sh"
 nvm use 20.9.0
 #Actually build
 cmake \

From 8bf06bbd70da60903e51d18d3b99866d84b5e3a1 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Thu, 26 Oct 2023 21:54:45 +0200
Subject: [PATCH 52/82] Lint ignore in dockerfile

---
 docker/archlinux.dockerfile       | 2 ++
 docker/debian-bookworm.dockerfile | 2 ++
 docker/debian-bullseye.dockerfile | 2 ++
 docker/fedora-37.dockerfile       | 2 ++
 docker/fedora-38.dockerfile       | 2 ++
 docker/ubuntu-20.04.dockerfile    | 2 ++
 docker/ubuntu-22.04.dockerfile    | 2 ++
 7 files changed, 14 insertions(+)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 649d41de298..27af4809b71 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -54,6 +54,7 @@ _DEPS
 USER builder
 
 #Install Node
+# hadolint ignore=SC1091
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
@@ -71,6 +72,7 @@ COPY --link .. .
 WORKDIR /build/sunshine/build
 
 # configure PKGBUILD file
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index e133ba9d9d0..ddafda207a5 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -69,6 +69,7 @@ rm -rf /var/lib/apt/lists/*
 _DEPS
 
 #Install Node
+# hadolint ignore=SC1091
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
@@ -108,6 +109,7 @@ COPY --link .. .
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
index 1ac98e03482..44984225633 100644
--- a/docker/debian-bullseye.dockerfile
+++ b/docker/debian-bullseye.dockerfile
@@ -69,6 +69,7 @@ rm -rf /var/lib/apt/lists/*
 _DEPS
 
 #Install Node
+# hadolint ignore=SC1091
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
@@ -108,6 +109,7 @@ COPY --link .. .
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
diff --git a/docker/fedora-37.dockerfile b/docker/fedora-37.dockerfile
index ec9b4e3727d..78a40740050 100644
--- a/docker/fedora-37.dockerfile
+++ b/docker/fedora-37.dockerfile
@@ -67,6 +67,7 @@ rm -rf /var/cache/yum
 _DEPS
 
 #Install Node
+# hadolint ignore=SC1091
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
@@ -106,6 +107,7 @@ COPY --link .. .
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
index 55850c35936..756bd8f59c4 100644
--- a/docker/fedora-38.dockerfile
+++ b/docker/fedora-38.dockerfile
@@ -67,6 +67,7 @@ rm -rf /var/cache/yum
 _DEPS
 
 #Install Node
+# hadolint ignore=SC1091
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
@@ -109,6 +110,7 @@ WORKDIR /build/sunshine/build
 # cmake and cpack
 # todo - add cmake argument back in for cuda support "-DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \"
 # todo - re-enable "DSUNSHINE_ENABLE_CUDA"
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
diff --git a/docker/ubuntu-20.04.dockerfile b/docker/ubuntu-20.04.dockerfile
index cbca7cd0e67..3d78de5aeab 100644
--- a/docker/ubuntu-20.04.dockerfile
+++ b/docker/ubuntu-20.04.dockerfile
@@ -70,6 +70,7 @@ rm -rf /var/lib/apt/lists/*
 _DEPS
 
 #Install Node
+# hadolint ignore=SC1091
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
@@ -144,6 +145,7 @@ COPY --link .. .
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index 0b5f819b373..d106fa08ee8 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -69,6 +69,7 @@ rm -rf /var/lib/apt/lists/*
 _DEPS
 
 #Install Node
+# hadolint ignore=SC1091
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
@@ -108,6 +109,7 @@ COPY --link .. .
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
+# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e

From 67845c8e4c449907ca1810516d0868c2644a75f7 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 28 Oct 2023 18:27:28 +0200
Subject: [PATCH 53/82] Added workdir config

---
 docker/archlinux.dockerfile | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 27af4809b71..cef959ec841 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -51,6 +51,13 @@ _DEPS
 
 
 # Setup builder user
+RUN <<_SETUP_WORKDIR
+#!/bin/bash
+set -e
+mkdir /build/sunshine
+chmod -R 777 /build/sunshine/
+_SETUP_WORKDIR
+
 USER builder
 
 #Install Node

From a46ec1ad45fcdc5ebb0a0480daf011efd0d7a975 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 28 Oct 2023 18:39:52 +0200
Subject: [PATCH 54/82] Fix mkdir

---
 docker/archlinux.dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index cef959ec841..e0ad31cc6dd 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -54,7 +54,7 @@ _DEPS
 RUN <<_SETUP_WORKDIR
 #!/bin/bash
 set -e
-mkdir /build/sunshine
+mkdir -p /build/sunshine
 chmod -R 777 /build/sunshine/
 _SETUP_WORKDIR
 

From b810738946225ae332e537aa8a5f711ef99edf57 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 28 Oct 2023 18:58:27 +0200
Subject: [PATCH 55/82] Fix perms

---
 docker/archlinux.dockerfile | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index e0ad31cc6dd..0d3aaad8d75 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -49,15 +49,6 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   wget
 _DEPS
 
-
-# Setup builder user
-RUN <<_SETUP_WORKDIR
-#!/bin/bash
-set -e
-mkdir -p /build/sunshine
-chmod -R 777 /build/sunshine/
-_SETUP_WORKDIR
-
 USER builder
 
 #Install Node
@@ -73,7 +64,7 @@ _INSTALL_NODE
 
 # copy repository
 WORKDIR /build/sunshine/
-COPY --link .. .
+COPY --link --chown=builder:builder .. .
 
 # setup build directory
 WORKDIR /build/sunshine/build

From d9022a7641aecf49b80ad506c74dd752cb31bfeb Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 28 Oct 2023 19:13:46 +0200
Subject: [PATCH 56/82] Maybe definetly fix arch permissions

---
 docker/archlinux.dockerfile | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 0d3aaad8d75..f546fc5a448 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -49,6 +49,16 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   wget
 _DEPS
 
+RUN <<_SETUP_BUILD_DIR
+#!/bin/bash
+set -e
+addgroup builder
+adduser -S -G builder builder
+mkdir -p /build/sunshine
+chown -R builder:builder /build/sunshine
+chmod -R 777 /build/sunshine
+_SETUP_BUILD_DIR
+
 USER builder
 
 #Install Node

From a864ef57e788fa1309c685da6c2f26684ce9261e Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 28 Oct 2023 19:27:06 +0200
Subject: [PATCH 57/82] should fix for good

---
 docker/archlinux.dockerfile | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index f546fc5a448..daa1506d5c1 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -49,16 +49,6 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   wget
 _DEPS
 
-RUN <<_SETUP_BUILD_DIR
-#!/bin/bash
-set -e
-addgroup builder
-adduser -S -G builder builder
-mkdir -p /build/sunshine
-chown -R builder:builder /build/sunshine
-chmod -R 777 /build/sunshine
-_SETUP_BUILD_DIR
-
 USER builder
 
 #Install Node
@@ -74,7 +64,7 @@ _INSTALL_NODE
 
 # copy repository
 WORKDIR /build/sunshine/
-COPY --link --chown=builder:builder .. .
+COPY --link .. .
 
 # setup build directory
 WORKDIR /build/sunshine/build
@@ -84,8 +74,8 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
-chown -R builder .
-chmod -R 755 .
+chown -R builder /build/sunshine
+chmod -R 777 /build/sunshine
 if [[ "${BUILD_VERSION}" == '' ]]; then
   sub_version=".r${COMMIT}"
 else

From 6079fce66ca481dddf0d16a30ec8460fed4102c9 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 28 Oct 2023 19:37:34 +0200
Subject: [PATCH 58/82] Use COPY instead of bash

---
 docker/archlinux.dockerfile | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index daa1506d5c1..b630573b81c 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -49,6 +49,16 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   wget
 _DEPS
 
+RUN <<_SETUP_BUILD_DIR
+#!/bin/bash
+set -e
+addgroup builder
+adduser -S -G builder builder
+mkdir -p /build/sunshine
+chown -R builder:builder /build/sunshine
+chmod -R 777 /build/sunshine
+_SETUP_BUILD_DIR
+
 USER builder
 
 #Install Node
@@ -64,7 +74,7 @@ _INSTALL_NODE
 
 # copy repository
 WORKDIR /build/sunshine/
-COPY --link .. .
+COPY --link --chown=builder --chmod=777 .. .
 
 # setup build directory
 WORKDIR /build/sunshine/build
@@ -74,8 +84,6 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
-chown -R builder /build/sunshine
-chmod -R 777 /build/sunshine
 if [[ "${BUILD_VERSION}" == '' ]]; then
   sub_version=".r${COMMIT}"
 else

From 34fe2186bd08511273b4e76fbfb00d5982b5ea82 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 28 Oct 2023 19:47:10 +0200
Subject: [PATCH 59/82] Removed script that wasn't necessary

---
 docker/archlinux.dockerfile | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index b630573b81c..153ef241e0c 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -49,16 +49,6 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   wget
 _DEPS
 
-RUN <<_SETUP_BUILD_DIR
-#!/bin/bash
-set -e
-addgroup builder
-adduser -S -G builder builder
-mkdir -p /build/sunshine
-chown -R builder:builder /build/sunshine
-chmod -R 777 /build/sunshine
-_SETUP_BUILD_DIR
-
 USER builder
 
 #Install Node

From 92b9b77fee429927f8aa3cc339794dc6f68049e8 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Mon, 30 Oct 2023 20:52:59 +0100
Subject: [PATCH 60/82] Fix working directory

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index e0a7bb2cc21..0372d5a4d3b 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target(web-ui ALL WORKING_DIRECTORY COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
+add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')

From 24c02ef3d4f7fbaba2620988efc4a4b822baf46a Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 12 Nov 2023 15:10:35 +0100
Subject: [PATCH 61/82] Use msys2 bash on Windows

---
 cmake/targets/common.cmake | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 0372d5a4d3b..ee1132f5bbf 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,8 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
+if(WIN32)
+    add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND C:\\msys64\\usr\\bin\\bash.exe -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
+else()
+    add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
+endif()

From 2e423d0cc2948e73c54b58f62911b03b4274d1ce Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 12 Nov 2023 15:23:32 +0100
Subject: [PATCH 62/82] Use export instead of env

---
 cmake/targets/common.cmake | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index ee1132f5bbf..d39058799bc 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,8 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-if(WIN32)
-    add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND C:\\msys64\\usr\\bin\\bash.exe -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
-else()
-    add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c 'npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build')
-endif()
+add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c 'npm install && export SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} && export SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} && npm run build')

From 5a61d2a8272a47ed1df2667ca8bc02affa6032f1 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 12 Nov 2023 15:28:04 +0100
Subject: [PATCH 63/82] replace quotes

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index d39058799bc..d3428afbcc8 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c 'npm install && export SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} && export SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} && npm run build')
+add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c "npm install && export SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} && export SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} && npm run build")

From 132512a619112eb3bf0b83abdedd91f31430f538 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 12 Nov 2023 15:39:45 +0100
Subject: [PATCH 64/82] Removed exports

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index d3428afbcc8..deeb2b0281f 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c "npm install && export SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} && export SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} && npm run build")
+add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c "npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build")

From 6dc504bedcde453b696c0e2bc68448c7f79f1fa8 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 12 Nov 2023 16:34:38 +0100
Subject: [PATCH 65/82] Escape quotes

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index deeb2b0281f..a7f202256d0 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,4 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c "npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build")
+add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c \"npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build\")

From 677ad2dc0e1163f0f8f52750c0991f9711b84d39 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 3 Dec 2023 16:28:40 +0100
Subject: [PATCH 66/82] Fix cmake lint

---
 cmake/targets/common.cmake | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index a7f202256d0..95172205f99 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,4 +35,7 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target(web-ui ALL WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} COMMAND bash -c \"npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build\")
+add_custom_target(web-ui ALL 
+        WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} 
+        COMMENT "Installing NPM Dependencies and Building the Web UI"
+        COMMAND bash -c \"npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build\")

From 245d7ef6870c57aab2300965dc663245c6885ba2 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 3 Dec 2023 16:28:58 +0100
Subject: [PATCH 67/82] Fix cmake lint

---
 cmake/targets/common.cmake | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 95172205f99..62b51ee66f3 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -38,4 +38,4 @@ target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COM
 add_custom_target(web-ui ALL 
         WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} 
         COMMENT "Installing NPM Dependencies and Building the Web UI"
-        COMMAND bash -c \"npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build\")
+        COMMAND bash -c \"npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build\") # cmake-lint: disable=C0301

From dd5d1e835a80b93b0caafd49cc9813e0e26b289c Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 3 Dec 2023 16:35:39 +0100
Subject: [PATCH 68/82] fix again cmake lint

---
 cmake/targets/common.cmake | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cmake/targets/common.cmake b/cmake/targets/common.cmake
index 62b51ee66f3..7c446e466df 100644
--- a/cmake/targets/common.cmake
+++ b/cmake/targets/common.cmake
@@ -35,7 +35,7 @@ endforeach()
 target_compile_options(sunshine PRIVATE $<$<COMPILE_LANGUAGE:CXX>:${SUNSHINE_COMPILE_OPTIONS}>;$<$<COMPILE_LANGUAGE:CUDA>:${SUNSHINE_COMPILE_OPTIONS_CUDA};-std=c++17>)  # cmake-lint: disable=C0301
 
 #WebUI build
-add_custom_target(web-ui ALL 
-        WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} 
+add_custom_target(web-ui ALL
+        WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
         COMMENT "Installing NPM Dependencies and Building the Web UI"
         COMMAND bash -c \"npm install && SUNSHINE_SOURCE_ASSETS_DIR=${SUNSHINE_SOURCE_ASSETS_DIR} SUNSHINE_ASSETS_DIR=${CMAKE_BINARY_DIR} npm run build\") # cmake-lint: disable=C0301

From e9ab6e56b830f3133a92fdb16a4d583f17e166f6 Mon Sep 17 00:00:00 2001
From: TheElixZammuto <theelixzammuto@gmail.com>
Date: Sun, 10 Dec 2023 14:44:19 +0100
Subject: [PATCH 69/82] Update docs/source/contributing/contributing.rst

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 docs/source/contributing/contributing.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/source/contributing/contributing.rst b/docs/source/contributing/contributing.rst
index 6a6142d4781..d3b6c638722 100644
--- a/docs/source/contributing/contributing.rst
+++ b/docs/source/contributing/contributing.rst
@@ -5,7 +5,7 @@ Read our contribution guide in our organization level
 `docs <https://lizardbyte.readthedocs.io/en/latest/developers/contributing.html>`__.
 
 Web UI
-------------
+------
 The Web UI uses `Vite <https://vitejs.dev/>`__ as its build system, to handle the integration of the NPM libraries.
 
 The HTML pages used by the Web UI are found in ``src_assets/common/assets/web``.

From bc26e5ca637ba4a328681f8d370258b67fb5e832 Mon Sep 17 00:00:00 2001
From: TheElixZammuto <theelixzammuto@gmail.com>
Date: Sun, 10 Dec 2023 14:44:34 +0100
Subject: [PATCH 70/82] Update docs/source/contributing/contributing.rst

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 docs/source/contributing/contributing.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/source/contributing/contributing.rst b/docs/source/contributing/contributing.rst
index d3b6c638722..ab85e13deee 100644
--- a/docs/source/contributing/contributing.rst
+++ b/docs/source/contributing/contributing.rst
@@ -17,7 +17,7 @@ The Style System is provided by `Bootstrap <https://getbootstrap.com/>`__.
 The JS framework used by the more interactive pages is `Vue <https://vuejs.org/>`__.
 
 Building
-^^^^^^^^^^^^^
+^^^^^^^^
 Sunshine already builds the UI as part of its build process, but you can make faster changes by starting vite manually.
 
 .. code-block:: bash

From 8147f3bc72399c228e03ef5310011c8163f4138d Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sun, 10 Dec 2023 16:38:48 +0100
Subject: [PATCH 71/82] Removed NVM o Linux where bundled Node is 18 or newer

---
 docker/archlinux.dockerfile       | 15 +--------------
 docker/debian-bookworm.dockerfile | 16 ++--------------
 docker/debian-bullseye.dockerfile |  2 +-
 docker/fedora-37.dockerfile       | 15 +--------------
 docker/fedora-38.dockerfile       | 15 +--------------
 docker/ubuntu-20.04.dockerfile    |  2 +-
 docker/ubuntu-22.04.dockerfile    |  2 +-
 7 files changed, 8 insertions(+), 59 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 153ef241e0c..166caad6550 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -49,19 +49,9 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   wget
 _DEPS
 
+# Setup builder user
 USER builder
 
-#Install Node
-# hadolint ignore=SC1091
-RUN <<_INSTALL_NODE
-#!/bin/bash
-set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source "$HOME/.nvm/nvm.sh"
-nvm install 20.9.0
-nvm use 20.9.0
-_INSTALL_NODE
-
 # copy repository
 WORKDIR /build/sunshine/
 COPY --link --chown=builder --chmod=777 .. .
@@ -79,9 +69,6 @@ if [[ "${BUILD_VERSION}" == '' ]]; then
 else
   sub_version=""
 fi
-#Set Node version
-source "$HOME/.nvm/nvm.sh"
-nvm use 20.9.0
 cmake \
   -DSUNSHINE_CONFIGURE_PKGBUILD=ON \
   -DSUNSHINE_SUB_VERSION="${sub_version}" \
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index ddafda207a5..53df6747442 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -59,6 +59,8 @@ apt-get install -y --no-install-recommends \
   libxfixes-dev \
   libxrandr-dev \
   libxtst-dev \
+  nodejs \
+  npm \
   wget
 if [[ "${TARGETPLATFORM}" == 'linux/amd64' ]]; then
   apt-get install -y --no-install-recommends \
@@ -68,17 +70,6 @@ apt-get clean
 rm -rf /var/lib/apt/lists/*
 _DEPS
 
-#Install Node
-# hadolint ignore=SC1091
-RUN <<_INSTALL_NODE
-#!/bin/bash
-set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source "$HOME/.nvm/nvm.sh"
-nvm install 20.9.0
-nvm use 20.9.0
-_INSTALL_NODE
-
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -113,9 +104,6 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
-#Set Node version
-source "$HOME/.nvm/nvm.sh"
-nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \
diff --git a/docker/debian-bullseye.dockerfile b/docker/debian-bullseye.dockerfile
index 44984225633..3e602105cb2 100644
--- a/docker/debian-bullseye.dockerfile
+++ b/docker/debian-bullseye.dockerfile
@@ -73,7 +73,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
 source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/fedora-37.dockerfile b/docker/fedora-37.dockerfile
index 78a40740050..bf2d04696c0 100644
--- a/docker/fedora-37.dockerfile
+++ b/docker/fedora-37.dockerfile
@@ -52,6 +52,7 @@ dnf -y install \
   libXrandr-devel \
   libXtst-devel \
   mesa-libGL-devel \
+  nodejs \
   numactl-devel \
   openssl-devel \
   opus-devel \
@@ -66,17 +67,6 @@ dnf clean all
 rm -rf /var/cache/yum
 _DEPS
 
-#Install Node
-# hadolint ignore=SC1091
-RUN <<_INSTALL_NODE
-#!/bin/bash
-set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source "$HOME/.nvm/nvm.sh"
-nvm install 20.9.0
-nvm use 20.9.0
-_INSTALL_NODE
-
 # install cuda
 WORKDIR /build/cuda
 # versions: https://developer.nvidia.com/cuda-toolkit-archive
@@ -111,9 +101,6 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
-#Set Node version
-source "$HOME/.nvm/nvm.sh"
-nvm use 20.9.0
 cmake \
   -DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \
   -DCMAKE_BUILD_TYPE=Release \
diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
index 756bd8f59c4..8f5a25a0d8f 100644
--- a/docker/fedora-38.dockerfile
+++ b/docker/fedora-38.dockerfile
@@ -52,6 +52,7 @@ dnf -y install \
   libXrandr-devel \
   libXtst-devel \
   mesa-libGL-devel \
+  nodejs \
   numactl-devel \
   openssl-devel \
   opus-devel \
@@ -66,17 +67,6 @@ dnf clean all
 rm -rf /var/cache/yum
 _DEPS
 
-#Install Node
-# hadolint ignore=SC1091
-RUN <<_INSTALL_NODE
-#!/bin/bash
-set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
-source "$HOME/.nvm/nvm.sh"
-nvm install 20.9.0
-nvm use 20.9.0
-_INSTALL_NODE
-
 # todo - enable cuda once it's supported for gcc 13 and fedora 38
 ## install cuda
 #WORKDIR /build/cuda
@@ -114,9 +104,6 @@ WORKDIR /build/sunshine/build
 RUN <<_MAKE
 #!/bin/bash
 set -e
-#Set Node version
-source "$HOME/.nvm/nvm.sh"
-nvm use 20.9.0
 cmake \
   -DCMAKE_BUILD_TYPE=Release \
   -DCMAKE_INSTALL_PREFIX=/usr \
diff --git a/docker/ubuntu-20.04.dockerfile b/docker/ubuntu-20.04.dockerfile
index 3d78de5aeab..bad8285d648 100644
--- a/docker/ubuntu-20.04.dockerfile
+++ b/docker/ubuntu-20.04.dockerfile
@@ -74,7 +74,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
 source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0
diff --git a/docker/ubuntu-22.04.dockerfile b/docker/ubuntu-22.04.dockerfile
index d106fa08ee8..2f37a691bc7 100644
--- a/docker/ubuntu-22.04.dockerfile
+++ b/docker/ubuntu-22.04.dockerfile
@@ -73,7 +73,7 @@ _DEPS
 RUN <<_INSTALL_NODE
 #!/bin/bash
 set -e
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
 source "$HOME/.nvm/nvm.sh"
 nvm install 20.9.0
 nvm use 20.9.0

From 3f3baeb445d7d4e44a3ef82c65a44022493cd03b Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 12 Dec 2023 21:25:57 +0100
Subject: [PATCH 72/82] Join common packaging entries into common

---
 cmake/packaging/common.cmake  | 6 ++++++
 cmake/packaging/macos.cmake   | 3 ---
 cmake/packaging/unix.cmake    | 4 ----
 cmake/packaging/windows.cmake | 4 ----
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/cmake/packaging/common.cmake b/cmake/packaging/common.cmake
index d905cf3b59f..78d1e1fa9b5 100644
--- a/cmake/packaging/common.cmake
+++ b/cmake/packaging/common.cmake
@@ -12,6 +12,12 @@ set(CPACK_PACKAGE_ICON ${PROJECT_SOURCE_DIR}/sunshine.png)
 set(CPACK_PACKAGE_FILE_NAME "${CMAKE_PROJECT_NAME}")
 set(CPACK_STRIP_FILES YES)
 
+#install common assets
+install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
+        DESTINATION "${SUNSHINE_ASSETS_DIR}"
+        COMPONENT assets
+        PATTERN "web" EXCLUDE)
+
 # install built vite assets
 install(DIRECTORY "${CMAKE_CURRENT_BINARY_DIR}/assets/web"
         DESTINATION "${SUNSHINE_ASSETS_DIR}")
diff --git a/cmake/packaging/macos.cmake b/cmake/packaging/macos.cmake
index 1416fd8d007..f7c3a518c97 100644
--- a/cmake/packaging/macos.cmake
+++ b/cmake/packaging/macos.cmake
@@ -10,9 +10,6 @@ if(SUNSHINE_PACKAGE_MACOS)  # todo
     set(MAC_PREFIX "${CMAKE_PROJECT_NAME}.app/Contents")
     set(INSTALL_RUNTIME_DIR "${MAC_PREFIX}/MacOS")
 
-    install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-            DESTINATION "${SUNSHINE_ASSETS_DIR}"
-            PATTERN "web" EXCLUDE)
     install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/macos/assets/"
             DESTINATION "${SUNSHINE_ASSETS_DIR}")
 
diff --git a/cmake/packaging/unix.cmake b/cmake/packaging/unix.cmake
index 27b8c68ce50..bacbfc910de 100644
--- a/cmake/packaging/unix.cmake
+++ b/cmake/packaging/unix.cmake
@@ -13,7 +13,3 @@ if(NOT CMAKE_INSTALL_PREFIX)
 endif()
 
 install(TARGETS sunshine RUNTIME DESTINATION "${CMAKE_INSTALL_BINDIR}")
-
-install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-        DESTINATION "${SUNSHINE_ASSETS_DIR}"
-        PATTERN "web" EXCLUDE)
diff --git a/cmake/packaging/windows.cmake b/cmake/packaging/windows.cmake
index 81addb04ce2..dc2add19854 100644
--- a/cmake/packaging/windows.cmake
+++ b/cmake/packaging/windows.cmake
@@ -36,10 +36,6 @@ install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/misc/gamepad/"
         COMPONENT gamepad)
 
 # Sunshine assets
-install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
-        DESTINATION "${SUNSHINE_ASSETS_DIR}"
-        COMPONENT assets
-        PATTERN "web" EXCLUDE)
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/windows/assets/"
         DESTINATION "${SUNSHINE_ASSETS_DIR}"
         COMPONENT assets)

From 18cc85e21c95233649210c0bd6c0d51e47523aa6 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Tue, 12 Dec 2023 21:42:11 +0100
Subject: [PATCH 73/82] Fix Debian builds

---
 cmake/packaging/common.cmake | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cmake/packaging/common.cmake b/cmake/packaging/common.cmake
index 78d1e1fa9b5..ad3f9bc0682 100644
--- a/cmake/packaging/common.cmake
+++ b/cmake/packaging/common.cmake
@@ -15,7 +15,6 @@ set(CPACK_STRIP_FILES YES)
 #install common assets
 install(DIRECTORY "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/"
         DESTINATION "${SUNSHINE_ASSETS_DIR}"
-        COMPONENT assets
         PATTERN "web" EXCLUDE)
 
 # install built vite assets

From 9c5d092bada5a82a8aaf84e7c4bf0c6aa66c05be Mon Sep 17 00:00:00 2001
From: TheElixZammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 11:33:43 +0100
Subject: [PATCH 74/82] Update docker/fedora-38.dockerfile

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 docker/fedora-38.dockerfile | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docker/fedora-38.dockerfile b/docker/fedora-38.dockerfile
index 8f5a25a0d8f..9f836fb889a 100644
--- a/docker/fedora-38.dockerfile
+++ b/docker/fedora-38.dockerfile
@@ -100,7 +100,6 @@ WORKDIR /build/sunshine/build
 # cmake and cpack
 # todo - add cmake argument back in for cuda support "-DCMAKE_CUDA_COMPILER:PATH=/build/cuda/bin/nvcc \"
 # todo - re-enable "DSUNSHINE_ENABLE_CUDA"
-# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e

From 3b2ddf50cbb1523e0d56e533bb82b7624325fad8 Mon Sep 17 00:00:00 2001
From: TheElixZammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 11:33:58 +0100
Subject: [PATCH 75/82] Update docker/debian-bookworm.dockerfile

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 docker/debian-bookworm.dockerfile | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index 53df6747442..642d1c06eb6 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -100,7 +100,6 @@ COPY --link .. .
 WORKDIR /build/sunshine/build
 
 # cmake and cpack
-# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e

From 164f5e5b55d5dd04181f01c69d9acc5d831cc760 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 11:38:58 +0100
Subject: [PATCH 76/82] Removed not needed anymore changes to Dockerfile

---
 docker/archlinux.dockerfile       | 6 ++----
 docker/debian-bookworm.dockerfile | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/docker/archlinux.dockerfile b/docker/archlinux.dockerfile
index 166caad6550..15cb5d23685 100644
--- a/docker/archlinux.dockerfile
+++ b/docker/archlinux.dockerfile
@@ -45,8 +45,7 @@ pacman -Syu --disable-download-timeout --needed --noconfirm \
   git \
   libcap \
   libdrm \
-  namcap \
-  wget
+  namcap
 _DEPS
 
 # Setup builder user
@@ -54,13 +53,12 @@ USER builder
 
 # copy repository
 WORKDIR /build/sunshine/
-COPY --link --chown=builder --chmod=777 .. .
+COPY --link .. .
 
 # setup build directory
 WORKDIR /build/sunshine/build
 
 # configure PKGBUILD file
-# hadolint ignore=SC1091
 RUN <<_MAKE
 #!/bin/bash
 set -e
diff --git a/docker/debian-bookworm.dockerfile b/docker/debian-bookworm.dockerfile
index 53df6747442..dad8fb15275 100644
--- a/docker/debian-bookworm.dockerfile
+++ b/docker/debian-bookworm.dockerfile
@@ -31,7 +31,6 @@ set -e
 apt-get update -y
 apt-get install -y --no-install-recommends \
   build-essential \
-  ca-certificates \
   cmake=3.25.* \
   git \
   libavdevice-dev \

From 133ea114d79343b462c39dcf13cbf4f2ab12b1a4 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 12:39:24 +0100
Subject: [PATCH 77/82] WebUI various fixes

---
 src_assets/common/assets/web/apps.html   |  32 ++++--
 src_assets/common/assets/web/config.html | 135 +++++++++++------------
 src_assets/common/assets/web/index.html  |   4 +-
 3 files changed, 88 insertions(+), 83 deletions(-)

diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 5f4cc909270..c9131440340 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -182,7 +182,7 @@ <h1>Applications</h1>
             </tbody>
           </table>
         </div>
-        <!--detatched-->
+        <!--detached-->
         <div class="mb-3">
           <label for="appName" class="form-label">Detached Commands</label>
           <div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2">
@@ -193,7 +193,7 @@ <h1>Applications</h1>
           </div>
           <div class="d-flex justify-content-between">
             <button class="btn btn-success" @click="editForm.detached.push('');">
-              <i class="fas fa-plus mr-1"></i> Add Detatched Command
+              <i class="fas fa-plus mr-1"></i> Add Detached Command
             </button>
           </div>
           <div class="form-text">
@@ -249,15 +249,14 @@ <h1>Applications</h1>
             <input type="text" class="form-control monospace" id="appImagePath" aria-describedby="appImagePathHelp"
               v-model="editForm['image-path']" />
             <button class="btn btn-secondary dropdown-toggle" type="button" id="findCoverToggle"
-              data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"
-              v-dropdown-show="showCoverFinder" ref="coverFinderDropdown">
+              aria-expanded="false" @click="showCoverFinder" ref="coverFinderDropdown">
               Find Cover
             </button>
             <div class="dropdown-menu dropdown-menu-end w-50 cover-finder overflow-hidden"
               aria-labelledby="findCoverToggle">
-              <div class="modal-header">
+              <div class="modal-header px-2">
                 <h4 class="modal-title">Covers Found</h4>
-                <button type="button" class="btn-close" aria-label="Close" @click="closeCoverFinder"></button>
+                <button type="button" class="btn-close mr-2" aria-label="Close" @click="closeCoverFinder"></button>
               </div>
               <div class="modal-body cover-results px-3 pt-3" :class="{ busy: coverFinderBusy }">
                 <div class="row">
@@ -374,6 +373,7 @@ <h4>About Environment Variables</h4>
 <script type="module">
   import { createApp } from 'vue';
   import Navbar from './Navbar.vue'
+  import {Dropdown} from 'bootstrap'
   const app = createApp({
     components: {
       Navbar
@@ -425,14 +425,14 @@ <h4>About Environment Variables</h4>
         if (this.editForm["prep-cmd"] === undefined)
           this.editForm["prep-cmd"] = [];
         if (this.editForm["detached"] === undefined)
-          this.editForm["detatched"] = [];
+          this.editForm["detached"] = [];
         if (this.editForm["exclude-global-prep-cmd"] === undefined)
           this.editForm["exclude-global-prep-cmd"] = [];
         if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
           this.editForm["elevated"] = [];
         }
         if (this.editForm["auto-detach"] === undefined) {
-          this.$set(this.editForm, "auto-detach", true);
+          this.editForm["auto-detach"] = true;
         }
         this.showEditForm = true;
       },
@@ -461,7 +461,19 @@ <h4>About Environment Variables</h4>
       showCoverFinder($event) {
         this.coverCandidates = [];
         this.coverSearching = true;
-
+        const ref = this.$refs.coverFinderDropdown;
+        if (!ref) {
+          console.error("Ref not found!");
+          return;
+        }
+        this.coverFinderDropdown = Dropdown.getInstance(ref);
+        if (!this.coverFinderDropdown) {
+          this.coverFinderDropdown = new Dropdown(ref);
+          if (!this.coverFinderDropdown) {
+            return;
+          }
+        }
+        this.coverFinderDropdown.show();
         function getSearchBucket(name) {
           let bucket = name.substring(0, Math.min(name.length, 2)).toLowerCase().replaceAll(/[^a-z\d]/g, '');
           if (!bucket) {
@@ -516,7 +528,7 @@ <h4>About Environment Variables</h4>
         if (!ref) {
           return;
         }
-        const dropdown = this.coverFinderDropdown = bootstrap.Dropdown.getInstance(ref);
+        const dropdown = this.coverFinderDropdown = Dropdown.getInstance(ref);
         if (!dropdown) {
           return;
         }
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 19f5060b654..c14c77d4394 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -2,24 +2,24 @@
 <html lang="en">
 
 <head>
-      <%- header %>
-      <style>
-        .config-page {
-          padding: 1em;
-          border: 1px solid #dee2e6;
-          border-top: none;
-        }
+  <%- header %>
+    <style>
+      .config-page {
+        padding: 1em;
+        border: 1px solid #dee2e6;
+        border-top: none;
+      }
 
-        .buttons {
-          padding: 1em 0;
-        }
+      .buttons {
+        padding: 1em 0;
+      }
 
-        .ms-item {
-          background-color: #ccc;
-          font-size: 12px;
-          font-weight: bold;
-        }
-      </style>
+      .ms-item {
+        background-color: #ccc;
+        font-size: 12px;
+        font-weight: bold;
+      }
+    </style>
 </head>
 
 <body id="app">
@@ -81,62 +81,49 @@ <h1 class="my-4">Configuration</h1>
             The origin of the remote endpoint address that is not denied access to Web UI
           </div>
         </div>
-      </div>
-      <!--UPnP-->
-      <div class="mb-3">
-        <label for="upnp" class="form-label">UPnP</label>
-        <select id="upnp" class="form-select" v-model="config.upnp">
-          <option value="disabled">Disabled</option>
-          <option value="enabled">Enabled</option>
-        </select>
-        <div class="form-text">Automatically configure port forwarding</div>
-      </div>
-      <!--Gamepads-->
-      <div class="mb-3" v-if="platform === 'windows'">
-        <label for="gamepad" class="form-label">Gamepads</label>
-        <select id="gamepad" class="form-select" v-model="config.gamepad">
-          <option value="auto">Automatic</option>
-          <option value="ds4">DS4 (PS4)</option>
-          <option value="x360">X360 (Xbox 360)</option>
-        </select>
-        <div class="form-text">Choose which type of gamepad to emulate on the host</div>
-      </div>
-      <div class="accordion" v-if="config.gamepad === 'ds4'">
-        <div class="accordion-item">
-          <h2 class="accordion-header">
-            <button class="accordion-button" type="button" data-bs-toggle="collapse"
-              data-bs-target="#panelsStayOpen-collapseOne">
-              Manual DS4 options
-            </button>
-          </h2>
-          <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-            aria-labelledby="panelsStayOpen-headingOne">
-            <div class="accordion-body">
-              <div>
-                <label for="ds4_back_as_touchpad_click" class="form-label">Map Back/Select to Touchpad Click</label>
-                <select id="ds4_back_as_touchpad_click" class="form-select" v-model="config.ds4_back_as_touchpad_click">
-                  <option value="disabled">Disabled</option>
-                  <option value="enabled">Enabled (default)</option>
-                </select>
-                <div class="form-text">When forcing DS4 emulation, map Back/Select to Touchpad Click</div>
+        <!--UPnP-->
+        <div class="mb-3">
+          <label for="upnp" class="form-label">UPnP</label>
+          <select id="upnp" class="form-select" v-model="config.upnp">
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+          <div class="form-text">Automatically configure port forwarding</div>
+        </div>
+        <!--Gamepads-->
+        <div class="mb-3" v-if="platform === 'windows'">
+          <label for="gamepad" class="form-label">Gamepads</label>
+          <select id="gamepad" class="form-select" v-model="config.gamepad">
+            <option value="auto">Automatic</option>
+            <option value="ds4">DS4 (PS4)</option>
+            <option value="x360">X360 (Xbox 360)</option>
+          </select>
+          <div class="form-text">Choose which type of gamepad to emulate on the host</div>
+        </div>
+        <div class="accordion" v-if="config.gamepad === 'ds4'">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                data-bs-target="#panelsStayOpen-collapseOne">
+                Manual DS4 options
+              </button>
+            </h2>
+            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+              aria-labelledby="panelsStayOpen-headingOne">
+              <div class="accordion-body">
+                <div>
+                  <label for="ds4_back_as_touchpad_click" class="form-label">Map Back/Select to Touchpad Click</label>
+                  <select id="ds4_back_as_touchpad_click" class="form-select"
+                    v-model="config.ds4_back_as_touchpad_click">
+                    <option value="disabled">Disabled</option>
+                    <option value="enabled">Enabled (default)</option>
+                  </select>
+                  <div class="form-text">When forcing DS4 emulation, map Back/Select to Touchpad Click</div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <!--Ping Timeout-->
-      <div class="mb-3">
-        <label for="ping_timeout" class="form-label">Ping Timeout</label>
-        <input
-          type="text"
-          class="form-control"
-          id="ping_timeout"
-          placeholder="10000"
-          v-model="config.ping_timeout"
-        />
-        <div class="form-text">
-          How long to wait in milliseconds for data from moonlight before shutting down the stream
-        </div>
         <!--Ping Timeout-->
         <div class="mb-3">
           <label for="ping_timeout" class="form-label">Ping Timeout</label>
@@ -259,14 +246,16 @@ <h2 class="accordion-header">
         <div class="mb-3">
           <label for="pkey" class="form-label">Private Key</label>
           <input type="text" class="form-control" id="pkey" placeholder="/dir/pkey.pem" v-model="config.pkey" />
-          <div class="form-text">The private key used for the web UI and Moonlight client pairing. For best compatibility, this should be an RSA-2048 private key.</div>
+          <div class="form-text">The private key used for the web UI and Moonlight client pairing. For best
+            compatibility, this should be an RSA-2048 private key.</div>
         </div>
         <!--Certificate-->
         <div class="mb-3">
           <label for="cert" class="form-label">Certificate</label>
           <input type="text" class="form-control" id="cert" placeholder="/dir/cert.pem" v-model="config.cert" />
           <div class="form-text">
-            The certificate used for the web UI and Moonlight client pairing. For best compatibility, this should have an RSA-2048 public key.
+            The certificate used for the web UI and Moonlight client pairing. For best compatibility, this should have
+            an RSA-2048 public key.
           </div>
         </div>
 
@@ -628,7 +617,8 @@ <h2 class="accordion-header">
           </select>
           <div class="form-text">Higher numbers improve compression (quality at given bitrate) at the cost of
             <strong>increased encoding latency</strong>.<br>
-            Recommended to change only when limited by network or decoder, otherwise similar effect can be accomplished
+            Recommended to change only when limited by network or decoder, otherwise similar effect can be
+            accomplished
             by
             increasing bitrate.
           </div>
@@ -661,7 +651,8 @@ <h2 class="accordion-header">
               aria-labelledby="panelsStayOpen-headingOne">
               <div class="accordion-body">
                 <div class="mb-3" v-if="platform === 'windows'">
-                  <label for="nvenc_realtime_hags" class="form-label">Use realtime priority in hardware accelerated gpu
+                  <label for="nvenc_realtime_hags" class="form-label">Use realtime priority in hardware accelerated
+                    gpu
                     scheduling</label>
                   <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
                     <option value="disabled">Disabled</option>
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index 32ccbc7d3c4..3efd27f165b 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -60,7 +60,9 @@ <h3>{{githubVersion.name}}</h3>
       </div>
     </div>
     <!--Resources-->
-    <Resource-Card></Resource-Card>
+    <div class="my-4">
+      <Resource-Card></Resource-Card>
+    </div>
   </div>
 </body>
 

From bf603750ed1a971230ae797f6dc16acf463f9ccc Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 14:42:19 +0100
Subject: [PATCH 78/82] Moved images to public folder

---
 .../web/{ => public}/images/logo-sunshine-16.png    | Bin
 .../web/{ => public}/images/logo-sunshine-45.png    | Bin
 .../web/{ => public}/images/sunshine-locked-16.png  | Bin
 .../web/{ => public}/images/sunshine-locked-45.png  | Bin
 .../web/{ => public}/images/sunshine-locked.ico     | Bin
 .../web/{ => public}/images/sunshine-locked.png     | Bin
 .../web/{ => public}/images/sunshine-locked.svg     |   0
 .../web/{ => public}/images/sunshine-pausing-16.png | Bin
 .../web/{ => public}/images/sunshine-pausing-45.png | Bin
 .../web/{ => public}/images/sunshine-pausing.ico    | Bin
 .../web/{ => public}/images/sunshine-pausing.png    | Bin
 .../web/{ => public}/images/sunshine-pausing.svg    |   0
 .../web/{ => public}/images/sunshine-playing-16.png | Bin
 .../web/{ => public}/images/sunshine-playing-45.png | Bin
 .../web/{ => public}/images/sunshine-playing.ico    | Bin
 .../web/{ => public}/images/sunshine-playing.png    | Bin
 .../web/{ => public}/images/sunshine-playing.svg    |   0
 .../assets/web/{ => public}/images/sunshine.ico     | Bin
 18 files changed, 0 insertions(+), 0 deletions(-)
 rename src_assets/common/assets/web/{ => public}/images/logo-sunshine-16.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/logo-sunshine-45.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-locked-16.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-locked-45.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-locked.ico (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-locked.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-locked.svg (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-pausing-16.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-pausing-45.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-pausing.ico (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-pausing.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-pausing.svg (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-playing-16.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-playing-45.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-playing.ico (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-playing.png (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine-playing.svg (100%)
 rename src_assets/common/assets/web/{ => public}/images/sunshine.ico (100%)

diff --git a/src_assets/common/assets/web/images/logo-sunshine-16.png b/src_assets/common/assets/web/public/images/logo-sunshine-16.png
similarity index 100%
rename from src_assets/common/assets/web/images/logo-sunshine-16.png
rename to src_assets/common/assets/web/public/images/logo-sunshine-16.png
diff --git a/src_assets/common/assets/web/images/logo-sunshine-45.png b/src_assets/common/assets/web/public/images/logo-sunshine-45.png
similarity index 100%
rename from src_assets/common/assets/web/images/logo-sunshine-45.png
rename to src_assets/common/assets/web/public/images/logo-sunshine-45.png
diff --git a/src_assets/common/assets/web/images/sunshine-locked-16.png b/src_assets/common/assets/web/public/images/sunshine-locked-16.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-locked-16.png
rename to src_assets/common/assets/web/public/images/sunshine-locked-16.png
diff --git a/src_assets/common/assets/web/images/sunshine-locked-45.png b/src_assets/common/assets/web/public/images/sunshine-locked-45.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-locked-45.png
rename to src_assets/common/assets/web/public/images/sunshine-locked-45.png
diff --git a/src_assets/common/assets/web/images/sunshine-locked.ico b/src_assets/common/assets/web/public/images/sunshine-locked.ico
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-locked.ico
rename to src_assets/common/assets/web/public/images/sunshine-locked.ico
diff --git a/src_assets/common/assets/web/images/sunshine-locked.png b/src_assets/common/assets/web/public/images/sunshine-locked.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-locked.png
rename to src_assets/common/assets/web/public/images/sunshine-locked.png
diff --git a/src_assets/common/assets/web/images/sunshine-locked.svg b/src_assets/common/assets/web/public/images/sunshine-locked.svg
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-locked.svg
rename to src_assets/common/assets/web/public/images/sunshine-locked.svg
diff --git a/src_assets/common/assets/web/images/sunshine-pausing-16.png b/src_assets/common/assets/web/public/images/sunshine-pausing-16.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-pausing-16.png
rename to src_assets/common/assets/web/public/images/sunshine-pausing-16.png
diff --git a/src_assets/common/assets/web/images/sunshine-pausing-45.png b/src_assets/common/assets/web/public/images/sunshine-pausing-45.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-pausing-45.png
rename to src_assets/common/assets/web/public/images/sunshine-pausing-45.png
diff --git a/src_assets/common/assets/web/images/sunshine-pausing.ico b/src_assets/common/assets/web/public/images/sunshine-pausing.ico
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-pausing.ico
rename to src_assets/common/assets/web/public/images/sunshine-pausing.ico
diff --git a/src_assets/common/assets/web/images/sunshine-pausing.png b/src_assets/common/assets/web/public/images/sunshine-pausing.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-pausing.png
rename to src_assets/common/assets/web/public/images/sunshine-pausing.png
diff --git a/src_assets/common/assets/web/images/sunshine-pausing.svg b/src_assets/common/assets/web/public/images/sunshine-pausing.svg
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-pausing.svg
rename to src_assets/common/assets/web/public/images/sunshine-pausing.svg
diff --git a/src_assets/common/assets/web/images/sunshine-playing-16.png b/src_assets/common/assets/web/public/images/sunshine-playing-16.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-playing-16.png
rename to src_assets/common/assets/web/public/images/sunshine-playing-16.png
diff --git a/src_assets/common/assets/web/images/sunshine-playing-45.png b/src_assets/common/assets/web/public/images/sunshine-playing-45.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-playing-45.png
rename to src_assets/common/assets/web/public/images/sunshine-playing-45.png
diff --git a/src_assets/common/assets/web/images/sunshine-playing.ico b/src_assets/common/assets/web/public/images/sunshine-playing.ico
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-playing.ico
rename to src_assets/common/assets/web/public/images/sunshine-playing.ico
diff --git a/src_assets/common/assets/web/images/sunshine-playing.png b/src_assets/common/assets/web/public/images/sunshine-playing.png
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-playing.png
rename to src_assets/common/assets/web/public/images/sunshine-playing.png
diff --git a/src_assets/common/assets/web/images/sunshine-playing.svg b/src_assets/common/assets/web/public/images/sunshine-playing.svg
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine-playing.svg
rename to src_assets/common/assets/web/public/images/sunshine-playing.svg
diff --git a/src_assets/common/assets/web/images/sunshine.ico b/src_assets/common/assets/web/public/images/sunshine.ico
similarity index 100%
rename from src_assets/common/assets/web/images/sunshine.ico
rename to src_assets/common/assets/web/public/images/sunshine.ico

From 0b9fb6c7c226a31ec84141ddf0f95e4577cb4b05 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 17:20:06 +0100
Subject: [PATCH 79/82] Changed source url of Discord widget bot

---
 src_assets/common/assets/web/Navbar.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src_assets/common/assets/web/Navbar.vue b/src_assets/common/assets/web/Navbar.vue
index fd5bc3b36fa..291a6b62e85 100644
--- a/src_assets/common/assets/web/Navbar.vue
+++ b/src_assets/common/assets/web/Navbar.vue
@@ -43,16 +43,8 @@ export default {
         let el = document.querySelector("a[href='" + document.location.pathname + "']");
         if (el) el.classList.add("active")
         let widgetbot = document.createElement('script')
-        widgetbot.setAttribute('src', 'https://cdn.jsdelivr.net/npm/@widgetbot/crate@3')
+        widgetbot.setAttribute('src', 'https://app.lizardbyte.dev/js/discord.js')
         widgetbot.async = true;
-        widgetbot.onload = () => {
-            console.log("Widgetbot script created, starting up")
-            new Crate({
-                server: '804382334370578482',
-                channel: '804383092822900797',
-                defer: false,
-            })
-        }
         document.head.appendChild(widgetbot)
     }
 }

From b97ec823b4ccf3a2e98a784ddf7086bb3aad5e94 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 21:25:26 +0100
Subject: [PATCH 80/82] Fix Linux references after folder move to public

---
 cmake/packaging/linux.cmake       | 6 +++---
 docs/source/conf.py               | 2 +-
 scripts/icons/convert_and_pack.sh | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/cmake/packaging/linux.cmake b/cmake/packaging/linux.cmake
index 842277b9d27..8106345ffe8 100644
--- a/cmake/packaging/linux.cmake
+++ b/cmake/packaging/linux.cmake
@@ -70,11 +70,11 @@ if(${SUNSHINE_TRAY} STREQUAL 1)
     install(FILES "${CMAKE_SOURCE_DIR}/sunshine.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status"
             RENAME "sunshine-tray.svg")
-    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/images/sunshine-playing.svg"
+    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/public/images/sunshine-playing.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status")
-    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/images/sunshine-pausing.svg"
+    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/public/images/sunshine-pausing.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status")
-    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/images/sunshine-locked.svg"
+    install(FILES "${SUNSHINE_SOURCE_ASSETS_DIR}/common/assets/web/public/images/sunshine-locked.svg"
             DESTINATION "${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/status")
 
     set(CPACK_DEBIAN_PACKAGE_DEPENDS "\
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 3c9e338bb07..c2b66a56635 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -69,7 +69,7 @@
 # -- Options for HTML output -------------------------------------------------
 
 # images
-html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'images', 'sunshine.ico')
+html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'public', 'images', 'sunshine.ico')
 html_logo = os.path.join(root_dir, 'sunshine.png')
 
 # Add any paths that contain custom static files (such as style sheets) here,
diff --git a/scripts/icons/convert_and_pack.sh b/scripts/icons/convert_and_pack.sh
index dd1183b9992..950effc98d6 100644
--- a/scripts/icons/convert_and_pack.sh
+++ b/scripts/icons/convert_and_pack.sh
@@ -37,9 +37,9 @@ icon_sizes=${!icon_sizes_keys[@]}
 echo "using icon sizes:"
 echo ${icon_sizes[@]}
 
-src_vectors=("../../src_assets/common/assets/web/images/sunshine-locked.svg"
-             "../../src_assets/common/assets/web/images/sunshine-pausing.svg"
-             "../../src_assets/common/assets/web/images/sunshine-playing.svg"
+src_vectors=("../../src_assets/common/assets/web/public/images/sunshine-locked.svg"
+             "../../src_assets/common/assets/web/public/images/sunshine-pausing.svg"
+             "../../src_assets/common/assets/web/public/images/sunshine-playing.svg"
              "../../sunshine.svg")
 
 echo "using sources vectors:"

From fe04d7b7bb795985262df8c7d855eb58d4b2e42e Mon Sep 17 00:00:00 2001
From: TheElixZammuto <theelixzammuto@gmail.com>
Date: Sat, 16 Dec 2023 22:25:09 +0100
Subject: [PATCH 81/82] Update src_assets/common/assets/web/Navbar.vue

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/Navbar.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src_assets/common/assets/web/Navbar.vue b/src_assets/common/assets/web/Navbar.vue
index 291a6b62e85..948fb4d7244 100644
--- a/src_assets/common/assets/web/Navbar.vue
+++ b/src_assets/common/assets/web/Navbar.vue
@@ -42,10 +42,9 @@ export default {
     mounted() {
         let el = document.querySelector("a[href='" + document.location.pathname + "']");
         if (el) el.classList.add("active")
-        let widgetbot = document.createElement('script')
-        widgetbot.setAttribute('src', 'https://app.lizardbyte.dev/js/discord.js')
-        widgetbot.async = true;
-        document.head.appendChild(widgetbot)
+        let discordWidget = document.createElement('script')
+        discordWidget.setAttribute('src', 'https://app.lizardbyte.dev/js/discord.js')
+        document.head.appendChild(discordWidget)
     }
 }
 </script>

From 171e472de124d4e3801bf0e21306b5f52d973a24 Mon Sep 17 00:00:00 2001
From: Elia Zammuto <theelixzammuto@gmail.com>
Date: Wed, 27 Dec 2023 22:53:11 +0100
Subject: [PATCH 82/82] Fix global command preparations

---
 src_assets/common/assets/web/config.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index c14c77d4394..7d3b01cacb1 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -225,7 +225,7 @@ <h2 class="accordion-header">
                   </div>
                 </td>
                 <td>
-                  <button class="btn btn-danger" @click="editForm['global_prep_cmd'].splice(i,1)">
+                  <button class="btn btn-danger" @click="global_prep_cmd.splice(i,1)">
                     <i class="fas fa-trash"></i>
                   </button>
                   <button class="btn btn-success" @click="add_global_prep_cmd">