From cad60109653ed9b4b775631126f34d38cd9d273e Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <tiago.ribeiro@inventcloud.com.br>
Date: Tue, 23 Dec 2025 16:01:54 -0300
Subject: [PATCH] feat(marketplace): replace cart text with icon + badge
 counter

- Remove Checkout link from header navigation
- Replace 'Carrinho' text with cart SVG icon
- Add red badge showing cart item count (max 99+)
- Import and use cartStore for real-time count updates
---
 marketplace/src/layouts/Shell.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/marketplace/src/layouts/Shell.tsx b/marketplace/src/layouts/Shell.tsx
index d8ec97f..d7accf3 100644
--- a/marketplace/src/layouts/Shell.tsx
+++ b/marketplace/src/layouts/Shell.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
+import { useCartStore, selectCartSummary } from '../stores/cartStore'
 
 export function Shell({ children }: { children: React.ReactNode }) {
   const { user, logout } = useAuth()
   const [isProfileOpen, setIsProfileOpen] = useState(false)
   const profileMenuRef = useRef<HTMLDivElement | null>(null)
+  const { totalItems: cartCount } = useCartStore(selectCartSummary)
 
   const isOwner = user?.role === 'owner' || user?.role === 'seller'
   const isAdmin = user?.role === 'admin'
@@ -56,11 +58,15 @@ export function Shell({ children }: { children: React.ReactNode }) {
               </Link>
             </>
           )}
-          <Link to="/cart" className="hover:underline">
-            Carrinho
-          </Link>
-          <Link to="/checkout" className="hover:underline">
-            Checkout
+          <Link to="/cart" className="relative hover:bg-white/10 p-2 rounded-lg transition-colors" title="Carrinho">
+            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            {cartCount > 0 && (
+              <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold">
+                {cartCount > 99 ? '99+' : cartCount}
+              </span>
+            )}
           </Link>
           {user && (
             <div className="relative flex items-center" ref={profileMenuRef}>