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

src/pages/GameDetail.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useMemo, useState} from 'react';
 import {Link, useNavigate, useParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {ArrowLeft, Clock, ExternalLink, Image as ImageIcon, ImageOff, ShieldOff, Trophy} from 'lucide-react';
+import {ArrowLeft, Clock, ExternalLink, Image as ImageIcon, ImageOff, PanelTop, RotateCcw, ShieldOff, Trophy} from 'lucide-react';
 
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
@@ -99,6 +99,7 @@ export default function GameDetail() {
     }, [data]);
 
     const isBackground = !!data && appearance.backgroundAppid === data.appid;
+    const isBanner = !!data && appearance.showBanner && appearance.bannerAppid === data.appid;
 
     const stats = data ? [
         [t('GAME_DETAIL.UNLOCKED'), data.achievementsUnlocked],
@@ -161,6 +162,16 @@ export default function GameDetail() {
                                         <ImageIcon/>{t('GAME_DETAIL.SET_BACKGROUND')}
                                     </Button>
                                 )}
+                                {isBanner ? (
+                                    <Button variant="outline" size="sm" onClick={() => saveAppearance({bannerAppid: null})}>
+                                        <RotateCcw/>{t('SETTINGS.BANNER_AUTO')}
+                                    </Button>
+                                ) : (
+                                    <Button variant="outline" size="sm"
+                                            onClick={() => saveAppearance({bannerAppid: data.appid, showBanner: true})}>
+                                        <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
+                                    </Button>
+                                )}
                             </div>
                         </div>
                     </Card>