Version 2.0.0 - update of everything

2026-10-07 14:05:02 +02:00
1 parent e006d48c0a
commit 6d81a8c1c0
@@ -0,0 +1,107 @@
+<template>
+    <div class="user-card">
+        <div class="avatar">
+            <img :src="userAvatar(user)" :style="{ width: size, height: size }" alt="Avatar"/>
+            <Icon v-if="user?.isAdmin" style="color: var(--admin-color);" icon="fa-solid fa-star" class="tag"/>
+            <Icon v-else-if="user?.isOwner" style="color: var(--owner-color);" icon="fa-solid fa-crown" class="tag"/>
+            <Icon v-else-if="user?.isMod" style="color: var(--mod-color);" icon="fa-solid fa-shield-halved" class="tag"/>
+            <span v-if="online" class="online-dot" title="En ligne"></span>
+        </div>
+        <div class="user-info">
+            <p class="global">{{ user?.global_name || user?.username || "Nom d'affichage inconnu" }}</p>
+            <p class="username">{{ user?.username || "Identifiant inconnu" }}<span v-if="showId" class="id"> · {{ user?.id }}</span></p>
+        </div>
+    </div>
+</template>
+<script setup>
+// Variante de UI/User.vue pour une identité brute (UserLite) avec repli d'avatar et pastille « en ligne »
+import { userAvatar } from './adminFormat';
+
+defineProps({
+    user: {
+        type: Object,
+        required: true
+    },
+    online: {
+        type: Boolean,
+        default: false
+    },
+    showId: {
+        type: Boolean,
+        default: false
+    },
+    size: {
+        type: String,
+        default: "50px"
+    }
+});
+</script>
+<style scoped>
+.user-card {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    user-select: none;
+    min-width: 0;
+}
+
+.avatar {
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+img {
+    border-radius: 100%;
+    object-fit: cover;
+    background-color: var(--main);
+    display: block;
+}
+
+.tag {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    font-size: 0.8em;
+    border-radius: 50%;
+}
+
+.online-dot {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background-color: var(--mod-color);
+    border: 2px solid var(--tertiary);
+}
+
+.user-info {
+    display: flex;
+    gap: 5px;
+    flex-direction: column;
+    min-width: 0;
+}
+
+p {
+    margin: 0;
+}
+
+.global {
+    font-size: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.username {
+    color: var(--text-secondary);
+    font-size: 12px;
+    word-break: break-all;
+}
+
+.id {
+    font-family: monospace;
+}
+</style>