Feat: Add shared components, AppShell, icons. Update docs. #46
+712
−81
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
Apparently this got left out in an earlier session. Now references the correct index.css.
Includes two variants (default: primary): - Primary = transparent background with dark purple border and text. - Secondary = borderless rose background with white text. Two types (default: button, to avoid accidental form submits): - button - submit Two flexible sizes (default: narrow): - narrow: less horizontal padding - wide: more horizontal padding Example: "Load more books" Primary, type=button, wide A wider, transparent button with dark purple outline. Example: "Save note" Secondary, type=submit, narrow A smaller, rose colored button with white text. Wrap text field and button in <form> to use submit.
- AppShell wraps all pages via Outlet; owns constant page width - Header: logo, SearchField (writes q to URL), main nav - Mobile-first CSS: nav is a fixed bottom tab bar, desktop media query at 48rem - Temporary placeholder pages in App.tsx for testing
Also delete unused Bookmark.tsx icon file Clean up forgotten TODO comment in AppShell.tsx
Icons now available: - Star (rating) - Chevron (back) - Filter - Logo (book with sparkle) - Ribbon (bookmark, save to shelf) - Search (looking glass) - Shelf (bookmark, navigation button) - Sparkle (decoration) - Browse (book, navigation button)
New component that will be used on detail page to let user set rating. Stars can be set to on/off with different colors depending on rating.
linesf
approved these changes
Oct 2, 2026
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.
Closes #34, Closes #33
Adds new components:
AppShellButtonStarRatingInputAppShell
AppShell is the frame around every page: header (logo, search, nav), the main area, and the footer. It wraps all pages via Outlet. On mobile, the nav is a fixed tab bar at the bottom.
Routes: AppShell is a layout route, so every page goes in as a child of it in
App.tsx(/,/shelf,/book/:id). The currentApp.tsxhas temporary placeholder pages you can swap out.Documentation: See ´docs/styles-and-components.md´ for more information about how AppShell, Search and other design components work. Changes to design and behavior have been added to relevant docs to ensure that they are up to date.
Button
Includes two variants (default: primary):
Two types (default: button, to avoid accidental form submits):
Two flexible sizes (default: narrow):
Example: "Load more books"
Primary, type=button, wide
A wider, transparent button with dark purple outline.
Example: "Save note"
Secondary, type=submit, narrow
A smaller, rose colored button with white text. Wrap text field and button in
formto use submitIcons
Icons are created as separate files in /src/icons. All components that use icons have been updated to reference icon files instead of using their own svg.
StarRatingInput: Wraps star icons into a single component that will be used on the detail page to let the user set rating. Stars can be set to on/off with different colors depending on rating.