HermesFactory/cloud-reader
Archived
4
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mobile book search and discovery with voice search, suggestions, and responsive layout

Browse Source
This commit is contained in:
Marko (Hermes Implementer)
2026-05-29 02:55:50 +00:00
parent 332b539880
commit 658f77a746
8 changed files with 854 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Library.tsx
+324 -63
View File
@@ -4,6 +4,9 @@ import { booksApi } from "../api/books";
import type { BookListItem, BookSearchParams } from "../types/book";
import { READING_STATUS_OPTIONS } from "../types/book";
import { useAuth } from "../context/AuthContext";
import { useVoiceSearch } from "../hooks/useVoiceSearch";
import { useMediaQuery, BREAKPOINTS } from "../hooks/useMediaQuery";
import { SearchSuggestions } from "../components/search/SearchSuggestions";
interface FilterState {
genre: string;
@@ -20,6 +23,15 @@ function useDebounce<T>(value: T, delay: number): T {
return debounced;
}
/** WCAG 2.1 minimum touch target */
const TOUCH_TARGET: React.CSSProperties = {
minHeight: 44,
minWidth: 44,
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
};
export function LibraryPage() {
const navigate = useNavigate();
const { logout } = useAuth();
@@ -33,9 +45,23 @@ export function LibraryPage() {
const [authors, setAuthors] = useState<string[]>([]);
const [totalCount, setTotalCount] = useState(0);
const [showFilters, setShowFilters] = useState(false);
const [showSuggestions, setShowSuggestions] = useState(false);
const debouncedSearch = useDebounce(searchQuery, 300);
const loadedRef = useRef(false);
const searchInputRef = useRef<HTMLInputElement>(null);
const isMobile = useMediaQuery(BREAKPOINTS.md);
// Voice search
const voiceSearch = useVoiceSearch();
// Sync voice transcript into search input
useEffect(() => {
if (voiceSearch.transcript && !voiceSearch.isListening) {
setSearchQuery(voiceSearch.transcript);
setShowSuggestions(false);
}
}, [voiceSearch.transcript, voiceSearch.isListening]);
// Load filter options once
useEffect(() => {
@@ -79,114 +105,303 @@ export function LibraryPage() {
}, [debouncedSearch, filters, loadBooks]);
const handleFilterChange = (key: keyof FilterState, value: string) => {
setFilters((prev) => ({ ...prev, [key]: value }));
setFilters((prev: FilterState) => ({ ...prev, [key]: value }));
};
const clearAllFilters = () => {
setSearchQuery("");
setFilters({ genre: "", author: "", reading_status: "" });
setShowFilters(false);
};
const hasActiveFilters = !!searchQuery || !!filters.genre || !!filters.author || !!filters.reading_status;
const containerStyle: React.CSSProperties = {
maxWidth: 960,
margin: "0 auto",
padding: isMobile ? 12 : 16,
minHeight: "100vh",
background: "#f8f9fa",
};
const headerStyle: React.CSSProperties = {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: isMobile ? 12 : 20,
padding: isMobile ? "12px 0" : "16px 0",
borderBottom: "1px solid #e5e7eb",
flexWrap: "wrap",
gap: 8,
};
const searchContainerStyle: React.CSSProperties = {
position: "relative",
flex: 1,
};
return (
<div style={{ maxWidth: 960, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
<div style={containerStyle}>
{/* Header */}
<header style={{
display: "flex", justifyContent: "space-between", alignItems: "center",
marginBottom: 20, padding: "16px 0", borderBottom: "1px solid #e5e7eb", flexWrap: "wrap", gap: 8,
}}>
<header style={headerStyle}>
<div>
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>Library</h1>
{!loading && <p style={{ fontSize: 13, color: "#6b7280", marginTop: 2 }}>{totalCount} book{totalCount !== 1 ? "s" : ""}</p>}
<h1 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>Library</h1>
{!loading && (
<p style={{ fontSize: 13, color: "#6b7280", marginTop: 2 }}>
{totalCount} book{totalCount !== 1 ? "s" : ""}
</p>
)}
</div>
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
<button onClick={() => navigate("/add")} className="btn">+ Add Book</button>
<button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">Bookmarks</button>
<button onClick={() => navigate("/settings")} className="btn btn-secondary">Settings</button>
<button onClick={logout} className="btn btn-danger">Logout</button>
<div style={{ display: "flex", gap: isMobile ? 4 : 8, flexWrap: "wrap", alignItems: "center" }}>
{isMobile ? (
<>
<button onClick={() => navigate("/add")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Add Book">➕</button>
<button onClick={() => navigate("/bookmarks-notes")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Bookmarks">🔖</button>
<button onClick={() => navigate("/settings")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Settings">⚙️</button>
<button onClick={logout} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Logout">🚪</button>
</>
) : (
<>
<button onClick={() => navigate("/add")} className="btn">+ Add Book</button>
<button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">Bookmarks</button>
<button onClick={() => navigate("/settings")} className="btn btn-secondary">Settings</button>
<button onClick={logout} className="btn btn-danger">Logout</button>
</>
)}
</div>
</header>
{/* Search Bar */}
<div style={{ marginBottom: 16 }}>
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<div style={{ flex: 1, position: "relative" }}>
<div style={searchContainerStyle}>
<input
ref={searchInputRef}
type="text"
placeholder="Search by title, author, or genre..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onChange={(e) => {
setSearchQuery(e.target.value);
setShowSuggestions(true);
}}
onFocus={() => setShowSuggestions(true)}
style={{
width: "100%", padding: "12px 16px 12px 44px", borderRadius: 10,
border: "1px solid #e5e7eb", fontSize: 15, background: "#fff",
outline: "none", boxSizing: "border-box",
width: "100%",
padding: `12px 16px 12px ${voiceSearch.isSupported ? 44 : 44}px`,
paddingRight: voiceSearch.isSupported ? 48 : 16,
borderRadius: 10,
border: "1px solid #e5e7eb",
fontSize: isMobile ? 16 : 15,
background: "#fff",
outline: "none",
boxSizing: "border-box",
minHeight: 44,
}}
/>
<span style={{
position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)",
fontSize: 18, color: "#9ca3af", pointerEvents: "none",
}}>🔍</span>
{/* Voice Search Button */}
{voiceSearch.isSupported && (
<button
onClick={() => {
if (voiceSearch.isListening) {
voiceSearch.stopListening();
} else {
voiceSearch.startListening();
}
}}
style={{
position: "absolute",
right: 8,
top: "50%",
transform: "translateY(-50%)",
background: voiceSearch.isListening ? "#dc2626" : "transparent",
border: "none",
borderRadius: 8,
cursor: "pointer",
fontSize: 20,
padding: "8px 8px",
minWidth: 36,
minHeight: 36,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: voiceSearch.isListening ? "#fff" : "#6b7280",
transition: "background 0.15s",
}}
title={voiceSearch.isListening ? "Stop listening" : "Search with voice"}
>
🎤
</button>
)}
{/* Real-time Suggestions */}
<SearchSuggestions
query={searchQuery}
visible={showSuggestions && !voiceSearch.isListening}
onClose={() => setShowSuggestions(false)}
onSelectSuggestion={() => setShowSuggestions(false)}
/>
</div>
<button
onClick={() => setShowFilters(!showFilters)}
className={`btn ${showFilters ? "" : "btn-secondary"}`}
title="Toggle filters"
style={{
...TOUCH_TARGET,
padding: "0 12px",
borderRadius: 8,
border: "1px solid #e5e7eb",
background: showFilters ? "#4f46e5" : "#fff",
color: showFilters ? "#fff" : "#374151",
fontSize: 13,
fontWeight: 600,
cursor: "pointer",
whiteSpace: "nowrap",
gap: 4,
}}
>
{showFilters ? "▲ Filters" : "▼ Filters"}
{isMobile ? "⚙️" : showFilters ? "▲ Filters" : "▼ Filters"}
</button>
</div>
</div>
{/* Voice search listening indicator */}
{voiceSearch.isListening && (
<div style={{
background: "#fef2f2",
padding: "10px 16px",
borderRadius: 8,
marginBottom: 12,
display: "flex",
alignItems: "center",
gap: 8,
fontSize: 14,
color: "#dc2626",
}}>
<span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: "#dc2626", animation: "pulse 1s infinite" }} />
Listening... speak now
<button
onClick={voiceSearch.stopListening}
style={{
marginLeft: "auto",
background: "#dc2626",
color: "#fff",
border: "none",
borderRadius: 4,
padding: "4px 12px",
cursor: "pointer",
fontSize: 12,
}}
>
Stop
</button>
</div>
)}
{/* Voice search error */}
{voiceSearch.hasError && !voiceSearch.isListening && (
<div style={{
background: "#fef3c7",
padding: "8px 12px",
borderRadius: 8,
marginBottom: 12,
fontSize: 13,
color: "#92400e",
}}>
Voice search: {voiceSearch.errorMessage === "no-speech" ? "No speech detected. Try again." : voiceSearch.errorMessage}
</div>
)}
{/* Filters Panel */}
{showFilters && (
<div style={{
background: "#fff", borderRadius: 10, padding: 16, marginBottom: 16,
border: "1px solid #e5e7eb", display: "flex", gap: 12, flexWrap: "wrap", alignItems: "end",
background: "#fff",
borderRadius: 10,
padding: isMobile ? 12 : 16,
marginBottom: 16,
border: "1px solid #e5e7eb",
display: "flex",
flexDirection: isMobile ? "column" : "row",
gap: 12,
alignItems: isMobile ? "stretch" : "end",
}}>
<div style={{ minWidth: 160, flex: 1 }}>
<div style={{ minWidth: isMobile ? 0 : 160, flex: 1 }}>
<label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>Genre</label>
<select
value={filters.genre}
onChange={(e) => handleFilterChange("genre", e.target.value)}
style={{
width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
fontSize: 14, background: "#fff", cursor: "pointer",
width: "100%",
padding: "8px 12px",
borderRadius: 6,
border: "1px solid #e5e7eb",
fontSize: 14,
background: "#fff",
cursor: "pointer",
minHeight: 36,
}}
>
<option value="">All Genres</option>
{genres.map((g) => <option key={g} value={g}>{g}</option>)}
</select>
</div>
<div style={{ minWidth: 160, flex: 1 }}>
<div style={{ minWidth: isMobile ? 0 : 160, flex: 1 }}>
<label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>Author</label>
<select
value={filters.author}
onChange={(e) => handleFilterChange("author", e.target.value)}
style={{
width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
fontSize: 14, background: "#fff", cursor: "pointer",
width: "100%",
padding: "8px 12px",
borderRadius: 6,
border: "1px solid #e5e7eb",
fontSize: 14,
background: "#fff",
cursor: "pointer",
minHeight: 36,
}}
>
<option value="">All Authors</option>
{authors.map((a) => <option key={a} value={a}>{a}</option>)}
</select>
</div>
<div style={{ minWidth: 160, flex: 1 }}>
<div style={{ minWidth: isMobile ? 0 : 160, flex: 1 }}>
<label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>Status</label>
<select
value={filters.reading_status}
onChange={(e) => handleFilterChange("reading_status", e.target.value)}
style={{
width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
fontSize: 14, background: "#fff", cursor: "pointer",
width: "100%",
padding: "8px 12px",
borderRadius: 6,
border: "1px solid #e5e7eb",
fontSize: 14,
background: "#fff",
cursor: "pointer",
minHeight: 36,
}}
>
{READING_STATUS_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
</select>
</div>
{hasActiveFilters && (
<button onClick={clearAllFilters} className="btn btn-secondary" style={{ whiteSpace: "nowrap" }}>
<button
onClick={clearAllFilters}
style={{
...TOUCH_TARGET,
padding: "8px 16px",
borderRadius: 6,
border: "1px solid #e5e7eb",
background: "#fff",
color: "#6b7280",
fontSize: 13,
cursor: "pointer",
whiteSpace: "nowrap",
width: isMobile ? "100%" : "auto",
}}
>
✕ Clear
</button>
)}
@@ -197,16 +412,21 @@ export function LibraryPage() {
{error && (
<div style={{ background: "#fef2f2", padding: 16, borderRadius: 8, marginBottom: 16, textAlign: "center" }}>
<p style={{ color: "#dc2626", fontSize: 14 }}>{error}</p>
<button onClick={() => void loadBooks({})} style={{ marginTop: 8, padding: "8px 16px", border: "none", borderRadius: 6, background: "#dc2626", color: "#fff", cursor: "pointer", fontSize: 13 }}>Retry</button>
<button onClick={() => void loadBooks({})} style={{ marginTop: 8, padding: "8px 16px", border: "none", borderRadius: 6, background: "#dc2626", color: "#fff", cursor: "pointer", fontSize: 13, minHeight: 36 }}>Retry</button>
</div>
)}
{/* Loading State */}
{loading && (
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16, opacity: 0.6 }}>
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}>
<div style={{ height: 180, background: "#f0f0f0" }} />
<div style={{
display: "grid",
gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fill, minmax(200px, 1fr))",
gap: isMobile ? 12 : 16,
opacity: 0.6,
}}>
{Array.from({ length: isMobile ? 4 : 8 }).map((_, i) => (
<div key={i} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)", display: isMobile ? "flex" : "block" }}>
<div style={{ width: isMobile ? 80 : "100%", height: isMobile ? 120 : 180, background: "#f0f0f0", flexShrink: 0 }} />
<div style={{ padding: 12 }}>
<div style={{ height: 14, background: "#f0f0f0", borderRadius: 4, marginBottom: 6, width: "70%" }} />
<div style={{ height: 12, background: "#f0f0f0", borderRadius: 4, width: "40%" }} />
@@ -218,9 +438,9 @@ export function LibraryPage() {
{/* Empty State */}
{!loading && !error && books.length === 0 && (
<div style={{ textAlign: "center", padding: "80px 20px" }}>
<div style={{ fontSize: 64, marginBottom: 16 }}>{hasActiveFilters ? "🔍" : "📚"}</div>
<h2 style={{ fontSize: 20, color: "#1f2937", marginBottom: 8 }}>
<div style={{ textAlign: "center", padding: isMobile ? "60px 16px" : "80px 20px" }}>
<div style={{ fontSize: isMobile ? 48 : 64, marginBottom: 16 }}>{hasActiveFilters ? "🔍" : "📚"}</div>
<h2 style={{ fontSize: isMobile ? 18 : 20, color: "#1f2937", marginBottom: 8 }}>
{hasActiveFilters ? "No books found" : "Your library is empty"}
</h2>
<p style={{ color: "#6b7280", marginBottom: 20, fontSize: 15, lineHeight: 1.5 }}>
@@ -229,11 +449,11 @@ export function LibraryPage() {
: "Add a book to get started building your collection."}
</p>
{hasActiveFilters ? (
<button onClick={clearAllFilters} className="btn" style={{ padding: "10px 24px" }}>
<button onClick={clearAllFilters} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>
Clear All Filters
</button>
) : (
<button onClick={() => navigate("/add")} className="btn" style={{ padding: "10px 24px" }}>
<button onClick={() => navigate("/add")} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>
Add Your First Book
</button>
)}
@@ -242,7 +462,11 @@ export function LibraryPage() {
{/* Results Grid */}
{!loading && books.length > 0 && (
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16 }}>
<div style={{
display: "grid",
gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fill, minmax(200px, 1fr))",
gap: isMobile ? 12 : 16,
}}>
{books.map((book) => {
const statusColors: Record<string, { bg: string; text: string }> = {
want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
@@ -257,9 +481,14 @@ export function LibraryPage() {
key={book.id}
onClick={() => navigate(`/books/${book.id}`)}
style={{
background: "#fff", borderRadius: 12, overflow: "hidden",
boxShadow: "0 2px 8px rgba(0,0,0,0.06)", cursor: "pointer",
background: "#fff",
borderRadius: 12,
overflow: "hidden",
boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
cursor: "pointer",
transition: "transform 0.15s, box-shadow 0.15s",
display: isMobile ? "flex" : "block",
minHeight: isMobile ? undefined : undefined,
}}
onMouseEnter={(e) => {
(e.currentTarget as HTMLElement).style.transform = "translateY(-2px)";
@@ -270,27 +499,59 @@ export function LibraryPage() {
(e.currentTarget as HTMLElement).style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
}}
>
<div style={{ height: 180, background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
<div style={{
width: isMobile ? 80 : "100%",
height: isMobile ? 120 : 180,
background: "#f0f0f0",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
flexShrink: 0,
}}>
{book.cover_image
? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
: <span style={{ fontSize: 48 }}>📖</span>}
<span style={{
position: "absolute", top: 8, right: 8,
background: sc.bg, color: sc.text, fontSize: 11, fontWeight: 600,
padding: "2px 8px", borderRadius: 999, lineHeight: "18px",
}}>
{book.reading_status_display}
</span>
: <span style={{ fontSize: isMobile ? 32 : 48 }}>📖</span>}
{!isMobile && (
<span style={{
position: "absolute", top: 8, right: 8,
background: sc.bg, color: sc.text, fontSize: 11, fontWeight: 600,
padding: "2px 8px", borderRadius: 999, lineHeight: "18px",
}}>
{book.reading_status_display}
</span>
)}
</div>
<div style={{ padding: 12 }}>
<h3 style={{ fontSize: 14, fontWeight: 600, color: "#1f2937", marginBottom: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
{book.title}
</h3>
<p style={{ fontSize: 12, color: "#6b7280", marginBottom: 4 }}>
{book.author || "Unknown Author"}
</p>
<div style={{ padding: isMobile ? "8px 12px" : 12, flex: 1 }}>
<div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
<div style={{ minWidth: 0, flex: 1 }}>
<h3 style={{
fontSize: isMobile ? 14 : 14,
fontWeight: 600,
color: "#1f2937",
marginBottom: 2,
margin: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}>
{book.title}
</h3>
<p style={{ fontSize: 12, color: "#6b7280", marginBottom: 4, margin: "2px 0" }}>
{book.author || "Unknown Author"}
</p>
</div>
{isMobile && (
<span style={{
background: sc.bg, color: sc.text, fontSize: 10, fontWeight: 600,
padding: "2px 6px", borderRadius: 999, whiteSpace: "nowrap", flexShrink: 0,
}}>
{book.reading_status_display}
</span>
)}
</div>
{book.genre && (
<span style={{ fontSize: 11, color: "#4f46e5", background: "#eef2ff", padding: "1px 6px", borderRadius: 4 }}>
<span style={{ fontSize: 11, color: "#4f46e5", background: "#eef2ff", padding: "1px 6px", borderRadius: 4, display: "inline-block", marginTop: 4 }}>
{book.genre}
</span>
)}