feat: AI sidebar full height with collapsed icon strip and drag resize

- 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
This commit is contained in:
Agent Zero
2026-07-18 00:53:00 +02:00
parent d029892d27
commit 88be33879c
4 changed files with 43 additions and 15 deletions
+5 -5
View File
@@ -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 }] }));