feat: Wishlist with price-drop alerts (Variation 3)

[Copilot]

Adds a frontend-only wishlist that tracks the price at which each item was saved and surfaces price drops and low-stock warnings.

New: WishlistContext (context/WishlistContext.tsx)

Persists WishlistEntry[] to localStorage ("wishlist_v2"):

interface WishlistEntry {
  productId: number;
  savedPrice: number;  // effective price (post-discount) at wishlist time
  addedAt: string;     // ISO date
}

Exposes toggleWishlist, isWishlisted, wishlistCount, and getPriceDrop — where getPriceDrop returns currentPrice - savedPrice (negative = cheaper now).

Updated: Product cards (Products.tsx)

• Heart button (top-right of image): filled green when wishlisted, outline gray otherwise; stops click propagation so modal doesn't open
• Price-drop badge (bg-yellow-400) overlaid at bottom of image when getPriceDrop < 0
• Added stockLevel?: number to Product interface

New: Wishlist page (components/wishlist/Wishlist.tsx)

• Fetches products via useQuery, filters to wishlisted entries
• Per card: current price, saved price, dark-mode-aware price-drop highlight, low-stock warning (stockLevel <= 5)
• Empty state: "Your wishlist is empty — browse products to save items for later"

Wiring

• App.tsx: /wishlist route added; WishlistProvider wraps the app inside ThemeProvider
• Navigation.tsx: "Wishlist" link with count badge, shown only when isLoggedIn

Original prompt

Wishlist Feature — Variation 3: Wishlist with Price-Drop Alerts

Build on the localStorage wishlist concept (Variation 1) but add smart features: price-drop detection and stock level awareness.

1. WishlistContext (frontend/src/context/WishlistContext.tsx)

Extend the localStorage wishlist to also store the price at which each item was added:

interface WishlistEntry {
  productId: number;
  savedPrice: number;     // price (after discount) when the item was wishlisted
  addedAt: string;        // ISO date string
}

Store as JSON array in localStorage under key "wishlist_v2". Expose:

• wishlistEntries: WishlistEntry[]
• toggleWishlist(product: { productId: number; price: number; discount?: number })
• isWishlisted(productId: number): boolean
• wishlistCount: number
• getPriceDrop(product: { productId: number; price: number; discount?: number }): number | null — returns the amount of price drop (current price minus saved price, negative means cheaper now) or null if not wishlisted

2. Heart button on product cards (frontend/src/components/entity/product/Products.tsx)

• Add heart icon button in the top-right corner of each product card image area
• Filled green when wishlisted, outline gray when not
• Pass full product info to toggleWishlist
• Stop event propagation so modal doesn't open
• Accessible aria-labels

3. Price-drop badge on product cards (frontend/src/components/entity/product/Products.tsx)

• If getPriceDrop(product) returns a negative number (price dropped since wishlisting), show a badge like "Price Drop! Save $X.XX" on the product card
• Style the badge in a distinct color (e.g., amber/yellow background: bg-yellow-400 text-yellow-900)
• Show it overlaid on the card, e.g., bottom of the image area

4. Wishlist page (frontend/src/components/wishlist/Wishlist.tsx)

• Fetches all products using useQuery + axios.get (same pattern as Products.tsx)
• Filters to wishlisted products
• For each product, shows:
  • The current price
  • The price when added ("You saved it at $X.XX")
  • If price has dropped since: a highlighted "Price dropped! Now $X.XX" message
  • Stock level indicator: if stockLevel is defined and <= 5, show "Low stock: only {N} left!" in red
• Empty state: "Your wishlist is empty — browse products to save items for later"
• Heart button still present to remove items
• Uses useTheme() for dark mode theming

5. Route and navigation

• frontend/src/App.tsx: Add <Route path="/wishlist" element={<Wishlist />} />
• frontend/src/components/Navigation.tsx: Add "Wishlist" nav link with a count badge, visible only when isLoggedIn is true (use useAuth())

Constraints

• No backend changes — frontend-only
• Follow existing Tailwind CSS patterns and arrow function component style
• Arrow function components only
• Use useTheme() for dark/light mode in all components