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

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

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

// 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

// 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

• Club search fetches logos from logoapi
• Logo upload uploads to both local and logoapi
• Colors section appears before social networks
• Typography changes apply to whole page immediately
• Map style selector integrated into GPS section
• No duplicate map style section
• All headings use font preview
• 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