MyClub/DOCS/MYUIBRIX_IMPROVEMENTS.md

MyUIbrix Editor - Vylepšení / Improvements

🎨 Přehled změn / Changes Overview

MyUIbrix byl kompletně vylepšen s českým jazykem, lepší UX a snadnějším přístupem.

---

✅ Implementované změny / Implemented Changes

1. Oprava databáze / Database Fix

Problém: Endpoint /api/v1/page-elements vracel 500 Internal Server Error Řešení:

• ✅ Přidán PageElementConfig model do auto-migrace v database/migrate.go
• ✅ Aktualizována SQL migrace 000020_create_page_element_configs.up.sql s chybějícími sloupci:
  • visible BOOLEAN DEFAULT true
  • display_order INTEGER DEFAULT 0
  • deleted_at TIMESTAMP

Restart backend je potřeba pro aplikaci migrace!

---

2. České překlady / Czech Translations

Všechny texty v MyUIbrix editoru byly přeloženy do češtiny:

Anglicky	Česky
Enter Edit Mode	Aktivovat režim úprav
Exit Edit Mode (ESC)	Ukončit režim úprav (ESC)
Add Element (A)	Přidat element (A)
Element Layers (L)	Vrstvy elementů (L)
Save Changes (Ctrl+S)	Uložit změny (Ctrl+S)
Publish	Publikovat
Changes saved successfully!	Změny úspěšně uloženy!
All settings updated	Všechna nastavení byla aktualizována
Failed to save changes	Nepodařilo se uložit změny
Try again or contact support	Zkuste to prosím znovu nebo kontaktujte podporu

---

3. Admin navigace / Admin Navigation

✅ Přidán odkaz v admin sidebaru (sekce Nastavení):

• Ikona: 🎨 FaPaintBrush
• Název: MyUIbrix Editor
• Funkce: Otevře homepage v novém okně s aktivovaným editorem
• Umístění: Admin Panel → Nastavení → MyUIbrix Editor

Soubor: frontend/src/components/admin/AdminSidebar.tsx

---

4. Auto-aktivace editoru / Auto-activation

✅ URL parametr pro přímý vstup do editoru:

http://localhost:3000/?myuibrix=edit

Funkce:

• Automaticky aktivuje režim úprav
• Zobrazí informační toast s návodem
• Odstraní parametr z URL (clean URL)
• Ideální pro odkaz z admin panelu

---

5. Vylepšené UX / Improved UX

Floating tlačítko (pravý dolní roh):

• 🎨 Větší a výraznější tlačítko pro zapnutí editoru
• 🔴 Červené pro vypnutí / 🟣 Fialové pro zapnutí
• ✨ Animace a hover efekty
• 📍 Vždy viditelné na všech stránkách

Klávesové zkratky:

• ESC - Zavřít editor / zrušit výběr
• Ctrl+S - Uložit změny
• L - Zobrazit/skrýt vrstvy
• A - Přidat element

Vizuální vylepšení:

• 🟦 Modré ohraničení při najetí myší
• 🔵 Modrý overlay u vybraného elementu
• 🏷️ Plovoucí štítky s názvy elementů
• 📱 Responzivní režim (Desktop/Tablet/Mobile)

---

🚀 Jak používat / How to Use

Metoda 1: Z Admin Panelu

1. Přihlaste se jako admin
2. Otevřete Admin Panel
3. V sekci "Nastavení" klikněte na "MyUIbrix Editor"
4. Otevře se homepage v novém okně s aktivním editorem

Metoda 2: Přímý odkaz

Přejděte na: http://localhost:3000/?myuibrix=edit

Metoda 3: Floating tlačítko

1. Přejděte na libovolnou stránku (jako admin)
2. V pravém dolním rohu klikněte na fialové tlačítko ✏️
3. Režim úprav se aktivuje

---

🎯 Funkce editoru / Editor Features

Upravování elementů:

1. Klikněte na element - Vybere ho a zobrazí varianty
2. Zvolte variantu - Změňte vzhled (unified, edge, minimal, modern)
3. Skrýt/Zobrazit - Zapněte/vypněte viditelnost
4. Přeuspořádat - Změňte pořadí pomocí drag & drop
5. Uložit - Klikněte "Publikovat" pro uložení změn

Dostupné panely:

• Levý panel: Vizuální styly (barvy, velikosti, mezery)
• Pravý panel: Vrstvy elementů (pořadí, viditelnost)
• Horní lišta: Ovládací tlačítka (uložit, zrušit, viewport)

---

🛠️ Technické detaily / Technical Details

Změněné soubory:

1. Frontend:

   • frontend/src/components/editor/MyUIbrixEditor.tsx - Hlavní editor
   • frontend/src/components/admin/AdminSidebar.tsx - Admin navigace

2. Backend:

   • database/migrate.go - Auto-migrace
   • database/migrations/000020_create_page_element_configs.up.sql - SQL migrace

3. API Endpoint:

   • GET /api/v1/page-elements?page_type=homepage - Načte konfiguraci
   • POST /api/v1/admin/page-elements/batch - Uloží změny

---

⚠️ Důležité poznámky / Important Notes

Po změnách je potřeba:

1. Restartovat backend - Aby se aplikovala databázová migrace
2. Obnovit frontend - Pokud byl běžící (npm start)

CORS chyby jsou očekávané:

• Logo API a externí obrázky mohou mít CORS problémy
• To je normální chování pro externí zdroje
• Použijte backend proxy pro obcházení: /api/v1/proxy/image?url=...

---

📋 Checklist nasazení / Deployment Checklist

• Databázová migrace aktualizována
• Auto-migrace nastavena
• České překlady implementovány
• Admin link přidán
• URL parametr funguje
• Floating tlačítko vylepšeno
• Toast notifikace přeloženy
• Backend restart (udělá uživatel)
• Frontend refresh (udělá uživatel)

---

🎨 Další vylepšení (volitelné)

Možná budoucí vylepšení:

1. ✨ Drag & drop přímo na stránce
2. 🎨 Color picker pro barvy
3. 📐 Visual spacing editor
4. 💾 Undo/Redo funkcionalita
5. 📱 Live preview na mobilních zařízeních
6. 🌐 Export/Import konfigurací

---

Vytvořeno: 14. října 2025
Verze: 1.0.0
Status: ✅ Připraveno k použití