feat: book details page #52
Merged
+1,121
−384
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add bookishFavicon.svg in public folder. Change favicon path in index.html. Clean up unnecessary comments and formatting in a couple icon files. No change to funcitonality.
files - BookCover.tsx - BookCard.tsx This should not affect any other current files, but clears up possible confusion and prevents case errors.
To ensure naming consistency across project. Also update files where these are imported, so they are referenced correctly. Functions changed: - App.tsx - AppShell.tsx Imports updated: - App.tsx - main.tsx
Change all occurences of "Prop" to "ComponentNameProp". Should not affect any other files - all instances are internal to each file. Affected files: - BookCover.tsx - SearchField.tsx - BrowseIcon.tsx - ChevronIcon.tsx - FilterIcon.tsx - LogoIcon.tsx - RibbonIcon.tsx - SearchIcon.tsx - ShelfIcon.tsx - SparkeIcon.tsx - StarIcon.tsx
FIle: SearchIcon.tsx Also update imports used in other files to reflect this: SearchField.tsx
To avoid confusing these with the "My shelf" page. Affected files: - BookCard.module.css - BookCard.tsx - BookGrid.module.css - BookGrid.tsx - tokens.css
Previously living inside BookCard.tsx, now it's own file. Change relevant sections in related files. Why: To allow reuse of ribbon button by other parts of the app (mainly Book Detail Page). New files: - ShelfRibbon.tsx - ShelfRibbon.module.css Modified files: - BookCard.tsx - BookCard.module.css
`--color-chip-bg` changed to more correct `color-header-tint` in SearchField.module.css Allows recoloring of actual color chip bg without inadvertently changing other elements.
For consistency and central management
- Button.tsx - Button.module.css Add a text-only button for various uses across the app (such as "remove rating" on detail page). Default values for button are the same as before, it should not impact any other current files. At the same time clean up hardcoded .css values, replace with var() from tokens.css
What a weird name for this thing... - Eyebrow.tsx - Eyebrow.module.css
For use in book detail page. Why and when it triggers: Removing book from your shelf also deletes your rating and notes Deleting notes cannot be undone The popup is handled by the app itself, overwriting some of the automatic behavior in the browser.
Includes: - Current rating, interactive, can be changed by just clicking the stars. - Button to remove rating - Note status / existing note - Text box to write note when creating new/editing - Buttons to create note, save or discard drafted note, delete existing note. Note: You cannot save a note with zero text. If you want to remove a note, you need to cancel any current edit/draft, and instead click "delete note"
Uses newly created components. Based on visual mockup from planning phase. TEMPORARY: - Uses mockBooks.ts instead of real query to backend. This includes mapping of mock books currently in .json file in /server, plus a temp shelf entry type. - "Book not found" only works with static list of books - must be replaced with dynamic error/loading state management when linked with real backend. - Sets updatedAt date itself for user notes. this should be done by the server - Language currently shows "en", not full language. Have to see how this behaves with actual date, perhaps add a converter util to do "en" -> "English" - Max length of user note is handled by MyNotesPanel.tsx, needs to be validated by server as well - Remove book from shelf -> deletes rating and note. Should be a single backend operation (cascade delete), not three separate calls from the client. Beware. App.tsx now calls on the new page instead of the placeholder.
Update dependent imports to reflect this change.
Note: Checked that `npm run build` does not throw errors at this stage. Neat.
Closed
Sign in
to join this conversation on GitHub.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add BookDetailPage (rating, notes, shelf)
Closes #5, Closes #23, Closes #29
Adds the book details page at
/book/:id, following the mockup, plus the shared components it needed. It runs on mock data until the backend is ready.What's new
BookCardso the detail page can reuse it.textvariant. Existing variants are unchanged.Changes to existing files (for reviewers)
Url→URLin variable names (BookCover,BookCard).App,AppShell, with imports updated).ComponentNameProps(BookCover,SearchField, icons).SearchIcon.tsxfile name fixed.BookCard,BookGrid,tokens.css). Decor element and page were at some point both called "shelf" (confusing).SearchFieldnow uses--color-header-tintinstead of--color-chip-bg, so chips can be recolored without side effects.ShelfRibbonandButtonreplaced with tokens./client, so formatting changes show up in many files.Temporary (needs the backend)
mockBooks.tsand a temporary shelf entry type stand in for the real query. MarkedTEMPORARYin the code.updatedAtis set by the client and should be set by the server.Not included yet
Back link, prev/next, loading and error states, and an accessibility pass (keyboard support for the stars and focus ring on the ribbon over dark covers).
How to test
Open
/book/<id>with an id from the mock data (currently available: mock-001, mock-002, mock-003).Example: http://localhost:5173/book/mock-003
Rate a book, add, edit and delete a note, and toggle the ribbon. Removing a book that has a rating or note should show the confirm popup.
AI use
Claude was used to provide skeleton code for the structure, the CSS and parts of the component code, as well as consulting on how to change the solutions along the way. Design decisions, component behavior/rules and testing were done by me.