feat(ui): add the ToBePlayed logo and name

The logo is a traced SVG whose colors follow the accent color;
violet shows it as designed. Favicon, PWA and Apple icons use
it with fixed colors. The header and landing page say
ToBePlayed instead of Game Log. Below 380 px the header shows
only the logo, and the home link keeps its name for screen
readers.

src/components/AppHeader.test.jsx

@@ -0,0 +1,24 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import AppHeader from './AppHeader.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+afterEach(cleanup);
+
+describe('AppHeader', () => {
+    // jsdom applies no media queries, so the test hides the name the way the 380px breakpoint does.
+    it('keeps a name on the home link when a narrow phone hides the app name', () => {
+        render(
+            <MemoryRouter>
+                <PreferencesProvider><AppHeader isAuthenticated={false} onLogout={() => {}}/></PreferencesProvider>
+            </MemoryRouter>,
+        );
+        screen.getByText('ToBePlayed').style.display = 'none';
+
+        expect(screen.getByRole('link', {name: 'ToBePlayed'})).toBeTruthy();
+    });
+});