MyClub/DOCS/MYUIBRIX_PREVIEW_MODE.md

# MyUIbrix - Režim náhledu / Preview Mode

## 🔒 Koncept izolace náhledu

MyUIbrix nyní odděluje **režim úprav (náhled)** od **produkčního zobrazení**.

---

## 🎯 Jak to funguje

### **Před uložením:**
- ✅ Změny vidíte **pouze VY** (admin v režimu úprav)
- ❌ Běžní návštěvníci webu změny **NEVIDÍ**
- 🔒 Preview mode je izolován od produkce

### **Po kliknutí "Publikovat":**
- ✅ Změny se uloží do databáze
- ✅ Stránka se automaticky obnoví
- ✅ Změny jsou **viditelné všem** návštěvníkům
- ✅ Produkční web používá nové nastavení

---

## 🛠️ Technická implementace

### 1. **Preview Events (previewMode flag)**

Všechny události pro živý náhled nyní obsahují `previewMode: true`:

```typescript
window.dispatchEvent(new CustomEvent('myuibrix-change', {
  detail: { 
    elementName, 
    variant, 
    visible, 
    previewMode: true  // ← Klíčový příznak!
  }
}));
```

**Události jsou odesílány POUZE když:**
- `isEditing === true` (editor je aktivní)
- Admin má zapnutý režim úprav

### 2. **Filtrování v hooks**

Hook `usePageElementConfig` ignoruje preview události pokud nejsou v preview mode:

```typescript
const handleMyUIbrixChange = ((event: CustomEvent) => {
  const { elementName, variant, visible, previewMode } = event.detail;
  
  // Aplikuj změny POUZE v preview mode
  if (previewMode) {
    setConfigs(prev => ({ ...prev, [elementName]: variant }));
    setVisibility(prev => ({ ...prev, [elementName]: visible }));
  }
}) as EventListener;
```

### 3. **Produkční reload po uložení**

Po úspěšném uložení se stránka automaticky obnoví:

```typescript
await batchUpdatePageElementConfigs(configsToSave);

toast({
  title: 'Změny úspěšně uloženy!',
  description: 'Změny jsou nyní viditelné na produkci.',
  status: 'success',
});

// Reload aby se načetla nová konfigurace z databáze
setTimeout(() => {
  window.location.reload();
}, 1500);
```

---

## 📋 Workflow pro administrátora

### Krok 1: Aktivace editoru
```
1. Přejděte na homepage
2. Klikněte na fialové tlačítko ✏️ (pravý dolní roh)
   NEBO použijte: /?myuibrix=edit
```

### Krok 2: Úpravy (Preview Mode)
```
✓ Vidíte horní lištu s textem "🔒 REŽIM NÁHLEDU"
✓ Pod tím text: "Změny vidíte pouze vy"
✓ Klikejte na elementy, měňte varianty
✓ Změny se zobrazují OKAMŽITĚ, ale jen VÁM
```

### Krok 3: Publikování
```
1. Klikněte "Publikovat" v horní liště
2. Zobrazí se: "Změny úspěšně uloženy!"
3. Stránka se automaticky obnoví (1.5s)
4. ✅ Změny jsou nyní viditelné všem
```

---

## 🔍 Co vidí různí uživatelé

| Uživatel | Co vidí během editace | Co vidí po uložení |
|----------|----------------------|-------------------|
| **Admin (editor zapnutý)** | ✅ Preview změn v reálném čase | ✅ Produkční verze po reloadu |
| **Admin (editor vypnutý)** | ❌ Pouze produkční verze | ✅ Produkční verze |
| **Běžný návštěvník** | ❌ Pouze produkční verze | ✅ Produkční verze |

---

## 🎨 Vizuální indikátory

### V režimu úprav uvidíte:

**1. Horní lišta:**
```
⚽ ELEMENTOR  |  🔒 REŽIM NÁHLEDU  |  Změny vidíte pouze vy
```

**2. Oranžový badge:**
- Bliká (animation pulse)
- Text: "🔒 REŽIM NÁHLEDU"
- Připomíná, že jste v preview mode

**3. Modrá ohraničení:**
- Elementy při najetí myší
- Vybraný element má modrý overlay

---

## 📁 Změněné soubory

### Frontend:
1. **`frontend/src/components/editor/MyUIbrixEditor.tsx`**
   - Přidán `previewMode: true` do všech událostí
   - Události se odesílají pouze když `isEditing === true`
   - Přidán vizuální indikátor "REŽIM NÁHLEDU"
   - Reload stránky po uložení

2. **`frontend/src/hooks/usePageElementConfig.ts`**
   - Filtrování událostí podle `previewMode` příznaku
   - Ignoruje preview události v produkci

---

## ⚠️ Důležité poznámky

### ✅ Výhody:
- Bezpečné testování změn před publikací
- Žádné nechtěné změny na produkci
- Jasné oddělení náhledu a produkce
- Lepší UX pro administrátory

### 🔄 Reload po uložení:
- **Důvod:** Zajistí, že se načte nová konfigurace z databáze
- **Trvání:** 1.5 sekundy delay (čas na zobrazení toastu)
- **Alternativa:** Mohli bychom použít SSE/WebSocket pro live reload bez refresh

### 🎯 Best Practices:
1. **Vždy testujte změny** před publikováním
2. **Klikněte na různé elementy** abyste viděli jak vypadají
3. **Zkontrolujte mobile view** pomocí viewport switcher
4. **Publikujte až když jste spokojeni** s výsledkem

---

## 🔧 Řešení problémů

### Problem: Změny se nezobrazují po uložení
**Řešení:** 
- Zkontrolujte, že se stránka automaticky obnovila
- Pokud ne, manuálně obnovte (F5)
- Vyčistěte cache prohlížeče

### Problem: Vidím změny i když nejsem v editoru
**Řešení:**
- Ujistěte se, že jste ukončili režim úprav (ESC nebo ✕)
- Obnovte stránku pro reset

### Problem: Preview se nenahrává
**Řešení:**
- Zkontrolujte konzoli prohlížeče (F12)
- Ujistěte se, že backend běží
- Zkontrolujte endpoint: `/api/v1/page-elements?page_type=homepage`

---

## 🚀 Budoucí vylepšení

Možná rozšíření:
1. **Historii změn** - Undo/Redo funkce
2. **Verzování** - Ukládání verzí konfigurací
3. **Plánované publikování** - Nastavit čas pro auto-publikaci
4. **Multi-user preview** - Sdílení preview URL s jinými adminy
5. **A/B testování** - Testování více variant najednou

---

**Implementováno:** 14. října 2025  
**Verze:** 2.0.0  
**Status:** ✅ Production Ready

---

## 📞 Kontakt

Pokud máte otázky nebo návrhy na vylepšení:
- Otevřete issue na GitHubu
- Kontaktujte vývojový tým
- Přečtěte si `MYUIBRIX_IMPROVEMENTS.md` pro více informací