feat(dashboard): pick the banner game or turn the banner off

src/pages/Dashboard.jsx

@@ -23,6 +23,7 @@ import HeroArt from '../components/HeroArt.jsx';
 import SteamAvatar from '../components/SteamAvatar.jsx';
 import useSteamProfile from '../hooks/useSteamProfile.js';
 import {cn} from '@/lib/utils';
+import {usePreferences} from '../context/PreferencesContext.jsx';
 
 const TOP_GAMES = 5;
 // The games endpoint accepts only the page sizes 20, 40 and 80.
@@ -189,8 +190,11 @@ const Dashboard = () => {
     }, [navigate, expireSession, t, fetchSteamCount, fetchTopGames, fetchPlaying, fetchSummary, fetchActivity]);
 
     const hasSteamId = !!userData?.steamId;
+    const {appearance} = usePreferences();
     const steamProfile = useSteamProfile(hasSteamId);
-    const bannerAppid = activity?.recentGames?.[0]?.appid ?? null;
+    const bannerAppid = appearance.showBanner
+        ? appearance.bannerAppid ?? activity?.recentGames?.[0]?.appid ?? null
+        : null;
     const sync = useLibrarySync({
         enabled: hasSteamId,
         expectInitialSync: hasSteamId && steamData.count === 0,
@@ -217,7 +221,7 @@ const Dashboard = () => {
     return (
         <PageContainer className="p-4 md:p-8 space-y-6">
             <Card className="relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-                {/* The banner is the game played most in the last two weeks; the gradient keeps the text readable. */}
+                {/* A picked game, else the game played most in the last two weeks; the gradient keeps the text readable. */}
                 <HeroArt key={bannerAppid} appid={bannerAppid}
                          className="pointer-events-none absolute inset-0 size-full object-cover opacity-60"/>
                 <div className={cn('pointer-events-none absolute inset-0', bannerAppid