init

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

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import 'highlight.js/styles/github-dark.css'
-import {computed, nextTick, ref, watch} from 'vue';
+import {computed, nextTick, onMounted, onUnmounted, 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'
+import {onReloadAll} from '@/plugins/events.ts'
 
 const props = defineProps<{
   serverId: string
@@ -186,6 +187,16 @@ const returnToRecentMessages = async () => {
   await markCurrentChannelRead(channelId.value);
 };
 
+let stopReloadAll: (() => void) | null = null;
+
+onMounted(() => {
+  stopReloadAll = onReloadAll(() => messageStore.fetchMessages(channelId.value));
+});
+
+onUnmounted(() => {
+  stopReloadAll?.();
+});
+
 // Only explicit initial loads and realtime messages received while at the
 // bottom request an automatic scroll. Pagination restores its own anchor.
 watch(messages, async () => {

frontend/src/pages/server/index.vue

@@ -2,7 +2,7 @@
 import {storeToRefs} from 'pinia'
 import {useChannelStore} from '@/stores/channel'
 import {useCategoryStore} from '@/stores/category'
-import {computed, ref, watch} from 'vue'
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
 import CreateChannelDialog from '@/components/channel/CreateChannelDialog.vue'
 import CreateCategoryDialog from '@/components/category/CreateCategoryDialog.vue'
@@ -12,6 +12,7 @@ import {useServerStore} from "@/stores/server.ts";
 import ChannelPermissionsDialog from '@/components/permissions/ChannelPermissionsDialog.vue'
 import {useAuthStore} from '@/stores/auth'
 import ServerSettingsDialog from '@/components/server/ServerSettingsDialog.vue'
+import {onReloadAll} from '@/plugins/events.ts'
 
 const props = defineProps<{
   serverId: string
@@ -48,6 +49,16 @@ const loadServerData = async (targetServerId: string) => {
   }
 }
 
+let stopReloadAll: (() => void) | null = null
+
+onMounted(() => {
+  stopReloadAll = onReloadAll(() => loadServerData(props.serverId))
+})
+
+onUnmounted(() => {
+  stopReloadAll?.()
+})
+
 watch(
   () => props.serverId,
   async (newServerId) => {

frontend/src/plugins/events.ts

@@ -1,5 +1,9 @@
 export const bus = new EventTarget();
 
+type ReloadAllHandler = () => void | Promise<void>;
+
+const reloadAllHandlers = new Set<ReloadAllHandler>();
+
 export function emitGatewayEvent(namespace: string, action: string, content: any) {
   // On construit le nom de l'événement de manière cohérente : gateway:message
   const eventName = `gateway:${namespace.toLowerCase()}`;
@@ -16,4 +20,21 @@ export function onGatewayEvent(namespace: string, callback: (payload: { action:
 
   // Retourne une fonction pour se désabonner facilement si besoin
   return () => bus.removeEventListener(eventName, wrapper);
-}
+}
+
+export function onReloadAll(handler: ReloadAllHandler) {
+  reloadAllHandlers.add(handler);
+  return () => reloadAllHandlers.delete(handler);
+}
+
+export async function emitReloadAll() {
+  const results = await Promise.allSettled(
+    Array.from(reloadAllHandlers, handler => Promise.resolve().then(handler)),
+  );
+
+  for (const result of results) {
+    if (result.status === 'rejected') {
+      console.error('Reload after WebSocket reconnection failed:', result.reason);
+    }
+  }
+}

frontend/src/stores/gateway.ts

@@ -1,6 +1,6 @@
 import {defineStore} from 'pinia';
 import {useAppStore} from "@/stores/app.ts";
-import {emitGatewayEvent} from "@/plugins/events.ts";
+import {emitGatewayEvent, emitReloadAll} from "@/plugins/events.ts";
 
 type GatewayStatus = 'disconnected' | 'connecting' | 'connected' | 'error'
 
@@ -10,6 +10,7 @@ export const useGatewayStore = defineStore('gateway', {
     status: 'disconnected' as GatewayStatus,
     reconnectAttempts: 0,
     shouldReconnect: false,
+    reloadOnConnect: false,
     reconnectTimer: null as number | null,
   }),
 
@@ -34,22 +35,31 @@ export const useGatewayStore = defineStore('gateway', {
       const socket = new WebSocket(wsUrl)
 
       socket.onopen = () => {
+        if (this.socket !== socket) return
+
+        const shouldReload = this.reloadOnConnect
         this.status = 'connected'
         this.reconnectAttempts = 0
+        this.reloadOnConnect = false
 
+        if (shouldReload) {
+          void emitReloadAll()
+        }
       }
 
       socket.onclose = () => {
+        if (this.socket !== socket) return
+
         this.status = 'disconnected'
-        if (this.socket === socket) {
-          this.socket = null
-        }
+        this.socket = null
         if (this.shouldReconnect) {
+          this.reloadOnConnect = true
           this.scheduleReconnect()
         }
       }
 
       socket.onerror = () => {
+        if (this.socket !== socket) return
         this.status = 'error'
       }
 
@@ -70,6 +80,7 @@ export const useGatewayStore = defineStore('gateway', {
       this.socket = null
       this.status = 'disconnected'
       this.reconnectAttempts = 0
+      this.reloadOnConnect = false
     },
 
     async send(payload: object) {
@@ -100,4 +111,4 @@ export const useGatewayStore = defineStore('gateway', {
       }, delay)
     },
   }
-});
+});

frontend/src/stores/session.ts

@@ -5,8 +5,10 @@ import {useServerStore} from '@/stores/server.ts'
 import {useCategoryStore} from '@/stores/category.ts'
 import {useChannelStore} from '@/stores/channel.ts'
 import {useMessageStore} from '@/stores/message.ts'
+import {onReloadAll} from '@/plugins/events.ts'
 
 let bootstrapPromise: Promise<void> | null = null
+let reloadServersPromise: Promise<void> | null = null
 
 export const useSessionStore = defineStore('session', {
   state: () => ({
@@ -77,6 +79,19 @@ export const useSessionStore = defineStore('session', {
       ])
     },
 
+    async reloadServers() {
+      if (reloadServersPromise) {
+        return reloadServersPromise
+      }
+
+      const serverStore = useServerStore()
+      reloadServersPromise = serverStore.fetchServers().finally(() => {
+        reloadServersPromise = null
+      })
+
+      return reloadServersPromise
+    },
+
     async login(username: string, password: string) {
       const authStore = useAuthStore()
 
@@ -93,4 +108,6 @@ export const useSessionStore = defineStore('session', {
       this.isReady = true
     },
   },
-})
+})
+
+onReloadAll(() => useSessionStore().reloadServers())