AISidebar: replace horizontal tabs with icon strip layout, show active tab title below icons
This commit is contained in:
Agent Zero
@@ -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"
|
||||
>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
{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>
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => { setAISidebarTab(tab.key); 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={tab.label}
|
||||
title={tab.label}
|
||||
data-testid={tab.testId}
|
||||
>
|
||||
{tab.icon('w-5 h-5 text-secondary-600')}
|
||||
{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,59 +142,38 @@ export function AISidebar() {
|
||||
);
|
||||
};
|
||||
|
||||
const tabBar = (
|
||||
<div className="flex border-b border-secondary-200" role="tablist">
|
||||
const iconStrip = (
|
||||
<div className="flex items-center gap-1 px-2 py-2 border-b border-secondary-200" role="tablist">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setAISidebarTab(tab.key)}
|
||||
className={`p-2 rounded-md min-h-touch min-w-touch flex items-center justify-center transition-colors relative ${
|
||||
aiSidebarTab === tab.key
|
||||
? 'bg-primary-100 text-primary-600'
|
||||
: 'text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700'
|
||||
}`}
|
||||
role="tab"
|
||||
aria-selected={aiSidebarTab === tab.key}
|
||||
aria-label={tab.label}
|
||||
data-testid={tab.testId}
|
||||
>
|
||||
{tab.icon('w-5 h-5')}
|
||||
{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 className="flex-1" />
|
||||
<button
|
||||
onClick={() => setAISidebarTab('proactive')}
|
||||
className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
|
||||
aiSidebarTab === 'proactive'
|
||||
? 'text-primary-600 border-primary-500'
|
||||
: 'text-secondary-500 hover:text-secondary-700 border-transparent'
|
||||
}`}
|
||||
role="tab"
|
||||
aria-selected={aiSidebarTab === 'proactive'}
|
||||
aria-label="Proaktiv"
|
||||
data-testid="ai-sidebar-tab-proactive"
|
||||
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"
|
||||
>
|
||||
<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.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>
|
||||
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>
|
||||
)}
|
||||
{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">
|
||||
<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"
|
||||
>
|
||||
{chevronRightIcon}
|
||||
</button>
|
||||
{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>
|
||||
{tabBar}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{renderTabContent()}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user