fix(announcements): guard against stale dismissal loads

Author: Programcode

src/components/layout/AppLayout.tsx

@@ -1,5 +1,5 @@
 // src/components/layout/AppLayout.tsx
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -51,6 +51,7 @@ export function AppLayout() {
   const [announcements, setAnnouncements] = useState<UserAnnouncement[]>([]);
   const [dismissingId, setDismissingId] = useState<string | null>(null);
   const [dismissError, setDismissError] = useState<{ announcementId: string; message: string } | null>(null);
+  const dismissedAnnouncementIds = useRef(new Set<string>());
   const { t } = useTranslation();
   const location = useLocation();
 
@@ -59,7 +60,11 @@ export function AppLayout() {
     const loadAnnouncements = async () => {
       try {
         const active = await listActiveAnnouncements(controller.signal);
-        if (!controller.signal.aborted) setAnnouncements(active);
+        if (!controller.signal.aborted) {
+          setAnnouncements(active.filter(
+            (announcement) => !dismissedAnnouncementIds.current.has(announcement.id),
+          ));
+        }
       } catch (error) {
         if (!controller.signal.aborted) {
           console.warn('[Announcements] Unable to load', error instanceof Error ? error.message : 'Unknown error');
@@ -77,6 +82,7 @@ export function AppLayout() {
       setDismissingId(announcementId);
       setDismissError(null);
       await dismissAnnouncement(announcementId);
+      dismissedAnnouncementIds.current.add(announcementId);
       setAnnouncements((current) => current.filter((announcement) => announcement.id !== announcementId));
     } catch (error) {
       setDismissError({

src/test/components/AppLayout.test.tsx

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { Link, MemoryRouter, Route, Routes } from 'react-router-dom';
 import { AppLayout } from '@/components/layout/AppLayout';
 import type { UserAnnouncement } from '@/lib/announcements';
@@ -95,6 +95,36 @@ describe('AppLayout announcements', () => {
     expect(screen.queryByText('Could not dismiss the old announcement')).not.toBeInTheDocument();
   });
 
+  it('does not restore a dismissed announcement from a stale route load', async () => {
+    let resolveDismissal: () => void = () => undefined;
+    let resolveStaleLoad: (announcements: UserAnnouncement[]) => void = () => undefined;
+    const pendingDismissal = new Promise<void>((resolve) => {
+      resolveDismissal = resolve;
+    });
+    const staleLoad = new Promise<UserAnnouncement[]>((resolve) => {
+      resolveStaleLoad = resolve;
+    });
+    mockListActiveAnnouncements
+      .mockResolvedValueOnce([announcement])
+      .mockReturnValueOnce(staleLoad);
+    mockDismissAnnouncement.mockReturnValue(pendingDismissal);
+
+    renderLayout();
+    await screen.findByText('Scheduled maintenance');
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss announcement: Scheduled maintenance' }));
+    fireEvent.click(screen.getByRole('link', { name: 'Open next page' }));
+    await waitFor(() => expect(mockListActiveAnnouncements).toHaveBeenCalledTimes(2));
+
+    resolveDismissal();
+    await waitFor(() => expect(screen.queryByText('Scheduled maintenance')).not.toBeInTheDocument());
+    await act(async () => {
+      resolveStaleLoad([announcement]);
+      await staleLoad;
+    });
+
+    expect(screen.queryByText('Scheduled maintenance')).not.toBeInTheDocument();
+  });
+
   it('keeps the app usable when announcements fail to load', async () => {
     mockListActiveAnnouncements.mockRejectedValue(new Error('Network unavailable'));
     renderLayout();