diff --git a/frontend/src/components/layout/AISidebar.tsx b/frontend/src/components/layout/AISidebar.tsx
index e08c6b4..76b686b 100644
--- a/frontend/src/components/layout/AISidebar.tsx
+++ b/frontend/src/components/layout/AISidebar.tsx
@@ -18,12 +18,25 @@ const bellIcon = (className: string) => (
);
+const bulbIcon = (className: string) => (
+
+);
+
const chevronRightIcon = (
);
+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) => (
+
+ ))}
);
}
@@ -125,59 +142,38 @@ export function AISidebar() {
);
};
- const tabBar = (
-
+ const iconStrip = (
+
+ {tabs.map((tab) => (
+
+ ))}
+
-
-
);
@@ -202,9 +198,11 @@ export function AISidebar() {
Zurück
-
KI Assistent
- {tabBar}
+ {iconStrip}
+
+ {activeTab.label}
+
{renderTabContent()}
@@ -220,20 +218,10 @@ export function AISidebar() {
data-testid="ai-sidebar-pane"
>
-
-
- {aiSidebarTab === 'notifications' ? t('topbar.notifications') : 'KI Assistent'}
-
-
+ {iconStrip}
+
+ {activeTab.label}
- {tabBar}
{renderTabContent()}