From 50b823e76dc2efae743f666261eaae973835ea37 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Fri, 11 Sep 2026 09:58:04 -0400
Subject: [PATCH] feat(mobile): bouton assistant AI central dans la barre du
 bas

Sur mobile, la pastille flottante etait masquee par la barre d'outils.

- Masque .ai-fab sur mobile
- Ajoute un bouton rond sureleve #mt-ai au centre de la barre (5 items)
- Extrait openAssistant() dans ai-fab.js (reutilise par la FAB et le bouton mobile)
- mobile-toolbar.js : branche le bouton sur openAssistant()
---
 frontend/index.html           |  8 ++++++++
 frontend/js/ai-fab.js         |  9 ++++++++-
 frontend/js/mobile-toolbar.js |  3 +++
 frontend/style.css            | 31 +++++++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 524fc9e..e8b2e98 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5041,6 +5041,14 @@ curl -X POST https://votre-serveur.com/webhook \
                 <i data-lucide="search" style="width: 20px; height: 20px"></i>
                 <span class="mt-label" data-i18n="settings.search">Recherche</span>
             </button>
+            <button
+                class="mt-btn mt-btn-ai"
+                id="mt-ai"
+                title="Assistant AI"
+                aria-label="Ouvrir l'assistant AI"
+            >
+                <i data-lucide="bot" style="width: 24px; height: 24px"></i>
+            </button>
             <button
                 class="mt-btn mt-btn-primary"
                 id="mt-palette"
diff --git a/frontend/js/ai-fab.js b/frontend/js/ai-fab.js
index 554648e..e1e0057 100644
--- a/frontend/js/ai-fab.js
+++ b/frontend/js/ai-fab.js
@@ -23,7 +23,10 @@ function syncVisibility() {
   _fab.setAttribute('aria-label', label);
 }
 
-async function onClick() {
+// Shared entry point used by the floating FAB and the mobile toolbar button.
+// Reopens a collapsed panel, otherwise opens (or re-focuses) the assistant
+// for the current application context.
+export async function openAssistant() {
   const panel = document.querySelector('.bookslm-panel');
   // Collapsed panel: reveal it instead of reopening.
   if (panel && panel.classList.contains('open') && panel.classList.contains('hidden')) {
@@ -34,6 +37,10 @@ async function onClick() {
   await booksLM.openForCurrentContext();
 }
 
+async function onClick() {
+  await openAssistant();
+}
+
 export function initAIFab() {
   if (_fab) return;
 
diff --git a/frontend/js/mobile-toolbar.js b/frontend/js/mobile-toolbar.js
index b1adc19..299037b 100644
--- a/frontend/js/mobile-toolbar.js
+++ b/frontend/js/mobile-toolbar.js
@@ -2,6 +2,7 @@
    Phases 1-5: fixed bar, vault home, file palette, commands, tab switcher */
 import { state } from './state.js';
 import { TabManager } from './ui.js';
+import { openAssistant } from './ai-fab.js';
 
 // ── Open file palette (search files) ──
 function openFilePalette() {
@@ -109,6 +110,7 @@ function toggleExplorer() {
 export function initMobileToolbar() {
   const explorerBtn = document.getElementById('mt-explorer');
   const searchBtn = document.getElementById('mt-search');
+  const aiBtn = document.getElementById('mt-ai');
   const paletteBtn = document.getElementById('mt-palette');
   const tabsBtn = document.getElementById('mt-tabs');
   const sheetClose = document.getElementById('mt-sheet-close');
@@ -117,6 +119,7 @@ export function initMobileToolbar() {
 
   if (explorerBtn) explorerBtn.addEventListener('click', toggleExplorer);
   if (searchBtn) searchBtn.addEventListener('click', openFilePalette);
+  if (aiBtn) aiBtn.addEventListener('click', () => { openAssistant(); });
   if (paletteBtn) paletteBtn.addEventListener('click', openCommandPalette);
   if (tabsBtn) tabsBtn.addEventListener('click', openTabSwitcher);
   if (sheetClose) sheetClose.addEventListener('click', closeTabSwitcher);
diff --git a/frontend/style.css b/frontend/style.css
index 6f557f0..75f672d 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -7786,6 +7786,37 @@ body.popup-mode .content-area {
     color: var(--accent);
   }
 
+  /* Hide the floating AI pastille on mobile — the assistant lives in the
+     centre of the bottom toolbar instead (below). */
+  .ai-fab {
+    display: none !important;
+  }
+
+  /* AI assistant — raised central button, stands out from the 4 other items */
+  .mt-btn-ai {
+    flex: 0 0 auto;
+    width: 56px;
+    height: 56px;
+    min-height: 56px;
+    margin: -18px 2px 0;
+    border-radius: 50%;
+    background: var(--accent);
+    color: #fff;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--bg-secondary);
+    z-index: 2;
+  }
+  .mt-btn-ai:active {
+    background: var(--accent);
+    transform: scale(0.94);
+  }
+  .mt-btn-ai svg {
+    width: 26px;
+    height: 26px;
+  }
+  .mt-btn-ai .mt-label {
+    display: none;
+  }
+
   /* Tab count badge */
   .mt-badge {
     position: absolute;