AISidebar: replace horizontal tabs with icon strip layout, show active tab title below icons

frontend/src/components/layout/AISidebar.tsx

@@ -18,12 +18,25 @@ const bellIcon = (className: string) => (
   </svg>
 );
 
+const bulbIcon = (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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+  </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>
 );
 
+interface TabDef {
+  key: 'proactive' | 'chat' | 'notifications';
+  label: string;
+  icon: (cls: string) => React.ReactNode;
+  testId: string;
+}
+
 export function AISidebar() {
   const { t } = useTranslation();
   const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab, notifications, removeNotification } = useUIStore();
@@ -48,6 +61,14 @@ export function AISidebar() {
     })();
   }, []);
 
+  const tabs: TabDef[] = [
+    { key: 'chat', label: 'KI Chat', icon: robotIcon, testId: 'ai-sidebar-tab-chat' },
+    { key: 'proactive', label: 'Proaktiv', icon: bulbIcon, testId: 'ai-sidebar-tab-proactive' },
+    { key: 'notifications', label: t('topbar.notifications'), icon: bellIcon, testId: 'ai-sidebar-tab-notifications' },
+  ];
+
+  const activeTab = tabs.find((tab) => tab.key === aiSidebarTab) || tabs[0];
+
   // Collapsed: narrow icon strip (desktop only, hidden on mobile)
   if (aiSidebarCollapsed) {
     return (
@@ -55,27 +76,23 @@ export function AISidebar() {
         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"
       >
+        {tabs.map((tab) => (
           <button
-          onClick={() => { setAISidebarTab('chat'); toggleAISidebar(); }}
+            key={tab.key}
-          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"
+            onClick={() => { setAISidebarTab(tab.key); toggleAISidebar(); }}
-          aria-label="KI Assistent öffnen"
-          title="KI Assistent"
-        >
-          {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')}
+            aria-label={tab.label}
-          title={t('topbar.notifications')}
+            title={tab.label}
+            data-testid={tab.testId}
           >
-          {bellIcon('w-5 h-5 text-secondary-600')}
+            {tab.icon('w-5 h-5 text-secondary-600')}
-          {notifications.length > 0 && (
+            {tab.key === 'notifications' && 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>
     );
   }
@@ -125,60 +142,39 @@ export function AISidebar() {
     );
   };
 
-  const tabBar = (
+  const iconStrip = (
-    <div className="flex border-b border-secondary-200" role="tablist">
+    <div className="flex items-center gap-1 px-2 py-2 border-b border-secondary-200" role="tablist">
+      {tabs.map((tab) => (
         <button
-        onClick={() => setAISidebarTab('proactive')}
+          key={tab.key}
-        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
+          onClick={() => setAISidebarTab(tab.key)}
-          aiSidebarTab === 'proactive'
+          className={`p-2 rounded-md min-h-touch min-w-touch flex items-center justify-center transition-colors relative ${
-            ? 'text-primary-600 border-primary-500'
+            aiSidebarTab === tab.key
-            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
+              ? 'bg-primary-100 text-primary-600'
+              : 'text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700'
           }`}
           role="tab"
-        aria-selected={aiSidebarTab === 'proactive'}
+          aria-selected={aiSidebarTab === tab.key}
-        aria-label="Proaktiv"
+          aria-label={tab.label}
-        data-testid="ai-sidebar-tab-proactive"
+          data-testid={tab.testId}
         >
-        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          {tab.icon('w-5 h-5')}
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+          {tab.key === 'notifications' && notifications.length > 0 && (
-        </svg>
+            <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">
-        Proaktiv
-      </button>
-      <button
-        onClick={() => setAISidebarTab('chat')}
-        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
-          aiSidebarTab === 'chat'
-            ? 'text-primary-600 border-primary-500'
-            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
-        }`}
-        role="tab"
-        aria-selected={aiSidebarTab === 'chat'}
-        aria-label="KI Chat"
-        data-testid="ai-sidebar-tab-chat"
-      >
-        {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 className="flex-1" />
+      <button
+        onClick={toggleAISidebar}
+        className="p-1.5 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center"
+        title="Einklappen"
+        aria-label="KI Assistent einklappen"
+      >
+        {chevronRightIcon}
+      </button>
     </div>
   );
 
@@ -202,9 +198,11 @@ export function AISidebar() {
             </svg>
             <span className="text-sm font-medium">Zurück</span>
           </button>
-          <span className="text-sm font-medium text-secondary-700 ml-2">KI Assistent</span>
         </div>
-        {tabBar}
+        {iconStrip}
+        <div className="px-3 py-2 border-b border-secondary-200">
+          <span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
+        </div>
         <div className="flex-1 overflow-hidden">
           {renderTabContent()}
         </div>
@@ -220,20 +218,10 @@ export function AISidebar() {
         data-testid="ai-sidebar-pane"
       >
         <div className="h-full flex flex-col">
-          <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
+          {iconStrip}
-            <span className="text-sm font-medium text-secondary-700">
+          <div className="px-3 py-2 border-b border-secondary-200">
-              {aiSidebarTab === 'notifications' ? t('topbar.notifications') : 'KI Assistent'}
+            <span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
-            </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"
-            >
-              {chevronRightIcon}
-            </button>
           </div>
-          {tabBar}
           <div className="flex-1 overflow-hidden">
             {renderTabContent()}
           </div>