feat(dashboard): currently playing and pile of shame tiles

Pile of Shame shows the backlog count and share, a status bar and a random
backlog pick. Both tiles show the first-sync text while the initial sync runs;
a failed summary load shows a retry button.

src/utils/backlog.js

@@ -19,3 +19,6 @@ export const libraryQuery = ({page, size, sort, status, q}) => {
     if (q?.trim()) params.set('q', q.trim());
     return params.toString();
 };
+
+export const backlogShare = (summary) =>
+    summary?.total ? Math.round(((summary.byStatus?.BACKLOG ?? 0) / summary.total) * 100) : 0;

src/utils/backlog.test.js

@@ -1,5 +1,5 @@
 import {describe, expect, it} from 'vitest';
-import {libraryQuery, NO_PRIORITY, parseStatus, toBacklogRequest} from './backlog.js';
+import {backlogShare, libraryQuery, NO_PRIORITY, parseStatus, toBacklogRequest} from './backlog.js';
 
 describe('toBacklogRequest', () => {
     it('sends every field', () => {
@@ -32,3 +32,14 @@ describe('libraryQuery', () => {
             .toBe('page=1&size=40&sort=appid%2Casc&status=DROPPED&q=100%25+%26+more');
     });
 });
+
+describe('backlogShare', () => {
+    it('is the rounded backlog percent of the library', () => {
+        expect(backlogShare({total: 3, byStatus: {BACKLOG: 2}})).toBe(67);
+    });
+
+    it('is 0 for an empty library', () => {
+        expect(backlogShare({total: 0, byStatus: {BACKLOG: 0}})).toBe(0);
+        expect(backlogShare(null)).toBe(0);
+    });
+});