feat(appearance): accent color, corners, wide layout and game art background

src/pages/GameDetail.test.jsx

@@ -3,6 +3,7 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
 import {MemoryRouter, Route, Routes} from 'react-router-dom';
 import GameDetail from './GameDetail.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
@@ -13,9 +14,9 @@ const game = {
 };
 
 const renderDetail = () => render(
-    <MemoryRouter initialEntries={['/library/220']}>
+    <MemoryRouter initialEntries={['/library/220']}><PreferencesProvider>
         <Routes><Route path="/library/:appid" element={<GameDetail/>}/></Routes>
-    </MemoryRouter>,
+    </PreferencesProvider></MemoryRouter>,
 );
 
 beforeEach(() => {
@@ -41,4 +42,18 @@ describe('GameDetail', () => {
         await waitFor(() => expect(screen.queryByRole('button', {name: 'GAME_DETAIL.SET_PLAYING'})).toBeNull());
         expect(screen.getByLabelText('BACKLOG.NOTES_LABEL').value).toBe('my draft');
     });
+
+    it('uses the game as background and can remove it again', async () => {
+        renderDetail();
+
+        fireEvent.click(await screen.findByRole('button', {name: 'GAME_DETAIL.SET_BACKGROUND'}));
+
+        const remove = await screen.findByRole('button', {name: 'GAME_DETAIL.REMOVE_BACKGROUND'});
+        const [url, init] = fetch.mock.calls.find(([, call]) => call?.method === 'PUT');
+        expect(url).toContain('/api/users/settings/appearance');
+        expect(JSON.parse(init.body).backgroundAppid).toBe(220);
+
+        fireEvent.click(remove);
+        expect(await screen.findByRole('button', {name: 'GAME_DETAIL.SET_BACKGROUND'})).toBeTruthy();
+    });
 });