AISidebar: robot icon for AI, move notifications from TopBar to AISidebar with own tab and bell icon

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();
   });
 

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();

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) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2a4 4 0 014 4v1h1a3 3 0 013 3v6a3 3 0 01-3 3h-1v1a4 4 0 01-4 4H8a4 4 0 01-4-4v-1H3a3 3 0 01-3-3V10a3 3 0 013-3h1V6a4 4 0 014-4z M9 10h.01M15 10h.01M9 15h6" />
+  </svg>
+);
+
+const bellIcon = (className: string) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+  </svg>
+);
+
+const chevronRightIcon = (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+  </svg>
+);
 
 export function AISidebar() {
-  const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab } = useUIStore();
+  const { t } = useTranslation();
+  const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab, notifications, removeNotification } = useUIStore();
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -32,18 +52,29 @@ export function AISidebar() {
   if (aiSidebarCollapsed) {
     return (
       <div
-        className="hidden md:flex flex-shrink-0 w-12 flex-col items-center border-l border-secondary-200 bg-white py-3"
+        className="hidden md:flex flex-shrink-0 w-12 flex-col items-center border-l border-secondary-200 bg-white py-3 gap-2"
         data-testid="ai-sidebar-collapsed"
       >
         <button
-          onClick={toggleAISidebar}
+          onClick={() => { setAISidebarTab('chat'); toggleAISidebar(); }}
           className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           aria-label="KI Assistent öffnen"
           title="KI Assistent"
         >
-          <svg className="w-4 h-4 text-secondary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          {robotIcon('w-5 h-5 text-secondary-600')}
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </button>
-          </svg>
+        <button
+          onClick={() => { setAISidebarTab('notifications'); toggleAISidebar(); }}
+          className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 relative"
+          aria-label={t('topbar.notifications')}
+          title={t('topbar.notifications')}
+        >
+          {bellIcon('w-5 h-5 text-secondary-600')}
+          {notifications.length > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
+              {notifications.length}
+            </span>
+          )}
         </button>
       </div>
     );
@@ -53,6 +84,31 @@ export function AISidebar() {
     if (aiSidebarTab === 'proactive') {
       return <SuggestionList />;
     }
+    if (aiSidebarTab === 'notifications') {
+      return (
+        <div className="flex flex-col h-full" data-testid="notification-list">
+          <ul className="flex-1 overflow-y-auto py-1" role="list">
+            {notifications.length === 0 && (
+              <li className="px-4 py-3 text-sm text-secondary-400">Keine Benachrichtigungen</li>
+            )}
+            {notifications.map((msg, i) => (
+              <li key={i} className="flex items-center justify-between px-4 py-2 hover:bg-secondary-50 cursor-pointer text-sm text-secondary-700 group">
+                <span className="flex-1 truncate">{msg}</span>
+                <button
+                  className="ml-2 p-1 rounded text-secondary-300 hover:text-danger-600 hover:bg-danger-50 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
+                  aria-label="Benachrichtigung löschen"
+                  onClick={() => removeNotification(i)}
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
     // chat tab
     if (loading) {
       return (
@@ -100,11 +156,29 @@ export function AISidebar() {
         aria-label="KI Chat"
         data-testid="ai-sidebar-tab-chat"
       >
-        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+        {robotIcon('w-4 h-4')}
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-        </svg>
         KI Chat
       </button>
+      <button
+        onClick={() => setAISidebarTab('notifications')}
+        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
+          aiSidebarTab === 'notifications'
+            ? 'text-primary-600 border-primary-500'
+            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
+        }`}
+        role="tab"
+        aria-selected={aiSidebarTab === 'notifications'}
+        aria-label={t('topbar.notifications')}
+        data-testid="ai-sidebar-tab-notifications"
+      >
+        {bellIcon('w-4 h-4')}
+        <span className="truncate">{t('topbar.notifications')}</span>
+        {notifications.length > 0 && (
+          <span className="ml-1 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center flex-shrink-0">
+            {notifications.length}
+          </span>
+        )}
+      </button>
     </div>
   );
 
@@ -147,16 +221,16 @@ export function AISidebar() {
       >
         <div className="h-full flex flex-col">
           <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
-            <span className="text-sm font-medium text-secondary-700">KI Assistent</span>
+            <span className="text-sm font-medium text-secondary-700">
+              {aiSidebarTab === 'notifications' ? t('topbar.notifications') : 'KI Assistent'}
+            </span>
             <button
               onClick={toggleAISidebar}
               className="p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
               title="Einklappen"
               aria-label="KI Assistent einklappen"
             >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              {chevronRightIcon}
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
             </button>
           </div>
           {tabBar}

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<HTMLDivElement>(null);
-  const notifRef = useRef<HTMLDivElement>(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() {
       </div>
 
       <div className="flex items-center gap-2">
-        {/* Notifications */}
-        <div ref={notifRef} className="relative">
-          <button
-            onClick={() => setNotifOpen(!notifOpen)}
-            className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
-            aria-label={t('topbar.notifications')}
-            aria-expanded={notifOpen}
-          >
-            <svg className="w-5 h-5 text-secondary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-            </svg>
-            <Badge variant="danger" className="absolute -top-1 -right-1 px-1.5 py-0">{notifications.length}</Badge>
-          </button>
-          {notifOpen && (
-            <div className="absolute top-full right-0 mt-1 w-80 bg-white rounded-md shadow-lg border border-secondary-200 z-50">
-              <div className="px-4 py-3 border-b border-secondary-200">
-                <h3 className="text-sm font-semibold text-secondary-900">{t('topbar.notifications')}</h3>
-              </div>
-              <ul className="max-h-64 overflow-y-auto py-1" role="list">
-                {notifications.length === 0 && (
-                  <li className="px-4 py-3 text-sm text-secondary-400">Keine Benachrichtigungen</li>
-                )}
-                {notifications.map((msg, i) => (
-                  <li key={i} className="flex items-center justify-between px-4 py-2 hover:bg-secondary-50 cursor-pointer text-sm text-secondary-700 group">
-                    <span className="flex-1 truncate">{msg}</span>
-                    <button
-                      className="ml-2 p-1 rounded text-secondary-300 hover:text-danger-600 hover:bg-danger-50 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
-                      aria-label="Benachrichtigung löschen"
-                      onClick={(e) => { e.stopPropagation(); setNotifications(prev => prev.filter((_, idx) => idx !== i)); }}
-                    >
-                      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-
         {/* User menu */}
         <div ref={userRef} className="relative">
           <button

frontend/src/store/uiStore.ts

@@ -2,7 +2,7 @@ import { create } from 'zustand';
 
 export type Theme = 'light' | 'dark' | 'system';
 export type Locale = 'de' | 'en';
-export type AISidebarTab = 'proactive' | 'chat';
+export type AISidebarTab = 'proactive' | 'chat' | 'notifications';
 
 export interface Toast {
   id: string;
@@ -19,6 +19,7 @@ export interface UIState {
   aiSidebarCollapsed: boolean;
   aiSidebarTab: AISidebarTab;
   toasts: Toast[];
+  notifications: string[];
   setTheme: (theme: Theme) => void;
   setLocale: (locale: Locale) => void;
   toggleSidebar: () => void;
@@ -31,6 +32,8 @@ export interface UIState {
   addToast: (toast: Omit<Toast, 'id'>) => void;
   removeToast: (id: string) => void;
   clearToasts: () => void;
+  removeNotification: (index: number) => void;
+  clearNotifications: () => void;
 }
 
 let toastIdCounter = 0;
@@ -43,6 +46,11 @@ export const useUIStore = create<UIState>((set) => ({
   aiSidebarCollapsed: true,
   aiSidebarTab: 'chat',
   toasts: [],
+  notifications: [
+    'Neuer Kontakt hinzugefügt: Max Mustermann',
+    'Firma aktualisiert: TechCorp GmbH',
+    'Meeting um 14:00 Uhr mit Müller AG',
+  ],
   setTheme: (theme) => {
     localStorage.setItem('leocrm_theme', theme);
     set({ theme });
@@ -65,4 +73,7 @@ export const useUIStore = create<UIState>((set) => ({
   removeToast: (id) =>
     set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
   clearToasts: () => set({ toasts: [] }),
+  removeNotification: (index) =>
+    set((s) => ({ notifications: s.notifications.filter((_, i) => i !== index) })),
+  clearNotifications: () => set({ notifications: [] }),
 }));