import React, { useState, useRef, useEffect } from 'react'; import clsx from 'clsx'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { useAuthStore } from '@/store/authStore'; import { useUIStore } from '@/store/uiStore'; import { useLogout } from '@/api/hooks'; import { Avatar } from '@/components/ui/Avatar'; import { Badge } from '@/components/ui/Badge'; import { SearchDropdown } from '@/components/shared/SearchDropdown'; import { SuggestionBadge } from '@/components/ai/SuggestionBadge'; export function TopBar() { const { t } = useTranslation(); const navigate = useNavigate(); const { user, currentTenant } = useAuthStore(); const tenants = user?.tenants || []; const { toggleSidebar, openAISidebarProactive } = useUIStore(); const logoutMutation = useLogout(); const [userMenuOpen, setUserMenuOpen] = useState(false); const [notifOpen, setNotifOpen] = useState(false); const userRef = useRef(null); const notifRef = useRef(null); useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (userRef.current && !userRef.current.contains(e.target as Node)) setUserMenuOpen(false); if (notifRef.current && !notifRef.current.contains(e.target as Node)) setNotifOpen(false); }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const handleLogout = async () => { try { await logoutMutation.mutateAsync(); } catch { // ignore } navigate('/login'); }; const fullName = user ? `${user.first_name} ${user.last_name}` : ''; return ( ); }