323 lines
17 KiB
JavaScript
323 lines
17 KiB
JavaScript
/* ObsiGate — Command Palette (Ctrl+Shift+Espace / Ctrl+Alt+Espace) */
|
|
import { api } from './auth.js';
|
|
import { openFile } from './viewer.js';
|
|
import { showToast, toggleTheme, TabManager } from './ui.js';
|
|
import { openEditor } from './utils.js';
|
|
import { state } from './state.js';
|
|
|
|
function triggerGoHome() { const e = document.getElementById('header-logo'); if (e) e.click(); }
|
|
|
|
function getCurrentFile() {
|
|
const id = TabManager._activeTabId;
|
|
if (id) { const t = TabManager._tabs.find(x => x.id === id); if (t) return { vault: t.vault, path: t.path }; }
|
|
if (state.currentVault && state.currentPath) return { vault: state.currentVault, path: state.currentPath };
|
|
return null;
|
|
}
|
|
|
|
// ── DOM / state ──
|
|
let _overlay = null, _input = null, _results = null, _mode = 'files', _sel = 0, _to = null, _items = [];
|
|
let _browse = { action: null, vault: null, path: '' };
|
|
|
|
// ── Commands ──
|
|
const CMDS = [
|
|
{ id:'home', label:'🏠 Accueil', desc:"Retour à l'accueil", cat:'Navigation', act:()=>{close();triggerGoHome();} },
|
|
{ id:'edit-current', label:'✏️ Éditer fichier courant', desc:'Ouvrir le fichier actif dans l\'éditeur', cat:'Fichiers', act:()=>{close();const f=getCurrentFile();if(f)openEditor(f.vault,f.path);else showToast('Aucun fichier ouvert','error');} },
|
|
{ id:'popout', label:'🪟 Pop-out', desc:'Ouvrir le document dans une fenêtre', cat:'Fichiers', act:()=>{close();const f=getCurrentFile();if(f)window.open(`/popout/${encodeURIComponent(f.vault)}/${encodeURIComponent(f.path)}`,'popout','width=1000,height=700');else showToast('Aucun fichier ouvert','error');} },
|
|
{ id:'create-file', label:'📄 Créer fichier markdown', desc:'Choisir la vault, naviguer, puis nommer le fichier', cat:'Fichiers', act:()=>startBrowse('create-file') },
|
|
{ id:'delete-cur', label:'🗑️ Supprimer fichier courant', desc:'Supprimer le fichier de l\'onglet actif', cat:'Fichiers', act:async()=>{close();await delCurFile();} },
|
|
{ id:'create-dir', label:'📁 Créer répertoire', desc:'Choisir la vault, naviguer, puis nommer le dossier', cat:'Répertoires', act:()=>startBrowse('create-dir') },
|
|
{ id:'delete-dir', label:'🗑️ Supprimer répertoire', desc:'Choisir la vault, naviguer et supprimer', cat:'Répertoires', act:()=>startBrowse('delete-dir') },
|
|
{ id:'theme', label:'🌓 Changer le thème', desc:'Basculer clair/sombre', cat:'Actions', act:()=>{close();toggleTheme();} },
|
|
{ id:'reindex', label:'🔄 Réindexer', desc:'Forcer la réindexation complète', cat:'Actions', act:async()=>{close();try{await api('/api/index/reload');showToast('Index rechargé','success');}catch{showToast('Erreur','error');}} },
|
|
{ id:'help', label:'❓ Aide', desc:'Ouvrir le guide', cat:'Système', act:()=>{close();const b=document.getElementById('help-open-btn');if(b)b.click();} },
|
|
{ id:'config', label:'⚙️ Configuration', desc:'Ouvrir les paramètres', cat:'Système', act:()=>{close();const b=document.getElementById('config-open-btn');if(b)b.click();} },
|
|
];
|
|
|
|
// ── Browse: vault picker ──
|
|
function startBrowse(action) {
|
|
_browse = { action, vault: null, path: '' };
|
|
switchMode('browse-vault');
|
|
renderVaultPicker();
|
|
}
|
|
|
|
async function renderVaultPicker() {
|
|
try {
|
|
const data = await api('/api/vaults');
|
|
const vaults = Array.isArray(data) ? data : [];
|
|
_items = vaults.map(v => ({ type:'_vault', vault: v.name, label: (v.type==='DIR'?'📂':'🗂️')+' '+v.name, sublabel: v.file_count+' fichiers' }));
|
|
if (_items.length === 0) {
|
|
_items = [{ type:'_empty', label: 'Aucune vault trouvée', sublabel: '' }];
|
|
}
|
|
render();
|
|
} catch { _items = [{ type:'_error', label: 'Erreur de chargement', sublabel: '' }]; render(); }
|
|
}
|
|
|
|
// ── Browse: directory navigation ──
|
|
async function renderBrowse() {
|
|
const { vault, path } = _browse;
|
|
_items = [];
|
|
const bc = document.getElementById('cp-breadcrumb');
|
|
if (bc) {
|
|
bc.style.display = 'flex';
|
|
const segs = path ? path.split('/') : [];
|
|
let html = `<span class="cp-bc-item cp-bc-root" data-vault="1">${esc(vault)}</span>`;
|
|
let acc = '';
|
|
for (const s of segs) { acc = acc ? acc+'/'+s : s; html += `<span class="cp-bc-sep">/</span><span class="cp-bc-item" data-path="${esc(acc)}">${esc(s)}</span>`; }
|
|
bc.innerHTML = html;
|
|
bc.querySelectorAll('.cp-bc-item[data-path]').forEach(el => el.addEventListener('click', ()=>{ _browse.path=el.dataset.path; renderBrowse(); }));
|
|
bc.querySelector('.cp-bc-root').addEventListener('click', ()=>{ _browse.path=''; renderBrowse(); });
|
|
}
|
|
|
|
try {
|
|
const data = await api(`/api/browse/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`);
|
|
const items = data.items || [];
|
|
const dirs = items.filter(i => i.type === 'directory' || i.is_dir);
|
|
const files = items.filter(i => i.type === 'file' && !i.is_dir);
|
|
|
|
// Action row
|
|
const actLabel = { 'create-file':'📄 Créer fichier ici', 'create-dir':'📁 Créer dossier ici', 'delete-dir':'🗑️ Supprimer ce dossier' };
|
|
if (_browse.action === 'delete-dir' && path) {
|
|
_items.push({ type:'_action', id:'confirm', label: '🗑️ Supprimer '+ (path.split('/').pop()||path), sublabel: 'Tout le contenu sera supprimé', act:()=>execDelDir(path) });
|
|
} else if (_browse.action !== 'delete-dir') {
|
|
_items.push({ type:'_action', id:'confirm', label: actLabel[_browse.action]||'', sublabel: 'Dans '+(path||'racine'), act:()=>askName() });
|
|
}
|
|
|
|
// Parent
|
|
if (path) {
|
|
const parent = path.split('/').slice(0,-1).join('/');
|
|
_items.push({ type:'_nav', label: '📂 .. (parent)', go: parent });
|
|
}
|
|
|
|
// Subdirs
|
|
for (const d of dirs) {
|
|
const fp = path ? path+'/'+d.name : d.name;
|
|
_items.push({ type:'_nav', label: '📁 '+d.name, go: fp });
|
|
}
|
|
// Files (info)
|
|
for (const f of files) _items.push({ type:'_info', label: '📄 '+f.name, sublabel: '' });
|
|
|
|
if (_items.length === 0) _items.push({ type:'_empty', label: '📂 Dossier vide', sublabel: '' });
|
|
} catch { _items = [{ type:'_error', label: 'Erreur', sublabel: '' }]; }
|
|
render();
|
|
}
|
|
|
|
// ── Name input modal ──
|
|
function askName() {
|
|
const label = _browse.action === 'create-file' ? 'Nom du fichier' : 'Nom du dossier';
|
|
const ext = _browse.action === 'create-file' ? '(.md ajouté si besoin)' : '';
|
|
const existingInput = document.getElementById('cp-name-input');
|
|
if (existingInput) { existingInput.focus(); return; }
|
|
|
|
_input.style.display = 'none';
|
|
const bc = document.getElementById('cp-breadcrumb');
|
|
if (bc) bc.style.display = 'none';
|
|
|
|
const nameDiv = document.createElement('div');
|
|
nameDiv.id = 'cp-name-input';
|
|
nameDiv.className = 'cp-name-input';
|
|
nameDiv.innerHTML = `<input type="text" id="cp-name-field" class="cp-name-field" placeholder="${label} ${ext}" autocomplete="off" spellcheck="false">
|
|
<span class="cp-name-hint">Enter confirmer · Esc annuler</span>`;
|
|
_results.before(nameDiv);
|
|
|
|
const field = document.getElementById('cp-name-field');
|
|
field.focus();
|
|
field.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
const name = field.value.trim();
|
|
if (!name) return;
|
|
cleanupNameInput();
|
|
if (_browse.action === 'create-file') execCreateFile(name);
|
|
else execCreateDir(name);
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
cleanupNameInput();
|
|
renderBrowse();
|
|
}
|
|
});
|
|
}
|
|
|
|
function cleanupNameInput() {
|
|
const el = document.getElementById('cp-name-input');
|
|
if (el) el.remove();
|
|
_input.style.display = '';
|
|
const bc = document.getElementById('cp-breadcrumb');
|
|
if (bc) bc.style.display = 'flex';
|
|
}
|
|
|
|
// ── Execute actions ──
|
|
async function execCreateFile(name) {
|
|
let fp = _browse.path ? _browse.path+'/'+name : name;
|
|
if (!fp.includes('.')) fp += '.md';
|
|
try {
|
|
const d = await api(`/api/file/${encodeURIComponent(_browse.vault)}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({path:fp, content:`# ${name.replace('.md','')}\n\n`}) });
|
|
if (d?.status==='ok' || d?.success) { showToast(`✅ ${fp} créé`,'success'); close(); openEditor(_browse.vault, fp); }
|
|
else showToast('Erreur de création','error');
|
|
} catch(e) { showToast('Erreur : '+(e.message||e),'error'); }
|
|
}
|
|
|
|
async function execCreateDir(name) {
|
|
const dp = _browse.path ? _browse.path+'/'+name : name;
|
|
try {
|
|
const d = await api(`/api/directory/${encodeURIComponent(_browse.vault)}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({path:dp}) });
|
|
if (d?.status==='ok' || d?.success) { showToast(`📁 ${dp} créé`,'success'); close(); refreshSidebar(); }
|
|
else showToast('Erreur','error');
|
|
} catch(e) { showToast('Erreur : '+(e.message||e),'error'); }
|
|
}
|
|
|
|
async function execDelDir(path) {
|
|
if (!confirm(`Supprimer "${path}" et TOUT son contenu ?`)) return;
|
|
try {
|
|
const d = await api(`/api/directory/${encodeURIComponent(_browse.vault)}?path=${encodeURIComponent(path)}`, { method:'DELETE' });
|
|
if (d?.status==='ok' || d?.success) { showToast(`🗑️ ${path} supprimé`,'success'); close(); refreshSidebar(); }
|
|
else showToast('Erreur','error');
|
|
} catch(e) { showToast('Erreur : '+(e.message||e),'error'); }
|
|
}
|
|
|
|
async function delCurFile() {
|
|
const f = getCurrentFile();
|
|
if (!f) { showToast('Aucun fichier ouvert','error'); return; }
|
|
if (!confirm(`Supprimer "${f.path}" ?`)) return;
|
|
try {
|
|
const d = await api(`/api/file/${encodeURIComponent(f.vault)}?path=${encodeURIComponent(f.path)}`, { method:'DELETE' });
|
|
if (d?.status==='ok' || d?.success) { showToast(`🗑️ ${f.path} supprimé`,'success');
|
|
const tab = TabManager._tabs.find(t=>t.vault===f.vault&&t.path===f.path); if(tab) TabManager.close(tab.id); triggerGoHome(); refreshSidebar(); }
|
|
else showToast('Erreur','error');
|
|
} catch(e) { showToast('Erreur : '+(e.message||e),'error'); }
|
|
}
|
|
|
|
function refreshSidebar() {
|
|
// Try to refresh the vault tree
|
|
import('./sidebar.js').then(m => { if (m.loadVaults) m.loadVaults(); }).catch(() => {});
|
|
}
|
|
|
|
// ── DOM ──
|
|
function createDOM() {
|
|
if (_overlay) return;
|
|
_overlay = document.createElement('div');
|
|
_overlay.className = 'command-palette-overlay';
|
|
_overlay.innerHTML = `<div class="command-palette">
|
|
<div class="cp-header"><input type="text" class="cp-input" placeholder="Rechercher un fichier... (tapez > pour les commandes)" spellcheck="false" autocomplete="off"><div class="cp-breadcrumb" id="cp-breadcrumb"></div><span class="cp-hint">Ctrl+Shift+Espace</span></div>
|
|
<div class="cp-results"></div>
|
|
<div class="cp-footer"><span>↑↓ naviguer</span><span>↵ ouvrir/entrer</span><span>⌫ monter</span><span>Esc fermer</span></div></div>`;
|
|
_input = _overlay.querySelector('.cp-input');
|
|
_results = _overlay.querySelector('.cp-results');
|
|
_overlay.addEventListener('click', (e) => { if (e.target === _overlay) close(); });
|
|
_input.addEventListener('keydown', onKeyDown);
|
|
_input.addEventListener('input', onInput);
|
|
document.body.appendChild(_overlay);
|
|
}
|
|
|
|
export function open(q = '') {
|
|
createDOM();
|
|
_overlay.classList.add('active');
|
|
_input.value = q;
|
|
_mode = q.startsWith('>') ? 'commands' : 'files';
|
|
_input.disabled = false; _input.style.display = '';
|
|
_sel = 0; _items = []; _results.innerHTML = '';
|
|
_input.focus();
|
|
onInput();
|
|
}
|
|
|
|
export function close() {
|
|
if (!_overlay) return;
|
|
_overlay.classList.remove('active');
|
|
if (_to) clearTimeout(_to); _to = null;
|
|
_mode = 'files';
|
|
cleanupNameInput();
|
|
const bc = document.getElementById('cp-breadcrumb'); if (bc) bc.style.display = 'none';
|
|
const si = document.querySelector('.search-input'); if (si) si.focus();
|
|
}
|
|
|
|
function isOpen() { return _overlay && _overlay.classList.contains('active'); }
|
|
|
|
function switchMode(m) {
|
|
_mode = m;
|
|
if (m === 'browse' || m === 'browse-vault') {
|
|
_input.style.display = 'none'; _input.disabled = true;
|
|
} else {
|
|
_input.style.display = ''; _input.disabled = false;
|
|
const bc = document.getElementById('cp-breadcrumb'); if (bc) bc.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function onInput() {
|
|
if (_mode === 'browse' || _mode === 'browse-vault') return;
|
|
const v = _input.value;
|
|
const nm = v.startsWith('>') ? 'commands' : 'files';
|
|
if (nm !== _mode) { _mode = nm; _input.placeholder = _mode==='commands'?'Tapez une commande...':'Rechercher un fichier... (tapez > pour les commandes)'; }
|
|
if (_to) clearTimeout(_to);
|
|
_to = setTimeout(() => { _to = null; if (_mode==='commands') searchCmd(v.slice(1).trim()); else searchFiles(v.trim()); }, 150);
|
|
}
|
|
|
|
async function searchFiles(q) {
|
|
if (!q) { _items = []; _results.innerHTML = '<div class="cp-empty">Commencez à taper</div>'; return; }
|
|
try {
|
|
const d = await api(`/api/suggest?q=${encodeURIComponent(q)}&vault=all`);
|
|
const sug = d.suggestions || [];
|
|
_items = sug.map(s => ({ type:'file', vault:s.vault, path:s.path, label:s.title||s.path.split('/').pop(), sublabel:`${s.vault}/${s.path}` }));
|
|
render();
|
|
} catch { _results.innerHTML = '<div class="cp-empty cp-error">Erreur</div>'; }
|
|
}
|
|
|
|
function searchCmd(q) {
|
|
if (!q) { _items = CMDS.map(c => ({ type:'cmd', ...c })); render(); return; }
|
|
const lq = q.toLowerCase();
|
|
_items = CMDS.filter(c => c.label.toLowerCase().includes(lq)||c.desc.toLowerCase().includes(lq)||(c.cat&&c.cat.toLowerCase().includes(lq))).map(c => ({ type:'cmd', ...c }));
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
_sel = 0;
|
|
if (!_items.length) { _results.innerHTML = '<div class="cp-empty">Aucun résultat</div>'; return; }
|
|
_results.innerHTML = _items.map((it, i) => `<div class="cp-item ${i===0?'cp-selected':''}" data-idx="${i}"><div class="cp-item-label">${esc(it.label)}</div><div class="cp-item-sublabel">${esc(it.sublabel||'')}</div></div>`).join('');
|
|
_results.querySelectorAll('.cp-item').forEach(el => {
|
|
el.addEventListener('click', () => exec(parseInt(el.dataset.idx)));
|
|
el.addEventListener('mouseenter', () => { document.querySelectorAll('.cp-item').forEach(e=>e.classList.remove('cp-selected')); el.classList.add('cp-selected'); _sel = parseInt(el.dataset.idx); });
|
|
});
|
|
scroll();
|
|
}
|
|
|
|
function onKeyDown(e) {
|
|
const items = _results.querySelectorAll('.cp-item');
|
|
if (_mode === 'browse' || _mode === 'browse-vault') {
|
|
if (e.key === 'Escape') { e.preventDefault(); close(); }
|
|
else if (e.key === 'Backspace') {
|
|
e.preventDefault();
|
|
if (_mode === 'browse-vault') { _mode='commands'; _input.style.display=''; _input.disabled=false; _input.focus(); searchCmd(''); return; }
|
|
const segs = _browse.path ? _browse.path.split('/') : [];
|
|
if (segs.length > 0) { _browse.path = segs.slice(0,-1).join('/'); renderBrowse(); }
|
|
else if (_browse.vault) { switchMode('browse-vault'); renderVaultPicker(); }
|
|
}
|
|
else if (e.key === 'Enter') { e.preventDefault(); exec(_sel); }
|
|
else if (e.key === 'ArrowDown') { e.preventDefault(); _sel = Math.min(_sel+1, _items.length-1); updSel(items); }
|
|
else if (e.key === 'ArrowUp') { e.preventDefault(); _sel = Math.max(_sel-1, 0); updSel(items); }
|
|
return;
|
|
}
|
|
if (e.key === 'Escape') { e.preventDefault(); close(); }
|
|
else if (e.key === 'Enter') { e.preventDefault(); exec(_sel); }
|
|
else if (e.key === 'ArrowDown') { e.preventDefault(); _sel = Math.min(_sel+1, _items.length-1); updSel(items); }
|
|
else if (e.key === 'ArrowUp') { e.preventDefault(); _sel = Math.max(_sel-1, 0); updSel(items); }
|
|
else if (e.key === 'Tab') { e.preventDefault(); if (_mode==='files') { _input.value='> '; setTimeout(()=>_input.setSelectionRange(2,2),0); } else _input.value=''; onInput(); }
|
|
}
|
|
|
|
function updSel(items) { items.forEach((el,i)=>el.classList.toggle('cp-selected',i===_sel)); scroll(); }
|
|
function scroll() { const s = _results.querySelector('.cp-selected'); if (s) s.scrollIntoView({block:'nearest'}); }
|
|
|
|
function exec(idx) {
|
|
const it = _items[idx]; if (!it) return;
|
|
if (it.type === 'file') { close(); openFile(it.vault, it.path); }
|
|
else if (it.type === 'cmd') { it.act(); }
|
|
else if (it.type === '_vault') { _browse.vault = it.vault; switchMode('browse'); renderBrowse(); }
|
|
else if (it.type === '_nav') { _browse.path = it.go; renderBrowse(); }
|
|
else if (it.type === '_action') { it.act(); }
|
|
}
|
|
|
|
function esc(s) { if (!s) return ''; return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
|
|
|
export function initCommandPalette() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if ((e.ctrlKey||e.metaKey) && e.shiftKey && !e.altKey && (e.key===' '||e.code==='Space')) { e.preventDefault(); if (isOpen()) close(); else open(''); }
|
|
if ((e.ctrlKey||e.metaKey) && e.altKey && !e.shiftKey && (e.key===' '||e.code==='Space')) { e.preventDefault(); if (isOpen()) close(); else open('> '); }
|
|
});
|
|
} |