Popup pour état connexion sur avatar + Refonte views Dashboard + Ajout types depuis DiscordJS

src/App.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { RouterView, RouterLink } from 'vue-router'
 import { ref, provide, onMounted } from 'vue'
+import { useLoading } from 'vue-loading-overlay'
+import { ModalsContainer, useModal } from 'vue-final-modal'
 import { checkUser, checkBots, checkUserGuilds } from '@/utils/discord'
+
+import AvatarModal from './components/AvatarModal.vue'
+
 import type { Ref } from 'vue'
-import type { User, Guild } from '@/utils/discord'
+import type { APIUser, APIGuild } from 'discord-api-types/v10'
+
 
 // État de l'utilisateur, des bots et de leur avatar
-const user: Ref<User | null> = ref(null)
-const bots: Ref<User[] | null> = ref([])
-const guilds: Ref<Guild[] | null> = ref([])
-const avatar = ref('/question-square.svg')
+const user: Ref<APIUser | null> = ref(null)
+const bots: Ref<APIUser[] | null> = ref([])
+const guilds: Ref<APIGuild[] | null> = ref([])
+const avatar = ref('/question-square-48.png')
 const ready = ref(false)
 
 provide('user', user) // Fournit l'utilisateur aux composants enfants
@@ -17,14 +22,25 @@ provide('bots', bots) // Fournit les bots aux composants enfants
 provide('guilds', guilds) // Fournit les guilds aux composants enfants
 provide('ready', ready) // Fournit l'état de préparation aux composants enfants
 
+// Affiche un écran de chargement
+const $loading = useLoading({ color: '#eee', opacity: 0 })
+
+// Modèle du popup de l'avatar
+const { open } = useModal({ component: AvatarModal })
+
+// Cycle de vie
 onMounted(async () => {
+    const loader = $loading.show()
     user.value = await checkUser() // Vérifie l'authentification lors du montage du composant
+
     if (user.value) {
         avatar.value = `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}?size=48`
         bots.value = await checkBots() // Vérifie les bots
         guilds.value = await checkUserGuilds() // Vérifie les guilds de l'utilisateur
-        ready.value = true
     }
+
+    ready.value = true
+    loader.hide()
 })
 </script>
 
@@ -37,8 +53,8 @@ onMounted(async () => {
         <nav class="vc">
             <router-link to="/">Index</router-link>
             <p>|</p>
-            <router-link to="/discord">Discord</router-link>
-            <img class="rounded" :src=avatar>
+            <router-link to="/discord/dashboard">Discord</router-link>
+            <img class="rounded" @click="() => open()" :src=avatar>
         </nav>
     </header>
 
@@ -47,6 +63,8 @@ onMounted(async () => {
             <component :is="Component" />
         </transition>
     </router-view>
+
+    <ModalsContainer />
 </template>
 
 <style scoped>