UI: schmaleres Suchfeld, KI-Symbol aus Sidebar entfernt, Lösch-Button bei Benachrichtigungen, KI Sidebar per Drag verstellbar (handleSide=left)

frontend/src/components/ui/ResizablePanel.tsx

@@ -28,6 +28,8 @@ export interface ResizablePanelProps {
   className?: string;
   /** When false, panel becomes flex-1 with no drag handle */
   resizable?: boolean;
+  /** Which side the drag handle is on ('right' default, 'left' for right-aligned panels) */
+  handleSide?: 'left' | 'right';
   /** testid forwarded to the container div */
   'data-testid'?: string;
 }
@@ -39,6 +41,7 @@ export function ResizablePanel({
   children,
   className,
   resizable = true,
+  handleSide = 'right',
   ...rest
 }: ResizablePanelProps) {
   const [width, setWidth] = useState(initialWidth);
@@ -69,7 +72,8 @@ export function ResizablePanel({
     const handleMouseMove = (e: MouseEvent) => {
       if (!isResizing.current) return;
       const delta = e.clientX - startX.current;
-      const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth.current + delta));
+      const adjustedDelta = handleSide === 'left' ? -delta : delta;
+      const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth.current + adjustedDelta));
       // Apply width directly to DOM — no React re-render during drag
       if (panelRef.current) {
         panelRef.current.style.width = `${newWidth}px`;
@@ -101,7 +105,7 @@ export function ResizablePanel({
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [minWidth, maxWidth]);
+  }, [minWidth, maxWidth, handleSide]);
 
   return (
     <div
@@ -125,8 +129,11 @@ export function ResizablePanel({
       </div>
       {resizable && (
         <div
-          className="absolute top-0 right-0 h-full w-1.5 cursor-col-resize bg-transparent hover:bg-primary-300 active:bg-primary-400 transition-colors z-50 pointer-events-auto"
-          style={{ marginRight: '-3px' }}
+          className={clsx(
+            'absolute top-0 h-full w-1.5 cursor-col-resize bg-transparent hover:bg-primary-300 active:bg-primary-400 transition-colors z-50 pointer-events-auto',
+            handleSide === 'left' ? 'left-0' : 'right-0',
+          )}
+          style={handleSide === 'left' ? { marginLeft: '-3px' } : { marginRight: '-3px' }}
           onMouseDown={handleMouseDown}
           data-testid="resize-handle"
           role="separator"