feat(points): balance, history and shop page

Add /points page with wallet balance, shop grouped by slot and ledger
history with game names. The wallet loads once in PreferencesContext after
login, so the header shows a balance chip and the link. Premium accents
gold and teal override the free accent while equipped. German and English.

src/pages/PointsPage.test.jsx

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, screen, waitFor, within} from '@testing-library/react';
+import {toast} from 'sonner';
+import PointsPage from './PointsPage.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+import {usePreferences} from '../context/PreferencesContext.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const wallet = (extra = {}) => ({
+    balance: 160,
+    catalog: [
+        {code: 'BORDER_GOLD', slot: 'AVATAR_BORDER', price: 150},
+        {code: 'BORDER_NEON', slot: 'AVATAR_BORDER', price: 200},
+        {code: 'BADGE_PILE_SLAYER', slot: 'BADGE', price: 100},
+    ],
+    owned: ['BADGE_PILE_SLAYER'],
+    equipped: {},
+    history: [
+        {kind: 'FINISHED', ref: '620', gameName: 'Portal 2', points: 50, eventAt: '2026-09-30T10:00:00Z'},
+        {kind: 'MONTH', ref: '2026-09', gameName: null, points: 40, eventAt: '2026-09-30T10:00:00Z'},
+    ],
+    ...extra,
+});
+
+// Loads the wallet like App does after the login, then shows the page.
+function Loaded() {
+    const {syncPreferences} = usePreferences();
+    return <button onClick={syncPreferences}>load</button>;
+}
+
+const renderPage = async (routes = {}) => {
+    fetchRoutes({'GET /api/users/me': json(200, {}), 'GET /api/rewards/wallet': json(200, wallet()), ...routes});
+    renderWithProviders(<><Loaded/><PointsPage/></>, {entries: ['/points']});
+    fireEvent.click(screen.getByText('load'));
+    await screen.findByText('POINTS.SHOP');
+};
+
+beforeEach(() => localStorage.setItem('tbp_session', '1'));
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.clearAllMocks();
+});
+
+describe('PointsPage', () => {
+    it('groups the catalog by slot and disables Buy below the price', async () => {
+        await renderPage();
+
+        const border = screen.getByText('POINTS.SLOTS.AVATAR_BORDER').closest('[data-slot="card"]');
+        const gold = within(border).getByText('POINTS.ITEMS.BORDER_GOLD').closest('li');
+        const neon = within(border).getByText('POINTS.ITEMS.BORDER_NEON').closest('li');
+        expect(within(gold).getByRole('button', {name: 'POINTS.BUY'}).disabled).toBe(false);
+        expect(within(neon).getByRole('button', {name: 'POINTS.BUY'}).disabled).toBe(true);
+        expect(within(screen.getByText('POINTS.SLOTS.BADGE').closest('[data-slot="card"]'))
+            .getByRole('button', {name: 'POINTS.EQUIP'})).toBeTruthy();
+    });
+
+    it('shows the game name as a link and the ref for month rows', async () => {
+        await renderPage();
+
+        expect(screen.getByRole('link', {name: 'Portal 2'}).getAttribute('href')).toBe('/library/620');
+        expect(screen.getByText(/2026-09/)).toBeTruthy();
+        expect(screen.getByText('+50')).toBeTruthy();
+    });
+
+    it('buys, then loads the wallet again', async () => {
+        let balance = 160;
+        const mock = await renderPageWith(() => json(200, wallet({balance})), {
+            'POST /api/rewards/purchases': () => { balance = 10; return json(200, wallet({balance})); },
+        });
+
+        fireEvent.click(within(screen.getByText('POINTS.ITEMS.BORDER_GOLD').closest('li')).getByRole('button', {name: 'POINTS.BUY'}));
+
+        await waitFor(() => expect(screen.getByText('10')).toBeTruthy());
+        const post = mock.mock.calls.find(([, init]) => init?.method === 'POST');
+        expect(JSON.parse(post[1].body)).toEqual({item: 'BORDER_GOLD'});
+    });
+
+    it('shows the not-enough message on a 409', async () => {
+        await renderPage({'POST /api/rewards/purchases': json(409, {code: 'NOT_ENOUGH_POINTS'})});
+
+        fireEvent.click(within(screen.getByText('POINTS.ITEMS.BORDER_GOLD').closest('li')).getByRole('button', {name: 'POINTS.BUY'}));
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('POINTS.ERROR_NOT_ENOUGH'));
+    });
+
+    it('an ALREADY_OWNED 409 reloads the wallet without the not-enough message', async () => {
+        const mock = await renderPageWith(json(200, wallet()), {'POST /api/rewards/purchases': json(409, {code: 'ALREADY_OWNED'})});
+
+        fireEvent.click(within(screen.getByText('POINTS.ITEMS.BORDER_GOLD').closest('li')).getByRole('button', {name: 'POINTS.BUY'}));
+
+        await waitFor(() => expect(mock.mock.calls.some(([, init]) => init?.method === 'POST')).toBe(true));
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(toast.error).not.toHaveBeenCalledWith('POINTS.ERROR_NOT_ENOUGH');
+    });
+
+    it('sends the equip and unequip PUT', async () => {
+        const puts = [];
+        await renderPage({'PUT /api/rewards/equipped/BADGE': (url, init) => { puts.push(JSON.parse(init.body)); return json(200, wallet()); }});
+
+        fireEvent.click(screen.getByRole('button', {name: 'POINTS.EQUIP'}));
+        await waitFor(() => expect(puts).toEqual([{item: 'BADGE_PILE_SLAYER'}]));
+    });
+
+    it('sends null to take a worn look off', async () => {
+        const puts = [];
+        await renderPage({
+            'GET /api/rewards/wallet': json(200, wallet({equipped: {BADGE: 'BADGE_PILE_SLAYER'}})),
+            'PUT /api/rewards/equipped/BADGE': (url, init) => { puts.push(JSON.parse(init.body)); return json(200, wallet()); },
+        });
+
+        fireEvent.click(screen.getByRole('button', {name: 'POINTS.UNEQUIP'}));
+        await waitFor(() => expect(puts).toEqual([{item: null}]));
+    });
+});
+
+// A wallet answer that changes between calls.
+async function renderPageWith(walletAnswer, routes) {
+    const mock = fetchRoutes({'GET /api/users/me': json(200, {}), 'GET /api/rewards/wallet': walletAnswer, ...routes});
+    renderWithProviders(<><Loaded/><PointsPage/></>, {entries: ['/points']});
+    fireEvent.click(screen.getByText('load'));
+    await screen.findByText('POINTS.SHOP');
+    return mock;
+}