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/)
2026-05-29 05:59:10 +00:00
parent 74fdae61db 3f626259e8
commit edac7cb08a
102 changed files with 4400 additions and 2847 deletions
@@ -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>
+  );
+}