feat(library): add ordered backlog page and up-next dashboard tile

src/pages/PlayNextPage.test.jsx

@@ -43,7 +43,7 @@ describe('PlayNextPage', () => {
         localStorage.clear();
     });
 
-    it('shows three picks for any length by default', async () => {
+    it('shows four picks for any length by default', async () => {
         mockBackend([[game(1), game(2), game(3)]]);
 
         renderPage();
@@ -51,11 +51,19 @@ describe('PlayNextPage', () => {
         expect(await screen.findByText('Game 1')).toBeTruthy();
         expect(screen.getByText('Game 3')).toBeTruthy();
         const params = pickerUrls()[0];
-        expect(params.get('count')).toBe('3');
+        expect(params.get('count')).toBe('4');
         expect(params.has('maxMinutes')).toBe(false);
         expect(params.has('exclude')).toBe(false);
     });
 
+    it('says why a game from the top of the backlog order was picked', async () => {
+        mockBackend([[game(1, {reason: {source: 'NEXT_UP'}})]]);
+
+        renderPage();
+
+        expect(await screen.findByText('PLAY_NEXT.REASON.NEXT_UP')).toBeTruthy();
+    });
+
     it('asks for games up to the chosen length', async () => {
         mockBackend([[game(1)], [game(2)]]);
         renderPage();