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

src/pages/Dashboard.jsx

@@ -14,6 +14,7 @@ import DashboardWelcomeCard from '../components/DashboardWelcomeCard.jsx';
 import MostPlayedCard from '../components/MostPlayedCard.jsx';
 import PileOfShameCard from '../components/PileOfShameCard.jsx';
 import SteamGameCount from '../components/SteamGameCount';
+import SyncChangesBanner from '../components/SyncChangesBanner.jsx';
 import WhatsNewDialog from '../components/WhatsNewDialog.jsx';
 import useDashboardData from '../hooks/useDashboardData.js';
 import useLibrarySync from '../hooks/useLibrarySync.js';
@@ -128,6 +129,7 @@ const Dashboard = () => {
                 <DashboardWelcomeCard bannerAppid={bannerAppid} avatarUrl={steamProfile?.avatarUrl}
                                       equipped={equipped}
                                       sync={sync} forceSync={forceSync} editing={editing} onCustomize={() => setEditing(true)}/>
+                {hasSteamId && <SyncChangesBanner lastSyncedAt={sync.lastSyncedAt}/>}
 
                 <TileGrid tiles={DASHBOARD_TILES} titles={DASHBOARD_TITLES} layout={layout} renderTile={renderTile} editing={editing}
                           defaultLayout={DEFAULT_DASHBOARD} onSave={saveLayout} onCancel={() => setEditing(false)}/>

src/pages/Dashboard.test.jsx

@@ -17,6 +17,7 @@ const quietRoutes = {
     'GET /api/library/summary': json(200, empty),
     'GET /api/hints': json(200, {results: []}),
     'GET /api/news': json(200, {results: []}),
+    'GET /api/library/sync-changes': json(204, {}),
 };
 
 // Every request of the page with a Steam ID; the test of the 401 answers all but the user with 401.