proposition frontend

frontend/src/components/MessageList.vue

@@ -0,0 +1,79 @@
+<!-- Zone de messages scrollable avec la pub casino en overlay -->
+<template>
+  <div class="feed-wrapper">
+    <!-- Messages -->
+    <div ref="listEl" class="feed-scroll">
+      <MessageItem
+        v-for="msg in messages"
+        :key="msg.id"
+        :message="msg"
+      />
+      <div v-if="messages.length === 0" class="feed-empty">
+        Aucun message pour l'instant.
+      </div>
+    </div>
+
+    <!-- Pub casino : overlay absolu sur la droite du feed -->
+    <InlineCasinoAd class="casino-overlay" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import MessageItem from './MessageItem.vue';
+import InlineCasinoAd from './InlineCasinoAd.vue';
+
+const props = defineProps<{ messages: Message[] }>();
+
+const listEl = ref<HTMLElement | null>(null);
+
+// Auto-scroll vers le bas à chaque nouveau message
+watch(
+  () => props.messages.length,
+  async () => {
+    await nextTick();
+    if (listEl.value) {
+      listEl.value.scrollTop = listEl.value.scrollHeight;
+    }
+  },
+);
+</script>
+
+<style scoped>
+.feed-wrapper {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.feed-scroll {
+  height: 100%;
+  overflow-y: auto;
+  padding: 8px 0;
+  scrollbar-width: thin;
+  scrollbar-color: #252535 #080810;
+}
+.feed-scroll::-webkit-scrollbar       { width: 8px; }
+.feed-scroll::-webkit-scrollbar-track { background: #080810; }
+.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
+
+.feed-empty {
+  padding: 48px 25px;
+  color: #2a2a44;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+}
+
+/* Positionné en absolu sur la droite du wrapper */
+.casino-overlay {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  pointer-events: none;
+}
+.casino-overlay :deep(.casino-cta) {
+  pointer-events: all;
+}
+</style>