Done
Bookmarks list page
Area: Bookmarks Milestone: v1
Context
Problem: Users who bookmark chapters need a way to see all their bookmarks and navigate back to them quickly.
Solution: A dedicated page at /bookmarks showing all bookmarked chapters with timestamps, sorted by most recently added. Click to navigate, trash icon to remove.
Not included: Search, filtering, or grouping within bookmarks. This is a simple flat list.
Functional
User flow:
- User navigates to
/bookmarks(via sidebar) - Sees all bookmarked chapters sorted by most recently added
- Each card shows: "Book Chapter" label + formatted date
- Click a card → navigates to
/read/[bookId]/[chapter] - Click trash icon → removes the bookmark
Edge cases:
- Empty state: "No bookmarks yet." message
- No pagination (all bookmarks rendered)
- Pure client-side — no server component needed
UX & Design
Layout: Vertical list of bookmark cards.
Cards:
- Book + chapter label (e.g., "Genesis 1")
- Formatted date (when bookmarked)
- Trash icon button (right side) for removal
- Click anywhere else on the card → navigate
Technical
Route: /bookmarks — apps/web/src/routes/(app)/bookmarks/+page.svelte
Data: Calls initBookmarks() + getAllBookmarks() on mount. Pure client-side rendering from localStorage.
No server component — no +page.server.ts needed.
Files:
apps/web/src/routes/(app)/bookmarks/+page.svelteapps/web/src/lib/stores/bookmarks.svelte.ts— data source
Status
Current: DONE Milestone: v1 Priority: Medium — companion to bookmark creation
Dependencies:
- Requires: chapter-level bookmarks (DONE)
Screenshots
