Move to appConfig, Vuetify 3

components/blocks/Flooter.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { useRuntimeConfig } from '#imports'
-
 const props = defineProps({
   opaque: Boolean,
 })
 
-const config = useRuntimeConfig()
-const version = config.public.version
-const buildDate = config.public.buildDate
+const config = useAppConfig()
 
 const currentYear = new Date().getFullYear()
 const mailTemplate = `I've just found a bug on https://enderman.ch and would like to report it.%0D%0A%0D%0AWebsite version: ${
-  config.public.version
+  config.build.version
 }%0D%0ABuild date: ${
-  config.public.buildDate
+  config.build.date
 }%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`
 </script>
 
 <template>
-  <footer class="user-select-none text-align-center line-height-1-5">
+  <footer
+    class="user-select-none pass-through text-align-center line-height-1-5"
+  >
     <span
       class="font-small"
       :class="{
@@ -50,8 +48,8 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
       >. All rights reserved.
       <wbr />
       <sub class="nobr">
-        β{{ version ? version : '?.?.?' }} ({{
-          buildDate ? buildDate : '1970-01-01'
+        β{{ config.build.version ? config.build.version : '?.?.?' }} ({{
+          config.build.date ? config.build.date : '1970-01-01'
         }})
       </sub>
     </span>

components/blocks/Options.vue

@@ -1,31 +1,9 @@
 <script setup lang="ts">
-import { useQuasar } from 'quasar'
-
 import Dialog from '~/components/ui/Dialog.vue'
 import cogIcon from '~/assets/images/icons/cog.png'
 import pearlIcon from '~/assets/images/icons/pearl.gif'
 
-const quasar = useQuasar()
-
-function optionsMenu() {
-  quasar
-    .dialog({
-      component: Dialog,
-      componentProps: {
-        icon: pearlIcon,
-        alt: 'Pearl',
-      },
-    })
-    .onOk(() => {
-      console.log('OK')
-    })
-    .onCancel(() => {
-      console.log('Cancel')
-    })
-    .onDismiss(() => {
-      console.log('OK or Cancel (Dialog Dismissed)')
-    })
-}
+function optionsMenu() {}
 </script>
 
 <template>

components/blocks/SwipeControls.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { storeToRefs } from 'pinia'
 import { usePageStore } from '~/stores/pages'
 
@@ -25,11 +24,11 @@ const state = computed(() => {
 <template>
   <div class="control-layout pass-through">
     <NuxtLink class="control-icon no-decoration" :to="state.prev">
-      <FontAwesomeIcon icon="fa-solid fa-angle-left" fixed-width />
+      <Icon name="iconoir:nav-arrow-left" />
     </NuxtLink>
 
     <NuxtLink class="control-icon no-decoration" :to="state.next">
-      <FontAwesomeIcon icon="fa-solid fa-angle-right" fixed-width />
+      <Icon name="iconoir:nav-arrow-right" />
     </NuxtLink>
   </div>
 </template>