display App version in settings (#801)

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

theseus_gui/src/pages/Settings.vue

@@ -22,6 +22,7 @@ import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vu
 import { mixpanel_opt_out_tracking, mixpanel_opt_in_tracking } from '@/helpers/mixpanel'
 import { open } from '@tauri-apps/api/dialog'
 import { getOS } from '@/helpers/utils.js'
+import { version } from '../../package.json'
 
 const pageOptions = ['Home', 'Library']
 
@@ -39,6 +40,8 @@ const accessSettings = async () => {
   return settings
 }
 
+// const launcherVersion = await get_launcher_version().catch(handleError)
+
 const fetchSettings = await accessSettings().catch(handleError)
 
 const settings = ref(fetchSettings)
@@ -165,9 +168,13 @@ async function refreshDir() {
           </span>
           <span v-else> Sign in to your Modrinth account. </span>
         </label>
-        <button v-if="credentials" class="btn" @click="logOut"><LogOutIcon /> Sign out</button>
+        <button v-if="credentials" class="btn" @click="logOut">
+          <LogOutIcon />
+          Sign out
+        </button>
         <button v-else class="btn" @click="$refs.loginScreenModal.show()">
-          <LogInIcon /> Sign in
+          <LogInIcon />
+          Sign in
         </button>
       </div>
       <label for="theme">
@@ -528,6 +535,19 @@ async function refreshDir() {
         />
       </div>
     </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">About</span>
+        </h3>
+      </div>
+      <div>
+        <label>
+          <span class="label__title">App version</span>
+          <span class="label__description">Theseus v{{ version }} </span>
+        </label>
+      </div>
+    </Card>
   </div>
 </template>