Chore: Integrate dropdown in teams sidebar#147
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AppSidebar
participant Collapsible
participant Router
User->>AppSidebar: Open sidebar
AppSidebar->>Collapsible: Render "Teams" group (collapsed/expanded)
User->>Collapsible: Click "Teams" group
Collapsible->>AppSidebar: Toggle open state
AppSidebar->>Router: Highlight active team link
AppSidebar->>User: Show "Create a team" and "Join a team" links separately
Possibly related PRs
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
 |
Non-persistent Teams List Expansion State ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| components/app-sidebar.tsx | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
| if (link.items && link.id === 'teams_list') { | ||
| return ( | ||
| <SidebarMenuItem className="px-2"> | ||
| <Collapsible open={isTeamsOpen} onOpenChange={setIsTeamsOpen}> |
There was a problem hiding this comment.
Non-persistent Teams List Expansion State 
Tell me more
What is the issue?
The teams list collapsible state is not persisted, causing it to reset to closed state on page refresh or navigation.
Why this matters
Users will lose their preferred sidebar navigation state every time they refresh the page or navigate, leading to a poor user experience, especially for users who frequently access team-related features.
Suggested change ∙ Feature Preview
Store the collapsible state in localStorage to persist it across page refreshes. Modify the code as follows:
const [isTeamsOpen, setIsTeamsOpen] = useState(() => {
if (typeof window !== 'undefined') {
const stored = localStorage.getItem('teamsListOpen');
return stored ? stored === 'true' : false;
}
return false;
});
const handleTeamsOpenChange = (open: boolean) => {
setIsTeamsOpen(open);
localStorage.setItem('teamsListOpen', String(open));
};
// In JSX:
<Collapsible open={isTeamsOpen} onOpenChange={handleTeamsOpenChange}>Provide feedback to improve future suggestions
💬 Looking for more details? Reply to this comment to chat with Korbit.
![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
🔭 Outside diff range comments (1)
components/app-sidebar.tsx (1)
145-147: Consider extracting the repeated opacity styling logic.The opacity styling for CTAs is a nice touch for visual hierarchy. However, the same condition and classes are duplicated.
Extract the repeated logic to improve maintainability:
const SidebarLink = ({ link }: SidebarLinkProps) => { const pathname = usePathname() const [isTeamsOpen, setIsTeamsOpen] = useState(false) + const isCtaLink = link.id === 'create_team_cta' || link.id === 'join_team_cta' + const ctaClassName = isCtaLink ? 'opacity-75 hover:opacity-100 focus:opacity-100 active:opacity-100' : ''Then use it in both places:
- className={cn( - (item.id === 'create_team_cta' || item.id === 'join_team_cta') && - 'opacity-75 hover:opacity-100 focus:opacity-100 active:opacity-100', - )} + className={cn(ctaClassName)}Also applies to: 171-173
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
components/app-sidebar.tsx(5 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/app-sidebar.tsx (3)
components/ui/sidebar.tsx (3)
SidebarMenuItem(684-684)SidebarMenuButton(683-683)SidebarMenu(680-680)components/ui/collapsible.tsx (3)
Collapsible(21-21)CollapsibleTrigger(21-21)CollapsibleContent(21-21)lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (1)
components/app-sidebar.tsx (1)
52-66: Good restructuring of team-related links!Moving "Create a team" and "Join a team" outside the collapsible Teams group improves their discoverability and aligns well with the PR objectives.
yesyash
force-pushed
the
chore/integrated-team-dropdown
branch
from
7aa3c41 to
d0cffa3
Compare
2 participants
Date: 19-07-2025
Developer Name: Rishi Chaubey
Issue Ticket Number
Description
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Integrate a dropdown menu in the teams sidebar to organize team-related actions, introduce collapsible functionality for team lists, and adjust button styling for "Add members".
Why are these changes being made?
These changes aim to enhance the user interface by improving the sidebar's usability and accessibility, making it more intuitive for users to navigate team options with collapsible sections. The addition of pointer cursor styling ensures buttons appear more interactive, providing consistent visual feedback.