From 6d36b53b3a37c01a1a34b206d3519a05734bb738 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Thu, 28 May 2026 16:49:29 -0400 Subject: [PATCH] fix: regenerate corrupted ui.js, search.js, viewer.js from app.js --- frontend/js/search.js | 288 ++++++++------- frontend/js/ui.js | 809 +++++++++++++++++++++++++----------------- frontend/js/viewer.js | 303 +++++++++++----- 3 files changed, 870 insertions(+), 530 deletions(-) diff --git a/frontend/js/search.js b/frontend/js/search.js index 18d9c31..a202c8d 100644 --- a/frontend/js/search.js +++ b/frontend/js/search.js @@ -1,19 +1,12 @@ -/* ObsiGate — Search module (extracted from app.js) */ - +/* ObsiGate — Auto-extracted module */ import { state } from './state.js'; -import { safeCreateIcons } from './utils.js'; - -// Re-export constants used internally -const state.SEARCH_HISTORY_KEY = state.SEARCH_HISTORY_KEY; -const state.MAX_HISTORY_ENTRIES = state.MAX_HISTORY_ENTRIES; - // --------------------------------------------------------------------------- // Search History Service (localStorage, LIFO, max 50, dedup) // --------------------------------------------------------------------------- -export const SearchHistory = { +const SearchHistory = { _load() { try { - const raw = localStorage.getItem(state.SEARCH_HISTORY_KEY); + const raw = localStorage.getItem(SEARCH_HISTORY_KEY); return raw ? JSON.parse(raw) : []; } catch { return []; @@ -21,7 +14,7 @@ export const SearchHistory = { }, _save(entries) { try { - localStorage.setItem(state.SEARCH_HISTORY_KEY, JSON.stringify(entries)); + localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(entries)); } catch {} }, getAll() { @@ -32,7 +25,7 @@ export const SearchHistory = { const q = query.trim(); let entries = this._load().filter((e) => e !== q); entries.unshift(q); - if (entries.length > state.MAX_HISTORY_ENTRIES) entries = entries.slice(0, state.MAX_HISTORY_ENTRIES); + if (entries.length > MAX_HISTORY_ENTRIES) entries = entries.slice(0, MAX_HISTORY_ENTRIES); this._save(entries); }, remove(query) { @@ -54,7 +47,7 @@ export const SearchHistory = { // --------------------------------------------------------------------------- // Query Parser — extracts operators (tag:, #, vault:, title:, path:, ext:) // --------------------------------------------------------------------------- -export const QueryParser = { +const QueryParser = { parse(raw) { const result = { tags: [], vault: null, title: null, path: null, ext: null, freeText: "" }; if (!raw) return result; @@ -129,7 +122,7 @@ export const QueryParser = { // --------------------------------------------------------------------------- // Autocomplete Dropdown Controller // --------------------------------------------------------------------------- -export const AutocompleteDropdown = { +const AutocompleteDropdown = { _dropdown: null, _historySection: null, _titlesSection: null, @@ -174,8 +167,8 @@ export const AutocompleteDropdown = { hide() { if (this._dropdown) this._dropdown.hidden = true; - state.dropdownActiveIndex = -1; - state.dropdownItems = []; + dropdownActiveIndex = -1; + dropdownItems = []; }, isVisible() { @@ -186,9 +179,9 @@ export const AutocompleteDropdown = { async populate(inputValue, cursorPos) { if (this._suppressNext) { this._suppressNext = false; return; } // Cancel previous suggestion request - if (state.suggestAbortController) { - state.suggestAbortController.abort(); - state.suggestAbortController = null; + if (suggestAbortController) { + suggestAbortController.abort(); + suggestAbortController = null; } const ctx = QueryParser.getContext(inputValue, cursorPos); @@ -235,10 +228,10 @@ export const AutocompleteDropdown = { }, async _fetchSuggestions(prefix, vault) { - state.suggestAbortController = new AbortController(); + suggestAbortController = new AbortController(); // Fetch titles try { - const titlesRes = await api(`/api/suggest?q=${encodeURIComponent(prefix)}&vault=${encodeURIComponent(vault)}&limit=5`, { signal: state.suggestAbortController.signal }); + const titlesRes = await api(`/api/suggest?q=${encodeURIComponent(prefix)}&vault=${encodeURIComponent(vault)}&limit=5`, { signal: suggestAbortController.signal }); this._renderTitles(titlesRes.suggestions || [], prefix); this._titlesSection.hidden = !(titlesRes.suggestions || []).length; if (titlesRes.suggestions?.length) this.show(); @@ -248,7 +241,7 @@ export const AutocompleteDropdown = { } // Fetch tags — keep section always visible to confirm it works try { - const tagsRes = await api(`/api/tags/suggest?q=${encodeURIComponent(prefix)}&vault=${encodeURIComponent(vault)}&limit=5`, { signal: state.suggestAbortController.signal }); + const tagsRes = await api(`/api/tags/suggest?q=${encodeURIComponent(prefix)}&vault=${encodeURIComponent(vault)}&limit=5`, { signal: suggestAbortController.signal }); const items = tagsRes.suggestions || []; if (items.length > 0) { this._renderTags(items, prefix); @@ -370,30 +363,30 @@ export const AutocompleteDropdown = { }, _collectItems() { - state.dropdownItems = Array.from(this._dropdown.querySelectorAll(".search-dropdown__item")); - state.dropdownActiveIndex = -1; - state.dropdownItems.forEach((item) => item.classList.remove("active")); + dropdownItems = Array.from(this._dropdown.querySelectorAll(".search-dropdown__item")); + dropdownActiveIndex = -1; + dropdownItems.forEach((item) => item.classList.remove("active")); }, navigateDown() { - if (!this.isVisible() || state.dropdownItems.length === 0) return; - if (state.dropdownActiveIndex >= 0) state.dropdownItems[state.dropdownActiveIndex].classList.remove("active"); - state.dropdownActiveIndex = (state.dropdownActiveIndex + 1) % state.dropdownItems.length; - state.dropdownItems[state.dropdownActiveIndex].classList.add("active"); - state.dropdownItems[state.dropdownActiveIndex].scrollIntoView({ block: "nearest" }); + if (!this.isVisible() || dropdownItems.length === 0) return; + if (dropdownActiveIndex >= 0) dropdownItems[dropdownActiveIndex].classList.remove("active"); + dropdownActiveIndex = (dropdownActiveIndex + 1) % dropdownItems.length; + dropdownItems[dropdownActiveIndex].classList.add("active"); + dropdownItems[dropdownActiveIndex].scrollIntoView({ block: "nearest" }); }, navigateUp() { - if (!this.isVisible() || state.dropdownItems.length === 0) return; - if (state.dropdownActiveIndex >= 0) state.dropdownItems[state.dropdownActiveIndex].classList.remove("active"); - state.dropdownActiveIndex = state.dropdownActiveIndex <= 0 ? state.dropdownItems.length - 1 : state.dropdownActiveIndex - 1; - state.dropdownItems[state.dropdownActiveIndex].classList.add("active"); - state.dropdownItems[state.dropdownActiveIndex].scrollIntoView({ block: "nearest" }); + if (!this.isVisible() || dropdownItems.length === 0) return; + if (dropdownActiveIndex >= 0) dropdownItems[dropdownActiveIndex].classList.remove("active"); + dropdownActiveIndex = dropdownActiveIndex <= 0 ? dropdownItems.length - 1 : dropdownActiveIndex - 1; + dropdownItems[dropdownActiveIndex].classList.add("active"); + dropdownItems[dropdownActiveIndex].scrollIntoView({ block: "nearest" }); }, selectActive() { - if (state.dropdownActiveIndex >= 0 && state.dropdownActiveIndex < state.dropdownItems.length) { - state.dropdownItems[state.dropdownActiveIndex].click(); + if (dropdownActiveIndex >= 0 && dropdownActiveIndex < dropdownItems.length) { + dropdownItems[dropdownActiveIndex].click(); return true; } return false; @@ -403,7 +396,7 @@ export const AutocompleteDropdown = { // --------------------------------------------------------------------------- // Search Chips Controller — renders active filter chips from parsed query // --------------------------------------------------------------------------- -export const SearchChips = { +const SearchChips = { _container: null, init() { this._container = document.getElementById("search-chips"); @@ -443,14 +436,71 @@ export const SearchChips = { const chip = el("span", { class: `search-chip search-chip--${type}` }); const label = el("span", { class: "search-chip__label" }); label.textContent = fullOperator; - const removeBtn = el("button", { class: "search-chi + const removeBtn = el("button", { class: "search-chip__remove", title: "Retirer ce filtre", type: "button" }); + removeBtn.innerHTML = ''; + removeBtn.addEventListener("click", () => { + // Remove this operator from the input + const input = document.getElementById("search-input"); + const raw = input.value; + // Remove the operator text from the query + const escaped = fullOperator.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + input.value = raw.replace(new RegExp("\\s*" + escaped + "\\s*", "i"), " ").trim(); + _triggerAdvancedSearch(input.value); + }); + chip.appendChild(label); + chip.appendChild(removeBtn); + this._container.appendChild(chip); + safeCreateIcons(); + }, +}; -... [OUTPUT TRUNCATED - 3180 chars omitted out of 53180 total] ... +// --------------------------------------------------------------------------- +// Helper: trigger advanced search from input value +// --------------------------------------------------------------------------- +function _triggerAdvancedSearch(rawQuery) { + const q = (rawQuery || "").trim(); + const vault = document.getElementById("vault-filter").value; + const tagFilter = selectedTags.length > 0 ? selectedTags.join(",") : null; + advancedSearchOffset = 0; + if (q.length > 0 || tagFilter) { + SearchHistory.add(q); + performAdvancedSearch(q, vault, tagFilter); + } else { + SearchChips.clear(); + showWelcome(); + } +} -search(); }); - if (wordBtn) wordBtn.addEventListener("click", () => { state.searchWholeWord = !state.searchWholeWord; _updateToggleUI(); _research(); }); - if (regexBtn) regexBtn.addEventListener("click", () => { state.searchRegex = !state.searchRegex; _updateToggleUI(); _research(); }); - if (filterBtn) filterBtn.addEventListener("click", () => { state.searchFilterVisible = !state.searchFilterVisible; if (filterRow) filterRow.style.display = state.searchFilterVisible ? "flex" : "none"; _updateToggleUI(); }); +// --------------------------------------------------------------------------- +// Search (enhanced with autocomplete, keyboard nav, global shortcuts) +// --------------------------------------------------------------------------- +// ── Search toggle state ── + +function initSearch() { + const input = document.getElementById("search-input"); + if (!input) return; + const caseBtn = document.getElementById("search-case-btn"); + const wordBtn = document.getElementById("search-word-btn"); + const regexBtn = document.getElementById("search-regex-btn"); + const filterBtn = document.getElementById("search-filter-btn"); + const clearBtn = document.getElementById("search-clear-btn"); + const filterRow = document.getElementById("search-filter-row"); + const prevBtn = document.getElementById("search-prev-btn"); + const nextBtn = document.getElementById("search-next-btn"); + const countEl = document.getElementById("search-match-count"); + + function _updateToggleUI() { + caseBtn.classList.toggle("active", searchCaseSensitive); + wordBtn.classList.toggle("active", searchWholeWord); + regexBtn.classList.toggle("active", searchRegex); + filterBtn.classList.toggle("active", searchFilterVisible); + } + + // Toggle buttons + caseBtn.addEventListener("click", () => { searchCaseSensitive = !searchCaseSensitive; _updateToggleUI(); _research(); }); + if (wordBtn) wordBtn.addEventListener("click", () => { searchWholeWord = !searchWholeWord; _updateToggleUI(); _research(); }); + if (regexBtn) regexBtn.addEventListener("click", () => { searchRegex = !searchRegex; _updateToggleUI(); _research(); }); + if (filterBtn) filterBtn.addEventListener("click", () => { searchFilterVisible = !searchFilterVisible; if (filterRow) filterRow.style.display = searchFilterVisible ? "flex" : "none"; _updateToggleUI(); }); // ── Result navigation (up/down arrows + Enter) ── let _searchResultIdx = -1; @@ -486,11 +536,11 @@ search(); }); function _research() { const q = input.value.trim(); if (q.length >= _getEffective("min_query_length", 2)) { - clearTimeout(state.searchTimeout); - state.searchTimeout = setTimeout(() => { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { const vault = document.getElementById("vault-filter").value; - const tagFilter = state.selectedTags.length > 0 ? state.selectedTags.join(",") : null; - state.advancedSearchOffset = 0; + const tagFilter = selectedTags.length > 0 ? selectedTags.join(",") : null; + advancedSearchOffset = 0; performAdvancedSearch(q, vault, tagFilter); }, _getEffective("debounce_ms", 300)); } @@ -522,14 +572,14 @@ search(); }); AutocompleteDropdown.populate(input.value, input.selectionStart); // Debounced search execution - clearTimeout(state.searchTimeout); - state.searchTimeout = setTimeout( + clearTimeout(searchTimeout); + searchTimeout = setTimeout( () => { const q = input.value.trim(); const vault = document.getElementById("vault-filter").value; - const tagFilter = state.selectedTags.length > 0 ? state.selectedTags.join(",") : null; - state.advancedSearchOffset = 0; - if (q.length >= _getEffective("min_query_length", state.MIN_SEARCH_LENGTH) || tagFilter) { + const tagFilter = selectedTags.length > 0 ? selectedTags.join(",") : null; + advancedSearchOffset = 0; + if (q.length >= _getEffective("min_query_length", MIN_SEARCH_LENGTH) || tagFilter) { performAdvancedSearch(q, vault, tagFilter); } else if (q.length === 0) { SearchChips.clear(); @@ -580,10 +630,10 @@ search(); }); const q = input.value.trim(); if (q) { SearchHistory.add(q); - clearTimeout(state.searchTimeout); - state.advancedSearchOffset = 0; + clearTimeout(searchTimeout); + advancedSearchOffset = 0; const vault = document.getElementById("vault-filter").value; - const tagFilter = state.selectedTags.length > 0 ? state.selectedTags.join(",") : null; + const tagFilter = selectedTags.length > 0 ? selectedTags.join(",") : null; performAdvancedSearch(q, vault, tagFilter); } e.preventDefault(); @@ -604,10 +654,10 @@ search(); }); const q = input.value.trim(); if (q) { SearchHistory.add(q); - clearTimeout(state.searchTimeout); - state.advancedSearchOffset = 0; + clearTimeout(searchTimeout); + advancedSearchOffset = 0; const vault = document.getElementById("vault-filter").value; - const tagFilter = state.selectedTags.length > 0 ? state.selectedTags.join(",") : null; + const tagFilter = selectedTags.length > 0 ? selectedTags.join(",") : null; performAdvancedSearch(q, vault, tagFilter); } e.preventDefault(); @@ -617,9 +667,9 @@ search(); }); clearBtn.addEventListener("click", () => { input.value = ""; if (clearBtn) clearBtn.style.display = "none"; - state.searchCaseSensitive = false; - state.searchWholeWord = false; - state.searchRegex = false; + searchCaseSensitive = false; + searchWholeWord = false; + searchRegex = false; _updateToggleUI(); SearchChips.clear(); AutocompleteDropdown.hide(); @@ -655,48 +705,48 @@ function _isInputFocused() { } // --- Backward-compatible search (existing /api/search endpoint) --- -export async function performSearch(query, vaultFilter, tagFilter) { - if (state.searchAbortController) state.searchAbortController.abort(); - state.searchAbortController = new AbortController(); - const searchId = ++state.currentSearchId; +async function performSearch(query, vaultFilter, tagFilter) { + if (searchAbortController) searchAbortController.abort(); + searchAbortController = new AbortController(); + const searchId = ++currentSearchId; showLoading(); let url = `/api/search?q=${encodeURIComponent(query)}&vault=${encodeURIComponent(vaultFilter)}`; if (tagFilter) url += `&tag=${encodeURIComponent(tagFilter)}`; try { - const data = await api(url, { signal: state.searchAbortController.signal }); - if (searchId !== state.currentSearchId) return; + const data = await api(url, { signal: searchAbortController.signal }); + if (searchId !== currentSearchId) return; renderSearchResults(data, query, tagFilter); } catch (err) { if (err.name === "AbortError") return; - if (searchId !== state.currentSearchId) return; + if (searchId !== currentSearchId) return; showWelcome(); } finally { hideProgressBar(); - if (searchId === state.currentSearchId) state.searchAbortController = null; + if (searchId === currentSearchId) searchAbortController = null; } } // --- Advanced search with TF-IDF, facets, pagination --- -export async function performAdvancedSearch(query, vaultFilter, tagFilter, offset, sort) { - if (state.searchAbortController) state.searchAbortController.abort(); - state.searchAbortController = new AbortController(); - const searchId = ++state.currentSearchId; +async function performAdvancedSearch(query, vaultFilter, tagFilter, offset, sort) { + if (searchAbortController) searchAbortController.abort(); + searchAbortController = new AbortController(); + const searchId = ++currentSearchId; showLoading(); - const ofs = offset !== undefined ? offset : state.advancedSearchOffset; - const sortBy = sort || state.advancedSearchSort; - state.advancedSearchLastQuery = query; + const ofs = offset !== undefined ? offset : advancedSearchOffset; + const sortBy = sort || advancedSearchSort; + advancedSearchLastQuery = query; // Update chips from parsed query const parsed = QueryParser.parse(query); SearchChips.update(parsed); - const effectiveLimit = _getEffective("results_per_page", state.ADVANCED_SEARCH_LIMIT); + const effectiveLimit = _getEffective("results_per_page", ADVANCED_SEARCH_LIMIT); let url = `/api/search/advanced?q=${encodeURIComponent(query)}&vault=${encodeURIComponent(vaultFilter)}&limit=${effectiveLimit}&offset=${ofs}&sort=${sortBy}`; if (tagFilter) url += `&tag=${encodeURIComponent(tagFilter)}`; - if (state.searchCaseSensitive) url += "&case_sensitive=true"; - if (state.searchWholeWord) url += "&whole_word=true"; - if (state.searchRegex) url += "®ex=true"; + if (searchCaseSensitive) url += "&case_sensitive=true"; + if (searchWholeWord) url += "&whole_word=true"; + if (searchRegex) url += "®ex=true"; const includeEl = document.getElementById("search-include-input"); const excludeEl = document.getElementById("search-exclude-input"); if (includeEl?.value.trim()) url += `&include_paths=${encodeURIComponent(includeEl.value.trim())}`; @@ -705,31 +755,31 @@ export async function performAdvancedSearch(query, vaultFilter, tagFilter, offse // Search timeout — abort if server takes too long const timeoutId = setTimeout( () => { - if (state.searchAbortController) state.searchAbortController.abort(); + if (searchAbortController) searchAbortController.abort(); }, - _getEffective("search_timeout_ms", state.SEARCH_TIMEOUT_MS), + _getEffective("search_timeout_ms", SEARCH_TIMEOUT_MS), ); try { - const data = await api(url, { signal: state.searchAbortController.signal }); + const data = await api(url, { signal: searchAbortController.signal }); clearTimeout(timeoutId); - if (searchId !== state.currentSearchId) return; - state.advancedSearchTotal = data.total; - state.advancedSearchOffset = ofs; + if (searchId !== currentSearchId) return; + advancedSearchTotal = data.total; + advancedSearchOffset = ofs; renderAdvancedSearchResults(data, query, tagFilter); } catch (err) { clearTimeout(timeoutId); if (err.name === "AbortError") return; - if (searchId !== state.currentSearchId) return; + if (searchId !== currentSearchId) return; showWelcome(); } finally { hideProgressBar(); - if (searchId === state.currentSearchId) state.searchAbortController = null; + if (searchId === currentSearchId) searchAbortController = null; } } // --- Legacy search results renderer (kept for backward compat) --- -export function renderSearchResults(data, query, tagFilter) { +function renderSearchResults(data, query, tagFilter) { const area = document.getElementById("content-area"); area.innerHTML = ""; const header = buildSearchResultsHeader(data, query, tagFilter); @@ -747,7 +797,7 @@ export function renderSearchResults(data, query, tagFilter) { const titleDiv = el("div", { class: "search-result-title" }); if (query && query.trim()) { - highlightSearchText(titleDiv, r.title, query, state.searchCaseSensitive); + highlightSearchText(titleDiv, r.title, query, searchCaseSensitive); } else { titleDiv.textContent = r.title; } @@ -755,7 +805,7 @@ export function renderSearchResults(data, query, tagFilter) { if (r.snippet && r.snippet.includes("")) { snippetDiv.innerHTML = r.snippet; } else if (query && query.trim() && r.snippet) { - highlightSearchText(snippetDiv, r.snippet, query, state.searchCaseSensitive); + highlightSearchText(snippetDiv, r.snippet, query, searchCaseSensitive); } else { snippetDiv.textContent = r.snippet || ""; } @@ -787,7 +837,7 @@ export function renderSearchResults(data, query, tagFilter) { } // --- Advanced search results renderer (facets, highlighted snippets, pagination, sort) --- -export function renderAdvancedSearchResults(data, query, tagFilter) { +function renderAdvancedSearchResults(data, query, tagFilter) { const area = document.getElementById("content-area"); area.innerHTML = ""; @@ -819,9 +869,9 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { // Active filter badges const filtersRow = el("div", { class: "search-filters-row" }); - if (state.searchCaseSensitive) filtersRow.appendChild(el("span", { class: "search-filter-badge" }, [document.createTextNode("Aa")])); - if (state.searchWholeWord) filtersRow.appendChild(el("span", { class: "search-filter-badge" }, [document.createTextNode("wd")])); - if (state.searchRegex) filtersRow.appendChild(el("span", { class: "search-filter-badge" }, [document.createTextNode(".*")])); + if (searchCaseSensitive) filtersRow.appendChild(el("span", { class: "search-filter-badge" }, [document.createTextNode("Aa")])); + if (searchWholeWord) filtersRow.appendChild(el("span", { class: "search-filter-badge" }, [document.createTextNode("wd")])); + if (searchRegex) filtersRow.appendChild(el("span", { class: "search-filter-badge" }, [document.createTextNode(".*")])); const inclEl = document.getElementById("search-include-input"); const exclEl = document.getElementById("search-exclude-input"); if (inclEl?.value.trim()) filtersRow.appendChild(el("span", { class: "search-filter-badge path" }, [document.createTextNode("incl: " + inclEl.value.trim())])); @@ -830,19 +880,19 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { // Sort controls const sortDiv = el("div", { class: "search-sort" }); - const btnRelevance = el("button", { class: "search-sort__btn" + (state.advancedSearchSort === "relevance" ? " active" : ""), type: "button" }); + const btnRelevance = el("button", { class: "search-sort__btn" + (advancedSearchSort === "relevance" ? " active" : ""), type: "button" }); btnRelevance.textContent = "Pertinence"; btnRelevance.addEventListener("click", () => { - state.advancedSearchSort = "relevance"; - state.advancedSearchOffset = 0; + advancedSearchSort = "relevance"; + advancedSearchOffset = 0; const vault = document.getElementById("vault-filter").value; performAdvancedSearch(query, vault, tagFilter, 0, "relevance"); }); - const btnDate = el("button", { class: "search-sort__btn" + (state.advancedSearchSort === "modified" ? " active" : ""), type: "button" }); + const btnDate = el("button", { class: "search-sort__btn" + (advancedSearchSort === "modified" ? " active" : ""), type: "button" }); btnDate.textContent = "Date"; btnDate.addEventListener("click", () => { - state.advancedSearchSort = "modified"; - state.advancedSearchOffset = 0; + advancedSearchSort = "modified"; + advancedSearchOffset = 0; const vault = document.getElementById("vault-filter").value; performAdvancedSearch(query, vault, tagFilter, 0, "modified"); }); @@ -863,9 +913,9 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { body: JSON.stringify({ query: query, vault: document.getElementById("vault-filter")?.value || "all", - case_sensitive: state.searchCaseSensitive, - whole_word: state.searchWholeWord, - regex: state.searchRegex, + case_sensitive: searchCaseSensitive, + whole_word: searchWholeWord, + regex: searchRegex, include_paths: inclEl?.value || "", exclude_paths: exclEl?.value || "", }), @@ -877,9 +927,9 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { area.appendChild(header); // Active sidebar tag chips - if (state.selectedTags.length > 0) { + if (selectedTags.length > 0) { const activeTags = el("div", { class: "search-results-active-tags" }); - state.selectedTags.forEach((tag) => { + selectedTags.forEach((tag) => { const removeBtn = el( "button", { @@ -962,7 +1012,7 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { const titleDiv = el("div", { class: "search-result-title" }); if (freeText) { - highlightSearchText(titleDiv, r.title, freeText, state.searchCaseSensitive); + highlightSearchText(titleDiv, r.title, freeText, searchCaseSensitive); } else { titleDiv.textContent = r.title; } @@ -972,7 +1022,7 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { if (r.snippet && r.snippet.includes("")) { snippetDiv.innerHTML = r.snippet; } else if (freeText && r.snippet) { - highlightSearchText(snippetDiv, r.snippet, freeText, state.searchCaseSensitive); + highlightSearchText(snippetDiv, r.snippet, freeText, searchCaseSensitive); } else { snippetDiv.textContent = r.snippet || ""; } @@ -1010,30 +1060,30 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { area.appendChild(container); // Pagination - if (data.total > state.ADVANCED_SEARCH_LIMIT) { + if (data.total > ADVANCED_SEARCH_LIMIT) { const paginationDiv = el("div", { class: "search-pagination" }); const prevBtn = el("button", { class: "search-pagination__btn", type: "button" }); prevBtn.textContent = "← Précédent"; - prevBtn.disabled = state.advancedSearchOffset === 0; + prevBtn.disabled = advancedSearchOffset === 0; prevBtn.addEventListener("click", () => { - state.advancedSearchOffset = Math.max(0, state.advancedSearchOffset - state.ADVANCED_SEARCH_LIMIT); + advancedSearchOffset = Math.max(0, advancedSearchOffset - ADVANCED_SEARCH_LIMIT); const vault = document.getElementById("vault-filter").value; - performAdvancedSearch(query, vault, tagFilter, state.advancedSearchOffset); + performAdvancedSearch(query, vault, tagFilter, advancedSearchOffset); document.getElementById("content-area").scrollTop = 0; }); const info = el("span", { class: "search-pagination__info" }); - const from = state.advancedSearchOffset + 1; - const to = Math.min(state.advancedSearchOffset + state.ADVANCED_SEARCH_LIMIT, data.total); + const from = advancedSearchOffset + 1; + const to = Math.min(advancedSearchOffset + ADVANCED_SEARCH_LIMIT, data.total); info.textContent = `${from}–${to} sur ${data.total}`; const nextBtn = el("button", { class: "search-pagination__btn", type: "button" }); nextBtn.textContent = "Suivant →"; - nextBtn.disabled = state.advancedSearchOffset + state.ADVANCED_SEARCH_LIMIT >= data.total; + nextBtn.disabled = advancedSearchOffset + ADVANCED_SEARCH_LIMIT >= data.total; nextBtn.addEventListener("click", () => { - state.advancedSearchOffset += state.ADVANCED_SEARCH_LIMIT; + advancedSearchOffset += ADVANCED_SEARCH_LIMIT; const vault = document.getElementById("vault-filter").value; - performAdvancedSearch(query, vault, tagFilter, state.advancedSearchOffset); + performAdvancedSearch(query, vault, tagFilter, advancedSearchOffset); document.getElementById("content-area").scrollTop = 0; }); @@ -1046,4 +1096,4 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { safeCreateIcons(); // Initialize result navigation (select first result) setTimeout(() => { if (window.navigateSearchResults) window.navigateSearchResults(0); }, 50); -} +} \ No newline at end of file diff --git a/frontend/js/ui.js b/frontend/js/ui.js index a1be93f..3bb2183 100644 --- a/frontend/js/ui.js +++ b/frontend/js/ui.js @@ -1,13 +1,10 @@ -/* ObsiGate — UI: theme, sidebar, context menus, tabs, toast, find-in-page */ +/* ObsiGate — Auto-extracted module */ import { state } from './state.js'; -import { openFile } from './viewer.js'; -import { safeCreateIcons } from './utils.js'; - // --------------------------------------------------------------------------- // Right Sidebar Manager // --------------------------------------------------------------------------- -export const RightSidebarManager = { +const RightSidebarManager = { init() { this.loadState(); this.initToggle(); @@ -19,11 +16,11 @@ export const RightSidebarManager = { const savedWidth = localStorage.getItem("obsigate-right-sidebar-width"); if (savedVisible !== null) { - state.rightSidebarVisible = savedVisible === "true"; + rightSidebarVisible = savedVisible === "true"; } if (savedWidth) { - state.rightSidebarWidth = parseInt(savedWidth) || 280; + rightSidebarWidth = parseInt(savedWidth) || 280; } this.applyState(); @@ -37,9 +34,9 @@ export const RightSidebarManager = { if (!sidebar) return; - if (state.rightSidebarVisible) { + if (rightSidebarVisible) { sidebar.classList.remove("hidden"); - sidebar.style.width = `${state.rightSidebarWidth}px`; + sidebar.style.width = `${rightSidebarWidth}px`; if (handle) handle.classList.remove("hidden"); if (tocBtn) { tocBtn.classList.add("active"); @@ -67,8 +64,8 @@ export const RightSidebarManager = { }, toggle() { - state.rightSidebarVisible = !state.rightSidebarVisible; - localStorage.setItem("obsigate-right-sidebar-visible", state.rightSidebarVisible); + rightSidebarVisible = !rightSidebarVisible; + localStorage.setItem("obsigate-right-sidebar-visible", rightSidebarVisible); this.applyState(); }, @@ -108,7 +105,7 @@ export const RightSidebarManager = { newWidth = Math.max(200, Math.min(400, newWidth)); sidebar.style.width = `${newWidth}px`; - state.rightSidebarWidth = newWidth; + rightSidebarWidth = newWidth; }; const onMouseUp = () => { @@ -119,7 +116,7 @@ export const RightSidebarManager = { document.body.style.cursor = ""; document.body.style.userSelect = ""; - localStorage.setItem("obsigate-right-sidebar-width", state.rightSidebarWidth); + localStorage.setItem("obsigate-right-sidebar-width", rightSidebarWidth); }; handle.addEventListener("mousedown", onMouseDown); @@ -131,12 +128,12 @@ export const RightSidebarManager = { // --------------------------------------------------------------------------- // Theme // --------------------------------------------------------------------------- -export function initTheme() { +function initTheme() { const saved = localStorage.getItem("obsigate-theme") || "dark"; applyTheme(saved); } -export function applyTheme(theme) { +function applyTheme(theme) { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("obsigate-theme", theme); @@ -161,12 +158,12 @@ export function applyTheme(theme) { } } -export function toggleTheme() { +function toggleTheme() { const current = document.documentElement.getAttribute("data-theme"); applyTheme(current === "dark" ? "light" : "dark"); } -export function initHeaderMenu() { +function initHeaderMenu() { const menuBtn = document.getElementById("header-menu-btn"); const menuDropdown = document.getElementById("header-menu-dropdown"); @@ -203,7 +200,7 @@ function closeHeaderMenu() { // --------------------------------------------------------------------------- // Custom Dropdowns // --------------------------------------------------------------------------- -export function initCustomDropdowns() { +function initCustomDropdowns() { document.querySelectorAll(".custom-dropdown").forEach((dropdown) => { const trigger = dropdown.querySelector(".custom-dropdown-trigger"); const options = dropdown.querySelectorAll(".custom-dropdown-option"); @@ -335,7 +332,7 @@ function populateCustomDropdown(dropdownId, optionsList, defaultValue) { // --------------------------------------------------------------------------- /** Display a brief toast message at the bottom of the viewport. */ -export function showToast(message, type) { +function showToast(message, type) { console.log("showToast called with:", message, type); type = type || "info"; let container = document.getElementById("toast-container"); @@ -365,7 +362,7 @@ export function showToast(message, type) { // --------------------------------------------------------------------------- // Sidebar toggle (desktop) // --------------------------------------------------------------------------- -export function initSidebarToggle() { +function initSidebarToggle() { const toggleBtn = document.getElementById("sidebar-toggle-btn"); const sidebar = document.getElementById("sidebar"); const resizeHandle = document.getElementById("sidebar-resize-handle"); @@ -391,7 +388,7 @@ export function initSidebarToggle() { // --------------------------------------------------------------------------- // Mobile sidebar // --------------------------------------------------------------------------- -export function initMobile() { +function initMobile() { const hamburger = document.getElementById("hamburger-btn"); const overlay = document.getElementById("sidebar-overlay"); const sidebar = document.getElementById("sidebar"); @@ -417,7 +414,7 @@ function closeMobileSidebar() { // --------------------------------------------------------------------------- // Resizable sidebar (horizontal) // --------------------------------------------------------------------------- -export function initSidebarResize() { +function initSidebarResize() { const handle = document.getElementById("sidebar-resize-handle"); const sidebar = document.getElementById("sidebar"); if (!handle || !sidebar) return; @@ -458,7 +455,7 @@ export function initSidebarResize() { // --------------------------------------------------------------------------- // Resizable tag section (vertical) // --------------------------------------------------------------------------- -export function initTagResize() { +function initTagResize() { const handle = document.getElementById("tag-resize-handle"); const tagSection = document.getElementById("tag-cloud-section"); if (!handle || !tagSection) return; @@ -489,11 +486,374 @@ export function initTagResize() { handle.addEventListener("mousedown", (e) => { e.preventDefault(); startY = e.clientY; - 4 + startHeight = tagSection.getBoundingClientRect().height; + document.body.classList.add("resizing-v"); + handle.classList.add("active"); + document.addEventListener("mousemove", onMouseMove); + document.addEventListener("mouseup", onMouseUp); + }); +} -... [OUTPUT TRUNCATED - 30698 chars omitted out of 80698 total] ... +// --------------------------------------------------------------------------- +// Frontmatter Accent Card Builder +// --------------------------------------------------------------------------- -
+function buildFrontmatterCard(frontmatter) { + // Helper: format date + function formatDate(iso) { + if (!iso) return "—"; + const d = new Date(iso); + const date = d.toISOString().slice(0, 10); + const time = d.toTimeString().slice(0, 5); + return `${date} · ${time}`; + } + + // Extract boolean flags + const booleanFlags = ["publish", "favoris", "template", "task", "archive", "draft", "private"].map((key) => ({ key, value: !!frontmatter[key] })); + + // Toggle state + let isOpen = true; + + // Build header with chevron + const chevron = el("span", { class: "fm-chevron open" }); + chevron.innerHTML = ''; + + const fmHeader = el("div", { class: "fm-header" }, [chevron, document.createTextNode("Frontmatter")]); + + // ZONE 1: Top strip + const topBadges = []; + + // Title badge + const title = frontmatter.titre || frontmatter.title || ""; + if (title) { + topBadges.push(el("span", { class: "ac-title" }, [document.createTextNode(`"${title}"`)])); + } + + // Status badge + if (frontmatter.statut) { + const statusBadge = el("span", { class: "ac-badge green" }, [el("span", { class: "ac-dot" }), document.createTextNode(frontmatter.statut)]); + topBadges.push(statusBadge); + } + + // Category badge + if (frontmatter.catégorie || frontmatter.categorie) { + const cat = frontmatter.catégorie || frontmatter.categorie; + const catBadge = el("span", { class: "ac-badge blue" }, [document.createTextNode(cat)]); + topBadges.push(catBadge); + } + + // Publish badge + if (frontmatter.publish) { + topBadges.push(el("span", { class: "ac-badge purple" }, [document.createTextNode("publié")])); + } + + // Favoris badge + if (frontmatter.favoris) { + topBadges.push(el("span", { class: "ac-badge purple" }, [document.createTextNode("favori")])); + } + + const acTop = el("div", { class: "ac-top" }, topBadges); + + // ZONE 2: Body 2 columns + const leftCol = el("div", { class: "ac-col" }, [ + el("div", { class: "ac-row" }, [el("span", { class: "ac-k" }, [document.createTextNode("auteur")]), el("span", { class: "ac-v" }, [document.createTextNode(frontmatter.auteur || "—")])]), + el("div", { class: "ac-row" }, [el("span", { class: "ac-k" }, [document.createTextNode("catégorie")]), el("span", { class: "ac-v" }, [document.createTextNode(frontmatter.catégorie || frontmatter.categorie || + +... [OUTPUT TRUNCATED - 6724 chars omitted out of 56724 total] ... + +'div'); + modal.className = 'obsigate-modal'; + modal.innerHTML = ` +
+

Créer un fichier

+
+
+
+ + +
Dans: ${parentPath || '/'}
+ +
+
+ + +
+
+
+ + +
+ `; + + overlay.appendChild(modal); + document.body.appendChild(overlay); + + setTimeout(() => overlay.classList.add('active'), 10); + + const input = modal.querySelector('#file-name-input'); + const extSelect = modal.querySelector('#file-ext-select'); + const errorDiv = modal.querySelector('#file-error'); + const createBtn = modal.querySelector('#file-create-btn'); + const cancelBtn = modal.querySelector('#file-cancel-btn'); + + input.focus(); + + const validateName = (name) => { + if (!name.trim()) return 'Le nom ne peut pas être vide'; + if (/[/\\:*?"<>|]/.test(name)) return 'Caractères interdits: / \\ : * ? " < > |'; + return null; + }; + + input.addEventListener('input', () => { + const error = validateName(input.value); + if (error) { + errorDiv.textContent = error; + errorDiv.style.display = 'block'; + input.classList.add('error'); + } else { + errorDiv.style.display = 'none'; + input.classList.remove('error'); + } + }); + + const create = async () => { + let name = input.value.trim(); + const error = validateName(name); + if (error) { + errorDiv.textContent = error; + errorDiv.style.display = 'block'; + return; + } + + const ext = extSelect.value; + if (!name.endsWith(ext)) { + name += ext; + } + + const path = parentPath ? `${parentPath}/${name}` : name; + createBtn.disabled = true; + createBtn.textContent = 'Création...'; + + try { + await api(`/api/file/${encodeURIComponent(vault)}`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ path, content: '' }), + }); + + showToast(`Fichier "${name}" créé`, 'success'); + this._closeModal(overlay); + await refreshSidebarTreePreservingState(); + openFile(vault, path); + } catch (err) { + showToast(err.message || 'Erreur lors de la création', 'error'); + createBtn.disabled = false; + createBtn.textContent = 'Créer'; + } + }; + + createBtn.addEventListener('click', create); + cancelBtn.addEventListener('click', () => this._closeModal(overlay)); + + input.addEventListener('keydown', (e) => { + if (e.key === 'Enter') create(); + if (e.key === 'Escape') this._closeModal(overlay); + }); + }, + + async startInlineRename(vault, path, type) { + const item = document.querySelector(`.tree-item[data-vault="${CSS.escape(vault)}"][data-path="${CSS.escape(path)}"]`); + if (!item) { + showToast('Élément introuvable dans l’arborescence', 'error'); + return; + } + + const textNode = Array.from(item.childNodes).find((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim()); + if (!textNode) { + showToast('Impossible de renommer cet élément', 'error'); + return; + } + + const originalText = textNode.textContent; + const trimmedOriginal = originalText.trim(); + const currentName = path.split('/').pop() || trimmedOriginal; + const baseName = type === 'file' ? currentName.replace(/(\.[^./\\]+)$/i, '') : currentName; + const extension = type === 'file' ? (currentName.match(/(\.[^./\\]+)$/i)?.[1] || '') : ''; + + const input = document.createElement('input'); + input.type = 'text'; + input.className = 'sidebar-item-input'; + input.value = baseName; + + textNode.textContent = ' '; + const badge = item.querySelector('.badge-small'); + if (badge) { + item.insertBefore(input, badge); + } else { + item.appendChild(input); + } + + const restore = () => { + input.remove(); + textNode.textContent = originalText; + }; + + const validateName = (name) => { + if (!name.trim()) return 'Le nom ne peut pas être vide'; + if (/[/\\:*?"<>|]/.test(name)) return 'Caractères interdits: / \\ : * ? " < > |'; + return null; + }; + + const submit = async () => { + const name = input.value.trim(); + const error = validateName(name); + if (error) { + showToast(error, 'error'); + input.focus(); + input.select(); + return; + } + + const newName = `${name}${extension}`; + if (newName === currentName) { + restore(); + return; + } + + input.disabled = true; + try { + const endpoint = type === 'directory' ? `/api/directory/${encodeURIComponent(vault)}` : `/api/file/${encodeURIComponent(vault)}`; + const result = await api(endpoint, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ path, new_name: newName }), + }); + + const nextPath = result.new_path; + await refreshSidebarTreePreservingState(); + + if (type === 'file' && currentVault === vault && currentPath === path) { + await openFile(vault, nextPath); + } else if (type === 'directory' && currentVault === vault && currentPath && (currentPath === path || currentPath.startsWith(`${path}/`))) { + const suffix = currentPath === path ? '' : currentPath.slice(path.length); + currentPath = `${nextPath}${suffix}`; + await focusPathInSidebar(vault, currentPath, { alignToTop: false }); + } + + showToast(type === 'directory' ? 'Dossier renommé' : 'Fichier renommé', 'success'); + } catch (err) { + input.disabled = false; + showToast(err.message || 'Erreur lors du renommage', 'error'); + input.focus(); + input.select(); + return; + } + }; + + input.addEventListener('click', (e) => e.stopPropagation()); + input.addEventListener('keydown', async (e) => { + e.stopPropagation(); + if (e.key === 'Enter') { + e.preventDefault(); + await submit(); + } + if (e.key === 'Escape') { + e.preventDefault(); + restore(); + } + }); + input.addEventListener('blur', async () => { + if (!input.disabled) { + await submit(); + } + }); + + input.focus(); + input.setSelectionRange(0, input.value.length); + }, + + confirmDeleteDirectory(vault, path) { + const overlay = this._createModalOverlay(); + const modal = document.createElement('div'); + modal.className = 'obsigate-modal'; + modal.innerHTML = ` +
+

Supprimer le dossier

+
+
+
+ +
+ Attention ! Cette action est irréversible. +
Tous les fichiers et sous-dossiers seront supprimés définitivement. +
+
+
+ +
${path}
+
+
+
+ + +
+ `; + + overlay.appendChild(modal); + document.body.appendChild(overlay); + + setTimeout(() => overlay.classList.add('active'), 10); + safeCreateIcons(); + + const confirmBtn = modal.querySelector('#del-confirm-btn'); + const cancelBtn = modal.querySelector('#del-cancel-btn'); + + const deleteDir = async () => { + confirmBtn.disabled = true; + confirmBtn.textContent = 'Suppression...'; + + try { + const result = await api(`/api/directory/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`, { + method: 'DELETE', + }); + + showToast(`Dossier supprimé (${result.deleted_count} fichiers)`, 'success'); + this._closeModal(overlay); + await refreshSidebarTreePreservingState(); + + if (currentVault === vault && currentPath && currentPath.startsWith(path)) { + showWelcome(); + } + } catch (err) { + showToast(err.message || 'Erreur lors de la suppression', 'error'); + confirmBtn.disabled = false; + confirmBtn.textContent = 'Supprimer définitivement'; + } + }; + + confirmBtn.addEventListener('click', deleteDir); + cancelBtn.addEventListener('click', () => this._closeModal(overlay)); + }, + + confirmDeleteFile(vault, path) { + const overlay = this._createModalOverlay(); + const modal = document.createElement('div'); + modal.className = 'obsigate-modal'; + modal.innerHTML = ` +
+

Supprimer le fichier

+
+
+
Attention ! Cette action est irréversible. @@ -532,7 +892,7 @@ export function initTagResize() { this._closeModal(overlay); await refreshSidebarTreePreservingState(); - if (state.currentVault === vault && state.currentPath === path) { + if (currentVault === vault && currentPath === path) { showWelcome(); } } catch (err) { @@ -566,7 +926,7 @@ export function initTagResize() { // --------------------------------------------------------------------------- // Find in Page Manager // --------------------------------------------------------------------------- -export const FindInPageManager = { +const FindInPageManager = { isOpen: false, searchTerm: "", matches: [], @@ -985,313 +1345,112 @@ export const FindInPageManager = { }; // --------------------------------------------------------------------------- -// Tab Manager +// Init // --------------------------------------------------------------------------- -export const TabManager = { - _tabs: [], - _activeTabId: null, - _previewTabId: null, // single-click preview tab (temporary, replaced on next preview) - _tabCache: {}, // { tabId: { vault, path, title, data, rawSource, sourceView, scrollTop, icon } } - _tabBar: null, - _tabList: null, - _dirtyTabs: new Set(), +async function init() { + initTheme(); + initHeaderMenu(); + initCustomDropdowns(); + document.getElementById("theme-toggle").addEventListener("click", toggleTheme); + document.getElementById("header-logo").addEventListener("click", goHome); + const refreshBtn = document.getElementById("header-refresh-btn"); + if (refreshBtn) refreshBtn.addEventListener("click", goHome); + initSearch(); + initSidebarToggle(); + initMobile(); + initVaultContext(); + initSidebarTabs(); + initHelpModal(); + initConfigModal(); + initSidebarFilter(); + initSidebarResize(); + initEditor(); + initLoginForm(); + initRecentTab(); + RightSidebarManager.init(); + FindInPageManager.init(); + ContextMenuManager.init(); - init() { - this._tabBar = document.getElementById("tab-bar"); - this._tabList = document.getElementById("tab-list"); - }, + // Check auth status first + const authOk = await AuthManager.initAuth(); - /** Open a file as a preview tab (single-click). - * Replaces any existing preview tab. If the file is already - * open as a persistent tab, just activates it. */ - async openPreview(vault, path) { - const tabId = `${vault}::${path}`; + if (authOk) { + // Start SSE sync AFTER auth is established (cookie available) + initSyncStatus(); - // If already open as persistent tab, just activate it - const existing = this._tabs.find(t => t.id === tabId && !t.preview); - if (existing) { - this.activate(tabId); - return; - } + try { + await Promise.all([loadVaultSettings(), loadVaults(), loadTags()]); - // Close existing preview tab - if (this._previewTabId && this._previewTabId !== tabId) { - this.close(this._previewTabId); - } - - // If already open as preview, just focus it - const previewExisting = this._tabs.find(t => t.id === tabId && t.preview); - if (previewExisting) { - this.activate(tabId); - return; - } - - // Create preview tab - const name = path.split("/").pop().replace(/\.md$/i, ""); - const icon = getFileIcon(name + ".md"); - - this._tabs.push({ id: tabId, vault, path, name, icon, preview: true }); - this._tabCache[tabId] = { vault, path, title: name, data: null, rawSource: null, sourceView: false, scrollTop: 0, icon }; - this._previewTabId = tabId; - - this._renderTabs(); - this.activate(tabId); - }, - - /** Convert a preview tab to a persistent tab (double-click). - * If already persistent, opens a new duplicate (same file, different tab). */ - async openPersistent(vault, path) { - const tabId = `${vault}::${path}`; - - // If it's already a preview tab, convert it to persistent - const previewTab = this._tabs.find(t => t.id === tabId && t.preview); - if (previewTab) { - previewTab.preview = false; - if (this._previewTabId === tabId) { - this._previewTabId = null; + // Initialize dashboard widgets now that vaults are loaded + if (typeof DashboardRecentWidget !== "undefined") { + DashboardRecentWidget.init(); } - this._renderTabs(); - this.activate(tabId); - return; - } - // If already persistent, just focus it - const existing = this._tabs.find(t => t.id === tabId && !t.preview); - if (existing) { - this.activate(tabId); - return; - } - - // Create a new persistent tab - this.open(vault, path); - }, - - /** Open a file in a tab (or focus existing) */ - async open(vault, path, options = {}) { - const tabId = `${vault}::${path}`; - - // If already open, just focus it - const existing = this._tabs.find(t => t.id === tabId); - if (existing) { - // Convert preview to persistent if needed - if (existing.preview) { - existing.preview = false; - if (this._previewTabId === tabId) this._previewTabId = null; - this._renderTabs(); + // Check for popup mode query parameter + const urlParams = new URLSearchParams(window.location.search); + if (urlParams.get("popup") === "true") { + document.body.classList.add("popup-mode"); } - this.activate(tabId); - return; - } - // Create new tab - const name = path.split("/").pop().replace(/\.md$/i, ""); - const icon = getFileIcon(name + ".md"); - - this._tabs.push({ id: tabId, vault, path, name, icon }); - this._tabCache[tabId] = { vault, path, title: name, data: null, rawSource: null, sourceView: false, scrollTop: 0, icon }; - - this._renderTabs(); - this.activate(tabId); - }, - - /** Activate a specific tab */ - async activate(tabId) { - if (this._activeTabId === tabId && this._tabs.length > 0) return; - - // Save current tab state - if (this._activeTabId && this._tabCache[this._activeTabId]) { - this._saveCurrentTabState(); - } - - this._activeTabId = tabId; - this._renderTabs(); - - // Load tab content - const cache = this._tabCache[tabId]; - if (!cache) return; - - // Update global state - state.currentVault = cache.vault; - state.currentPath = cache.path; - syncActiveFileTreeItem(cache.vault, cache.path); - - const area = document.getElementById("content-area"); - - if (cache.data) { - // Use cached data - this._restoreTabContent(cache, area); - } else { - // Fetch file content - area.innerHTML = '
Chargement...
'; - try { - const data = await api(`/api/file/${encodeURIComponent(cache.vault)}?path=${encodeURIComponent(cache.path)}`); - cache.data = data; - cache.title = data.title; - renderFile(cache.data); - - // Restore source view if needed - if (cache.sourceView) { - await this._toggleSourceView(cache, area); + // Handle direct deep-link to file via #file=... + if (window.location.hash && window.location.hash.startsWith("#file=")) { + const hashVal = window.location.hash.substring(6); + const sepIndex = hashVal.indexOf(":"); + if (sepIndex > -1) { + const vault = decodeURIComponent(hashVal.substring(0, sepIndex)); + const path = decodeURIComponent(hashVal.substring(sepIndex + 1)); + openFile(vault, path); } - if (cache.scrollTop) { - area.scrollTop = cache.scrollTop; - } - } catch (err) { - area.innerHTML = `
Erreur: ${escapeHtml(err.message)}
`; + } else if (urlParams.get("popup") !== "true") { + // Default to dashboard if no deep link and not in popup mode + showWelcome(); + } + } catch (err) { + console.error("Failed to initialize ObsiGate:", err); + showToast("Erreur lors de l'initialisation", "error"); + } + } + + safeCreateIcons(); +} + +// ---- Modify openFile to use TabManager ---- +const _originalOpenFile = openFile; +openFile = function(vault, path) { + TabManager.open(vault, path); +}; + +// ---- 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); } } - - // Update URL hash - if (history.pushState) { - history.pushState(null, "", `#/file/${encodeURIComponent(cache.vault)}/${encodeURIComponent(cache.path)}`); - } - - // Hide dashboard - const dashboard = document.getElementById("dashboard-home"); - if (dashboard) dashboard.style.display = "none"; - }, + } +}); - /** Close a tab */ - close(tabId) { - const idx = this._tabs.findIndex(t => t.id === tabId); - if (idx === -1) return; - - this._tabs.splice(idx, 1); - delete this._tabCache[tabId]; - this._dirtyTabs.delete(tabId); - - if (this._tabs.length === 0) { - this._activeTabId = null; - this._showDashboard(); - this._tabBar.hidden = true; - } else if (this._activeTabId === tabId) { - // Activate adjacent tab - const newIdx = Math.min(idx, this._tabs.length - 1); - this.activate(this._tabs[newIdx].id); - } - - this._renderTabs(); - }, - - /** Close all tabs */ - closeAll() { - this._tabs = []; - this._tabCache = {}; - this._dirtyTabs.clear(); - this._activeTabId = null; - this._showDashboard(); - this._tabBar.hidden = true; - }, - - /** Close tabs to the right */ - closeRight(tabId) { - const idx = this._tabs.findIndex(t => t.id === tabId); - if (idx === -1) return; - const toClose = this._tabs.slice(idx + 1); - for (const tab of toClose) { - delete this._tabCache[tab.id]; - this._dirtyTabs.delete(tab.id); - } - this._tabs = this._tabs.slice(0, idx + 1); - if (!this._tabs.find(t => t.id === this._activeTabId)) { - this.activate(tabId); - } - this._renderTabs(); - }, - - /** Close other tabs */ - closeOthers(tabId) { - const tab = this._tabs.find(t => t.id === tabId); - if (!tab) return; - for (const t of this._tabs) { - if (t.id !== tabId) { - delete this._tabCache[t.id]; - this._dirtyTabs.delete(t.id); - } - } - this._tabs = [tab]; - this.activate(tabId); - this._renderTabs(); - }, - - /** Reorder tabs by drag and drop */ - moveTab(fromIdx, toIdx) { - if (fromIdx === toIdx || fromIdx < 0 || toIdx < 0) return; - const tab = this._tabs.splice(fromIdx, 1)[0]; - this._tabs.splice(toIdx, 0, tab); - this._renderTabs(); - }, - - /** Save current tab state before switching */ - _saveCurrentTabState() { - const cache = this._tabCache[this._activeTabId]; - if (!cache) return; - - const area = document.getElementById("content-area"); - const rendered = document.getElementById("file-rendered-content"); - - cache.scrollTop = area.scrollTop; - cache.sourceView = rendered ? rendered.style.display === "none" : false; - }, - - /** Restore tab content from cache */ - _restoreTabContent(cache, area) { - renderFile(cache.data); - if (cache.sourceView) { - this._restoreSourceView(cache, area); - } - if (cache.scrollTop) { - area.scrollTop = cache.scrollTop; - } - }, - - async _toggleSourceView(cache, area) { - const rendered = document.getElementById("file-rendered-content"); - const raw = document.getElementById("file-raw-content"); - if (!rendered || !raw) return; - - if (!cache.rawSource) { - const rawData = await api(`/api/file/${encodeURIComponent(cache.vault)}/raw?path=${encodeURIComponent(cache.path)}`); - cache.rawSource = rawData.raw; - } - raw.textContent = cache.rawSource; - rendered.style.display = "none"; - raw.style.display = "block"; - }, - - _restoreSourceView(cache, area) { - requestAnimationFrame(() => { - const rendered = document.getElementById("file-rendered-content"); - const raw = document.getElementById("file-raw-content"); - if (rendered && raw && cache.rawSource) { - raw.textContent = cache.rawSource; - rendered.style.display = "none"; - raw.style.display = "block"; - } - }); - }, - - _showDashboard() { - const area = document.getElementById("content-area"); - // Save dashboard DOM before clearing (it may have been removed from DOM by renderFile) - let dashboard = document.getElementById("dashboard-home"); - if (!dashboard) { - // Dashboard was destroyed — rebuild via showWelcome - area.innerHTML = ""; - showWelcome(); - return; - } - area.innerHTML = ""; - dashboard.style.display = ""; - area.appendChild(dashboard); - // Refresh widgets after restoring - if (typeof DashboardStatsWidget !== "undefined") DashboardStatsWidget.load(); - if (typeof DashboardConflictsWidget !== "undefined") DashboardConflictsWidget.load(); - if (typeof DashboardRecentWidget !== "undefined") DashboardRecentWidget.load(state.selectedContextVault); - if (typeof DashboardBookmarkWidget !== "undefined") DashboardBookmarkWidget.load(state.selectedContextVault); - if (history.pushState) { - history.pushState(null, "", "#"); - } - }, - - /** Render the tab bar */ +// ---- Modify init to include TabManager ---- +const _origInit2 = init; +init = function() { + _origInit2(); + TabManager.init(); +}; \ No newline at end of file diff --git a/frontend/js/viewer.js b/frontend/js/viewer.js index d0016cc..b300ad5 100644 --- a/frontend/js/viewer.js +++ b/frontend/js/viewer.js @@ -1,9 +1,5 @@ -/* ObsiGate — Viewer module: Outline, ScrollSpy, ReadingProgress, file viewer, frontmatter card, editor init */ +/* ObsiGate — Auto-extracted module */ import { state } from './state.js'; -import { escapeHtml, safeCreateIcons, safeHighlight, getFileIcon } from "./utils.js"; - -// initEditor is defined in utils.js — re-exported below. - // --------------------------------------------------------------------------- // Outline/TOC Manager // --------------------------------------------------------------------------- @@ -118,7 +114,7 @@ const OutlineManager = { outlineList.appendChild(item); }); - state.headingsCache = headings; + headingsCache = headings; }, /** @@ -148,9 +144,9 @@ const OutlineManager = { * Set active heading in outline */ setActiveHeading(headingId) { - if (state.activeHeadingId === headingId) return; + if (activeHeadingId === headingId) return; - state.activeHeadingId = headingId; + activeHeadingId = headingId; const items = document.querySelectorAll(".outline-item"); items.forEach((item) => { @@ -182,12 +178,11 @@ const OutlineManager = { destroy() { ScrollSpyManager.destroy(); ReadingProgressManager.destroy(); - state.headingsCache = []; - state.activeHeadingId = null; + headingsCache = []; + activeHeadingId = null; }, }; - // --------------------------------------------------------------------------- // Scroll Spy Manager // --------------------------------------------------------------------------- @@ -245,7 +240,6 @@ const ScrollSpyManager = { }, }; - // --------------------------------------------------------------------------- // Reading Progress Manager // --------------------------------------------------------------------------- @@ -311,15 +305,14 @@ const ReadingProgressManager = { }, }; - // --------------------------------------------------------------------------- // File viewer // --------------------------------------------------------------------------- async function openFile(vaultName, filePath) { - state.currentVault = vaultName; - state.currentPath = filePath; - state.showingSource = false; - state.cachedRawSource = null; + currentVault = vaultName; + currentPath = filePath; + showingSource = false; + cachedRawSource = null; // Highlight active syncActiveFileTreeItem(vaultName, filePath); @@ -442,12 +435,12 @@ function renderFile(data) { copyBtn.addEventListener("click", async () => { try { // Fetch raw content if not already cached - if (!state.cachedRawSource) { + if (!cachedRawSource) { const rawUrl = `/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`; const rawData = await api(rawUrl); - state.cachedRawSource = rawData.raw; + cachedRawSource = rawData.raw; } - await navigator.clipboard.writeText(state.cachedRawSource); + await navigator.clipboard.writeText(cachedRawSource); copyBtn.lastChild.textContent = "Copié !"; setTimeout(() => (copyBtn.lastChild.textContent = "Copier"), 1500); } catch (err) { @@ -505,10 +498,194 @@ function renderFile(data) { } } catch (e) { /* ignore */ } })(); - shareBtn.addEventListener("click", + shareBtn.addEventListener("click", () => openShareDialog(data.vault, data.path)); -... [OUTPUT TRUNCATED - 13907 chars omitted out of 63907 total] ... + // Bookmark button — check if already bookmarked + const bookmarkBtn = el("button", { class: "btn-action btn-bookmark", title: "Ajouter/Retirer des bookmarks" }, [icon("bookmark-plus", 14), document.createTextNode("Bookmark")]); + // Check bookmark status and color the button + (async () => { + try { + const bms = await api("/api/bookmarks"); + if (Array.isArray(bms) && bms.some(b => b.vault === data.vault && b.path === data.path)) { + bookmarkBtn.classList.add("active"); + bookmarkBtn.title = "Retirer des bookmarks"; + } + } catch (e) { /* ignore */ } + })(); + bookmarkBtn.addEventListener("click", async () => { + try { + const res = await api("/api/bookmarks/toggle", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ vault: data.vault, path: data.path, title: data.title }) }); + bookmarkBtn.classList.toggle("active", res.bookmarked); + bookmarkBtn.title = res.bookmarked ? "Retirer des bookmarks" : "Ajouter aux bookmarks"; + showToast(res.bookmarked ? "Ajouté aux bookmarks" : "Retiré des bookmarks", "success"); + if (typeof DashboardBookmarkWidget !== "undefined") DashboardBookmarkWidget.load(); + } catch (err) { showToast("Erreur: " + err.message, "error"); } + }); + // Frontmatter — Accent Card + let fmSection = null; + if (data.frontmatter && Object.keys(data.frontmatter).length > 0) { + fmSection = buildFrontmatterCard(data.frontmatter); + } + + // Content container (rendered HTML) + const mdDiv = el("div", { class: "md-content", id: "file-rendered-content" }); + mdDiv.innerHTML = data.html; + + // Raw source container (hidden initially) + const rawDiv = el("div", { class: "raw-source-view", id: "file-raw-content", style: "display:none" }); + + // Source button toggle logic + sourceBtn.addEventListener("click", async () => { + const rendered = document.getElementById("file-rendered-content"); + const raw = document.getElementById("file-raw-content"); + if (!rendered || !raw) return; + + showingSource = !showingSource; + if (showingSource) { + sourceBtn.classList.add("active"); + if (!cachedRawSource) { + const rawUrl = `/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`; + const rawData = await api(rawUrl); + cachedRawSource = rawData.raw; + } + raw.textContent = cachedRawSource; + rendered.style.display = "none"; + raw.style.display = "block"; + } else { + sourceBtn.classList.remove("active"); + rendered.style.display = "block"; + raw.style.display = "none"; + } + }); + + // Assemble + area.innerHTML = ""; + area.appendChild(breadcrumb); + area.appendChild(el("div", { class: "file-header" }, [el("div", { class: "file-title" }, [document.createTextNode(data.title)]), tagsDiv, el("div", { class: "file-actions" }, [copyBtn, sourceBtn, mdBtn, pdfBtn, editBtn, openNewWindowBtn, tocBtn, shareBtn, bookmarkBtn])])); + if (fmSection) area.appendChild(fmSection); + area.appendChild(mdDiv); + area.appendChild(rawDiv); + + // Backlinks panel + if (data.is_markdown) { + renderBacklinksPanel(data.vault, data.path, area); + } + + // Highlight code blocks + area.querySelectorAll("pre code").forEach((block) => { + safeHighlight(block); + }); + + // Wire up wikilinks + area.querySelectorAll(".wikilink").forEach((link) => { + link.addEventListener("click", (e) => { + e.preventDefault(); + const v = link.getAttribute("data-vault"); + const p = link.getAttribute("data-path"); + if (v && p) openFile(v, p); + }); + }); + + safeCreateIcons(); + area.scrollTop = 0; + + // Initialize outline/TOC for this document + OutlineManager.init(); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- +function escapeHtml(str) { + if (!str) return ""; + return String(str).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); +} + +function el(tag, attrs, children) { + const e = document.createElement(tag); + if (attrs) { + Object.entries(attrs).forEach(([k, v]) => { + // Skip boolean false for standard HTML boolean attributes to avoid setAttribute("checked", "false") bug + if (v === false && (k === "checked" || k === "disabled" || k === "hidden" || k === "required" || k === "readonly")) { + return; + } + e.setAttribute(k, v); + }); + } + if (children) { + children.forEach((c) => { + if (c) e.appendChild(c); + }); + } + return e; +} + +function icon(name, size) { + const i = document.createElement("i"); + i.setAttribute("data-lucide", name); + i.style.width = size + "px"; + i.style.height = size + "px"; + i.classList.add("icon"); + return i; +} + +function smallBadge(count) { + const s = document.createElement("span"); + s.className = "badge-small"; + s.style.cssText = "font-size:0.68rem;color:var(--text-muted);margin-left:4px"; + s.textContent = `(${count})`; + return s; +} + +function getContextMenuPositionFromElement(target) { + const rect = target.getBoundingClientRect(); + return { + x: Math.min(rect.right - 8, window.innerWidth - 16), + y: Math.min(rect.top + rect.height / 2, window.innerHeight - 16), + }; +} + +function attachTreeItemActionButton(itemEl, vault, path, type, isReadonly) { + const button = document.createElement("button"); + button.type = "button"; + button.className = "tree-item-action-btn"; + button.setAttribute("aria-label", "Afficher le menu d’actions"); + button.setAttribute("title", "Actions"); + const iconEl = icon("more-vertical", 16); + button.appendChild(iconEl); + button.addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + const pos = getContextMenuPositionFromElement(button); + ContextMenuManager.show(pos.x, pos.y, vault, path, type, isReadonly); + }); + itemEl.appendChild(button); + // Ensure Lucide icons are rendered for the button + setTimeout(() => { + safeCreateIcons(); + }, 0); +} + +function attachTreeItemLongPress(itemEl, getMenuData) { + let pressTimer = null; + let pressHandled = false; + let startX = 0; + let startY = 0; + const longPressDelay = 550; + const moveThreshold = 10; + + const clearPressTimer = () => { + if (pressTimer) { + clearTimeout(pressTimer); + pressTimer = null; + } + }; + + itemEl.addEventListener("touchstart", (e) => { + if (!e.touches || e.touches.length !== 1) return; + pressHandled = false; + startX = e.touches[0].clientX; startY = e.touches[0].clientY; clearPressTimer(); pressTimer = setTimeout(() => { @@ -548,7 +725,7 @@ function renderFile(data) { } function getVaultIcon(vaultName, size = 16) { - const v = state.allVaults.find((val) => val.name === vaultName); + const v = allVaults.find((val) => val.name === vaultName); const type = v ? v.type : "VAULT"; if (type === "DIR") { @@ -771,10 +948,10 @@ function showWelcome() { DashboardConflictsWidget.load(); } if (typeof DashboardRecentWidget !== "undefined") { - DashboardRecentWidget.load(state.selectedContextVault); + DashboardRecentWidget.load(selectedContextVault); } if (typeof DashboardBookmarkWidget !== "undefined") { - DashboardBookmarkWidget.load(state.selectedContextVault); + DashboardBookmarkWidget.load(selectedContextVault); } if (typeof DashboardSharedWidget !== "undefined") { DashboardSharedWidget.load(); @@ -825,9 +1002,9 @@ async function loadSavedSearches() { // Apply the saved search const input = document.getElementById("search-input"); if (input) input.value = s.query; - state.searchCaseSensitive = s.case_sensitive || false; - state.searchWholeWord = s.whole_word || false; - state.searchRegex = s.regex || false; + searchCaseSensitive = s.case_sensitive || false; + searchWholeWord = s.whole_word || false; + searchRegex = s.regex || false; if (typeof _updateToggleUI === "function") _updateToggleUI(); if (s.include_paths) { const incl = document.getElementById("search-include-input"); @@ -842,8 +1019,8 @@ async function loadSavedSearches() { AutocompleteDropdown._suppressNext = true; const vault = s.vault || "all"; if (input) { input.dispatchEvent(new Event("input")); } - clearTimeout(state.searchTimeout); - state.advancedSearchOffset = 0; + clearTimeout(searchTimeout); + advancedSearchOffset = 0; performAdvancedSearch(s.query, vault, null); }); }); @@ -882,58 +1059,15 @@ function goHome() { document.querySelectorAll(".tree-item.active").forEach((el) => el.classList.remove("active")); - state.currentVault = null; - state.currentPath = null; - state.showingSource = false; - state.cachedRawSource = null; + currentVault = null; + currentPath = null; + showingSource = false; + cachedRawSource = null; closeMobileSidebar(); showWelcome(); } - -// initEditor wires up the editor modal — editor functions (openEditor, closeEditor, saveFile, deleteFile) are in utils.js -function initEditor() { - const cancelBtn = document.getElementById("editor-cancel"); - const deleteBtn = document.getElementById("editor-delete"); - const saveBtn = document.getElementById("editor-save"); - const modal = document.getElementById("editor-modal"); - - cancelBtn.addEventListener("click", closeEditor); - deleteBtn.addEventListener("click", deleteFile); - saveBtn.addEventListener("click", saveFile); - - // Close on overlay click - modal.addEventListener("click", (e) => { - if (e.target === modal) { - closeEditor(); - } - }); - - // ESC to close - document.addEventListener("keydown", (e) => { - if (e.key === "Escape" && modal.classList.contains("active")) { - closeEditor(); - } - }); - - // Fix mouse wheel scrolling in editor - modal.addEventListener( - "wheel", - (e) => { - const editorBody = document.getElementById("editor-body"); - if (editorBody && editorBody.contains(e.target)) { - // Let the editor handle the scroll - return; - } - // Prevent modal from scrolling if not in editor area - e.preventDefault(); - }, - { passive: false }, - ); -} - - // --------------------------------------------------------------------------- // SSE Client — IndexUpdateManager // --------------------------------------------------------------------------- @@ -1082,15 +1216,15 @@ const IndexUpdateManager = (() => { // Toast removed: silent auto-indexing — no notification needed // Refresh sidebar and tags if affected vault matches current context - const affectsCurrentVault = state.selectedContextVault === "all" || (data.vaults || []).includes(state.selectedContextVault); + const affectsCurrentVault = selectedContextVault === "all" || (data.vaults || []).includes(selectedContextVault); if (affectsCurrentVault) { try { await Promise.all([refreshSidebarTreePreservingState(), refreshTagsForContext()]); // Refresh current file if it was updated - if (currentVault && state.currentPath) { - const changed = (data.changes || []).some((c) => c.vault === currentVault && c.path === state.currentPath); + if (currentVault && currentPath) { + const changed = (data.changes || []).some((c) => c.vault === currentVault && c.path === currentPath); if (changed) { - openFile(state.currentVault, state.currentPath); + openFile(currentVault, currentPath); } } } catch (err) { @@ -1099,7 +1233,7 @@ const IndexUpdateManager = (() => { } // Refresh recent tab if it is active - if (state.activeSidebarTab === "recent") { + if (activeSidebarTab === "recent") { const vaultFilter = document.getElementById("recent-vault-filter"); loadRecentFiles(vaultFilter ? vaultFilter.value || null : null); } @@ -1249,7 +1383,4 @@ function _renderSyncPanel(panel) { } panel.innerHTML = html; -} - -export { OutlineManager, ScrollSpyManager, ReadingProgressManager, openFile, buildFrontmatterCard, initEditor }; - +} \ No newline at end of file