feat: onglet Accueil, menus contextuels de navigation et racine vault #158
- clic sur le titre: la page d'accueil s'ouvre dans un onglet Accueil (icone Maison) epingle en tete de barre, reactivable d'un clic (onglet propre au panneau actif en split) - page de navigation: menus contextuels des repertoires et des fichiers identiques a ceux de la sidebar, clic sur la racine d'un vault qui ouvre la vue, icone dossier a la couleur de l'arbre de navigation - BUG-101: bloc « Keyboard shortcuts for tabs » duplique dans ui.js (un seul Ctrl+W fermait deux onglets) - BUG-102: le menu contextuel se refermait 10 ms apres son ouverture (scroll de reflow des icones lucide)
This commit is contained in:
@@ -292,8 +292,9 @@ function goHome() {
|
||||
// bar, filters) and the sidebar filter bar before showing the dashboard.
|
||||
const searchClear = document.getElementById("search-clear-btn");
|
||||
if (searchClear) searchClear.click();
|
||||
const sideInput = document.getElementById("sidebar-filter-input");
|
||||
const sideClear = document.getElementById("sidebar-filter-clear-btn");
|
||||
if (sideClear) sideClear.click();
|
||||
if (sideClear && sideInput && sideInput.value) sideClear.click();
|
||||
|
||||
const searchInput = document.getElementById("search-input");
|
||||
if (searchInput) searchInput.value = "";
|
||||
@@ -306,7 +307,12 @@ function goHome() {
|
||||
state.cachedRawSource = null;
|
||||
|
||||
closeMobileSidebar();
|
||||
showWelcome();
|
||||
// #158 — la page d'accueil s'ouvre dans un onglet épinglé en tête de barre
|
||||
if (window.TabManager && window.TabManager.openHome) {
|
||||
window.TabManager.openHome();
|
||||
} else {
|
||||
showWelcome();
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
|
||||
@@ -105,6 +105,20 @@ function createPaneTabManager(paneId) {
|
||||
this.activate(tabId);
|
||||
},
|
||||
|
||||
async openHome(name = "Home") {
|
||||
const tabId = "home";
|
||||
const idx = this._tabs.findIndex((x) => x.id === tabId);
|
||||
if (idx > 0) {
|
||||
const [tab] = this._tabs.splice(idx, 1);
|
||||
this._tabs.unshift(tab);
|
||||
} else if (idx === -1) {
|
||||
this._tabs.unshift({ id: tabId, vault: null, path: "", name, icon: "home", home: true });
|
||||
this._tabCache[tabId] = { home: true, vault: null, path: "", title: name, data: null, rawSource: null, sourceView: false, scrollTop: 0, icon: "home" };
|
||||
}
|
||||
this._renderTabs();
|
||||
this.activate(tabId);
|
||||
},
|
||||
|
||||
async openPersistent(vault, path) {
|
||||
const tabId = `${vault}::${path}`;
|
||||
const previewTab = this._tabs.find(t => t.id === tabId && t.preview);
|
||||
@@ -166,6 +180,15 @@ function createPaneTabManager(paneId) {
|
||||
const cache = this._tabCache[tabId];
|
||||
if (!cache) return;
|
||||
|
||||
// Onglet Accueil (#158) — la page d'accueil vit dans l'onglet
|
||||
if (cache.home) {
|
||||
state.currentVault = null;
|
||||
state.currentPath = null;
|
||||
this._showDashboard();
|
||||
if (history.pushState) history.pushState(null, '', '#');
|
||||
return;
|
||||
}
|
||||
|
||||
state.currentVault = cache.vault;
|
||||
state.currentPath = cache.path;
|
||||
// syncActiveFileTreeItem is imported below to avoid circular deps
|
||||
|
||||
@@ -144,7 +144,7 @@ async function refreshSidebarForContext() {
|
||||
|
||||
vaultsToShow.forEach((v) => {
|
||||
const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(v.name)]), smallBadge(v.file_count)]);
|
||||
vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name));
|
||||
vaultItem.addEventListener("click", () => { toggleVault(vaultItem, v.name); TabManager.openNav(v.name, ""); });
|
||||
|
||||
vaultItem.addEventListener("contextmenu", (e) => {
|
||||
e.preventDefault();
|
||||
@@ -241,7 +241,7 @@ async function loadVaults() {
|
||||
vaults.forEach((v) => {
|
||||
// Sidebar tree entry
|
||||
const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(v.name)]), smallBadge(v.file_count)]);
|
||||
vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name));
|
||||
vaultItem.addEventListener("click", () => { toggleVault(vaultItem, v.name); TabManager.openNav(v.name, ""); });
|
||||
|
||||
vaultItem.addEventListener("contextmenu", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
+48
-30
@@ -1776,7 +1776,12 @@ export const ContextMenuManager = {
|
||||
if (e.key === 'Escape') this.hide();
|
||||
});
|
||||
|
||||
document.addEventListener('scroll', () => this.hide(), true);
|
||||
document.addEventListener('scroll', () => {
|
||||
// Un scroll déclenché juste après l'ouverture vient de la reflow des
|
||||
// icônes (lucide) : on ne referme pas le menu qui vient d'apparaître.
|
||||
if (performance.now() - (this._shownAt || 0) < 250) return;
|
||||
this.hide();
|
||||
}, true);
|
||||
},
|
||||
|
||||
show(x, y, vault, path, type, isReadonly) {
|
||||
@@ -1822,6 +1827,7 @@ export const ContextMenuManager = {
|
||||
}
|
||||
|
||||
this._menu.classList.add('active');
|
||||
this._shownAt = performance.now();
|
||||
|
||||
const rect = this._menu.getBoundingClientRect();
|
||||
const viewportWidth = window.innerWidth;
|
||||
@@ -2133,9 +2139,38 @@ export const TabManager = {
|
||||
this.activate(tabId);
|
||||
},
|
||||
|
||||
/** Onglet Accueil (#158) : la page d'accueil vit dans un onglet épinglé tout
|
||||
* à gauche de la barre. Recréé (et remonté en position 0) à chaque clic sur
|
||||
* le titre. */
|
||||
async openHome() {
|
||||
// En split, l'onglet appartient au panneau actif
|
||||
if (window.getActiveTabManager && window.PaneManager && window.PaneManager.isSplit()) {
|
||||
return window.getActiveTabManager().openHome(t("common.home"));
|
||||
}
|
||||
const tabId = "home";
|
||||
const idx = this._tabs.findIndex(t => t.id === tabId);
|
||||
if (idx > 0) {
|
||||
const [tab] = this._tabs.splice(idx, 1);
|
||||
this._tabs.unshift(tab); // toujours en tête de barre
|
||||
} else if (idx === -1) {
|
||||
const name = t("common.home");
|
||||
this._tabs.unshift({ id: tabId, vault: null, path: "", name, icon: "home", home: true });
|
||||
this._tabCache[tabId] = { home: true, vault: null, path: "", title: name, data: null, rawSource: null, sourceView: false, scrollTop: 0, icon: "home" };
|
||||
}
|
||||
this._renderTabs();
|
||||
this.activate(tabId);
|
||||
},
|
||||
|
||||
/** Drop the active-tab marker — the dashboard/home page is showing.
|
||||
* Keeps the tabs open; clicking one re-activates (and re-renders) it. */
|
||||
* Keeps the tabs open; clicking one re-activates (and re-renders) it.
|
||||
* L'onglet Accueil, lui, reste l'onglet actif quand la page d'accueil
|
||||
* s'affiche (il EST la page d'accueil). */
|
||||
deactivate() {
|
||||
const active = this._activeTabId && this._tabCache[this._activeTabId];
|
||||
if (active && active.home) {
|
||||
this._renderTabs();
|
||||
return;
|
||||
}
|
||||
this._activeTabId = null;
|
||||
this._renderTabs();
|
||||
},
|
||||
@@ -2160,6 +2195,17 @@ export const TabManager = {
|
||||
const cache = this._tabCache[tabId];
|
||||
if (!cache) return;
|
||||
|
||||
// Onglet Accueil (#158) — la page d'accueil vit dans l'onglet
|
||||
if (cache.home) {
|
||||
state.currentVault = null;
|
||||
state.currentPath = null;
|
||||
showWelcome(); // conserve l'onglet Accueil actif (deactivate())
|
||||
if (history.pushState) {
|
||||
history.pushState(null, "", "#");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigation tab — render the directory view instead of fetching a file
|
||||
if (cache.nav) {
|
||||
state.currentVault = cache.vault;
|
||||
@@ -2556,32 +2602,4 @@ export const TabManager = {
|
||||
|
||||
|
||||
|
||||
// ---- Keyboard shortcuts for tabs ----
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
if (e.key === "w" || e.key === "W") {
|
||||
e.preventDefault();
|
||||
if (TabManager._activeTabId) {
|
||||
TabManager.close(TabManager._activeTabId);
|
||||
}
|
||||
} else if (e.key === "Tab" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
const tabs = TabManager._tabs;
|
||||
const currentIdx = tabs.findIndex(t => t.id === TabManager._activeTabId);
|
||||
if (currentIdx >= 0 && tabs.length > 1) {
|
||||
const nextIdx = (currentIdx + 1) % tabs.length;
|
||||
TabManager.activate(tabs[nextIdx].id);
|
||||
}
|
||||
} else if (e.key === "Tab" && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
const tabs = TabManager._tabs;
|
||||
const currentIdx = tabs.findIndex(t => t.id === TabManager._activeTabId);
|
||||
if (currentIdx >= 0 && tabs.length > 1) {
|
||||
const prevIdx = (currentIdx - 1 + tabs.length) % tabs.length;
|
||||
TabManager.activate(tabs[prevIdx].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Modify init to include TabManager ----
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
import { api } from './auth.js';
|
||||
import { el } from './viewer.js';
|
||||
import { getFileIcon, safeCreateIcons } from './utils.js';
|
||||
import { TabManager } from './ui.js';
|
||||
import { TabManager, ContextMenuManager } from './ui.js';
|
||||
import { t, getLocale } from './i18n.js';
|
||||
import { buildNavFacets, filterNavFiles, sortNavFiles, navDisplayName } from './navfacets.js';
|
||||
|
||||
@@ -394,11 +394,18 @@ function renderResults() {
|
||||
const list = el('div', { class: 'vault-home-recent-list' });
|
||||
state.dirs.forEach((d) => {
|
||||
const item = el('div', { class: 'vault-home-recent-item', 'data-path': d.path });
|
||||
// Même couleur d'icône que l'arbre de la sidebar (.tree-item .icon)
|
||||
item.innerHTML = `
|
||||
<i data-lucide="folder" style="width:14px;height:14px;opacity:0.6;flex-shrink:0"></i>
|
||||
<i data-lucide="folder" class="icon" style="width:16px;height:16px;flex-shrink:0"></i>
|
||||
<span class="vault-home-recent-title">${escapeHtml(d.name)}</span>
|
||||
<span class="vault-home-recent-time">(${d.children_count})</span>`;
|
||||
item.addEventListener('click', () => TabManager.openNav(state.currentVault, d.path));
|
||||
// Menu contextuel identique à celui de la sidebar (#158)
|
||||
item.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // sinon le handler global de ContextMenuManager referme le menu
|
||||
ContextMenuManager.show(e.clientX, e.clientY, state.currentVault, d.path, 'directory', false);
|
||||
});
|
||||
list.appendChild(item);
|
||||
});
|
||||
section.appendChild(list);
|
||||
@@ -474,6 +481,12 @@ function buildFileItem(f, locale) {
|
||||
e.preventDefault();
|
||||
TabManager.openPersistent(f.vault, f.path);
|
||||
});
|
||||
// Menu contextuel identique à celui de la sidebar (#158)
|
||||
item.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
ContextMenuManager.show(e.clientX, e.clientY, f.vault, f.path, 'file', false);
|
||||
});
|
||||
return item;
|
||||
}
|
||||
|
||||
|
||||
@@ -344,6 +344,7 @@
|
||||
"common.previous": "Previous",
|
||||
"common.refresh": "Refresh",
|
||||
"common.rename": "Rename",
|
||||
"common.home": "Home",
|
||||
"common.root": "(root)",
|
||||
"common.save": "Save",
|
||||
"common.search": "Search",
|
||||
|
||||
@@ -344,6 +344,7 @@
|
||||
"common.previous": "Précédent",
|
||||
"common.refresh": "Rafraîchir",
|
||||
"common.rename": "Renommer",
|
||||
"common.home": "Accueil",
|
||||
"common.root": "(racine)",
|
||||
"common.save": "Enregistrer",
|
||||
"common.search": "Rechercher",
|
||||
|
||||
@@ -5905,6 +5905,11 @@ body.resizing-v {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Icône des répertoires : même couleur que l'arbre de la sidebar (.tree-item .icon) */
|
||||
.vault-home-dirs .icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.vault-home-item:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user