[WEB-5527] fix: extended sidebar

[aaryan610]

Description

This PR fixes the following bugs related to the extended sidebar-

1. On closing the main sidebar using keyboard shortcut, the extended sidebar doesn't close.
2. Added padding to extended sidebar's children to fix the scrollbar position.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

• Style

  • Refined sidebar and header padding for more consistent layout.
  • Enhanced Add Project button visuals with improved text color and smoother hover transition.
  • Updated empty-state layout: centered alignment, adjusted padding, and optimized asset sizing.

• Bug Fixes

  • Sidebar now properly closes when collapse state changes from theme settings.

• Enhancements

  • Added options to customize sidebar wrapper styling and empty-state presentation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5527] Scrollbar UI Issue + Sidebar Collapse Behavior

This comment was auto-generated by Plane

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit 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.

Walkthrough

Updates to the extended project sidebar: adds a className prop and collapse-driven close behavior to the wrapper, switches visibility from translate to opacity, and adjusts inner sidebar styling, padding, button classes, and EmptyStateCompact props.

Changes

Cohort / File(s)	Summary
Extended sidebar wrapper apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx	Added className?: string prop; imported useEffect and useAppTheme; when sidebarCollapsed becomes true the wrapper calls handleClose; visibility now toggles via opacity classes (opacity-100 / opacity-0 hidden); width always set to EXTENDED_SIDEBAR_WIDTH; appends incoming className.
Extended project sidebar (styling & props) apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx	Passes className="px-0" to wrapper; memoized handleClose with useCallback; adjusted header/container padding (px-4), button Tailwind classes (text color, hover transition), list padding (pl-9 pr-2), and empty-state layout (p-10); updated EmptyStateCompact usage with assetKey="search", assetClassName="size-20", and align="center".
Internal callback memoization apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx	Replaced direct function with useCallback for handleClose, adding toggleExtendedSidebar dependency; no public API changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review the new useEffect interaction with useAppTheme.sidebarCollapsed for timing/race conditions.
• Confirm opacity-based visibility doesn't regress animations or focus/keyboard navigation (ensure hidden state management is correct).
• Verify className propagation and new Tailwind class combinations for visual regressions across screen sizes.
• Check useCallback dependency correctness in extended-sidebar.tsx to avoid stale closures.

Poem

🐰
I hopped in code, a joyful sprint,
Added padding, classes, and a hint,
When the sidebar folds away,
I close my eyes and softly sway,
A tidy burrow — neat and bright! 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[WEB-5527] fix: extended sidebar' is concise and directly references the main change—fixing extended sidebar bugs.
Description check	✅ Passed	The description covers the main objectives and identifies the type of change as a bug fix, but lacks screenshots, test scenarios, and references sections.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/extended-sidebar

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 43739e6 and 26b990d.

📒 Files selected for processing (2)

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx (5 hunks)
• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx

🧠 Learnings (3)

📚 Learning: 2025-10-21T17:22:05.204Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx

📚 Learning: 2025-09-02T08:14:49.260Z

Learnt from: sriramveeraghanta
Repo: makeplane/plane PR: 7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx

📚 Learning: 2025-10-09T20:42:31.843Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx

⏰ 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)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx (1)

1-1: LGTM on useCallback usage for handleClose.

Importing useCallback and memoizing handleClose with [toggleExtendedSidebar] is correct here and should give ExtendedSidebarWrapper a stable close handler without risking stale state, since the callback only calls toggleExtendedSidebar(false). No further changes needed in this file from my side.

Please run your usual sidebar interaction tests (including the keyboard shortcut that collapses the main sidebar) to confirm that the extended sidebar now closes reliably and no new re-render regressions appear.

Also applies to: 110-110

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR addresses two bugs in the extended sidebar functionality: ensuring the extended sidebar closes when the main sidebar is collapsed via keyboard shortcut, and fixing scrollbar positioning through padding adjustments.

Key changes:

• Added useEffect hook to automatically close extended sidebar when main sidebar collapses
• Restructured padding system using className prop to allow fine-grained control over child component spacing
• Removed transform-based animations in favor of opacity transitions

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
extended-sidebar-wrapper.tsx	Added useEffect to sync extended sidebar state with main sidebar collapse, introduced className prop for padding customization, removed translate transforms and dynamic width in favor of simpler opacity-based visibility
extended-project-sidebar.tsx	Adjusted padding structure by overriding wrapper padding and applying specific padding to child elements (header and scrollable list) to fix scrollbar positioning, added hover transition styles to add button

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Duplicate comment "// hooks" on lines 7 and 9. Consider removing one of these duplicate comments to improve code readability.

Suggested change

// hooks

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx (1)

8-9: Remove duplicate comment.

Line 9 contains a duplicate // hooks comment that already appears on line 7.

Apply this diff to remove the duplicate:

 import { useAppTheme } from "@/hooks/store/use-app-theme";
-// hooks
 import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 78fbdde and 43739e6.

📒 Files selected for processing (2)

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx (3 hunks)
• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

🧠 Learnings (3)

📚 Learning: 2025-10-09T20:42:31.843Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx

📚 Learning: 2025-10-21T17:22:05.204Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx

📚 Learning: 2025-10-09T22:12:26.424Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx

🧬 Code graph analysis (1)

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx (2)

packages/i18n/src/store/index.ts (1)

• t (223-244)

packages/constants/src/event-tracker/core.ts (1)

• PROJECT_TRACKER_ELEMENTS (51-64)

⏰ 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: Analyze (javascript)

🔇 Additional comments (11)

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx (6)

105-105: LGTM! Padding refactor enables proper scrollbar positioning.

Removing horizontal padding from the wrapper and delegating it to individual sections allows better control of the scrollbar position, which aligns with the PR objective of fixing the scrollbar placement.

---

107-107: LGTM! Horizontal padding added to header section.

The change from pt-0 to px-4 adds appropriate horizontal spacing to the header, working in tandem with the wrapper's px-0 to achieve proper scrollbar positioning.

---

115-115: LGTM! Enhanced button hover states.

The added text colors and transition classes improve the visual feedback for the Add Project button, providing a better user experience.

---

137-137: LGTM! Simplified empty state padding.

The change from px-6 pt-10 to p-10 provides uniform padding, creating a more balanced empty state layout.

---

141-143: LGTM! Enhanced empty state configuration.

The additional props (assetKey, assetClassName, align) improve the presentation of the empty search results state with a properly sized and centered search icon.

---

147-147: LGTM! Padding adjustment fixes scrollbar position.

The added horizontal padding (pl-9 pr-2) to the projects list container directly addresses the PR objective of correcting the scrollbar position.

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx (5)

1-1: LGTM! Required import for new effect.

The useEffect import is correctly added to support the new sidebar closing behavior.

---

13-13: LGTM! Extensibility improvement.

The optional className prop enables external styling customization, which is used effectively in the consuming component to control padding.

---

24-25: LGTM! Enables sidebar closing behavior.

The sidebarCollapsed state is correctly extracted from useAppTheme to implement the bug fix where the extended sidebar should close when the main sidebar collapses.

---

41-46: LGTM! Opacity-based visibility with custom className support.

The change from translate-based to opacity-based visibility combined with the hidden class provides proper accessibility behavior. The custom className prop is correctly merged using cn(), enabling the padding customization used in the parent component.

---

50-50: No layout issues - the fixed width implementation is correct and intentional for smooth transitions.

The sidebar's fixed width is not a problem. When isExtendedSidebarOpened is false, the hidden class (Tailwind's display: none) removes the element from the document layout flow entirely, preventing any spacing issues. The fixed width combined with the opacity-based visibility (opacity-100 / opacity-0) enables smooth CSS transitions. The absolute positioning also ensures the sidebar doesn't affect the normal layout flow when visible.