Changeset 0.22.9 (#151)

src/js/app.js

@@ -117,6 +117,11 @@ async function startApp() {
         }
     } catch (_) {}
 
+    // If no chat was restored, show the welcome/empty state
+    if (!App.currentChatId) {
+        UI.showEmptyState();
+    }
+
     UI.updateUser();
     UI.showAdminButton(API.isAdmin);
     initListeners();
@@ -125,6 +130,12 @@ async function startApp() {
     try {
         Events.connect((window.__BASE__ || '') + '/ws');
 
+        // Once WS connects, re-fetch tools so browser extension tools appear
+        // (ToolsToggle.init runs before WS is up → server omits browser tools)
+        Events.on('ws.connected', () => {
+            if (typeof ToolsToggle !== 'undefined') ToolsToggle.refresh();
+        });
+
         // Admin-only: persistent fallback alert banner (v0.17.0)
         Events.on('role.fallback', (payload) => {
             if (App.user?.role !== 'admin') return;
@@ -161,80 +172,6 @@ function showFallbackBanner(data) {
 
 // ── Modal Helpers ───────────────────────────
 
-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) {
-        // Remove wrapper if overflow went away (e.g. zoom decreased)
-        const wrap = tabs.parentElement;
-        if (wrap && wrap.classList.contains('modal-tabs-wrap')) {
-            wrap.parentElement.insertBefore(tabs, wrap);
-            wrap.remove();
-        }
-        return;
-    }
-
-    // Wrap if not already wrapped
-    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);
-
-        // Inject arrows
-        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);
-
-        // Update arrow visibility on scroll
-        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);
-}
-
 // ── Auth Flow ────────────────────────────────
 
 function showSplash(health) {