feat(play-next): page that picks the next backlog game

src/components/AppHeader.jsx

@@ -1,6 +1,6 @@
 import {Link, NavLink, useLocation} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {Gamepad2, Languages, LayoutDashboard, Library, LogOut, Moon, Settings, Sun} from 'lucide-react';
+import {Dices, Gamepad2, Languages, LayoutDashboard, Library, LogOut, Moon, Settings, Sun} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {
@@ -20,6 +20,7 @@ const NAV_ITEMS = [
     {to: '/dashboard', labelKey: 'NAV.DASHBOARD', Icon: LayoutDashboard},
     // The wishlist is a tab of the library.
     {to: '/library', labelKey: 'NAV.LIBRARY', Icon: Library, alsoActiveOn: ['/wishlist']},
+    {to: '/play-next', labelKey: 'NAV.PLAY_NEXT', Icon: Dices},
 ];
 
 const navLinkClass = (isActive) => cn(

src/components/PileOfShameCard.jsx

@@ -1,6 +1,6 @@
 import {Link} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {Inbox, Shuffle} from 'lucide-react';
+import {Dices, Inbox, Shuffle} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
@@ -86,6 +86,9 @@ export default function PileOfShameCard({summary, syncing, onShuffle, shuffling}
                             {suggestion.name ?? `App ${suggestion.appid}`}
                         </span>
                     </Link>
+                    <Button asChild variant="outline" size="sm" className="w-full">
+                        <Link to="/play-next"><Dices/>{t('DASHBOARD.OPEN_PICKER')}</Link>
+                    </Button>
                 </div>
             ) : (
                 <p className="text-sm text-muted-foreground">{t('DASHBOARD.BACKLOG_EMPTY')}</p>