[WEB-4779] chore: app sidebar wrapper component for consistency and reusability#7655
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughReplaces the stateful, multi-section Projects AppSidebar with a new SidebarWrapper component and refactors Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SidebarWrapper
participant Hooks as AppRail/Theme/Size Hooks
participant DOM as Viewport/OutsideClickDetector
User->>SidebarWrapper: interact / toggle
SidebarWrapper->>Hooks: read app rail & window size
SidebarWrapper->>DOM: attach outside-click detector
alt window width < 768
SidebarWrapper->>SidebarWrapper: auto-collapse / expand
User-->>DOM: click outside
DOM->>SidebarWrapper: notify -> collapse
else window width >= 768
SidebarWrapper->>SidebarWrapper: remain expanded
end
SidebarWrapper->>User: render top (title/actions), middle (children), bottom (edition/help)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 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. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
🧪 Generate unit tests
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. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new SidebarWrapper component to centralize and standardize sidebar UI and layout logic across the application, improving code reusability and consistency.
- Extracts common sidebar layout patterns into a reusable wrapper component
- Refactors the existing projects sidebar to use the new wrapper
- Consolidates duplicate UI logic for sidebar header, footer, and responsive behavior
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/web/core/components/sidebar/sidebar-wrapper.tsx | New reusable wrapper component containing sidebar layout, responsive behavior, and common UI elements |
| apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx | Refactored to use the new SidebarWrapper, removing duplicated layout code |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![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 (4)
apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx (1)
32-32: Localize the title string.Hardcoding "Projects" may skip i18n. Prefer passing a localized string.
Example:
-import { FC } from "react"; +import { FC } from "react"; +import { useTranslation } from "next-i18next"; ... -export const AppSidebar: FC = observer(() => { +export const AppSidebar: FC = observer(() => { + const { t } = useTranslation(); ... - <SidebarWrapper title="Projects" quickActions={<SidebarQuickActions />}> + <SidebarWrapper title={t("projects")} quickActions={<SidebarQuickActions />}>apps/web/core/components/sidebar/sidebar-wrapper.tsx (3)
39-43: Avoid silencing exhaustive-deps; include stable deps.Include
sidebarCollapsedandtoggleSidebarto prevent stale closures. The guard prevents loops.useEffect(() => { if (windowSize[0] < 768 && !sidebarCollapsed) toggleSidebar(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [windowSize]); + }, [windowSize, sidebarCollapsed, toggleSidebar]);
1-1: Use type-only ReactNode to reduce runtime imports.Slightly cleaner and avoids pulling the
Reactnamespace for types.-import { FC, useEffect, useRef } from "react"; +import { FC, useEffect, useRef, type ReactNode } from "react"; @@ type TSidebarWrapperProps = { title: string; - children: React.ReactNode; - quickActions?: React.ReactNode; + children: ReactNode; + quickActions?: ReactNode; };Also applies to: 16-20
31-37: Prefer usingwindowSizeoverwindow.innerWidthinside the handler.Keeps a single source of truth for viewport width.
- useOutsideClickDetector(ref, () => { - if (sidebarCollapsed === false) { - if (window.innerWidth < 768) { - toggleSidebar(); - } - } - }); + useOutsideClickDetector(ref, () => { + if (!sidebarCollapsed && windowSize[0] < 768) toggleSidebar(); + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx(1 hunks)apps/web/core/components/sidebar/sidebar-wrapper.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx (1)
apps/web/core/components/sidebar/sidebar-wrapper.tsx (1)
SidebarWrapper(22-74)
apps/web/core/components/sidebar/sidebar-wrapper.tsx (6)
apps/web/core/hooks/use-app-rail.tsx (1)
useAppRail(4-10)packages/hooks/src/use-outside-click-detector.tsx (1)
useOutsideClickDetector(3-29)apps/web/core/components/workspace/sidebar/dropdown.tsx (1)
SidebarDropdown(11-22)apps/web/core/components/sidebar/sidebar-toggle-button.tsx (1)
AppSidebarToggleButton(8-23)apps/web/ce/components/workspace/edition-badge.tsx (1)
WorkspaceEditionBadge(12-40)apps/web/core/components/workspace/sidebar/help-menu.tsx (1)
HelpMenu(27-152)
⏰ 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). (1)
- GitHub Check: Build and lint web apps
🔇 Additional comments (2)
apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx (1)
32-40: Refactor to SidebarWrapper looks good.The composition reads cleanly and preserves existing permission checks. No functional concerns here.
apps/web/core/components/sidebar/sidebar-wrapper.tsx (1)
50-57: Confirm toggle placement UX with product.When app rail is disabled, the header (title + toggle) is hidden and the toggle is only in the footer. If that’s intentional, ignore; otherwise consider always showing the title, and moving the toggle consistently to one place.
Also applies to: 68-70
Description
This PR introduces a new app sidebar wrapper component to centralize and standardize sidebar ui and layout logic.
Type of Change
Summary by CodeRabbit
New Features
Refactor