Skip to main content

SavedPage

Location: src/components/SavedPage.jsx

Overview​

SavedPage displays all posts a user has bookmarked, organized into shelves. Users can filter by shelf, create/rename/delete shelves, and load more saved posts via explicit pagination. Each saved post renders using the standard Post component with the save button hidden, since posts are already saved.

The shelf system allows users to categorize their saved content, with a default shelf that receives posts from deleted shelves. Posts are displayed in a masonry grid layout with intent-based CSS styling.

Relevant Invariants​

  • Invariant #12: "Slowness Is Baked In" -- Paginated loading with an explicit "Load more" button, no infinite scroll.
  • Invariant #13: "Absence Is First-Class" -- Empty states are calm and informative, not broken-looking.

Props​

PropTypeRequiredDefaultDescription
sessionobjectYes--Supabase auth session with user.id

Constants​

ConstantValueDescription
PAGE_SIZE20Number of saved posts loaded per page
MAX_SHELF_NAME_LENGTH30Maximum characters for a shelf name

Key Behaviors​

  • Shelf Tabs: Horizontal tab bar at the top with "All" plus user-created shelves. Active shelf filters the displayed posts.
  • Shelf Manager Modal: Overlay modal for renaming and deleting shelves, plus creating new ones. Default shelves cannot be deleted.
  • Shelf Deletion: When a shelf is deleted, its posts are moved to the user's default shelf.
  • Author Intent Styles: Fetches per-author intent styles to render posts with the correct visual customization.
  • Unsave Posts: Posts can be removed from saved via the Post component's onUpdate callback.
  • Post Navigation: Clicking a post navigates to /post/:postId for the detail view.

Usage​

import SavedPage from '@/components/SavedPage';

<SavedPage session={session} />
  • Post -- Renders individual saved posts
  • Header -- Navigation link to saved page
  • SavePopover -- Used when initially saving posts

Last updated: 2026-02-07