diff --git a/frontend/src/__tests__/shell/AppShell.test.tsx b/frontend/src/__tests__/shell/AppShell.test.tsx index 4ec7eb6..2806bdd 100644 --- a/frontend/src/__tests__/shell/AppShell.test.tsx +++ b/frontend/src/__tests__/shell/AppShell.test.tsx @@ -55,12 +55,11 @@ describe('AppShell', () => { expect(within(sidebar).getByText('Kontakte')).toBeInTheDocument(); }); - it('topbar contains tenant switcher, search, notifications, and user menu', () => { + it('topbar contains tenant switcher, search, and user menu', () => { renderWithRouter(); const topbar = screen.getByTestId('topbar'); expect(within(topbar).getByLabelText('Mandant wechseln')).toBeInTheDocument(); expect(within(topbar).getByLabelText('Suchen...')).toBeInTheDocument(); - expect(within(topbar).getByLabelText('Benachrichtigungen')).toBeInTheDocument(); expect(within(topbar).getByLabelText('Benutzermenü')).toBeInTheDocument(); }); diff --git a/frontend/src/__tests__/shell/TopBar.test.tsx b/frontend/src/__tests__/shell/TopBar.test.tsx index f9b1cfe..a50aed6 100644 --- a/frontend/src/__tests__/shell/TopBar.test.tsx +++ b/frontend/src/__tests__/shell/TopBar.test.tsx @@ -49,11 +49,6 @@ describe('TopBar', () => { expect(screen.getByLabelText('Suchen...')).toBeInTheDocument(); }); - it('renders notifications button with aria-label', () => { - renderTopBar(); - expect(screen.getByLabelText('Benachrichtigungen')).toBeInTheDocument(); - }); - it('renders user menu button with aria-label', () => { renderTopBar(); expect(screen.getByLabelText('Benutzermenü')).toBeInTheDocument(); diff --git a/frontend/src/components/layout/AISidebar.tsx b/frontend/src/components/layout/AISidebar.tsx index 2942ac5..e08c6b4 100644 --- a/frontend/src/components/layout/AISidebar.tsx +++ b/frontend/src/components/layout/AISidebar.tsx @@ -4,9 +4,29 @@ import { ResizablePanel } from '@/components/ui/ResizablePanel'; import { SuggestionList } from '@/components/ai/SuggestionSidebar'; import { createSession, fetchSessions } from '@/api/ai'; import { useUIStore } from '@/store/uiStore'; +import { useTranslation } from 'react-i18next'; + +const robotIcon = (className: string) => ( + +); + +const bellIcon = (className: string) => ( + +); + +const chevronRightIcon = ( + +); export function AISidebar() { - const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab } = useUIStore(); + const { t } = useTranslation(); + const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab, notifications, removeNotification } = useUIStore(); const [sessionId, setSessionId] = useState(null); const [loading, setLoading] = useState(true); @@ -32,18 +52,29 @@ export function AISidebar() { if (aiSidebarCollapsed) { return (
+
); @@ -53,6 +84,31 @@ export function AISidebar() { if (aiSidebarTab === 'proactive') { return ; } + if (aiSidebarTab === 'notifications') { + return ( +
+
    + {notifications.length === 0 && ( +
  • Keine Benachrichtigungen
  • + )} + {notifications.map((msg, i) => ( +
  • + {msg} + +
  • + ))} +
+
+ ); + } // chat tab if (loading) { return ( @@ -100,11 +156,29 @@ export function AISidebar() { aria-label="KI Chat" data-testid="ai-sidebar-tab-chat" > - + {robotIcon('w-4 h-4')} KI Chat + ); @@ -147,16 +221,16 @@ export function AISidebar() { >
- KI Assistent + + {aiSidebarTab === 'notifications' ? t('topbar.notifications') : 'KI Assistent'} +
{tabBar} diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx index cfd9d23..fd24ac6 100644 --- a/frontend/src/components/layout/TopBar.tsx +++ b/frontend/src/components/layout/TopBar.tsx @@ -6,7 +6,6 @@ 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'; @@ -19,19 +18,11 @@ export function TopBar() { const logoutMutation = useLogout(); const [userMenuOpen, setUserMenuOpen] = useState(false); - const [notifOpen, setNotifOpen] = useState(false); - const [notifications, setNotifications] = useState([ - 'Neuer Kontakt hinzugefügt: Max Mustermann', - 'Firma aktualisiert: TechCorp GmbH', - 'Meeting um 14:00 Uhr mit Müller AG', - ]); 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); @@ -91,47 +82,6 @@ export function TopBar() {
- {/* Notifications */} -
- - {notifOpen && ( -
-
-

{t('topbar.notifications')}

-
-
    - {notifications.length === 0 && ( -
  • Keine Benachrichtigungen
  • - )} - {notifications.map((msg, i) => ( -
  • - {msg} - -
  • - ))} -
-
- )} -
- {/* User menu */}