From 0f4a7405db18238270bd5faef65c79d036aa909c Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Mon, 15 Jun 2026 14:11:49 -0400 Subject: [PATCH] feat: section aide rapide dans le dashboard stats - Boite elegante sous les statistiques avec icone clavier - 10 raccourcis clavier essentiels (palette, recherche, edition) - Badges style touches clavier (mono, accent, bordure) - Astuce Ctrl+survol et editeur Forge - Toggle masquer/afficher avec persistence localStorage - Layout grid responsive (auto-fill minmax 260px) --- frontend/index.html | 55 +++++++++++++++++++++++++++ frontend/js/dashboard.js | 18 +++++++++ frontend/style.css | 82 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 155 insertions(+) diff --git a/frontend/index.html b/frontend/index.html index 8a16a63..2c8bc4d 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -979,6 +979,61 @@ id="dashboard-conflicts-container" style="margin-top: 16px" > + +
+
+ + Raccourcis & Astuces + +
+
+
+ Ctrl+Shift+Space + Palette de commandes +
+
+ Ctrl+Alt+Space + Palette de fichiers (navigation rapide) +
+
+ Ctrl+K + Focus barre de recherche +
+
+ / + Recherche rapide (hors champ texte) +
+
+ Ctrl+S + Sauvegarder le fichier ouvert +
+
+ Ctrl+F + Rechercher dans le document +
+
+ Esc + Fermer l'editeur / modale +
+
+ Ctrl+J + Completion IA inline (dans l'editeur) +
+
+ Alt+I + Insertion rapide (editeur Forge) +
+
+ F1 + Aide de l'editeur Forge +
+
+
+ + Survolez un document avec Ctrl pour un apercu rapide. Cliquez sur Forge dans la barre d'outils pour l'editeur avance. +
+
+
diff --git a/frontend/js/dashboard.js b/frontend/js/dashboard.js index b1f89d7..7bc2e11 100644 --- a/frontend/js/dashboard.js +++ b/frontend/js/dashboard.js @@ -395,6 +395,24 @@ const DashboardRecentWidget = { } this.populateVaultFilter(); + + // Quick Help toggle (with localStorage persistence) + var qhToggle = document.getElementById('qh-toggle'); + var qhBody = document.getElementById('qh-body'); + if (qhToggle && qhBody) { + // Restore saved state + if (localStorage.getItem('obsigate-qh-collapsed') === '1') { + qhBody.classList.add('collapsed'); + qhToggle.textContent = '+'; + qhToggle.title = 'Afficher'; + } + qhToggle.addEventListener('click', function() { + var collapsed = qhBody.classList.toggle('collapsed'); + qhToggle.textContent = collapsed ? '+' : '\u2212'; + qhToggle.title = collapsed ? 'Afficher' : 'Masquer'; + localStorage.setItem('obsigate-qh-collapsed', collapsed ? '1' : '0'); + }); + } }, }; diff --git a/frontend/style.css b/frontend/style.css index 1703e09..5704d4a 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -6446,6 +6446,88 @@ body.popup-mode .content-area { } .conflict-btn:hover { background: var(--bg-hover); } +/* ── Quick Help (Dashboard) ── */ +.quick-help { + margin-top: 16px; + background: var(--bg-card, var(--bg-secondary)); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + overflow: hidden; +} +.qh-header { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 14px; + font-size: 0.8rem; + font-weight: 600; + color: var(--text-secondary); + border-bottom: 1px solid var(--border); + user-select: none; +} +.qh-header i { color: var(--accent); opacity: 0.7; } +.qh-toggle { + margin-left: auto; + background: none; + border: none; + color: var(--text-muted); + cursor: pointer; + font-size: 1rem; + line-height: 1; + padding: 2px 6px; + border-radius: 4px; +} +.qh-toggle:hover { color: var(--text-secondary); background: var(--bg-hover); } +.qh-body { + padding: 10px 14px 14px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 6px 20px; +} +.qh-body.collapsed { display: none; } +.qh-row { + display: flex; + align-items: center; + gap: 10px; + padding: 4px 0; +} +.qh-kbd { + display: inline-flex; + align-items: center; + padding: 2px 8px; + font-family: var(--mono); + font-size: 0.7rem; + font-weight: 500; + color: var(--accent-text, #79c0ff); + background: var(--accent-bg, #1f2a3a); + border: 1px solid var(--border-md, #30363d); + border-radius: 4px; + white-space: nowrap; + min-width: 0; + letter-spacing: 0.3px; +} +.qh-desc { + font-size: 0.78rem; + color: var(--text-secondary); +} +.qh-divider { + grid-column: 1 / -1; + height: 1px; + background: var(--border); + margin: 6px 0 8px; +} +.qh-tip { + grid-column: 1 / -1; + display: flex; + align-items: flex-start; + gap: 8px; + font-size: 0.75rem; + color: var(--text-muted); + line-height: 1.5; +} +.qh-tip i { color: var(--warn); flex-shrink: 0; margin-top: 1px; } +.qh-tip strong { color: var(--text-secondary); } + /* ── Webhooks UI ── */ .webhook-item { display: flex;