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

frontend/src/components/search/SearchSuggestions.tsx

@@ -1,7 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+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;
@@ -10,15 +12,6 @@ interface SearchSuggestionsProps {
   onSelectSuggestion: () => void;
 }
 
-function useDebounce<T>(value: T, delay: number): T {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debounced;
-}
-
 export function SearchSuggestions({ query, visible, onClose, onSelectSuggestion }: SearchSuggestionsProps) {
   const navigate = useNavigate();
   const [suggestions, setSuggestions] = useState<BookListItem[]>([]);
@@ -81,81 +74,42 @@ export function SearchSuggestions({ query, visible, onClose, onSelectSuggestion
   if (!visible || !query.trim()) return null;
 
   return (
-    <div
-      ref={containerRef}
-      style={{
-        position: "absolute",
-        top: "100%",
-        left: 0,
-        right: 0,
-        zIndex: 100,
-        background: "#fff",
-        border: "1px solid #e5e7eb",
-        borderTop: "none",
-        borderRadius: "0 0 10px 10px",
-        boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
-        maxHeight: 320,
-        overflowY: "auto",
-      }}
-    >
+    <div ref={containerRef} className={styles.container}>
       {loading && (
-        <div style={{ padding: "12px 16px", color: "#9ca3af", fontSize: 13 }}>
+        <div className={styles.infoText}>
           Searching...
         </div>
       )}
       {!loading && suggestions.length === 0 && debouncedQuery.trim() && (
-        <div style={{ padding: "12px 16px", color: "#9ca3af", fontSize: 13 }}>
+        <div className={styles.infoText}>
           No quick suggestions
         </div>
       )}
       {suggestions.map((book) => (
         <div
           key={book.id}
+          className={styles.suggestionItem}
           onClick={() => {
             onSelectSuggestion();
             navigate(`/books/${book.id}`);
           }}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 12,
-            padding: "10px 16px",
-            cursor: "pointer",
-            borderBottom: "1px solid #f3f4f6",
-            minHeight: 44,
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.background = "#f9fafb";
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.background = "";
-          }}
         >
-          <span style={{ fontSize: 20, flexShrink: 0 }}>
+          <span className={styles.coverPlaceholder}>
             {book.cover_image ? (
               <img
                 src={book.cover_image}
                 alt=""
-                style={{ width: 32, height: 48, objectFit: "cover", borderRadius: 4 }}
+                className={styles.coverImage}
               />
             ) : (
               "📖"
             )}
           </span>
-          <div style={{ minWidth: 0 }}>
-            <div
-              style={{
-                fontSize: 14,
-                fontWeight: 600,
-                color: "#1f2937",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
+          <div className={styles.bookInfo}>
+            <div className={styles.bookTitle}>
               {book.title}
             </div>
-            <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>
+            <div className={styles.bookAuthor}>
               {book.author || "Unknown Author"}
             </div>
           </div>