83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<!-- 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"
|
|
:my-ip="myIp"
|
|
@reply="$emit('reply', $event)"
|
|
/>
|
|
<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 (masqué si NoAds) -->
|
|
<InlineCasinoAd v-if="!hideAds" 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[]; hideAds?: boolean; myIp?: string }>();
|
|
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
|
|
|
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>
|