Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat(web): update frontend TypeScript modules and API types

Browse Source 
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:
john-okeefe
2026-02-27 17:06:48 -05:00
parent 4d321528b2
commit ea5ad7a41b
22 changed files with 3133 additions and 2737 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/woodPaneling.ts
+59 -53
View File
@@ -1,70 +1,76 @@
// Wood paneling management functionality
type WoodPanelingType = 'none' | 'wood-light' | 'wood-dark' | 'wood-mahogany';
type WoodPanelingType = "none" | "wood-light" | "wood-dark" | "wood-mahogany";
const WOOD_STORAGE_KEY = 'wood-paneling';
const WOOD_STORAGE_KEY = "wood-paneling";
// Apply wood paneling to collections container
const applyWoodPaneling = (paneling: WoodPanelingType): void => {
const container = document.getElementById('collections-container');
if (!container) return;
const container = document.getElementById("collections-container");
if (!container) return;
// Remove all wood background classes
container.classList.remove('bg-wood-light', 'bg-wood-dark', 'bg-wood-mahogany');
container.removeAttribute('data-wood');
// Remove all wood background classes
container.classList.remove(
"bg-wood-light",
"bg-wood-dark",
"bg-wood-mahogany",
);
container.removeAttribute("data-wood");
if (paneling !== 'none') {
// Add selected wood background class
container.classList.add(`bg-${paneling}`);
container.setAttribute('data-wood', paneling);
}
if (paneling !== "none") {
// Add selected wood background class
container.classList.add(`bg-${paneling}`);
container.setAttribute("data-wood", paneling);
}
// Save to localStorage
localStorage.setItem(WOOD_STORAGE_KEY, paneling);
// Save to localStorage
localStorage.setItem(WOOD_STORAGE_KEY, paneling);
};
// Load wood paneling from localStorage on page load
const loadWoodPaneling = (): void => {
const stored = localStorage.getItem(WOOD_STORAGE_KEY) as WoodPanelingType | null;
if (stored) {
applyWoodPaneling(stored);
} else {
// Default to none
applyWoodPaneling('none');
}
const stored = localStorage.getItem(
WOOD_STORAGE_KEY,
) as WoodPanelingType | null;
if (stored) {
applyWoodPaneling(stored);
} else {
// Default to none
applyWoodPaneling("none");
}
};
// Change wood paneling (called from theme dropdown)
const changeWoodPaneling = (paneling: WoodPanelingType): void => {
applyWoodPaneling(paneling);
applyWoodPaneling(paneling);
// Update active indicators
updateWoodPanelingIndicators();
// Update active indicators
updateWoodPanelingIndicators();
// Close dropdown
const dropdown = document.getElementById('theme-dropdown');
if (dropdown) {
dropdown.classList.add('hidden');
}
// Close dropdown
const dropdown = document.getElementById("theme-dropdown");
if (dropdown) {
dropdown.classList.add("hidden");
}
};
// Update visual indicators for wood paneling buttons
const updateWoodPanelingIndicators = (): void => {
const currentWood = localStorage.getItem(WOOD_STORAGE_KEY) || 'none';
const currentWood = localStorage.getItem(WOOD_STORAGE_KEY) || "none";
// Update wood paneling buttons
document.querySelectorAll('.wood-paneling-btn').forEach(btn => {
const wood = btn.getAttribute('data-wood');
if (wood === currentWood) {
// Active state - use CSS class instead of inline style
btn.classList.add('bg-wood-active');
btn.classList.remove('bg-wood-inactive');
} else {
// Inactive state
btn.classList.remove('bg-wood-active');
btn.classList.add('bg-wood-inactive');
}
});
// Update wood paneling buttons
document.querySelectorAll(".wood-paneling-btn").forEach((btn) => {
const wood = btn.getAttribute("data-wood");
if (wood === currentWood) {
// Active state - use CSS class instead of inline style
btn.classList.add("bg-wood-active");
btn.classList.remove("bg-wood-inactive");
} else {
// Inactive state
btn.classList.remove("bg-wood-active");
btn.classList.add("bg-wood-inactive");
}
});
};
// Make functions available globally
@@ -73,14 +79,14 @@ const updateWoodPanelingIndicators = (): void => {
(window as any).updateWoodPanelingIndicators = updateWoodPanelingIndicators;
// Auto-initialize when DOM is ready
if (typeof document !== 'undefined') {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
loadWoodPaneling();
updateWoodPanelingIndicators();
});
} else {
loadWoodPaneling();
updateWoodPanelingIndicators();
}
if (typeof document !== "undefined") {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
loadWoodPaneling();
updateWoodPanelingIndicators();
});
} else {
loadWoodPaneling();
updateWoodPanelingIndicators();
}
}