feat(dashboard): pick the banner game or turn the banner off

src/pages/Dashboard.test.jsx

@@ -48,8 +48,8 @@ describe('Dashboard', () => {
         expect(screen.queryByText('LIBRARY.EMPTY')).toBeNull();
     });
 
-    it('shows the Steam avatar and the most played game of the last two weeks as banner', async () => {
-        const avatar = 'https://avatars.steamstatic.com/abc_full.jpg';
+    const avatar = 'https://avatars.steamstatic.com/abc_full.jpg';
+    const mockDashboard = () => {
         globalThis.fetch = vi.fn(async (url) => {
             if (url.includes('/api/users/me')) return ok({email: 'a@b.de', displayName: 'Lobo', steamId: '76561198000000000'});
             if (url.includes('/api/library/steam-profile')) return ok({personaName: 'Lobo', avatarUrl: avatar});
@@ -58,13 +58,34 @@ describe('Dashboard', () => {
             if (url.includes('/api/library/games-count')) return ok({count: 1, hasSteamId: true});
             return ok({content: [], total: 0, byStatus: {}});
         });
-        const {container} = render(
+        return render(
             <MemoryRouter initialEntries={['/dashboard']}><PreferencesProvider>
                 <Dashboard/>
             </PreferencesProvider></MemoryRouter>,
-        );
+        ).container;
+    };
+
+    it('shows the Steam avatar and the most played game of the last two weeks as banner', async () => {
+        const container = mockDashboard();
 
         await waitFor(() => expect(container.querySelector(`img[src="${avatar}"]`)).not.toBeNull());
         expect(container.querySelector('img[src$="/1086940/library_hero.jpg"]')).not.toBeNull();
     });
+
+    it('shows the picked banner game instead', async () => {
+        localStorage.setItem('tbp_appearance', JSON.stringify({bannerAppid: 620}));
+        const container = mockDashboard();
+
+        await waitFor(() => expect(container.querySelector(`img[src="${avatar}"]`)).not.toBeNull());
+        expect(container.querySelector('img[src$="/620/library_hero.jpg"]')).not.toBeNull();
+        expect(container.querySelector('img[src$="/1086940/library_hero.jpg"]')).toBeNull();
+    });
+
+    it('shows no banner when it is turned off', async () => {
+        localStorage.setItem('tbp_appearance', JSON.stringify({bannerAppid: 620, showBanner: false}));
+        const container = mockDashboard();
+
+        await waitFor(() => expect(container.querySelector(`img[src="${avatar}"]`)).not.toBeNull());
+        expect(container.querySelector('img[src*="library_hero"]')).toBeNull();
+    });
 });