feat(play-next): show why each game was picked

Each card shows a reason line under the game name. Issue #28.

src/pages/PlayNextPage.test.jsx

@@ -224,4 +224,27 @@ describe('PlayNextPage', () => {
 
         expect(screen.queryByRole('button', {name: 'PLAY_NEXT.REROLL'})).not.toBeNull();
     });
+
+    it('shows why each game was picked', async () => {
+        mockBackend([[
+            game(1, {reason: {source: 'SIMILAR', anchorAppid: 9, anchorName: 'Celeste', anchorPlaytimeMinutes: 600}}),
+            game(2, {reason: {source: 'LONGEST', firstSeenAt: '2024-03-12T10:00:00Z'}}),
+            game(3, {reason: {source: 'RANDOM'}}),
+        ]]);
+
+        renderPage();
+
+        expect(await screen.findByText('PLAY_NEXT.REASON.SIMILAR')).toBeTruthy();
+        expect(screen.getByText('PLAY_NEXT.REASON.LONGEST')).toBeTruthy();
+        expect(screen.getByText('PLAY_NEXT.REASON.RANDOM')).toBeTruthy();
+    });
+
+    it('shows no reason line for a game without a reason', async () => {
+        mockBackend([[game(1)]]);
+
+        renderPage();
+
+        await screen.findByText('Game 1');
+        expect(screen.queryByText(/PLAY_NEXT\.REASON/)).toBeNull();
+    });
 });