Mobile bottom toolbar: explorer, search, palette, tab switcher — Obsidian-style

frontend/js/app.js

@@ -14,6 +14,7 @@ import * as Sync from './sync.js';
 import { initGraphView } from './graph.js';
 import * as Legacy from './legacy.js';
 import { initCommandPalette } from './palette.js';
+import { initMobileToolbar } from './mobile-toolbar.js';
 
 // =========================================================================
 // Initialization — mirrors the original app.js init() ordering
@@ -46,6 +47,7 @@ async function init() {
   UI.ContextMenuManager.init();
   UI.TabManager.init();
   initCommandPalette();
+  initMobileToolbar();
 
   const authOk = await Auth.AuthManager.initAuth();
 

frontend/js/mobile-toolbar.js

@@ -0,0 +1,162 @@
+/* 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 ──
+function openPalette() {
+  import('./palette.js').then(m => { m.open(''); });
+}
+
+// ── Open command palette ──
+function openCommands() {
+  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('');
+
+  // Click handler for switching tabs
+  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();
+      }
+    });
+  });
+
+  // Click handler for closing tabs
+  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);
+      }
+    });
+  });
+}
+
+// ── Update tab count badge ──
+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() {
+  // On mobile: toggle sidebar
+  const sidebar = document.getElementById('sidebar');
+  if (sidebar) {
+    if (sidebar.classList.contains('mobile-open')) {
+      sidebar.classList.remove('mobile-open');
+    } else {
+      sidebar.classList.add('mobile-open');
+    }
+  }
+  // Also focus the vault if none selected
+  if (!state.currentVault && state.allVaults && state.allVaults.length > 0) {
+    import('./sidebar.js').then(m => {
+      if (m.setSelectedVaultContext) m.setSelectedVaultContext(state.allVaults[0].name);
+    });
+  }
+}
+
+// ── Focus search ──
+function focusSearch() {
+  const searchInput = document.querySelector('.search-input');
+  if (searchInput) {
+    searchInput.focus();
+    searchInput.select();
+  }
+}
+
+// ── Init ──
+export function initMobileToolbar() {
+  // Only relevant on mobile, but attach handlers anyway
+  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 overlay = document.getElementById('mt-overlay');
+
+  if (explorerBtn) explorerBtn.addEventListener('click', toggleExplorer);
+  if (searchBtn) searchBtn.addEventListener('click', focusSearch);
+  if (paletteBtn) paletteBtn.addEventListener('click', openPalette);
+  if (tabsBtn) tabsBtn.addEventListener('click', openTabSwitcher);
+  if (sheetClose) sheetClose.addEventListener('click', closeTabSwitcher);
+  if (overlay) overlay.addEventListener('click', closeTabSwitcher);
+
+  // Long-press palette for commands
+  if (paletteBtn) {
+    let pressTimer;
+    paletteBtn.addEventListener('touchstart', () => {
+      pressTimer = setTimeout(() => {
+        openCommands();
+      }, 500);
+    });
+    paletteBtn.addEventListener('touchend', () => clearTimeout(pressTimer));
+    paletteBtn.addEventListener('touchmove', () => clearTimeout(pressTimer));
+    // Click = file palette, right-click / context menu = commands
+    paletteBtn.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      openCommands();
+    });
+  }
+
+  // Update tab count periodically
+  setInterval(updateTabCount, 2000);
+  updateTabCount();
+
+  // Also expose tab count update for external triggers
+  window._mtUpdateTabs = updateTabCount;
+}