init

frontend/src/pages/server/channel/index.vue

@@ -3,6 +3,7 @@ import 'highlight.js/styles/github-dark.css'
 import {computed, nextTick, ref, watch} from 'vue';
 import {storeToRefs} from 'pinia';
 import {useMessageStore} from '@/stores/message';
+import {useServerStore} from '@/stores/server';
 import {useUserStore} from "@/stores/user.ts";
 import {useMarkdown} from '@/composables/useMarkdown'
 
@@ -13,11 +14,12 @@ const props = defineProps<{
 
 const channelId = computed(() => props.channelId);
 const messageStore = useMessageStore();
+const serverStore = useServerStore();
 const userStore = useUserStore();
 const {renderMarkdown} = useMarkdown()
 
 const messageContainer = ref<HTMLElement | null>(null);
-const {messages, loading, loadingBefore, loadingAfter, hasMoreAfter, isAtBottom} = storeToRefs(messageStore);
+const {messages, loading, loadingBefore, loadingAfter, hasMoreAfter, isAtBottom, newestId} = storeToRefs(messageStore);
 const newMessage = ref('');
 
 const SCROLL_LOAD_THRESHOLD = 120;
@@ -25,6 +27,24 @@ const SCROLL_BOTTOM_TOLERANCE = 4;
 const paginationLock = ref<'before' | 'after' | null>(null);
 const paginationLockScrollTop = ref(0);
 const lastScrollTop = ref(0);
+const markedMessageByChannel = new Map<string, string>();
+
+const markCurrentChannelRead = async (targetChannelId: string) => {
+  if (messageStore.activeChannelId !== targetChannelId || !newestId.value) return;
+
+  const messageId = newestId.value;
+  if (markedMessageByChannel.get(targetChannelId) === messageId) return;
+
+  try {
+    const readState = await messageStore.markChannelRead(targetChannelId, messageId);
+    if (messageStore.activeChannelId !== targetChannelId) return;
+
+    markedMessageByChannel.set(targetChannelId, messageId);
+    serverStore.applyChannelReadState(props.serverId, targetChannelId, readState.unread_count);
+  } catch (error) {
+    console.error('Erreur lors de la mise à jour de la lecture:', error);
+  }
+};
 
 const showRecentMessagesButton = computed(() =>
   !loading.value && (hasMoreAfter.value || !isAtBottom.value),
@@ -163,6 +183,7 @@ const returnToRecentMessages = async () => {
   paginationLock.value = null;
   await messageStore.fetchMessages(channelId.value);
   await scrollToBottom();
+  await markCurrentChannelRead(channelId.value);
 };
 
 // Only explicit initial loads and realtime messages received while at the
@@ -173,9 +194,17 @@ watch(messages, async () => {
   }
 }, {deep: true, flush: 'post'});
 
+watch(isAtBottom, async (atBottom) => {
+  if (atBottom) {
+    await markCurrentChannelRead(channelId.value);
+  }
+});
+
 watch(channelId, async (newChannelId) => {
   if (newChannelId) {
     await messageStore.fetchMessages(newChannelId);
+    await scrollToBottom();
+    await markCurrentChannelRead(newChannelId);
   }
 }, {immediate: true})
 </script>