Changeset 0.22.9 (#151)

src/js/ui-primitives.js

@@ -791,3 +791,77 @@ function showConfirm(message, opts = {}) {
         overlay.querySelector('[data-action="cancel"]').focus();
     });
 }
+
+// ── Modal open/close ────────────────────────
+// Generic modal show/hide used by settings, admin, debug, team-admin modals.
+// Moved here from app.js so all surfaces (not just chat) can use modals.
+
+function openModal(id) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.add('active');
+    // Defer overflow check — browser needs a frame to lay out the modal
+    requestAnimationFrame(() => {
+        el.querySelectorAll('.modal-tabs').forEach(checkTabsOverflow);
+    });
+}
+
+function closeModal(id) {
+    const el = document.getElementById(id);
+    if (el) el.classList.remove('active');
+}
+
+// Toggle .is-scrollable on tab bars that overflow horizontally
+// and inject arrow navigation buttons when needed.
+function checkTabsOverflow(tabs) {
+    if (!tabs) return;
+    const scrollable = tabs.scrollWidth > tabs.clientWidth + 1;
+
+    if (!scrollable) {
+        const wrap = tabs.parentElement;
+        if (wrap && wrap.classList.contains('modal-tabs-wrap')) {
+            wrap.parentElement.insertBefore(tabs, wrap);
+            wrap.remove();
+        }
+        return;
+    }
+
+    if (!tabs.parentElement.classList.contains('modal-tabs-wrap')) {
+        const wrap = document.createElement('div');
+        wrap.className = 'modal-tabs-wrap';
+        tabs.parentElement.insertBefore(wrap, tabs);
+        wrap.appendChild(tabs);
+
+        const left = document.createElement('button');
+        left.className = 'tab-arrow tab-arrow-left';
+        left.innerHTML = '‹';
+        left.addEventListener('click', () => { tabs.scrollLeft -= 120; });
+
+        const right = document.createElement('button');
+        right.className = 'tab-arrow tab-arrow-right';
+        right.innerHTML = '›';
+        right.addEventListener('click', () => { tabs.scrollLeft += 120; });
+
+        wrap.appendChild(left);
+        wrap.appendChild(right);
+
+        tabs.addEventListener('scroll', () => updateTabArrows(tabs), { passive: true });
+    }
+
+    updateTabArrows(tabs);
+}
+
+function updateTabArrows(tabs) {
+    const wrap = tabs.parentElement;
+    if (!wrap || !wrap.classList.contains('modal-tabs-wrap')) return;
+
+    const left = wrap.querySelector('.tab-arrow-left');
+    const right = wrap.querySelector('.tab-arrow-right');
+    if (!left || !right) return;
+
+    const atStart = tabs.scrollLeft <= 2;
+    const atEnd = tabs.scrollLeft + tabs.clientWidth >= tabs.scrollWidth - 2;
+
+    left.classList.toggle('visible', !atStart);
+    right.classList.toggle('visible', !atEnd);
+}