Archived
Merge branch 'main' into feature/customizable-mobile-reading-experience
Resolve merge conflicts: - backend/apps/books/: Keep main's models (EBook, BookChapter, etc.) - frontend/src/App.tsx: Keep /read/:id route + main's all routes - web/ files: Accept deletion (content ported to frontend/)
This commit is contained in:
Marko (Hermes Implementer)
@@ -0,0 +1,12 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json yarn.lock ./
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
COPY . ./
|
||||
|
||||
EXPOSE 5173
|
||||
|
||||
CMD ["yarn", "dev", "--host"]
|
||||
@@ -0,0 +1,121 @@
|
||||
import api from "./client";
|
||||
import type {
|
||||
BookDetail,
|
||||
BookListItem,
|
||||
BookSearchParams,
|
||||
ContentResponse,
|
||||
EBookDetail,
|
||||
EBookListItem,
|
||||
ReadingProgress,
|
||||
ReadingSettings,
|
||||
TocResponse,
|
||||
} from "../types/book";
|
||||
|
||||
export const booksApi = {
|
||||
async getEBooks(): Promise<EBookListItem[]> {
|
||||
const { data } = await api.get<EBookListItem[]>("/books/ebooks/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async searchBooks(params: BookSearchParams = {}): Promise<{ count: number; results: BookListItem[] }> {
|
||||
const { data } = await api.get<{ count: number; results: BookListItem[] }>("/books/", { params });
|
||||
return data;
|
||||
},
|
||||
|
||||
async getBook(id: number): Promise<BookDetail> {
|
||||
const { data } = await api.get<BookDetail>(`/books/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getGenres(): Promise<string[]> {
|
||||
const { data } = await api.get<string[]>("/books/genres/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async getAuthors(): Promise<string[]> {
|
||||
const { data } = await api.get<string[]>("/books/authors/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async getEBook(id: number): Promise<EBookDetail> {
|
||||
const { data } = await api.get<EBookDetail>(`/books/ebooks/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async searchBooks(params: BookSearchParams = {}): Promise<{ count: number; results: BookListItem[] }> {
|
||||
const { data } = await api.get<{ count: number; results: BookListItem[] }>("/books/", { params });
|
||||
return data;
|
||||
},
|
||||
|
||||
async getBook(id: number): Promise<BookDetail> {
|
||||
const { data } = await api.get<BookDetail>(`/books/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getGenres(): Promise<string[]> {
|
||||
const { data } = await api.get<string[]>("/books/genres/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async getAuthors(): Promise<string[]> {
|
||||
const { data } = await api.get<string[]>("/books/authors/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async uploadEBook(
|
||||
file: File,
|
||||
title: string,
|
||||
author: string,
|
||||
coverImage?: File | null,
|
||||
): Promise<EBookDetail> {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("title", title);
|
||||
if (author) formData.append("author", author);
|
||||
if (coverImage) formData.append("cover_image", coverImage);
|
||||
|
||||
const { data } = await api.post<EBookDetail>("/books/ebooks/", formData, {
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
});
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteEBook(id: number): Promise<void> {
|
||||
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;
|
||||
},
|
||||
|
||||
async updateProgress(ebookId: number, progressData: Partial<ReadingProgress>): Promise<ReadingProgress> {
|
||||
const { data } = await api.patch<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`, progressData);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getSettings(): Promise<ReadingSettings> {
|
||||
const { data } = await api.get<ReadingSettings>("/books/settings/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateSettings(settingsData: Partial<ReadingSettings>): Promise<ReadingSettings> {
|
||||
const { data } = await api.patch<ReadingSettings>("/books/settings/", settingsData);
|
||||
return data;
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.infoText {
|
||||
padding: 12px 16px;
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.suggestionItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.suggestionItem:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.coverImage {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.coverPlaceholder {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bookInfo {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bookTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bookAuthor {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../../api/books";
|
||||
import { useDebounce } from "../../hooks/useDebounce";
|
||||
import type { BookListItem } from "../../types/book";
|
||||
import styles from "./SearchSuggestions.module.css";
|
||||
|
||||
interface SearchSuggestionsProps {
|
||||
query: string;
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSelectSuggestion: () => void;
|
||||
}
|
||||
|
||||
export function SearchSuggestions({ query, visible, onClose, onSelectSuggestion }: SearchSuggestionsProps) {
|
||||
const navigate = useNavigate();
|
||||
const [suggestions, setSuggestions] = useState<BookListItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const debouncedQuery = useDebounce(query, 200);
|
||||
|
||||
useEffect(() => {
|
||||
if (!debouncedQuery.trim()) {
|
||||
setSuggestions([]);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
void booksApi.searchBooks({ q: debouncedQuery.trim(), page_size: 5 }).then(
|
||||
(res) => {
|
||||
if (!cancelled) {
|
||||
setSuggestions(res.results);
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (!cancelled) {
|
||||
setSuggestions([]);
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [debouncedQuery]);
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
// Delay attachment to avoid the click that opened us from immediately closing
|
||||
const timer = setTimeout(() => document.addEventListener("click", handler), 0);
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
document.removeEventListener("click", handler);
|
||||
};
|
||||
}, [visible, onClose]);
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
document.addEventListener("keydown", handler);
|
||||
return () => document.removeEventListener("keydown", handler);
|
||||
}, [visible, onClose]);
|
||||
|
||||
if (!visible || !query.trim()) return null;
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={styles.container}>
|
||||
{loading && (
|
||||
<div className={styles.infoText}>
|
||||
Searching...
|
||||
</div>
|
||||
)}
|
||||
{!loading && suggestions.length === 0 && debouncedQuery.trim() && (
|
||||
<div className={styles.infoText}>
|
||||
No quick suggestions
|
||||
</div>
|
||||
)}
|
||||
{suggestions.map((book) => (
|
||||
<div
|
||||
key={book.id}
|
||||
className={styles.suggestionItem}
|
||||
onClick={() => {
|
||||
onSelectSuggestion();
|
||||
navigate(`/books/${book.id}`);
|
||||
}}
|
||||
>
|
||||
<span className={styles.coverPlaceholder}>
|
||||
{book.cover_image ? (
|
||||
<img
|
||||
src={book.cover_image}
|
||||
alt=""
|
||||
className={styles.coverImage}
|
||||
/>
|
||||
) : (
|
||||
"📖"
|
||||
)}
|
||||
</span>
|
||||
<div className={styles.bookInfo}>
|
||||
<div className={styles.bookTitle}>
|
||||
{book.title}
|
||||
</div>
|
||||
<div className={styles.bookAuthor}>
|
||||
{book.author || "Unknown Author"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
|
||||
import api from "../api/client";
|
||||
|
||||
interface AuthContextValue {
|
||||
isAuthenticated: boolean;
|
||||
loading: boolean;
|
||||
user: { email: string } | null;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
register: (email: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [user, setUser] = useState<{ email: string } | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (token) {
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1] ?? ""));
|
||||
setUser({ email: payload.email ?? payload.sub ?? "user" });
|
||||
} catch {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const login = useCallback(async (email: string, password: string) => {
|
||||
const { data } = await api.post<{ access: string; refresh: string }>("/auth/token/", { email, password });
|
||||
localStorage.setItem("access_token", data.access);
|
||||
localStorage.setItem("refresh_token", data.refresh);
|
||||
const payload = JSON.parse(atob(data.access.split(".")[1] ?? ""));
|
||||
setUser({ email: payload.email ?? payload.sub ?? "user" });
|
||||
}, []);
|
||||
|
||||
const register = useCallback(async (email: string, password: string) => {
|
||||
await api.post("/auth/register/", { email, password });
|
||||
await login(email, password);
|
||||
}, [login]);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
setUser(null);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isAuthenticated: !!user, loading, user, login, register, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth(): AuthContextValue {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
|
||||
return ctx;
|
||||
}
|
||||
@@ -1 +1,4 @@
|
||||
export { usePaginatedQuery } from "./usePaginatedQuery";
|
||||
export { usePaginatedQuery } from "./usePaginatedQuery";
|
||||
export { useDebounce } from "./useDebounce";
|
||||
export { useVoiceSearch } from "./useVoiceSearch";
|
||||
export { useMediaQuery } from "./useMediaQuery";
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
/**
|
||||
* A hook that debounces a value by the specified delay.
|
||||
* @param value - The value to debounce
|
||||
* @param delay - The delay in milliseconds
|
||||
* @returns The debounced value
|
||||
*/
|
||||
export 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;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
/**
|
||||
* Hook for responsive design — returns true when the media query matches.
|
||||
* Defaults to false on SSR / initial render to avoid hydration mismatch.
|
||||
*/
|
||||
export function useMediaQuery(query: string): boolean {
|
||||
const [matches, setMatches] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mql = window.matchMedia(query);
|
||||
setMatches(mql.matches);
|
||||
|
||||
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
|
||||
mql.addEventListener("change", handler);
|
||||
return () => mql.removeEventListener("change", handler);
|
||||
}, [query]);
|
||||
|
||||
return matches;
|
||||
}
|
||||
|
||||
export const BREAKPOINTS = {
|
||||
sm: "(max-width: 480px)",
|
||||
md: "(max-width: 768px)",
|
||||
lg: "(min-width: 1024px)",
|
||||
} as const;
|
||||
@@ -0,0 +1,105 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
export interface UseVoiceSearchResult {
|
||||
isListening: boolean;
|
||||
transcript: string;
|
||||
isSupported: boolean;
|
||||
hasError: boolean;
|
||||
errorMessage: string | null;
|
||||
startListening: () => void;
|
||||
stopListening: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook for voice search using the Web Speech API.
|
||||
* Returns a microphone control interface.
|
||||
* Gracefully degrades when SpeechRecognition is unavailable.
|
||||
*/
|
||||
export function useVoiceSearch(): UseVoiceSearchResult {
|
||||
const [isListening, setIsListening] = useState(false);
|
||||
const [transcript, setTranscript] = useState("");
|
||||
const [isSupported, setIsSupported] = useState(false);
|
||||
const [hasError, setHasError] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
const recognitionRef = useRef<SpeechRecognition | null>(null);
|
||||
const mountedRef = useRef(true);
|
||||
|
||||
useEffect(() => {
|
||||
mountedRef.current = true;
|
||||
// Check for SpeechRecognition support (standard + webkit prefix)
|
||||
const SpeechRecognitionCtor =
|
||||
(window as unknown as Record<string, unknown>).SpeechRecognition ??
|
||||
(window as unknown as Record<string, unknown>).webkitSpeechRecognition;
|
||||
|
||||
if (typeof SpeechRecognitionCtor === "function") {
|
||||
setIsSupported(true);
|
||||
const recognition = new (SpeechRecognitionCtor as new () => SpeechRecognition)();
|
||||
recognition.continuous = false;
|
||||
recognition.interimResults = false;
|
||||
recognition.lang = "en-US";
|
||||
|
||||
recognition.onresult = (event: SpeechRecognitionEvent) => {
|
||||
const resultText = event.results[0]?.[0]?.transcript ?? "";
|
||||
if (mountedRef.current) {
|
||||
setTranscript(resultText);
|
||||
setHasError(false);
|
||||
setErrorMessage(null);
|
||||
}
|
||||
};
|
||||
|
||||
recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
|
||||
if (mountedRef.current) {
|
||||
setHasError(true);
|
||||
setErrorMessage(event.error);
|
||||
setIsListening(false);
|
||||
}
|
||||
};
|
||||
|
||||
recognition.onend = () => {
|
||||
if (mountedRef.current) {
|
||||
setIsListening(false);
|
||||
}
|
||||
};
|
||||
|
||||
recognitionRef.current = recognition;
|
||||
}
|
||||
|
||||
return () => {
|
||||
mountedRef.current = false;
|
||||
if (recognitionRef.current) {
|
||||
recognitionRef.current.abort();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startListening = useCallback(() => {
|
||||
if (!recognitionRef.current) return;
|
||||
setTranscript("");
|
||||
setHasError(false);
|
||||
setErrorMessage(null);
|
||||
try {
|
||||
recognitionRef.current.start();
|
||||
setIsListening(true);
|
||||
} catch {
|
||||
// May throw if already started
|
||||
setIsListening(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const stopListening = useCallback(() => {
|
||||
if (!recognitionRef.current) return;
|
||||
recognitionRef.current.stop();
|
||||
setIsListening(false);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isListening,
|
||||
transcript,
|
||||
isSupported,
|
||||
hasError,
|
||||
errorMessage,
|
||||
startListening,
|
||||
stopListening,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
|
||||
export function AddBookPage() {
|
||||
const navigate = useNavigate();
|
||||
const [title, setTitle] = useState("");
|
||||
const [author, setAuthor] = useState("");
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selected = e.target.files?.[0] ?? null;
|
||||
if (selected) {
|
||||
const ext = selected.name.split(".").pop()?.toLowerCase();
|
||||
if (ext !== "epub" && ext !== "pdf") { setError("Only EPUB and PDF files are supported."); setFile(null); return; }
|
||||
setFile(selected); setError(null);
|
||||
if (!title) setTitle(selected.name.replace(/\.(epub|pdf)$/i, ""));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!file || !title.trim()) { setError("Title and file are required."); return; }
|
||||
setUploading(true); setError(null);
|
||||
try { await booksApi.uploadEBook(file, title.trim(), author.trim()); navigate("/"); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Upload failed."); }
|
||||
finally { setUploading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Add Book</h1>
|
||||
</header>
|
||||
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>File (EPUB or PDF) *</label>
|
||||
<input type="file" accept=".epub,.pdf" onChange={handleFileChange} style={{ padding: "10px 0" }} />
|
||||
{file && <p style={{ fontSize: 13, color: "#666", marginTop: 4 }}>Selected: {file.name}</p>}
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Title *</label>
|
||||
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Book title" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Author</label>
|
||||
<input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} placeholder="Author name" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<button type="submit" disabled={uploading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: uploading ? 0.6 : 1, marginTop: 8 }}>{uploading ? "Uploading..." : "Upload Book"}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
function AuthForm({ isLogin, onToggle }: { isLogin: boolean; onToggle: () => void }) {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { login, register } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault(); setError(null);
|
||||
if (!isLogin && password !== confirmPassword) { setError("Passwords do not match."); return; }
|
||||
setLoading(true);
|
||||
try {
|
||||
if (isLogin) await login(email, password);
|
||||
else await register(email, password);
|
||||
navigate("/");
|
||||
} catch (err) { setError(err instanceof Error ? err.message : isLogin ? "Login failed" : "Registration failed"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", background: "#f8f9fa", padding: 16 }}>
|
||||
<div style={{ width: "100%", maxWidth: 400, background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 16px rgba(0,0,0,0.08)" }}>
|
||||
<h1 style={{ fontSize: 28, fontWeight: 700, color: "#1a1a2e", textAlign: "center", marginBottom: 4 }}>Cloud Reader</h1>
|
||||
<h2 style={{ fontSize: 16, color: "#888", textAlign: "center", marginBottom: 24, fontWeight: 400 }}>{isLogin ? "Sign In" : "Create Account"}</h2>
|
||||
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Email</label>
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Password</label>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="At least 8 characters" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
{!isLogin && <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Confirm Password</label>
|
||||
<input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="Repeat your password" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>}
|
||||
<button type="submit" disabled={loading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: loading ? 0.6 : 1, marginTop: 8 }}>{loading ? (isLogin ? "Signing in..." : "Creating account...") : (isLogin ? "Sign In" : "Create Account")}</button>
|
||||
</form>
|
||||
<p style={{ textAlign: "center", marginTop: 20, color: "#888", fontSize: 14 }}>
|
||||
{isLogin ? "Don't have an account? " : "Already have an account? "}
|
||||
<button onClick={onToggle} style={{ background: "none", border: "none", color: "#1a1a2e", fontWeight: 600, cursor: "pointer", fontSize: 14, textDecoration: "underline" }}>{isLogin ? "Register" : "Sign In"}</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoginPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={true} onToggle={onToggle} />; }
|
||||
export function RegisterPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={false} onToggle={onToggle} />; }
|
||||
@@ -0,0 +1,208 @@
|
||||
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";
|
||||
import { useMediaQuery, BREAKPOINTS } from "../hooks/useMediaQuery";
|
||||
|
||||
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 isMobile = useMediaQuery(BREAKPOINTS.md);
|
||||
|
||||
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" },
|
||||
};
|
||||
|
||||
const containerStyle: React.CSSProperties = {
|
||||
maxWidth: 720,
|
||||
margin: "0 auto",
|
||||
padding: isMobile ? 16 : 24,
|
||||
minHeight: "100vh",
|
||||
background: "#f8f9fa",
|
||||
};
|
||||
|
||||
const backButtonStyle: React.CSSProperties = {
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
padding: isMobile ? "10px 16px" : "8px 16px",
|
||||
borderRadius: 8,
|
||||
border: "1px solid #e5e7eb",
|
||||
background: "#fff",
|
||||
color: "#374151",
|
||||
fontSize: isMobile ? 15 : 14,
|
||||
cursor: "pointer",
|
||||
marginBottom: isMobile ? 16 : 24,
|
||||
minHeight: 44,
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<div style={{ height: 32, width: 80, background: "#e5e7eb", borderRadius: 6, marginBottom: 24 }} />
|
||||
<div style={{ display: "flex", gap: isMobile ? 16 : 24, flexDirection: isMobile ? "column" : "row" }}>
|
||||
<div style={{
|
||||
width: isMobile ? 140 : 240,
|
||||
height: isMobile ? 210 : 360,
|
||||
background: "#e5e7eb",
|
||||
borderRadius: 12,
|
||||
flexShrink: 0,
|
||||
alignSelf: isMobile ? "center" : "flex-start",
|
||||
}} />
|
||||
<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={containerStyle}>
|
||||
<button onClick={() => navigate("/")} style={backButtonStyle}>← Back to Library</button>
|
||||
<div style={{ textAlign: "center", padding: isMobile ? "60px 16px" : "80px 20px" }}>
|
||||
<div style={{ fontSize: isMobile ? 48 : 64, marginBottom: 16 }}>😕</div>
|
||||
<h2 style={{ fontSize: isMobile ? 18 : 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: "12px 24px", fontSize: 15, minHeight: 44 }}>Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sc = statusColors[book.reading_status] ?? { bg: "#f3f4f6", text: "#6b7280" };
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
{/* Back button */}
|
||||
<button onClick={() => navigate("/")} style={backButtonStyle}>
|
||||
← {isMobile ? "Back" : "Back to Library"}
|
||||
</button>
|
||||
|
||||
{/* Book Detail */}
|
||||
<div style={{ display: "flex", gap: isMobile ? 20 : 32, flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Cover */}
|
||||
<div style={{ flexShrink: 0, alignSelf: isMobile ? "center" : "flex-start" }}>
|
||||
<div style={{
|
||||
width: isMobile ? 160 : 240,
|
||||
height: isMobile ? 240 : 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: isMobile ? 48 : 80 }}>📖</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<h1 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, color: "#1f2937", marginBottom: 8, lineHeight: 1.2 }}>
|
||||
{book.title}
|
||||
</h1>
|
||||
|
||||
{book.author && (
|
||||
<p style={{ fontSize: isMobile ? 16 : 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, minHeight: 28, display: "inline-flex", alignItems: "center" }}>
|
||||
{book.reading_status_display}
|
||||
</span>
|
||||
{book.genre && (
|
||||
<span style={{ background: "#eef2ff", color: "#4f46e5", fontSize: 13, padding: "4px 12px", borderRadius: 999, minHeight: 28, display: "inline-flex", alignItems: "center" }}>
|
||||
{book.genre}
|
||||
</span>
|
||||
)}
|
||||
{book.total_pages > 0 && (
|
||||
<span style={{ background: "#f3f4f6", color: "#6b7280", fontSize: 13, padding: "4px 12px", borderRadius: 999, minHeight: 28, display: "inline-flex", alignItems: "center" }}>
|
||||
{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: isMobile ? 15 : 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 full-width back button */}
|
||||
{isMobile && (
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "14px 24px",
|
||||
borderRadius: 10,
|
||||
border: "none",
|
||||
background: "#4f46e5",
|
||||
color: "#fff",
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
minHeight: 44,
|
||||
}}
|
||||
>
|
||||
← Back to Library
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.bookCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.bookCard:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -0,0 +1,545 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
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 { useDebounce } from "../hooks/useDebounce";
|
||||
import { useVoiceSearch } from "../hooks/useVoiceSearch";
|
||||
import { useMediaQuery, BREAKPOINTS } from "../hooks/useMediaQuery";
|
||||
import { SearchSuggestions } from "../components/search/SearchSuggestions";
|
||||
import styles from "./Library.module.css";
|
||||
|
||||
interface FilterState {
|
||||
genre: string;
|
||||
author: string;
|
||||
reading_status: string;
|
||||
}
|
||||
|
||||
/** 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();
|
||||
|
||||
const [books, setBooks] = useState<BookListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
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 [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(() => {
|
||||
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 response = await booksApi.searchBooks(params);
|
||||
setBooks(response.results);
|
||||
setTotalCount(response.count);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load books");
|
||||
setBooks([]);
|
||||
setTotalCount(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 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: 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={containerStyle}>
|
||||
{/* Header */}
|
||||
<header style={headerStyle}>
|
||||
<div>
|
||||
<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: 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={searchContainerStyle}>
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
placeholder="Search by title, author, or genre..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setShowSuggestions(true);
|
||||
}}
|
||||
onFocus={() => setShowSuggestions(true)}
|
||||
style={{
|
||||
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)}
|
||||
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,
|
||||
}}
|
||||
>
|
||||
{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: isMobile ? 12 : 16,
|
||||
marginBottom: 16,
|
||||
border: "1px solid #e5e7eb",
|
||||
display: "flex",
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
gap: 12,
|
||||
alignItems: isMobile ? "stretch" : "end",
|
||||
}}>
|
||||
<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",
|
||||
minHeight: 36,
|
||||
}}
|
||||
>
|
||||
<option value="">All Genres</option>
|
||||
{genres.map((g) => <option key={g} value={g}>{g}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<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",
|
||||
minHeight: 36,
|
||||
}}
|
||||
>
|
||||
<option value="">All Authors</option>
|
||||
{authors.map((a) => <option key={a} value={a}>{a}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<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",
|
||||
minHeight: 36,
|
||||
}}
|
||||
>
|
||||
{READING_STATUS_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<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>
|
||||
)}
|
||||
</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, minHeight: 36 }}>Retry</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<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%" }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && !error && books.length === 0 && (
|
||||
<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 }}>
|
||||
{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: "12px 24px", fontSize: 15, minHeight: 44 }}>
|
||||
Clear All Filters
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => navigate("/add")} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>
|
||||
Add Your First Book
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Grid */}
|
||||
{!loading && books.length > 0 && (
|
||||
<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" },
|
||||
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}`)}
|
||||
className={styles.bookCard}
|
||||
style={{
|
||||
display: isMobile ? "flex" : "block",
|
||||
}}
|
||||
>
|
||||
<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: 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: 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, display: "inline-block", marginTop: 4 }}>
|
||||
{book.genre}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { EBookDetail } from "../types/book";
|
||||
|
||||
export function ReaderPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [book, setBook] = useState<EBookDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const progressTimer = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const bookId = Number(id);
|
||||
|
||||
const saveProgress = useCallback(async () => {
|
||||
if (!scrollRef.current || !book) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
|
||||
const position = Math.min(100, Math.round((scrollTop / (scrollHeight - clientHeight)) * 100));
|
||||
try { await booksApi.updateProgress(bookId, { current_position: position }); } catch { /* silent */ }
|
||||
}, [bookId, book]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadBook = async () => {
|
||||
setLoading(true); setError(null);
|
||||
try {
|
||||
const data = await booksApi.getEBook(bookId);
|
||||
setBook(data);
|
||||
document.title = data.title;
|
||||
} catch (err) { setError(err instanceof Error ? err.message : "Failed to load book"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
void loadBook();
|
||||
return () => { document.title = "Cloud Reader"; };
|
||||
}, [bookId]);
|
||||
|
||||
useEffect(() => {
|
||||
progressTimer.current = setInterval(() => { void saveProgress(); }, 5000);
|
||||
return () => { if (progressTimer.current) clearInterval(progressTimer.current); };
|
||||
}, [saveProgress]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = () => { void saveProgress(); };
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||
}, [saveProgress]);
|
||||
|
||||
if (loading) return <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", color: "#888" }}><p>Loading book...</p></div>;
|
||||
if (error) return <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100vh", gap: 16 }}><p style={{ color: "#e74c3c", fontSize: 16 }}>{error}</p><button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer" }}>← Back to Library</button></div>;
|
||||
if (!book) return null;
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100vh", background: "#fff" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: "1px solid #eee", gap: 12, flexShrink: 0 }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Library</button>
|
||||
<div style={{ flex: 1 }}><h1 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>{book.title}</h1><p style={{ fontSize: 14, color: "#888", margin: "4px 0 0" }}>{book.author}</p></div>
|
||||
<button onClick={() => navigate(`/bookmarks-notes/${bookId}`)} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>📑 Bookmarks & Notes</button>
|
||||
</header>
|
||||
<div ref={scrollRef} style={{ flex: 1, overflow: "auto", background: "#fafafa" }}>
|
||||
{book.file_url ? <iframe src={book.file_url} style={{ width: "100%", height: "100%", border: "none" }} title={book.title} /> : <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%", color: "#888" }}><p>No file available.</p></div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { ReadingSettings } from "../types/book";
|
||||
|
||||
const BG_COLORS = [
|
||||
{ value: "#ffffff", label: "White" },
|
||||
{ value: "#f4e4c1", label: "Sepia" },
|
||||
{ value: "#1a1a2e", label: "Dark" },
|
||||
{ value: "#c7edcc", label: "Green" },
|
||||
];
|
||||
|
||||
export function SettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [settings, setSettings] = useState<ReadingSettings | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try { const data = await booksApi.getSettings(); setSettings(data); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Failed to load settings"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
void load();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!settings) return;
|
||||
setSaving(true); setError(null); setSuccess(false);
|
||||
try { await booksApi.updateSettings(settings); setSuccess(true); setTimeout(() => setSuccess(false), 2000); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Failed to save settings"); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}><p>Loading settings...</p></div>;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Reading Settings</h1>
|
||||
</header>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
{success && <div style={{ background: "#d4edda", padding: 12, borderRadius: 6, color: "#155724", fontSize: 14 }}>Settings saved!</div>}
|
||||
|
||||
{settings && <>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Size ({settings.font_size}px)</label>
|
||||
<input type="range" min={12} max={36} value={settings.font_size} onChange={(e) => setSettings({ ...settings, font_size: Number(e.target.value) })} style={{ width: "100%", cursor: "pointer" }} />
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#999" }}><span>12px</span><span>36px</span></div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Style</label>
|
||||
<select value={settings.font_style} onChange={(e) => setSettings({ ...settings, font_style: e.target.value as ReadingSettings["font_style"] })} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, background: "#fff", outline: "none" }}>
|
||||
<option value="sans-serif">Sans Serif</option><option value="serif">Serif</option><option value="monospace">Monospace</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Background Color</label>
|
||||
<div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
|
||||
{BG_COLORS.map((bg) => (
|
||||
<button key={bg.value} onClick={() => setSettings({ ...settings, background_color: bg.value })}
|
||||
style={{ width: 48, height: 48, borderRadius: "50%", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: bg.value, border: settings.background_color === bg.value ? "3px solid #1a1a2e" : "3px solid #ddd" }}
|
||||
title={bg.label}>
|
||||
{settings.background_color === bg.value && <span style={{ fontSize: 20, fontWeight: 700, color: bg.value === "#ffffff" || bg.value === "#f4e4c1" ? "#1a1a2e" : "#fff" }}>✓</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
<button onClick={handleSave} disabled={saving} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: saving ? 0.6 : 1, marginTop: 8 }}>{saving ? "Saving..." : "Save Settings"}</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
export interface BookListItem {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
reading_status: string;
|
||||
reading_status_display: string;
|
||||
cover_image: string | null;
|
||||
}
|
||||
|
||||
export interface BookDetail {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
description: string;
|
||||
reading_status: string;
|
||||
reading_status_display: string;
|
||||
cover_image: string | null;
|
||||
total_pages: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface EBookListItem {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
filename: string;
|
||||
format: string;
|
||||
page_count: number;
|
||||
cover_image: string | null;
|
||||
created_at: string;
|
||||
progress: number | null;
|
||||
}
|
||||
|
||||
export interface EBookDetail {
|
||||
id: number;
|
||||
title: string;
|
||||
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;
|
||||
progress: ReadingProgress | null;
|
||||
}
|
||||
|
||||
export interface ReadingProgress {
|
||||
current_position: number;
|
||||
last_page: number;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export interface BookSearchParams {
|
||||
q?: string;
|
||||
genre?: string;
|
||||
author?: string;
|
||||
reading_status?: string;
|
||||
ordering?: string;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
}
|
||||
|
||||
export const READING_STATUS_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: "", label: "All Statuses" },
|
||||
{ value: "want_to_read", label: "Want to Read" },
|
||||
{ value: "reading", label: "Reading" },
|
||||
{ value: "finished", label: "Finished" },
|
||||
{ value: "dnf", label: "Did Not Finish" },
|
||||
];
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Type declarations for the Web Speech API (SpeechRecognition).
|
||||
* These are not part of the standard TypeScript DOM lib types.
|
||||
* Install @types/dom-speech-recognition for full coverage.
|
||||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
|
||||
interface SpeechRecognition extends EventTarget {
|
||||
continuous: boolean;
|
||||
interimResults: boolean;
|
||||
lang: string;
|
||||
onresult: ((event: SpeechRecognitionEvent) => void) | null;
|
||||
onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
|
||||
onend: (() => void) | null;
|
||||
start(): void;
|
||||
stop(): void;
|
||||
abort(): void;
|
||||
}
|
||||
|
||||
interface SpeechRecognitionEvent extends Event {
|
||||
readonly resultIndex: number;
|
||||
readonly results: SpeechRecognitionResultList;
|
||||
}
|
||||
|
||||
interface SpeechRecognitionResultList {
|
||||
readonly length: number;
|
||||
[index: number]: SpeechRecognitionResult;
|
||||
}
|
||||
|
||||
interface SpeechRecognitionResult {
|
||||
readonly isFinal: boolean;
|
||||
readonly length: number;
|
||||
[index: number]: SpeechRecognitionAlternative;
|
||||
}
|
||||
|
||||
interface SpeechRecognitionAlternative {
|
||||
readonly transcript: string;
|
||||
readonly confidence: number;
|
||||
}
|
||||
|
||||
interface SpeechRecognitionErrorEvent extends Event {
|
||||
readonly error: string;
|
||||
readonly message: string;
|
||||
}
|
||||
|
||||
interface SpeechRecognitionConstructor {
|
||||
new (): SpeechRecognition;
|
||||
}
|
||||
|
||||
interface Window {
|
||||
SpeechRecognition?: SpeechRecognitionConstructor;
|
||||
webkitSpeechRecognition?: SpeechRecognitionConstructor;
|
||||
}
|
||||
Reference in New Issue
Block a user