🐳 12/03 - 06:56 - i dont see any changes

editor.html

@@ -128,31 +128,45 @@
         <!-- Toolbar -->
         <div class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0">
             <div class="flex items-center gap-4">
-                <div class="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
-                    <button onclick="editor.setLayout('title')" class="tool-btn active px-3 py-1.5 rounded-md text-sm font-medium text-gray-700 flex items-center gap-1" data-layout="title">
-                        <i data-lucide="type" class="w-4 h-4"></i>
-                        Title
-                    </button>
-                    <button onclick="editor.setLayout('split')" class="tool-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-700 flex items-center gap-1" data-layout="split">
-                        <i data-lucide="columns" class="w-4 h-4"></i>
-                        Split
-                    </button>
-                    <button onclick="editor.setLayout('image')" class="tool-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-700 flex items-center gap-1" data-layout="image">
-                        <i data-lucide="image" class="w-4 h-4"></i>
-                        Image
-                    </button>
-                    <button onclick="editor.setLayout('grid')" class="tool-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-700 flex items-center gap-1" data-layout="grid">
-                        <i data-lucide="layout-grid" class="w-4 h-4"></i>
-                        Grid
-                    </button>
-                    <button onclick="editor.setLayout('comparison')" class="tool-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-700 flex items-center gap-1" data-layout="comparison">
-                        <i data-lucide="table" class="w-4 h-4"></i>
-                        Compare
-                    </button>
-                    <button onclick="editor.setLayout('compare3')" class="tool-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-700 flex items-center gap-1" data-layout="compare3">
-                        <i data-lucide="columns-3" class="w-4 h-4"></i>
-                        3-Col
+                <div class="relative">
+                    <button onclick="editor.toggleLayoutMenu()" id="layout-dropdown-btn" class="tool-btn px-4 py-1.5 rounded-lg text-sm font-medium text-gray-700 flex items-center gap-2 bg-white border border-gray-300 shadow-sm hover:bg-gray-50">
+                        <i data-lucide="layout" class="w-4 h-4"></i>
+                        <span id="current-layout-label">Title</span>
+                        <i data-lucide="chevron-down" class="w-4 h-4 ml-1"></i>
                     </button>
+                    <div id="layout-menu" class="hidden absolute top-full left-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 py-2 z-50">
+                        <div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Content</div>
+                        <button onclick="editor.setLayout('title')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="title">
+                            <i data-lucide="type" class="w-4 h-4"></i>
+                            Title
+                        </button>
+                        <button onclick="editor.setLayout('split')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="split">
+                            <i data-lucide="columns" class="w-4 h-4"></i>
+                            Split
+                        </button>
+                        <button onclick="editor.setLayout('image')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="image">
+                            <i data-lucide="image" class="w-4 h-4"></i>
+                            Image
+                        </button>
+                        <div class="border-t border-gray-100 my-1">
+                            <div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-1">Grid</div>
+                        </button>
+                        <button onclick="editor.setLayout('grid')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="grid">
+                            <i data-lucide="layout-grid" class="w-4 h-4"></i>
+                            Grid Cards
+                        </button>
+                        <div class="border-t border-gray-100 my-1">
+                            <div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-1">Compare</div>
+                        </div>
+                        <button onclick="editor.setLayout('comparison')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="comparison">
+                            <i data-lucide="table" class="w-4 h-4"></i>
+                            2-Column Table
+                        </button>
+                        <button onclick="editor.setLayout('compare3')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="compare3">
+                            <i data-lucide="columns-3" class="w-4 h-4"></i>
+                            3-Column Table
+                        </button>
+                    </div>
                 </div>
                 
                 <!-- View Toggle -->
@@ -290,6 +304,19 @@
                 this.renderSlidesList();
                 this.renderEditor();
                 this.updatePreview();
+                
+                // Close layout dropdown when clicking outside
+                document.addEventListener('click', (e) => {
+                    const menu = document.getElementById('layout-menu');
+                    const btn = document.getElementById('layout-dropdown-btn');
+                    if (menu && btn && !menu.contains(e.target) && !btn.contains(e.target)) {
+                        menu.classList.add('hidden');
+                    }
+                });
+            }
+
+            toggleLayoutMenu() {
+                document.getElementById('layout-menu').classList.toggle('hidden');
             }
 
             generateId() {
@@ -387,10 +414,19 @@
                 this.renderEditor();
                 this.updatePreview();
                 
-                // Update toolbar
-                document.querySelectorAll('.tool-btn').forEach(btn => {
-                    btn.classList.toggle('active', btn.dataset.layout === layout);
-                });
+                // Update layout button label
+                const layoutLabels = {
+                    'title': 'Title',
+                    'split': 'Split',
+                    'image': 'Image',
+                    'grid': 'Grid Cards',
+                    'comparison': '2-Column Table',
+                    'compare3': '3-Column Table'
+                };
+                document.getElementById('current-layout-label').textContent = layoutLabels[layout] || layout;
+                
+                // Close menu if open
+                document.getElementById('layout-menu').classList.add('hidden');
             }
 
             updateField(field, value) {