MyClub/DOCS/SETUP_PAGE_ENHANCEMENTS.md

# Setup Page Enhancements

## Overview
Enhanced the setup page with logoapi.sportcreative.eu integration, improved UX flow, and live typography preview.

## Changes Made

### 1. ✅ LogoAPI Integration for Club Search
- **Club search now uses logoapi.sportcreative.eu** as primary logo source
- When user selects a club from FAČR search:
  1. Fetches logo from `logoapi.sportcreative.eu` using club UUID
  2. Falls back to FACR logo if logoapi doesn't have it
  3. Automatically extracts color palette from the logo
- **Direct logoapi URLs** are passed through without proxy (no CORS issues)
- Improved logo resolution display with optimized SVGs

### 2. ✅ Logo Upload to LogoAPI
- When uploading a club logo:
  1. Uploads to local backend storage (`/uploads`)
  2. **Simultaneously uploads to logoapi.sportcreative.eu** if club ID exists
  3. Toast notification confirms successful upload to both locations
- Graceful fallback if logoapi upload fails (local upload still succeeds)
- Uses `POST https://logoapi.sportcreative.eu/logos/{clubId}` endpoint

### 3. ✅ Section Reordering
**New order:**
1. 🔐 Administrátorský účet
2. ⚽ Informace o klubu
3. **🎨 Barvy a vzhled webu** ⬆️ (moved up)
4. 📱 Sociální sítě a fotogalerie ⬇️ (moved down)
5. ✍️ Písmo a typografie
6. 📍 GPS poloha a mapa
7. 📧 Kontaktní údaje
8. 🔒 Zabezpečení a SMTP

**Rationale:** Colors and appearance are more important and should be set before social networks.

### 4. ✅ Live Typography Preview
- **Typography changes apply immediately** to the entire setup page
- Selected font pairing affects:
  - All headings (`fontFamily={fontHeading}`)
  - All body text (root Box has `fontFamily={fontBody}`)
- User can see **real-time preview** as they select different fonts
- Updated help text: "Náhled se aplikuje okamžitě na celou stránku"

### 5. ✅ Map Style Integration
- **Removed duplicate "🎨 Styl mapy" section**
- Map style selector now **integrated directly** into "📍 GPS poloha a mapa" section
- Single unified location for all map-related settings
- Updated description: "Nastavte polohu vašeho stadionu. Můžete vložit odkaz z mapy, nebo zadat souřadnice ručně. Vyberte také styl mapy."

## Technical Details

### Logo Resolution Helper
```typescript
const resolveLogoUrl = (u?: string | null) => {
  if (!u) return undefined;
  // If it's a logoapi URL, use it directly (no proxy needed)
  if (u.includes('logoapi.sportcreative.eu')) return u;
  // Backend-relative paths
  if (u.startsWith('/uploads') || u.startsWith('/dist') || u.startsWith('/api/')) 
    return assetUrl(u);
  // Proxy other remote URLs
  if (/^https?:\/\//i.test(u)) {
    return `${API_URL}/proxy/image?url=${encodeURIComponent(u)}`;
  }
  return u;
};
```

### Club Selection with LogoAPI
```typescript
const handleSelectClub = async (item: SearchResult) => {
  // Try logoapi first
  let logoUrl = '';
  if (clubIdValue) {
    const logoApiUrl = await fetchLogoFromLogoAPI(clubIdValue, item.name);
    if (logoApiUrl) logoUrl = logoApiUrl;
  }
  // Fallback to FACR
  if (!logoUrl && item.logo_url) {
    logoUrl = item.logo_url;
  }
  setClubLogoUrl(logoUrl);
  // Extract colors automatically...
};
```

### Logo Upload to LogoAPI
```typescript
// Also upload to logoapi if we have a club ID
if (clubId) {
  const logoFd = new FormData();
  logoFd.append('logo', f);
  const logoApiRes = await fetch(
    `https://logoapi.sportcreative.eu/logos/${clubId}`, 
    { method: 'POST', body: logoFd }
  );
  if (logoApiRes.ok) {
    toast({ 
      title: 'Logo nahráno', 
      description: 'Logo bylo nahráno na logoapi i lokálně' 
    });
  }
}
```

### Live Font Preview
```typescript
// Get selected font pairing for live preview
const selectedFontPairing = FONT_PAIRINGS.find((f) => f.id === selectedFont);
const fontHeading = selectedFontPairing?.cssHeading || 'inherit';
const fontBody = selectedFontPairing?.cssBody || 'inherit';

// Apply to entire page
<Box fontFamily={fontBody}>
  <Heading fontFamily={fontHeading}>Title</Heading>
  <Text>Body text inherits from parent</Text>
</Box>
```

## User Experience Improvements

### Before
- Logo from FACR only (sometimes low quality)
- Colors section after social networks
- Typography preview only in selector boxes
- Duplicate map style section

### After
- **High-quality SVG logos** from logoapi.sportcreative.eu
- **Automatic upload to logoapi** when adding custom logo
- Colors section prominent (before social networks)
- **Live typography preview** across entire page
- Unified map configuration in one place

## Files Modified
- `frontend/src/pages/SetupPage.tsx` - All enhancements implemented

## Testing Checklist
- [x] Club search fetches logos from logoapi
- [x] Logo upload uploads to both local and logoapi
- [x] Colors section appears before social networks
- [x] Typography changes apply to whole page immediately
- [x] Map style selector integrated into GPS section
- [x] No duplicate map style section
- [x] All headings use font preview
- [x] logoapi URLs bypass proxy correctly

## Benefits
1. **Better logos** - High-quality SVG logos from logoapi
2. **Centralized storage** - Logos uploaded to logoapi for reuse
3. **Improved flow** - Colors before social (more important)
4. **Live preview** - See typography changes immediately
5. **Cleaner UI** - No duplicate sections
6. **Better UX** - Related settings grouped together

## Related Documentation
- `LOGO_API_IMPLEMENTATION.md` - LogoAPI integration details
- `LOGO_ENHANCEMENT_SUMMARY.md` - Logo system overview
- `TYPOGRAPHY_AND_DARKMODE_ENHANCEMENTS.md` - Typography system
- `MAP_STYLES_QUICK_REFERENCE.md` - Map styling options