ProjectR Docs
Screen MapMobile app

Wishlist

Mobile app: every screen, state and flow in Wishlist.

2 screens and overlays, 14 states, 1 flows. Frames show a real screenshot where one was captured and a wireframe card where the state needs data or conditions a device run cannot produce.

Flows

Wishlist

Step 1
Heart toggle on cards, Saved to wishlist (iOS)Heart toggle on cards, Saved to wishlist (Android)
Tap on a heart saves the item with a toast
Open Profile Wishlist
Step 2
Wishlist (iOS)Wishlist (Android)
Wishlist shows saved items as a card grid
Tap a card
Step 3
Product detail (iOS)Product detail (Android)
Product detail opens

Branches and edge cases

Gatefrom step 1
Heart toggle on cards, Signed out adds once (iOS)Heart toggle on cards, Signed out adds once (Android)
Guest taps a heart
Errorfrom step 1
Wireframe

Heart toggle on cards

Edge

Slow down a moment

Rate limited; warning toast

Not reachable on a device: Needs taps fast enough to hit the rate limit

Tapping too fast
Errorfrom step 1
Wireframe

Heart toggle on cards

Error

Could not update wishlist

Toggle failed; danger toast

Not reachable on a device: Needs a network fault, crash, race or code change to show

Update fails
Edgefrom step 1
Heart toggle on cards, Removed from wishlist (iOS)Heart toggle on cards, Removed from wishlist (Android)
Heart tapped again
Gatefrom step 2
Wishlist, Guest wall (iOS)Wishlist, Guest wall (Android)
Guest opens Wishlist
Errorfrom step 2
Wireframe

Wishlist

Offline

Could not load your wishlist

Waiting over 10 s on token or list; Try Again re-mints session

Not reachable on a device: Needs a network fault, crash, race or code change to show

Load takes over 10 s
Emptyfrom step 2
Wishlist, Your wishlist is empty (iOS)Wishlist, Your wishlist is empty (Android)
Wishlist is empty
Successfrom step 2
Wireframe

Wishlist

Success

Removed from wishlist

Optimistic remove succeeded

Not captured yet

Heart removes a card
Errorfrom step 2
Wireframe

Wishlist

Error

Could not remove item

Remove failed; row reappears

Not reachable on a device: Needs a network fault, crash, race or code change to show

Remove fails
Flow diagram

Screens and states

Wishlist

Wishlist (iOS)Wishlist (Android)
Screen(app)/wishlist

Wishlist

Saved products grid with N items saved and heart to remove

src/features/wishlist/components/wishlist-screen.tsx

Entry

  • Profile tab My Wishlist
  • Deep link

Exits

  • Back → Profile tab
  • Card tap → product page
  • Heart → remove with toast
  • Start shopping → Shop tab
  • Sign in → sign-in sheet

States · 9

Gate
Guest wall · Signed out shows SignInRequiredsrc/features/wishlist/components/wishlist-screen.tsx:158
Offline
Could not load your wishlist · Waiting over 10 s on token or list; Try Again re-mints sessionsrc/features/wishlist/components/wishlist-screen.tsx:172
Loading
Skeleton grid · Auth, token or first page still loadingsrc/features/wishlist/components/wishlist-screen.tsx:189
Empty
Your wishlist is empty · No saved items; Start shopping button. Deleted products filtered outsrc/features/wishlist/components/wishlist-screen.tsx:198
Edge
Sold out saved item · Card shows Sold out overlay and status labelsrc/features/wishlist/components/_internal/wishlist-card.tsx:22
Loading
Pagination spinner · 20 per page; footer spinner while more may loadsrc/features/wishlist/components/wishlist-screen.tsx:225
Edge
Count from summary · Items saved count comes from list summary, not loaded rowssrc/features/wishlist/components/wishlist-screen.tsx:95
Success
Removed from wishlist · Optimistic remove succeededsrc/features/wishlist/hooks/use-remove-from-wishlist.ts
Error
Could not remove item · Remove failed; row reappearssrc/features/wishlist/hooks/use-remove-from-wishlist.ts

Captured states

Wishlist, Guest wall (iOS)Wishlist, Guest wall (Android)
Guest wall
Wishlist, Your wishlist is empty (iOS)Wishlist, Your wishlist is empty (Android)
Your wishlist is empty

Heart toggle on cards

Heart toggle on cards (iOS)Heart toggle on cards (Android)
InlineHeartToggle

Heart toggle on cards

Shared save and unsave behaviour on every product card

src/shared/hooks/use-wishlist-set.ts

Entry

  • Heart on any product card or PDP

Exits

  • Signed out → sign-in sheet, adds once after

States · 5

Gate
Signed out adds once · Opens sign-in sheet (wishlist); after sign in adds once, never togglessrc/shared/hooks/use-wishlist-set.ts:93
Success
Saved to wishlist · Item savedsrc/shared/hooks/use-wishlist-set.ts:54
Success
Removed from wishlist · Item unsavedsrc/shared/hooks/use-wishlist-set.ts:54
Edge
Slow down a moment · Rate limited; warning toastsrc/shared/hooks/use-wishlist-set.ts:54
Error
Could not update wishlist · Toggle failed; danger toastsrc/shared/hooks/use-wishlist-set.ts:102

Captured states

Heart toggle on cards, Signed out adds once (iOS)Heart toggle on cards, Signed out adds once (Android)
Signed out adds once
Heart toggle on cards, Saved to wishlist (iOS)Heart toggle on cards, Saved to wishlist (Android)
Saved to wishlist
Heart toggle on cards, Removed from wishlist (iOS)Heart toggle on cards, Removed from wishlist (Android)
Removed from wishlist

Product

Mobile app: every screen, state and flow in Product.

Bag & checkout

Mobile app: every screen, state and flow in Bag & checkout.

On this page

FlowsWishlistScreens and statesWishlistHeart toggle on cards