feat : new ui et message discord

components/MessageDiscord.vue

@@ -1,19 +1,108 @@
 <script setup>
+import {Icon as IconifyIcon} from "@iconify/vue"
 const { data: messages } = await useFetch('/api/discord/messages')
 </script>
 
 <template>
-  <div class="bg-m-secondary w-auto h-auto  mx-4 rounded-md shadow-md/50 shadow-black p-2">
-    <div class="mb-2 flex items-center justify-between">
-      <p class="font-bold text-3xl text-m-tertiary">
-        Speedtest
+  <div class="discord-card card-glow">
+    <div class="card-header">
+      <div class="flex items-center gap-2.5">
+        <IconifyIcon icon="mdi:message-text" class="text-lg text-m-accent" />
+        <h2 class="card-title">Discord</h2>
+      </div>
+      <span class="font-mono text-[10px] text-m-muted tracking-widest uppercase">Messages</span>
+    </div>
+
+    <div v-if="!messages || messages.length === 0" class="empty-state">
+      <IconifyIcon icon="mdi:chat-outline" class="text-3xl text-m-muted/40" />
+      <p class="mt-2 font-mono text-xs text-m-muted/50">
+        Aucun message
       </p>
-  <div v-if="messages">
-    <div v-for="m in messages" :key="m.id">
-      <strong>{{ m.author.username }}</strong>
-      <p>{{ m.content }}</p>
+    </div>
+
+    <div v-else class="message-list">
+      <div
+        v-for="m in messages"
+        :key="m.id"
+        class="message-row"
+      >
+        <div class="message-avatar">
+          {{ m.author.username.charAt(0).toUpperCase() }}
+        </div>
+        <div class="min-w-0 flex-1">
+          <span class="font-display text-xs font-semibold text-m-accent">
+            {{ m.author.username }}
+          </span>
+          <p class="mt-0.5 break-words font-display text-sm leading-relaxed text-m-text/80">
+            {{ m.content }}
+          </p>
+        </div>
+      </div>
     </div>
   </div>
-    </div>
-  </div>
-</template>
+</template>
+
+<style scoped>
+.discord-card {
+  background: rgb(var(--m-secondary));
+  border-radius: 12px;
+  padding: 1.25rem;
+  max-height: calc(100vh - 7rem);
+  overflow: hidden;
+  transition: background-color 0.4s ease;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.card-title {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: rgb(var(--m-text));
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+}
+
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: calc(100vh - 12rem);
+  overflow-y: auto;
+}
+
+.message-row {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 8px;
+  background: rgb(var(--m-tertiary));
+  border: 1px solid rgb(var(--m-accent) / 0.04);
+}
+
+.message-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, rgb(var(--m-accent) / 0.2), rgb(var(--m-success) / 0.15));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: rgb(var(--m-accent));
+  flex-shrink: 0;
+}
+</style>