fix(ui): reorder and add missing config options (#1993)

src_assets/common/assets/web/ResourceCard.vue

@@ -2,7 +2,7 @@
     <div class="card p-2">
         <div class="card-body">
             <h2>Resources</h2>
-            <br />
+            <br>
             <p>
                 Resources for Sunshine!
             </p>
@@ -15,11 +15,11 @@
             </div>
         </div>
     </div>
-    <!--Legal-->
+    <!-- Legal -->
     <div class="card p-2 mt-4">
         <div class="card-body">
             <h2>Legal</h2>
-            <br />
+            <br>
             <p>
                 By continuing to use this software you agree to the terms and conditions in the following documents.
             </p>

src_assets/common/assets/web/apps.html

@@ -102,7 +102,7 @@
     </div>
     <div class="edit-form card mt-2" v-if="showEditForm">
       <div class="p-4">
-        <!--name-->
+        <!-- Application 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" />
@@ -110,7 +110,7 @@
             Application Name, as shown on Moonlight
           </div>
         </div>
-        <!--output-->
+        <!-- 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"
@@ -120,7 +120,7 @@
             specified, the output is ignored
           </div>
         </div>
-        <!--prep-cmd-->
+        <!-- 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']">
@@ -136,7 +136,7 @@
         <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 />
+            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">
@@ -182,7 +182,7 @@
             </tbody>
           </table>
         </div>
-        <!--detached-->
+        <!-- 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">
@@ -200,7 +200,7 @@
             A list of commands to be run and forgotten about
           </div>
         </div>
-        <!--command-->
+        <!-- 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"
@@ -210,7 +210,7 @@
             that sleeps indefinitely
           </div>
         </div>
-        <!--working dir-->
+        <!-- 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"
@@ -354,7 +354,7 @@
               href="https://docs.lizardbyte.dev/projects/sunshine/en/latest/about/guides/app_examples.html"
               target="_blank">See More</a></div>
         </div>
-        <!--buttons-->
+        <!-- Save buttons -->
         <div class="d-flex">
           <button @click="showEditForm = false" class="btn btn-secondary m-2">
             Cancel

src_assets/common/assets/web/index.html

@@ -20,11 +20,11 @@
         <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
       </ul>
     </div>
-    <!--Version-->
+    <!-- Version -->
     <div class="card p-2 my-4">
       <div class="card-body" v-if="version">
         <h2>Version {{version}}</h2>
-        <br />
+        <br>
         <div v-if="loading">
           Loading Latest Release...
         </div>
@@ -59,7 +59,7 @@
         </div>
       </div>
     </div>
-    <!--Resources-->
+    <!-- Resources -->
     <div class="my-4">
       <Resource-Card></Resource-Card>
     </div>

src_assets/common/assets/web/pin.html

@@ -16,7 +16,7 @@
       </div>
       <div class="alert alert-warning">
         <b>Warning!</b> Make sure you have access to the client you are pairing
-        with.<br />
+        with.<br>
         This software can give total control to your computer, so be careful!
       </div>
       <div id="status"></div>

src_assets/common/assets/web/troubleshooting.html

@@ -40,11 +40,11 @@
   <Navbar></Navbar>
   <div class="container">
     <h1 class="my-4">Troubleshooting</h1>
-    <!--Force Close App-->
+    <!-- Force Close App -->
     <div class="card p-2 my-4">
       <div class="card-body">
         <h2>Force Close</h2>
-        <br />
+        <br>
         <p>
           If Moonlight complains about an app currently running, force closing the
           app should fix the issue.
@@ -62,11 +62,11 @@
         </div>
       </div>
     </div>
-    <!--Restart Sunshine-->
+    <!-- Restart Sunshine -->
     <div class="card p-2 my-4">
       <div class="card-body">
         <h2>Restart Sunshine</h2>
-        <br />
+        <br>
         <p>
           If Sunshine isn't working properly, you can try restarting it.
           This will terminate any running sessions.
@@ -81,11 +81,11 @@
         </div>
       </div>
     </div>
-    <!--Unpair all Clients-->
+    <!-- Unpair all Clients -->
     <div class="card p-2 my-4">
       <div class="card-body">
         <h2>Unpair All Clients</h2>
-        <br />
+        <br>
         <p>Remove all your paired devices</p>
         <div class="alert alert-success" v-if="unpairAllStatus === true">
           Unpair Successful!
@@ -100,11 +100,11 @@
         </div>
       </div>
     </div>
-    <!--Logs-->
+    <!-- Logs -->
     <div class="card p-2 my-4">
       <div class="card-body">
         <h2>Logs</h2>
-        <br />
+        <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">

src_assets/common/assets/web/welcome.html

@@ -19,7 +19,7 @@
           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 />
+          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">