ObsiGate/desktop/frontend-static/js/mobile-toolbar.js

/* ObsiGate — Mobile Bottom Toolbar (Obsidian-style)
   Phases 1-5: fixed bar, vault home, file palette, commands, tab switcher */
import { state } from './state.js';
import { TabManager } from './ui.js';

// ── Open file palette (search files) ──
function openFilePalette() {
  import('./palette.js').then(m => { m.open(''); });
}

// ── Open command palette ──
function openCommandPalette() {
  import('./palette.js').then(m => { m.open('> '); });
}

// ── Tab switcher ──
function openTabSwitcher() {
  const sheet = document.getElementById('mt-tab-switcher');
  const overlay = document.getElementById('mt-overlay');
  if (!sheet || !overlay) return;

  renderTabList();
  sheet.classList.add('open');
  overlay.classList.add('visible');
}

function closeTabSwitcher() {
  const sheet = document.getElementById('mt-tab-switcher');
  const overlay = document.getElementById('mt-overlay');
  if (sheet) sheet.classList.remove('open');
  if (overlay) overlay.classList.remove('visible');
}

function renderTabList() {
  const list = document.getElementById('mt-tab-list');
  if (!list) return;

  const tabs = TabManager._tabs || [];
  const activeId = TabManager._activeTabId;

  if (tabs.length === 0) {
    list.innerHTML = '<div class="cp-empty" style="padding:20px;text-align:center">Aucun fichier ouvert</div>';
    return;
  }

  list.innerHTML = tabs.map(t => {
    const isActive = t.id === activeId;
    const icon = t.path.endsWith('.md') ? '📄' : '📝';
    return `<div class="mt-tab-item${isActive ? ' active' : ''}" data-tab-id="${t.id}">
      <span class="mt-tab-item-icon">${icon}</span>
      <span class="mt-tab-item-name">${t.title || t.path.split('/').pop()}</span>
      <button class="mt-tab-item-close" data-close="${t.id}" aria-label="Fermer">✕</button>
    </div>`;
  }).join('');

  list.querySelectorAll('.mt-tab-item').forEach(el => {
    el.addEventListener('click', (e) => {
      if (e.target.closest('.mt-tab-item-close')) return;
      const tabId = el.dataset.tabId;
      if (tabId) {
        TabManager.activate(tabId);
        closeTabSwitcher();
      }
    });
  });

  list.querySelectorAll('.mt-tab-item-close').forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      const tabId = btn.dataset.close;
      if (tabId) {
        TabManager.close(tabId);
        setTimeout(() => renderTabList(), 100);
      }
    });
  });
}

function updateTabCount() {
  const badge = document.getElementById('mt-tab-count');
  if (!badge) return;
  const count = (TabManager._tabs || []).length;
  if (count > 0) {
    badge.style.display = 'flex';
    badge.textContent = count;
  } else {
    badge.style.display = 'none';
  }
}

// ── Vault home / sidebar toggle ──
function toggleExplorer() {
  const sidebar = document.getElementById('sidebar');
  if (sidebar) {
    if (sidebar.classList.contains('mobile-open')) {
      sidebar.classList.remove('mobile-open');
    } else {
      sidebar.classList.add('mobile-open');
    }
  }
  if (!state.currentVault && state.allVaults && state.allVaults.length > 0) {
    import('./sidebar.js').then(m => {
      if (m.setSelectedVaultContext) m.setSelectedVaultContext(state.allVaults[0].name);
    });
  }
}

// ── Init ──
export function initMobileToolbar() {
  const explorerBtn = document.getElementById('mt-explorer');
  const searchBtn = document.getElementById('mt-search');
  const paletteBtn = document.getElementById('mt-palette');
  const tabsBtn = document.getElementById('mt-tabs');
  const sheetClose = document.getElementById('mt-sheet-close');
  const closeAll = document.getElementById('mt-close-all');
  const overlay = document.getElementById('mt-overlay');

  if (explorerBtn) explorerBtn.addEventListener('click', toggleExplorer);
  if (searchBtn) searchBtn.addEventListener('click', openFilePalette);
  if (paletteBtn) paletteBtn.addEventListener('click', openCommandPalette);
  if (tabsBtn) tabsBtn.addEventListener('click', openTabSwitcher);
  if (sheetClose) sheetClose.addEventListener('click', closeTabSwitcher);
  if (closeAll) closeAll.addEventListener('click', () => {
    const tabs = [...(TabManager._tabs || [])];
    tabs.forEach(t => TabManager.close(t.id));
    updateTabCount();
    renderTabList();
  });
  if (overlay) overlay.addEventListener('click', closeTabSwitcher);

  setInterval(updateTabCount, 2000);
  updateTabCount();

  // ── Vault context indicator ──
  function updateVaultPill() {
    const pill = document.getElementById('vault-context-pill');
    if (!pill) return;
    const vaultName = state.selectedContextVault || 'all';
    if (vaultName === 'all') {
      pill.textContent = t("mobile.all_vaults");
    } else {
      pill.textContent = '📂 ' + vaultName;
    }
  }
  updateVaultPill();
  setInterval(updateVaultPill, 1500);

  window._mtUpdateTabs = updateTabCount;
}