feat(profile): let users design their public profile

src/pages/GameDetail.jsx

@@ -26,6 +26,7 @@ import useSessionExpired from '../hooks/useSessionExpired.js';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import PageContainer from '../components/PageContainer.jsx';
+import ProfileArtMenu from '../components/ProfileArtMenu.jsx';
 import {apiFetch} from '../utils/api.js';
 import {ACHIEVEMENT_ICONS, reportBrokenImage} from '../utils/brokenImages.js';
 import {canCorrect} from '../utils/corrections.js';
@@ -72,7 +73,10 @@ export default function GameDetail() {
     const [correcting, setCorrecting] = useState(false);
     const [merging, setMerging] = useState(false);
     const [reloads, setReloads] = useState(0);
-    const auditor = canCorrect(useCurrentUser(true));
+    const currentUser = useCurrentUser(true);
+    const auditor = canCorrect(currentUser);
+    const [savedProfileStyle, setSavedProfileStyle] = useState(null);
+    const profileStyle = savedProfileStyle ?? currentUser?.profileStyle;
     const [celebration, setCelebration] = useState(null);
     const shownLevel = useRef(null);
 
@@ -269,6 +273,9 @@ export default function GameDetail() {
                                         <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
                                     </Button>
                                 )}
+                                {profileStyle && (
+                                    <ProfileArtMenu appid={data.appid} style={profileStyle} onSaved={setSavedProfileStyle}/>
+                                )}
                                 {!manual && (
                                     <Button variant="outline" size="sm" onClick={toggleHidden} disabled={hiding}>
                                         {data.hidden ? <Eye/> : <EyeOff/>}