Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139import React from "react";import { Article, BookmarkSimple, BookOpenText, CaretLeft, GearSix, Plus,} from "@phosphor-icons/react";import { handleTabListKeyDown, IconButton } from "./ui.jsx";
export function LibraryPanel({ inactive = false, open, width, kind, materials, activeId, loading, search, highlightCount, onKindChange, onClose, onAdd, onOpenMaterial, onShowHighlights, onSettings, onResize,}) { return ( <aside className={"library-panel panel " + (!open ? "hidden-panel" : "")} style={{ width }} aria-label="Library" inert={inactive || !open ? "" : undefined} > <div className="panel-title"> <span>Library</span> <IconButton label="Hide library panel" onClick={onClose}> <CaretLeft size={18} /> </IconButton> </div> <div className="segmented mode-switch" role="tablist" aria-label="Material type" data-selected={kind === "book" ? "second" : "first"} onKeyDown={handleTabListKeyDown} > <button role="tab" aria-selected={kind === "article"} tabIndex={kind === "article" ? 0 : -1} type="button" className={kind === "article" ? "active" : ""} onClick={() => onKindChange("article")} > Articles </button> <button role="tab" aria-selected={kind === "book"} tabIndex={kind === "book" ? 0 : -1} type="button" className={kind === "book" ? "active" : ""} onClick={() => onKindChange("book")} > Books </button> </div> <button className="add-material" onClick={onAdd}> <span className="add-material-icon" aria-hidden="true"> <Plus size={16} weight="bold" /> </span> {kind === "article" ? "Add article" : "Add book"} </button> <div className="material-list"> {materials.map((material) => ( <button key={material.id} className={ "material-row " + (activeId === material.id ? "active" : "") } onClick={() => onOpenMaterial(material)} > <span className="material-icon" aria-hidden="true"> {material.kind === "book" ? ( <BookOpenText size={18} /> ) : ( <Article size={18} /> )} </span> <span className="material-details"> <strong>{material.title}</strong> <span> {material.status === "indexing" ? `Indexing · ${material.progress}/${material.page_count || "?"}` : material.subject || (material.kind === "book" ? `${material.page_count} pages` : "Article")} </span> </span> </button> ))} {!materials.length && !loading && ( <p className="library-empty"> {search ? "No matching materials." : kind === "article" ? "Your articles will appear here." : "Import a PDF to start reading."} </p> )} </div> <div className="library-footer"> <button onClick={onShowHighlights}> <BookmarkSimple size={19} /> Highlights {highlightCount > 0 && ( <span className="count">{highlightCount}</span> )} </button> <button onClick={onSettings}> <GearSix size={19} /> Settings </button> </div> <div className="resize-handle right" role="separator" aria-orientation="vertical" aria-label="Resize library" onPointerDown={onResize} /> </aside> );}