Feature: Implement Liked Items profile screen

[CherryCIC]

The screen should include:

• A back button
• Centered Liked Items ❤️ title
• A two-column grid of liked products
• Product image with like count overlay
• Product name
• Condition and size
• Original price
• Inclusive price and protection icon
• Charity logo
• Existing bottom navigation with Profile selected

Why

As a customer
I want to view the products I have liked
So that I can quickly return to items I may want to purchase

Acceptance Criteria

SCENARIO: Open Liked Items

• Given I am signed in
• And I am viewing my profile
• When I select Liked
• Then I should be taken to the Liked Items ❤️ screen
• And the Profile tab should remain selected in the bottom navigation

SCENARIO: Display liked products

• Given I have liked one or more available products
• When the Liked Items screen loads
• Then I should see my liked products in a two-column grid
• And the grid should be vertically scrollable
• And only products associated with my authenticated Firebase user ID should appear

SCENARIO: Display product information

• Given a liked product is displayed
• Then its card should show the product’s primary image
• And it should show the current like count over the image
• And it should show the product name
• And it should show the product condition
• And it should show the product size
• And it should show the original item price
• And it should show the inclusive checkout price
• And it should show the purchase-protection icon
• And it should show the selected charity’s logo

SCENARIO: Open a product

• Given I am viewing my liked products
• When I tap a product card
• Then I should be taken to the existing product details screen
• And the selected product’s current details should be displayed

SCENARIO: Remove a like from the grid

• Given a product is currently liked
• When I tap its active like control
• Then the like should be removed from Firestore
• And the product card should be removed from the Liked Items grid
• And the product’s like count should decrease where applicable
• And the product should no longer appear as liked elsewhere in the app

SCENARIO: Product has been deleted

• Given I previously liked a product
• And the seller has since deleted that product
• When the Liked Items screen loads
• Then the deleted product should not appear in the grid
• And the app should not display a broken card
• And the app should not crash

SCENARIO: Product is no longer available

• Given I previously liked a product
• And the product has been sold or marked unavailable
• When the Liked Items screen loads
• Then the product should either be excluded from the MVP grid
• Or be shown using the app’s existing unavailable-product state
• And I should not be able to begin checkout for that product

SCENARIO: No liked products

• Given I have not liked any available products
• When I open the Liked Items screen
• Then I should see an empty state explaining that I have no liked items... Have fun with the copy, something like: "No likes??? 👀"
• And I should see an action that takes me to browse products

SCENARIO: Liked products fail to load

• Given liked products cannot be retrieved
• When the Liked Items screen loads
• Then I should see an error message
• And I should be given an option to retry
• And the app should not show another user’s liked products

SCENARIO: Return to profile

• Given I am viewing the Liked Items screen
• When I select the back button
• Then I should return to the previous profile screen

Proposed Implementation

Create a Flutter LikedItemsScreen using the existing MVVM and Provider-style state-management pattern.

Suggested components:

LikedItemsScreen
LikedProductsGrid
LikedProductCard
LikedItemsViewModel
LikedProductsRepository

Reuse the existing marketplace product-card components.

Store liked-product references in a Firestore subcollection:

users/{userId}/likedProducts/{productId}
  productId
  likedAt

Load the current user’s liked references using their Firebase Authentication user ID, then resolve the corresponding product documents.

Resolve charity branding from the existing charity data source:

charities/{charityId}
  name
  logoUrl

The inclusive price shown in pink should use the same pricing logic and formatting already used elsewhere in the app. Do not create separate pricing calculations specifically for this screen.

Use a Firestore batch or transaction when unliking where both of these operations are required:

1. Delete users/{userId}/likedProducts/{productId}
2. Decrement products/{productId}.likeCount

The UI should update immediately after a successful unlike operation.
An optimistic update may be used, but the product must be restored if the Firestore request fails.

All product queries should exclude records with statuses such as:

deleted
archived

Sold or unavailable products should follow the app’s agreed marketplace behaviour.

Editing products, sorting liked items, filtering, and creating collections or wish lists are outside the scope of this MVP issue.