feat(sync): show sync changes in banner and details dialog

src/utils/syncChanges.test.js

@@ -0,0 +1,49 @@
+import {describe, expect, it} from 'vitest';
+import {bannerOf, groupByKind} from './syncChanges.js';
+
+const result = (extra = {}) => ({syncedAt: '2026-10-04T10:00:00Z', startedBy: 'AUTO', seen: false, importedGames: 0, changes: [], ...extra});
+
+describe('bannerOf', () => {
+    it('showsNothingWithoutAResult', () => {
+        expect(bannerOf(null)).toBeNull();
+    });
+
+    it('showsNothingForASeenResult', () => {
+        expect(bannerOf(result({seen: true, changes: [{kind: 'ADDED', appid: 1}]}))).toBeNull();
+    });
+
+    it('showsNothingForAnEmptyAutomaticSync', () => {
+        expect(bannerOf(result())).toBeNull();
+    });
+
+    it('saysNothingChangedForAnEmptyManualSync', () => {
+        expect(bannerOf(result({startedBy: 'MANUAL'}))).toEqual({mode: 'nothing'});
+    });
+
+    it('countsTheGamesOfAnImport', () => {
+        expect(bannerOf(result({importedGames: 12}))).toMatchObject({mode: 'changes', imported: 12, added: 0});
+    });
+
+    it('sumsMinutesAndUnlocksAndCountsTheRest', () => {
+        const changes = [
+            {kind: 'ADDED', appid: 1}, {kind: 'ADDED', appid: 2}, {kind: 'REMOVED', appid: 3},
+            {kind: 'PLAYTIME', appid: 4, amount: 30}, {kind: 'PLAYTIME', appid: 5, amount: 45},
+            {kind: 'ACHIEVEMENTS', appid: 4, amount: 2}, {kind: 'ACHIEVEMENTS', appid: 5, amount: 3},
+            {kind: 'STATUS', appid: 5, fromStatus: 'BACKLOG', toStatus: 'PLAYING'},
+        ];
+
+        expect(bannerOf(result({changes}))).toEqual(
+            {mode: 'changes', imported: 0, added: 2, removed: 1, minutes: 75, achievements: 5, moves: 1});
+    });
+});
+
+describe('groupByKind', () => {
+    it('putsTheGroupsInTheFixedOrderAndLeavesOutEmptyOnes', () => {
+        const changes = [{kind: 'STATUS', appid: 1}, {kind: 'ADDED', appid: 2}, {kind: 'PLAYTIME', appid: 3}, {kind: 'ADDED', appid: 4}];
+
+        const groups = groupByKind(changes);
+
+        expect(groups.map((group) => group.kind)).toEqual(['ADDED', 'PLAYTIME', 'STATUS']);
+        expect(groups[0].changes.map((change) => change.appid)).toEqual([2, 4]);
+    });
+});