feat: add collapsible sidebar on desktop/web views #333
Conversation
Allow users to collapse/expand the history sidebar on desktop and web views. The toggle button is now visible on all screen sizes. Click-outside-to-close behavior remains mobile-only to preserve desktop UX. Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
WalkthroughThese changes refactor the Sidebar and UnifiedChat components to use centralized mobile detection ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Deploying maple with
|
| Latest commit: |
e4eb242
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8a032e54.maple-ca8.pages.dev |
| Branch Preview URL: | https://feature-collapsible-sidebar.maple-ca8.pages.dev |
Greptile OverviewGreptile SummaryAdds collapsible sidebar functionality to desktop and web views, bringing feature parity with mobile. The implementation correctly uses the existing
Confidence Score: 5/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant UnifiedChat
participant Sidebar
participant useIsMobile
Note over UnifiedChat: Initial render
UnifiedChat->>useIsMobile: Check viewport size
useIsMobile-->>UnifiedChat: isMobile = true/false
UnifiedChat->>UnifiedChat: setState(!isMobile)
alt Desktop (sidebar open by default)
UnifiedChat->>Sidebar: render(isOpen=true)
Sidebar->>Sidebar: Show with toggle & new chat buttons
else Mobile (sidebar closed by default)
UnifiedChat->>UnifiedChat: Show SidebarToggle in header
UnifiedChat->>Sidebar: render(isOpen=false)
Sidebar->>Sidebar: Hidden
end
Note over User,Sidebar: User clicks toggle button
alt On Desktop
User->>Sidebar: Click toggle (close)
Sidebar->>UnifiedChat: onToggle()
UnifiedChat->>UnifiedChat: setState(false)
UnifiedChat->>UnifiedChat: Remove grid column layout
UnifiedChat->>UnifiedChat: Show SidebarToggle + NewChat in header
UnifiedChat->>Sidebar: render(isOpen=false)
else On Mobile
User->>UnifiedChat: Click SidebarToggle
UnifiedChat->>UnifiedChat: onToggle()
UnifiedChat->>UnifiedChat: setState(true)
UnifiedChat->>Sidebar: render(isOpen=true)
Sidebar->>Sidebar: Show sidebar overlay
alt User clicks outside
User->>Sidebar: Click outside
Sidebar->>useIsMobile: Check if mobile
useIsMobile-->>Sidebar: true
Sidebar->>UnifiedChat: onToggle()
UnifiedChat->>UnifiedChat: setState(false)
end
end
Note over User,Sidebar: New Chat button behavior
alt Sidebar open on mobile
User->>Sidebar: Click New Chat
Sidebar->>useIsMobile: Check if mobile
useIsMobile-->>Sidebar: true
Sidebar->>UnifiedChat: onToggle()
Sidebar->>Sidebar: Navigate to new chat
else Sidebar open on desktop
User->>Sidebar: Click New Chat
Sidebar->>useIsMobile: Check if mobile
useIsMobile-->>Sidebar: false
Sidebar->>Sidebar: Navigate (no close)
else Sidebar closed (any size)
User->>UnifiedChat: Click header New Chat
UnifiedChat->>UnifiedChat: Clear conversation
UnifiedChat->>UnifiedChat: Navigate to new chat
end
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/components/Sidebar.tsx(5 hunks)frontend/src/components/UnifiedChat.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/components/Sidebar.tsxfrontend/src/components/UnifiedChat.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/components/Sidebar.tsxfrontend/src/components/UnifiedChat.tsx
🧬 Code graph analysis (1)
frontend/src/components/Sidebar.tsx (2)
frontend/src/utils/utils.ts (1)
useIsMobile(16-54)frontend/src/components/ui/button.tsx (1)
Button(62-62)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: build-ios
- GitHub Check: build-android
- GitHub Check: build-linux
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
frontend/src/components/Sidebar.tsx (4)
25-29: LGTM! Mobile-only sidebar close logic is correct.The conditional check ensures the sidebar only closes on mobile when starting a new chat, preserving desktop behavior as intended.
77-78: LGTM! Centralized mobile detection and proper dependency tracking.The
useIsMobile()hook is correctly used and included in all relevant dependency arrays. The click-outside behavior is properly scoped to mobile only.Also applies to: 82-96
139-139: LGTM! Visibility logic enables desktop collapsibility.Removing the
md:blockclass when closed allows the sidebar to be hidden on desktop, which is the core feature of this PR. The toggle buttons (lines 146, 208) provide a way to reopen it.
196-196: ChatHistoryList correctly accepts the isMobile prop.The component signature has been properly updated. The
ChatHistoryListPropsinterface (line 20) definesisMobile?: boolean, and the component function (line 43) correctly destructures it with a default value offalse.frontend/src/components/UnifiedChat.tsx (3)
2258-2260: LGTM! Responsive grid layout adapts to sidebar state.The conditional grid columns correctly implement the collapsible sidebar feature. When closed, the layout is single-column on all screen sizes. When open, it shows two columns on desktop (md+) with the sidebar taking exactly 280px.
2276-2281: LGTM! Fixed toggle button positioning is correct.The sidebar toggle is now always visible when the sidebar is closed, regardless of screen size. The fixed positioning at
top-[9.5px]appears to align with the header, though this specific value seems precise—ensure it aligns correctly across different viewport sizes during testing.If the
9.5pxvalue causes misalignment issues on certain screen sizes, consider using a more standard spacing value or aligning with the header height programmatically.
630-630: LGTM! Sidebar state initialization matches requirements.The initial state
!isMobilecorrectly implements the PR requirement: sidebar defaults to open on desktop and closed on mobile.
Summary
Adds the ability to collapse/expand the sidebar on desktop and web views, bringing feature parity with the existing mobile behavior.
Changes
Behavior
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.