AISidebar: rename Proaktiv to Live KI, align icon strip border with TopBar, notifications as slim cards
This commit is contained in:
@@ -63,7 +63,7 @@ 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: 'proactive', label: 'Live KI', icon: bulbIcon, testId: 'ai-sidebar-tab-proactive' },
|
||||
{ key: 'notifications', label: t('topbar.notifications'), icon: bellIcon, testId: 'ai-sidebar-tab-notifications' },
|
||||
];
|
||||
|
||||
@@ -103,16 +103,15 @@ export function AISidebar() {
|
||||
}
|
||||
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">
|
||||
<div className="flex flex-col h-full overflow-y-auto p-3 gap-2" data-testid="notification-list">
|
||||
{notifications.length === 0 && (
|
||||
<li className="px-4 py-3 text-sm text-secondary-400">Keine Benachrichtigungen</li>
|
||||
<p className="text-sm text-secondary-400 text-center py-4">Keine Benachrichtigungen</p>
|
||||
)}
|
||||
{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>
|
||||
<div key={i} className="flex items-start justify-between gap-2 px-3 py-2 rounded-lg border border-secondary-200 bg-secondary-50 hover:border-secondary-300 hover:bg-secondary-100 transition-colors text-sm text-secondary-700 group">
|
||||
<span className="flex-1 leading-snug">{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"
|
||||
className="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 mt-0.5"
|
||||
aria-label="Benachrichtigung löschen"
|
||||
onClick={() => removeNotification(i)}
|
||||
>
|
||||
@@ -120,9 +119,8 @@ export function AISidebar() {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -143,7 +141,7 @@ export function AISidebar() {
|
||||
};
|
||||
|
||||
const iconStrip = (
|
||||
<div className="flex items-center gap-1 px-2 py-2 border-b border-secondary-200" role="tablist">
|
||||
<div className="flex items-center gap-1 px-2 h-[58px] border-b border-secondary-200" role="tablist">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
|
||||
Reference in New Issue
Block a user