fix: resolve notification ui bugs, audio playback, and team deletion

- Fixed audio playback by rendering a hidden audio tag to comply with browser policies.

- Renamed DELETE /notifications to /notifications/clear-all to prevent route conflicts.

- Notifications badge now clears automatically when the tray is opened.

- Translated notification types to Portuguese (SUCESSO, AVISO, ERRO, INFO).

- Implemented team deletion functionality for Admins.

components/Layout.tsx

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { 
   LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut, 
-  Hexagon, Settings, Building2, Sun, Moon, Loader2, Layers 
+  Hexagon, Settings, Building2, Sun, Moon, Loader2, Layers,
+  ChevronLeft, ChevronRight
 } from 'lucide-react';
 import { 
   getAttendances, getUsers, getUserById, logout, searchGlobal, 
@@ -29,11 +30,20 @@ const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: a
 
 export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
+    return localStorage.getItem('ctms_sidebar_collapsed') === 'true';
+  });
   const [isDark, setIsDark] = useState(document.documentElement.classList.contains('dark'));
   const location = useLocation();
   const navigate = useNavigate();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
 
+  const toggleSidebar = () => {
+    const newState = !isSidebarCollapsed;
+    setIsSidebarCollapsed(newState);
+    localStorage.setItem('ctms_sidebar_collapsed', String(newState));
+  };
+
   // Search State
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<{ members: User[], teams: any[], attendances: any[], organizations?: any[] }>({ members: [], teams: [], attendances: [], organizations: [] });
@@ -49,12 +59,6 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
   
   // Pre-initialize audio to ensure it's loaded and ready
   const audioRef = React.useRef<HTMLAudioElement | null>(null);
-  useEffect(() => {
-    // Determine base path correctly whether in prod or dev
-    const basePath = import.meta.env.PROD ? '' : 'http://localhost:3001';
-    audioRef.current = new Audio(`${basePath}/audio/notification.mp3`);
-    audioRef.current.volume = 0.5;
-  }, []);
 
   const playNotificationSound = () => {
     if (currentUser?.sound_enabled !== false && audioRef.current) {
@@ -69,7 +73,6 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
 
   const loadNotifications = async () => {
     const data = await getNotifications();
-    setNotifications(data);
     
     const newUnreadCount = data.filter((n: any) => !n.is_read).length;
     
@@ -78,10 +81,24 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       playNotificationSound();
     }
     
+    setNotifications(data);
     previousUnreadCountRef.current = newUnreadCount;
     isInitialLoadRef.current = false;
   };
 
+  const handleBellClick = async () => {
+    const willOpen = !showNotifications;
+    setShowNotifications(willOpen);
+    
+    if (willOpen && unreadCount > 0) {
+      // Optimistic update
+      setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
+      previousUnreadCountRef.current = 0;
+      await markAllNotificationsAsRead();
+      loadNotifications();
+    }
+  };
+
   useEffect(() => {
     const delayDebounceFn = setTimeout(async () => {
       if (searchQuery.length >= 2) {
@@ -167,92 +184,125 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
     <div className="flex h-screen bg-zinc-50 dark:bg-dark-bg overflow-hidden transition-colors duration-300">
       {/* Sidebar */}
       <aside
-        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-dark-sidebar border-r border-zinc-200 dark:border-dark-border transform transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0 ${
+        className={`fixed inset-y-0 left-0 z-50 bg-white dark:bg-dark-sidebar border-r border-zinc-200 dark:border-dark-border transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 ${
           isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
-        }`}
+        } flex flex-col ${isSidebarCollapsed ? 'w-20' : 'w-64'}`}
       >
-        <div className="flex flex-col h-full">
-          {/* Logo */}
-          <div className="flex items-center gap-3 px-6 h-20 border-b border-zinc-100 dark:border-dark-border">
-            <div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
+        {/* Logo & Toggle */}
+        <div className="flex items-center justify-between px-4 h-20 border-b border-zinc-100 dark:border-dark-border shrink-0">
+          <div className={`flex items-center gap-3 overflow-hidden ${isSidebarCollapsed ? 'mx-auto' : ''}`}>
+            <div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors shrink-0">
               <Hexagon size={24} fill="currentColor" />
             </div>
-            <span className="text-xl font-bold text-zinc-900 dark:text-white tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
-            <button onClick={() => setIsMobileMenuOpen(false)} className="ml-auto lg:hidden text-zinc-400">
-              <X size={24} />
-            </button>
+            {!isSidebarCollapsed && (
+              <span className="text-xl font-bold text-zinc-900 dark:text-white tracking-tight whitespace-nowrap">Fasto<span className="text-brand-yellow">.</span></span>
+            )}
           </div>
+          
+          {!isSidebarCollapsed && (
+            <button 
+              onClick={toggleSidebar} 
+              className="hidden lg:flex p-1.5 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors shrink-0"
+              title="Recolher Menu"
+            >
+              <ChevronLeft size={18} />
+            </button>
+          )}
+          <button onClick={() => setIsMobileMenuOpen(false)} className="lg:hidden text-zinc-400 hover:text-zinc-900 dark:hover:text-white">
+            <X size={24} />
+          </button>
+        </div>
 
-          {/* Navigation */}
-          <nav className="flex-1 px-4 py-6 space-y-2">
-            
-            {/* Standard User Links */}
-            {!isSuperAdmin && (
-              <>
-                <SidebarItem to="/" icon={LayoutDashboard} label="Dashboard" collapsed={false} />
-                {currentUser.role !== 'agent' && (
-                  <>
-                    <SidebarItem to="/admin/users" icon={Users} label="Membros" collapsed={false} />
-                    <SidebarItem to="/admin/teams" icon={Building2} label={currentUser.role === 'manager' ? 'Meu Time' : 'Times'} collapsed={false} />
-                    <SidebarItem to="/admin/funnels" icon={Layers} label="Gerenciar Funis" collapsed={false} />
-                  </>
-                )}
-              </>
-            )}
-
-            {/* Super Admin Links */}
-            {isSuperAdmin && (
-              <>
-                <div className="pt-2 pb-2 px-4 text-xs font-semibold text-zinc-400 dark:text-dark-muted uppercase tracking-wider">
-                   Super Admin
-                </div>
-                <SidebarItem to="/super-admin" icon={Building2} label="Organizações" collapsed={false} />
-                <SidebarItem to="/admin/users" icon={Users} label="Usuários Globais" collapsed={false} />
-              </>
-            )}
-          </nav>
-
-          {/* User Profile Mini - Now Clickable to Profile */}
-          <div className="p-4 border-t border-zinc-100 dark:border-dark-border space-y-3">
-            {localStorage.getItem('ctms_super_admin_token') && (
-              <button
-                onClick={() => {
-                  returnToSuperAdmin();
-                }}
-                className="w-full flex items-center justify-center gap-2 py-2 px-3 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-xs font-bold hover:opacity-90 transition-colors"
+        {/* Expand Button when collapsed */}
+        {isSidebarCollapsed && (
+            <div className="hidden lg:flex justify-center p-2 border-b border-zinc-100 dark:border-dark-border shrink-0">
+              <button 
+                onClick={toggleSidebar} 
+                className="p-1.5 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors"
+                title="Expandir Menu"
               >
-                Retornar ao Painel Central
+                <ChevronRight size={18} />
               </button>
-            )}
-            <div className="flex items-center gap-3 p-2 rounded-lg bg-zinc-50 dark:bg-dark-bg/50 border border-zinc-100 dark:border-dark-border group">
-              <div 
-                onClick={() => navigate('/profile')}
-                className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
-              >
-                <img 
-                  src={currentUser.avatar_url 
-                    ? (currentUser.avatar_url.startsWith('http') ? currentUser.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${currentUser.avatar_url}`)
-                    : `https://ui-avatars.com/api/?name=${encodeURIComponent(currentUser.name)}&background=random`} 
-                  alt={currentUser.name} 
-                  className="w-10 h-10 rounded-full object-cover border border-zinc-200 dark:border-dark-border" 
-                />
+            </div>
+        )}
+
+        {/* Navigation */}
+        <nav className={`flex-1 py-6 space-y-2 overflow-y-auto overflow-x-hidden ${isSidebarCollapsed ? 'px-2' : 'px-4'}`}>
+          
+          {/* Standard User Links */}
+          {!isSuperAdmin && (
+            <>
+              <SidebarItem to="/" icon={LayoutDashboard} label="Dashboard" collapsed={isSidebarCollapsed} />
+              {currentUser.role !== 'agent' && (
+                <>
+                  <SidebarItem to="/admin/users" icon={Users} label="Membros" collapsed={isSidebarCollapsed} />
+                  <SidebarItem to="/admin/teams" icon={Building2} label={currentUser.role === 'manager' ? 'Meu Time' : 'Times'} collapsed={isSidebarCollapsed} />
+                  <SidebarItem to="/admin/funnels" icon={Layers} label="Gerenciar Funis" collapsed={isSidebarCollapsed} />
+                </>
+              )}
+            </>
+          )}
+
+          {/* Super Admin Links */}
+          {isSuperAdmin && (
+            <>
+              {!isSidebarCollapsed && (
+                <div className="pt-2 pb-2 px-4 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest whitespace-nowrap">
+                    Super Admin
+                </div>
+              )}
+              <SidebarItem to="/super-admin" icon={Building2} label="Organizações" collapsed={isSidebarCollapsed} />
+              <SidebarItem to="/admin/users" icon={Users} label="Usuários Globais" collapsed={isSidebarCollapsed} />
+            </>
+          )}
+        </nav>
+
+        {/* User Profile Mini - Now Clickable to Profile */}
+        <div className="p-3 border-t border-zinc-100 dark:border-dark-border space-y-3 shrink-0">
+          {localStorage.getItem('ctms_super_admin_token') && (
+            <button
+              onClick={() => {
+                returnToSuperAdmin();
+              }}
+              className={`w-full flex items-center justify-center gap-2 py-2 px-3 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-xs font-bold hover:opacity-90 transition-colors ${isSidebarCollapsed ? 'px-0' : ''}`}
+              title="Retornar ao Painel Central"
+            >
+              {isSidebarCollapsed ? <LogOut size={16} /> : 'Retornar ao Painel Central'}
+            </button>
+          )}
+          <div className={`flex items-center gap-3 rounded-xl bg-zinc-50 dark:bg-dark-bg/50 border border-zinc-100 dark:border-dark-border group transition-all ${isSidebarCollapsed ? 'justify-center p-2' : 'p-2'}`}>
+            <div 
+              onClick={() => navigate('/profile')}
+              className={`flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity ${isSidebarCollapsed ? 'justify-center' : ''}`}
+              title={isSidebarCollapsed ? currentUser.name : undefined}
+            >
+              <img 
+                src={currentUser.avatar_url 
+                  ? (currentUser.avatar_url.startsWith('http') ? currentUser.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${currentUser.avatar_url}`)
+                  : `https://ui-avatars.com/api/?name=${encodeURIComponent(currentUser.name)}&background=random`} 
+                alt={currentUser.name} 
+                className="w-10 h-10 rounded-full object-cover border border-zinc-200 dark:border-dark-border shrink-0" 
+              />
+              {!isSidebarCollapsed && (
                 <div className="flex-1 min-w-0">
                   <p className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{currentUser.name}</p>
                   <p className="text-xs text-zinc-500 dark:text-dark-muted truncate capitalize">
                     {currentUser.role === 'super_admin' ? 'Super Admin' : 
-                     currentUser.role === 'admin' ? 'Administrador' :
-                     currentUser.role === 'manager' ? 'Gerente' : 'Agente'}
+                      currentUser.role === 'admin' ? 'Administrador' :
+                      currentUser.role === 'manager' ? 'Gerente' : 'Agente'}
                   </p>
                 </div>
-              </div>
+              )}
+            </div>
+            {!isSidebarCollapsed && (
               <button 
                 onClick={handleLogout}
-                className="text-zinc-400 hover:text-red-500 transition-colors shrink-0"
+                className="text-zinc-400 hover:text-red-500 transition-colors shrink-0 p-2"
                 title="Sair"
               >
                 <LogOut size={18} />
               </button>
-            </div>
+            )}
           </div>
         </div>
       </aside>
@@ -424,11 +474,10 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
 
             {/* Notifications */}
             <div className="relative">
-              <button 
-                onClick={() => setShowNotifications(!showNotifications)}
+              <button
+                onClick={handleBellClick}
                 className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors"
-              >
-                <Bell size={20} />
+              >                <Bell size={20} />
                 {unreadCount > 0 && (
                   <span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-brand-yellow rounded-full border-2 border-white dark:border-dark-header"></span>
                 )}
@@ -487,7 +536,7 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
                                 n.type === 'warning' ? 'text-orange-500' : 
                                 n.type === 'error' ? 'text-red-500' : 'text-blue-500'
                               }`}>
-                                {n.type}
+                                {n.type === 'success' ? 'SUCESSO' : n.type === 'warning' ? 'AVISO' : n.type === 'error' ? 'ERRO' : 'INFO'}
                               </span>
                               <span className="text-[10px] text-zinc-400 dark:text-dark-muted">
                                 {new Date(n.created_at).toLocaleDateString()}
@@ -534,11 +583,18 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       
       {/* Overlay for mobile */}
       {isMobileMenuOpen && (
-        <div 
+        <div
           className="fixed inset-0 bg-zinc-950/50 z-40 lg:hidden"
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
+
+      {/* Hidden Audio Player for Notifications */}
+      <audio 
+        ref={audioRef} 
+        src={`${import.meta.env.PROD ? '' : 'http://localhost:3001'}/audio/notification.mp3`} 
+        preload="auto" 
+      />
     </div>
   );
 };