Version 1.0.0 - Création du Header

src/views/Interface.vue

@@ -1,6 +1,7 @@
 <template>
     <SocketEnvironment>
         <div class="container">
+             <HeaderGuild/>
                 <Box>
                     <Button @click="router.push('/servers')">Choisir un serveur</Button>
                     <Button @click="router.push('/terms')">Terms</Button>
@@ -8,7 +9,7 @@
                     <Button @click="globalStore.toogleTheme()">Changer le thème</Button>
                     <p>{{ guildId }}</p>
                 </Box>
-                <UserAction/>
+                <Account/>
         </div>
     </SocketEnvironment>
 </template>
@@ -16,13 +17,15 @@
 import Box from '@/components/UI/Box.vue';
 import Button from '@/components/UI/Button.vue';
 import SocketEnvironment from '@/utils/SocketEnvironment.vue';
-import UserAction from '@/components/Features/UserAction.vue';
 import { watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useGlobalStore } from '@/stores/globalStore';
 import { useUserStore } from '@/stores/userStore';
 import { IOListener, IORequest } from '@/utils/IORequest';
 import { onMounted, ref } from 'vue';
+import Account from '@/components/Features/Account.vue';
+import events from '@/utils/Events.js';
+import HeaderGuild from '@/components/Features/HeaderGuild.vue';
 
 const props = defineProps({
     guildId: {
@@ -54,11 +57,9 @@ onMounted(() => {
     } 
 });
 
-watch(() => userStore.userInfo, (newValue, oldValue) => {
-    if(userStore.userInfo) {
-        checkGuildAvailability();
-    }
-}, { immediate: true });    
+events.on("UPDATE", () => {
+    checkGuildAvailability();
+});
 
 function loadInteface() {
     if(alreadyLoaded.value) return;
@@ -99,18 +100,10 @@ function checkGuildAvailability() {
 
 </script>
 <style scoped>  
-.container {
-    padding: 20px;
-    max-width: 800px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    width: 100%;
-}
 
 .container {
     padding: 20px;;
-    max-width: 800px;
+    max-width: 400px;
     display: flex;
     flex-direction: column;
     gap: 20px;

src/views/Servers.vue

@@ -1,5 +1,4 @@
 <script setup>
-import UserAction from '@/components/Features/UserAction.vue';
 import Splash from '@/components/Layout/Splash.vue';
 import Box from '@/components/UI/Box.vue';
 import SocketEnvironment from "../utils/SocketEnvironment.vue"
@@ -11,6 +10,7 @@ import ReturnHomeButton from '@/components/Widget/ReturnHomeButton.vue';
 import { ref } from 'vue';
 import ServerListItem from '@/components/Widget/ServerListItem.vue';
 import Info from '@/components/UI/Info.vue';
+import Account from '@/components/Features/Account.vue';
 
 const globalStore = useGlobalStore();
 const userStore = useUserStore();
@@ -34,7 +34,7 @@ fetch('/information.json')
 
 function inviteSubsonics() {
     
-    window.open(botInviteUrl.value, '_blank');
+    window.open(botInviteUrl.value, '_blank', `popup,width=600,height=600,left=${(window.innerWidth - 600) / 2},top=${(window.innerHeight - 600) / 2}`);
 }
 
 // Vérifier RaphX pourquoi ca plante !
@@ -58,7 +58,7 @@ function inviteSubsonics() {
                     <Button :disabled="!hasLink" @click="inviteSubsonics()"><Icon icon="fa-solid fa-user-plus"/>Inviter Subsonics</Button>
                 </div>
             </Box>
-            <UserAction/>
+            <Account class="full"/>
             </div>
         </Splash>
     </SocketEnvironment>