feat(web): update frontend TypeScript modules and API types
This commit updates the web frontend TypeScript modules: Core modules: - admin.ts: Admin panel functionality and user management - analytics.ts: Analytics dashboard and data visualization - api-explorer.ts: Interactive API documentation explorer - api.ts: Core API client with request/response handling - collections.ts: Book collection management UI - conflicts.ts: Sync conflict resolution interface - custom-section-builder.ts: Dynamic section builder for UI - docs.ts: Documentation viewer and navigation - dom.ts: DOM manipulation utilities and helpers - header.ts: Application header with navigation - library.ts: Library view and book grid management - linking.ts: Device-book linking interface - password_validation.ts: Client-side password strength validation - queue.ts: Device sync queue management UI - search.ts: Full-text search with Lunr integration - storage.ts: Local storage and cache management - theme.ts: Theme management and CSS variable updates - themeDropdown.ts: Theme selector dropdown component - toast.ts: Toast notification system - woodPaneling.ts: Visual theme effects - woodPanelingInit.ts: Visual effects initialization Type definitions: - api.d.ts: Updated TypeScript definitions for API responses These updates enhance the frontend with improved functionality for book management, device synchronization, and user experience.
This commit is contained in:
+65
-57
@@ -1,86 +1,94 @@
|
||||
function toggleSidebar(): void {
|
||||
const sidebar = document.getElementById('docs-sidebar');
|
||||
const overlay = document.getElementById('docs-overlay');
|
||||
const sidebar = document.getElementById("docs-sidebar");
|
||||
const overlay = document.getElementById("docs-overlay");
|
||||
|
||||
if (sidebar && overlay) {
|
||||
sidebar.classList.toggle('translate-x-0');
|
||||
sidebar.classList.toggle('-translate-x-full');
|
||||
overlay.classList.toggle('hidden');
|
||||
}
|
||||
if (sidebar && overlay) {
|
||||
sidebar.classList.toggle("translate-x-0");
|
||||
sidebar.classList.toggle("-translate-x-full");
|
||||
overlay.classList.toggle("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function initializeDocsSearch(): void {
|
||||
const searchInput = document.getElementById('docs-search') as HTMLInputElement;
|
||||
const searchResults = document.getElementById('docs-search-results');
|
||||
const searchInput = document.getElementById(
|
||||
"docs-search",
|
||||
) as HTMLInputElement;
|
||||
const searchResults = document.getElementById("docs-search-results");
|
||||
|
||||
if (!searchInput || !searchResults) return;
|
||||
if (!searchInput || !searchResults) return;
|
||||
|
||||
let docsSearchTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
let docsSearchTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
searchInput.addEventListener('input', () => {
|
||||
const query = searchInput.value.trim();
|
||||
searchInput.addEventListener("input", () => {
|
||||
const query = searchInput.value.trim();
|
||||
|
||||
if (docsSearchTimeout) {
|
||||
clearTimeout(docsSearchTimeout);
|
||||
}
|
||||
if (docsSearchTimeout) {
|
||||
clearTimeout(docsSearchTimeout);
|
||||
}
|
||||
|
||||
if (query.length < 2) {
|
||||
searchResults.innerHTML = '';
|
||||
searchResults.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
if (query.length < 2) {
|
||||
searchResults.innerHTML = "";
|
||||
searchResults.classList.add("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
docsSearchTimeout = setTimeout(() => {
|
||||
performDocsSearch(query);
|
||||
}, 300);
|
||||
});
|
||||
docsSearchTimeout = setTimeout(() => {
|
||||
performDocsSearch(query);
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
function performDocsSearch(query: string): void {
|
||||
const searchResults = document.getElementById('docs-search-results');
|
||||
if (!searchResults) return;
|
||||
const searchResults = document.getElementById("docs-search-results");
|
||||
if (!searchResults) return;
|
||||
|
||||
if (!(window as any).lunr) {
|
||||
console.warn('Lunr.js not loaded');
|
||||
return;
|
||||
if (!(window as any).lunr) {
|
||||
console.warn("Lunr.js not loaded");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const idx = (window as any).lunrIndex;
|
||||
if (!idx) {
|
||||
searchResults.innerHTML =
|
||||
'<p class="p-2 text-sm" style="color: var(--text-secondary)">Search index not loaded</p>';
|
||||
searchResults.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const idx = (window as any).lunrIndex;
|
||||
if (!idx) {
|
||||
searchResults.innerHTML = '<p class="p-2 text-sm" style="color: var(--text-secondary)">Search index not loaded</p>';
|
||||
searchResults.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
const results = idx.search(query);
|
||||
|
||||
const results = idx.search(query);
|
||||
if (results.length === 0) {
|
||||
searchResults.innerHTML =
|
||||
'<p class="p-2 text-sm" style="color: var(--text-secondary)">No results found</p>';
|
||||
} else {
|
||||
searchResults.innerHTML = results
|
||||
.slice(0, 10)
|
||||
.map((result: { ref: string }) => {
|
||||
const doc = (window as any).docsData?.[result.ref];
|
||||
if (!doc) return "";
|
||||
|
||||
if (results.length === 0) {
|
||||
searchResults.innerHTML = '<p class="p-2 text-sm" style="color: var(--text-secondary)">No results found</p>';
|
||||
} else {
|
||||
searchResults.innerHTML = results.slice(0, 10).map((result: { ref: string }) => {
|
||||
const doc = (window as any).docsData?.[result.ref];
|
||||
if (!doc) return '';
|
||||
|
||||
return `
|
||||
return `
|
||||
<a href="${result.ref}" class="block p-2 hover:bg-opacity-50 transition-colors" style="background-color: var(--bg-secondary)">
|
||||
<p class="font-medium text-sm" style="color: var(--text-primary)">${doc.title || result.ref}</p>
|
||||
${doc.section ? `<p class="text-xs" style="color: var(--text-secondary)">${doc.section}</p>` : ''}
|
||||
${doc.section ? `<p class="text-xs" style="color: var(--text-secondary)">${doc.section}</p>` : ""}
|
||||
</a>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
searchResults.classList.remove('hidden');
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
searchResults.innerHTML = '<p class="p-2 text-sm" style="color: var(--text-secondary)">Search error</p>';
|
||||
searchResults.classList.remove('hidden');
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
searchResults.classList.remove("hidden");
|
||||
} catch (error) {
|
||||
console.error("Search error:", error);
|
||||
searchResults.innerHTML =
|
||||
'<p class="p-2 text-sm" style="color: var(--text-secondary)">Search error</p>';
|
||||
searchResults.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initializeDocsSearch();
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeDocsSearch();
|
||||
});
|
||||
|
||||
(window as any).toggleSidebar = toggleSidebar;
|
||||
|
||||
Reference in New Issue
Block a user