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/pages/Dashboard.jsx

@@ -8,6 +8,7 @@ import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
+import ActivityCard from '../components/ActivityCard.jsx';
 import CurrentlyPlayingCard from '../components/CurrentlyPlayingCard.jsx';
 import GameCover from '../components/GameCover.jsx';
 import PileOfShameCard from '../components/PileOfShameCard.jsx';
@@ -38,6 +39,7 @@ const Dashboard = () => {
     const [topGames, setTopGames] = useState([]);
     const [playing, setPlaying] = useState([]);
     const [summary, setSummary] = useState(null);
+    const [activity, setActivity] = useState(null);
     const [summaryFailed, setSummaryFailed] = useState(false);
     const [shuffling, setShuffling] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
@@ -114,6 +116,21 @@ const Dashboard = () => {
         return false;
     }, [expireSession]);
 
+    const fetchActivity = useCallback(async () => {
+        try {
+            const r = await fetch(`${import.meta.env.VITE_CORE_API_URL}/api/library/activity`, {headers: authHeaders()});
+            if (r.status === 401) {
+                expireSession();
+                return;
+            }
+            if (r.ok) {
+                setActivity(await r.json());
+            }
+        } catch (err) {
+            console.error('Error fetching activity:', err);
+        }
+    }, [expireSession]);
+
     const shuffleSuggestion = async () => {
         setShuffling(true);
         if (!await fetchSummary(summary?.suggestion?.appid)) {
@@ -127,7 +144,8 @@ const Dashboard = () => {
         fetchTopGames();
         fetchPlaying();
         fetchSummary();
-    }, [fetchSteamCount, fetchTopGames, fetchPlaying, fetchSummary]);
+        fetchActivity();
+    }, [fetchSteamCount, fetchTopGames, fetchPlaying, fetchSummary, fetchActivity]);
 
     useEffect(() => {
         const fetchUserData = async () => {
@@ -147,7 +165,7 @@ const Dashboard = () => {
                     setUserData(data);
 
                     if (data.steamId) {
-                        await Promise.all([fetchSteamCount(), fetchTopGames(), fetchPlaying(), fetchSummary()]);
+                        await Promise.all([fetchSteamCount(), fetchTopGames(), fetchPlaying(), fetchSummary(), fetchActivity()]);
                     }
                 } else if (profileResponse.status === 401) {
                     expireSession();
@@ -163,7 +181,7 @@ const Dashboard = () => {
         };
 
         fetchUserData();
-    }, [navigate, expireSession, t, fetchSteamCount, fetchTopGames, fetchPlaying, fetchSummary]);
+    }, [navigate, expireSession, t, fetchSteamCount, fetchTopGames, fetchPlaying, fetchSummary, fetchActivity]);
 
     const hasSteamId = !!userData?.steamId;
     const sync = useLibrarySync({
@@ -296,6 +314,8 @@ const Dashboard = () => {
                     )}
                 </div>
             )}
+
+            {hasSteamId && activity && <ActivityCard activity={activity}/>}
         </div>
     );
 };