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

apps/spa/src/components/Navbar.tsx

@@ -1,8 +1,9 @@
 import { Link, NavLink, useNavigate } from 'react-router-dom'
 import { useState, useEffect } from 'react'
 import type { Category } from '../types'
-import { ShoppingBag, MapPin, Menu as MenuIcon, X } from 'lucide-react'
+import { ShoppingBag, MapPin, Menu as MenuIcon, X, Heart } from 'lucide-react'
 import { useCartStore } from '../store/cartStore'
+import { useWishlistStore } from '../store/wishlistStore'
 import { useAuthStore } from '../store/authStore'
 import { logoutLiff, loginLiff } from '../lib/liff'
 import { useTranslation } from 'react-i18next'
@@ -21,6 +22,7 @@ export default function Navbar({ categories = [] }: NavbarProps) {
   
   const { toggleCart, getCartCount } = useCartStore()
   const cartCount = getCartCount()
+  const wishlistCount = useWishlistStore(state => state.items.length)
   const { customer } = useAuthStore()
   const { t, i18n } = useTranslation()
 
@@ -140,6 +142,19 @@ export default function Navbar({ categories = [] }: NavbarProps) {
             </svg>
           </button>
           
+          <Link 
+            to="/wishlist"
+            className="relative p-2.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
+            aria-label="Wishlist"
+          >
+            <Heart className="w-4 h-4 group-hover:text-rose-500 transition-colors" />
+            {wishlistCount > 0 && (
+              <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
+                {wishlistCount}
+              </span>
+            )}
+          </Link>
+
           <button 
             onClick={() => toggleCart(true)}
             className="relative p-2.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
@@ -242,6 +257,20 @@ export default function Navbar({ categories = [] }: NavbarProps) {
             </svg>
           </button>
           
+          <Link 
+            to="/wishlist"
+            onClick={() => setMobileOpen(false)}
+            className="relative p-1.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all"
+            aria-label="Wishlist"
+          >
+            <Heart className="w-4 h-4" />
+            {wishlistCount > 0 && (
+              <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
+                {wishlistCount}
+              </span>
+            )}
+          </Link>
+
           <button 
             onClick={() => { toggleCart(true); setMobileOpen(false) }}
             className="relative p-1.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all"