From 88be33879ca517821c9c680a38eec5db7a77bb55 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Sat, 18 Jul 2026 00:53:00 +0200
Subject: [PATCH] feat: AI sidebar full height with collapsed icon strip and
 drag resize
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AISidebar: full height, right of TopBar and Toolbar (all pages except AI Assistant)
- AISidebar: collapsed mode shows narrow 48px icon strip with KI button
- AISidebar: expanded mode uses ResizablePanel with drag-to-resize (240-600px)
- AppShell: moved AISidebar outside inner content container to full-height flex
- uiStore: renamed aiSidebarOpen→aiSidebarCollapsed (default: true=collapsed)
- TopBar: AI button highlights when sidebar is expanded
---
 frontend/src/components/layout/AISidebar.tsx | 35 +++++++++++++++++---
 frontend/src/components/layout/AppShell.tsx  |  6 ++--
 frontend/src/components/layout/TopBar.tsx    |  7 ++--
 frontend/src/store/uiStore.ts                | 10 +++---
 4 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/layout/AISidebar.tsx b/frontend/src/components/layout/AISidebar.tsx
index 5da8b7e..b48415d 100644
--- a/frontend/src/components/layout/AISidebar.tsx
+++ b/frontend/src/components/layout/AISidebar.tsx
@@ -5,7 +5,7 @@ import { createSession, fetchSessions } from '@/api/ai';
 import { useUIStore } from '@/store/uiStore';
 
 export function AISidebar() {
-  const { setAISidebarOpen } = useUIStore();
+  const { aiSidebarCollapsed, toggleAISidebar } = useUIStore();
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -27,6 +27,28 @@ export function AISidebar() {
     })();
   }, []);
 
+  // Collapsed: narrow icon strip
+  if (aiSidebarCollapsed) {
+    return (
+      <div
+        className="flex-shrink-0 w-12 flex flex-col items-center border-l border-secondary-200 bg-white py-3"
+        data-testid="ai-sidebar-collapsed"
+      >
+        <button
+          onClick={toggleAISidebar}
+          className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          aria-label="KI Assistent öffnen"
+          title="KI Assistent"
+        >
+          <svg className="w-5 h-5 text-secondary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+        </button>
+      </div>
+    );
+  }
+
+  // Expanded: full chat panel with resize handle
   return (
     <ResizablePanel
       initialWidth={320}
@@ -39,11 +61,14 @@ export function AISidebar() {
         <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
           <span className="text-sm font-medium text-secondary-700">KI Assistent</span>
           <button
-            onClick={() => setAISidebarOpen(false)}
-            className="text-secondary-400 hover:text-secondary-600"
-            title="Schließen"
+            onClick={toggleAISidebar}
+            className="p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
+            title="Einklappen"
+            aria-label="KI Assistent einklappen"
           >
-            ✕
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
           </button>
         </div>
         <div className="flex-1 overflow-hidden">
diff --git a/frontend/src/components/layout/AppShell.tsx b/frontend/src/components/layout/AppShell.tsx
index 70a2085..c46a995 100644
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -8,11 +8,10 @@ import { ToastContainer } from '@/components/ui/Toast';
 import { useUIStore } from '@/store/uiStore';
 
 export function AppShell() {
-  const { aiSidebarOpen } = useUIStore();
   const location = useLocation();
 
   // Hide AI sidebar on the AI Assistant page itself
-  const showAISidebar = aiSidebarOpen && !location.pathname.startsWith('/ai-assistant');
+  const showAISidebar = !location.pathname.startsWith('/ai-assistant');
 
   return (
     <div className="flex h-screen overflow-hidden bg-secondary-50" data-testid="app-shell">
@@ -30,9 +29,10 @@ export function AppShell() {
           >
             <Outlet />
           </main>
-          {showAISidebar && <AISidebar />}
         </div>
       </div>
+      {/* AI Sidebar — full height, right of TopBar and Toolbar */}
+      {showAISidebar && <AISidebar />}
       <ToastContainer />
     </div>
   );
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index f4868ad..a971579 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -14,7 +14,7 @@ export function TopBar() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { user } = useAuthStore();
-  const { toggleSidebar, toggleAISidebar } = useUIStore();
+  const { toggleSidebar, toggleAISidebar, aiSidebarCollapsed } = useUIStore();
   const { currentTenant, availableTenants, switchTenant, isSwitching } = useTenant();
   const logoutMutation = useLogout();
 
@@ -72,7 +72,10 @@ export function TopBar() {
         {/* AI Assistant toggle */}
         <button
           onClick={toggleAISidebar}
-          className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          className={clsx(
+            'p-2 rounded-md min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            aiSidebarCollapsed ? 'hover:bg-secondary-100' : 'bg-primary-50 text-primary-600 hover:bg-primary-100',
+          )}
           aria-label="KI Assistent"
           title="KI Assistent"
         >
diff --git a/frontend/src/store/uiStore.ts b/frontend/src/store/uiStore.ts
index 8ad35cb..5b73245 100644
--- a/frontend/src/store/uiStore.ts
+++ b/frontend/src/store/uiStore.ts
@@ -14,14 +14,14 @@ export interface UIState {
   theme: Theme;
   locale: Locale;
   sidebarOpen: boolean;
-  aiSidebarOpen: boolean;
+  aiSidebarCollapsed: boolean;
   toasts: Toast[];
   setTheme: (theme: Theme) => void;
   setLocale: (locale: Locale) => void;
   toggleSidebar: () => void;
   setSidebarOpen: (open: boolean) => void;
   toggleAISidebar: () => void;
-  setAISidebarOpen: (open: boolean) => void;
+  setAISidebarCollapsed: (collapsed: boolean) => void;
   addToast: (toast: Omit<Toast, 'id'>) => void;
   removeToast: (id: string) => void;
   clearToasts: () => void;
@@ -33,7 +33,7 @@ export const useUIStore = create<UIState>((set) => ({
   theme: (localStorage.getItem('leocrm_theme') as Theme) || 'light',
   locale: (localStorage.getItem('leocrm_lang') as Locale) || 'de',
   sidebarOpen: true,
-  aiSidebarOpen: false,
+  aiSidebarCollapsed: true,
   toasts: [],
   setTheme: (theme) => {
     localStorage.setItem('leocrm_theme', theme);
@@ -45,8 +45,8 @@ export const useUIStore = create<UIState>((set) => ({
   },
   toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
   setSidebarOpen: (open) => set({ sidebarOpen: open }),
-  toggleAISidebar: () => set((s) => ({ aiSidebarOpen: !s.aiSidebarOpen })),
-  setAISidebarOpen: (open) => set({ aiSidebarOpen: open }),
+  toggleAISidebar: () => set((s) => ({ aiSidebarCollapsed: !s.aiSidebarCollapsed })),
+  setAISidebarCollapsed: (collapsed) => set({ aiSidebarCollapsed: collapsed }),
   addToast: (toast) => {
     const id = `toast-${++toastIdCounter}`;
     set((s) => ({ toasts: [...s.toasts, { ...toast, id }] }));