display App version in settings (#801)

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

theseus_gui/src/components/ui/AccountsCard.vue

@@ -24,7 +24,10 @@
       :class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
     >
       <div v-if="selectedAccount" class="selected account">
-        <Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.id}/128`" />
+        <Avatar
+          size="xs"
+          :src="`https://crafatar.com/avatars/${selectedAccount.id}?size=128&overlay`"
+        />
         <div>
           <h4>{{ selectedAccount.username }}</h4>
           <p>Selected</p>

theseus_gui/src/components/ui/ExportModal.vue

@@ -292,9 +292,11 @@ const exportPack = async () => {
 .textarea-wrapper {
   // margin-top: 1rem;
   height: 12rem;
+
   textarea {
     max-height: 12rem;
   }
+
   .preview {
     overflow-y: auto;
   }

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>