Function SearchListView

src/pages/SearchPage/SearchListView.tsx:17–145

({
    books, downloadingIds, favoriteIds,
    getCoverUrl, handleCoverError, onBookClick, onDownload, onToggleFavorite,
}: SearchListViewProps)

}

export default function SearchListView({
    books, downloadingIds, favoriteIds,
    getCoverUrl, handleCoverError, onBookClick, onDownload, onToggleFavorite,
}: SearchListViewProps) {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "10px", marginBottom: "24px" }}>
            {books.map((book, i) => {
                const isDownloading = downloadingIds.has(book.id);
                const coverUrl = getCoverUrl(String(book.id), book.cover);
                return (
                    <div
                        onClick={() => onBookClick(book)}
                        key={i}
                        className="card"
                        style={{
                            padding: 0,
                            overflow: "hidden",
                            transition: "all var(--transition-fast)",
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.borderColor = "var(--accent)";
                            e.currentTarget.style.boxShadow = "var(--shadow-sm)";
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.borderColor = "var(--border)";
                            e.currentTarget.style.boxShadow = "none";
                        }}
                    >
                        <div style={{ display: "flex" }}>
                            {/* Mini Cover */}
                            <div style={{
                                position: "relative",
                                width: "64px",
                                minHeight: "88px",
                                flexShrink: 0,
                                background: "var(--bg-tertiary)",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                overflow: "hidden",
                            }}>
                                {coverUrl ? (
                                    <img
                                        src={coverUrl}
                                        alt={book.title}
                                        loading="lazy"
                                        style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                        onError={() => handleCoverError(String(book.id))}
                                    />
                                ) : (
                                    <BookOpen size={22} style={{ opacity: 0.2 }} />
                                )}
                            </div>

                            {/* Info */}
                            <div style={{
                                flex: 1, minWidth: 0, padding: "12px 16px",
                                display: "flex", flexDirection: "column", justifyContent: "center",