feat: enhance sidebar behavior with collapsible left pane and optimized chat sidebar transitions

This commit is contained in:
tusharmagar 2026-02-19 23:58:27 +05:30
parent bf5f6f16de
commit 1cad68e60f
2 changed files with 14 additions and 4 deletions

View file

@ -2748,6 +2748,7 @@ function App() {
: null
const isRightPaneContext = Boolean(selectedPath || isGraphOpen)
const isRightPaneOnlyMode = isRightPaneContext && isChatSidebarOpen && isRightPaneMaximized
const shouldCollapseLeftPane = isRightPaneOnlyMode
const openMarkdownTabs = React.useMemo(() => {
const markdownTabs = fileTabs.filter(tab => tab.path.endsWith('.md'))
if (selectedPath?.endsWith('.md')) {
@ -2843,9 +2844,13 @@ function App() {
backgroundTasks={backgroundTasks}
selectedBackgroundTask={selectedBackgroundTask}
/>
{!isRightPaneOnlyMode && (
<SidebarInset
className="overflow-hidden! min-h-0 min-w-0"
className={cn(
"overflow-hidden! min-h-0 min-w-0 transition-[max-width] duration-200 ease-linear",
shouldCollapseLeftPane && "pointer-events-none select-none"
)}
style={shouldCollapseLeftPane ? { maxWidth: 0 } : { maxWidth: '100%' }}
aria-hidden={shouldCollapseLeftPane}
onMouseDownCapture={() => setActiveShortcutPane('left')}
onFocusCapture={() => setActiveShortcutPane('left')}
>
@ -3136,7 +3141,6 @@ function App() {
</FileCardProvider>
)}
</SidebarInset>
)}
{/* Chat sidebar - shown when viewing files/graph */}
{isRightPaneContext && (

View file

@ -154,6 +154,8 @@ export function ChatSidebar({
const paneRef = useRef<HTMLDivElement>(null)
const startXRef = useRef(0)
const startWidthRef = useRef(0)
const prevIsMaximizedRef = useRef(isMaximized)
const justToggledMaximize = prevIsMaximizedRef.current !== isMaximized
const getMaxAllowedWidth = useCallback(() => {
if (typeof window === 'undefined') return MAX_WIDTH
@ -183,6 +185,10 @@ export function ChatSidebar({
setShowContent(false)
}, [isOpen])
useEffect(() => {
prevIsMaximizedRef.current = isMaximized
}, [isMaximized])
useEffect(() => {
if (typeof window === 'undefined') return
try {
@ -343,7 +349,7 @@ export function ChatSidebar({
onFocusCapture={onActivate}
className={cn(
'relative flex min-w-0 flex-col overflow-hidden border-l border-border bg-background',
!isResizing && 'transition-[width] duration-200 ease-linear'
!isResizing && !justToggledMaximize && 'transition-[width] duration-200 ease-linear'
)}
style={paneStyle}
>