Version 1.0.0 - Finalisation du composant Servers

src/components/Widget/ReturnHomeButton.vue

@@ -0,0 +1,30 @@
+<template>
+     <IconAction color="white" class="return-home" v-if="globalStore.lastRoute" icon="fa-solid fa-xmark" @click="router.push(globalStore.lastRoute)"/>
+</template>
+<script setup>
+import IconAction from '@/components/UI/IconAction.vue';
+import { useRouter } from 'vue-router';
+import { useGlobalStore } from '@/stores/globalStore';
+const globalStore = useGlobalStore();
+const router = useRouter();
+</script>
+<style scoped>
+.return-home {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: #FFFFFF;
+    cursor: pointer;
+}
+.return-home:hover {
+    color: var(--text-hover);
+}
+.icon {
+    font-size: 1.3em;
+    transition: filter 0.3s ease;
+}
+.icon:hover {
+   cursor: pointer;
+   filter: brightness(0.8);
+}
+</style>

src/components/Widget/ServerListItem.vue

@@ -0,0 +1,102 @@
+<template>
+    <Box no-shadow level="second" padding="closed">
+        <div class="container-list">
+            <div class="container-avatar">
+                <ServerAvatar :server-id="server.id" :src="server.icon"/>
+                <div class="info">
+                    <p class="name">{{ server.name }}</p>
+                    <p class="data"><Icon style="font-size: 10px;" :color="server.connected ? '#0BFF89' : '#FF0A0A'" icon="fa-solid fa-circle"/> {{ server.connected ? 'En ligne' : 'Hors ligne' }} - {{ server.serverMember }} membres</p>
+                </div>
+            </div>
+            <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members.length > 0" :members="server.members"/>
+            <Button class="btn" @click="access()">Accéder</Button>
+        </div>
+    </Box>
+</template>
+<script setup>
+import Box from '@/components/UI/Box.vue';
+import ServerAvatar from '../UI/ServerAvatar.vue';
+import Button from '../UI/Button.vue';
+import IconAction from '../UI/IconAction.vue';
+import { useGlobalStore } from '@/stores/globalStore';
+import { useRouter } from 'vue-router';
+import ServerOnlinePicture from '@/components/Widget/ServerOnlinePicture.vue';
+const router = useRouter();
+
+const globalStore = useGlobalStore();
+
+const props = defineProps({
+    server: {
+        type: Object,
+        required: true,
+        default: () => ({
+            id: '',
+            name: '',
+            owner: false,
+            icon: '',
+            members: [],
+            serverMember: 0,
+            connected: false
+        })
+    }
+});
+
+function access() {
+    router.push(`/servers/${props.server.id}`);
+}
+</script>
+<style scoped>
+.container-avatar {
+    display: flex;
+    align-items: center;
+    gap: 10px;;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}   
+
+@media screen and (max-width: 768px) {
+    .container-list {
+        flex-direction: column;
+        gap: 20px;;
+
+    }
+
+    .btn {
+        width: 100%;
+    }
+
+    .sop {
+        display: none;
+    }
+    
+}
+
+.container-list {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;    
+}
+
+p {
+    margin: 0;
+}
+
+.data {
+    color: var(--text-secondary);
+    font-size: 0.8em;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+</style>

src/components/Widget/ServerOnlinePicture.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+    <Avatar v-for="member in members"
+        :key="member.id"
+        :user-id="member.id"
+        :avatar-url="member.avatar"
+        :isMod="member.isMod"
+        :isOwner="member.isOwner"
+        :isAdmin="member.isAdmin"
+        :class="`avatar`"/>
+        
+    <Circle style="z-index: 10;" class="avatar" v-if="length > 4">+ {{ length - 4}}</Circle>
+    </div>
+   
+
+</template>
+<script setup>
+import Avatar from '../UI/Avatar.vue';
+import Circle from '../UI/Circle.vue';
+
+const props = defineProps({
+    members: {
+        type: Array,
+        default: () => []
+    },  
+})
+
+// ne garder que les quatres premiers membres
+const length = props.members.length;
+const members = props.members.slice(0, 4);
+
+</script>
+<style scoped>
+div{
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  margin-left: -10px; /* Ajustez cette valeur pour contrôler le chevauchement */
+}
+</style>