MyClub/DOCS/MYUIBRIX_FIXES.md

# MyUIbrix Editor Fixes - December 2024

## Issues Fixed

### 1. ✅ Element Picker Shows Only Implemented Elements
**Problem**: The element picker was showing ALL available element types (30+), but only a subset were actually implemented on the HomePage.

**Solution**: 
- Created `HOMEPAGE_IMPLEMENTED_ELEMENTS` array in `defaultElements.ts` listing only implemented elements
- Updated MyUIbrixEditor to filter `PREDEFINED_ELEMENTS` by what's actually available on the current page
- Now only shows: hero, news, matches, table, team, videos, merch, newsletter, sponsors, banner

### 2. ✅ Live Preview Now Works
**Problem**: Changing variants and visibility in the editor didn't show changes in real-time. You had to save and reload to see effects.

**Solution**:
- Integrated `useAllPageElementConfigs` hook into HomePage component
- Hook listens to `myuibrix-change` events and updates visibility/variant state in real-time
- All sections now use `isVisible('elementName', defaultValue)` to control rendering
- Variant changes use `getVariant('elementName', fallback)` to switch between styles

### 3. ✅ All Sections Have data-element Attributes
**Problem**: Some sections were missing `data-element` attributes, so the editor couldn't highlight or edit them.

**Solution**:
- Added `data-element` attributes to all major sections:
  - `hero` - Main hero section (grid/scroller/swiper variants)
  - `news` - Featured news articles
  - `matches` - Upcoming matches display
  - `table` - League standings table
  - `team` - Players scroller
  - `videos` - Videos section
  - `merch` - Merchandise/fanshop
  - `newsletter` - Newsletter subscription
  - `sponsors` - Sponsors/partners
  - `banner` - Advertisement banners

### 4. ✅ Visibility Controls Work
**Problem**: Hiding/showing elements didn't work at all.

**Solution**:
- All sections now wrapped with `isVisible()` checks
- Changes in the editor immediately toggle visibility
- Default visibility set appropriately (hero=true, videos=false, etc.)

## How It Works Now

### For Admins (Editing Mode)

1. **Activate Editor**: Click the floating edit button (bottom left)
2. **Select Element**: Click on any section to select it
3. **Change Style**: Pick from available style variants for that element
4. **Move Elements**: Use up/down arrows to reorder sections
5. **Hide/Show**: Toggle element visibility in the layers panel
6. **Preview**: Changes appear IMMEDIATELY (live preview mode)
7. **Save**: Click "Publikovat" to save changes permanently

### Technical Details

**Live Preview Architecture**:
```
MyUIbrixEditor (editing) 
  → Dispatches 'myuibrix-change' event
  → useAllPageElementConfigs hook listens
  → Updates getVariant() & isVisible() functions
  → HomePage re-renders with new configuration
```

**Only Editing User Sees Changes**:
- Preview mode is indicated by `previewMode: true` in events
- Changes only apply in browser memory during editing
- Other users see the published version until you click "Publikovat"

## Element Variants Available

### Hero Section
- `grid` - Grid layout with featured article
- `scroller` - Horizontal scrolling cards
- `swiper` - Carousel/swiper
- `swiper_full` - Full-width carousel

### Matches
- `compact` - Compact next match display
- `compact_split` - Split layout with multiple matches

### Table
- `split_news` - News + table side-by-side (default)
- `standard` - Table only

### Sponsors
- `grid` - Grid layout
- `slider` - Animated slider

### Videos, Team, News, etc.
- See `ELEMENT_VARIANTS` in `pageElements.ts` for full list

## Default Configuration

New installations use these defaults (from `defaultElements.ts`):
- Hero (grid) - Visible
- News (grid) - Visible  
- Matches (compact) - Visible
- Table (split_news) - Visible
- Merch (grid) - Visible
- Sponsors (grid) - Visible
- Videos - **Hidden** (must enable)
- Team - **Hidden** (must enable)
- Newsletter - **Hidden** (must enable)
- Banner - **Hidden** (must enable)

## ✅ NEW: Drag-and-Drop Reordering (Just Added!)

### Visual Reordering Works
- **Up/Down arrows** now visually reorder sections immediately
- **Drag-and-drop** support in layers panel - grab any element and drag it
- Changes apply in real-time (live preview)
- DOM elements are physically reordered to match your layout

### How to Reorder

**Method 1: Arrow Buttons**
1. Click on an element to select it
2. Use ↑ ↓ arrows in the contextual panel or layers panel
3. Section moves immediately

**Method 2: Drag and Drop (Recommended)**
1. Open Layers Panel (L key or layers button)
2. Grab the drag handle (⋮⋮ icon) or any layer item
3. Drag to desired position
4. Drop - section reorders instantly!

### Visual Feedback
- **Dragging**: Item becomes semi-transparent with "grabbing" cursor
- **Drop target**: Highlighted in blue with scale effect
- **Grip handle**: Shows ⋮⋮ icon to indicate draggability
- **Position label**: Shows "Position 1 of 10" etc.

### Some Variants Not Fully Styled
- Not all variant options have complete styling
- Most common variants (grid, compact, standard) work well
- Exotic variants may need CSS work

## Testing Checklist

After deployment, test these scenarios:

- [ ] Click edit button → editor UI appears
- [ ] Click on hero section → style picker appears
- [ ] Change hero from "grid" to "scroller" → updates immediately
- [ ] Hide "sponsors" section → disappears immediately
- [ ] Show "videos" section → appears immediately
- [ ] **NEW**: Click ↑ arrow on "matches" → moves up visually
- [ ] **NEW**: Open layers panel (L) → see all sections with drag handles
- [ ] **NEW**: Drag "newsletter" above "sponsors" → reorders immediately
- [ ] **NEW**: Drag "hero" to bottom → entire page reorders
- [ ] Open element picker (+ button) → only shows 10 implemented elements
- [ ] Save changes (Publikovat) → page reloads with saved state
- [ ] **NEW**: Reload page → sections appear in saved order
- [ ] Open page in incognito → sees published version (not draft)

## Files Modified

1. **defaultElements.ts** - Added `HOMEPAGE_IMPLEMENTED_ELEMENTS` list
2. **MyUIbrixEditor.tsx** - Filter element picker, add overlays, **drag-drop handlers**, **visual reordering**
3. **HomePage.tsx** - Integrated `useAllPageElementConfigs` hook, added visibility controls
4. **usePageElementConfig.ts** - Added **DOM reordering**, **element order state**, initial order application

## Migration Notes

**Existing Sites**: No data migration needed. The system will:
1. Load existing configurations from database
2. Fall back to defaults for missing elements
3. Mark as "hasChanges" if using defaults (so admin can save)

**New Sites**: Defaults are applied automatically on first page load.