proposition frontend

frontend/src/components/MessageItem.vue

@@ -0,0 +1,107 @@
+<!-- Un message avec ses éventuelles réponses -->
+<template>
+  <div class="message-item">
+    <!-- Auteur + horodatage -->
+    <div class="message-meta">
+      <span
+        class="ip"
+        :style="{ color: color, textShadow: glow }"
+      >{{ message.authorIp }}</span>
+      <span class="ts">{{ fmt(message.createdAt) }}</span>
+    </div>
+
+    <!-- Contenu -->
+    <p class="message-body">{{ message.content }}</p>
+
+    <!-- Réponses -->
+    <div
+      v-for="reply in message.replies"
+      :key="reply.id"
+      class="reply"
+    >
+      <span
+        class="ip reply-ip"
+        :style="{ color: getColor(reply.authorIp) }"
+      >{{ reply.authorIp }}</span>
+      <span class="ts">{{ fmt(reply.createdAt) }}</span>
+      <p class="message-body reply-body">{{ reply.content }}</p>
+    </div>
+
+    <div class="divider" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import { getIpColor, getIpGlow } from '@/composables/ipColor';
+
+const props = defineProps<{ message: Message }>();
+
+const color = computed(() => getIpColor(props.message.authorIp));
+const glow  = computed(() => getIpGlow(color.value));
+
+function getColor(ip: string) { return getIpColor(ip); }
+
+function fmt(date: string): string {
+  return new Date(date).toLocaleTimeString('fr-FR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+</script>
+
+<style scoped>
+.message-item {
+  padding: 4px 0;
+}
+
+.message-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 25px;
+}
+
+.ip {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ts {
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  color: #303030;
+}
+
+.message-body {
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  color: #c0c0c0;
+  padding: 3px 25px 0;
+  margin: 0;
+}
+
+.divider {
+  height: 1px;
+  background: #141420;
+  margin: 8px 25px 0;
+}
+
+/* ── Réponses ── */
+.reply {
+  margin: 6px 25px 0 45px;
+  border-left: 2px solid #1a1a2a;
+  padding-left: 10px;
+}
+
+.reply-ip {
+  font-size: 11px;
+}
+
+.reply-body {
+  font-size: 12px;
+  padding-left: 0;
+}
+</style>