feat: uv config other feats

- add uv configuration for the backend - update frontend to make auth work - add new auth endpoints - add bookmars feat - add reader feat
2026-06-03 22:06:01 -05:00
parent 730c748f5f
commit 6b4c0c43f8
137 changed files with 20319 additions and 2340 deletions
@@ -1,14 +1,17 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18n-lite";
 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 { deriveReadingStatus, normalizeProgressPercent } from "../utils/libraryStatus";
+import { FinishedBooksShelf } from "../components/library/FinishedBooksShelf";
+import { LibraryBookCard } from "../components/library/LibraryBookCard";
 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";
+import { BookContextMenu } from "../components/BookContextMenu";

 interface FilterState {
  genre: string;
@@ -16,6 +19,17 @@ interface FilterState {
  reading_status: string;
 }

+type LibraryBook = BookListItem & {
+  format: string;
+  progressPercent: number | null;
+};
+
+interface ContextMenuState {
+  book: LibraryBook;
+  x: number;
+  y: number;
+}
+
 /** WCAG 2.1 minimum touch target */
 const TOUCH_TARGET: React.CSSProperties = {
  minHeight: 44,
@@ -28,10 +42,12 @@ const TOUCH_TARGET: React.CSSProperties = {
 export function LibraryPage() {
  const navigate = useNavigate();
  const { logout } = useAuth();
+  const { t } = useTranslation();

-  const [books, setBooks] = useState<BookListItem[]>([]);
+  const [books, setBooks] = useState<LibraryBook[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [readerNotice, setReaderNotice] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [filters, setFilters] = useState<FilterState>({ genre: "", author: "", reading_status: "" });
  const [genres, setGenres] = useState<string[]>([]);
@@ -39,6 +55,7 @@ export function LibraryPage() {
  const [totalCount, setTotalCount] = useState(0);
  const [showFilters, setShowFilters] = useState(false);
  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);

  const debouncedSearch = useDebounce(searchQuery, 300);
  const loadedRef = useRef(false);
@@ -75,17 +92,54 @@ export function LibraryPage() {
    setLoading(true);
    setError(null);
    try {
-      const response = await booksApi.searchBooks(params);
-      setBooks(response.results);
-      setTotalCount(response.count);
+      const ebooks = await booksApi.getEBooks();
+      let items: LibraryBook[] = ebooks.map((e) => {
+        const reading_status = deriveReadingStatus(e.progress, Boolean(e.started));
+        const progressPercent = normalizeProgressPercent(e.progress, reading_status);
+        return {
+          id: e.id,
+          title: e.title,
+          author: e.author,
+          genre: e.format ? e.format.toUpperCase() : "",
+          format: e.format,
+          reading_status,
+          reading_status_display: reading_status,
+          cover_image: e.cover_image,
+          progressPercent,
+        };
+      });
+      const query = params.q?.trim().toLowerCase();
+      if (query) {
+        items = items.filter(
+          (b) =>
+            b.title.toLowerCase().includes(query) ||
+            b.author.toLowerCase().includes(query) ||
+            b.genre.toLowerCase().includes(query),
+        );
+      }
+      if (params.author) items = items.filter((b) => b.author === params.author);
+      if (params.genre) items = items.filter((b) => b.genre === params.genre);
+      if (params.reading_status) {
+        items = items.filter((b) => b.reading_status === params.reading_status);
+      }
+      setBooks(items);
+      setTotalCount(items.length);
    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load books");
+      setError(err instanceof Error ? err.message : t("library.loadFailed"));
      setBooks([]);
      setTotalCount(0);
    } finally {
      setLoading(false);
    }
-  }, []);
+  }, [t]);
+
+  const statusFilterOptions = [
+    { value: "", label: t("library.allStatuses") },
+    { value: "want_to_read", label: t("library.readingStatus.wantToRead") },
+    { value: "reading", label: t("library.readingStatus.reading") },
+    { value: "finished", label: t("library.readingStatus.finished") },
+    { value: "dnf", label: t("library.readingStatus.dnf") },
+  ];

  // Reload when search or filters change
  useEffect(() => {
@@ -109,10 +163,59 @@ export function LibraryPage() {

  const hasActiveFilters = !!searchQuery || !!filters.genre || !!filters.author || !!filters.reading_status;

+  const handleBookUpdated = useCallback((updated: LibraryBook) => {
+    setBooks((prev) =>
+      prev.map((b) =>
+        b.id === updated.id
+          ? {
+              ...b,
+              ...updated,
+              progressPercent: updated.progressPercent ?? b.progressPercent,
+              reading_status: updated.reading_status ?? b.reading_status,
+            }
+          : b,
+      ),
+    );
+  }, []);
+
+  const handleBookRemoved = useCallback((id: number) => {
+    setBooks((prev) => prev.filter((b) => b.id !== id));
+    setTotalCount((count) => Math.max(0, count - 1));
+  }, []);
+
+  const handleBookContextMenu = useCallback((e: React.MouseEvent, book: LibraryBook) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ book, x: e.clientX, y: e.clientY });
+  }, []);
+
+  const activeBooks = useMemo(
+    () => books.filter((b) => b.reading_status !== "finished"),
+    [books],
+  );
+  const finishedBooks = useMemo(
+    () => books.filter((b) => b.reading_status === "finished"),
+    [books],
+  );
+  const shelfVisible = finishedBooks.length > 0;
+  const finishedFilterActive = filters.reading_status === "finished";
+
+  const openBook = useCallback(
+    (book: LibraryBook) => {
+      if (book.format === "pdf") {
+        setReaderNotice(t("library.pdfNotice"));
+        return;
+      }
+      navigate(`/read/${book.id}`);
+    },
+    [navigate, t],
+  );
+
  const containerStyle: React.CSSProperties = {
    maxWidth: 960,
    margin: "0 auto",
    padding: isMobile ? 12 : 16,
+    paddingBottom: shelfVisible ? (isMobile ? 72 : 68) : undefined,
    minHeight: "100vh",
    background: "#f8f9fa",
  };
@@ -138,27 +241,35 @@ export function LibraryPage() {
      {/* Header */}
      <header style={headerStyle}>
        <div>
-          <h1 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>Library</h1>
+          <h1 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>{t("library.title")}</h1>
          {!loading && (
            <p style={{ fontSize: 13, color: "#6b7280", marginTop: 2 }}>
-              {totalCount} book{totalCount !== 1 ? "s" : ""}
+              {activeBooks.length === 1
+                ? t("library.bookCountOne", { count: String(activeBooks.length) })
+                : t("library.bookCountMany", { count: String(activeBooks.length) })}
+              {finishedBooks.length > 0 && (
+                <span>
+                  {" · "}
+                  {t("library.finishedCountShort", { count: String(finishedBooks.length) })}
+                </span>
+              )}
            </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")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.addBook")}>➕</button>
+              <button onClick={() => navigate("/bookmarks-notes")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.bookmarks")}>🔖</button>
+              <button onClick={() => navigate("/settings")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.settings")}>⚙️</button>
+              <button onClick={logout} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.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>
+              <button onClick={() => navigate("/add")} className="btn">+ {t("library.addBook")}</button>
+              <button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">{t("library.bookmarks")}</button>
+              <button onClick={() => navigate("/settings")} className="btn btn-secondary">{t("library.settings")}</button>
+              <button onClick={logout} className="btn btn-danger">{t("library.logout")}</button>
            </>
          )}
        </div>
@@ -171,7 +282,7 @@ export function LibraryPage() {
            <input
              ref={searchInputRef}
              type="text"
-              placeholder="Search by title, author, or genre..."
+              placeholder={t("library.searchPlaceholder")}
              value={searchQuery}
              onChange={(e) => {
                setSearchQuery(e.target.value);
@@ -225,7 +336,7 @@ export function LibraryPage() {
                  color: voiceSearch.isListening ? "#fff" : "#6b7280",
                  transition: "background 0.15s",
                }}
-                title={voiceSearch.isListening ? "Stop listening" : "Search with voice"}
+                title={voiceSearch.isListening ? t("library.voiceSearchStopTitle") : t("library.voiceSearchTitle")}
              >
                🎤
              </button>
@@ -255,7 +366,7 @@ export function LibraryPage() {
              gap: 4,
            }}
          >
-            {isMobile ? "⚙️" : showFilters ? "▲ Filters" : "▼ Filters"}
+            {isMobile ? "⚙️" : `▼ ${t("library.filtersLabel")}`}
          </button>
        </div>
      </div>
@@ -274,7 +385,7 @@ export function LibraryPage() {
          color: "#dc2626",
        }}>
          <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: "#dc2626", animation: "pulse 1s infinite" }} />
-          Listening... speak now
+          {t("library.listening")}
          <button
            onClick={voiceSearch.stopListening}
            style={{
@@ -288,7 +399,7 @@ export function LibraryPage() {
              fontSize: 12,
            }}
          >
-            Stop
+            {t("library.stop")}
          </button>
        </div>
      )}
@@ -303,7 +414,7 @@ export function LibraryPage() {
          fontSize: 13,
          color: "#92400e",
        }}>
-          Voice search: {voiceSearch.errorMessage === "no-speech" ? "No speech detected. Try again." : voiceSearch.errorMessage}
+          {voiceSearch.errorMessage === "no-speech" ? t("library.voiceNoSpeech") : t("library.voiceError", { message: voiceSearch.errorMessage ?? "" })}
        </div>
      )}

@@ -321,7 +432,7 @@ export function LibraryPage() {
          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>
+            <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>{t("library.genre")}</label>
            <select
              value={filters.genre}
              onChange={(e) => handleFilterChange("genre", e.target.value)}
@@ -336,12 +447,12 @@ export function LibraryPage() {
                minHeight: 36,
              }}
            >
-              <option value="">All Genres</option>
+              <option value="">{t("library.allGenres")}</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>
+            <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>{t("library.author")}</label>
            <select
              value={filters.author}
              onChange={(e) => handleFilterChange("author", e.target.value)}
@@ -356,12 +467,12 @@ export function LibraryPage() {
                minHeight: 36,
              }}
            >
-              <option value="">All Authors</option>
+              <option value="">{t("library.allAuthors")}</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>
+            <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>{t("library.status")}</label>
            <select
              value={filters.reading_status}
              onChange={(e) => handleFilterChange("reading_status", e.target.value)}
@@ -376,7 +487,7 @@ export function LibraryPage() {
                minHeight: 36,
              }}
            >
-              {READING_STATUS_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
+              {statusFilterOptions.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
            </select>
          </div>
          {hasActiveFilters && (
@@ -395,7 +506,7 @@ export function LibraryPage() {
                width: isMobile ? "100%" : "auto",
              }}
            >
-              ✕ Clear
+              ✕ {t("library.clearFilters")}
            </button>
          )}
        </div>
@@ -405,7 +516,14 @@ 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, minHeight: 36 }}>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 }}>{t("common.retry")}</button>
+        </div>
+      )}
+
+      {readerNotice && (
+        <div style={{ background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 8, padding: "12px 16px", marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
+          <p style={{ color: "#92400e", fontSize: 14, margin: 0 }}>{readerNotice}</p>
+          <button type="button" onClick={() => setReaderNotice(null)} style={{ padding: "4px 10px", border: "none", borderRadius: 6, background: "#f59e0b", color: "#fff", cursor: "pointer", fontSize: 12, flexShrink: 0 }}>{t("common.dismiss")}</button>
        </div>
      )}

@@ -434,112 +552,71 @@ export function LibraryPage() {
        <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"}
+            {hasActiveFilters ? t("library.emptyFilteredTitle") : t("library.emptyTitle")}
          </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."}
+              ? t("library.emptyFilteredDescription")
+              : t("library.emptyDescription")}
          </p>
          {hasActiveFilters ? (
            <button onClick={clearAllFilters} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>
-              Clear All Filters
+              {t("library.clearAllFilters")}
            </button>
          ) : (
            <button onClick={() => navigate("/add")} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>
-              Add Your First Book
+              {t("library.addFirstBook")}
            </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" };
+      {!loading && activeBooks.length === 0 && finishedBooks.length > 0 && !hasActiveFilters && (
+        <p style={{ textAlign: "center", color: "#6b7280", fontSize: 14, marginBottom: 16 }}>
+          {t("library.allInFinishedShelf")}
+        </p>
+      )}

-            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>
-            );
-          })}
+      {/* Active library grid (want to read, reading) */}
+      {!loading && activeBooks.length > 0 && (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fill, minmax(200px, 1fr))",
+            gap: isMobile ? 12 : 16,
+          }}
+        >
+          {activeBooks.map((book) => (
+            <LibraryBookCard
+              key={book.id}
+              book={book}
+              isMobile={isMobile}
+              onOpen={() => openBook(book)}
+              onContextMenu={(e) => handleBookContextMenu(e, book)}
+            />
+          ))}
        </div>
      )}
+
+      {shelfVisible && (
+        <FinishedBooksShelf
+          books={finishedBooks}
+          defaultExpanded={finishedFilterActive}
+          onOpenBook={(book) => openBook(book as LibraryBook)}
+          onContextMenu={(e, book) => handleBookContextMenu(e, book as LibraryBook)}
+        />
+      )}
+
+      {contextMenu && (
+        <BookContextMenu
+          book={contextMenu.book}
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          onBookUpdated={handleBookUpdated}
+          onBookRemoved={handleBookRemoved}
+        />
+      )}
    </div>
  );
 }