[WEB-5542] chore: scrollIntoView implementation for sidebar active project

[anmolsinghbhatia]

Description

This PR includes the implementation of scrollIntoView for the active project in the sidebar.

Type of Change

• Improvement

Summary by CodeRabbit

• New Features
  • Improved project navigation in the sidebar: when a project is opened via URL the project list now auto-expands and, after a short delay, smoothly scrolls the active project into the center of the view for easier discovery.

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

[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

Adds smooth scrolling for the active project in the workspace sidebar: when the URL project ID matches the item, the project list opens and the active item is scrolled into view smoothly and centered after a 200ms delay.

Changes

Cohort / File(s)	Summary
Sidebar scroll enhancement apps/web/core/components/workspace/sidebar/projects-list-item.tsx	Imported scrollIntoView from smooth-scroll-into-view-if-needed. Updated an effect to open the project list and, when the URL project ID matches the item, schedule a smooth, centered scrollIntoView with a 200ms timeout; added cleanup to clear the timeout on unmount/changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single-file change focused on a UI side-effect with a small timing addition.
• Review attention: the 200ms delay choice, correct cleanup of the timeout, and cross-browser scroll behavior.

Poem

🐰 I hopped a little, tail a-twirl,

Centered the project, gave it a whirl—
A gentle scroll, two hundred ticks,
Into view, neat as carrot sticks. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description provides a basic overview but lacks key details such as test scenarios, screenshots, and thorough explanation of the implementation.	Expand the description to include test scenarios, any visual impact, and more detailed explanation of the scrollIntoView behavior and why the 200ms delay was chosen.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: implementing scrollIntoView for the active project in the sidebar, which matches the changeset summary.
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 chore-sidebar-active-project-scrollIntoView

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/web/core/components/workspace/sidebar/projects-list-item.tsx (1)

228-244: Clean up setTimeout to prevent stale execution on unmount.

The setTimeout is not cleared if the component unmounts or the effect re-runs within the 100ms window. While the inner projectRef.current check prevents a crash, it's still good practice to clean up timers.

Apply this diff to add proper cleanup:

 useEffect(() => {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
   if (URLProjectId === project?.id) {
     setIsProjectListOpen(true);
     // Scroll to active project
     if (projectRef.current) {
-      setTimeout(async () => {
+      timeoutId = setTimeout(() => {
         if (projectRef.current) {
-          await scrollIntoView(projectRef.current, {
+          scrollIntoView(projectRef.current, {
             behavior: "smooth",
             block: "center",
             scrollMode: "if-needed",
           });
         }
       }, 100);
     }
   }
+  return () => {
+    if (timeoutId) clearTimeout(timeoutId);
+  };
 }, [URLProjectId, project?.id, setIsProjectListOpen]);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8db95d9 and c0d7f53.

📒 Files selected for processing (1)

• apps/web/core/components/workspace/sidebar/projects-list-item.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/core/components/workspace/sidebar/projects-list-item.tsx

🧠 Learnings (1)

📚 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/core/components/workspace/sidebar/projects-list-item.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). (3)

• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Agent
• GitHub Check: Build and lint web apps

🔇 Additional comments (1)

apps/web/core/components/workspace/sidebar/projects-list-item.tsx (1)

10-10: LGTM!

The import is correct for the smooth-scroll-into-view-if-needed library.

[Copilot]

Pull request overview

This PR implements automatic scrolling to the active project in the sidebar when a project is selected. The implementation uses the smooth-scroll-into-view-if-needed library to smoothly scroll the active project into view with a center alignment when it matches the URL project ID.

Key changes:

• Added smooth-scroll-into-view-if-needed import for conditional smooth scrolling
• Wrapped the scroll logic in a 100ms delayed timeout to allow DOM updates to complete before scrolling
• Applied scroll with "if-needed" mode to avoid unnecessary scrolling when the element is already visible

---

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

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5542] ScrollIntoView implementation for sidebar active project

This comment was auto-generated by Plane

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/web/core/components/workspace/sidebar/projects-list-item.tsx (1)

228-252: Active-project scroll effect looks correct; optional constant for delay

The effect cleanly:

• Opens the project list when the URL project matches.
• Schedules a scroll with a 200 ms delay and re-checks the ref before scrolling.
• Clears the timeout on cleanup to avoid leaks.

Logic and dependencies look good and address earlier feedback (no unnecessary async/await, proper cleanup). If this delay value is reused elsewhere, consider extracting 200 into a shared constant to avoid magic numbers, but that’s not required.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c0d7f53 and 3c3b2e3.

📒 Files selected for processing (1)

• apps/web/core/components/workspace/sidebar/projects-list-item.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/core/components/workspace/sidebar/projects-list-item.tsx

🧠 Learnings (1)

📚 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/core/components/workspace/sidebar/projects-list-item.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/core/components/workspace/sidebar/projects-list-item.tsx (1)

10-10: New scroll helper import is appropriate

Importing scrollIntoView here is straightforward and its usage is correctly confined to a client-side effect; no changes needed.