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[] = [ 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,26 +103,24 @@ 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 && ( <p className="text-sm text-secondary-400 text-center py-4">Keine Benachrichtigungen</p>
<li className="px-4 py-3 text-sm text-secondary-400">Keine Benachrichtigungen</li> )}
)} {notifications.map((msg, i) => (
{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">
<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 leading-snug">{msg}</span>
<span className="flex-1 truncate">{msg}</span> <button
<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"
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"
aria-label="Benachrichtigung löschen" onClick={() => removeNotification(i)}
onClick={() => removeNotification(i)} >
> <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg>
</svg> </button>
</button> </div>
</li> ))}
))}
</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}