1098 lines
41 KiB
JavaScript
1098 lines
41 KiB
JavaScript
import { state } from './state.js';
|
||
import { safeCreateIcons, getFileIcon, flushIcons } from './utils.js';
|
||
import { api } from './auth.js';
|
||
import { populateCustomDropdown, TabManager, closeMobileSidebar, ContextMenuManager } from './ui.js';
|
||
import { _populateRecentVaultFilter, switchSidebarTab } from './config.js';
|
||
import { el, icon, getVaultIcon, smallBadge, attachTreeItemActionButton, attachTreeItemLongPress, showWelcome, appendHighlightedText } from './viewer.js';
|
||
import { performAdvancedSearch } from './search.js';
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Vault context switching
|
||
// ---------------------------------------------------------------------------
|
||
function initVaultContext() {
|
||
const filter = document.getElementById("vault-filter");
|
||
const quickSelect = document.getElementById("vault-quick-select");
|
||
if (!filter || !quickSelect) return;
|
||
|
||
filter.addEventListener("change", async () => {
|
||
await setSelectedVaultContext(filter.value, { focusVault: filter.value !== "all" });
|
||
});
|
||
|
||
quickSelect.addEventListener("change", async () => {
|
||
await setSelectedVaultContext(quickSelect.value, { focusVault: quickSelect.value !== "all" });
|
||
});
|
||
}
|
||
|
||
async function setSelectedVaultContext(vaultName, options) {
|
||
state.selectedContextVault = vaultName;
|
||
state.showingSource = false;
|
||
state.cachedRawSource = null;
|
||
syncVaultSelectors();
|
||
await refreshSidebarForContext();
|
||
await refreshTagsForContext();
|
||
|
||
// Synchroniser le dashboard et les fichiers récents
|
||
if (typeof DashboardRecentWidget !== "undefined" && DashboardRecentWidget.load) {
|
||
DashboardRecentWidget.load(vaultName);
|
||
}
|
||
if (typeof DashboardBookmarkWidget !== "undefined" && DashboardBookmarkWidget.load) {
|
||
DashboardBookmarkWidget.load(vaultName);
|
||
}
|
||
if (state.activeSidebarTab === "recent") {
|
||
loadRecentFiles(vaultName === "all" ? null : vaultName);
|
||
}
|
||
|
||
showWelcome();
|
||
if (options && options.focusVault && vaultName !== "all") {
|
||
await focusVaultInSidebar(vaultName);
|
||
}
|
||
}
|
||
|
||
function syncVaultSelectors() {
|
||
const filter = document.getElementById("vault-filter");
|
||
const quickSelect = document.getElementById("vault-quick-select");
|
||
const recentFilter = document.getElementById("recent-vault-filter");
|
||
const dashboardFilter = document.getElementById("dashboard-vault-filter");
|
||
const contextText = document.getElementById("vault-context-text");
|
||
|
||
if (filter) filter.value = state.selectedContextVault;
|
||
if (quickSelect) quickSelect.value = state.selectedContextVault;
|
||
if (recentFilter) recentFilter.value = state.selectedContextVault === "all" ? "" : state.selectedContextVault;
|
||
if (dashboardFilter) dashboardFilter.value = state.selectedContextVault;
|
||
|
||
// Mise à jour visuelle des dropdowns personnalisés
|
||
updateCustomDropdownVisual("vault-filter-dropdown", state.selectedContextVault);
|
||
updateCustomDropdownVisual("vault-quick-select-dropdown", state.selectedContextVault);
|
||
|
||
// Update vault context indicator
|
||
if (contextText) {
|
||
contextText.textContent = state.selectedContextVault === "all" ? "All" : state.selectedContextVault;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Updates the visual state of a custom dropdown based on its current value.
|
||
*/
|
||
function updateCustomDropdownVisual(dropdownId, value) {
|
||
const dropdown = document.getElementById(dropdownId);
|
||
if (!dropdown) return;
|
||
|
||
const selectedText = dropdown.querySelector(".custom-dropdown-selected");
|
||
const options = dropdown.querySelectorAll(".custom-dropdown-option");
|
||
|
||
options.forEach((opt) => {
|
||
const optValue = opt.getAttribute("data-value");
|
||
if (optValue === value) {
|
||
opt.classList.add("selected");
|
||
if (selectedText) selectedText.textContent = opt.textContent;
|
||
} else {
|
||
opt.classList.remove("selected");
|
||
}
|
||
});
|
||
}
|
||
|
||
function scrollTreeItemIntoView(element, alignToTop) {
|
||
if (!element) return;
|
||
const scrollContainer = document.getElementById("sidebar-panel-vaults");
|
||
if (!scrollContainer) return;
|
||
|
||
const containerRect = scrollContainer.getBoundingClientRect();
|
||
const elementRect = element.getBoundingClientRect();
|
||
const isAbove = elementRect.top < containerRect.top;
|
||
const isBelow = elementRect.bottom > containerRect.bottom;
|
||
|
||
if (!isAbove && !isBelow && !alignToTop) return;
|
||
|
||
const currentTop = scrollContainer.scrollTop;
|
||
const offsetTop = element.offsetTop;
|
||
const shouldCenter = alignToTop === "center";
|
||
const centeredTop = Math.max(0, currentTop + (elementRect.top - containerRect.top) - (containerRect.height / 2) + (elementRect.height / 2));
|
||
const targetTop = shouldCenter
|
||
? centeredTop
|
||
: alignToTop
|
||
? Math.max(0, offsetTop - 60)
|
||
: Math.max(0, currentTop + (elementRect.top - containerRect.top) - containerRect.height * 0.35);
|
||
|
||
scrollContainer.scrollTo({
|
||
top: targetTop,
|
||
behavior: "smooth",
|
||
});
|
||
}
|
||
|
||
async function refreshSidebarForContext() {
|
||
const container = document.getElementById("vault-tree");
|
||
container.innerHTML = "";
|
||
|
||
const vaultsToShow = state.selectedContextVault === "all" ? state.allVaults : state.allVaults.filter((v) => v.name === state.selectedContextVault);
|
||
|
||
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("contextmenu", (e) => {
|
||
e.preventDefault();
|
||
const isReadonly = false;
|
||
ContextMenuManager.show(e.clientX, e.clientY, v.name, '', 'vault', isReadonly);
|
||
});
|
||
attachTreeItemActionButton(vaultItem, v.name, "", "vault", false);
|
||
attachTreeItemLongPress(vaultItem, () => ({ vault: v.name, path: "", type: "vault", isReadonly: false }));
|
||
|
||
container.appendChild(vaultItem);
|
||
|
||
const childContainer = el("div", { class: "tree-children collapsed", id: `vault-children-${v.name}` });
|
||
container.appendChild(childContainer);
|
||
});
|
||
|
||
safeCreateIcons();
|
||
}
|
||
|
||
async function focusVaultInSidebar(vaultName) {
|
||
switchSidebarTab("vaults");
|
||
const vaultItem = document.querySelector(`.vault-item[data-vault="${CSS.escape(vaultName)}"]`);
|
||
if (!vaultItem) return;
|
||
document.querySelectorAll(".vault-item.focused").forEach((el) => el.classList.remove("focused"));
|
||
vaultItem.classList.add("focused");
|
||
const childContainer = document.getElementById(`vault-children-${vaultName}`);
|
||
if (childContainer && childContainer.classList.contains("collapsed")) {
|
||
await toggleVault(vaultItem, vaultName, true);
|
||
}
|
||
scrollTreeItemIntoView(vaultItem, false);
|
||
}
|
||
|
||
async function refreshTagsForContext() {
|
||
const vaultParam = state.selectedContextVault === "all" ? "" : `?vault=${encodeURIComponent(state.selectedContextVault)}`;
|
||
const data = await api(`/api/tags${vaultParam}`);
|
||
const filteredTags = TagFilterService.filterTags(data.tags);
|
||
renderTagCloud(filteredTags);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Helper: Check if path should be displayed based on hideHiddenFiles setting
|
||
// ---------------------------------------------------------------------------
|
||
function shouldDisplayPath(path, vaultName) {
|
||
// Get hideHiddenFiles setting for this vault (default: false = show all)
|
||
const settings = state.vaultSettings[vaultName] || { hideHiddenFiles: false };
|
||
|
||
if (!settings.hideHiddenFiles) {
|
||
// Show all files
|
||
return true;
|
||
}
|
||
|
||
// Check if any segment of the path starts with a dot (hidden)
|
||
const segments = path.split("/").filter(Boolean);
|
||
for (const segment of segments) {
|
||
if (segment.startsWith(".")) {
|
||
return false; // Hide this path
|
||
}
|
||
}
|
||
|
||
return true; // Show this path
|
||
}
|
||
|
||
async function loadVaultSettings() {
|
||
try {
|
||
const settings = await api("/api/vaults/settings/all");
|
||
state.vaultSettings = settings;
|
||
} catch (err) {
|
||
console.error("Failed to load vault settings:", err);
|
||
state.vaultSettings = {};
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Sidebar — Vault tree
|
||
// ---------------------------------------------------------------------------
|
||
async function loadVaults() {
|
||
const vaults = await api("/api/vaults");
|
||
state.allVaults = vaults;
|
||
const container = document.getElementById("vault-tree");
|
||
container.innerHTML = "";
|
||
|
||
// Prepare dropdown options
|
||
const dropdownOptions = [{ value: "all", text: "Tous les vaults" }, ...vaults.map((v) => ({ value: v.name, text: v.name }))];
|
||
|
||
// Populate custom dropdowns
|
||
populateCustomDropdown("vault-filter-dropdown", dropdownOptions, "all");
|
||
populateCustomDropdown("vault-quick-select-dropdown", dropdownOptions, "all");
|
||
|
||
// Populate standard selects
|
||
_populateRecentVaultFilter();
|
||
if (typeof DashboardRecentWidget !== "undefined" && DashboardRecentWidget.populateVaultFilter) {
|
||
DashboardRecentWidget.populateVaultFilter();
|
||
}
|
||
|
||
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("contextmenu", (e) => {
|
||
e.preventDefault();
|
||
const isReadonly = false;
|
||
ContextMenuManager.show(e.clientX, e.clientY, v.name, '', 'vault', isReadonly);
|
||
});
|
||
attachTreeItemActionButton(vaultItem, v.name, "", "vault", false);
|
||
attachTreeItemLongPress(vaultItem, () => ({ vault: v.name, path: "", type: "vault", isReadonly: false }));
|
||
|
||
container.appendChild(vaultItem);
|
||
|
||
const childContainer = el("div", { class: "tree-children collapsed", id: `vault-children-${v.name}` });
|
||
container.appendChild(childContainer);
|
||
});
|
||
|
||
syncVaultSelectors();
|
||
safeCreateIcons();
|
||
}
|
||
|
||
/**
|
||
* Refreshes the sidebar tree while preserving the expanded state of vaults and folders.
|
||
* Optimized to avoid a full sidebar wipe and minimize visible loading states.
|
||
*/
|
||
/**
|
||
* Incrementally update a directory container without wiping existing DOM.
|
||
* Only adds new items, removes deleted ones, and updates changed ones.
|
||
*/
|
||
async function incrementalLoadDirectory(vaultName, dirPath, container) {
|
||
let data;
|
||
try {
|
||
const url = `/api/browse/${encodeURIComponent(vaultName)}?path=${encodeURIComponent(dirPath)}`;
|
||
data = await api(url);
|
||
} catch (err) {
|
||
// Server unavailable — keep existing content
|
||
return;
|
||
}
|
||
|
||
// Build a map of existing DOM elements by path
|
||
const existingItems = {};
|
||
const existingChildren = {}; // path -> child container (for directories)
|
||
for (let i = 0; i < container.children.length; i++) {
|
||
const child = container.children[i];
|
||
if (child.classList.contains("tree-item") && child.dataset.path) {
|
||
existingItems[child.dataset.path] = child;
|
||
// The next sibling should be the tree-children container for this directory
|
||
if (i + 1 < container.children.length) {
|
||
const next = container.children[i + 1];
|
||
if (next.classList.contains("tree-children")) {
|
||
existingChildren[child.dataset.path] = next;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const fragment = document.createDocumentFragment();
|
||
|
||
data.items.forEach((item) => {
|
||
if (!shouldDisplayPath(item.path, vaultName)) return;
|
||
|
||
const existing = existingItems[item.path];
|
||
|
||
if (existing) {
|
||
// Item already exists — reuse it, but update text/badge if needed
|
||
const textEl = existing.querySelector(".tree-item-text");
|
||
const displayName = item.type === "file" && item.name.match(/\.md$/i)
|
||
? item.name.replace(/\.md$/i, "")
|
||
: item.name;
|
||
if (textEl && textEl.textContent !== displayName) {
|
||
textEl.textContent = displayName;
|
||
}
|
||
// Update badge for directories
|
||
if (item.type === "directory") {
|
||
const badge = existing.querySelector(".badge-small");
|
||
const newBadge = `(${item.children_count})`;
|
||
if (badge && badge.textContent !== newBadge) {
|
||
badge.textContent = newBadge;
|
||
} else if (!badge) {
|
||
existing.appendChild(smallBadge(item.children_count));
|
||
}
|
||
}
|
||
fragment.appendChild(existing);
|
||
// Also re-add the child container for directories
|
||
if (item.type === "directory" && existingChildren[item.path]) {
|
||
fragment.appendChild(existingChildren[item.path]);
|
||
} else if (item.type === "directory") {
|
||
// Directory existed but no child container — create one
|
||
const subContainer = el("div", { class: "tree-children collapsed", id: `dir-${vaultName}-${item.path}` });
|
||
fragment.appendChild(subContainer);
|
||
}
|
||
} else {
|
||
// New item — create it
|
||
if (item.type === "directory") {
|
||
const dirItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon("chevron-right", 14), icon("folder", 16), el("span", { class: "tree-item-text" }, [document.createTextNode(item.name)]), smallBadge(item.children_count)]);
|
||
attachTreeItemActionButton(dirItem, vaultName, item.path, "directory", false);
|
||
attachTreeItemLongPress(dirItem, () => ({ vault: vaultName, path: item.path, type: "directory", isReadonly: false }));
|
||
fragment.appendChild(dirItem);
|
||
|
||
const subContainer = el("div", { class: "tree-children collapsed", id: `dir-${vaultName}-${item.path}` });
|
||
fragment.appendChild(subContainer);
|
||
|
||
dirItem.addEventListener("click", async () => {
|
||
scrollTreeItemIntoView(dirItem, false);
|
||
if (subContainer.classList.contains("collapsed")) {
|
||
if (subContainer.children.length === 0) {
|
||
await loadDirectory(vaultName, item.path, subContainer);
|
||
}
|
||
subContainer.classList.remove("collapsed");
|
||
const chev = dirItem.querySelector("[data-lucide]");
|
||
if (chev) chev.setAttribute("data-lucide", "chevron-down");
|
||
safeCreateIcons();
|
||
} else {
|
||
subContainer.classList.add("collapsed");
|
||
const chev = dirItem.querySelector("[data-lucide]");
|
||
if (chev) chev.setAttribute("data-lucide", "chevron-right");
|
||
safeCreateIcons();
|
||
}
|
||
});
|
||
|
||
dirItem.addEventListener("contextmenu", (e) => {
|
||
e.preventDefault();
|
||
ContextMenuManager.show(e.clientX, e.clientY, vaultName, item.path, "directory", false);
|
||
});
|
||
} else {
|
||
const fileIconName = getFileIcon(item.name);
|
||
const displayName = item.name.match(/\.md$/i) ? item.name.replace(/\.md$/i, "") : item.name;
|
||
const fileItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon(fileIconName, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(displayName)])]);
|
||
attachTreeItemActionButton(fileItem, vaultName, item.path, "file", false);
|
||
attachTreeItemLongPress(fileItem, () => ({ vault: vaultName, path: item.path, type: "file", isReadonly: false }));
|
||
fileItem.addEventListener("click", () => {
|
||
scrollTreeItemIntoView(fileItem, false);
|
||
TabManager.openPreview(vaultName, item.path);
|
||
closeMobileSidebar();
|
||
});
|
||
|
||
fileItem.addEventListener("dblclick", (e) => {
|
||
e.preventDefault();
|
||
TabManager.openPersistent(vaultName, item.path);
|
||
});
|
||
|
||
fileItem.addEventListener("contextmenu", (e) => {
|
||
e.preventDefault();
|
||
ContextMenuManager.show(e.clientX, e.clientY, vaultName, item.path, "file", false);
|
||
});
|
||
|
||
fragment.appendChild(fileItem);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Replace container content in a single batch operation to avoid flash
|
||
container.textContent = "";
|
||
container.appendChild(fragment);
|
||
}
|
||
|
||
export async function refreshSidebarTreePreservingState() {
|
||
// 1. Capture expanded states
|
||
const expandedVaults = Array.from(document.querySelectorAll(".vault-item"))
|
||
.filter((v) => {
|
||
const children = document.getElementById(`vault-children-${v.dataset.vault}`);
|
||
return children && !children.classList.contains("collapsed");
|
||
})
|
||
.map((v) => v.dataset.vault);
|
||
|
||
const expandedDirs = Array.from(document.querySelectorAll(".tree-item[data-path]"))
|
||
.filter((item) => {
|
||
const vault = item.dataset.vault;
|
||
const path = item.dataset.path;
|
||
const children = document.getElementById(`dir-${vault}-${path}`);
|
||
return children && !children.classList.contains("collapsed");
|
||
})
|
||
.map((item) => ({ vault: item.dataset.vault, path: item.dataset.path }));
|
||
|
||
const selectedItem = document.querySelector(".tree-item.path-selected");
|
||
const selectedState = selectedItem ? { vault: selectedItem.dataset.vault, path: selectedItem.dataset.path } : null;
|
||
|
||
// 2. Soft update: vault names/counts without wiping the tree
|
||
try {
|
||
const vaults = await api("/api/vaults");
|
||
state.allVaults = vaults;
|
||
vaults.forEach((v) => {
|
||
const vItem = document.querySelector(`.vault-item[data-vault="${CSS.escape(v.name)}"]`);
|
||
if (vItem) {
|
||
const badge = vItem.querySelector(".badge-small");
|
||
if (badge) badge.textContent = `(${v.file_count})`;
|
||
}
|
||
});
|
||
} catch (e) {
|
||
console.warn("Soft vault refresh failed, falling back to full reload", e);
|
||
await loadVaults();
|
||
return;
|
||
}
|
||
|
||
// 3. Incrementally update expanded vaults (no DOM wipe)
|
||
for (const vName of expandedVaults) {
|
||
const container = document.getElementById(`vault-children-${vName}`);
|
||
if (container) {
|
||
await incrementalLoadDirectory(vName, "", container);
|
||
}
|
||
}
|
||
|
||
// 4. Incrementally update expanded directories (parents first, no DOM wipe)
|
||
expandedDirs.sort((a, b) => a.path.split("/").length - b.path.split("/").length);
|
||
for (const dir of expandedDirs) {
|
||
const container = document.getElementById(`dir-${dir.vault}-${dir.path}`);
|
||
if (container) {
|
||
try {
|
||
await incrementalLoadDirectory(dir.vault, dir.path, container);
|
||
container.classList.remove("collapsed");
|
||
const dItem = document.querySelector(`.tree-item[data-vault="${CSS.escape(dir.vault)}"][data-path="${CSS.escape(dir.path)}"]`);
|
||
if (dItem) {
|
||
const chev = dItem.querySelector("[data-lucide]");
|
||
if (chev) chev.setAttribute("data-lucide", "chevron-down");
|
||
}
|
||
} catch (e) {
|
||
console.error(`Failed to refresh directory ${dir.vault}/${dir.path}`, e);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 5. Restore selection
|
||
if (selectedState) {
|
||
await focusPathInSidebar(selectedState.vault, selectedState.path, { alignToTop: false });
|
||
}
|
||
|
||
safeCreateIcons();
|
||
}
|
||
|
||
async function toggleVault(itemEl, vaultName, forceExpand) {
|
||
const childContainer = document.getElementById(`vault-children-${vaultName}`);
|
||
if (!childContainer) return;
|
||
|
||
scrollTreeItemIntoView(itemEl, false);
|
||
|
||
const shouldExpand = forceExpand || childContainer.classList.contains("collapsed");
|
||
|
||
if (shouldExpand) {
|
||
// Expand — load children if empty
|
||
if (childContainer.children.length === 0) {
|
||
await loadDirectory(vaultName, "", childContainer);
|
||
}
|
||
childContainer.classList.remove("collapsed");
|
||
// Swap chevron
|
||
const chevron = itemEl.querySelector("[data-lucide]");
|
||
if (chevron) chevron.setAttribute("data-lucide", "chevron-down");
|
||
safeCreateIcons();
|
||
} else {
|
||
childContainer.classList.add("collapsed");
|
||
const chevron = itemEl.querySelector("[data-lucide]");
|
||
if (chevron) chevron.setAttribute("data-lucide", "chevron-right");
|
||
safeCreateIcons();
|
||
}
|
||
}
|
||
|
||
async function expandDirectoryInSidebar(vaultName, dirPath, dirItem) {
|
||
const subContainer = document.getElementById(`dir-${vaultName}-${dirPath}`);
|
||
if (!subContainer) return null;
|
||
|
||
if (subContainer.children.length === 0) {
|
||
await loadDirectory(vaultName, dirPath, subContainer);
|
||
}
|
||
|
||
subContainer.classList.remove("collapsed");
|
||
if (dirItem) {
|
||
const chevron = dirItem.querySelector("[data-lucide]");
|
||
if (chevron) chevron.setAttribute("data-lucide", "chevron-down");
|
||
}
|
||
safeCreateIcons();
|
||
return subContainer;
|
||
}
|
||
|
||
async function focusPathInSidebar(vaultName, targetPath, options) {
|
||
switchSidebarTab("vaults");
|
||
|
||
const vaultItem = document.querySelector(`.vault-item[data-vault="${CSS.escape(vaultName)}"]`);
|
||
if (!vaultItem) return;
|
||
|
||
document.querySelectorAll(".vault-item.focused").forEach((el) => el.classList.remove("focused"));
|
||
vaultItem.classList.add("focused");
|
||
|
||
const vaultContainer = document.getElementById(`vault-children-${vaultName}`);
|
||
if (!vaultContainer) return;
|
||
|
||
if (vaultContainer.classList.contains("collapsed")) {
|
||
await toggleVault(vaultItem, vaultName, true);
|
||
}
|
||
|
||
if (!targetPath) {
|
||
// Clear any previous path selection
|
||
document.querySelectorAll(".tree-item.path-selected").forEach((el) => el.classList.remove("path-selected"));
|
||
scrollTreeItemIntoView(vaultItem, options && options.alignToTop);
|
||
return;
|
||
}
|
||
|
||
const segments = targetPath.split("/").filter(Boolean);
|
||
let currentContainer = vaultContainer;
|
||
let cumulativePath = "";
|
||
let lastTargetItem = null;
|
||
|
||
for (let index = 0; index < segments.length; index++) {
|
||
cumulativePath += (cumulativePath ? "/" : "") + segments[index];
|
||
|
||
let targetItem = null;
|
||
try {
|
||
targetItem = currentContainer.querySelector(`.tree-item[data-vault="${CSS.escape(vaultName)}"][data-path="${CSS.escape(cumulativePath)}"]`);
|
||
} catch (e) {
|
||
targetItem = null;
|
||
}
|
||
|
||
if (!targetItem) {
|
||
return;
|
||
}
|
||
|
||
lastTargetItem = targetItem;
|
||
|
||
const isLastSegment = index === segments.length - 1;
|
||
if (!isLastSegment) {
|
||
const nextContainer = await expandDirectoryInSidebar(vaultName, cumulativePath, targetItem);
|
||
if (nextContainer) {
|
||
currentContainer = nextContainer;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (lastTargetItem && options && options.expandTarget) {
|
||
await expandDirectoryInSidebar(vaultName, targetPath, lastTargetItem);
|
||
}
|
||
|
||
// Clear previous path selections and highlight the final target
|
||
document.querySelectorAll(".tree-item.path-selected").forEach((el) => el.classList.remove("path-selected"));
|
||
if (lastTargetItem) {
|
||
lastTargetItem.classList.add("path-selected");
|
||
}
|
||
|
||
scrollTreeItemIntoView(lastTargetItem, options && options.alignToTop);
|
||
}
|
||
|
||
function getParentDirectoryPath(filePath) {
|
||
if (!filePath) return "";
|
||
const segments = filePath.split("/").filter(Boolean);
|
||
if (segments.length <= 1) return "";
|
||
segments.pop();
|
||
return segments.join("/");
|
||
}
|
||
|
||
function syncActiveFileTreeItem(vaultName, filePath) {
|
||
document.querySelectorAll(".tree-item.active").forEach((el) => el.classList.remove("active"));
|
||
if (!vaultName || !filePath) return;
|
||
const selector = `.tree-item[data-vault="${CSS.escape(vaultName)}"][data-path="${CSS.escape(filePath)}"]`;
|
||
try {
|
||
const active = document.querySelector(selector);
|
||
if (active) active.classList.add("active");
|
||
} catch (e) {
|
||
/* selector might fail on special chars */
|
||
}
|
||
}
|
||
|
||
async function loadDirectory(vaultName, dirPath, container) {
|
||
// Only show the loading spinner if the container is currently empty
|
||
const isEmpty = container.children.length === 0;
|
||
if (isEmpty) {
|
||
container.innerHTML = '<div class="tree-loading"><div class="loading-spinner" style="width:16px;height:16px;border-width:2px"></div></div>';
|
||
}
|
||
|
||
var data;
|
||
try {
|
||
const url = `/api/browse/${encodeURIComponent(vaultName)}?path=${encodeURIComponent(dirPath)}`;
|
||
data = await api(url);
|
||
} catch (err) {
|
||
container.innerHTML = '<div class="tree-loading" style="color:var(--text-muted);font-size:0.75rem;padding:4px 16px">Erreur de chargement</div>';
|
||
return;
|
||
}
|
||
container.innerHTML = "";
|
||
|
||
const fragment = document.createDocumentFragment();
|
||
|
||
data.items.forEach((item) => {
|
||
// Apply client-side filtering for hidden files
|
||
if (!shouldDisplayPath(item.path, vaultName)) {
|
||
return; // Skip this item
|
||
}
|
||
|
||
if (item.type === "directory") {
|
||
const dirItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon("chevron-right", 14), icon("folder", 16), el("span", { class: "tree-item-text" }, [document.createTextNode(item.name)]), smallBadge(item.children_count)]);
|
||
attachTreeItemActionButton(dirItem, vaultName, item.path, "directory", false);
|
||
attachTreeItemLongPress(dirItem, () => ({ vault: vaultName, path: item.path, type: "directory", isReadonly: false }));
|
||
fragment.appendChild(dirItem);
|
||
|
||
const subContainer = el("div", { class: "tree-children collapsed", id: `dir-${vaultName}-${item.path}` });
|
||
fragment.appendChild(subContainer);
|
||
|
||
dirItem.addEventListener("click", async () => {
|
||
scrollTreeItemIntoView(dirItem, false);
|
||
if (subContainer.classList.contains("collapsed")) {
|
||
if (subContainer.children.length === 0) {
|
||
await loadDirectory(vaultName, item.path, subContainer);
|
||
}
|
||
subContainer.classList.remove("collapsed");
|
||
const chev = dirItem.querySelector("[data-lucide]");
|
||
if (chev) chev.setAttribute("data-lucide", "chevron-down");
|
||
safeCreateIcons();
|
||
} else {
|
||
subContainer.classList.add("collapsed");
|
||
const chev = dirItem.querySelector("[data-lucide]");
|
||
if (chev) chev.setAttribute("data-lucide", "chevron-right");
|
||
safeCreateIcons();
|
||
}
|
||
});
|
||
|
||
dirItem.addEventListener("contextmenu", (e) => {
|
||
e.preventDefault();
|
||
const isReadonly = false;
|
||
ContextMenuManager.show(e.clientX, e.clientY, vaultName, item.path, 'directory', isReadonly);
|
||
});
|
||
} else {
|
||
const fileIconName = getFileIcon(item.name);
|
||
const displayName = item.name.match(/\.md$/i) ? item.name.replace(/\.md$/i, "") : item.name;
|
||
const fileItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon(fileIconName, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(displayName)])]);
|
||
attachTreeItemActionButton(fileItem, vaultName, item.path, "file", false);
|
||
attachTreeItemLongPress(fileItem, () => ({ vault: vaultName, path: item.path, type: "file", isReadonly: false }));
|
||
fileItem.addEventListener("click", () => {
|
||
scrollTreeItemIntoView(fileItem, false);
|
||
TabManager.openPreview(vaultName, item.path);
|
||
closeMobileSidebar();
|
||
});
|
||
|
||
fileItem.addEventListener("dblclick", (e) => {
|
||
e.preventDefault();
|
||
TabManager.openPersistent(vaultName, item.path);
|
||
});
|
||
|
||
fileItem.addEventListener("contextmenu", (e) => {
|
||
e.preventDefault();
|
||
const isReadonly = false;
|
||
ContextMenuManager.show(e.clientX, e.clientY, vaultName, item.path, 'file', isReadonly);
|
||
});
|
||
|
||
fragment.appendChild(fileItem);
|
||
}
|
||
});
|
||
|
||
container.appendChild(fragment);
|
||
safeCreateIcons();
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Sidebar filter
|
||
// ---------------------------------------------------------------------------
|
||
function initSidebarFilter() {
|
||
const input = document.getElementById("sidebar-filter-input");
|
||
const caseBtn = document.getElementById("sidebar-filter-case-btn");
|
||
const clearBtn = document.getElementById("sidebar-filter-clear-btn");
|
||
|
||
input.addEventListener("input", () => {
|
||
const hasText = input.value.length > 0;
|
||
clearBtn.style.display = hasText ? "flex" : "none";
|
||
clearTimeout(state.filterDebounce);
|
||
state.filterDebounce = setTimeout(async () => {
|
||
const q = state.sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
|
||
if (hasText) {
|
||
if (state.activeSidebarTab === "vaults") {
|
||
await performTreeSearch(q);
|
||
} else {
|
||
filterTagCloud(q);
|
||
}
|
||
} else {
|
||
if (state.activeSidebarTab === "vaults") {
|
||
await restoreSidebarTree();
|
||
} else {
|
||
filterTagCloud("");
|
||
}
|
||
}
|
||
}, 220);
|
||
});
|
||
|
||
caseBtn.addEventListener("click", async () => {
|
||
state.sidebarFilterCaseSensitive = !state.sidebarFilterCaseSensitive;
|
||
caseBtn.classList.toggle("active");
|
||
const q = state.sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
|
||
if (input.value.trim()) {
|
||
if (state.activeSidebarTab === "vaults") {
|
||
await performTreeSearch(q);
|
||
} else {
|
||
filterTagCloud(q);
|
||
}
|
||
}
|
||
});
|
||
|
||
clearBtn.addEventListener("click", async () => {
|
||
input.value = "";
|
||
clearBtn.style.display = "none";
|
||
state.sidebarFilterCaseSensitive = false;
|
||
caseBtn.classList.remove("active");
|
||
clearTimeout(state.filterDebounce);
|
||
if (state.activeSidebarTab === "vaults") {
|
||
await restoreSidebarTree();
|
||
} else {
|
||
filterTagCloud("");
|
||
}
|
||
});
|
||
|
||
clearBtn.style.display = "none";
|
||
}
|
||
|
||
async function performTreeSearch(query) {
|
||
if (!query) {
|
||
await restoreSidebarTree();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const vaultParam = state.selectedContextVault === "all" ? "all" : state.selectedContextVault;
|
||
const url = `/api/tree-search?q=${encodeURIComponent(query)}&vault=${encodeURIComponent(vaultParam)}`;
|
||
const data = await api(url);
|
||
renderFilteredSidebarResults(query, data.results);
|
||
} catch (err) {
|
||
console.error("Tree search error:", err);
|
||
renderFilteredSidebarResults(query, []);
|
||
}
|
||
}
|
||
|
||
async function restoreSidebarTree() {
|
||
await refreshSidebarForContext();
|
||
if (state.currentVault) {
|
||
focusPathInSidebar(state.currentVault, state.currentPath || "", { alignToTop: false }).catch(() => {});
|
||
}
|
||
}
|
||
|
||
function renderFilteredSidebarResults(query, results) {
|
||
const container = document.getElementById("vault-tree");
|
||
container.innerHTML = "";
|
||
|
||
const grouped = new Map();
|
||
results.forEach((result) => {
|
||
if (!grouped.has(result.vault)) {
|
||
grouped.set(result.vault, []);
|
||
}
|
||
grouped.get(result.vault).push(result);
|
||
});
|
||
|
||
if (grouped.size === 0) {
|
||
container.appendChild(el("div", { class: "sidebar-filter-empty" }, [document.createTextNode("Aucun répertoire ou fichier correspondant.")]));
|
||
return;
|
||
}
|
||
|
||
grouped.forEach((entries, vaultName) => {
|
||
entries.sort((a, b) => a.path.localeCompare(b.path, undefined, { sensitivity: "base" }));
|
||
|
||
const vaultHeader = el("div", { class: "tree-item vault-item filter-results-header", "data-vault": vaultName }, [getVaultIcon(vaultName, 16), document.createTextNode(` ${vaultName} `), smallBadge(entries.length)]);
|
||
container.appendChild(vaultHeader);
|
||
|
||
const resultsWrapper = el("div", { class: "filter-results-group" });
|
||
entries.forEach((entry) => {
|
||
const resultItem = el(
|
||
"div",
|
||
{
|
||
class: `tree-item filter-result-item filter-result-${entry.type}`,
|
||
"data-vault": entry.vault,
|
||
"data-path": entry.path,
|
||
"data-type": entry.type,
|
||
},
|
||
[icon(entry.type === "directory" ? "folder" : getFileIcon(entry.name), 16)],
|
||
);
|
||
|
||
const textWrap = el("div", { class: "filter-result-text" });
|
||
const primary = el("div", { class: "filter-result-primary" });
|
||
appendHighlightedText(primary, entry.name, query, state.sidebarFilterCaseSensitive);
|
||
const secondary = el("div", { class: "filter-result-secondary" });
|
||
appendHighlightedText(secondary, entry.path, query, state.sidebarFilterCaseSensitive);
|
||
textWrap.appendChild(primary);
|
||
textWrap.appendChild(secondary);
|
||
resultItem.appendChild(textWrap);
|
||
|
||
resultItem.addEventListener("click", async () => {
|
||
const input = document.getElementById("sidebar-filter-input");
|
||
const clearBtn = document.getElementById("sidebar-filter-clear-btn");
|
||
if (input) input.value = "";
|
||
if (clearBtn) clearBtn.style.display = "none";
|
||
await restoreSidebarTree();
|
||
if (entry.type === "directory") {
|
||
await focusPathInSidebar(entry.vault, entry.path, { alignToTop: true, expandTarget: true });
|
||
} else {
|
||
await TabManager.openPreview(entry.vault, entry.path);
|
||
await focusPathInSidebar(entry.vault, getParentDirectoryPath(entry.path), { alignToTop: true, expandTarget: true });
|
||
syncActiveFileTreeItem(entry.vault, entry.path);
|
||
}
|
||
closeMobileSidebar();
|
||
});
|
||
|
||
resultsWrapper.appendChild(resultItem);
|
||
});
|
||
|
||
container.appendChild(resultsWrapper);
|
||
});
|
||
|
||
flushIcons();
|
||
}
|
||
|
||
function filterSidebarTree(query) {
|
||
const tree = document.getElementById("vault-tree");
|
||
const items = tree.querySelectorAll(".tree-item");
|
||
const containers = tree.querySelectorAll(".tree-children");
|
||
|
||
if (!query) {
|
||
items.forEach((item) => item.classList.remove("filtered-out"));
|
||
containers.forEach((c) => {
|
||
c.classList.remove("filtered-out");
|
||
// Keep current collapsed state when clearing filter
|
||
});
|
||
return;
|
||
}
|
||
|
||
// First pass: mark all as filtered out
|
||
items.forEach((item) => item.classList.add("filtered-out"));
|
||
containers.forEach((c) => c.classList.add("filtered-out"));
|
||
|
||
// Second pass: find matching items and mark them + ancestors + descendants
|
||
const matchingItems = new Set();
|
||
|
||
items.forEach((item) => {
|
||
const text = state.sidebarFilterCaseSensitive ? item.textContent : item.textContent.toLowerCase();
|
||
const searchQuery = state.sidebarFilterCaseSensitive ? query : query.toLowerCase();
|
||
if (text.includes(searchQuery)) {
|
||
matchingItems.add(item);
|
||
item.classList.remove("filtered-out");
|
||
|
||
// Show all ancestor containers
|
||
let parent = item.parentElement;
|
||
while (parent && parent !== tree) {
|
||
parent.classList.remove("filtered-out");
|
||
if (parent.classList.contains("tree-children")) {
|
||
parent.classList.remove("collapsed");
|
||
}
|
||
parent = parent.parentElement;
|
||
}
|
||
|
||
// If this is a directory (has a children container after it), show all descendants
|
||
const nextEl = item.nextElementSibling;
|
||
if (nextEl && nextEl.classList.contains("tree-children")) {
|
||
nextEl.classList.remove("filtered-out");
|
||
nextEl.classList.remove("collapsed");
|
||
// Recursively show all children in this container
|
||
showAllDescendants(nextEl);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Third pass: show items that are descendants of matching directories
|
||
// and ensure their containers are visible
|
||
matchingItems.forEach((item) => {
|
||
const nextEl = item.nextElementSibling;
|
||
if (nextEl && nextEl.classList.contains("tree-children")) {
|
||
const children = nextEl.querySelectorAll(".tree-item");
|
||
children.forEach((child) => child.classList.remove("filtered-out"));
|
||
}
|
||
});
|
||
}
|
||
|
||
function showAllDescendants(container) {
|
||
const items = container.querySelectorAll(".tree-item");
|
||
items.forEach((item) => {
|
||
item.classList.remove("filtered-out");
|
||
// If this item has children, also show them
|
||
const nextEl = item.nextElementSibling;
|
||
if (nextEl && nextEl.classList.contains("tree-children")) {
|
||
nextEl.classList.remove("filtered-out");
|
||
nextEl.classList.remove("collapsed");
|
||
}
|
||
});
|
||
// Also ensure all nested containers are visible
|
||
const nestedContainers = container.querySelectorAll(".tree-children");
|
||
nestedContainers.forEach((c) => {
|
||
c.classList.remove("filtered-out");
|
||
c.classList.remove("collapsed");
|
||
});
|
||
}
|
||
|
||
function filterTagCloud(query) {
|
||
const tags = document.querySelectorAll("#tag-cloud .tag-item");
|
||
tags.forEach((tag) => {
|
||
const text = state.sidebarFilterCaseSensitive ? tag.textContent : tag.textContent.toLowerCase();
|
||
const searchQuery = state.sidebarFilterCaseSensitive ? query : query.toLowerCase();
|
||
if (!query || text.includes(searchQuery)) {
|
||
tag.classList.remove("filtered-out");
|
||
} else {
|
||
tag.classList.add("filtered-out");
|
||
}
|
||
});
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Tag Filter Service
|
||
// ---------------------------------------------------------------------------
|
||
const TagFilterService = {
|
||
defaultFilters: [
|
||
{ pattern: "#<% ... %>", regex: "#<%.*%>", enabled: true },
|
||
{ pattern: "#{{ ... }}", regex: "#\\{\\{.*\\}\\}", enabled: true },
|
||
{ pattern: "#{ ... }", regex: "#\\{.*\\}", enabled: true },
|
||
],
|
||
|
||
getConfig() {
|
||
const stored = localStorage.getItem("obsigate-tag-filters");
|
||
if (stored) {
|
||
try {
|
||
return JSON.parse(stored);
|
||
} catch (e) {
|
||
return { tagFilters: this.defaultFilters };
|
||
}
|
||
}
|
||
return { tagFilters: this.defaultFilters };
|
||
},
|
||
|
||
saveConfig(config) {
|
||
localStorage.setItem("obsigate-tag-filters", JSON.stringify(config));
|
||
},
|
||
|
||
patternToRegex(pattern) {
|
||
// 1. Escape ALL special regex characters
|
||
// We use a broader set including * and .
|
||
let regex = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||
|
||
// 2. Convert escaped '*' to '.*' (wildcard)
|
||
regex = regex.replace(/\\\*/g, ".*");
|
||
|
||
// 3. Convert escaped '...' (or any sequence of 2+ dots like ..) to '.*'
|
||
// We also handle optional whitespace around it to make it more user-friendly
|
||
regex = regex.replace(/\s*\\\.{2,}\s*/g, ".*");
|
||
|
||
return regex;
|
||
},
|
||
|
||
isTagFiltered(tag) {
|
||
const config = this.getConfig();
|
||
const filters = config.tagFilters || this.defaultFilters;
|
||
const tagWithHash = `#${tag}`;
|
||
|
||
for (const filter of filters) {
|
||
if (!filter.enabled) continue;
|
||
try {
|
||
// Robustly handle regex with or without ^/$
|
||
let patternStr = filter.regex;
|
||
if (!patternStr.startsWith("^")) patternStr = "^" + patternStr;
|
||
if (!patternStr.endsWith("$")) patternStr = patternStr + "$";
|
||
|
||
const regex = new RegExp(patternStr);
|
||
if (regex.test(tagWithHash)) {
|
||
return true;
|
||
}
|
||
} catch (e) {
|
||
console.warn("Invalid regex:", filter.regex, e);
|
||
}
|
||
}
|
||
return false;
|
||
},
|
||
|
||
filterTags(tags) {
|
||
const filtered = {};
|
||
Object.entries(tags).forEach(([tag, count]) => {
|
||
if (!this.isTagFiltered(tag)) {
|
||
filtered[tag] = count;
|
||
}
|
||
});
|
||
return filtered;
|
||
},
|
||
};
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Tags
|
||
// ---------------------------------------------------------------------------
|
||
async function loadTags() {
|
||
const data = await api("/api/tags");
|
||
const filteredTags = TagFilterService.filterTags(data.tags);
|
||
renderTagCloud(filteredTags);
|
||
}
|
||
|
||
function renderTagCloud(tags) {
|
||
const cloud = document.getElementById("tag-cloud");
|
||
cloud.innerHTML = "";
|
||
|
||
const counts = Object.values(tags);
|
||
if (counts.length === 0) return;
|
||
|
||
const maxCount = Math.max(...counts);
|
||
const minSize = 0.7;
|
||
const maxSize = 1.25;
|
||
|
||
Object.entries(tags).forEach(([tag, count]) => {
|
||
const ratio = maxCount > 1 ? (count - 1) / (maxCount - 1) : 0;
|
||
const size = minSize + ratio * (maxSize - minSize);
|
||
const tagEl = el("span", { class: "tag-item", style: `font-size:${size}rem` }, [document.createTextNode(`#${tag}`)]);
|
||
tagEl.addEventListener("click", () => searchByTag(tag));
|
||
cloud.appendChild(tagEl);
|
||
});
|
||
}
|
||
|
||
function addTagFilter(tag) {
|
||
if (!state.selectedTags.includes(tag)) {
|
||
state.selectedTags.push(tag);
|
||
performTagSearch();
|
||
}
|
||
}
|
||
|
||
function removeTagFilter(tag) {
|
||
state.selectedTags = state.selectedTags.filter((t) => t !== tag);
|
||
if (state.selectedTags.length > 0) {
|
||
performTagSearch();
|
||
} else {
|
||
const input = document.getElementById("search-input");
|
||
if (input.value.trim()) {
|
||
performAdvancedSearch(input.value.trim(), document.getElementById("vault-filter").value, null);
|
||
} else {
|
||
showWelcome();
|
||
}
|
||
}
|
||
}
|
||
|
||
function performTagSearch() {
|
||
const input = document.getElementById("search-input");
|
||
const query = input.value.trim();
|
||
const vault = document.getElementById("vault-filter").value;
|
||
performAdvancedSearch(query, vault, state.selectedTags.length > 0 ? state.selectedTags.join(",") : null);
|
||
}
|
||
|
||
function buildSearchResultsHeader(data, query, tagFilter) {
|
||
const header = el("div", { class: "search-results-header" });
|
||
const summaryText = el("span", { class: "search-results-summary-text" });
|
||
|
||
if (query && tagFilter) {
|
||
summaryText.textContent = `${data.count} résultat(s) pour "${query}" avec les tags`;
|
||
} else if (query) {
|
||
summaryText.textContent = `${data.count} résultat(s) pour "${query}"`;
|
||
} else if (tagFilter) {
|
||
summaryText.textContent = `${data.count} fichier(s) avec les tags`;
|
||
} else {
|
||
summaryText.textContent = `${data.count} résultat(s)`;
|
||
}
|
||
|
||
header.appendChild(summaryText);
|
||
|
||
if (state.selectedTags.length > 0) {
|
||
const activeTags = el("div", { class: "search-results-active-tags" });
|
||
state.selectedTags.forEach((tag) => {
|
||
const removeBtn = el(
|
||
"button",
|
||
{
|
||
class: "search-results-active-tag-remove",
|
||
title: `Retirer ${tag} du filtre`,
|
||
"aria-label": `Retirer ${tag} du filtre`,
|
||
},
|
||
[document.createTextNode("×")],
|
||
);
|
||
removeBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
removeTagFilter(tag);
|
||
});
|
||
|
||
const chip = el("span", { class: "search-results-active-tag" }, [document.createTextNode(`#${tag}`), removeBtn]);
|
||
activeTags.appendChild(chip);
|
||
});
|
||
header.appendChild(activeTags);
|
||
}
|
||
|
||
return header;
|
||
}
|
||
|
||
function searchByTag(tag) {
|
||
addTagFilter(tag);
|
||
}
|
||
|
||
|
||
export { initVaultContext, setSelectedVaultContext, syncVaultSelectors, shouldDisplayPath, loadVaults, initSidebarFilter, TagFilterService, loadTags, scrollTreeItemIntoView, refreshSidebarForContext, focusVaultInSidebar, refreshTagsForContext, syncActiveFileTreeItem, searchByTag, addTagFilter, buildSearchResultsHeader, removeTagFilter };
|