Function DiscoverPage

src/pages/DiscoverPage/index.tsx:22–358

()

};

const DiscoverPage: React.FC = () => {
  const [books, setBooks] = useState<Book[]>([]);
  const [currentIndex, setCurrentIndex] = useState(() => {
    try {
      const saved = localStorage.getItem('olib-discover-current-index');
      return saved ? Math.max(0, parseInt(saved, 10) || 0) : 0;
    } catch { return 0; }
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [errorIsLine, setErrorIsLine] = useState(false);
  const [downloadingIds, setDownloadingIds] = useState<Set<string>>(new Set());
  const [limitError, setLimitError] = useState<string | null>(null);
  const [selectedBook, setSelectedBook] = useState<any>(null);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [viewMode, setViewMode] = useState<'shelf' | 'grid'>('shelf');

  const { getCoverUrl, handleCoverError } = useCoverCache();

  const currentIndexRef = useRef(currentIndex);
  currentIndexRef.current = currentIndex;
  const booksRef = useRef(books);
  booksRef.current = books;
  const viewModeRef = useRef(viewMode);
  viewModeRef.current = viewMode;

  // Restore saved view mode
  useEffect(() => {
    try {
      const savedMode = localStorage.getItem('olib-discover-view-mode');
      if (savedMode === 'grid' || savedMode === 'shelf') setViewMode(savedMode);
      // Migrate old 'tinder' preference
      if (savedMode === 'tinder') {
        setViewMode('shelf');
        localStorage.setItem('olib-discover-view-mode', 'shelf');
      }
    } catch { /* ignore */ }
  }, []);

  const handleViewModeChange = (mode: 'shelf' | 'grid') => {
    setViewMode(mode);
    try { localStorage.setItem('olib-discover-view-mode', mode); } catch { /* ignore */ }
  };

  const quote = useMemo(
    () => READING_QUOTES[Math.floor(Math.random() * READING_QUOTES.length)],
    []
  );

  useEffect(() => { loadBooks(); }, []);

  // Keyboard handler (simplified: ← → browse, Enter detail, F favorite)
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (selectedBook) return;
      if (viewModeRef.current !== 'shelf') return;

      if (e.key === 'ArrowLeft') {