From 6a66503b48f801e0a0833167ce4748b2ffd3e1c3 Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <japa@rede5.com.br>
Date: Tue, 23 Dec 2025 11:48:54 -0300
Subject: [PATCH] Update profile dropdown in marketplace shell

---
 marketplace/src/layouts/Shell.tsx | 60 ++++++++++++++-----------------
 1 file changed, 27 insertions(+), 33 deletions(-)

diff --git a/marketplace/src/layouts/Shell.tsx b/marketplace/src/layouts/Shell.tsx
index b61ef40..d8ec97f 100644
--- a/marketplace/src/layouts/Shell.tsx
+++ b/marketplace/src/layouts/Shell.tsx
@@ -9,6 +9,8 @@ export function Shell({ children }: { children: React.ReactNode }) {
 
   const isOwner = user?.role === 'owner' || user?.role === 'seller'
   const isAdmin = user?.role === 'admin'
+  const profilePath = isAdmin ? '/dashboard/profile' : '/meu-perfil'
+  const settingsPath = isOwner ? '/company' : '/dashboard/profile'
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -61,49 +63,41 @@ export function Shell({ children }: { children: React.ReactNode }) {
             Checkout
           </Link>
           {user && (
-            <div className="relative" ref={profileMenuRef}>
+            <div className="relative flex items-center" ref={profileMenuRef}>
               <button
                 type="button"
                 onClick={() => setIsProfileOpen((prev) => !prev)}
-                className="flex items-center gap-2 rounded bg-white/10 px-3 py-1 text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
+                className="flex items-center gap-3 rounded bg-white/10 px-3 py-2 text-left text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
                 aria-haspopup="true"
                 aria-expanded={isProfileOpen}
               >
-                Perfil
-                <span className="text-[10px] font-normal uppercase text-white/80">{user.role}</span>
-                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-[11px] font-bold">
+                  {user.name.charAt(0).toUpperCase()}
+                </div>
+                <div className="flex flex-col items-start leading-tight">
+                  <span className="text-sm font-semibold">{user.name}</span>
+                  <span className="text-[10px] uppercase text-white/80">{user.role}</span>
+                </div>
+                <svg className="h-3 w-3 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                 </svg>
               </button>
               {isProfileOpen && (
-                <div className="absolute right-0 mt-2 w-48 rounded-md bg-white py-1 text-sm text-gray-700 shadow-lg ring-1 ring-black/5">
-                  {isOwner && (
-                    <Link
-                      to="/meu-perfil"
-                      className="block px-4 py-2 hover:bg-gray-100"
-                      onClick={() => setIsProfileOpen(false)}
-                    >
-                      Meu Perfil
-                    </Link>
-                  )}
-                  {isOwner && (
-                    <Link
-                      to="/company"
-                      className="block px-4 py-2 hover:bg-gray-100"
-                      onClick={() => setIsProfileOpen(false)}
-                    >
-                      Perfil da Empresa
-                    </Link>
-                  )}
-                  {isAdmin && (
-                    <Link
-                      to="/dashboard/profile"
-                      className="block px-4 py-2 hover:bg-gray-100"
-                      onClick={() => setIsProfileOpen(false)}
-                    >
-                      Meu Perfil
-                    </Link>
-                  )}
+                <div className="absolute right-0 top-full z-50 mt-2 w-52 rounded-md bg-white py-2 text-sm text-gray-700 shadow-lg">
+                  <Link
+                    to={profilePath}
+                    className="block px-4 py-2 hover:bg-gray-100"
+                    onClick={() => setIsProfileOpen(false)}
+                  >
+                    Ver Perfil
+                  </Link>
+                  <Link
+                    to={settingsPath}
+                    className="block px-4 py-2 hover:bg-gray-100"
+                    onClick={() => setIsProfileOpen(false)}
+                  >
+                    Configurações
+                  </Link>
                   <button
                     type="button"
                     onClick={logout}