feat(ui): add desktop git sidebar + terminal dock and improve in-app PR workflow (#362)

* feat: add unified dropdown with services content in header * feat: add right Git sidebar with resizable panel * feat: implement responsive panel auto-toggle and terminal rehydration - Auto-close the right sidebar when width is below a threshold and auto-open it when space permits - Auto-close the bottom terminal when height is below a threshold and auto-open it when enough space - Apply a dedicated rehydrated streaming configuration for terminal sessions to optimize reconnect behavior * feat: enhance PR view with status caching and annotations * feat(ui): enable chat dispatch in PullRequestSection * feat(TerminalView): adjust layout * feat: refine chat input layout and text selection menu * fix(ui): show empty state in GitView when no changes * feat(git): update PR actions styling and create PR button
2026-02-09 03:13:34 +02:00
parent 3f29b2c6a2
commit 5b0a97d170
30 changed files with 3216 additions and 1443 deletions
@@ -0,0 +1,110 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { useUIStore } from '@/stores/useUIStore';
+
+const RIGHT_SIDEBAR_MIN_WIDTH = 400;
+const RIGHT_SIDEBAR_MAX_WIDTH = 860;
+
+interface RightSidebarProps {
+  isOpen: boolean;
+  isMobile: boolean;
+  children: React.ReactNode;
+}
+
+export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, isMobile, children }) => {
+  const rightSidebarWidth = useUIStore((state) => state.rightSidebarWidth);
+  const setRightSidebarWidth = useUIStore((state) => state.setRightSidebarWidth);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const startXRef = React.useRef(0);
+  const startWidthRef = React.useRef(rightSidebarWidth || 420);
+
+  React.useEffect(() => {
+    if (isMobile || !isResizing) {
+      return;
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const delta = startXRef.current - event.clientX;
+      const nextWidth = Math.min(
+        RIGHT_SIDEBAR_MAX_WIDTH,
+        Math.max(RIGHT_SIDEBAR_MIN_WIDTH, startWidthRef.current + delta)
+      );
+      setRightSidebarWidth(nextWidth);
+    };
+
+    const handlePointerUp = () => {
+      setIsResizing(false);
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp, { once: true });
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [isMobile, isResizing, setRightSidebarWidth]);
+
+  React.useEffect(() => {
+    if (isMobile && isResizing) {
+      setIsResizing(false);
+    }
+  }, [isMobile, isResizing]);
+
+  if (isMobile) {
+    return null;
+  }
+
+  const appliedWidth = isOpen
+    ? Math.min(RIGHT_SIDEBAR_MAX_WIDTH, Math.max(RIGHT_SIDEBAR_MIN_WIDTH, rightSidebarWidth || 420))
+    : 0;
+
+  const handlePointerDown = (event: React.PointerEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    setIsResizing(true);
+    startXRef.current = event.clientX;
+    startWidthRef.current = appliedWidth;
+    event.preventDefault();
+  };
+
+  return (
+    <aside
+      className={cn(
+        'relative flex h-full overflow-hidden border-l border-border bg-sidebar',
+        isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
+        !isOpen && 'border-l-0'
+      )}
+      style={{
+        width: `${appliedWidth}px`,
+        minWidth: `${appliedWidth}px`,
+        maxWidth: `${appliedWidth}px`,
+        overflowX: 'clip',
+      }}
+      aria-hidden={!isOpen || appliedWidth === 0}
+    >
+      {isOpen && (
+        <div
+          className={cn(
+            'absolute left-0 top-0 z-20 h-full w-[4px] cursor-col-resize hover:bg-primary/50 transition-colors',
+            isResizing && 'bg-primary'
+          )}
+          onPointerDown={handlePointerDown}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize right panel"
+        />
+      )}
+      <div
+        className={cn(
+          'relative z-10 flex h-full min-h-0 w-full flex-col transition-opacity duration-300 ease-in-out',
+          !isOpen && 'pointer-events-none select-none opacity-0'
+        )}
+        aria-hidden={!isOpen}
+      >
+        {isOpen ? children : null}
+      </div>
+    </aside>
+  );
+};