[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","puf","name","book-explorer","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/puf/book-explorer/code/frontend/components/App.tsx","extension","id","683d25f3-5f9f-43dc-a8d4-d84311070549","App.tsx","fileId","01a001de-e00b-7376-9430-632b012af108","parentId","01a001de-e00b-7376-9430-69e64d25a08e","branchId","3c85d5e5-04a7-4e4e-a80e-4ead07d80b71","branchVersion",1,"latest",true,"createdAt",["D",1786737778590],"version",0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport type {\n AtProtoRecord,\n BookStatus,\n OAuthSession,\n} from \"../../shared/types.ts\";\nimport { STATUS_LABELS } from \"../../shared/types.ts\";\nimport { APP_CONFIG as _APP_CONFIG } from \"../../shared/config.ts\";\nimport { Login } from \"./Login.tsx\";\n\ninterface Toast {\n id: string;\n type: \"success\" | \"error\" | \"info\";\n message: string;\n timestamp: number;\n}\n\nexport function App() {\n const [books, setBooks] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [session, setSession] = useState(null);\n const [selectedBooks, setSelectedBooks] = useState>(new Set());\n const [currentPage, setCurrentPage] = useState(0);\n const [showBulkActions, setShowBulkActions] = useState(false);\n const [toasts, setToasts] = useState([]);\n const [statusFilter, setStatusFilter] = useState(null);\n const [currentView, setCurrentView] = useState<\"books\" | \"tools\">(\"books\");\n const [showUserDropdown, setShowUserDropdown] = useState(false);\n\n const BOOKS_PER_PAGE = 50;\n\n const showToast = (type: Toast[\"type\"], message: string) => {\n const id = Date.now().toString();\n const toast: Toast = { id, type, message, timestamp: Date.now() };\n setToasts((prev) => [...prev, toast]);\n\n // Auto-remove after 5 seconds\n setTimeout(() => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, 5000);\n };\n\n const removeToast = (id: string) => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n };\n\n const logRequest = (method: string, url: string, data?: any) => {\n console.group(`🔄 API ${method} ${url}`);\n console.log(\"Timestamp:\", new Date().toISOString());\n if (data) console.log(\"Request body:\", data);\n };\n\n const logResponse = (\n _method: string,\n _url: string,\n response: Response,\n data?: any,\n ) => {\n console.log(`📥 Response: ${response.status} ${response.statusText}`);\n if (data) console.log(\"Response data:\", data);\n console.groupEnd();\n };\n\n const logError = (method: string, url: string, error: any) => {\n console.error(`❌ Request failed: ${method} ${url}`, error);\n console.groupEnd();\n };\n\n // Check authentication status on mount\n useEffect(() => {\n const checkAuth = async () => {\n try {\n const response = await fetch(\"/api/auth/session\");\n const data = await response.json();\n if (data.valid && data.did) {\n setSession({\n did: data.did,\n handle: data.handle || \"\",\n accessToken: \"\", // Not needed for cookie-based auth\n refreshToken: \"\", // Not needed for cookie-based auth\n pdsUrl: data.pdsUrl || \"\",\n });\n } else {\n setSession(null);\n }\n } catch (error) {\n console.error(\"Failed to check auth status:\", error);\n setSession(null);\n }\n };\n\n checkAuth();\n }, []);\n\n // No need to manage localStorage with cookie-based auth\n\n const handleLogout = () => {\n setSession(null);\n setBooks([]);\n setError(null);\n };\n\n const fetchBooks = async () => {\n if (!session) return;\n\n setLoading(true);\n setError(null);\n\n const url = `/api/books`;\n logRequest(\"GET\", url);\n\n try {\n // With cookie-based auth, no need for custom headers\n const response = await fetch(url, {\n credentials: \"include\", // Include cookies for authentication\n });\n const data = await response.json();\n\n logResponse(\"GET\", url, response, data);\n\n if (response.ok) {\n setBooks(data.books);\n showToast(\n \"success\",\n `Found ${data.books.length} books in your collection`,\n );\n } else {\n const errorMsg = data.error || \"Failed to fetch books\";\n setError(errorMsg);\n showToast(\"error\", errorMsg);\n }\n } catch (err) {\n const errorMsg = \"Network error occurred\";\n logError(\"GET\", url, err);\n setError(errorMsg);\n showToast(\"error\", errorMsg);\n } finally {\n setLoading(false);\n }\n };\n\n const updateBookStatus = async (uri: string, newStatus: BookStatus) => {\n if (!session) {\n showToast(\"error\", \"Please login to update book status\");\n return;\n }\n\n const url = `/api/books/${encodeURIComponent(uri)}/status`;\n const requestData = { status: newStatus };\n logRequest(\"PUT\", url, requestData);\n\n try {\n const response = await fetch(url, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n credentials: \"include\", // Include cookies for authentication\n body: JSON.stringify(requestData),\n });\n\n const result = await response.json();\n logResponse(\"PUT\", url, response, result);\n\n if (response.ok) {\n // Update the local state\n setBooks((prevBooks) =>\n prevBooks.map((book) =>\n book.uri === uri\n ? { ...book, value: { ...book.value, status: newStatus } }\n : book\n )\n );\n\n // Find book title for better feedback\n const book = books.find((b) => b.uri === uri);\n const bookTitle = book?.value.title || \"Book\";\n showToast(\n \"success\",\n `Updated \"${bookTitle}\" to ${STATUS_LABELS[newStatus]}`,\n );\n } else {\n if (response.status === 401) {\n showToast(\"error\", \"Session expired. Please login again.\");\n handleLogout();\n } else {\n showToast(\n \"error\",\n `Failed to update status: ${result.error || \"Unknown error\"}`,\n );\n }\n }\n } catch (err) {\n logError(\"PUT\", url, err);\n showToast(\"error\", \"Failed to update book status - network error\");\n }\n };\n\n const updateBulkStatus = async (newStatus: BookStatus) => {\n if (!session || selectedBooks.size === 0) return;\n\n const count = selectedBooks.size;\n showToast(\"info\", `Updating ${count} book${count === 1 ? \"\" : \"s\"}...`);\n\n const uris = Array.from(selectedBooks);\n const results = await Promise.allSettled(\n uris.map((uri) => updateBookStatus(uri, newStatus)),\n );\n\n const successful = results.filter((r) => r.status === \"fulfilled\").length;\n const failed = results.filter((r) => r.status === \"rejected\").length;\n\n if (failed === 0) {\n showToast(\n \"success\",\n `Successfully updated ${successful} book${\n successful === 1 ? \"\" : \"s\"\n } to ${STATUS_LABELS[newStatus]}`,\n );\n } else if (successful === 0) {\n showToast(\n \"error\",\n `Failed to update all ${count} book${count === 1 ? \"\" : \"s\"}`,\n );\n } else {\n showToast(\n \"error\",\n `Updated ${successful} book${\n successful === 1 ? \"\" : \"s\"\n }, but ${failed} failed`,\n );\n }\n\n setSelectedBooks(new Set());\n setShowBulkActions(false);\n };\n\n const toggleBookSelection = (uri: string) => {\n const newSelected = new Set(selectedBooks);\n if (newSelected.has(uri)) {\n newSelected.delete(uri);\n } else {\n newSelected.add(uri);\n }\n setSelectedBooks(newSelected);\n setShowBulkActions(newSelected.size > 0);\n };\n\n const selectAllBooks = () => {\n const allUris = paginatedBooks.map((book) => book.uri);\n setSelectedBooks(new Set(allUris));\n setShowBulkActions(true);\n };\n\n const clearSelection = () => {\n setSelectedBooks(new Set());\n setShowBulkActions(false);\n };\n\n // Filter books based on status\n const filteredBooks = statusFilter\n ? books.filter((book) => book.value.status === statusFilter)\n : books;\n\n // Pagination logic\n const totalPages = Math.ceil(filteredBooks.length / BOOKS_PER_PAGE);\n const startIndex = currentPage * BOOKS_PER_PAGE;\n const paginatedBooks = filteredBooks.slice(\n startIndex,\n startIndex + BOOKS_PER_PAGE,\n );\n\n const goToPage = (page: number) => {\n setCurrentPage(Math.max(0, Math.min(page, totalPages - 1)));\n clearSelection(); // Clear selection when changing pages\n };\n\n const handleStatusFilterChange = (newStatusFilter: BookStatus | null) => {\n setStatusFilter(newStatusFilter);\n setCurrentPage(0); // Reset to first page when filter changes\n clearSelection(); // Clear selection when filter changes\n };\n\n // Auto-load books when session is available\n useEffect(() => {\n if (session) {\n fetchBooks();\n }\n }, [session]);\n\n // Show login screen if not authenticated\n if (!session) {\n return ;\n }\n\n return (\n

\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",false,"label",[47,48,24],"frontend","components","4a96eee3-533f-412b-8133-dd32795fc18d",["D",1786737778590],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","userId","dbc2eaf5-6585-43f5-8eaa-f18c7e2c0249","pinnedFileId","01a001de-e00b-7376-9430-58b08610e2e9","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e84da261-8841-4e35-8772-7604500a2ff8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_103":10,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":89,"_11":90,"_22":30,"_91":49,"_92":93,"_94":95,"_96":54,"_97":98,"_99":100,"_101":12,"_102":10},"isOwned",3,"main","projectId","forkedBranchId","b9acac30-705a-11f0-8062-0224a6c84d84","forkedBranchVersion",96,"forkedProjectPrivacy","forkedProjectId","b9ac3f66-705a-11f0-8062-0224a6c84d84","forkedProjectOrgId","c04d51b2-a7dc-46ca-ad6f-52f47c2906a8","projectName","userHandle","displayName","avatar","https://secure.gravatar.com/avatar/4df6cf8a2fa4219b0990c579e3f5cffd.jpg?s=200&d=identicon","tier","free","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":38,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":90,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]