From 650f6e6723605d2c0aea7772c2dc469c43894791 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Tue, 21 Jul 2026 23:01:21 +0200
Subject: [PATCH] AISidebar: rename Proaktiv to Live KI, align icon strip
 border with TopBar, notifications as slim cards

---
 frontend/src/components/layout/AISidebar.tsx | 42 ++++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/layout/AISidebar.tsx b/frontend/src/components/layout/AISidebar.tsx
index 76b686b..869b5a8 100644
--- a/frontend/src/components/layout/AISidebar.tsx
+++ b/frontend/src/components/layout/AISidebar.tsx
@@ -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}