From 1c22f6cf9021dd4712769cfda9a27a6f6c5aeb0a Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 3 Jun 2026 12:23:57 -0400
Subject: [PATCH] Mobile: search=file palette, commands button, hide top tabs,
 always full-open files

---
 frontend/index.html           |  8 +++----
 frontend/js/mobile-toolbar.js | 44 ++++-------------------------------
 frontend/js/sidebar.js        | 18 +++++++++++---
 frontend/style.css            |  5 ++++
 4 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 9eb844f..ad6ea53 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1579,13 +1579,13 @@ curl -X POST https://votre-serveur.com/webhook \
       <i data-lucide="folder-open" style="width:20px;height:20px"></i>
       <span class="mt-label">Explorer</span>
     </button>
-    <button class="mt-btn" id="mt-search" title="Rechercher" aria-label="Rechercher">
+    <button class="mt-btn" id="mt-search" title="Rechercher un fichier" aria-label="Rechercher un fichier">
       <i data-lucide="search" style="width:20px;height:20px"></i>
       <span class="mt-label">Recherche</span>
     </button>
-    <button class="mt-btn mt-btn-primary" id="mt-palette" title="Palette" aria-label="Palette de fichiers">
-      <i data-lucide="command" style="width:20px;height:20px"></i>
-      <span class="mt-label">Palette</span>
+    <button class="mt-btn mt-btn-primary" id="mt-palette" title="Commandes" aria-label="Palette de commandes">
+      <i data-lucide="terminal" style="width:20px;height:20px"></i>
+      <span class="mt-label">Commandes</span>
     </button>
     <button class="mt-btn" id="mt-tabs" title="Onglets" aria-label="Onglets ouverts">
       <i data-lucide="files" style="width:20px;height:20px"></i>
diff --git a/frontend/js/mobile-toolbar.js b/frontend/js/mobile-toolbar.js
index a6fd345..03d31e0 100644
--- a/frontend/js/mobile-toolbar.js
+++ b/frontend/js/mobile-toolbar.js
@@ -3,13 +3,13 @@
 import { state } from './state.js';
 import { TabManager } from './ui.js';
 
-// ── Open file palette ──
-function openPalette() {
+// ── Open file palette (search files) ──
+function openFilePalette() {
   import('./palette.js').then(m => { m.open(''); });
 }
 
 // ── Open command palette ──
-function openCommands() {
+function openCommandPalette() {
   import('./palette.js').then(m => { m.open('> '); });
 }
 
@@ -53,7 +53,6 @@ function renderTabList() {
     </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;
@@ -65,7 +64,6 @@ function renderTabList() {
     });
   });
 
-  // Click handler for closing tabs
   list.querySelectorAll('.mt-tab-item-close').forEach(btn => {
     btn.addEventListener('click', (e) => {
       e.stopPropagation();
@@ -78,7 +76,6 @@ function renderTabList() {
   });
 }
 
-// ── Update tab count badge ──
 function updateTabCount() {
   const badge = document.getElementById('mt-tab-count');
   if (!badge) return;
@@ -93,7 +90,6 @@ function updateTabCount() {
 
 // ── Vault home / sidebar toggle ──
 function toggleExplorer() {
-  // On mobile: toggle sidebar
   const sidebar = document.getElementById('sidebar');
   if (sidebar) {
     if (sidebar.classList.contains('mobile-open')) {
@@ -102,7 +98,6 @@ function toggleExplorer() {
       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);
@@ -110,18 +105,8 @@ function toggleExplorer() {
   }
 }
 
-// ── 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');
@@ -130,33 +115,14 @@ export function initMobileToolbar() {
   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 (searchBtn) searchBtn.addEventListener('click', openFilePalette);
+  if (paletteBtn) paletteBtn.addEventListener('click', openCommandPalette);
   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;
 }
diff --git a/frontend/js/sidebar.js b/frontend/js/sidebar.js
index 2e2f3f7..be4cd6e 100644
--- a/frontend/js/sidebar.js
+++ b/frontend/js/sidebar.js
@@ -355,7 +355,11 @@ async function incrementalLoadDirectory(vaultName, dirPath, container) {
         attachTreeItemLongPress(fileItem, () => ({ vault: vaultName, path: item.path, type: "file", isReadonly: false }));
         fileItem.addEventListener("click", () => {
           scrollTreeItemIntoView(fileItem, false);
-          TabManager.openPreview(vaultName, item.path);
+          if (window.innerWidth <= 768) {
+            TabManager.openPersistent(vaultName, item.path);
+          } else {
+            TabManager.openPreview(vaultName, item.path);
+          }
           closeMobileSidebar();
         });
 
@@ -646,7 +650,11 @@ async function loadDirectory(vaultName, dirPath, container) {
       attachTreeItemLongPress(fileItem, () => ({ vault: vaultName, path: item.path, type: "file", isReadonly: false }));
       fileItem.addEventListener("click", () => {
         scrollTreeItemIntoView(fileItem, false);
-        TabManager.openPreview(vaultName, item.path);
+        if (window.innerWidth <= 768) {
+          TabManager.openPersistent(vaultName, item.path);
+        } else {
+          TabManager.openPreview(vaultName, item.path);
+        }
         closeMobileSidebar();
       });
 
@@ -806,7 +814,11 @@ function renderFilteredSidebarResults(query, results) {
         if (entry.type === "directory") {
           await focusPathInSidebar(entry.vault, entry.path, { alignToTop: true, expandTarget: true });
         } else {
-          await TabManager.openPreview(entry.vault, entry.path);
+          if (window.innerWidth <= 768) {
+            await TabManager.openPersistent(entry.vault, entry.path);
+          } else {
+            await TabManager.openPreview(entry.vault, entry.path);
+          }
           await focusPathInSidebar(entry.vault, getParentDirectoryPath(entry.path), { alignToTop: true, expandTarget: true });
           syncActiveFileTreeItem(entry.vault, entry.path);
         }
diff --git a/frontend/style.css b/frontend/style.css
index e0d68be..7627c82 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -6597,6 +6597,11 @@ body.popup-mode .content-area {
     overscroll-behavior-y: auto;
   }
 
+  /* Hide desktop tab bar on mobile (bottom toolbar has its own tab button) */
+  .tab-bar-container {
+    display: none !important;
+  }
+
   .mt-btn {
     display: flex;
     flex-direction: column;