Add client-side wishlist feature with localStorage persistence

[Copilot]

Adds a client-side wishlist allowing users to save products for later without authentication, persisted via localStorage under key "octocat-wishlist".

New

• WishlistContext (wishlistContextUtils.tsx + WishlistContext.tsx) — React Context following the existing ThemeContext split-file pattern. Exposes addToWishlist, removeFromWishlist, isInWishlist, clearWishlist; handles storage errors (private browsing, quota exceeded) gracefully.

interface WishlistItem {
  productId: number;
  name: string;
  description: string;
  price: number;
  imgName: string;
  discount?: number;
  dateAdded: string; // ISO
}

• Wishlist.tsx — Dedicated page at /wishlist with product grid, search/filter, per-item quantity + Add to Cart, remove button (filled heart), empty state, and full dark mode support matching the Products page layout.

Modified

• Products.tsx — Heart icon button overlaid on each product card image; filled/outlined state driven by isInWishlist; click toggles wishlist membership without triggering the product detail modal.
• Navigation.tsx — Wishlist nav link with heart icon + red count badge (hidden at 0).
• App.tsx — Wraps ThemedApp with WishlistProvider; adds /wishlist route.

Original prompt

Objective

Implement a simple, client-side wishlist feature that allows users to save products for later viewing without requiring authentication.

Requirements

Frontend Components

1. WishlistContext - Create a React Context to manage wishlist state

   • Store wishlist items in browser localStorage
   • Methods: addToWishlist, removeFromWishlist, isInWishlist, clearWishlist
   • Persist data across browser sessions
   • Type-safe with TypeScript interfaces

2. Heart Icon on Product Cards - Add wishlist toggle to Products component

   • Heart icon button on each product card (filled/unfilled state)
   • Click to add/remove from wishlist
   • Visual feedback on hover and click
   • Show count of items in wishlist in navigation bar
   • Support dark mode styling with Tailwind CSS

3. Wishlist Page - Create dedicated wishlist view at /wishlist route

   • Display all saved products in grid layout (similar to Products page)
   • Show product image, name, description, price, and discount
   • "Remove from Wishlist" button on each card
   • "Add to Cart" functionality (using existing pattern from Products)
   • Empty state message when no items in wishlist
   • Search/filter functionality for wishlist items
   • Responsive design with Tailwind CSS

4. Navigation Integration

   • Add Wishlist link to Navigation component
   • Show wishlist item count badge (e.g., heart icon with number)
   • Update App.tsx to include new /wishlist route

Technical Requirements

• Use TypeScript strict mode
• Follow existing code patterns (functional components with hooks)
• Use Tailwind CSS utility classes for styling
• Support dark mode (use darkMode from ThemeContext)
• Use localStorage for persistence: key "octocat-wishlist"
• Handle localStorage errors gracefully (private browsing, quota exceeded)
• No backend changes required

Data Model

interface WishlistItem {
  productId: number;
  name: string;
  description: string;
  price: number;
  imgName: string;
  discount?: number;
  dateAdded: string; // ISO date string
}

User Experience

• Smooth animations for add/remove actions
• Toast notifications or visual feedback when items are added/removed
• Maintain scroll position when toggling wishlist items
• Clear visual distinction between wishlisted and non-wishlisted products

Acceptance Criteria

• Users can add products to wishlist from Products page
• Users can view all wishlist items on dedicated Wishlist page
• Users can remove items from wishlist
• Wishlist persists across browser sessions
• Wishlist count displays in navigation
• Dark mode support throughout
• Responsive design on mobile and desktop
• No console errors or warnings