feat(profile): let users design their public profile

src/components/ProfileArtMenu.jsx

@@ -0,0 +1,47 @@
+import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {UserRound} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
+
+/**
+ * Uses the art of this Steam game as banner or background of the public profile; a checked item removes it again.
+ *
+ * @param onSaved gets the whole saved style
+ */
+export default function ProfileArtMenu({appid, style, onSaved}) {
+    const {t} = useTranslation();
+    const save = useSaveProfileStyle();
+    const [saving, setSaving] = useState(false);
+
+    const toggle = async (field) => {
+        setSaving(true);
+        const saved = await save((stored) => ({[field]: stored[field] === appid ? null : appid}), style);
+        if (saved) onSaved(saved);
+        setSaving(false);
+    };
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" disabled={saving}><UserRound/>{t('GAME_DETAIL.PROFILE_ART')}</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+                <DropdownMenuCheckboxItem checked={style.bannerAppid === appid} onCheckedChange={() => toggle('bannerAppid')}>
+                    {t('GAME_DETAIL.PROFILE_BANNER')}
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem checked={style.backgroundAppid === appid}
+                                          onCheckedChange={() => toggle('backgroundAppid')}>
+                    {t('GAME_DETAIL.PROFILE_BACKGROUND')}
+                </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}