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

src/pages/PlayNextPage.jsx

@@ -27,7 +27,7 @@ const BUDGETS = [
 // Core derives the moods from IGDB's genres, themes and game modes, and SPEEDRUN from speedrun.com; a mood leaves out
 // games without that data.
 const MOODS = ['ANY', 'STORY', 'COOP', 'CHILL', 'ACTION', 'SCARY', 'SPEEDRUN'];
-const PICK_COUNT = 3;
+const PICK_COUNT = 4;
 // The backend reads only this many excludes. With a bigger backlog the oldest seen games can come back.
 const MAX_EXCLUDES = 100;
 
@@ -139,13 +139,13 @@ export default function PlayNextPage() {
             {error && <p className="text-sm text-destructive">{t(error)}</p>}
 
             {games === null && !error && (
-                <div className="grid gap-4 sm:grid-cols-3">
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                     {Array.from({length: PICK_COUNT}, (_, i) => <Skeleton key={i} className="h-56 rounded-xl"/>)}
                 </div>
             )}
 
             {games?.length > 0 && (
-                <div className="grid gap-4 sm:grid-cols-3">
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                     {games.map((game) => <PickCard key={game.appid} game={game}/>)}
                 </div>
             )}
@@ -186,6 +186,7 @@ const reasonText = (reason, t, language) => {
     if (reason.source === 'LONGEST') {
         return t('PLAY_NEXT.REASON.LONGEST', {date: formatDate(reason.firstSeenAt, language, {dateStyle: 'medium'})});
     }
+    if (reason.source === 'NEXT_UP') return t('PLAY_NEXT.REASON.NEXT_UP');
     return t('PLAY_NEXT.REASON.RANDOM');
 };