From 96c1e9e6ecc84697b7fa2e01414b63896255ba52 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 3 Jun 2026 13:46:37 -0400
Subject: [PATCH] Mobile: add vault context indicator pill below header

---
 frontend/index.html           |  3 +++
 frontend/js/mobile-toolbar.js | 14 ++++++++++++++
 frontend/style.css            | 21 +++++++++++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/frontend/index.html b/frontend/index.html
index 1c675da..96308a2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -878,6 +878,9 @@
                 ></div>
 
                 <!-- Content Wrapper (tab bar + content area) -->
+                <div class="vault-context-bar" id="vault-context-bar">
+                    <span class="vault-context-pill" id="vault-context-pill">📂 Toutes les vaults</span>
+                </div>
                 <div class="content-wrapper">
                     <!-- Tab bar -->
                     <div class="tab-bar" id="tab-bar" hidden>
diff --git a/frontend/js/mobile-toolbar.js b/frontend/js/mobile-toolbar.js
index 24ca70d..ecb9ecd 100644
--- a/frontend/js/mobile-toolbar.js
+++ b/frontend/js/mobile-toolbar.js
@@ -131,5 +131,19 @@ export function initMobileToolbar() {
   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 = '📂 Toutes les vaults';
+    } else {
+      pill.textContent = '📂 ' + vaultName;
+    }
+  }
+  updateVaultPill();
+  setInterval(updateVaultPill, 1500);
+
   window._mtUpdateTabs = updateTabCount;
 }
diff --git a/frontend/style.css b/frontend/style.css
index 4a23dcf..b352a96 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -6554,6 +6554,9 @@ body.popup-mode .content-area {
 .mobile-toolbar {
   display: none;
 }
+.vault-context-bar {
+  display: none;
+}
 
 @media (max-width: 768px) {
   .mobile-toolbar {
@@ -6611,6 +6614,24 @@ body.popup-mode .content-area {
     display: none !important;
   }
 
+  /* Vault context indicator */
+  .vault-context-bar {
+    display: flex;
+    align-items: center;
+    padding: 6px 14px;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border);
+  }
+  .vault-context-pill {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 10%, transparent);
+    padding: 3px 10px;
+    border-radius: 12px;
+    white-space: nowrap;
+  }
+
   .mt-btn {
     display: flex;
     flex-direction: column;