Implement localStorage-based wishlist feature

[Copilot]

Adds client-side wishlist functionality using browser localStorage. No backend changes required.

Implementation

State Management

• WishlistContext provides addToWishlist(), removeFromWishlist(), isInWishlist() hooks
• Persists to localStorage['octocat-wishlist'] with error handling for quota/disabled storage
• Syncs state changes across components via React context

UI Components

• Heart icon button overlaid on product cards (absolute positioned, top-right)
• Filled/unfilled state toggles with scale animation
• /wishlist route displays grid of saved products via react-query
• Empty state with message when no items
• Navigation badge shows count (hidden when zero)

Styling

• Dark mode support via existing useTheme() pattern
• Focus ring styles for keyboard navigation (focus:ring-2 focus:ring-primary)
• Matches existing Tailwind CSS patterns

Screenshots

Products with wishlist icons

Wishlist page (light mode)

Wishlist page (dark mode)

Empty state

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add localStorage-Based Wishlist Feature (Variation 1)</issue_title>
<issue_description>## Variation 1: localStorage-Based Wishlist

Overview

Implement a client-side wishlist feature using browser localStorage. This is the simplest approach with no backend changes required.

Implementation Details

Frontend Components:

1. Create frontend/src/context/WishlistContext.tsx to manage wishlist state

   • Store wishlist items in localStorage as array of productIds
   • Provide hooks: useWishlist(), addToWishlist(), removeFromWishlist(), isInWishlist()
   • Sync with localStorage on changes
   • Key: octocat-wishlist

2. Add wishlist UI to frontend/src/components/entity/product/Products.tsx

   • Add heart icon button on each product card
   • Toggle filled/unfilled based on wishlist status
   • Position in top-right corner of product image (absolute positioning)
   • Support dark mode theming
   • Scale animation on click

3. Create frontend/src/components/Wishlist.tsx page component

   • Display grid of wishlist products (similar to Products page)
   • Show empty state when no items
   • Allow removal from wishlist
   • Include product details: image, name, description, price
   • Support dark mode
   • Use react-query to fetch full product details

4. Update frontend/src/App.tsx

   • Add WishlistProvider wrapping Routes
   • Add route: /wishlist → <Wishlist />

5. Update frontend/src/components/Navigation.tsx

   • Add "Wishlist" link to navigation menu
   • Show count badge with number of wishlist items
   • Position between "Products" and "Login"

Technical Requirements:

• Use Tailwind CSS for all styling, matching existing patterns
• Follow dark mode implementation using useTheme() hook
• Use existing Product interface from types
• Implement localStorage persistence with key octocat-wishlist
• Handle localStorage errors gracefully (quota exceeded, disabled storage)
• Use react-query to fetch full product details for wishlist page
• No login required - works for all users

User Experience:

• Heart icon transitions smoothly (scale animation on click)
• Toast notification on add/remove (optional but nice)
• Persists across browser sessions
• Works across all pages without authentication

Files to Create/Modify:

• Create: frontend/src/context/WishlistContext.tsx
• Create: frontend/src/components/Wishlist.tsx
• Modify: frontend/src/components/entity/product/Products.tsx
• Modify: frontend/src/App.tsx
• Modify: frontend/src/components/Navigation.tsx

Success Criteria:

• Users can add/remove products from wishlist
• Wishlist persists in localStorage
• Wishlist page displays saved products
• UI matches existing design patterns
• Works in both light and dark modes
• No backend changes required</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add localStorage-Based Wishlist Feature (Variation 1) #9

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.