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

2026-07-21 22:38:45 +02:00
parent abdcd07b07
commit b30d1e9300
5 changed files with 100 additions and 71 deletions
@@ -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();
  });

@@ -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();
@@ -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">
-            <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" />
-          </svg>
+          {robotIcon('w-5 h-5 text-secondary-600')}
+        </button>
+        <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">
-          <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>
+        {robotIcon('w-4 h-4')}
        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">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
+              {chevronRightIcon}
            </button>
          </div>
          {tabBar}
@@ -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
@@ -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: [] }),
 }));