Upload new version

public/assets/js/ui-tabs.js

@@ -1,11 +1,60 @@
-export function initTabs(){
-  const tabs=document.querySelectorAll('nav [data-tab]'); if(!tabs.length) return;
-  const views={ templates:document.getElementById('view-templates'), sections:document.getElementById('view-sections'), blocks:document.getElementById('view-blocks'), snippets:document.getElementById('view-snippets') };
-  tabs.forEach(btn=>btn.addEventListener('click',()=>{
-    tabs.forEach(b=>b.classList.remove('bg-sky-50','text-sky-700'));
-    btn.classList.add('bg-sky-50','text-sky-700');
-    document.querySelectorAll('.view').forEach(v=>v.classList.add('hidden'));
-    const tab=btn.dataset.tab; views[tab]?.classList.remove('hidden');
-    window.loadList && window.loadList(tab);
-  }));
-}
+import { apiAction, toast } from './api.js';
+
+function renderTabs(nav, sections, activeId) {
+  nav.innerHTML = '';
+  sections.forEach((section, idx) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.dataset.sectionId = String(section.id);
+    btn.className = 'px-4 py-2 text-sm border-e';
+    btn.textContent = section.name || `Section ${idx + 1}`;
+    if (section.id === activeId) {
+      btn.classList.add('bg-sky-50', 'text-sky-700');
+    }
+    nav.appendChild(btn);
+  });
+}
+
+function pickDefaultSection(sections) {
+  if (!Array.isArray(sections) || !sections.length) return null;
+  const tpl = sections.find(s => Number(s.is_template) === 1);
+  return tpl || sections[0];
+}
+
+export async function initTabs() {
+  const nav = document.getElementById('sectionTabs');
+  if (!nav) return;
+  const readyPromise = (async () => {
+    try {
+      const res = await apiAction('sections_config.list', { method: 'GET' });
+      const sections = Array.isArray(res?.items) ? res.items : [];
+      if (!sections.length) {
+        nav.innerHTML = '<span class="px-4 py-2 text-sm text-slate-500">Keine Sections</span>';
+        return;
+      }
+      window.__sectionsConfig = sections;
+      const active = pickDefaultSection(sections);
+      window.__activeSection = active;
+      renderTabs(nav, sections, active?.id);
+      nav.querySelectorAll('button[data-section-id]').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const id = Number(btn.dataset.sectionId || 0);
+          const next = sections.find(s => Number(s.id) === id);
+          if (!next) return;
+          window.__activeSection = next;
+          renderTabs(nav, sections, next.id);
+          if (typeof window.loadList === 'function') {
+            window.loadList(next);
+          }
+        });
+      });
+      if (typeof window.loadList === 'function' && active) {
+        window.loadList(active);
+      }
+    } catch (err) {
+      toast(err.message || 'Sections konnten nicht geladen werden', false);
+    }
+  })();
+  window.__sectionsReady = readyPromise;
+  return readyPromise;
+}