feat(spa): add wishlist functionality with localStorage and UI integration

apps/spa/src/components/ProductCard.tsx

@@ -1,12 +1,26 @@
 import { Link } from 'react-router-dom'
 import type { Product } from '../types'
 import { getCategoryImage, formatPrice } from '../types'
+import { Heart } from 'lucide-react'
+import { useWishlistStore } from '../store/wishlistStore'
 
 interface ProductCardProps {
   product: Product
 }
 
 export default function ProductCard({ product }: ProductCardProps) {
+  const { addItem, removeItem, isInWishlist } = useWishlistStore()
+  const isWished = isInWishlist(product.id)
+
+  const handleWishlistClick = (e: React.MouseEvent) => {
+    e.preventDefault() // prevent navigating to product detail
+    if (isWished) {
+      removeItem(product.id)
+    } else {
+      addItem(product)
+    }
+  }
+
   return (
     <Link 
       to={`/products/${product.id}`}
@@ -22,10 +36,15 @@ export default function ProductCard({ product }: ProductCardProps) {
         <div className="absolute top-3 left-3 bg-white/90 backdrop-blur-sm px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-widest text-spa-forest shadow-sm">
           {product.category.name}
         </div>
-        {/* Available badge */}
-        <div className="absolute top-3 right-3 bg-spa-forest/90 backdrop-blur-sm px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-widest text-white shadow-sm">
-          Available
-        </div>
+        {/* Wishlist Button */}
+        <button
+          onClick={handleWishlistClick}
+          className="absolute top-3 right-3 p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:scale-110 transition-transform z-10"
+        >
+          <Heart 
+            className={`w-4 h-4 transition-colors ${isWished ? 'fill-rose-500 text-rose-500' : 'text-spa-stone/60 hover:text-rose-500'}`} 
+          />
+        </button>
       </div>
 
       <div className="p-4 flex flex-col flex-1">