Archived
feat: book search and discovery with real-time search, filters, and detail view
This commit is contained in:
Marko (Hermes Implementer)
@@ -3,6 +3,7 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||
import { AuthProvider, useAuth } from "./context/AuthContext";
|
||||
|
||||
const LibraryPage = lazy(() => import("./pages/Library").then((m) => ({ default: m.LibraryPage })));
|
||||
const BookDetailPage = lazy(() => import("./pages/BookDetailPage").then((m) => ({ default: m.BookDetailPage })));
|
||||
const ReaderPage = lazy(() => import("./pages/Reader").then((m) => ({ default: m.ReaderPage })));
|
||||
const AddBookPage = lazy(() => import("./pages/AddBook").then((m) => ({ default: m.AddBookPage })));
|
||||
const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ default: m.SettingsPage })));
|
||||
@@ -35,6 +36,7 @@ function AppRoutes() {
|
||||
<Routes>
|
||||
<Route path="/auth" element={isAuthenticated ? <Navigate to="/" replace /> : <AuthPage />} />
|
||||
<Route path="/" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
|
||||
<Route path="/books/:id" element={<ProtectedRoute><BookDetailPage /></ProtectedRoute>} />
|
||||
<Route path="/reader/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
|
||||
<Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
|
||||
<Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import api from "./client";
|
||||
import type { EBookDetail, EBookListItem, ReadingProgress, ReadingSettings } from "../types/book";
|
||||
import type { ContentResponse, EBookDetail, EBookListItem, ReadingProgress, ReadingSettings, TocResponse } from "../types/book";
|
||||
|
||||
export const booksApi = {
|
||||
async getEBooks(): Promise<EBookListItem[]> {
|
||||
@@ -34,6 +34,21 @@ export const booksApi = {
|
||||
await api.delete(`/books/ebooks/${id}/`);
|
||||
},
|
||||
|
||||
async processEBook(id: number): Promise<{ status: string }> {
|
||||
const { data } = await api.post<{ status: string }>(`/books/ebooks/${id}/process/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getToc(id: number): Promise<TocResponse> {
|
||||
const { data } = await api.get<TocResponse>(`/books/ebooks/${id}/toc/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getContent(id: number, page: number): Promise<ContentResponse> {
|
||||
const { data } = await api.get<ContentResponse>(`/books/ebooks/${id}/content/?page=${page}`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getProgress(ebookId: number): Promise<ReadingProgress> {
|
||||
const { data } = await api.get<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`);
|
||||
return data;
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { BookDetail } from "../types/book";
|
||||
|
||||
export function BookDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [book, setBook] = useState<BookDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadBook = useCallback(async () => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const bookId = Number(id);
|
||||
if (Number.isNaN(bookId)) {
|
||||
setError("Invalid book ID");
|
||||
return;
|
||||
}
|
||||
const data = await booksApi.getBook(bookId);
|
||||
setBook(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load book details");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadBook();
|
||||
}, [loadBook]);
|
||||
|
||||
const statusColors: Record<string, { bg: string; text: string }> = {
|
||||
want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
|
||||
reading: { bg: "#dcfce7", text: "#16a34a" },
|
||||
finished: { bg: "#f3e8ff", text: "#9333ea" },
|
||||
dnf: { bg: "#fef3c7", text: "#b45309" },
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<div style={{ height: 32, width: 80, background: "#e5e7eb", borderRadius: 6, marginBottom: 24 }} />
|
||||
<div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
|
||||
<div style={{ width: 240, height: 360, background: "#e5e7eb", borderRadius: 12, flexShrink: 0 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ height: 28, background: "#e5e7eb", borderRadius: 6, marginBottom: 12, width: "60%" }} />
|
||||
<div style={{ height: 18, background: "#e5e7eb", borderRadius: 4, marginBottom: 8, width: "40%" }} />
|
||||
<div style={{ height: 18, background: "#e5e7eb", borderRadius: 4, marginBottom: 8, width: "30%" }} />
|
||||
<div style={{ height: 14, background: "#e5e7eb", borderRadius: 4, marginBottom: 4, width: "90%" }} />
|
||||
<div style={{ height: 14, background: "#e5e7eb", borderRadius: 4, marginBottom: 4, width: "80%" }} />
|
||||
<div style={{ height: 14, background: "#e5e7eb", borderRadius: 4, width: "70%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !book) {
|
||||
return (
|
||||
<div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<button onClick={() => navigate("/")} className="btn btn-secondary" style={{ marginBottom: 24 }}>← Back to Library</button>
|
||||
<div style={{ textAlign: "center", padding: "80px 20px" }}>
|
||||
<div style={{ fontSize: 64, marginBottom: 16 }}>😕</div>
|
||||
<h2 style={{ fontSize: 20, color: "#1f2937", marginBottom: 8 }}>Book not found</h2>
|
||||
<p style={{ color: "#6b7280", marginBottom: 20 }}>{error || "The book you're looking for doesn't exist or has been removed."}</p>
|
||||
<button onClick={() => void loadBook()} className="btn" style={{ padding: "10px 24px" }}>Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sc = statusColors[book.reading_status] ?? { bg: "#f3f4f6", text: "#6b7280" };
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
style={{
|
||||
display: "inline-flex", alignItems: "center", gap: 4, padding: "8px 16px",
|
||||
borderRadius: 8, border: "1px solid #e5e7eb", background: "#fff",
|
||||
color: "#374151", fontSize: 14, cursor: "pointer", marginBottom: 24,
|
||||
}}
|
||||
>
|
||||
← Back to Library
|
||||
</button>
|
||||
|
||||
{/* Book Detail */}
|
||||
<div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
|
||||
{/* Cover */}
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<div style={{
|
||||
width: 240, height: 360, borderRadius: 12, overflow: "hidden",
|
||||
background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
|
||||
}}>
|
||||
{book.cover_image
|
||||
? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||
: <span style={{ fontSize: 80 }}>📖</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div style={{ flex: 1, minWidth: 240 }}>
|
||||
<h1 style={{ fontSize: 28, fontWeight: 700, color: "#1f2937", marginBottom: 8, lineHeight: 1.2 }}>
|
||||
{book.title}
|
||||
</h1>
|
||||
|
||||
{book.author && (
|
||||
<p style={{ fontSize: 18, color: "#4b5563", marginBottom: 6 }}>
|
||||
by {book.author}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 16, marginTop: 12 }}>
|
||||
<span style={{ background: sc.bg, color: sc.text, fontSize: 13, fontWeight: 600, padding: "4px 12px", borderRadius: 999 }}>
|
||||
{book.reading_status_display}
|
||||
</span>
|
||||
{book.genre && (
|
||||
<span style={{ background: "#eef2ff", color: "#4f46e5", fontSize: 13, padding: "4px 12px", borderRadius: 999 }}>
|
||||
{book.genre}
|
||||
</span>
|
||||
)}
|
||||
{book.total_pages > 0 && (
|
||||
<span style={{ background: "#f3f4f6", color: "#6b7280", fontSize: 13, padding: "4px 12px", borderRadius: 999 }}>
|
||||
{book.total_pages} pages
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{book.description && (
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<h3 style={{ fontSize: 16, fontWeight: 600, color: "#1f2937", marginBottom: 8 }}>Description</h3>
|
||||
<p style={{ fontSize: 15, color: "#4b5563", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
|
||||
{book.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid #e5e7eb" }}>
|
||||
<p style={{ fontSize: 13, color: "#9ca3af" }}>
|
||||
Added {new Date(book.created_at).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}
|
||||
{book.created_at !== book.updated_at && ` · Updated ${new Date(book.updated_at).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Mobile-only: open in reader if it's an ebook, or just navigate back */}
|
||||
<div style={{ marginTop: 24, display: "none" }}>
|
||||
<button onClick={() => navigate("/")} className="btn btn-block">Back to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+277
-33
@@ -1,61 +1,305 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { EBookListItem } from "../types/book";
|
||||
import type { BookListItem, BookSearchParams } from "../types/book";
|
||||
import { READING_STATUS_OPTIONS } from "../types/book";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
interface FilterState {
|
||||
genre: string;
|
||||
author: string;
|
||||
reading_status: string;
|
||||
}
|
||||
|
||||
function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
}
|
||||
|
||||
export function LibraryPage() {
|
||||
const [books, setBooks] = useState<EBookListItem[]>([]);
|
||||
const navigate = useNavigate();
|
||||
const { logout } = useAuth();
|
||||
|
||||
const [books, setBooks] = useState<BookListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filters, setFilters] = useState<FilterState>({ genre: "", author: "", reading_status: "" });
|
||||
const [genres, setGenres] = useState<string[]>([]);
|
||||
const [authors, setAuthors] = useState<string[]>([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const loadBooks = useCallback(async () => {
|
||||
const debouncedSearch = useDebounce(searchQuery, 300);
|
||||
const loadedRef = useRef(false);
|
||||
|
||||
// Load filter options once
|
||||
useEffect(() => {
|
||||
if (loadedRef.current) return;
|
||||
loadedRef.current = true;
|
||||
void Promise.all([booksApi.getGenres(), booksApi.getAuthors()]).then(
|
||||
([genreList, authorList]) => {
|
||||
setGenres(genreList);
|
||||
setAuthors(authorList);
|
||||
},
|
||||
() => {
|
||||
// Filters degrade gracefully if discovery endpoints fail
|
||||
},
|
||||
);
|
||||
}, []);
|
||||
|
||||
const loadBooks = useCallback(async (params: BookSearchParams) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await booksApi.getEBooks();
|
||||
setBooks(data);
|
||||
const response = await booksApi.searchBooks(params);
|
||||
setBooks(response.results);
|
||||
setTotalCount(response.count);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load library");
|
||||
setError(err instanceof Error ? err.message : "Failed to load books");
|
||||
setBooks([]);
|
||||
setTotalCount(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { void loadBooks(); }, [loadBooks]);
|
||||
// Reload when search or filters change
|
||||
useEffect(() => {
|
||||
const params: BookSearchParams = {};
|
||||
if (debouncedSearch) params.q = debouncedSearch;
|
||||
if (filters.genre) params.genre = filters.genre;
|
||||
if (filters.author) params.author = filters.author;
|
||||
if (filters.reading_status) params.reading_status = filters.reading_status;
|
||||
void loadBooks(params);
|
||||
}, [debouncedSearch, filters, loadBooks]);
|
||||
|
||||
const handleFilterChange = (key: keyof FilterState, value: string) => {
|
||||
setFilters((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSearchQuery("");
|
||||
setFilters({ genre: "", author: "", reading_status: "" });
|
||||
};
|
||||
|
||||
const hasActiveFilters = !!searchQuery || !!filters.genre || !!filters.author || !!filters.reading_status;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 800, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee", flexWrap: "wrap", gap: 8 }}>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e" }}>My Library</h1>
|
||||
<div style={{ maxWidth: 960, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
{/* Header */}
|
||||
<header style={{
|
||||
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
marginBottom: 20, padding: "16px 0", borderBottom: "1px solid #e5e7eb", flexWrap: "wrap", gap: 8,
|
||||
}}>
|
||||
<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>}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
|
||||
<button onClick={() => navigate("/add")} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer" }}>+ Add Book</button>
|
||||
<button onClick={() => navigate("/settings")} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #ddd", background: "#fff", color: "#333", fontSize: 14, cursor: "pointer" }}>Settings</button>
|
||||
<button onClick={() => navigate("/bookmarks-notes")} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #ddd", background: "#fff", color: "#333", fontSize: 14, cursor: "pointer" }}>Bookmarks</button>
|
||||
<button onClick={logout} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #e74c3c", background: "#fff", color: "#e74c3c", fontSize: 14, cursor: "pointer" }}>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>
|
||||
|
||||
{error && <div style={{ background: "#fde8e8", padding: 16, borderRadius: 8, marginBottom: 16, textAlign: "center" }}><p>{error}</p><button onClick={loadBooks} style={{ marginTop: 8, padding: "8px 16px", border: "none", borderRadius: 6, background: "#e74c3c", color: "#fff", cursor: "pointer" }}>Retry</button></div>}
|
||||
{loading && books.length === 0 && <div style={{ textAlign: "center", padding: "60px 20px" }}><p>Loading your library...</p></div>}
|
||||
{!loading && !error && books.length === 0 && <div style={{ textAlign: "center", padding: "60px 20px" }}><p style={{ fontSize: 20, color: "#666", marginBottom: 8 }}>Your library is empty</p><p style={{ color: "#999", marginBottom: 20 }}>Add a book to get started</p><button onClick={() => navigate("/add")} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer" }}>Add Your First Book</button></div>}
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16 }}>
|
||||
{books.map((book) => (
|
||||
<div key={book.id} onClick={() => navigate(`/reader/${book.id}`)} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)", cursor: "pointer" }}>
|
||||
<div style={{ height: 180, background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
{book.cover_image ? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <span style={{ fontSize: 48 }}>📖</span>}
|
||||
</div>
|
||||
<div style={{ padding: 12 }}>
|
||||
<h3 style={{ fontSize: 14, fontWeight: 600, color: "#1a1a2e", marginBottom: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{book.title}</h3>
|
||||
<p style={{ fontSize: 12, color: "#888", marginBottom: 8 }}>{book.author || "Unknown Author"}</p>
|
||||
{book.progress !== null && <div style={{ width: "100%", height: 4, background: "#eee", borderRadius: 2, overflow: "hidden" }}><div style={{ height: "100%", background: "#1a1a2e", borderRadius: 2, width: `${Math.min(book.progress, 100)}%` }} /></div>}
|
||||
</div>
|
||||
{/* Search Bar */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<div style={{ flex: 1, position: "relative" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by title, author, or genre..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{
|
||||
width: "100%", padding: "12px 16px 12px 44px", borderRadius: 10,
|
||||
border: "1px solid #e5e7eb", fontSize: 15, background: "#fff",
|
||||
outline: "none", boxSizing: "border-box",
|
||||
}}
|
||||
/>
|
||||
<span style={{
|
||||
position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)",
|
||||
fontSize: 18, color: "#9ca3af", pointerEvents: "none",
|
||||
}}>🔍</span>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={`btn ${showFilters ? "" : "btn-secondary"}`}
|
||||
title="Toggle filters"
|
||||
>
|
||||
{showFilters ? "▲ Filters" : "▼ Filters"}
|
||||
</button>
|
||||
</div>
|
||||
</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",
|
||||
}}>
|
||||
<div style={{ minWidth: 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",
|
||||
}}
|
||||
>
|
||||
<option value="">All Genres</option>
|
||||
{genres.map((g) => <option key={g} value={g}>{g}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ minWidth: 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",
|
||||
}}
|
||||
>
|
||||
<option value="">All Authors</option>
|
||||
{authors.map((a) => <option key={a} value={a}>{a}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ minWidth: 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",
|
||||
}}
|
||||
>
|
||||
{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" }}>
|
||||
✕ Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{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>
|
||||
</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={{ padding: 12 }}>
|
||||
<div style={{ height: 14, background: "#f0f0f0", borderRadius: 4, marginBottom: 6, width: "70%" }} />
|
||||
<div style={{ height: 12, background: "#f0f0f0", borderRadius: 4, width: "40%" }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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 }}>
|
||||
{hasActiveFilters ? "No books found" : "Your library is empty"}
|
||||
</h2>
|
||||
<p style={{ color: "#6b7280", marginBottom: 20, fontSize: 15, lineHeight: 1.5 }}>
|
||||
{hasActiveFilters
|
||||
? "Try adjusting your search query or filters to discover more books."
|
||||
: "Add a book to get started building your collection."}
|
||||
</p>
|
||||
{hasActiveFilters ? (
|
||||
<button onClick={clearAllFilters} className="btn" style={{ padding: "10px 24px" }}>
|
||||
Clear All Filters
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => navigate("/add")} className="btn" style={{ padding: "10px 24px" }}>
|
||||
Add Your First Book
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Grid */}
|
||||
{!loading && books.length > 0 && (
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16 }}>
|
||||
{books.map((book) => {
|
||||
const statusColors: Record<string, { bg: string; text: string }> = {
|
||||
want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
|
||||
reading: { bg: "#dcfce7", text: "#16a34a" },
|
||||
finished: { bg: "#f3e8ff", text: "#9333ea" },
|
||||
dnf: { bg: "#fef3c7", text: "#b45309" },
|
||||
};
|
||||
const sc = statusColors[book.reading_status] ?? { bg: "#f3f4f6", text: "#6b7280" };
|
||||
|
||||
return (
|
||||
<div
|
||||
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",
|
||||
transition: "transform 0.15s, box-shadow 0.15s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "translateY(-2px)";
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "";
|
||||
(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" }}>
|
||||
{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>
|
||||
</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>
|
||||
{book.genre && (
|
||||
<span style={{ fontSize: 11, color: "#4f46e5", background: "#eef2ff", padding: "1px 6px", borderRadius: 4 }}>
|
||||
{book.genre}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -27,6 +27,8 @@ export interface EBookListItem {
|
||||
title: string;
|
||||
author: string;
|
||||
filename: string;
|
||||
format: string;
|
||||
page_count: number;
|
||||
cover_image: string | null;
|
||||
created_at: string;
|
||||
progress: number | null;
|
||||
@@ -38,6 +40,10 @@ export interface EBookDetail {
|
||||
author: string;
|
||||
filename: string;
|
||||
file_url: string;
|
||||
format: string;
|
||||
page_count: number;
|
||||
file_size: number;
|
||||
metadata_json: Record<string, unknown>;
|
||||
cover_image: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
@@ -53,4 +59,26 @@ export interface ReadingSettings {
|
||||
font_size: number;
|
||||
font_style: "sans-serif" | "serif" | "monospace";
|
||||
background_color: string;
|
||||
}
|
||||
|
||||
export interface BookChapter {
|
||||
id: number;
|
||||
title: string;
|
||||
index: number;
|
||||
href: string;
|
||||
children: BookChapter[];
|
||||
}
|
||||
|
||||
export interface TocResponse {
|
||||
chapters: BookChapter[];
|
||||
format: string;
|
||||
page_count: number;
|
||||
}
|
||||
|
||||
export interface ContentResponse {
|
||||
page: number;
|
||||
total_pages: number;
|
||||
content: string;
|
||||
chapter_title: string;
|
||||
format: string;
|
||||
}
|
||||
Reference in New Issue
Block a user