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

frontend/src/pages/Library.tsx

@@ -4,9 +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;
@@ -14,15 +16,6 @@ interface FilterState {
   reading_status: string;
 }
 
-function useDebounce<T>(value: T, delay: number): T {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debounced;
-}
-
 /** WCAG 2.1 minimum touch target */
 const TOUCH_TARGET: React.CSSProperties = {
   minHeight: 44,
@@ -480,23 +473,9 @@ export function LibraryPage() {
               <div
                 key={book.id}
                 onClick={() => navigate(`/books/${book.id}`)}
+                className={styles.bookCard}
                 style={{
-                  background: "#fff",
-                  borderRadius: 12,
-                  overflow: "hidden",
-                  boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
-                  cursor: "pointer",
-                  transition: "transform 0.15s, box-shadow 0.15s",
                   display: isMobile ? "flex" : "block",
-                  minHeight: isMobile ? undefined : undefined,
-                }}
-                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={{