feat(ui): make stat numbers clickable to open games

StatDrill context holds one dialog for a page. StatCount wraps a number:
total and status counts link to the library filter, other numbers open
StatGamesDialog. DrillRow and DrillButton support drill-down in tag bars
(genres, platforms, moods) and other stat displays. Dialog shows 40 games
per page with bottom-sheet layout on phones, handles pagination and errors
(403 not shared, 401 expired, 400 bad argument).

src/components/stats/TopGamesStats.jsx

@@ -1,12 +1,15 @@
 import {useTranslation} from 'react-i18next';
 import {Trophy} from 'lucide-react';
 
+import {Button} from '@/components/ui/button';
 import StatsSection from './StatsSection.jsx';
 import GameRow from './GameRow.jsx';
+import {useStatDrill} from './StatDrill.jsx';
 import {formatPlaytime} from '../../utils/games.js';
 
 export default function TopGamesStats({topGames, linked = true}) {
     const {t} = useTranslation();
+    const drill = useStatDrill();
     return (
         <StatsSection title={t('STATS.TOP_GAMES.TITLE')} icon={Trophy}>
             {topGames.mostPlayed.length === 0 ? (
@@ -18,6 +21,12 @@ export default function TopGamesStats({topGames, linked = true}) {
                     ))}
                 </ol>
             )}
+            {drill && topGames.mostPlayed.length > 0 && (
+                <Button variant="ghost" size="sm" className="self-start max-sm:min-h-11"
+                        onClick={() => drill.open(t('STATS.TOP_GAMES.TITLE'), {key: 'MOST_PLAYED'})}>
+                    {t('STATS.DRILL.SHOW_ALL')}
+                </Button>
+            )}
             {topGames.mostLoyal && (
                 <div className="space-y-2">
                     <span className="text-sm font-medium">{t('STATS.TOP_GAMES.LOYAL')}</span>