feat(stats): add platform statistics and landing blocks

Add PlatformStats component to stats page. Extract YearBars from
FinishedStats for reuse on landing. Add three blocks to landing: games
per platform, top genres, finished per year. Update translations.

src/pages/LandingPage.jsx

@@ -11,7 +11,10 @@ import {Skeleton} from '@/components/ui/skeleton';
 import GameCover from '../components/GameCover.jsx';
 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 useSession from '../hooks/useSession.js';
+import {genreKey} from '../utils/stats.js';
 
 import usePublicStats from '../hooks/usePublicStats.js';
 
@@ -36,6 +39,15 @@ function RankedGames({title, games, formatValue}) {
     );
 }
 
+function BarsCard({title, children}) {
+    return (
+        <Card className="gap-0 py-0">
+            <h3 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">{title}</h3>
+            <div className="px-5 py-4">{children}</div>
+        </Card>
+    );
+}
+
 export default function LandingPage() {
     const {t, i18n} = useTranslation();
     const {data, isLoading} = usePublicStats();
@@ -102,6 +114,25 @@ export default function LandingPage() {
                         />
                     )}
                 </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>
     );

src/pages/LandingPage.test.jsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import LandingPage from './LandingPage.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('../hooks/useSession.js', () => ({default: () => ({active: false})}));
+
+// Auth and Core answer the same path; one object serves both shapes.
+const answer = (core) => fetchRoutes({'GET /api/stats/public': json(200, {topPlayedGames: [], topOwnedGames: [], ...core})});
+
+const renderPage = () => render(<MemoryRouter><LandingPage/></MemoryRouter>);
+
+describe('LandingPage', () => {
+    afterEach(cleanup);
+
+    it('shows games per platform, top genres and finished per year', async () => {
+        answer({
+            gamesPerPlatform: [{name: 'PS5', games: 3, minutes: 600}],
+            topGenres: [{name: 'Shooter', games: 2, minutes: 1200}],
+            finishedPerYear: [{year: 2025, games: 4}],
+        });
+        renderPage();
+
+        expect(await screen.findByText('LANDING.PLATFORMS')).toBeTruthy();
+        expect(screen.getByText('PS5')).toBeTruthy();
+        expect(screen.getByText('LANDING.TOP_GENRES')).toBeTruthy();
+        expect(screen.getByText('STATS.GENRE.SHOOTER')).toBeTruthy();
+        expect(screen.getByText('LANDING.FINISHED_PER_YEAR')).toBeTruthy();
+        expect(screen.getByText('2025')).toBeTruthy();
+    });
+
+    it('hides the three blocks while their lists are empty', async () => {
+        answer({gamesPerPlatform: [], topGenres: [], finishedPerYear: []});
+        renderPage();
+
+        await screen.findByText('LANDING.STATS_TITLE');
+        await vi.waitFor(() => expect(fetch).toHaveBeenCalledTimes(2));
+        for (const title of ['PLATFORMS', 'TOP_GENRES', 'FINISHED_PER_YEAR']) {
+            expect(screen.queryByText(`LANDING.${title}`)).toBeNull();
+        }
+    });
+});

src/pages/StatsPage.jsx

@@ -11,6 +11,7 @@ import TopGamesStats from '../components/stats/TopGamesStats.jsx';
 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 useUserStats from '../hooks/useUserStats.js';
 
 const ALL_GROUPS = [];
@@ -47,6 +48,7 @@ export default function StatsPage() {
                     <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>

src/pages/StatsPage.test.jsx

@@ -21,6 +21,7 @@ const stats = (extra = {}) => ({
     taste: {genres: [{name: 'Shooter', games: 2, minutes: 1200}], moods: [{name: 'CHILL', games: 1, minutes: 900}]},
     habits: {moonTrips: 0.5, longestDay: {day: '2026-07-01', minutes: 200}, underOneHourGames: 1, underOneHourShare: 0.125},
     finished: {perYear: [{year: 2026, games: 2}], finishedBeforeTracking: 1},
+    platforms: {perPlatform: [{name: 'Steam', games: 10, minutes: 5000}, {name: 'PS5', games: 2, minutes: 600}]},
     trend: {days: [{day: '2026-09-26', backlogGames: 6, neverPlayed: 4, backlogMinutes: 5000},
         {day: '2026-09-27', backlogGames: 5, neverPlayed: 4, backlogMinutes: 4200}], thisMonth: {added: 1, done: 2}},
     ...extra,
@@ -45,11 +46,12 @@ describe('StatsPage', () => {
         expect(await screen.findByText('STATS.OVERVIEW.TITLE')).toBeTruthy();
         expect(fetch).toHaveBeenCalledOnce();
         expect(fetch.mock.calls[0][0]).toMatch(/\/api\/library\/stats$/);
-        for (const title of ['PILE', 'TREND', 'TOP_GAMES', 'TASTE', 'HABITS', 'FINISHED']) {
+        for (const title of ['PILE', 'TREND', 'TOP_GAMES', 'TASTE', 'HABITS', 'FINISHED', 'PLATFORMS']) {
             expect(screen.getByText(`STATS.${title}.TITLE`)).toBeTruthy();
         }
         expect(screen.getAllByText('Portal 2')).toHaveLength(2);
         expect(screen.getByText('Half-Life 2')).toBeTruthy();
+        expect(screen.getByText('PS5')).toBeTruthy();
         expect(screen.getByText('STATS.PILE.PACE')).toBeTruthy();
         expect(screen.getByText('STATS.FINISHED.BEFORE:1')).toBeTruthy();
         expect(screen.getByTestId('pile-trend')).toBeTruthy();
@@ -64,6 +66,7 @@ describe('StatsPage', () => {
             taste: {genres: [], moods: []},
             habits: {moonTrips: 0, longestDay: null, underOneHourGames: 0, underOneHourShare: null},
             finished: {perYear: [], finishedBeforeTracking: 0},
+            platforms: {perPlatform: []},
             trend: {days: [empty.trend.days[1]], thisMonth: {added: 0, done: 0}},
         }));
         renderPage();
@@ -72,6 +75,7 @@ describe('StatsPage', () => {
         expect(screen.getByText('STATS.TOP_GAMES.EMPTY')).toBeTruthy();
         expect(screen.getByText('STATS.TASTE.EMPTY')).toBeTruthy();
         expect(screen.getByText('STATS.FINISHED.EMPTY')).toBeTruthy();
+        expect(screen.getByText('STATS.PLATFORMS.EMPTY')).toBeTruthy();
         expect(screen.getByText('STATS.TREND.STARTS')).toBeTruthy();
         expect(screen.queryByText('STATS.HABITS.LONGEST_DAY')).toBeNull();
         expect(screen.queryByTestId('pile-trend')).toBeNull();