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