john-okeefe
d78a182f0d
On viewports below 970px the header now collapses to a compact bar with only the Bookhoard logo and a hamburger button. Clicking the hamburger reveals a slide-down panel containing: - Full-text search input (wired to the existing debounced search API) - Navigation links (Library, All Books, Series, Collections, Progress, Devices) - Collapsible theme switcher with all 7 themes and 4 bookshelf backgrounds - User section: profile/admin/logout when logged in, inline login form when logged out Changes: - templates/header.templ: add hamburger button, mobile panel with all controls, hide desktop search/theme/user controls below nav breakpoint - web/src/header.ts: add mobileMenuOpen state to Alpine header component - web/src/search.ts: refactor initializeSearch to wire both desktop and mobile search inputs, track active input for results container placement - tailwind.config.ts: add custom 'nav' screen breakpoint at 970px so the mobile menu activates before the search bar becomes unusable - web/static/style.css: rebuilt with new nav breakpoint utility classes
106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
import { Alpine } from "./alpine";
|
|
import { initializeSearch } from "./search";
|
|
import {
|
|
initializeTheme,
|
|
changeTheme,
|
|
changeWoodPaneling,
|
|
loadWoodPaneling,
|
|
updateWoodPanelingIndicators,
|
|
} from "./theme";
|
|
import { getSelectedLibrary } from "./storage";
|
|
import { addListener, removeListener } from "./websocket";
|
|
|
|
const logout = (): void => {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("user");
|
|
window.location.href = "/";
|
|
};
|
|
|
|
const restoreLibrarySelection = (): void => {
|
|
const savedLibrary = getSelectedLibrary();
|
|
if (!savedLibrary) return;
|
|
|
|
const dropdownSelectors = [
|
|
"#library-select",
|
|
"#selected-library",
|
|
"#library_id",
|
|
];
|
|
|
|
for (const selector of dropdownSelectors) {
|
|
const dropdown = document.querySelector(selector) as HTMLSelectElement;
|
|
if (dropdown) {
|
|
const option = dropdown.querySelector(`option[value="${savedLibrary}"]`);
|
|
if (option) {
|
|
dropdown.value = savedLibrary;
|
|
dropdown.dispatchEvent(new Event("change", { bubbles: true }));
|
|
console.log("Restored library selection:", savedLibrary);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const initializeScanListener = function (this: any) {
|
|
const handler = (message: any) => {
|
|
switch (message.type) {
|
|
case "scan_progress":
|
|
this.scanning = true;
|
|
this.scanProgress = Math.round((message.data.progress || 0) * 100);
|
|
this.scanNewItems = message.data.new_items || 0;
|
|
this.scanFilesScanned = message.data.files_scanned || 0;
|
|
break;
|
|
case "scan_complete":
|
|
this.scanning = false;
|
|
this.scanProgress = 100;
|
|
this.scanNewItems = message.data?.new_items || this.scanNewItems;
|
|
window.dispatchEvent(
|
|
new CustomEvent("bookhoard:scan-complete", {
|
|
detail: message.data,
|
|
}),
|
|
);
|
|
setTimeout(() => {
|
|
this.scanProgress = 0;
|
|
this.scanNewItems = 0;
|
|
this.scanFilesScanned = 0;
|
|
}, 3000);
|
|
break;
|
|
case "scan_error":
|
|
this.scanning = false;
|
|
this.scanProgress = 0;
|
|
break;
|
|
}
|
|
};
|
|
|
|
addListener(handler);
|
|
|
|
const headerEl = document.querySelector("[x-data='header']");
|
|
if (headerEl) {
|
|
const observer = new MutationObserver(() => {
|
|
if (!document.contains(headerEl)) {
|
|
removeListener(handler);
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
}
|
|
};
|
|
|
|
export { logout, restoreLibrarySelection };
|
|
|
|
Alpine.data("header", () => ({
|
|
mobileMenuOpen: false,
|
|
logout,
|
|
initializeSearch,
|
|
initializeTheme,
|
|
changeTheme,
|
|
changeWoodPaneling,
|
|
loadWoodPaneling,
|
|
updateWoodPanelingIndicators,
|
|
restoreLibrarySelection,
|
|
initializeScanListener,
|
|
scanning: false,
|
|
scanProgress: 0,
|
|
scanNewItems: 0,
|
|
scanFilesScanned: 0,
|
|
}));
|