Dashboard: group project sidebar links #7417
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
""" WalkthroughThe sidebar navigation logic was refactored to introduce a more modular rendering structure. The previous sidebar components were replaced with a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SidebarLayout
participant RenderSidebarMenu
participant RenderSidebarGroup
User->>SidebarLayout: Render sidebar
SidebarLayout->>RenderSidebarGroup: For each group, render with groupName and sidebarLinks
RenderSidebarGroup->>RenderSidebarMenu: Pass sidebarLinks to RenderSidebarMenu
RenderSidebarMenu->>SidebarLayout: Render link items, separators, and nested groups
Suggested reviewers
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (7)
✨ Finishing Touches
🪧 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 (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
MananTank
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7417 +/- ##
=======================================
Coverage 52.08% 52.08%
=======================================
Files 947 947
Lines 63636 63636
Branches 4222 4222
=======================================
Hits 33146 33146
Misses 30384 30384
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the sidebar layout by introducing new components for better organization and rendering of sidebar links. It refactors the sidebar structure to use `RenderSidebarMenu` and `RenderSidebarGroup`, allowing for grouped sidebar items.
### Detailed summary
- Added `SidebarGroupLabel` and `SidebarMenuSubItem` components.
- Refactored `FullWidthSidebarLayout` to use `RenderSidebarMenu` instead of `RenderSidebarGroup`.
- Updated `RenderSidebarGroup` to include `SidebarGroupLabel` and `SidebarMenuItem`.
- Introduced grouping for sidebar links with `group` and `links` properties.
- Enhanced sidebar link structure to support separators and improved organization.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Improved sidebar navigation by organizing links into hierarchical groups ("Build," "Monetize," "Scale") for better clarity and usability.
- Updated sidebar rendering for greater modularity and maintainability, with enhanced grouping and link management.
- **Style**
- Sidebar appearance and structure are updated for a more organized and user-friendly experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-24-dashboard_group_project_sidebar_links
branch
from
c37bc05 to
c1676b9
Compare
![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
🧹 Nitpick comments (1)
apps/dashboard/src/@/components/blocks/SidebarLayout.tsx (1)
103-112: Review the semantic correctness of wrapping SidebarGroupLabel in SidebarMenuItem.The current implementation wraps
SidebarGroupLabelinside aSidebarMenuItem, which may not be semantically correct. Consider if the group label should be a direct child ofSidebarGroupinstead.-<SidebarGroup className="p-0"> - <SidebarMenuItem> - <SidebarGroupLabel> {props.groupName}</SidebarGroupLabel> - <SidebarGroupContent> - <RenderSidebarMenu links={props.sidebarLinks} /> - </SidebarGroupContent> - </SidebarMenuItem> -</SidebarGroup> +<SidebarGroup className="p-0"> + <SidebarGroupLabel>{props.groupName}</SidebarGroupLabel> + <SidebarGroupContent> + <RenderSidebarMenu links={props.sidebarLinks} /> + </SidebarGroupContent> +</SidebarGroup>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/@/components/blocks/SidebarLayout.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g., export function MyComponent()). Combine class names via 'cn', expose 'className' prop if useful. ...
**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).
apps/dashboard/src/@/components/blocks/SidebarLayout.tsx
🧬 Code Graph Analysis (1)
apps/dashboard/src/@/components/blocks/SidebarLayout.tsx (2)
apps/dashboard/src/@/components/ui/sidebar.tsx (10)
SidebarContent(751-751)SidebarFooter(752-752)SidebarGroup(753-753)SidebarMenuItem(764-764)SidebarGroupLabel(756-756)SidebarGroupContent(755-755)useSidebar(773-773)SidebarMenu(760-760)SidebarMenuSubItem(768-768)SidebarSeparator(771-771)apps/dashboard/src/@/components/blocks/Sidebar.tsx (1)
SidebarLink(15-23)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/@/components/blocks/SidebarLayout.tsx (5)
7-7: LGTM! New UI component imports are properly added.The imports for
SidebarGroupLabelandSidebarMenuSubItemalign with the refactored sidebar structure and are correctly imported from the UI library.Also applies to: 11-11
71-72: LGTM! Sidebar rendering refactor improves modularity.The change from
RenderSidebarGrouptoRenderSidebarMenucreates a cleaner separation of concerns and the addition of padding toSidebarContentimproves the visual layout.Also applies to: 77-77
115-116: LGTM! Good use of the useSidebar hook for mobile functionality.The
RenderSidebarMenufunction properly uses theuseSidebarhook to manage mobile sidebar state, which provides a better user experience.
123-123: LGTM! Correct use of SidebarMenuSubItem for individual links.The change from
SidebarMenuItemtoSidebarMenuSubItemfor individual links is semantically correct and aligns with the hierarchical sidebar structure.Also applies to: 139-139
101-101: To accurately locate all usages ofRenderSidebarGroup, let’s rerun the search without relying on ripgrep’s preset file types:#!/bin/bash # Search for usages of RenderSidebarGroup across .ts and .tsx files rg -A5 -B2 RenderSidebarGroup -g '*.ts' -g '*.tsx'
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the sidebar layout by introducing new components for better organization and rendering of sidebar links. It refactors the sidebar structure to use `RenderSidebarMenu` and `RenderSidebarGroup`, allowing for grouped sidebar items.
### Detailed summary
- Added `SidebarGroupLabel` and `SidebarMenuSubItem` components.
- Refactored `FullWidthSidebarLayout` to use `RenderSidebarMenu` instead of `RenderSidebarGroup`.
- Updated `RenderSidebarGroup` to include `SidebarGroupLabel` and `SidebarMenuItem`.
- Introduced grouping for sidebar links with `group` and `links` properties.
- Enhanced sidebar link structure to support separators and improved organization.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Improved sidebar navigation by organizing links into hierarchical groups ("Build," "Monetize," "Scale") for better clarity and usability.
- Updated sidebar rendering for greater modularity and maintainability, with enhanced grouping and link management.
- **Style**
- Sidebar appearance and structure are updated for a more organized and user-friendly experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
MananTank
force-pushed
the
06-24-dashboard_group_project_sidebar_links
branch
from
c1676b9 to
66270f7
Compare
PR-Codex overview
This PR refactors the
ProjectSidebarLayout.tsxto enhance the sidebar structure by introducing groups for links and improving the rendering of sidebar items. It also modifies the way sidebar links are displayed, replacingSidebarGroupwithRenderSidebarMenu.Detailed summary
RenderSidebarMenufor rendering links instead ofRenderSidebarGroup.linksarrays for grouped items.SidebarMenuItemtoSidebarMenuSubItem.Summary by CodeRabbit