feat(ui): add people lists for game owners and community stats

src/pages/LandingPage.jsx

@@ -1,3 +1,4 @@
+import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
 import {
@@ -12,10 +13,12 @@ import GameCover from '../components/GameCover.jsx';
 import FitText from '../components/FitText.jsx';
 import Logo from '../components/Logo.jsx';
 import StatCard from '../components/StatCard.jsx';
+import PeopleDialog from '../components/people/PeopleDialog.jsx';
 import {YearBars} from '../components/stats/FinishedStats.jsx';
 import {TagBars} from '../components/stats/TasteStats.jsx';
 import {StatDrillProvider, useStatDrill, useTagDrill} from '../components/stats/StatDrill.jsx';
 import useSession from '../hooks/useSession.js';
+import {fetchUsers} from '../utils/people.js';
 import {genreKey} from '../utils/stats.js';
 
 import usePublicStats from '../hooks/usePublicStats.js';
@@ -97,13 +100,14 @@ export default function LandingPage() {
     const {t, i18n} = useTranslation();
     const {data, isLoading} = usePublicStats();
     const {active} = useSession();
+    const [people, setPeople] = useState(null);
 
     const auth = data.auth;
     const core = data.core;
 
     const stats = [
-        [t('LANDING.TOTAL_USERS'), auth?.totalUsers, Users],
-        [t('LANDING.STEAM_LINKED'), auth?.usersWithSteamLinked, Link2],
+        [t('LANDING.TOTAL_USERS'), auth?.totalUsers, Users, undefined, undefined, 'TOTAL_USERS'],
+        [t('LANDING.STEAM_LINKED'), auth?.usersWithSteamLinked, Link2, undefined, undefined, 'STEAM_LINKED'],
         [t('LANDING.TOTAL_GAMES'), core?.totalLibraryEntries, Gamepad2, undefined, 'ENTRIES'],
         [t('LANDING.GAMES_PLAYED'), core?.totalGamesPlayed, Sparkles, undefined, 'PLAYED'],
         [t('LANDING.DISTINCT_GAMES'), core?.totalDistinctGames, Blocks, undefined, 'OWNED'],
@@ -139,9 +143,11 @@ export default function LandingPage() {
                     <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
                         {isLoading
                             ? stats.map(([label]) => <Skeleton key={label} className="h-36 rounded-xl"/>)
-                            : stats.map(([label, value, icon, suffix, key]) => (
+                            : stats.map(([label, value, icon, suffix, key, usersKey]) => (
                                 <StatCard key={label} label={label} value={value ?? 0} icon={icon} suffix={suffix}
-                                          drill={key && {params: {key}}}/>
+                                          drill={key && {params: {key}}}
+                                          onClick={active && usersKey && value > 0
+                                              ? () => setPeople({title: label, key: usersKey}) : undefined}/>
                             ))}
                     </div>
 
@@ -167,6 +173,10 @@ export default function LandingPage() {
                     <CommunityBars core={core}/>
                 </section>
             </div>
+            {people && (
+                <PeopleDialog title={people.title} onClose={() => setPeople(null)}
+                              load={(page) => fetchUsers({key: people.key, page})}/>
+            )}
         </StatDrillProvider>
     );
 }