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
+8 -10
View File
@@ -63,7 +63,7 @@ export function AISidebar() {
const tabs: TabDef[] = [ const tabs: TabDef[] = [
{ key: 'chat', label: 'KI Chat', icon: robotIcon, testId: 'ai-sidebar-tab-chat' }, { 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' }, { key: 'notifications', label: t('topbar.notifications'), icon: bellIcon, testId: 'ai-sidebar-tab-notifications' },
]; ];
@@ -103,16 +103,15 @@ export function AISidebar() {
} }
if (aiSidebarTab === 'notifications') { if (aiSidebarTab === 'notifications') {
return ( return (
<div className="flex flex-col h-full" data-testid="notification-list"> <div className="flex flex-col h-full overflow-y-auto p-3 gap-2" data-testid="notification-list">
<ul className="flex-1 overflow-y-auto py-1" role="list">
{notifications.length === 0 && ( {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) => ( {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"> <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 truncate">{msg}</span> <span className="flex-1 leading-snug">{msg}</span>
<button <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" aria-label="Benachrichtigung löschen"
onClick={() => removeNotification(i)} onClick={() => removeNotification(i)}
> >
@@ -120,9 +119,8 @@ export function AISidebar() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</li> </div>
))} ))}
</ul>
</div> </div>
); );
} }
@@ -143,7 +141,7 @@ export function AISidebar() {
}; };
const iconStrip = ( 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) => ( {tabs.map((tab) => (
<button <button
key={tab.key} key={tab.key}