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/PileOfShameCard.jsx

@@ -6,10 +6,12 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
 import PileTrend from './stats/PileTrend.jsx';
+import {StatCount} from './stats/StatDrill.jsx';
 import {STATUS_META} from './GameStatusBadge.jsx';
 import {backlogShare} from '../utils/backlog.js';
 import {GAME_STATUSES} from '../utils/limits.js';
 import {formatPlaytime} from '../utils/games.js';
+import {libraryLink} from '../utils/statGames.js';
 
 /**
  * @param trend the TREND group of GET /api/library/stats; the card shows no trend while it is missing
@@ -34,17 +36,25 @@ export default function PileOfShameCard({summary, trend, syncing, onShuffle, shu
 
             <div>
                 <div className="flex items-baseline gap-2">
-                    <span className="text-4xl font-bold tabular-nums">{backlog.toLocaleString(i18n.language)}</span>
+                    <StatCount to={libraryLink('BACKLOG')} title={t('DASHBOARD.PILE_OF_SHAME')} params={{key: 'PILE'}}
+                               label={`${t('BACKLOG.STATUS.BACKLOG')}: ${backlog}`}>
+                        <span className="text-4xl font-bold tabular-nums">{backlog.toLocaleString(i18n.language)}</span>
+                    </StatCount>
                     <span className="text-sm text-muted-foreground">
                         {t('DASHBOARD.PILE_SHARE', {percent: backlogShare(summary)})}
                     </span>
                 </div>
                 <p className="mt-1 text-sm text-muted-foreground">
-                    {t('DASHBOARD.NEVER_PLAYED', {count: summary.neverPlayed})}
+                    <StatCount params={summary.neverPlayed > 0 ? {key: 'NEVER_STARTED'} : null}
+                               title={t('STATS.OVERVIEW.NEVER_STARTED')}>
+                        {t('DASHBOARD.NEVER_PLAYED', {count: summary.neverPlayed})}
+                    </StatCount>
                 </p>
                 {summary.backlogMinutes > 0 && (
                     <p className="text-sm text-muted-foreground">
-                        {t('DASHBOARD.BACKLOG_HOURS', {time: formatPlaytime(summary.backlogMinutes)})}
+                        <StatCount params={{key: 'PILE_TIME_TO_BEAT'}} title={t('STATS.PILE.NORMAL')}>
+                            {t('DASHBOARD.BACKLOG_HOURS', {time: formatPlaytime(summary.backlogMinutes)})}
+                        </StatCount>
                     </p>
                 )}
             </div>
@@ -67,7 +77,9 @@ export default function PileOfShameCard({summary, trend, syncing, onShuffle, shu
                             <li key={s} className="flex items-center gap-1.5">
                                 <span className={`size-2 rounded-full ${STATUS_META[s].bar}`}/>
                                 {t(`BACKLOG.STATUS.${s}`)}
-                                <span className="tabular-nums text-foreground">{summary.byStatus[s]}</span>
+                                <StatCount to={libraryLink(s)} label={`${t(`BACKLOG.STATUS.${s}`)}: ${summary.byStatus[s]}`}>
+                                    <span className="tabular-nums text-foreground">{summary.byStatus[s]}</span>
+                                </StatCount>
                             </li>
                         ))}
                     </ul>

src/components/PileOfShameCard.test.jsx

@@ -1,8 +1,10 @@
 // @vitest-environment jsdom
 import {afterEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render, screen} from '@testing-library/react';
+import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
 import PileOfShameCard from './PileOfShameCard.jsx';
+import {StatDrillProvider} from './stats/StatDrill.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 
@@ -74,4 +76,17 @@ describe('PileOfShameCard', () => {
 
         expect(screen.queryByText('DASHBOARD.BACKLOG_HOURS')).toBeNull();
     });
+
+    it('linksTheBacklogNumberToTheLibraryAndOpensTheNeverPlayedGames', async () => {
+        fetchRoutes({'GET /api/library/stats/games': json(200, {content: [{appid: 7, name: 'Untouched'}],
+            page: 0, size: 40, totalElements: 1, totalPages: 1})});
+        render(<MemoryRouter><StatDrillProvider source="own"><PileOfShameCard summary={summary(2)} onShuffle={() => {}}/></StatDrillProvider></MemoryRouter>);
+
+        expect(screen.getAllByRole('link', {name: 'BACKLOG.STATUS.BACKLOG: 2'})[0].getAttribute('href'))
+            .toBe('/library?hideDuplicates=true&status=BACKLOG');
+        fireEvent.click(screen.getByRole('button', {name: 'DASHBOARD.NEVER_PLAYED:1'}));
+
+        expect(await screen.findByText('Untouched')).toBeTruthy();
+        await waitFor(() => expect(fetch.mock.calls[0][0]).toContain('key=NEVER_STARTED'));
+    });
 });

src/components/StatCard.jsx

@@ -2,6 +2,7 @@ import {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 
 import {Card} from '@/components/ui/card';
+import {useDrillTarget} from './stats/StatDrill.jsx';
 
 function useCountUp(target, durationMs = 1600) {
     const [value, setValue] = useState(0);
@@ -25,10 +26,14 @@ function useCountUp(target, durationMs = 1600) {
     return value;
 }
 
-export default function StatCard({label, value, icon: Icon, suffix}) {
+/**
+ * @param drill `{params}` of StatCount: the card is a button that opens the games behind the number
+ */
+export default function StatCard({label, value, icon: Icon, suffix, drill}) {
     const {i18n} = useTranslation();
     const animated = useCountUp(value);
-    return (
+    const target = useDrillTarget({title: label, ...drill});
+    const card = (
         <Card className="gap-3 p-5">
             {Icon && (
                 <span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
@@ -41,4 +46,10 @@ export default function StatCard({label, value, icon: Icon, suffix}) {
             <div className="text-sm text-muted-foreground">{label}</div>
         </Card>
     );
+    return target ? (
+        <button type="button" onClick={target.onClick}
+                className="block w-full rounded-xl text-left transition-colors hover:text-primary focus-visible:ring-2 focus-visible:ring-ring">
+            {card}
+        </button>
+    ) : card;
 }

src/components/SteamGameCount.jsx

@@ -33,7 +33,7 @@ const SteamGameCount = ({targetCount}) => {
                 <Gamepad2 className="size-5"/>
             </div>
             <div>
-                <div className="text-5xl font-bold tracking-tight tabular-nums">{count}</div>
+                <Link to="/library" className="block text-5xl font-bold tracking-tight tabular-nums hover:text-primary">{count}</Link>
                 <div className="mt-1 text-sm text-muted-foreground">{t('DASHBOARD.STEAM_GAMES')}</div>
             </div>
             <Link to="/library" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">

src/components/stats/FinishedStats.jsx

@@ -2,19 +2,25 @@ import {useTranslation} from 'react-i18next';
 import {Flag} from 'lucide-react';
 
 import StatsSection from './StatsSection.jsx';
+import {DrillRow, StatCount, useStatDrill} from './StatDrill.jsx';
 
-export function YearBars({perYear}) {
+/**
+ * @param onSelect `(year)`: the rows are buttons
+ */
+export function YearBars({perYear, onSelect}) {
     const max = Math.max(1, ...perYear.map((y) => y.games));
     return (
         <ul className="space-y-2">
             {perYear.map((y) => (
-                <li key={y.year} className="flex items-center gap-3 text-sm">
-                    <span className="w-12 tabular-nums">{y.year}</span>
-                    <div className="h-2 flex-1 rounded-full bg-muted">
-                        <div className="h-full rounded-full bg-primary"
-                             style={{width: `${(y.games / max) * 100}%`}}/>
-                    </div>
-                    <span className="w-8 text-right tabular-nums">{y.games}</span>
+                <li key={y.year} className="text-sm">
+                    <DrillRow onSelect={onSelect && (() => onSelect(y.year))} className="flex items-center gap-3">
+                        <span className="w-12 tabular-nums">{y.year}</span>
+                        <div className="h-2 flex-1 rounded-full bg-muted">
+                            <div className="h-full rounded-full bg-primary"
+                                 style={{width: `${(y.games / max) * 100}%`}}/>
+                        </div>
+                        <span className="w-8 text-right tabular-nums">{y.games}</span>
+                    </DrillRow>
                 </li>
             ))}
         </ul>
@@ -23,16 +29,20 @@ export function YearBars({perYear}) {
 
 export default function FinishedStats({finished}) {
     const {t} = useTranslation();
+    const drill = useStatDrill();
     return (
         <StatsSection title={t('STATS.FINISHED.TITLE')} icon={Flag}>
             {finished.perYear.length === 0 ? (
                 <p className="text-sm text-muted-foreground">{t('STATS.FINISHED.EMPTY')}</p>
             ) : (
-                <YearBars perYear={finished.perYear}/>
+                <YearBars perYear={finished.perYear}
+                           onSelect={drill && ((year) => drill.open(`${t('STATS.FINISHED.TITLE')}: ${year}`, {key: 'FINISHED_YEAR', arg: year}))}/>
             )}
             {finished.finishedBeforeTracking > 0 && (
                 <p className="text-xs text-muted-foreground">
-                    {t('STATS.FINISHED.BEFORE', {count: finished.finishedBeforeTracking})}
+                    <StatCount params={{key: 'FINISHED_UNTRACKED'}} title={t('STATS.DRILL.BEFORE_TRACKING')}>
+                        {t('STATS.FINISHED.BEFORE', {count: finished.finishedBeforeTracking})}
+                    </StatCount>
                 </p>
             )}
         </StatsSection>

src/components/stats/GameRow.jsx

@@ -1,23 +1,31 @@
 import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
 import GameCover from '../GameCover.jsx';
 import FitText from '../FitText.jsx';
+import {gameHref} from '../../utils/statGames.js';
 
 /**
- * A game with its cover and a value on the right; links to the game page only in the user's own library.
+ * A game with its cover and a value on the right; links to the game page in the user's own library, to the Steam
+ * store for a visitor.
  */
 export default function GameRow({game, value, linked = true}) {
+    const {t} = useTranslation();
     const content = (
         <>
             <GameCover appid={game.appid} imageUrl={game.imageUrl} className="w-16 shrink-0"/>
             <span className="@container min-w-0 flex-1 text-sm font-medium"><FitText text={game.name ?? `App ${game.appid}`}/></span>
-            <span className="text-sm text-muted-foreground tabular-nums">{value}</span>
+            <span className="flex items-center gap-2 text-sm text-muted-foreground tabular-nums">{value}</span>
         </>
     );
-    return linked ? (
-        <Link to={`/library/${game.appid}`} className="flex items-center gap-3 hover:text-primary transition-colors">
-            {content}
-        </Link>
-    ) : (
-        <div className="flex items-center gap-3">{content}</div>
-    );
+    const className = 'flex items-center gap-3 hover:text-primary transition-colors';
+    if (linked) return <Link to={gameHref(game.appid, true)} className={className}>{content}</Link>;
+    const href = gameHref(game.appid, false);
+    if (href) {
+        return (
+            <a href={href} target="_blank" rel="noopener noreferrer" title={t('STATS.DRILL.OPEN')} className={className}>
+                {content}
+            </a>
+        );
+    }
+    return <div className="flex items-center gap-3">{content}</div>;
 }

src/components/stats/HabitsStats.jsx

@@ -19,12 +19,13 @@ export default function HabitsStats({habits}) {
                           hint={t('STATS.HABITS.MOON_HINT')}/>
                 {habits.longestDay && (
                     <StatTile label={t('STATS.HABITS.LONGEST_DAY')} value={formatPlaytime(habits.longestDay.minutes)}
-                              hint={day}/>
+                              hint={day} drill={{params: {key: 'LONGEST_DAY'}}}/>
                 )}
                 {habits.underOneHourShare != null && (
                     <StatTile label={t('STATS.HABITS.UNDER_ONE_HOUR')}
                               value={formatPercent(habits.underOneHourShare, i18n.language)}
-                              hint={t('STATS.HABITS.UNDER_ONE_HOUR_HINT', {count: habits.underOneHourGames})}/>
+                              hint={t('STATS.HABITS.UNDER_ONE_HOUR_HINT', {count: habits.underOneHourGames})}
+                              drill={{params: {key: 'UNDER_ONE_HOUR'}}}/>
                 )}
             </div>
         </StatsSection>

src/components/stats/OverviewStats.jsx

@@ -4,7 +4,9 @@ import {Gamepad2} from 'lucide-react';
 import StatsSection from './StatsSection.jsx';
 import StatTile from './StatTile.jsx';
 import {GAME_STATUSES} from '../../utils/limits.js';
+import {StatCount} from './StatDrill.jsx';
 import {formatPlaytime} from '../../utils/games.js';
+import {libraryLink} from '../../utils/statGames.js';
 
 export default function OverviewStats({overview}) {
     const {t, i18n} = useTranslation();
@@ -12,16 +14,22 @@ export default function OverviewStats({overview}) {
     return (
         <StatsSection title={t('STATS.OVERVIEW.TITLE')} icon={Gamepad2}>
             <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-                <StatTile label={t('STATS.OVERVIEW.GAMES')} value={n(overview.totalGames)}/>
+                <StatTile label={t('STATS.OVERVIEW.GAMES')} value={n(overview.totalGames)}
+                          drill={{to: libraryLink(), params: {key: 'TOTAL'}}}/>
                 <StatTile label={t('STATS.OVERVIEW.PLAYTIME')} value={formatPlaytime(overview.totalPlaytimeMinutes)}/>
-                <StatTile label={t('STATS.OVERVIEW.PLAYED')} value={n(overview.playedGames)}/>
-                <StatTile label={t('STATS.OVERVIEW.NEVER_STARTED')} value={n(overview.neverStarted)}/>
+                <StatTile label={t('STATS.OVERVIEW.PLAYED')} value={n(overview.playedGames)}
+                          drill={{params: {key: 'PLAYED'}}}/>
+                <StatTile label={t('STATS.OVERVIEW.NEVER_STARTED')} value={n(overview.neverStarted)}
+                          drill={{params: {key: 'NEVER_STARTED'}}}/>
             </div>
             <ul className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">
                 {GAME_STATUSES.map((s) => (
                     <li key={s}>
                         {t(`BACKLOG.STATUS.${s}`)}{' '}
-                        <span className="tabular-nums text-foreground">{n(overview.byStatus[s] ?? 0)}</span>
+                        <StatCount to={libraryLink(s)} params={{key: 'STATUS', arg: s}} title={t(`BACKLOG.STATUS.${s}`)}
+                                   label={`${t(`BACKLOG.STATUS.${s}`)}: ${n(overview.byStatus[s] ?? 0)}`}>
+                            <span className="tabular-nums text-foreground">{n(overview.byStatus[s] ?? 0)}</span>
+                        </StatCount>
                     </li>
                 ))}
             </ul>

src/components/stats/PileStats.jsx

@@ -5,6 +5,7 @@ import StatsSection from './StatsSection.jsx';
 import StatTile from './StatTile.jsx';
 import GameRow from './GameRow.jsx';
 import {formatPlaytime} from '../../utils/games.js';
+import {libraryLink} from '../../utils/statGames.js';
 import {formatDecimal} from '../../utils/stats.js';
 import {formatDate} from '../../utils/format.js';
 
@@ -16,9 +17,11 @@ export default function PileStats({pile, linked = true}) {
     return (
         <StatsSection title={t('STATS.PILE.TITLE')} icon={Inbox}>
             <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-                <StatTile label={t('STATS.PILE.GAMES')} value={pile.backlogGames.toLocaleString(i18n.language)}/>
+                <StatTile label={t('STATS.PILE.GAMES')} value={pile.backlogGames.toLocaleString(i18n.language)}
+                          drill={{to: libraryLink('BACKLOG'), params: {key: 'PILE'}}}/>
                 <StatTile label={t('STATS.PILE.NORMAL')} value={formatPlaytime(pile.normalMinutes)}
-                          hint={t('STATS.PILE.KNOWN', {count: pile.gamesWithTimeToBeat})}/>
+                          hint={t('STATS.PILE.KNOWN', {count: pile.gamesWithTimeToBeat})}
+                          drill={{params: {key: 'PILE_TIME_TO_BEAT'}}}/>
                 <StatTile label={t('STATS.PILE.COMPLETIONIST')} value={formatPlaytime(pile.completionistMinutes)}/>
             </div>
             {pile.normalMinutes > 0 && (

src/components/stats/PileTrend.jsx

@@ -1,4 +1,5 @@
 import {useTranslation} from 'react-i18next';
+import {StatCount} from './StatDrill.jsx';
 import {formatDay} from '../../utils/format.js';
 import {trendPoints} from '../../utils/stats.js';
 
@@ -16,15 +17,25 @@ export default function PileTrend({trend}) {
     return (
         <div className="space-y-2">
             <p className="text-sm">
-                {t('STATS.TREND.THIS_MONTH', {added: thisMonth.added, done: thisMonth.done})}
+                <span>{t('STATS.TREND.THIS_MONTH')}</span>{' '}
+                <StatCount params={thisMonth.added > 0 ? {key: 'TREND_ADDED'} : null} title={t('STATS.DRILL.TREND_ADDED')}>
+                    {t('STATS.TREND.THIS_MONTH_ADDED', {added: thisMonth.added})}
+                </StatCount>
+                {', '}
+                <StatCount params={thisMonth.done > 0 ? {key: 'TREND_DONE'} : null} title={t('STATS.DRILL.TREND_DONE')}>
+                    {t('STATS.TREND.THIS_MONTH_DONE', {done: thisMonth.done})}
+                </StatCount>
             </p>
             {days.length > 1 ? (
                 <div>
-                    <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="none" className="h-16 w-full"
-                         role="img" aria-label={t('STATS.TREND.TITLE')}>
-                        <polyline data-testid="pile-trend" points={trendPoints(days, WIDTH, HEIGHT)} fill="none"
-                                  strokeWidth={2} vectorEffect="non-scaling-stroke" className="stroke-rose-500"/>
-                    </svg>
+                    <StatCount params={{key: 'TREND_MOVES'}} title={t('STATS.DRILL.TREND_MOVES')}
+                               label={t('STATS.DRILL.TREND_MOVES')} className="flex w-full no-underline">
+                        <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="none" className="h-16 w-full"
+                             role="img" aria-label={t('STATS.TREND.TITLE')}>
+                            <polyline data-testid="pile-trend" points={trendPoints(days, WIDTH, HEIGHT)} fill="none"
+                                      strokeWidth={2} vectorEffect="non-scaling-stroke" className="stroke-rose-500"/>
+                        </svg>
+                    </StatCount>
                     <div className="mt-1 flex justify-between text-xs text-muted-foreground">
                         <span>{formatDay(days[0].day, i18n.language)}: {days[0].backlogGames}</span>
                         <span>{formatDay(days[days.length - 1].day, i18n.language)}: {days[days.length - 1].backlogGames}</span>

src/components/stats/PlatformStats.jsx

@@ -3,15 +3,17 @@ import {MonitorSmartphone} from 'lucide-react';
 
 import StatsSection from './StatsSection.jsx';
 import {TagBars} from './TasteStats.jsx';
+import {useTagDrill} from './StatDrill.jsx';
 
 export default function PlatformStats({platforms}) {
     const {t} = useTranslation();
+    const select = useTagDrill();
     return (
         <StatsSection title={t('STATS.PLATFORMS.TITLE')} icon={MonitorSmartphone}>
             {platforms.perPlatform.length === 0 ? (
                 <p className="text-sm text-muted-foreground">{t('STATS.PLATFORMS.EMPTY')}</p>
             ) : (
-                <TagBars tags={platforms.perPlatform}/>
+                <TagBars tags={platforms.perPlatform} onSelect={select('PLATFORM')}/>
             )}
         </StatsSection>
     );

src/components/stats/StatDrill.jsx

@@ -0,0 +1,90 @@
+import {createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {Link} from 'react-router-dom';
+
+import {cn} from '@/lib/utils';
+import StatGamesDialog from './StatGamesDialog.jsx';
+
+const StatDrillContext = createContext(null);
+
+// The dotted underline says "there is more behind this number".
+const DRILL_CLASS = 'inline-flex items-center justify-center max-sm:min-h-11 max-sm:min-w-11 underline decoration-dotted '
+    + 'underline-offset-4 hover:text-primary focus-visible:ring-2 focus-visible:ring-ring rounded-sm cursor-pointer';
+
+/**
+ * Holds the dialog of the games behind a number, once for a page.
+ *
+ * @param source own, profile, community or points
+ * @param ticket profile: the ticket for the visitor's requests
+ */
+export function StatDrillProvider({source, ticket, children}) {
+    const [request, setRequest] = useState(null);
+    const opener = useRef(null);
+    useEffect(() => {
+        if (!request) opener.current?.focus?.();
+    }, [request]);
+    const value = useMemo(() => ({
+        source,
+        open: (title, params) => {
+            opener.current = document.activeElement;
+            setRequest({title, source, ticket, params});
+        },
+    }), [source, ticket]);
+    return (
+        <StatDrillContext.Provider value={value}>
+            {children}
+            <StatGamesDialog request={request} onClose={() => setRequest(null)}
+                             onCloseAutoFocus={(event) => event.preventDefault()}/>
+        </StatDrillContext.Provider>
+    );
+}
+
+/** `{source, open(title, params)}`, or null outside a provider: the numbers are not clickable there. */
+export const useStatDrill = () => useContext(StatDrillContext);
+
+/**
+ * What a number does on click: a library link (own library only, `to`), the dialog (`params`), or nothing (null).
+ */
+export function useDrillTarget({to, params, title}) {
+    const drill = useStatDrill();
+    if (to && drill?.source === 'own') return {to};
+    if (drill && params) return {onClick: () => drill.open(title, params)};
+    return null;
+}
+
+/** `(key) => onSelect` of TagBars for a key with the tag name as its argument; null outside a provider. */
+export function useTagDrill() {
+    const drill = useStatDrill();
+    return (key) => drill && ((tag, text) => drill.open(text, {key, arg: tag.name}));
+}
+
+/** A bar row: a button when it has `onSelect`. */
+export function DrillRow({onSelect, className, children}) {
+    return onSelect ? (
+        <button type="button" onClick={onSelect}
+                className={cn('block min-h-11 w-full rounded-sm text-left hover:text-primary focus-visible:ring-2 focus-visible:ring-ring', className)}>
+            {children}
+        </button>
+    ) : <div className={className}>{children}</div>;
+}
+
+export function DrillButton({onClick, label, className, children}) {
+    return (
+        <button type="button" onClick={onClick} aria-label={label} className={cn(DRILL_CLASS, className)}>
+            {children}
+        </button>
+    );
+}
+
+/**
+ * A number (or any inline content) that opens the games behind it. Plain content when it has no target.
+ *
+ * @param to library URL, used instead of the dialog in the user's own views
+ * @param params `{key, arg}` or `{track}` / `{kind, ref}` of the games request
+ */
+export function StatCount({to, params, title, label, className, children}) {
+    const target = useDrillTarget({to, params, title});
+    if (!target) return children;
+    return target.to
+        ? <Link to={target.to} aria-label={label} className={cn(DRILL_CLASS, className)}>{children}</Link>
+        : <DrillButton onClick={target.onClick} label={label} className={className}>{children}</DrillButton>;
+}

src/components/stats/StatGamesDialog.jsx

@@ -0,0 +1,111 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+
+import {Button} from '@/components/ui/button';
+import {Dialog, DialogContent, DialogDescription, DialogTitle} from '@/components/ui/dialog';
+import {Skeleton} from '@/components/ui/skeleton';
+import GameRow from './GameRow.jsx';
+import GameStatusBadge from '../GameStatusBadge.jsx';
+import {formatDate} from '../../utils/format.js';
+import {formatPlaytime} from '../../utils/games.js';
+import {fetchStatGames} from '../../utils/statGames.js';
+
+const ERRORS = {403: 'STATS.DRILL.NOT_SHARED', 401: 'STATS.DRILL.EXPIRED'};
+
+/**
+ * The games behind one number, 40 per page.
+ *
+ * @param request `{title, source, ticket, params}` or null (closed)
+ */
+export default function StatGamesDialog({request, onClose, onCloseAutoFocus}) {
+    const {t, i18n} = useTranslation();
+    const [state, setState] = useState({games: [], page: 0, totalPages: 0, total: 0, untracked: 0});
+    const [status, setStatus] = useState('loading');
+    const openRequest = useRef(null);
+
+    const load = useCallback(async (page, current) => {
+        setStatus('loading');
+        const {ok, status: code, data} = await fetchStatGames(request.source, {...request.params, page}, request.ticket);
+        if (openRequest.current !== request) return;
+        if (!ok) {
+            setStatus(code);
+            return;
+        }
+        setState({
+            games: [...current, ...data.content], page, totalPages: data.totalPages, total: data.totalElements,
+            untracked: data.untracked ?? 0,
+        });
+        setStatus('ok');
+    }, [request]);
+
+    useEffect(() => {
+        openRequest.current = request;
+        if (!request) return;
+        setState({games: [], page: 0, totalPages: 0, total: 0, untracked: 0});
+        load(0, []);
+    }, [request, load]);
+
+    const value = (game) => {
+        if (request.source === 'community') {
+            return `${t('STATS.DRILL.IN_LIBRARIES', {count: game.libraries})} · ${formatPlaytime(game.minutes)}`;
+        }
+        const moved = game.fromStatus || game.toStatus;
+        return (
+            <>
+                {!moved && game.status && <GameStatusBadge status={game.status} compact/>}
+                {moved && (
+                    <span>{game.fromStatus ? t(`BACKLOG.STATUS.${game.fromStatus}`) : t('STATS.DRILL.NEW_IN_LIBRARY')}
+                        {' → '}{game.toStatus ? t(`BACKLOG.STATUS.${game.toStatus}`) : '–'}</span>
+                )}
+                <span>{game.at
+                    ? formatDate(game.at, i18n.language, {dateStyle: 'medium'})
+                    : formatPlaytime(game.minutes ?? game.playtimeMinutes ?? 0)}</span>
+            </>
+        );
+    };
+
+    const failed = typeof status === 'number';
+    return (
+        <Dialog open={request != null} onOpenChange={(open) => !open && onClose()}>
+            <DialogContent onCloseAutoFocus={onCloseAutoFocus}
+                className="max-h-[85vh] overflow-y-auto overflow-x-hidden max-sm:top-auto max-sm:bottom-0 max-sm:max-w-full max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-xl">
+                <DialogTitle className="pr-6">{request?.title}</DialogTitle>
+                <DialogDescription>{status === 'ok' ? t('STATS.DRILL.GAMES', {count: state.total}) : ' '}</DialogDescription>
+                {request && (
+                    <ul className="space-y-2">
+                        {state.games.map((game, index) => (
+                            <li key={`${game.appid}-${index}`}>
+                                <GameRow game={game} value={value(game)} linked={request.source === 'own'}/>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+                {status === 'loading' && <Skeleton className="h-24 rounded-xl"/>}
+                {status === 'ok' && state.games.length === 0 && (
+                    <p className="text-sm text-muted-foreground">{t('STATS.DRILL.EMPTY')}</p>
+                )}
+                {status === 'ok' && state.untracked > 0 && (
+                    <p className="text-xs text-muted-foreground">{t('STATS.FINISHED.BEFORE', {count: state.untracked})}</p>
+                )}
+                {failed && (
+                    <div className="flex flex-col items-start gap-2 text-sm text-muted-foreground">
+                        <p>{t(ERRORS[status] ?? 'STATS.DRILL.ERROR')}</p>
+                        {status === 401
+                            ? <Button variant="outline" size="sm" className="min-h-11" onClick={() => globalThis.location.reload()}>
+                                {t('STATS.DRILL.RELOAD')}</Button>
+                            : status !== 403 && (
+                                <Button variant="outline" size="sm" className="min-h-11"
+                                        onClick={() => load(state.page + (state.games.length > 0 ? 1 : 0), state.games)}>
+                                    {t('DASHBOARD.RETRY')}</Button>
+                            )}
+                    </div>
+                )}
+                {status === 'ok' && state.page + 1 < state.totalPages && (
+                    <Button variant="outline" className="min-h-11" onClick={() => load(state.page + 1, state.games)}>
+                        {t('STATS.DRILL.LOAD_MORE')}
+                    </Button>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

src/components/stats/StatGamesDialog.test.jsx

@@ -0,0 +1,131 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {act, cleanup, fireEvent, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import StatGamesDialog from './StatGamesDialog.jsx';
+import {StatCount, StatDrillProvider} from './StatDrill.jsx';
+import {fetchRoutes, json} from '../../test/fetchRoutes.js';
+
+vi.mock('react-i18next', () => import('../../test/i18n-mock.js'));
+
+const GAMES = '/api/library/stats/games';
+const rows = (from, count, extra = {}) => Array.from({length: count}, (_, i) => (
+    {appid: from + i, name: `Game ${from + i}`, status: 'BACKLOG', playtimeMinutes: 60, ...extra}));
+const page = (content, index, totalPages, totalElements) =>
+    json(200, {content, page: index, size: 40, totalElements, totalPages});
+
+const renderDialog = (request, onClose = () => {}) => render(
+    <MemoryRouter><StatGamesDialog request={{title: 'Shooter', source: 'own', params: {key: 'GENRE', arg: 'Shooter'}, ...request}}
+                                   onClose={onClose}/></MemoryRouter>);
+
+describe('StatGamesDialog', () => {
+    afterEach(cleanup);
+
+    it('loadsPageZeroAndAppendsTheNextOne', async () => {
+        fetchRoutes({[`GET ${GAMES}`]: (url) => url.includes('page=1')
+            ? page(rows(41, 5), 1, 2, 45)
+            : page(rows(1, 40), 0, 2, 45)});
+        renderDialog();
+
+        expect(await screen.findByText('Game 40')).toBeTruthy();
+        expect(screen.getAllByRole('listitem')).toHaveLength(40);
+        expect(fetch.mock.calls[0][0]).toContain('key=GENRE&arg=Shooter&page=0');
+
+        fireEvent.click(screen.getByRole('button', {name: 'STATS.DRILL.LOAD_MORE'}));
+
+        expect(await screen.findByText('Game 45')).toBeTruthy();
+        expect(screen.getAllByRole('listitem')).toHaveLength(45);
+        expect(screen.queryByRole('button', {name: 'STATS.DRILL.LOAD_MORE'})).toBeNull();
+    });
+
+    it('closesOnEscape', async () => {
+        fetchRoutes({[`GET ${GAMES}`]: page(rows(1, 1), 0, 1, 1)});
+        const onClose = vi.fn();
+        renderDialog({}, onClose);
+        await screen.findByText('Game 1');
+
+        fireEvent.keyDown(screen.getByRole('dialog'), {key: 'Escape'});
+
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('offersARetryAfterAnError', async () => {
+        let fail = true;
+        fetchRoutes({[`GET ${GAMES}`]: () => (fail ? json(500, {}) : page(rows(1, 1), 0, 1, 1))});
+        renderDialog();
+
+        expect(await screen.findByText('STATS.DRILL.ERROR')).toBeTruthy();
+        fail = false;
+        fireEvent.click(screen.getByRole('button', {name: 'DASHBOARD.RETRY'}));
+
+        expect(await screen.findByText('Game 1')).toBeTruthy();
+    });
+
+    it('saysSoWhenTheOwnerDoesNotShareTheNumber', async () => {
+        fetchRoutes({'GET /api/public/profiles/library/stats/games': json(403, {code: 'NOT_SHARED'})});
+        renderDialog({source: 'profile', ticket: 't'});
+
+        expect(await screen.findByText('STATS.DRILL.NOT_SHARED')).toBeTruthy();
+        expect(screen.queryByRole('button', {name: 'DASHBOARD.RETRY'})).toBeNull();
+    });
+
+    it('asksForAReloadWhenTheTicketExpired', async () => {
+        const mock = fetchRoutes({'GET /api/public/profiles/library/stats/games': json(401, {code: 'INVALID_TICKET'})});
+        renderDialog({source: 'profile', ticket: 'old'});
+
+        expect(await screen.findByText('STATS.DRILL.EXPIRED')).toBeTruthy();
+        expect(screen.getByRole('button', {name: 'STATS.DRILL.RELOAD'})).toBeTruthy();
+        expect(mock.mock.calls[0][1].headers['X-Profile-Ticket']).toBe('old');
+    });
+
+    it('showsTheStatusMoveOfATrendRow', async () => {
+        fetchRoutes({[`GET ${GAMES}`]: page(
+            [{appid: 5, name: 'Moved', fromStatus: 'BACKLOG', toStatus: 'PLAYING', at: '2026-09-20T10:00:00Z'}], 0, 1, 1)});
+        renderDialog({params: {key: 'TREND_MOVES'}});
+
+        await screen.findByText('Moved');
+
+        expect(screen.getByText(/BACKLOG\.STATUS\.BACKLOG → BACKLOG\.STATUS\.PLAYING/)).toBeTruthy();
+    });
+
+    it('showsTheLibraryCountOfACommunityRow', async () => {
+        fetchRoutes({'GET /api/stats/public/games': page([{appid: 7, name: 'Shared', libraries: 3, minutes: 120}], 0, 1, 1)});
+        renderDialog({source: 'community', params: {key: 'OWNED'}});
+
+        await screen.findByText('Shared');
+
+        expect(screen.getByText('STATS.DRILL.IN_LIBRARIES:3 · 2.0h')).toBeTruthy();
+    });
+
+    it('focusReturnsToTheClickedNumber', async () => {
+        fetchRoutes({[`GET ${GAMES}`]: page(rows(1, 1), 0, 1, 1)});
+        render(<MemoryRouter><StatDrillProvider source="own">
+            <StatCount params={{key: 'PLAYED'}} title="Played" label="Played: 1">1</StatCount>
+        </StatDrillProvider></MemoryRouter>);
+        const number = screen.getByRole('button', {name: 'Played: 1'});
+        number.focus();
+        fireEvent.click(number);
+        await screen.findByText('Game 1');
+
+        fireEvent.keyDown(screen.getByRole('dialog'), {key: 'Escape'});
+        await act(async () => {});
+
+        expect(document.activeElement).toBe(number);
+    });
+
+    it('aLateAnswerOfAClosedListDoesNotFillTheOpenOne', async () => {
+        let answerOld;
+        fetchRoutes({[`GET ${GAMES}`]: (url) => (url.includes('arg=Old')
+            ? new Promise((resolve) => { answerOld = resolve; })
+            : page([{appid: 2, name: 'New game', playtimeMinutes: 1}], 0, 1, 1))});
+        const request = (arg) => ({title: arg, source: 'own', params: {key: 'GENRE', arg}});
+        const view = render(<MemoryRouter><StatGamesDialog request={request('Old')} onClose={() => {}}/></MemoryRouter>);
+        view.rerender(<MemoryRouter><StatGamesDialog request={request('New')} onClose={() => {}}/></MemoryRouter>);
+        await screen.findByText('New game');
+
+        await act(async () => answerOld(page([{appid: 1, name: 'Old game', playtimeMinutes: 1}], 0, 1, 1)));
+
+        expect(screen.queryByText('Old game')).toBeNull();
+        expect(screen.getByText('New game')).toBeTruthy();
+    });
+});

src/components/stats/StatTile.jsx

@@ -1,9 +1,24 @@
-export default function StatTile({label, value, hint}) {
-    return (
-        <div className="rounded-lg border p-4">
+import {Link} from 'react-router-dom';
+
+import {cn} from '@/lib/utils';
+import {useDrillTarget} from './StatDrill.jsx';
+
+const CLICKABLE = 'block w-full text-left transition-colors hover:border-primary focus-visible:ring-2 focus-visible:ring-ring';
+
+/**
+ * @param drill `{to, params, title}` of StatCount: the tile is a link or button when it has a target here
+ */
+export default function StatTile({label, value, hint, drill}) {
+    const target = useDrillTarget({title: label, ...drill});
+    const body = (
+        <>
             <div className="text-2xl font-bold tracking-tight tabular-nums">{value}</div>
             <div className="text-sm text-muted-foreground">{label}</div>
             {hint && <div className="mt-1 text-xs text-muted-foreground">{hint}</div>}
-        </div>
+        </>
     );
+    const className = 'rounded-lg border p-4';
+    if (target?.to) return <Link to={target.to} className={cn(className, CLICKABLE)}>{body}</Link>;
+    if (target) return <button type="button" onClick={target.onClick} className={cn(className, CLICKABLE)}>{body}</button>;
+    return <div className={className}>{body}</div>;
 }

src/components/stats/TasteStats.jsx

@@ -2,26 +2,32 @@ import {useTranslation} from 'react-i18next';
 import {Palette} from 'lucide-react';
 
 import StatsSection from './StatsSection.jsx';
+import {DrillRow, useTagDrill} from './StatDrill.jsx';
 import {formatPlaytime} from '../../utils/games.js';
 import {genreKey} from '../../utils/stats.js';
 
-export function TagBars({tags, label = (name) => name}) {
+/**
+ * @param onSelect `(tag, shownLabel)`: the rows are buttons
+ */
+export function TagBars({tags, label = (name) => name, onSelect}) {
     const {t} = useTranslation();
     const max = Math.max(1, ...tags.map((tag) => tag.minutes));
     return (
         <ul className="space-y-2">
             {tags.map((tag) => (
                 <li key={tag.name} className="text-sm">
-                    <div className="flex justify-between gap-2">
-                        <span className="truncate">{label(tag.name)}</span>
-                        <span className="text-muted-foreground tabular-nums">
-                            {formatPlaytime(tag.minutes)} · {t('STATS.TASTE.GAMES', {count: tag.games})}
-                        </span>
-                    </div>
-                    <div className="mt-1 h-1.5 rounded-full bg-muted">
-                        <div className="h-full rounded-full bg-primary"
-                             style={{width: `${Math.max(2, (tag.minutes / max) * 100)}%`}}/>
-                    </div>
+                    <DrillRow onSelect={onSelect && (() => onSelect(tag, label(tag.name)))}>
+                        <div className="flex justify-between gap-2">
+                            <span className="truncate">{label(tag.name)}</span>
+                            <span className="text-muted-foreground tabular-nums">
+                                {formatPlaytime(tag.minutes)} · {t('STATS.TASTE.GAMES', {count: tag.games})}
+                            </span>
+                        </div>
+                        <div className="mt-1 h-1.5 rounded-full bg-muted">
+                            <div className="h-full rounded-full bg-primary"
+                                 style={{width: `${Math.max(2, (tag.minutes / max) * 100)}%`}}/>
+                        </div>
+                    </DrillRow>
                 </li>
             ))}
         </ul>
@@ -30,6 +36,7 @@ export function TagBars({tags, label = (name) => name}) {
 
 export default function TasteStats({taste}) {
     const {t} = useTranslation();
+    const select = useTagDrill();
     if (taste.genres.length === 0 && taste.moods.length === 0) {
         return (
             <StatsSection title={t('STATS.TASTE.TITLE')} icon={Palette}>
@@ -42,12 +49,12 @@ export default function TasteStats({taste}) {
             <div className="grid gap-6 sm:grid-cols-2">
                 <div className="space-y-2">
                     <span className="text-sm font-medium">{t('STATS.TASTE.GENRES')}</span>
-                    <TagBars tags={taste.genres}
+                    <TagBars tags={taste.genres} onSelect={select('GENRE')}
                              label={(name) => t(`STATS.GENRE.${genreKey(name)}`, {defaultValue: name})}/>
                 </div>
                 <div className="space-y-2">
                     <span className="text-sm font-medium">{t('STATS.TASTE.MOODS')}</span>
-                    <TagBars tags={taste.moods} label={(name) => t(`PLAY_NEXT.MOOD.${name}`, {defaultValue: name})}/>
+                    <TagBars tags={taste.moods} onSelect={select('MOOD')} label={(name) => t(`PLAY_NEXT.MOOD.${name}`, {defaultValue: name})}/>
                 </div>
             </div>
         </StatsSection>

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>

src/pages/Dashboard.jsx

@@ -23,6 +23,7 @@ import useSteamProfile from '../hooks/useSteamProfile.js';
 import useUserStats from '../hooks/useUserStats.js';
 import useSaveResponse from '../hooks/useSaveResponse.js';
 import TileGrid from '../components/TileGrid.jsx';
+import {StatDrillProvider} from '../components/stats/StatDrill.jsx';
 import statGroupTile from '../components/stats/statGroupTile.jsx';
 import {
     DASHBOARD_TILES, DASHBOARD_TITLES, DEFAULT_DASHBOARD, normalizeLayout, PLAYING_GAMES, saveTiles, statGroup, TOP_GAMES,
@@ -122,18 +123,20 @@ const Dashboard = () => {
     };
 
     return (
-        <PageContainer className="p-4 md:p-8 space-y-6">
-            <DashboardWelcomeCard bannerAppid={bannerAppid} avatarUrl={steamProfile?.avatarUrl}
-                                  equipped={equipped}
-                                  sync={sync} forceSync={forceSync} editing={editing} onCustomize={() => setEditing(true)}/>
+        <StatDrillProvider source="own">
+            <PageContainer className="p-4 md:p-8 space-y-6">
+                <DashboardWelcomeCard bannerAppid={bannerAppid} avatarUrl={steamProfile?.avatarUrl}
+                                      equipped={equipped}
+                                      sync={sync} forceSync={forceSync} editing={editing} onCustomize={() => setEditing(true)}/>
 
-            <TileGrid tiles={DASHBOARD_TILES} titles={DASHBOARD_TITLES} layout={layout} renderTile={renderTile} editing={editing}
-                      defaultLayout={DEFAULT_DASHBOARD} onSave={saveLayout} onCancel={() => setEditing(false)}/>
-            <WhatsNewDialog/>
-            {/* Last child: space-y gives every other child a bottom margin, which would move the fixed card. */}
-            <DashboardHint user={userData} summary={summaryFailed ? null : summary ?? undefined}
-                           trend={stats.failed ? null : stats.stats ? stats.stats.trend ?? null : undefined}/>
-        </PageContainer>
+                <TileGrid tiles={DASHBOARD_TILES} titles={DASHBOARD_TITLES} layout={layout} renderTile={renderTile} editing={editing}
+                          defaultLayout={DEFAULT_DASHBOARD} onSave={saveLayout} onCancel={() => setEditing(false)}/>
+                <WhatsNewDialog/>
+                {/* Last child: space-y gives every other child a bottom margin, which would move the fixed card. */}
+                <DashboardHint user={userData} summary={summaryFailed ? null : summary ?? undefined}
+                               trend={stats.failed ? null : stats.stats ? stats.stats.trend ?? null : undefined}/>
+            </PageContainer>
+        </StatDrillProvider>
     );
 };
 

src/pages/LandingPage.jsx

@@ -14,12 +14,16 @@ import Logo from '../components/Logo.jsx';
 import StatCard from '../components/StatCard.jsx';
 import {YearBars} from '../components/stats/FinishedStats.jsx';
 import {TagBars} from '../components/stats/TasteStats.jsx';
+import {StatDrillProvider, useStatDrill, useTagDrill} from '../components/stats/StatDrill.jsx';
 import useSession from '../hooks/useSession.js';
 import {genreKey} from '../utils/stats.js';
+import {gameHref} from '../utils/statGames.js';
 
 import usePublicStats from '../hooks/usePublicStats.js';
 
-function RankedGames({title, games, formatValue}) {
+function RankedGames({title, games, formatValue, drillKey}) {
+    const {t} = useTranslation();
+    const drill = useStatDrill();
     return (
         <Card className="gap-0 py-0">
             <h3 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">
@@ -31,15 +35,58 @@ function RankedGames({title, games, formatValue}) {
                     <li key={g.appid} className="flex items-center gap-3 px-5 py-3">
                         <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">{idx + 1}</span>
                         <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 shrink-0"/>
-                        <span className="@container min-w-0 flex-1 font-medium"><FitText text={g.name ?? `App ${g.appid}`}/></span>
+                        <GameName game={g}/>
                         <span className="text-sm text-muted-foreground tabular-nums">{formatValue(g.value ?? 0)}</span>
                     </li>
                 ))}
             </ol>
+            {drill && (
+                <Button variant="ghost" className="m-2 self-start max-sm:min-h-11"
+                        onClick={() => drill.open(title, {key: drillKey})}>
+                    {t('STATS.DRILL.SHOW_ALL')}
+                </Button>
+            )}
         </Card>
     );
 }
 
+function GameName({game}) {
+    const href = gameHref(game.appid, false);
+    const name = <FitText text={game.name ?? `App ${game.appid}`}/>;
+    return (
+        <span className="@container min-w-0 flex-1 font-medium">
+            {href ? <a href={href} target="_blank" rel="noopener noreferrer" className="hover:text-primary">{name}</a> : name}
+        </span>
+    );
+}
+
+function CommunityBars({core}) {
+    const {t} = useTranslation();
+    const drill = useStatDrill();
+    const select = useTagDrill();
+    const genreLabel = (name) => t(`STATS.GENRE.${genreKey(name)}`, {defaultValue: name});
+    return (
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+            {core?.gamesPerPlatform?.length > 0 && (
+                <BarsCard title={t('LANDING.PLATFORMS')}>
+                    <TagBars tags={core.gamesPerPlatform} onSelect={select('PLATFORM')}/>
+                </BarsCard>
+            )}
+            {core?.topGenres?.length > 0 && (
+                <BarsCard title={t('LANDING.TOP_GENRES')}>
+                    <TagBars tags={core.topGenres} label={genreLabel} onSelect={select('GENRE')}/>
+                </BarsCard>
+            )}
+            {core?.finishedPerYear?.length > 0 && (
+                <BarsCard title={t('LANDING.FINISHED_PER_YEAR')}>
+                    <YearBars perYear={core.finishedPerYear}
+                              onSelect={drill && ((year) => drill.open(`${t('LANDING.FINISHED_PER_YEAR')}: ${year}`, {key: 'FINISHED_YEAR', arg: year}))}/>
+                </BarsCard>
+            )}
+        </div>
+    );
+}
+
 function BarsCard({title, children}) {
     return (
         <Card className="gap-0 py-0">
@@ -60,81 +107,69 @@ export default function LandingPage() {
     const stats = [
         [t('LANDING.TOTAL_USERS'), auth?.totalUsers, Users],
         [t('LANDING.STEAM_LINKED'), auth?.usersWithSteamLinked, Link2],
-        [t('LANDING.TOTAL_GAMES'), core?.totalLibraryEntries, Gamepad2],
-        [t('LANDING.GAMES_PLAYED'), core?.totalGamesPlayed, Sparkles],
-        [t('LANDING.DISTINCT_GAMES'), core?.totalDistinctGames, Blocks],
+        [t('LANDING.TOTAL_GAMES'), core?.totalLibraryEntries, Gamepad2, undefined, 'ENTRIES'],
+        [t('LANDING.GAMES_PLAYED'), core?.totalGamesPlayed, Sparkles, undefined, 'PLAYED'],
+        [t('LANDING.DISTINCT_GAMES'), core?.totalDistinctGames, Blocks, undefined, 'OWNED'],
         [t('LANDING.TOTAL_PLAYTIME_DAYS'), core?.totalPlaytimeDays, Clock, ` ${t('LANDING.DAYS_SUFFIX')}`],
         [t('LANDING.BIGGEST_LIBRARY'), core?.biggestLibrary, Library],
         [t('LANDING.BIGGEST_BACKLOG'), core?.biggestBacklog, Archive],
     ];
 
     return (
-        <div className="grow">
-            <section className="relative overflow-hidden border-b">
-                <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-primary/15 via-primary/5 to-transparent"/>
-                <div className="relative mx-auto max-w-3xl px-4 py-20 text-center md:py-28">
-                    <Badge variant="outline" className="mb-6 gap-1.5 bg-background/60">
-                        <span className="flex"><Logo className="h-4 w-auto"/></span> ToBePlayed
-                    </Badge>
-                    <h1 className="text-4xl font-bold tracking-tight md:text-6xl">{t('MAIN.WELCOME')}</h1>
-                    <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">{t('MAIN.DESCRIPTION')}</p>
-                    <Button asChild size="lg" className="mt-10">
-                        {active ? (
-                            <Link to="/dashboard">{t('NAV.TO_DASHBOARD')}<ArrowRight/></Link>
-                        ) : (
-                            <Link to="/login">{t('MAIN.GET_STARTED')}<ArrowRight/></Link>
+        <StatDrillProvider source="community">
+            <div className="grow">
+                <section className="relative overflow-hidden border-b">
+                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-primary/15 via-primary/5 to-transparent"/>
+                    <div className="relative mx-auto max-w-3xl px-4 py-20 text-center md:py-28">
+                        <Badge variant="outline" className="mb-6 gap-1.5 bg-background/60">
+                            <span className="flex"><Logo className="h-4 w-auto"/></span> ToBePlayed
+                        </Badge>
+                        <h1 className="text-4xl font-bold tracking-tight md:text-6xl">{t('MAIN.WELCOME')}</h1>
+                        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">{t('MAIN.DESCRIPTION')}</p>
+                        <Button asChild size="lg" className="mt-10">
+                            {active ? (
+                                <Link to="/dashboard">{t('NAV.TO_DASHBOARD')}<ArrowRight/></Link>
+                            ) : (
+                                <Link to="/login">{t('MAIN.GET_STARTED')}<ArrowRight/></Link>
+                            )}
+                        </Button>
+                    </div>
+                </section>
+
+                <section className="mx-auto w-full max-w-5xl space-y-8 px-4 py-12 md:px-8 md:py-16">
+                    <h2 className="text-center text-2xl font-bold tracking-tight">{t('LANDING.STATS_TITLE')}</h2>
+
+                    <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+                        {isLoading
+                            ? stats.map(([label]) => <Skeleton key={label} className="h-36 rounded-xl"/>)
+                            : stats.map(([label, value, icon, suffix, key]) => (
+                                <StatCard key={label} label={label} value={value ?? 0} icon={icon} suffix={suffix}
+                                          drill={key && {params: {key}}}/>
+                            ))}
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                        {core?.topPlayedGames?.length > 0 && (
+                            <RankedGames
+                                title={t('LANDING.TOP_PLAYED')}
+                                games={core.topPlayedGames}
+                                formatValue={(minutes) => `${Math.round(minutes / 60).toLocaleString(i18n.language)}h`}
+                                drillKey="MOST_PLAYED"
+                            />
                         )}
-                    </Button>
-                </div>
-            </section>
+                        {core?.topOwnedGames?.length > 0 && (
+                            <RankedGames
+                                title={t('LANDING.TOP_OWNED')}
+                                games={core.topOwnedGames}
+                                formatValue={(count) => count.toLocaleString(i18n.language)}
+                                drillKey="OWNED"
+                            />
+                        )}
+                    </div>
 
-            <section className="mx-auto w-full max-w-5xl space-y-8 px-4 py-12 md:px-8 md:py-16">
-                <h2 className="text-center text-2xl font-bold tracking-tight">{t('LANDING.STATS_TITLE')}</h2>
-
-                <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
-                    {isLoading
-                        ? stats.map(([label]) => <Skeleton key={label} className="h-36 rounded-xl"/>)
-                        : stats.map(([label, value, icon, suffix]) => (
-                            <StatCard key={label} label={label} value={value ?? 0} icon={icon} suffix={suffix}/>
-                        ))}
-                </div>
-
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                    {core?.topPlayedGames?.length > 0 && (
-                        <RankedGames
-                            title={t('LANDING.TOP_PLAYED')}
-                            games={core.topPlayedGames}
-                            formatValue={(minutes) => `${Math.round(minutes / 60).toLocaleString(i18n.language)}h`}
-                        />
-                    )}
-                    {core?.topOwnedGames?.length > 0 && (
-                        <RankedGames
-                            title={t('LANDING.TOP_OWNED')}
-                            games={core.topOwnedGames}
-                            formatValue={(count) => count.toLocaleString(i18n.language)}
-                        />
-                    )}
-                </div>
-
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-                    {core?.gamesPerPlatform?.length > 0 && (
-                        <BarsCard title={t('LANDING.PLATFORMS')}>
-                            <TagBars tags={core.gamesPerPlatform}/>
-                        </BarsCard>
-                    )}
-                    {core?.topGenres?.length > 0 && (
-                        <BarsCard title={t('LANDING.TOP_GENRES')}>
-                            <TagBars tags={core.topGenres}
-                                     label={(name) => t(`STATS.GENRE.${genreKey(name)}`, {defaultValue: name})}/>
-                        </BarsCard>
-                    )}
-                    {core?.finishedPerYear?.length > 0 && (
-                        <BarsCard title={t('LANDING.FINISHED_PER_YEAR')}>
-                            <YearBars perYear={core.finishedPerYear}/>
-                        </BarsCard>
-                    )}
-                </div>
-            </section>
-        </div>
+                    <CommunityBars core={core}/>
+                </section>
+            </div>
+        </StatDrillProvider>
     );
 }

src/pages/LandingPage.test.jsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import {afterEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, render, screen} from '@testing-library/react';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
 import LandingPage from './LandingPage.jsx';
 import {fetchRoutes, json} from '../test/fetchRoutes.js';
@@ -42,4 +42,20 @@ describe('LandingPage', () => {
             expect(screen.queryByText(`LANDING.${title}`)).toBeNull();
         }
     });
+
+    it('opensTheGamesBehindTheTotalButNotBehindOneUsersLibrary', async () => {
+        fetchRoutes({
+            'GET /api/stats/public': json(200, {topPlayedGames: [], topOwnedGames: [], totalLibraryEntries: 9, biggestLibrary: 4}),
+            'GET /api/stats/public/games': json(200, {content: [{appid: 3, name: 'Common', libraries: 2, minutes: 60}],
+                page: 0, size: 40, totalElements: 1, totalPages: 1}),
+        });
+        renderPage();
+
+        fireEvent.click(await screen.findByRole('button', {name: /LANDING\.TOTAL_GAMES/}));
+
+        expect(await screen.findByText('Common')).toBeTruthy();
+        expect(fetch.mock.calls.at(-1)[0]).toContain('/api/stats/public/games?key=ENTRIES&page=0');
+        expect(screen.queryByRole('button', {name: /LANDING\.BIGGEST_LIBRARY/})).toBeNull();
+        expect(screen.queryByRole('button', {name: /LANDING\.TOTAL_USERS/})).toBeNull();
+    });
 });

src/pages/PointsPage.jsx

@@ -12,6 +12,7 @@ import {cn} from '@/lib/utils';
 import EffectBackground from '../components/EffectBackground.jsx';
 import FitText from '../components/FitText.jsx';
 import PageContainer from '../components/PageContainer.jsx';
+import {StatCount, StatDrillProvider, useDrillTarget} from '../components/stats/StatDrill.jsx';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import useInView from '../hooks/useInView.js';
 import {formatDate} from '../utils/format.js';
@@ -60,95 +61,103 @@ export default function PointsPage() {
             );
         }
         if (['BUY', 'UNLOCK'].includes(entry.kind)) return t(`POINTS.ITEMS.${entry.ref}`);
-        if (['MONTH', 'STREAK'].includes(entry.kind)) return entry.ref;
+        if (['MONTH', 'STREAK'].includes(entry.kind)) {
+            return (
+                <StatCount params={{kind: entry.kind, ref: entry.ref}} title={`${t(`POINTS.KINDS.${entry.kind}`)} ${entry.ref}`}>
+                    {entry.ref}
+                </StatCount>
+            );
+        }
         return null;
     };
 
     return (
-        <PageContainer className="p-4 md:p-8 space-y-6">
-            <div>
-                <h1 className="text-3xl font-bold tracking-tight">{t('POINTS.TITLE')}</h1>
-                <p className="mt-2 flex items-center gap-2 text-lg">
-                    <Coins className="size-5 text-primary"/>
-                    {t('POINTS.BALANCE')}: <span className="font-bold tabular-nums">{wallet.balance}</span>
-                </p>
-            </div>
+        <StatDrillProvider source="points">
+            <PageContainer className="p-4 md:p-8 space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">{t('POINTS.TITLE')}</h1>
+                    <p className="mt-2 flex items-center gap-2 text-lg">
+                        <Coins className="size-5 text-primary"/>
+                        {t('POINTS.BALANCE')}: <span className="font-bold tabular-nums">{wallet.balance}</span>
+                    </p>
+                </div>
 
-            <Card className="gap-2 p-5">
-                <h2 className="font-semibold">{t('POINTS.HOW_TO')}</h2>
-                <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
-                    {HOW_TO.map((kind) => <li key={kind}>{t(`POINTS.RULES.${kind}`)}</li>)}
-                </ul>
-            </Card>
+                <Card className="gap-2 p-5">
+                    <h2 className="font-semibold">{t('POINTS.HOW_TO')}</h2>
+                    <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
+                        {HOW_TO.map((kind) => <li key={kind}>{t(`POINTS.RULES.${kind}`)}</li>)}
+                    </ul>
+                </Card>
 
-            <section className="space-y-4">
-                <h2 className="text-xl font-semibold">{t('POINTS.SHOP')}</h2>
-                {SLOTS.map((slot) => (
-                    <Card key={slot} className="gap-3 p-5">
-                        <h3 className="font-medium">{t(`POINTS.SLOTS.${slot}`)}</h3>
-                        <ul className="divide-y">
-                            {wallet.catalog.filter((item) => item.slot === slot).map((item) => {
-                                const owned = wallet.owned.includes(item.code);
-                                const worn = wallet.equipped[slot] === item.code;
-                                const locked = !owned && item.track;
-                                return (
-                                    <li key={item.code} className="flex items-center gap-3 py-3">
-                                        <Preview code={item.code}/>
-                                        <span className="min-w-0 flex-1 truncate font-medium">{t(`POINTS.ITEMS.${item.code}`)}</span>
-                                        {worn && <Badge variant="secondary">{t('POINTS.EQUIPPED')}</Badge>}
-                                        {owned ? (
-                                            <Button size="sm" variant="outline"
-                                                    onClick={() => act(() => equipItem(slot, worn ? null : item.code))}>
-                                                {t(worn ? 'POINTS.UNEQUIP' : 'POINTS.EQUIP')}
-                                            </Button>
-                                        ) : locked ? (
-                                            <LockedProgress item={item} progress={wallet.progress?.[item.track] ?? 0}/>
-                                        ) : (
-                                            <>
-                                                <span className="text-sm tabular-nums text-muted-foreground">{item.price}</span>
-                                                <Button size="sm" disabled={wallet.balance < item.price}
-                                                        onClick={() => act(() => buyItem(item.code))}>
-                                                    {t('POINTS.BUY')}
+                <section className="space-y-4">
+                    <h2 className="text-xl font-semibold">{t('POINTS.SHOP')}</h2>
+                    {SLOTS.map((slot) => (
+                        <Card key={slot} className="gap-3 p-5">
+                            <h3 className="font-medium">{t(`POINTS.SLOTS.${slot}`)}</h3>
+                            <ul className="divide-y">
+                                {wallet.catalog.filter((item) => item.slot === slot).map((item) => {
+                                    const owned = wallet.owned.includes(item.code);
+                                    const worn = wallet.equipped[slot] === item.code;
+                                    const locked = !owned && item.track;
+                                    return (
+                                        <li key={item.code} className="flex items-center gap-3 py-3">
+                                            <Preview code={item.code}/>
+                                            <span className="min-w-0 flex-1 truncate font-medium">{t(`POINTS.ITEMS.${item.code}`)}</span>
+                                            {worn && <Badge variant="secondary">{t('POINTS.EQUIPPED')}</Badge>}
+                                            {owned ? (
+                                                <Button size="sm" variant="outline"
+                                                        onClick={() => act(() => equipItem(slot, worn ? null : item.code))}>
+                                                    {t(worn ? 'POINTS.UNEQUIP' : 'POINTS.EQUIP')}
                                                 </Button>
-                                            </>
+                                            ) : locked ? (
+                                                <LockedProgress item={item} progress={wallet.progress?.[item.track] ?? 0}/>
+                                            ) : (
+                                                <>
+                                                    <span className="text-sm tabular-nums text-muted-foreground">{item.price}</span>
+                                                    <Button size="sm" disabled={wallet.balance < item.price}
+                                                            onClick={() => act(() => buyItem(item.code))}>
+                                                        {t('POINTS.BUY')}
+                                                    </Button>
+                                                </>
+                                            )}
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        </Card>
+                    ))}
+                </section>
+
+                <Card className="gap-3 p-5">
+                    <h2 className="text-xl font-semibold">{t('POINTS.HISTORY')}</h2>
+                    {wallet.history.length === 0 ? (
+                        <p className="text-sm text-muted-foreground">{t('POINTS.EMPTY_HISTORY')}</p>
+                    ) : (
+                        <ul className="divide-y">
+                            {wallet.history.map((entry) => {
+                                const label = entryLabel(entry);
+                                return (
+                                    <li key={`${entry.kind}-${entry.ref}-${entry.eventAt}`} className="@container flex items-center gap-3 py-2 text-sm">
+                                        <span className="w-24 shrink-0 text-muted-foreground tabular-nums">
+                                            {formatDate(entry.eventAt, i18n.language)}
+                                        </span>
+                                        <span className="flex min-w-0 flex-1 gap-1">
+                                            <span className="min-w-0 truncate">{t(`POINTS.KINDS.${entry.kind}`)}</span>
+                                            {label && <span className="min-w-0 truncate">{label}</span>}
+                                        </span>
+                                        {entry.points !== 0 && (
+                                            <span className={cn('font-semibold tabular-nums', entry.points < 0 && 'text-muted-foreground')}>
+                                                {entry.points > 0 ? `+${entry.points}` : entry.points}
+                                            </span>
                                         )}
                                     </li>
                                 );
                             })}
                         </ul>
-                    </Card>
-                ))}
-            </section>
-
-            <Card className="gap-3 p-5">
-                <h2 className="text-xl font-semibold">{t('POINTS.HISTORY')}</h2>
-                {wallet.history.length === 0 ? (
-                    <p className="text-sm text-muted-foreground">{t('POINTS.EMPTY_HISTORY')}</p>
-                ) : (
-                    <ul className="divide-y">
-                        {wallet.history.map((entry) => {
-                            const label = entryLabel(entry);
-                            return (
-                                <li key={`${entry.kind}-${entry.ref}-${entry.eventAt}`} className="@container flex items-center gap-3 py-2 text-sm">
-                                    <span className="w-24 shrink-0 text-muted-foreground tabular-nums">
-                                        {formatDate(entry.eventAt, i18n.language)}
-                                    </span>
-                                    <span className="flex min-w-0 flex-1 gap-1">
-                                        <span className="min-w-0 truncate">{t(`POINTS.KINDS.${entry.kind}`)}</span>
-                                        {label && <span className="min-w-0 truncate">{label}</span>}
-                                    </span>
-                                    {entry.points !== 0 && (
-                                        <span className={cn('font-semibold tabular-nums', entry.points < 0 && 'text-muted-foreground')}>
-                                            {entry.points > 0 ? `+${entry.points}` : entry.points}
-                                        </span>
-                                    )}
-                                </li>
-                            );
-                        })}
-                    </ul>
-                )}
-            </Card>
-        </PageContainer>
+                    )}
+                </Card>
+            </PageContainer>
+        </StatDrillProvider>
     );
 }
 
@@ -192,8 +201,15 @@ function LockedProgress({item, progress}) {
     const {t} = useTranslation();
     const count = Math.min(progress, item.target);
     const text = t(`POINTS.PROGRESS.${item.track}`, {count, target: item.target});
+    // Playtime months compare two numbers: no list of games shows them.
+    const target = useDrillTarget({
+        params: item.track === 'PLAY_MORE_MONTHS' ? null : {track: item.track}, title: t(`POINTS.ITEMS.${item.code}`),
+    });
+    const className = 'flex w-40 shrink-0 flex-col gap-1 text-xs text-muted-foreground';
+    const Wrapper = target ? 'button' : 'div';
     return (
-        <div className="flex w-40 shrink-0 flex-col gap-1 text-xs text-muted-foreground">
+        <Wrapper {...(target && {type: 'button', onClick: target.onClick})}
+                 className={cn(className, target && 'min-h-11 text-left hover:text-primary focus-visible:ring-2 focus-visible:ring-ring rounded-sm')}>
             <span className="flex items-center gap-1">
                 <LockKeyhole className="size-3 shrink-0"/>
                 <span title={text}>{text}</span>
@@ -202,6 +218,6 @@ function LockedProgress({item, progress}) {
                  aria-valuemax={item.target} className="h-1.5 overflow-hidden rounded-full bg-muted">
                 <div className="h-full bg-primary" style={{width: `${(count / item.target) * 100}%`}}/>
             </div>
-        </div>
+        </Wrapper>
     );
 }

src/pages/PointsPage.test.jsx

@@ -90,6 +90,34 @@ describe('PointsPage', () => {
         const bar = within(item).getByRole('progressbar');
         expect(bar.getAttribute('aria-valuenow')).toBe('7');
         expect(bar.getAttribute('aria-valuemax')).toBe('10');
+        expect(within(item).queryByRole('button', {name: 'POINTS.BUY'})).toBeNull();
+    });
+
+    it('opens the games behind a locked bar, and the history of a month', async () => {
+        const page = (appid) => json(200, {content: [{appid, name: `G${appid}`, status: 'FINISHED', at: '2026-09-01T10:00:00Z'}],
+            page: 0, size: 40, totalElements: 1, totalPages: 1, untracked: 3});
+        await renderPage({
+            'GET /api/rewards/progress/GAMES_FINISHED/games': page(1),
+            'GET /api/rewards/history/MONTH/2026-09/games': page(2),
+        });
+
+        const bar = screen.getByText('POINTS.ITEMS.BADGE_FINISH_10').closest('li');
+        fireEvent.click(within(bar).getByRole('button'));
+        expect(await screen.findByText('G1')).toBeTruthy();
+        expect(screen.getByText('STATS.FINISHED.BEFORE:3')).toBeTruthy();
+        fireEvent.keyDown(document.activeElement, {key: 'Escape'});
+        await waitFor(() => expect(screen.queryByText('G1')).toBeNull());
+
+        fireEvent.click(screen.getByRole('button', {name: '2026-09'}));
+        expect(await screen.findByText('G2')).toBeTruthy();
+    });
+
+    it('shows no button on a playtime-month bar', async () => {
+        await renderPage({'GET /api/rewards/wallet': json(200, wallet({
+            catalog: [{code: 'BADGE_MONTHS', slot: 'BADGE', price: 0, track: 'PLAY_MORE_MONTHS', target: 3}],
+        }))});
+
+        const item = screen.getByText('POINTS.ITEMS.BADGE_MONTHS').closest('li');
         expect(within(item).queryByRole('button')).toBeNull();
     });
 

src/pages/PublicProfilePage.jsx

@@ -24,6 +24,7 @@ import HeroBanner from '../components/HeroBanner.jsx';
 import PageBackground from '../components/PageBackground.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import TileGrid from '../components/TileGrid.jsx';
+import {StatCount, StatDrillProvider} from '../components/stats/StatDrill.jsx';
 import statGroupTile from '../components/stats/statGroupTile.jsx';
 
 // Games per tile size; Core sends at most 8 playing and 12 finished games.
@@ -177,8 +178,11 @@ export default function PublicProfilePage() {
                         </Button>
                     )}
                 </Card>
-                <TileGrid tiles={PROFILE_TILES} titles={PROFILE_TITLES} layout={layout} renderTile={renderTile} editing={owner && editing}
-                          defaultLayout={DEFAULT_PROFILE} onSave={saveLayout} onCancel={() => setEditing(false)}/>
+                <StatDrillProvider source="profile" ticket={profile.ticket}>
+                    <TileGrid tiles={PROFILE_TILES} titles={PROFILE_TITLES} layout={layout} renderTile={renderTile}
+                              editing={owner && editing} defaultLayout={DEFAULT_PROFILE} onSave={saveLayout}
+                              onCancel={() => setEditing(false)}/>
+                </StatDrillProvider>
             </PageContainer>
         </div>
     );
@@ -187,22 +191,25 @@ export default function PublicProfilePage() {
 function Summary({library, compact}) {
     const {t, i18n} = useTranslation();
     const stats = [
-        [Library, library.totalGames.toLocaleString(i18n.language), t('PROFILE.GAMES')],
+        [Library, library.totalGames.toLocaleString(i18n.language), t('PROFILE.GAMES'), 'TOTAL', library.totalGames],
         [Clock, formatPlaytime(library.totalPlaytimeMinutes), t('PROFILE.PLAYTIME')],
-        [CircleCheck, (library.finishedGames ?? 0).toLocaleString(i18n.language), t('PROFILE.FINISHED')],
+        [CircleCheck, (library.finishedGames ?? 0).toLocaleString(i18n.language), t('PROFILE.FINISHED'), 'FINISHED_ALL', library.finishedGames],
     ];
     if (library.averageCompletion != null) {
         stats.push(
-            [Trophy, (library.perfectGames ?? 0).toLocaleString(i18n.language), t('PROFILE.PERFECT_GAMES')],
+            [Trophy, (library.perfectGames ?? 0).toLocaleString(i18n.language), t('PROFILE.PERFECT_GAMES'), 'PERFECT', library.perfectGames],
             [Percent, `${library.averageCompletion.toLocaleString(i18n.language)} %`, t('PROFILE.AVERAGE_COMPLETION')],
         );
     }
     return (
         <Card className={cn('grid gap-3 p-5', stats.length > 3 && !compact ? 'grid-cols-2 sm:grid-cols-5' : 'grid-cols-3')}>
-            {stats.map(([Icon, value, label]) => (
+            {stats.map(([Icon, value, label, key, count]) => (
                 <div key={label} className="rounded-lg bg-muted/50 p-3 text-center">
                     <Icon className="mx-auto mb-1 size-4 text-primary"/>
-                    <div className="text-xl md:text-2xl font-bold tabular-nums">{value}</div>
+                    <div className="text-xl md:text-2xl font-bold tabular-nums">
+                        <StatCount params={count > 0 ? {key} : null} title={label}
+                                   label={`${label}: ${value}`}>{value}</StatCount>
+                    </div>
                     <div className="text-xs text-muted-foreground">{label}</div>
                 </div>
             ))}
@@ -225,7 +232,10 @@ function StatusBar({byStatus}) {
                     <li key={s} className="flex items-center gap-1.5">
                         <span className={`size-2 rounded-full ${STATUS_META[s].bar}`}/>
                         {t(`BACKLOG.STATUS.${s}`)}
-                        <span className="tabular-nums text-foreground">{byStatus[s] ?? 0}</span>
+                        <StatCount params={byStatus[s] > 0 ? {key: 'STATUS', arg: s} : null} title={t(`BACKLOG.STATUS.${s}`)}
+                                   label={`${t(`BACKLOG.STATUS.${s}`)}: ${byStatus[s] ?? 0}`}>
+                            <span className="tabular-nums text-foreground">{byStatus[s] ?? 0}</span>
+                        </StatCount>
                     </li>
                 ))}
             </ul>

src/pages/PublicProfilePage.test.jsx

@@ -15,12 +15,13 @@ const library = {
 };
 
 // `me` only for a test with a session: without one the page asks nothing about the viewer.
-function mockBackends({name = 'Lobo', profileStatus = 200, libraryStatus = 200, style, answer = library, me, equipped = {}, rewardsStatus = 200} = {}) {
+function mockBackends({name = 'Lobo', profileStatus = 200, libraryStatus = 200, style, answer = library, me, equipped = {}, rewardsStatus = 200, extra = {}} = {}) {
     fetchRoutes({
         [`GET /api/public/profiles/${encodeURIComponent(name)}`]:
             json(profileStatus, {displayName: 'Lobo', memberSince: '2026-03-02', ticket: 'the-ticket', style}),
         'GET /api/public/profiles/library': json(libraryStatus, answer),
         'GET /api/public/profiles/rewards': json(rewardsStatus, {equipped}),
+        ...extra,
         ...(me && {
             'GET /api/users/me': json(200, me),
             'PUT /api/users/settings/profile-tiles': json(204, {}),
@@ -260,4 +261,33 @@ describe('PublicProfilePage', () => {
 
         await waitFor(() => expect(screen.getByText('PROFILE.ERROR_LOAD')).toBeTruthy());
     });
+
+    it('opensTheGamesBehindAStatusCountWithTheTicket', async () => {
+        mockBackends({extra: {'GET /api/public/profiles/library/stats/games': json(200, {
+            content: [{appid: 1, name: 'Backlogged', status: 'BACKLOG', playtimeMinutes: 0}], page: 0, size: 40, totalElements: 1, totalPages: 1})}});
+        const {container} = renderPage();
+
+        fireEvent.click(await screen.findByRole('button', {name: 'BACKLOG.STATUS.BACKLOG: 142'}));
+
+        expect(await screen.findByText('Backlogged')).toBeTruthy();
+        const call = fetch.mock.calls.find(([url]) => url.includes('/stats/games'));
+        expect(call[0]).toContain('key=STATUS&arg=BACKLOG');
+        expect(call[1].headers['X-Profile-Ticket']).toBe('the-ticket');
+        expect(container.querySelector('a[href^="/library"]')).toBeNull();
+    });
+
+    it('rendersNoButtonForAGroupTheOwnerDoesNotShare', async () => {
+        library.stats = {pile: null, trend: null, topGames: null, taste: null, finished: null,
+            habits: {moonTrips: 2.5, longestDay: null, underOneHourGames: 0, underOneHourShare: null}};
+        try {
+            mockBackends({style: {tiles: [{id: 'STATS_HABITS', size: 'M'}, {id: 'STATS_PILE', size: 'M'}]}});
+            renderPage();
+
+            await screen.findByText('STATS.HABITS.TITLE');
+
+            expect(screen.queryByRole('button', {name: /STATS\.PILE/})).toBeNull();
+        } finally {
+            delete library.stats;
+        }
+    });
 });

src/pages/StatsPage.jsx

@@ -12,6 +12,7 @@ import TasteStats from '../components/stats/TasteStats.jsx';
 import HabitsStats from '../components/stats/HabitsStats.jsx';
 import FinishedStats from '../components/stats/FinishedStats.jsx';
 import PlatformStats from '../components/stats/PlatformStats.jsx';
+import {StatDrillProvider} from '../components/stats/StatDrill.jsx';
 import useUserStats from '../hooks/useUserStats.js';
 
 const ALL_GROUPS = [];
@@ -21,38 +22,40 @@ export default function StatsPage() {
     const {stats, failed, reload} = useUserStats(ALL_GROUPS);
 
     return (
-        <PageContainer className="p-4 md:p-8 space-y-6">
-            <div>
-                <h1 className="text-3xl font-bold tracking-tight">{t('STATS.TITLE')}</h1>
-                <p className="mt-1 text-sm text-muted-foreground">{t('STATS.SUBTITLE')}</p>
-            </div>
-
-            {failed && (
-                <div className="flex flex-col items-center gap-3 py-12 text-sm text-muted-foreground">
-                    {t('STATS.ERROR_LOAD')}
-                    <Button variant="outline" size="sm" onClick={reload}><RefreshCw/>{t('DASHBOARD.RETRY')}</Button>
+        <StatDrillProvider source="own">
+            <PageContainer className="p-4 md:p-8 space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">{t('STATS.TITLE')}</h1>
+                    <p className="mt-1 text-sm text-muted-foreground">{t('STATS.SUBTITLE')}</p>
                 </div>
-            )}
 
-            {!stats && !failed && (
-                <div className="grid gap-6 md:grid-cols-2">
-                    <Skeleton className="h-48 rounded-xl"/>
-                    <Skeleton className="h-48 rounded-xl"/>
-                </div>
-            )}
+                {failed && (
+                    <div className="flex flex-col items-center gap-3 py-12 text-sm text-muted-foreground">
+                        {t('STATS.ERROR_LOAD')}
+                        <Button variant="outline" size="sm" onClick={reload}><RefreshCw/>{t('DASHBOARD.RETRY')}</Button>
+                    </div>
+                )}
 
-            {stats && (
-                <div className="grid gap-6 md:grid-cols-2">
-                    <div className="md:col-span-2"><OverviewStats overview={stats.overview}/></div>
-                    <PileStats pile={stats.pile}/>
-                    <TrendStats trend={stats.trend}/>
-                    <TopGamesStats topGames={stats.topGames}/>
-                    <TasteStats taste={stats.taste}/>
-                    <PlatformStats platforms={stats.platforms}/>
-                    <HabitsStats habits={stats.habits}/>
-                    <FinishedStats finished={stats.finished}/>
-                </div>
-            )}
-        </PageContainer>
+                {!stats && !failed && (
+                    <div className="grid gap-6 md:grid-cols-2">
+                        <Skeleton className="h-48 rounded-xl"/>
+                        <Skeleton className="h-48 rounded-xl"/>
+                    </div>
+                )}
+
+                {stats && (
+                    <div className="grid gap-6 md:grid-cols-2">
+                        <div className="md:col-span-2"><OverviewStats overview={stats.overview}/></div>
+                        <PileStats pile={stats.pile}/>
+                        <TrendStats trend={stats.trend}/>
+                        <TopGamesStats topGames={stats.topGames}/>
+                        <TasteStats taste={stats.taste}/>
+                        <PlatformStats platforms={stats.platforms}/>
+                        <HabitsStats habits={stats.habits}/>
+                        <FinishedStats finished={stats.finished}/>
+                    </div>
+                )}
+            </PageContainer>
+        </StatDrillProvider>
     );
 }

src/pages/StatsPage.test.jsx

@@ -89,4 +89,36 @@ describe('StatsPage', () => {
 
         await waitFor(() => expect(fetch).toHaveBeenCalledTimes(2));
     });
+
+    it('opensTheGamesBehindARowWithTheRawName', async () => {
+        fetchRoutes({
+            'GET /api/library/stats': json(200, stats()),
+            'GET /api/library/stats/games': json(200, {content: [{appid: 620, name: 'Portal 2', status: 'BACKLOG', playtimeMinutes: 60}],
+                page: 0, size: 40, totalElements: 1, totalPages: 1}),
+        });
+        renderPage();
+
+        fireEvent.click(await screen.findByRole('button', {name: /STATS\.GENRE/}));
+
+        expect(await screen.findByRole('dialog')).toBeTruthy();
+        await waitFor(() => expect(fetch.mock.calls.at(-1)[0]).toMatch(/stats\/games\?key=GENRE&arg=Shooter&page=0$/));
+    });
+
+    it('linksAStatusCountToTheFilteredLibrary', async () => {
+        answerStats(json(200, stats()));
+        renderPage();
+
+        const link = await screen.findByRole('link', {name: 'BACKLOG.STATUS.BACKLOG: 5'});
+
+        expect(link.getAttribute('href')).toBe('/library?hideDuplicates=true&status=BACKLOG');
+    });
+
+    it('leavesTheMoonTripsAlone', async () => {
+        answerStats(json(200, stats()));
+        renderPage();
+
+        await screen.findByText('STATS.HABITS.MOON');
+
+        expect(screen.queryByRole('button', {name: /STATS.HABITS.MOON/})).toBeNull();
+    });
 });

src/utils/statGames.js

@@ -0,0 +1,54 @@
+import {request} from './api.js';
+
+const CORE = () => import.meta.env.VITE_CORE_API_URL;
+
+const query = (params) => params
+    .filter(([, value]) => value != null && value !== '')
+    .map(([name, value]) => `${name}=${encodeURIComponent(value)}`)
+    .join('&');
+
+/**
+ * The URL of one page of the games behind a number.
+ *
+ * @param source own, profile, community or points
+ * @param track points: the unlock track of a locked bar
+ * @param kind points: the history kind (MONTH or STREAK) with its `ref`
+ */
+export function statGamesUrl({source, key, arg, page = 0, track, kind, ref}) {
+    const base = `${CORE()}/api`;
+    if (source === 'points') {
+        const path = track
+            ? `progress/${encodeURIComponent(track)}`
+            : `history/${encodeURIComponent(kind)}/${encodeURIComponent(ref)}`;
+        return `${base}/rewards/${path}/games?${query([['page', page]])}`;
+    }
+    const path = {
+        own: 'library/stats/games',
+        profile: 'public/profiles/library/stats/games',
+        community: 'stats/public/games',
+    }[source];
+    return `${base}/${path}?${query([['key', key], ['arg', arg], ['page', page]])}`;
+}
+
+/**
+ * `{ok, status, data}` like `request`. The profile and the community list are public: no login, no refresh.
+ */
+export async function fetchStatGames(source, params, ticket) {
+    const url = statGamesUrl({source, ...params});
+    if (source !== 'profile' && source !== 'community') return request(url);
+    try {
+        const response = await fetch(url, source === 'profile' ? {headers: {'X-Profile-Ticket': ticket}} : undefined);
+        return {ok: response.ok, status: response.status, data: response.ok ? await response.json() : null};
+    } catch (err) {
+        console.error(`Request to ${url} failed:`, err);
+        return {ok: false, status: 0, data: null};
+    }
+}
+
+export const libraryLink = (status) => `/library?hideDuplicates=true${status ? `&status=${status}` : ''}`;
+
+// A visitor has no game page of the owner; the Steam store is the only public one. Manual games have no appid there.
+export const gameHref = (appid, own) => {
+    if (own) return `/library/${appid}`;
+    return appid > 0 ? `https://store.steampowered.com/app/${appid}` : null;
+};

src/utils/statGames.test.js

@@ -0,0 +1,35 @@
+import {describe, expect, it} from 'vitest';
+import {gameHref, libraryLink, statGamesUrl} from './statGames.js';
+
+describe('statGamesUrl', () => {
+    it('own_EncodesTheArgAndPage', () => {
+        expect(statGamesUrl({source: 'own', key: 'GENRE', arg: 'Role-Playing & Co', page: 2}))
+            .toMatch(/\/api\/library\/stats\/games\?key=GENRE&arg=Role-Playing%20%26%20Co&page=2$/);
+    });
+
+    it('profile_And_Community_UseTheirPaths', () => {
+        expect(statGamesUrl({source: 'profile', key: 'PILE'})).toMatch(/\/api\/public\/profiles\/library\/stats\/games\?key=PILE&page=0$/);
+        expect(statGamesUrl({source: 'community', key: 'OWNED'})).toMatch(/\/api\/stats\/public\/games\?key=OWNED&page=0$/);
+    });
+
+    it('points_TrackAndHistory', () => {
+        expect(statGamesUrl({source: 'points', track: 'GAMES_FINISHED'})).toMatch(/\/api\/rewards\/progress\/GAMES_FINISHED\/games\?page=0$/);
+        expect(statGamesUrl({source: 'points', kind: 'MONTH', ref: '2026-09', page: 1}))
+            .toMatch(/\/api\/rewards\/history\/MONTH\/2026-09\/games\?page=1$/);
+    });
+});
+
+describe('libraryLink', () => {
+    it('addsTheStatusOnlyWhenGiven', () => {
+        expect(libraryLink()).toBe('/library?hideDuplicates=true');
+        expect(libraryLink('BACKLOG')).toBe('/library?hideDuplicates=true&status=BACKLOG');
+    });
+});
+
+describe('gameHref', () => {
+    it('own_LinksTheLibraryPage', () => expect(gameHref(5, true)).toBe('/library/5'));
+    it('visitor_LinksTheStoreOnlyForSteamApps', () => {
+        expect(gameHref(5, false)).toBe('https://store.steampowered.com/app/5');
+        expect(gameHref(-3, false)).toBeNull();
+    });
+});