Leopoldadmin/leocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AISidebar: rename Proaktiv to Live KI, align icon strip border with TopBar, notifications as slim cards

Browse Source
This commit is contained in:
Agent Zero
2026-07-21 23:01:21 +02:00
parent a4793991dd
commit 650f6e6723
1 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/AISidebar.tsx
+20 -22
View File
@@ -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,26 +103,24 @@ 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">
{notifications.length === 0 && (
<li className="px-4 py-3 text-sm text-secondary-400">Keine Benachrichtigungen</li>
)}
{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>
<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"
aria-label="Benachrichtigung löschen"
onClick={() => removeNotification(i)}
>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</li>
))}
</ul>
<div className="flex flex-col h-full overflow-y-auto p-3 gap-2" data-testid="notification-list">
{notifications.length === 0 && (
<p className="text-sm text-secondary-400 text-center py-4">Keine Benachrichtigungen</p>
)}
{notifications.map((msg, i) => (
<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="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)}
>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
))}
</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}