fix: address PR #24 review comments - SpeechRecognition types, CSS hover over direct DOM, shared useDebounce

Reviewed-on: #23
Reviewed-by: crisleo94 <cristhian.reinoso@codescripters.org>

docs/backend/search-discovery-spec.md

@@ -69,7 +69,7 @@ Enable users to search books within the library and discover new books via filte
 - **Search bar** at top: text input with debounced `onChange` → calls API with `q` param
 - **Filter row**: genre dropdown, author dropdown, reading status dropdown
   - Genre/Author dropdowns populated from `/api/books/genres/` and `/api/books/authors/`
-  - Reading status uses static enum values
+  - Reading status uses static enum values (`READING_STATUS_OPTIONS`)
 - **Results grid**: card layout showing cover, title, author, reading status badge
 - **Empty state**: "No books found" with clear message when results are empty
 - **Loading state**: spinner/skeleton while fetching
@@ -80,6 +80,15 @@ Enable users to search books within the library and discover new books via filte
 - Back button to return to library
 - Clean, mobile-responsive layout
 
+### API Client — `frontend/src/api/books.ts`
+
+| Method | Endpoint | Returns |
+|--------|----------|---------|
+| `searchBooks(params)` | `GET /api/books/` | `{count, results: BookListItem[]}` |
+| `getBook(id)` | `GET /api/books/{id}/` | `BookDetail` |
+| `getGenres()` | `GET /api/books/genres/` | `string[]` |
+| `getAuthors()` | `GET /api/books/authors/` | `string[]` |
+
 ## Routes (Frontend)
 | Path | Component | Auth |
 |------|-----------|------|

docs/frontend/mobile-search-spec.md

@@ -0,0 +1,99 @@
+# Mobile Book Search & Discovery — Spec
+
+## Overview
+Enhance the existing book search experience with mobile-first features: voice search via the Web Speech API, real-time autocomplete suggestions, and touch-optimized responsive layout.
+
+## Prerequisites
+- Backend endpoints already exist (from `docs/backend/search-discovery-spec.md`):
+  - `GET /api/books/?q=...&genre=...&author=...&reading_status=...` — paginated search
+  - `GET /api/books/{id}/` — book detail
+  - `GET /api/books/genres/` — genre discovery
+  - `GET /api/books/authors/` — author discovery
+- Frontend `LibraryPage` and `BookDetailPage` components exist but lacked API client methods and types (fixed in this PR).
+
+## Frontend API Client Additions
+
+### `frontend/src/types/book.ts` — New exports
+
+```typescript
+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" },
+];
+```
+
+### `frontend/src/api/books.ts` — New methods on `booksApi`
+
+| Method | Endpoint | Returns |
+|--------|----------|---------|
+| `searchBooks(params)` | `GET /api/books/` | `{ count, results: BookListItem[] }` |
+| `getBook(id)` | `GET /api/books/{id}/` | `BookDetail` |
+| `getGenres()` | `GET /api/books/genres/` | `string[]` |
+| `getAuthors()` | `GET /api/books/authors/` | `string[]` |
+
+## Mobile Features
+
+### 1. Voice Search
+- **Hook**: `useVoiceSearch` in `frontend/src/hooks/useVoiceSearch.ts`
+- Uses the Web Speech API (`SpeechRecognition` / `webkitSpeechRecognition`)
+- Returns: `{ isListening, transcript, isSupported, startListening, stopListening, hasError }`
+- Renders a microphone icon button next to the search input
+- On mobile, tapping the mic icon triggers the native speech recognition prompt
+- On success, populates the search input with the transcript and triggers a search
+- Graceful degradation: if SpeechRecognition API is unavailable, the mic button is hidden
+
+### 2. Real-Time Suggestions (Autocomplete)
+- Component: `SearchSuggestions` rendered as a dropdown below the search input
+- On each keystroke (debounced 200ms), fetches `GET /api/books/?q=...&page_size=5` for suggestions
+- Shows up to 5 book title/author suggestions in a styled dropdown list
+- Clicking a suggestion navigates directly to `/books/{id}`
+- Clicking outside or pressing Escape dismisses the dropdown
+- Combines with existing full search results — suggestions are fast previews, not the main result list
+
+### 3. Mobile-Responsive Enhancements
+- Filters panel is **collapsed by default** on mobile, toggleable via a "Filters" button
+- Touch targets minimum 44px (WCAG 2.1)
+- Results grid switches to **single column** below 600px viewport width
+- Search input and filters panel stack vertically on small screens
+- Add CSS breakpoints via inline styles and a `useMediaQuery` hook
+- Bottom navigation-style action buttons on mobile (Add Book, Bookmarks, Settings become icon-only)
+
+## Component Hierarchy
+
+```
+LibraryPage
+├── Header (title, count, action buttons)
+├── SearchInput
+│   ├── TextInput (debounced 300ms)
+│   ├── VoiceSearchButton (microphone icon)
+│   └── SearchSuggestions (dropdown, debounced 200ms)
+├── FiltersButton (mobile: toggle; desktop: always visible)
+├── FiltersPanel (collapsible on mobile)
+│   ├── GenreSelect
+│   ├── AuthorSelect
+│   ├── StatusSelect
+│   └── ClearFiltersButton
+├── LoadingState (skeleton grid)
+├── ErrorState (message + retry button)
+├── EmptyState (no results / no books)
+└── ResultsGrid (responsive: auto-fill vs single column)
+```
+
+## Mobile-First CSS Strategy
+- Use inline styles with `@media` queries in a shared `breakpoints.ts` utility
+- Breakpoints: sm = 480px, md = 768px, lg = 1024px
+- Base styles are mobile-first (single column, full width)
+- Media queries expand to multi-column grid and horizontal layout on larger screens

frontend/src/api/books.ts

@@ -1,5 +1,15 @@
 import api from "./client";
-import type { ContentResponse, EBookDetail, EBookListItem, ReadingProgress, ReadingSettings, TocResponse } from "../types/book";
+import type {
+  BookDetail,
+  BookListItem,
+  BookSearchParams,
+  ContentResponse,
+  EBookDetail,
+  EBookListItem,
+  ReadingProgress,
+  ReadingSettings,
+  TocResponse,
+} from "../types/book";
 
 export const booksApi = {
   async getEBooks(): Promise<EBookListItem[]> {
@@ -7,11 +17,51 @@ export const booksApi = {
     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,

frontend/src/components/search/SearchSuggestions.module.css

@@ -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;
+}

frontend/src/components/search/SearchSuggestions.tsx

@@ -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>
+  );
+}

frontend/src/hooks/index.ts

@@ -1 +1,4 @@
 export { usePaginatedQuery } from "./usePaginatedQuery";
+export { useDebounce } from "./useDebounce";
+export { useVoiceSearch } from "./useVoiceSearch";
+export { useMediaQuery } from "./useMediaQuery";

frontend/src/hooks/useDebounce.ts

@@ -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;
+}

frontend/src/hooks/useMediaQuery.ts

@@ -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;

frontend/src/hooks/useVoiceSearch.ts

@@ -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,
+  };
+}

frontend/src/pages/BookDetailPage.tsx

@@ -2,6 +2,7 @@ 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 }>();
@@ -9,6 +10,7 @@ export function BookDetailPage() {
   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;
@@ -40,12 +42,42 @@ export function BookDetailPage() {
     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={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
+      <div style={containerStyle}>
         <div style={{ height: 32, width: 80, background: "#e5e7eb", borderRadius: 6, marginBottom: 24 }} />
-        <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
+        <div style={{ display: "flex", gap: isMobile ? 16 : 24, flexDirection: isMobile ? "column" : "row" }}>
-          <div style={{ width: 240, height: 360, background: "#e5e7eb", borderRadius: 12, flexShrink: 0 }} />
+          <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%" }} />
@@ -61,13 +93,13 @@ export function BookDetailPage() {
 
   if (error || !book) {
     return (
-      <div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
+      <div style={containerStyle}>
-        <button onClick={() => navigate("/")} className="btn btn-secondary" style={{ marginBottom: 24 }}>← Back to Library</button>
+        <button onClick={() => navigate("/")} style={backButtonStyle}>← Back to Library</button>
-        <div style={{ textAlign: "center", padding: "80px 20px" }}>
+        <div style={{ textAlign: "center", padding: isMobile ? "60px 16px" : "80px 20px" }}>
-          <div style={{ fontSize: 64, marginBottom: 16 }}>😕</div>
+          <div style={{ fontSize: isMobile ? 48 : 64, marginBottom: 16 }}>😕</div>
-          <h2 style={{ fontSize: 20, color: "#1f2937", marginBottom: 8 }}>Book not found</h2>
+          <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: "10px 24px" }}>Retry</button>
+          <button onClick={() => void loadBook()} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>Retry</button>
         </div>
       </div>
     );
@@ -76,57 +108,56 @@ export function BookDetailPage() {
   const sc = statusColors[book.reading_status] ?? { bg: "#f3f4f6", text: "#6b7280" };
 
   return (
-    <div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
+    <div style={containerStyle}>
       {/* Back button */}
-      <button
+      <button onClick={() => navigate("/")} style={backButtonStyle}>
-        onClick={() => navigate("/")}
+        ← {isMobile ? "Back" : "Back to Library"}
-        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" }}>
+      <div style={{ display: "flex", gap: isMobile ? 20 : 32, flexDirection: isMobile ? "column" : "row" }}>
         {/* Cover */}
-        <div style={{ flexShrink: 0 }}>
+        <div style={{ flexShrink: 0, alignSelf: isMobile ? "center" : "flex-start" }}>
           <div style={{
-            width: 240, height: 360, borderRadius: 12, overflow: "hidden",
+            width: isMobile ? 160 : 240,
-            background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center",
+            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: 80 }}>📖</span>}
+              : <span style={{ fontSize: isMobile ? 48 : 80 }}>📖</span>}
           </div>
         </div>
 
         {/* Info */}
-        <div style={{ flex: 1, minWidth: 240 }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
-          <h1 style={{ fontSize: 28, fontWeight: 700, color: "#1f2937", marginBottom: 8, lineHeight: 1.2 }}>
+          <h1 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, color: "#1f2937", marginBottom: 8, lineHeight: 1.2 }}>
             {book.title}
           </h1>
 
           {book.author && (
-            <p style={{ fontSize: 18, color: "#4b5563", marginBottom: 6 }}>
+            <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 }}>
+            <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 }}>
+              <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 }}>
+              <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>
             )}
@@ -135,7 +166,7 @@ export function BookDetailPage() {
           {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" }}>
+              <p style={{ fontSize: isMobile ? 15 : 15, color: "#4b5563", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
                 {book.description}
               </p>
             </div>
@@ -148,10 +179,28 @@ export function BookDetailPage() {
             </p>
           </div>
 
-          {/* Mobile-only: open in reader if it's an ebook, or just navigate back */}
+          {/* Mobile full-width back button */}
-          <div style={{ marginTop: 24, display: "none" }}>
+          {isMobile && (
-            <button onClick={() => navigate("/")} className="btn btn-block">Back to Library</button>
+            <div style={{ marginTop: 24 }}>
-          </div>
+              <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>

frontend/src/pages/Library.module.css

@@ -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);
+}

frontend/src/pages/Library.tsx

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

frontend/src/types/book.ts

@@ -82,3 +82,21 @@ export interface ContentResponse {
   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" },
+];

frontend/src/types/speech-recognition.d.ts

@@ -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;
+}