mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-04-25 00:16:29 +02:00
feat: enhance sidebar behavior with collapsible left pane and optimized chat sidebar transitions
This commit is contained in:
parent
bf5f6f16de
commit
1cad68e60f
2 changed files with 14 additions and 4 deletions
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue