feat: add What's new feature

Dashboard dialog shows unseen news entries. Users mark them seen with "Got it"
or revisit via the /whats-new page. Admins publish, edit, and delete entries
on /admin/news. Full i18n support and test coverage included.

src/App.jsx

@@ -9,6 +9,8 @@ import Dashboard from "./pages/Dashboard.jsx";
 import RegistrationPage from './pages/RegistrationPage.jsx';
 import SettingsPage from './pages/SettingsPage.jsx';
 import AdminHintsPage from './pages/AdminHintsPage.jsx';
+import AdminNewsPage from './pages/AdminNewsPage.jsx';
+import WhatsNewPage from './pages/WhatsNewPage.jsx';
 import AdminUsersPage from './pages/AdminUsersPage.jsx';
 import GameLibrary from './pages/GameLibrary.jsx';
 import GameDetail from './pages/GameDetail.jsx';
@@ -71,8 +73,10 @@ function App() {
                             <Route path="/stats" element={<StatsPage/>}/>
                             <Route path="/import" element={<ImportPage/>}/>
                             <Route path="/settings" element={<SettingsPage/>}/>
+                            <Route path="/whats-new" element={<WhatsNewPage/>}/>
                             <Route path="/admin/users" element={<AdminUsersPage/>}/>
                             <Route path="/admin/hints" element={<AdminHintsPage/>}/>
+                            <Route path="/admin/news" element={<AdminNewsPage/>}/>
                         </Route>
                         <Route path="/u/:name" element={<PublicProfilePage/>}/>
                         <Route path="/impressum" element={<ImprintPage/>}/>

src/components/AppHeader.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import {Link, NavLink, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {ChartColumn, Dices, Eye, Languages, LayoutDashboard, Library, LogOut, Megaphone, Moon, Settings, Shield, Sun} from 'lucide-react';
+import {ChartColumn, Dices, Eye, Languages, LayoutDashboard, Library, LogOut, Megaphone, Moon, Newspaper, Settings, Shield, Sun} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {Badge} from '@/components/ui/badge';
@@ -144,6 +144,9 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                                 <DropdownMenuItem asChild>
                                     <Link to="/settings"><Settings/>{t('NAV.SETTINGS')}</Link>
                                 </DropdownMenuItem>
+                                <DropdownMenuItem asChild>
+                                    <Link to="/whats-new"><Newspaper/>{t('NAV.WHATS_NEW')}</Link>
+                                </DropdownMenuItem>
                                 {seesAdminPage && (
                                     <>
                                         <DropdownMenuItem asChild>
@@ -155,6 +158,9 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                                         <DropdownMenuItem asChild>
                                             <Link to="/admin/hints"><Megaphone/>{t('NAV.ADMIN_HINTS')}</Link>
                                         </DropdownMenuItem>
+                                        <DropdownMenuItem asChild>
+                                            <Link to="/admin/news"><Newspaper/>{t('NAV.ADMIN_NEWS')}</Link>
+                                        </DropdownMenuItem>
                                     </>
                                 )}
                                 {isAdmin && (

src/components/AppHeader.test.jsx

@@ -54,6 +54,7 @@ describe('AppHeader', () => {
         openMenu();
 
         expect(await screen.findByText('NAV.ADMIN')).toBeTruthy();
+        expect(screen.getByText('NAV.ADMIN_NEWS')).toBeTruthy();
         expect(screen.getByText('NAV.VIEW_AS.MENU')).toBeTruthy();
         expect(screen.queryByText('NAV.VIEW_AS.BADGE')).toBeNull();
         expect(screen.queryByLabelText('NAV.PENDING_REQUESTS:0')).toBeNull();
@@ -92,7 +93,9 @@ describe('AppHeader', () => {
         openMenu();
 
         expect(await screen.findByText('NAV.SETTINGS')).toBeTruthy();
+        expect(screen.getByText('NAV.WHATS_NEW')).toBeTruthy();
         expect(screen.queryByText('NAV.ADMIN')).toBeNull();
+        expect(screen.queryByText('NAV.ADMIN_NEWS')).toBeNull();
         expect(screen.queryByText('NAV.VIEW_AS.MENU')).toBeNull();
     });
 });

src/components/NewsEntry.jsx

@@ -0,0 +1,17 @@
+import {useTranslation} from 'react-i18next';
+
+import {cn} from '@/lib/utils';
+import {formatDate} from '../utils/format.js';
+import {newsText, newsTitle} from '../utils/news.js';
+
+export default function NewsEntry({entry, className}) {
+    const {i18n} = useTranslation();
+
+    return (
+        <article className={cn('space-y-1', className)}>
+            <p className="text-xs text-muted-foreground">{formatDate(entry.publishedAt, i18n.language, {dateStyle: 'medium'})}</p>
+            <h3 className="font-semibold">{newsTitle(entry, i18n.language)}</h3>
+            <p className="whitespace-pre-line break-words text-sm">{newsText(entry, i18n.language)}</p>
+        </article>
+    );
+}

src/components/WhatsNewDialog.jsx

@@ -0,0 +1,56 @@
+import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog';
+import NewsEntry from './NewsEntry.jsx';
+import {fetchNews, markNewsSeen} from '../utils/news.js';
+
+/**
+ * The news entries the user has not seen, newest first. Only "Got it" marks them seen: closing the dialog any other
+ * way shows them again on the next dashboard visit.
+ */
+export default function WhatsNewDialog() {
+    const {t} = useTranslation();
+    const [unseen, setUnseen] = useState([]);
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        // A failed load shows nothing, not an error.
+        fetchNews()
+            .then((response) => (response.ok ? response.json() : null))
+            .then((data) => {
+                const entries = (data?.results ?? []).filter((entry) => !entry.seen);
+                setUnseen(entries);
+                setOpen(entries.length > 0);
+            })
+            .catch(() => undefined);
+    }, []);
+
+    const gotIt = async () => {
+        setOpen(false);
+        try {
+            const response = await markNewsSeen();
+            if (!response.ok) toast.error(t('NEWS.SAVE_FAILED'));
+        } catch {
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent className="max-h-[90vh] overflow-y-auto" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>{t('NEWS.TITLE')}</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4">
+                    {unseen.map((entry) => <NewsEntry key={entry.id} entry={entry}/>)}
+                </div>
+                <DialogFooter>
+                    <Button onClick={gotIt}>{t('NEWS.GOT_IT')}</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

src/components/WhatsNewDialog.test.jsx

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {act, cleanup, fireEvent, render, screen} from '@testing-library/react';
+import {toast} from 'sonner';
+import WhatsNewDialog from './WhatsNewDialog.jsx';
+import {newsText, newsTitle} from '../utils/news.js';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {error: vi.fn()}}));
+
+const NEW = {id: 2, titleEn: 'New feature', titleDe: 'Neue Funktion', textEn: 'English text', textDe: 'Deutscher Text',
+    publishedAt: '2026-10-01T10:00:00Z', seen: false};
+const ENGLISH_ONLY = {...NEW, id: 3, titleEn: 'English only', titleDe: null, textEn: 'Only English', textDe: null};
+const OLD = {...NEW, id: 1, titleEn: 'Old', titleDe: 'Alt', seen: true};
+
+const newsRoutes = (list, seen = json(204)) => fetchRoutes({'GET /api/news': list, 'PUT /api/news/seen': seen});
+const putCalls = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PUT');
+
+const showNews = async (...entries) => {
+    newsRoutes(json(200, {results: entries}));
+    render(<WhatsNewDialog/>);
+    await act(async () => undefined);
+};
+
+describe('WhatsNewDialog', () => {
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('shows only the unseen entries, German when set and English otherwise', async () => {
+        await showNews(NEW, ENGLISH_ONLY, OLD);
+
+        expect(screen.getByRole('dialog')).toBeTruthy();
+        expect(screen.getByText('Neue Funktion')).toBeTruthy();
+        expect(screen.getByText('Deutscher Text')).toBeTruthy();
+        expect(screen.getByText('English only')).toBeTruthy();
+        expect(screen.getByText('Only English')).toBeTruthy();
+        expect(screen.queryByText('Alt')).toBeNull();
+    });
+
+    it('marks the entries seen and closes on "Got it"', async () => {
+        await showNews(NEW);
+
+        fireEvent.click(screen.getByText('NEWS.GOT_IT'));
+        await act(async () => undefined);
+
+        expect(putCalls().map(([url]) => url)).toEqual([expect.stringContaining('/api/news/seen')]);
+        expect(screen.queryByRole('dialog')).toBeNull();
+    });
+
+    it('closes with X without marking anything seen', async () => {
+        await showNews(NEW);
+
+        fireEvent.click(screen.getByRole('button', {name: 'Close'}));
+
+        expect(screen.queryByRole('dialog')).toBeNull();
+        expect(putCalls()).toEqual([]);
+    });
+
+    it.each([
+        ['all entries are seen', json(200, {results: [OLD]})],
+        ['there are no entries', json(200, {results: []})],
+        ['the load fails', json(500, {})],
+    ])('shows nothing when %s', async (_, answer) => {
+        newsRoutes(answer);
+        render(<WhatsNewDialog/>);
+        await act(async () => undefined);
+
+        expect(screen.queryByRole('dialog')).toBeNull();
+        expect(toast.error).not.toHaveBeenCalled();
+    });
+
+    it('shows an error when the seen mark is not saved', async () => {
+        newsRoutes(json(200, {results: [NEW]}), json(500, {}));
+        render(<WhatsNewDialog/>);
+        await act(async () => undefined);
+
+        fireEvent.click(screen.getByText('NEWS.GOT_IT'));
+        await act(async () => undefined);
+
+        expect(toast.error).toHaveBeenCalledWith('NEWS.SAVE_FAILED');
+    });
+});
+
+describe('newsTitle / newsText', () => {
+    it('pick German only for a German UI and a set German field', () => {
+        expect(newsTitle(NEW, 'de-DE')).toBe('Neue Funktion');
+        expect(newsText(NEW, 'de')).toBe('Deutscher Text');
+        expect(newsTitle(NEW, 'en')).toBe('New feature');
+        expect(newsText(ENGLISH_ONLY, 'de')).toBe('Only English');
+        expect(newsTitle(ENGLISH_ONLY, undefined)).toBe('English only');
+    });
+});

src/pages/AdminNewsPage.jsx

@@ -0,0 +1,184 @@
+import {useCallback, useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Loader2, Pencil, Send, Trash2} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Textarea} from '@/components/ui/textarea';
+import NewsEntry from '../components/NewsEntry.jsx';
+import PageContainer from '../components/PageContainer.jsx';
+import {MAX_NEWS_TEXT_LENGTH, MAX_NEWS_TITLE_LENGTH} from '../utils/limits.js';
+import {createNews, deleteNews, fetchAdminNews, updateNews} from '../utils/news.js';
+
+const emptyForm = () => ({titleEn: '', titleDe: '', textEn: '', textDe: ''});
+
+/**
+ * PLATFORM_ADMIN only: publish, preview, edit and delete the "What's new" entries. Auth checks the role.
+ */
+export default function AdminNewsPage() {
+    const {t} = useTranslation();
+    const [entries, setEntries] = useState([]);
+    const [status, setStatus] = useState('loading');
+    const [form, setForm] = useState(emptyForm);
+    const [editing, setEditing] = useState(null);
+    const [busy, setBusy] = useState(false);
+
+    const load = useCallback(async () => {
+        try {
+            const response = await fetchAdminNews();
+            if (response.status === 401) return;
+            if (response.status === 403) {
+                setStatus('forbidden');
+                return;
+            }
+            if (!response.ok) {
+                setStatus('error');
+                return;
+            }
+            setEntries((await response.json()).results);
+            setStatus('ready');
+        } catch (err) {
+            console.error('Admin news error:', err);
+            setStatus('error');
+        }
+    }, []);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    const run = async (request, doneKey, onOk) => {
+        setBusy(true);
+        try {
+            const response = await request();
+            if (response.status === 401) return;
+            if (response.ok) {
+                toast.success(t(doneKey));
+                onOk?.();
+                await load();
+            } else {
+                toast.error(t('ADMIN_NEWS.ERROR'));
+            }
+        } catch (err) {
+            console.error('Admin news action error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const trimmed = () => ({
+        titleEn: form.titleEn.trim(),
+        titleDe: form.titleDe.trim(),
+        textEn: form.textEn.trim(),
+        textDe: form.textDe.trim(),
+    });
+
+    const reset = () => {
+        setForm(emptyForm());
+        setEditing(null);
+    };
+
+    const submit = (event) => {
+        event.preventDefault();
+        const news = trimmed();
+        if (editing == null) run(() => createNews(news), 'ADMIN_NEWS.CREATED', reset);
+        else run(() => updateNews(editing, news), 'ADMIN_NEWS.UPDATED', reset);
+    };
+
+    const edit = (entry) => {
+        setEditing(entry.id);
+        setForm({titleEn: entry.titleEn, titleDe: entry.titleDe ?? '', textEn: entry.textEn, textDe: entry.textDe ?? ''});
+    };
+
+    const remove = (entry) => {
+        if (!window.confirm(t('ADMIN_NEWS.CONFIRM_DELETE'))) return;
+        run(() => deleteNews(entry.id), 'ADMIN_NEWS.DELETED', () => editing === entry.id && reset());
+    };
+
+    const change = (field) => (event) => setForm({...form, [field]: event.target.value});
+
+    if (status === 'forbidden') {
+        return (
+            <PageContainer className="px-4 py-6 md:px-8">
+                <p className="text-sm text-muted-foreground">{t('ADMIN_NEWS.NO_ACCESS')}</p>
+            </PageContainer>
+        );
+    }
+
+    return (
+        <PageContainer className="space-y-4 px-4 py-6 md:px-8">
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t(editing == null ? 'ADMIN_NEWS.NEW' : 'ADMIN_NEWS.EDIT')}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <form onSubmit={submit} className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="newsTitleEn">{t('ADMIN_NEWS.TITLE_EN')}</Label>
+                            <Input id="newsTitleEn" required maxLength={MAX_NEWS_TITLE_LENGTH} value={form.titleEn} onChange={change('titleEn')}/>
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="newsTextEn">{t('ADMIN_NEWS.TEXT_EN')}</Label>
+                            <Textarea id="newsTextEn" required maxLength={MAX_NEWS_TEXT_LENGTH} value={form.textEn} onChange={change('textEn')}/>
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="newsTitleDe">{t('ADMIN_NEWS.TITLE_DE')}</Label>
+                            <Input id="newsTitleDe" maxLength={MAX_NEWS_TITLE_LENGTH} value={form.titleDe} onChange={change('titleDe')}/>
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="newsTextDe">{t('ADMIN_NEWS.TEXT_DE')}</Label>
+                            <Textarea id="newsTextDe" maxLength={MAX_NEWS_TEXT_LENGTH} value={form.textDe} onChange={change('textDe')}/>
+                            <p className="text-xs text-muted-foreground">{t('ADMIN_NEWS.TEXT_HELP')}</p>
+                        </div>
+                        {form.titleEn.trim() && form.textEn.trim() && (
+                            <div className="space-y-2">
+                                <p className="text-sm font-medium">{t('ADMIN_NEWS.PREVIEW')}</p>
+                                <NewsEntry entry={{...trimmed(), publishedAt: new Date().toISOString()}}
+                                           className="max-w-md rounded-lg border p-4"/>
+                            </div>
+                        )}
+                        <div className="flex gap-2">
+                            <Button type="submit" disabled={busy}>
+                                {busy ? <Loader2 className="animate-spin"/> : <Send/>}
+                                {t(editing == null ? 'ADMIN_NEWS.CREATE' : 'ADMIN_NEWS.SAVE')}
+                            </Button>
+                            {editing != null && (
+                                <Button type="button" variant="outline" onClick={reset}>{t('ADMIN_NEWS.CANCEL')}</Button>
+                            )}
+                        </div>
+                    </form>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('ADMIN_NEWS.LIST')}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    {status === 'loading' && <Loader2 className="size-5 animate-spin text-muted-foreground"/>}
+                    {status === 'error' && <p className="text-sm text-destructive">{t('ADMIN_NEWS.LOAD_ERROR')}</p>}
+                    {status === 'ready' && entries.length === 0 && <p className="text-sm text-muted-foreground">{t('ADMIN_NEWS.EMPTY')}</p>}
+                    {status === 'ready' && entries.length > 0 && (
+                        <ul className="divide-y">
+                            {entries.map((entry) => (
+                                <li key={entry.id} className="flex flex-wrap items-start gap-3 py-3">
+                                    <NewsEntry entry={entry} className="min-w-0 flex-1"/>
+                                    <Button type="button" variant="outline" size="sm" disabled={busy} onClick={() => edit(entry)}>
+                                        <Pencil/>{t('ADMIN_NEWS.EDIT_ACTION')}
+                                    </Button>
+                                    <Button type="button" variant="outline" size="sm" disabled={busy} onClick={() => remove(entry)}>
+                                        <Trash2/>{t('ADMIN_NEWS.DELETE')}
+                                    </Button>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </CardContent>
+            </Card>
+        </PageContainer>
+    );
+}

src/pages/AdminNewsPage.test.jsx

@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import {toast} from 'sonner';
+import AdminNewsPage from './AdminNewsPage.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const FIRST = {id: 2, titleEn: 'New feature', titleDe: null, textEn: 'It is here', textDe: null,
+    publishedAt: '2026-10-01T10:00:00Z', createdBy: 1, createdAt: '2026-10-01T10:00:00Z'};
+const SECOND = {...FIRST, id: 1, titleEn: 'Old feature', titleDe: 'Alte Funktion', textDe: 'Alter Text'};
+
+const withRoutes = (routes) => fetchRoutes({
+    'GET /api/admin/news': json(200, {results: [FIRST, SECOND]}),
+    'POST /api/admin/news': json(201, {id: 3}),
+    'PUT /api/admin/news/2': json(204),
+    'DELETE /api/admin/news/2': json(204),
+    ...routes,
+});
+const calls = (method) => fetch.mock.calls.filter(([, init]) => (init?.method ?? 'GET') === method);
+
+const renderPage = () => render(<MemoryRouter><PreferencesProvider><AdminNewsPage/></PreferencesProvider></MemoryRouter>);
+
+describe('AdminNewsPage', () => {
+    beforeEach(() => {
+        localStorage.setItem('tbp_session', '1');
+        withRoutes({});
+    });
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+        vi.restoreAllMocks();
+        vi.clearAllMocks();
+    });
+
+    it('lists the entries', async () => {
+        renderPage();
+
+        expect(await screen.findByText('New feature')).toBeTruthy();
+        expect(screen.getByText('Alte Funktion')).toBeTruthy();
+    });
+
+    it('publishes a trimmed entry, shows a preview and resets the form', async () => {
+        renderPage();
+        await screen.findByText('New feature');
+
+        fireEvent.change(screen.getByLabelText('ADMIN_NEWS.TITLE_EN'), {target: {value: ' Big news '}});
+        fireEvent.change(screen.getByLabelText('ADMIN_NEWS.TEXT_EN'), {target: {value: ' Line one\nline two '}});
+        fireEvent.change(screen.getByLabelText('ADMIN_NEWS.TITLE_DE'), {target: {value: '   '}});
+        expect(screen.getByText('ADMIN_NEWS.PREVIEW')).toBeTruthy();
+        expect(screen.getByText('Big news')).toBeTruthy();
+        fireEvent.click(screen.getByText('ADMIN_NEWS.CREATE'));
+
+        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('ADMIN_NEWS.CREATED'));
+        expect(JSON.parse(calls('POST')[0][1].body)).toEqual(
+            {titleEn: 'Big news', titleDe: '', textEn: 'Line one\nline two', textDe: ''});
+        expect(screen.getByLabelText('ADMIN_NEWS.TITLE_EN').value).toBe('');
+    });
+
+    it('edits an entry and resets the form', async () => {
+        renderPage();
+        await screen.findByText('New feature');
+
+        fireEvent.click(screen.getAllByText('ADMIN_NEWS.EDIT_ACTION')[0]);
+        expect(screen.getByLabelText('ADMIN_NEWS.TITLE_EN').value).toBe('New feature');
+        fireEvent.change(screen.getByLabelText('ADMIN_NEWS.TITLE_EN'), {target: {value: 'Changed'}});
+        fireEvent.click(screen.getByText('ADMIN_NEWS.SAVE'));
+
+        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('ADMIN_NEWS.UPDATED'));
+        expect(calls('PUT')[0][0]).toContain('/api/admin/news/2');
+        expect(JSON.parse(calls('PUT')[0][1].body)).toMatchObject({titleEn: 'Changed', textEn: 'It is here'});
+        expect(screen.getByLabelText('ADMIN_NEWS.TITLE_EN').value).toBe('');
+    });
+
+    it('deletes after a confirmation', async () => {
+        vi.spyOn(window, 'confirm').mockReturnValue(true);
+        renderPage();
+        await screen.findByText('New feature');
+
+        fireEvent.click(screen.getAllByText('ADMIN_NEWS.DELETE')[0]);
+
+        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('ADMIN_NEWS.DELETED'));
+        expect(calls('DELETE')[0][0]).toContain('/api/admin/news/2');
+    });
+
+    it('deletes nothing when the confirmation is refused', async () => {
+        vi.spyOn(window, 'confirm').mockReturnValue(false);
+        renderPage();
+        await screen.findByText('New feature');
+
+        fireEvent.click(screen.getAllByText('ADMIN_NEWS.DELETE')[0]);
+
+        expect(calls('DELETE')).toEqual([]);
+    });
+
+    it('shows "no access" to a non-admin', async () => {
+        withRoutes({'GET /api/admin/news': json(403, {})});
+        renderPage();
+
+        expect(await screen.findByText('ADMIN_NEWS.NO_ACCESS')).toBeTruthy();
+        expect(screen.queryByText('ADMIN_NEWS.CREATE')).toBeNull();
+    });
+});

src/pages/Dashboard.jsx

@@ -14,6 +14,7 @@ import DashboardWelcomeCard from '../components/DashboardWelcomeCard.jsx';
 import MostPlayedCard from '../components/MostPlayedCard.jsx';
 import PileOfShameCard from '../components/PileOfShameCard.jsx';
 import SteamGameCount from '../components/SteamGameCount';
+import WhatsNewDialog from '../components/WhatsNewDialog.jsx';
 import useDashboardData from '../hooks/useDashboardData.js';
 import useLibrarySync from '../hooks/useLibrarySync.js';
 import useForceSync from '../hooks/useForceSync.js';
@@ -130,6 +131,7 @@ const Dashboard = () => {
 
             <TileGrid tiles={DASHBOARD_TILES} titles={DASHBOARD_TITLES} layout={layout} renderTile={renderTile} editing={editing}
                       defaultLayout={DEFAULT_DASHBOARD} onSave={saveLayout} onCancel={() => setEditing(false)}/>
+            <WhatsNewDialog/>
             {/* Last child: space-y gives every other child a bottom margin, which would move the fixed card. */}
             <DashboardHint/>
         </PageContainer>

src/pages/Dashboard.test.jsx

@@ -16,6 +16,7 @@ const mostPlayed = (url) => url.includes('sort=playtimeMinutes') && !url.include
 const quietRoutes = {
     'GET /api/library/summary': json(200, empty),
     'GET /api/hints': json(200, {results: []}),
+    'GET /api/news': json(200, {results: []}),
 };
 
 // Every request of the page with a Steam ID; the test of the 401 answers all but the user with 401.

src/pages/WhatsNewPage.jsx

@@ -0,0 +1,57 @@
+import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Loader2} from 'lucide-react';
+
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import NewsEntry from '../components/NewsEntry.jsx';
+import PageContainer from '../components/PageContainer.jsx';
+import {fetchNews, markNewsSeen} from '../utils/news.js';
+
+/**
+ * Every news entry, newest first. Opening the page marks them seen.
+ */
+export default function WhatsNewPage() {
+    const {t} = useTranslation();
+    const [entries, setEntries] = useState([]);
+    const [status, setStatus] = useState('loading');
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const response = await fetchNews();
+                if (response.status === 401) return;
+                if (!response.ok) {
+                    setStatus('error');
+                    return;
+                }
+                setEntries((await response.json()).results);
+                setStatus('ready');
+                // A failed mark is silent: the dashboard dialog shows the entries again.
+                markNewsSeen().catch(() => undefined);
+            } catch (err) {
+                console.error('News error:', err);
+                setStatus('error');
+            }
+        })();
+    }, []);
+
+    return (
+        <PageContainer className="space-y-4 px-4 py-6 md:px-8">
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('NEWS.TITLE')}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    {status === 'loading' && <Loader2 className="size-5 animate-spin text-muted-foreground"/>}
+                    {status === 'error' && <p className="text-sm text-destructive">{t('NEWS.LOAD_ERROR')}</p>}
+                    {status === 'ready' && entries.length === 0 && <p className="text-sm text-muted-foreground">{t('NEWS.EMPTY')}</p>}
+                    {status === 'ready' && entries.length > 0 && (
+                        <ul className="divide-y">
+                            {entries.map((entry) => <li key={entry.id} className="py-3"><NewsEntry entry={entry}/></li>)}
+                        </ul>
+                    )}
+                </CardContent>
+            </Card>
+        </PageContainer>
+    );
+}

src/pages/WhatsNewPage.test.jsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, screen} from '@testing-library/react';
+import WhatsNewPage from './WhatsNewPage.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+const entry = (id, title) => ({id, titleEn: title, titleDe: null, textEn: `${title} text`, textDe: null,
+    publishedAt: '2026-10-01T10:00:00Z', seen: false});
+const putCalls = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PUT');
+
+describe('WhatsNewPage', () => {
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('lists the entries in the given order and marks them seen once', async () => {
+        fetchRoutes({'GET /api/news': json(200, {results: [entry(2, 'Second'), entry(1, 'First')]}),
+            'PUT /api/news/seen': json(204)});
+        renderWithProviders(<WhatsNewPage/>);
+
+        await screen.findByText('Second');
+
+        expect(screen.getAllByRole('heading', {level: 3}).map((heading) => heading.textContent)).toEqual(['Second', 'First']);
+        expect(putCalls()).toHaveLength(1);
+    });
+
+    it('says so when there are no entries', async () => {
+        fetchRoutes({'GET /api/news': json(200, {results: []}), 'PUT /api/news/seen': json(204)});
+        renderWithProviders(<WhatsNewPage/>);
+
+        expect(await screen.findByText('NEWS.EMPTY')).toBeTruthy();
+    });
+
+    it('shows an error and marks nothing when the load fails', async () => {
+        fetchRoutes({'GET /api/news': json(500, {})});
+        renderWithProviders(<WhatsNewPage/>);
+
+        expect(await screen.findByText('NEWS.LOAD_ERROR')).toBeTruthy();
+        expect(putCalls()).toEqual([]);
+    });
+});

src/utils/limits.js

@@ -30,3 +30,6 @@ export const MAX_CORRECTION_GENRES = 10;
 export const MAX_DISPLAY_NAME_LENGTH = 24;
 // Auth CreateHintRequest @Size(max = 500)
 export const MAX_HINT_LENGTH = 500;
+// Auth NewsRequest @Size(max = 100) and @Size(max = 2000)
+export const MAX_NEWS_TITLE_LENGTH = 100;
+export const MAX_NEWS_TEXT_LENGTH = 2000;

src/utils/news.js

@@ -0,0 +1,39 @@
+import {apiFetch} from './api.js';
+
+const AUTH = () => import.meta.env.VITE_API_URL;
+const JSON_HEADERS = {'Content-Type': 'application/json'};
+
+/**
+ * GET /api/news: {results: [{id, titleEn, titleDe, textEn, textDe, publishedAt, seen}]}, every entry, newest first.
+ */
+export const fetchNews = () => apiFetch(`${AUTH()}/api/news`);
+
+/**
+ * All entries published until now count as seen for this user.
+ */
+export const markNewsSeen = () => apiFetch(`${AUTH()}/api/news/seen`, {method: 'PUT'});
+
+/**
+ * PLATFORM_ADMIN only (403 otherwise): {results: [...]}, every entry with createdBy and createdAt, newest first.
+ */
+export const fetchAdminNews = () => apiFetch(`${AUTH()}/api/admin/news`);
+
+/**
+ * 201 {id}, or 400 for a blank English title or text, or a title over 100 or a text over 2000 characters.
+ */
+export const createNews = (news) =>
+    apiFetch(`${AUTH()}/api/admin/news`, {method: 'POST', headers: JSON_HEADERS, body: JSON.stringify(news)});
+
+/**
+ * 204, 404 for an unknown id. The published date stays.
+ */
+export const updateNews = (newsId, news) =>
+    apiFetch(`${AUTH()}/api/admin/news/${newsId}`, {method: 'PUT', headers: JSON_HEADERS, body: JSON.stringify(news)});
+
+export const deleteNews = (newsId) => apiFetch(`${AUTH()}/api/admin/news/${newsId}`, {method: 'DELETE'});
+
+const pick = (de, en, language) => (language?.startsWith('de') && de ? de : en);
+
+export const newsTitle = (entry, language) => pick(entry.titleDe, entry.titleEn, language);
+
+export const newsText = (entry, language) => pick(entry.textDe, entry.textEn, language);