127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<script setup>
|
|
import {Icon as IconifyIcon} from "@iconify/vue"
|
|
import { apiFetch } from "~/composables/useApiAuth"
|
|
|
|
const { data: messages, error } = await useFetch('/api/discord/messages', {
|
|
$fetch: apiFetch,
|
|
server: false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<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="error" class="empty-state error-state">
|
|
<IconifyIcon icon="mdi:alert-circle-outline" class="text-3xl text-m-error/70" />
|
|
<p class="mt-2 font-mono text-xs text-m-error/80">
|
|
Erreur lors de l'opération
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else-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>
|
|
|
|
<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>
|
|
</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;
|
|
}
|
|
|
|
.error-state {
|
|
border-radius: 8px;
|
|
border: 1px solid rgb(var(--m-error) / 0.12);
|
|
background: rgb(var(--m-error) / 0.06);
|
|
}
|
|
|
|
.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>
|