feat(dashboard): new layout with sync button and top 5 most played

Remove the placeholder tiles and the settings tile, fix the mobile header width. iconUrl/formatPlaytime move to utils/games.js (599 min now shows 10h, not 10.0h), and the sync button logic to the useForceSync hook shared with the library.

src/utils/games.js

@@ -0,0 +1,11 @@
+export const iconUrl = (appid, hash) =>
+    hash
+        ? `https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/${appid}/${hash}.jpg`
+        : null;
+
+export const formatPlaytime = (minutes) => {
+    if (!minutes || minutes <= 0) return '0h';
+    // Round to one decimal first, so 599 minutes becomes "10h" and not "10.0h".
+    const hours = Math.round(minutes / 6) / 10;
+    return hours >= 10 ? `${Math.round(hours)}h` : `${hours.toFixed(1)}h`;
+};

src/utils/games.test.js

@@ -0,0 +1,14 @@
+import {describe, expect, it} from 'vitest';
+import {formatPlaytime, iconUrl} from './games.js';
+
+describe('formatPlaytime', () => {
+    it.each([[0, '0h'], [null, '0h'], [30, '0.5h'], [599, '10h'], [24720, '412h']])('%j minutes -> %s', (minutes, expected) => {
+        expect(formatPlaytime(minutes)).toBe(expected);
+    });
+});
+
+describe('iconUrl', () => {
+    it('is null without a hash', () => {
+        expect(iconUrl(220, null)).toBeNull();
+    });
+});