feat(stats): add stats page and pile trend

Show the stat groups on /stats, the pile trend on the dashboard card,
one switch per group in the settings, and the shared groups on the
public profile.

src/components/stats/TopGamesStats.jsx

@@ -0,0 +1,30 @@
+import {useTranslation} from 'react-i18next';
+import {Trophy} from 'lucide-react';
+
+import StatsSection from './StatsSection.jsx';
+import GameRow from './GameRow.jsx';
+import {formatPlaytime} from '../../utils/games.js';
+
+export default function TopGamesStats({topGames, linked = true}) {
+    const {t} = useTranslation();
+    return (
+        <StatsSection title={t('STATS.TOP_GAMES.TITLE')} icon={Trophy}>
+            {topGames.mostPlayed.length === 0 ? (
+                <p className="text-sm text-muted-foreground">{t('STATS.TOP_GAMES.EMPTY')}</p>
+            ) : (
+                <ol className="space-y-2">
+                    {topGames.mostPlayed.map((g) => (
+                        <li key={g.appid}><GameRow game={g} value={formatPlaytime(g.minutes)} linked={linked}/></li>
+                    ))}
+                </ol>
+            )}
+            {topGames.mostLoyal && (
+                <div className="space-y-2">
+                    <span className="text-sm font-medium">{t('STATS.TOP_GAMES.LOYAL')}</span>
+                    <GameRow game={topGames.mostLoyal} linked={linked}
+                             value={t('STATS.TOP_GAMES.MONTHS', {count: topGames.mostLoyal.months})}/>
+                </div>
+            )}
+        </StatsSection>
+    );
+}