feat(dashboard): playtime chart, recently played and a playing hint

The dashboard shows the playtime of the last 30 days and Steam's recently
played games. The detail page offers to set a backlog game to Playing when
Steam reports recent playtime; unsaved edits in the backlog card stay.

src/components/ActivityCard.test.jsx

@@ -0,0 +1,38 @@
+// @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 ActivityCard from './ActivityCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+const days = (minutes) => minutes.map((m, i) => ({day: `2026-09-${String(10 + i).padStart(2, '0')}`, minutes: m}));
+const renderCard = (activity) => render(<MemoryRouter><ActivityCard activity={activity}/></MemoryRouter>);
+
+describe('ActivityCard', () => {
+    afterEach(cleanup);
+
+    it('draws one bar per day, the tallest for the day with most playtime', () => {
+        renderCard({days: days([0, 60, 120]), totalMinutes: 180, recentGames: []});
+
+        const bars = screen.getAllByTestId('activity-bar');
+        expect(bars).toHaveLength(3);
+        const heights = bars.map((b) => Number(b.getAttribute('height')));
+        expect(heights[2]).toBeGreaterThan(heights[1]);
+        expect(heights[0]).toBe(0);
+    });
+
+    it('lists the recently played games', () => {
+        renderCard({days: days([0]), totalMinutes: 0,
+            recentGames: [{appid: 620, name: 'Portal 2', playtimeMinutes: 900, playtime2Weeks: 120, status: 'PLAYING'}]});
+
+        expect(screen.getByText('Portal 2')).toBeTruthy();
+        expect(screen.getByText('2.0h')).toBeTruthy();
+    });
+
+    it('explains that the history starts now when nothing was recorded yet', () => {
+        renderCard({days: days([0, 0]), totalMinutes: 0, recentGames: []});
+
+        expect(screen.getByText('DASHBOARD.ACTIVITY_EMPTY')).toBeTruthy();
+    });
+});