\n 📚 Book Explorer\n

\n setShowUserDropdown(!showUserDropdown)}\n className=\"flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition-colors\"\n >\n Logged in as: {session.handle}\n \n \n \n \n {showUserDropdown && (\n

\n {\n setCurrentView(\"books\");\n setShowUserDropdown(false);\n }}\n className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${\n currentView === \"books\" ? \"bg-gray-50 font-medium\" : \"\"\n }`}\n >\n 📚 My Books\n \n {\n setCurrentView(\"tools\");\n setShowUserDropdown(false);\n }}\n className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${\n currentView === \"tools\" ? \"bg-gray-50 font-medium\" : \"\"\n }`}\n >\n 🔧 Tools\n \n

\n {\n handleLogout();\n setShowUserDropdown(false);\n }}\n className=\"w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50\"\n >\n Logout\n \n

\n )}\n

\n\n {currentView === \"tools\" ? : (\n <>\n {error && (\n

\n {error}\n

\n )}\n\n {books.length > 0 && (\n

\n My Books ({statusFilter\n ? `${filteredBooks.length} of ${books.length}`\n : books.length})\n

\n Page {currentPage + 1} of {totalPages} • Showing{\" \"}\n {paginatedBooks.length} books\n {statusFilter &&\n ` (filtered by ${STATUS_LABELS[statusFilter]})`}\n

\n\n \n\n {showBulkActions && (\n \n )}\n\n \n\n {totalPages > 1 && (\n \n )}\n

\n )}\n\n {!loading && books.length === 0 && (\n

📚

\n No books found\n

\n Your book collection will appear here once you add some books\n to your Bluesky profile.\n

\n )}\n \n )}\n

\n\n {/* Toast Container */}\n \n

\n );\n}\n\nconst statusOptions: BookStatus[] = [\n \"buzz.bookhive.defs#wantToRead\",\n \"buzz.bookhive.defs#reading\",\n \"buzz.bookhive.defs#finished\",\n \"buzz.bookhive.defs#abandoned\",\n \"buzz.bookhive.defs#owned\",\n];\n\nconst getStatusColor = (status: BookStatus) => {\n switch (status) {\n case \"buzz.bookhive.defs#finished\":\n return \"bg-green-100 text-green-800\";\n case \"buzz.bookhive.defs#reading\":\n return \"bg-blue-100 text-blue-800\";\n case \"buzz.bookhive.defs#wantToRead\":\n return \"bg-yellow-100 text-yellow-800\";\n case \"buzz.bookhive.defs#abandoned\":\n return \"bg-red-100 text-red-800\";\n case \"buzz.bookhive.defs#owned\":\n return \"bg-gray-100 text-gray-800\";\n default:\n return \"bg-gray-100 text-gray-800\";\n }\n};\n\ninterface BooksTableProps {\n books: AtProtoRecord[];\n selectedBooks: Set;\n onToggleSelection: (uri: string) => void;\n onSelectAll: () => void;\n onClearSelection: () => void;\n onStatusUpdate: (uri: string, status: BookStatus) => void;\n}\n\nfunction BooksTable({\n books,\n selectedBooks,\n onToggleSelection,\n onSelectAll,\n onClearSelection,\n onStatusUpdate,\n}: BooksTableProps) {\n const allSelected = books.length > 0 &&\n books.every((book) => selectedBooks.has(book.uri));\n const someSelected = selectedBooks.size > 0 && !allSelected;\n\n const handleSelectAll = () => {\n if (allSelected) {\n onClearSelection();\n } else {\n onSelectAll();\n }\n };\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {books.map((record) => (\n \n ))}\n \n

\n {\n if (input) (input as any).indeterminate = someSelected;\n }}\n onChange={handleSelectAll}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n	\n Title\n	\n Author\n	\n Status\n	\n Added\n	\n Technical\n	\n Actions\n

\n );\n}\n\ninterface BookRowProps {\n record: AtProtoRecord;\n isSelected: boolean;\n onToggleSelection: (uri: string) => void;\n onStatusUpdate: (uri: string, status: BookStatus) => void;\n}\n\nfunction BookRow({\n record,\n isSelected,\n onToggleSelection,\n onStatusUpdate,\n}: BookRowProps) {\n const book = record.value;\n const currentStatus = book.status as BookStatus;\n const [showTechnical, setShowTechnical] = useState(false);\n\n return (\n \n \n onToggleSelection(record.uri)}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n \n \n \n {book.title}\n \n {book.stars && (\n

\n {\"★\".repeat(book.stars)} ({book.stars}/10)\n

\n )}\n \n \n \n {book.authors}\n \n \n \n \n {STATUS_LABELS[currentStatus] || currentStatus}\n \n \n \n

\n {new Date(book.createdAt).toLocaleDateString()}\n

\n {book.startedAt && (\n

\n Started: {new Date(book.startedAt).toLocaleDateString()}\n

\n )}\n {book.finishedAt && (\n

\n Finished: {new Date(book.finishedAt).toLocaleDateString()}\n

\n )}\n \n \n setShowTechnical(!showTechnical)}\n className=\"text-xs text-blue-600 hover:text-blue-800\"\n >\n {showTechnical ? \"Hide\" : \"Show\"}\n \n {showTechnical && (\n

URI: {record.uri.slice(-20)}...

CID: {record.cid.slice(-20)}...

Hive: {book.hiveId}

\n )}\n \n \n

\n {\n const target = e.target as HTMLSelectElement;\n onStatusUpdate(record.uri, target.value as BookStatus);\n }}\n className=\"text-xs border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500\"\n >\n {statusOptions.map((status) => (\n \n ))}\n \n \n \n \n \n \n

\n \n \n );\n}\n\ninterface BulkActionsProps {\n selectedCount: number;\n onStatusUpdate: (status: BookStatus) => void;\n onClearSelection: () => void;\n}\n\nfunction BulkActions(\n { selectedCount, onStatusUpdate, onClearSelection }: BulkActionsProps,\n) {\n return (\n

\n {selectedCount} book{selectedCount === 1 ? \"\" : \"s\"} selected\n

\n Change status to:\n {statusOptions.map((status) => (\n onStatusUpdate(status)}\n className={`px-2 py-1 rounded text-xs ${\n getStatusColor(status)\n } hover:opacity-80`}\n >\n {STATUS_LABELS[status]}\n \n ))}\n \n Clear\n \n

\n );\n}\n\ninterface PaginationProps {\n currentPage: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n}\n\nfunction Pagination(\n { currentPage, totalPages, onPageChange }: PaginationProps,\n) {\n const pages = [];\n const showPages = 5;\n let startPage = Math.max(0, currentPage - Math.floor(showPages / 2));\n const endPage = Math.min(totalPages - 1, startPage + showPages - 1);\n\n if (endPage - startPage < showPages - 1) {\n startPage = Math.max(0, endPage - showPages + 1);\n }\n\n for (let i = startPage; i <= endPage; i++) {\n pages.push(i);\n }\n\n return (\n

\n onPageChange(currentPage - 1)}\n disabled={currentPage === 0}\n className=\"px-3 py-1 border border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n ← Prev\n \n\n {startPage > 0 && (\n <>\n onPageChange(0)}\n className=\"px-3 py-1 border border-gray-300 rounded hover:bg-gray-50\"\n >\n 1\n \n {startPage > 1 && ...}\n \n )}\n\n {pages.map((page) => (\n onPageChange(page)}\n className={`px-3 py-1 border rounded ${\n page === currentPage\n ? \"bg-blue-600 text-white border-blue-600\"\n : \"border-gray-300 hover:bg-gray-50\"\n }`}\n >\n {page + 1}\n \n ))}\n\n {endPage < totalPages - 1 && (\n <>\n {endPage < totalPages - 2 && (\n ...\n )}\n onPageChange(totalPages - 1)}\n className=\"px-3 py-1 border border-gray-300 rounded hover:bg-gray-50\"\n >\n {totalPages}\n \n \n )}\n\n onPageChange(currentPage + 1)}\n disabled={currentPage === totalPages - 1}\n className=\"px-3 py-1 border border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n Next →\n \n

\n );\n}\n\ninterface ToastContainerProps {\n toasts: Toast[];\n onRemoveToast: (id: string) => void;\n}\n\nfunction ToastContainer({ toasts, onRemoveToast }: ToastContainerProps) {\n if (toasts.length === 0) return null;\n\n return (\n

\n {toasts.map((toast) => (\n \n ))}\n

\n );\n}\n\ninterface ToastMessageProps {\n toast: Toast;\n onRemove: (id: string) => void;\n}\n\nfunction ToastMessage({ toast, onRemove }: ToastMessageProps) {\n const getToastStyles = (type: Toast[\"type\"]) => {\n switch (type) {\n case \"success\":\n return \"bg-green-500 text-white\";\n case \"error\":\n return \"bg-red-500 text-white\";\n case \"info\":\n return \"bg-blue-500 text-white\";\n default:\n return \"bg-gray-500 text-white\";\n }\n };\n\n const getIcon = (type: Toast[\"type\"]) => {\n switch (type) {\n case \"success\":\n return \"✅\";\n case \"error\":\n return \"❌\";\n case \"info\":\n return \"ℹ️\";\n default:\n return \"📝\";\n }\n };\n\n return (\n \n

\n {getIcon(toast.type)}\n

{toast.message}

\n onRemove(toast.id)}\n className=\"text-white/80 hover:text-white ml-2 shrink-0\"\n >\n ✕\n \n \n );\n}\n\ninterface BookFilterProps {\n currentFilter: BookStatus | null;\n onFilterChange: (filter: BookStatus | null) => void;\n}\n\nfunction BookFilter({ currentFilter, onFilterChange }: BookFilterProps) {\n return (\n

\n \n Filter by status:\n \n {\n const target = e.target as HTMLSelectElement;\n onFilterChange(target.value as BookStatus || null);\n }}\n className=\"border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n {statusOptions.map((status) => (\n \n ))}\n \n

\n\n {currentFilter && (\n onFilterChange(null)}\n className=\"px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 self-start sm:self-auto\"\n >\n Clear Filter\n \n )}\n\n {currentFilter && (\n

\n Showing books with status:{\" \"}\n \n {STATUS_LABELS[currentFilter]}\n \n

\n )}\n

\n );\n}\n\ninterface ToolsViewProps {\n showToast: (type: Toast[\"type\"], message: string) => void;\n}\n\nfunction ToolsView({ showToast }: ToolsViewProps) {\n const [csvFile, setCsvFile] = useState(null);\n const [processing, setProcessing] = useState(false);\n const [processingStatus, setProcessingStatus] = useState(\"\");\n const [results, setResults] = useState<\n {\n total: number;\n updated: number;\n failed: number;\n books: Array<{ title: string; status: string; success: boolean }>;\n } | null\n >(null);\n\n const handleFileChange = (e: React.ChangeEvent) => {\n const target = e.target as HTMLInputElement;\n if (target.files && target.files[0]) {\n setCsvFile(target.files[0]);\n setResults(null);\n }\n };\n\n const parseCsvFile = async (file: File): Promise => {\n const text = await file.text();\n const lines = text.split(\"\\n\");\n const headers = lines[0].split(\",\").map((h) => h.trim().replace(/\"/g, \"\"));\n\n const records = [];\n for (let i = 1; i < lines.length; i++) {\n if (!lines[i].trim()) continue;\n\n // Parse CSV line handling quoted values\n const values: string[] = [];\n let current = \"\";\n let inQuotes = false;\n\n for (let j = 0; j < lines[i].length; j++) {\n const char = lines[i][j];\n if (char === '\"') {\n inQuotes = !inQuotes;\n } else if (char === \",\" && !inQuotes) {\n values.push(current.trim());\n current = \"\";\n } else {\n current += char;\n }\n }\n values.push(current.trim());\n\n const record: any = {};\n headers.forEach((header, index) => {\n record[header] = values[index] || \"\";\n });\n records.push(record);\n }\n\n return records;\n };\n\n const processImport = async () => {\n if (!csvFile) {\n showToast(\"error\", \"Please select a CSV file first\");\n return;\n }\n\n setProcessing(true);\n setProcessingStatus(\"Parsing CSV file...\");\n\n try {\n // Parse CSV\n const csvRecords = await parseCsvFile(csvFile);\n\n // Filter for books with \"to-read\" status\n const toReadBooks = csvRecords.filter(\n (record) => record[\"Read Status\"] === \"to-read\",\n );\n\n if (toReadBooks.length === 0) {\n showToast(\"info\", \"No books with 'to-read' status found in the CSV\");\n setProcessing(false);\n return;\n }\n\n setProcessingStatus(\n `Found ${toReadBooks.length} books to update. Fetching your AT Protocol books...`,\n );\n\n // Fetch current books from AT Protocol\n const response = await fetch(\"/api/books\", {\n credentials: \"include\", // Include cookies for authentication\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch your books\");\n }\n\n const { books } = await response.json();\n\n // Match books by title and find those with \"wantToRead\" status\n const booksToUpdate = [];\n for (const csvBook of toReadBooks) {\n const csvTitle = csvBook.Title.toLowerCase().trim();\n const atProtoBook = books.find((b: AtProtoRecord) => {\n const bookTitle = b.value.title.toLowerCase().trim();\n return (\n bookTitle === csvTitle &&\n b.value.status === \"buzz.bookhive.defs#wantToRead\"\n );\n });\n\n if (atProtoBook) {\n booksToUpdate.push({\n uri: atProtoBook.uri,\n title: atProtoBook.value.title,\n csvTitle: csvBook.Title,\n });\n }\n }\n\n if (booksToUpdate.length === 0) {\n showToast(\n \"info\",\n \"No matching books found with 'Want to Read' status in your AT Protocol records\",\n );\n setProcessing(false);\n return;\n }\n\n setProcessingStatus(\n `Updating ${booksToUpdate.length} books to 'Finished' status...`,\n );\n\n // Update each book\n const updateResults = [];\n let successCount = 0;\n let failCount = 0;\n\n for (const book of booksToUpdate) {\n try {\n const updateResponse = await fetch(\n `/api/books/${encodeURIComponent(book.uri)}/status`,\n {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n credentials: \"include\", // Include cookies for authentication\n body: JSON.stringify({ status: \"buzz.bookhive.defs#finished\" }),\n },\n );\n\n if (updateResponse.ok) {\n successCount++;\n updateResults.push({\n title: book.title,\n status: \"Updated to Finished\",\n success: true,\n });\n } else {\n failCount++;\n updateResults.push({\n title: book.title,\n status: \"Failed to update\",\n success: false,\n });\n }\n } catch {\n failCount++;\n updateResults.push({\n title: book.title,\n status: \"Network error\",\n success: false,\n });\n }\n\n setProcessingStatus(\n `Processing: ${successCount + failCount} of ${booksToUpdate.length}`,\n );\n }\n\n setResults({\n total: booksToUpdate.length,\n updated: successCount,\n failed: failCount,\n books: updateResults,\n });\n\n if (successCount > 0) {\n showToast(\n \"success\",\n `Successfully updated ${successCount} book${\n successCount === 1 ? \"\" : \"s\"\n } to Finished status`,\n );\n }\n\n if (failCount > 0) {\n showToast(\n \"error\",\n `Failed to update ${failCount} book${failCount === 1 ? \"\" : \"s\"}`,\n );\n }\n } catch (error) {\n showToast(\n \"error\",\n `Import failed: ${\n error instanceof Error ? error.message : \"Unknown error\"\n }`,\n );\n } finally {\n setProcessing(false);\n setProcessingStatus(\"\");\n }\n };\n\n return (\n

\n 📚 StoryGraph Import Tool\n

\n This tool allows you to sync your StoryGraph reading status with\n your AT Protocol book records. It will:\n

Parse your StoryGraph export CSV file
Find books with \"to-read\" status in the CSV
\n Match them with books in your AT Protocol records that have \"Want\n to Read\" status\n
Update those matched books to \"Finished\" status

\n This is useful if you've been tracking your reading in StoryGraph\n and want to update your Bluesky/AT Protocol book statuses\n accordingly.\n

\n\n

\n \n Upload StoryGraph Export CSV\n \n \n {csvFile && (\n

\n Selected: {csvFile.name}\n

\n )}\n

\n\n \n {processing ? \"Processing...\" : \"Import and Update Books\"}\n \n\n {processingStatus && (\n

\n {processingStatus}\n

\n )}\n

\n\n {results && (\n

\n Import Results\n

\n {results.total}\n

Total Books

\n {results.updated}\n

Updated

\n {results.failed}\n

Failed

\n\n {results.books.length > 0 && (\n

\n Processed Books:\n

\n \n \n \n \n \n \n \n \n {results.books.map((book, index) => (\n \n \n \n \n ))}\n \n

\n Title\n	\n Status\n
\n {book.title}\n	\n \n {book.status}\n \n

\n )}\n

\n );\n}\n","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/tijs/book-explorer/code/frontend/components/App.tsx","extension","actionData","errors"]