Mobile bottom toolbar: explorer, search, palette, tab switcher — Obsidian-style
This commit is contained in:
@@ -1572,5 +1572,37 @@ curl -X POST https://votre-serveur.com/webhook \
|
||||
</div>
|
||||
|
||||
<script type="module" src="/static/js/app.js"></script>
|
||||
|
||||
<!-- ── Mobile Bottom Toolbar ── -->
|
||||
<nav class="mobile-toolbar" id="mobile-toolbar" aria-label="Barre d'outils mobile">
|
||||
<button class="mt-btn" id="mt-explorer" title="Explorateur" aria-label="Explorateur de vault">
|
||||
<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">
|
||||
<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>
|
||||
<button class="mt-btn" id="mt-tabs" title="Onglets" aria-label="Onglets ouverts">
|
||||
<i data-lucide="files" style="width:20px;height:20px"></i>
|
||||
<span class="mt-badge" id="mt-tab-count" style="display:none">0</span>
|
||||
<span class="mt-label">Onglets</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- ── Mobile Tab Switcher (bottom sheet) ── -->
|
||||
<div class="mt-tab-switcher" id="mt-tab-switcher">
|
||||
<div class="mt-sheet-handle"></div>
|
||||
<div class="mt-sheet-header">
|
||||
<span class="mt-sheet-title">Fichiers ouverts</span>
|
||||
<button class="mt-sheet-close" id="mt-sheet-close" aria-label="Fermer">✕</button>
|
||||
</div>
|
||||
<div class="mt-sheet-list" id="mt-tab-list"></div>
|
||||
</div>
|
||||
<div class="mt-overlay" id="mt-overlay"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -6547,3 +6547,225 @@ body.popup-mode .content-area {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
Mobile Bottom Toolbar (Obsidian-style)
|
||||
══════════════════════════════════════════ */
|
||||
.mobile-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mobile-toolbar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border);
|
||||
z-index: 900;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0 4px;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
/* Push content up to avoid toolbar overlap */
|
||||
.main-layout {
|
||||
padding-bottom: 56px;
|
||||
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
|
||||
}
|
||||
.editor-modal.active ~ .main-layout {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.mt-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
padding: 2px 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.mt-btn:active {
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.mt-btn svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mt-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
.mt-btn-primary {
|
||||
color: var(--accent);
|
||||
}
|
||||
.mt-btn-primary .mt-label {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Tab count badge */
|
||||
.mt-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 50%;
|
||||
transform: translateX(18px);
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ── Tab Switcher Bottom Sheet ── */
|
||||
.mt-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 950;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
.mt-overlay.visible {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mt-tab-switcher {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 60vh;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 16px 16px 0 0;
|
||||
z-index: 960;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
.mt-tab-switcher.open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mt-sheet-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
margin: 10px auto 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mt-sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mt-sheet-title {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.mt-sheet-close {
|
||||
width: 28px; height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.mt-sheet-close:hover { color: var(--accent); border-color: var(--accent); }
|
||||
|
||||
.mt-sheet-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 12px 12px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.mt-tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.85rem;
|
||||
transition: background 0.1s;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.mt-tab-item:active {
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.mt-tab-item.active {
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.mt-tab-item-icon {
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.mt-tab-item-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mt-tab-item-close {
|
||||
width: 24px; height: 24px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mt-tab-item-close:hover {
|
||||
color: var(--danger, #ef4444);
|
||||
background: rgba(239,68,68,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user