[WEB-5603] feat: enhance workspace settings layout and members page

[b-saikrishnakanth]

Description

enhance workspace settings layout and members page with new components

Type of Change

• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring

Screenshots and Media (if applicable)

Test Scenarios

References

Summary by CodeRabbit

• New Features

  • Added a Members Activity button to the workspace members settings header.
  • Added a workspace settings right sidebar, shown for authorized users.

• Bug Fixes

  • Improved invitation error handling to surface clearer error messages in toasts.

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

[coderabbitai]

Walkthrough

Wraps two workspace settings pages with MobX observer, adds two new placeholder UI components (MembersActivityButton and WorkspaceSettingsRightSidebar) with barrel exports, and updates prop typing to use Route.ComponentProps and derive workspaceSlug from params.

Changes

Cohort / File(s)	Summary
Layout & Members Page apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx, apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx	Converted functions to observer-wrapped named constant exports; typed props as Route.ComponentProps and derive workspaceSlug from params; replaced default exports with named exports; added WorkspaceSettingsRightSidebar render in layout and MembersActivityButton in members header; improved invitation error handling (catch unknown, extract message, rethrow); minor import reorganization.
Members UI barrel & component apps/web/ce/components/workspace/members/index.ts, apps/web/ce/components/workspace/members/members-activity-button.tsx	Added barrel export re-exporting invite-modal and members-activity-button; added new MembersActivityButton component (observer-wrapped) accepting workspaceSlug and currently rendering an empty fragment.
Right Sidebar barrel & component apps/web/ce/components/workspace/right-sidebar/index.ts, apps/web/ce/components/workspace/right-sidebar/root.tsx	Added barrel export re-exporting root; added new WorkspaceSettingsRightSidebar component (observer-wrapped) with prop workspaceSlug and currently rendering an empty fragment.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify observer wrapping and exports (named vs default) are consistent and intentional.
• Confirm Route.ComponentProps usage and that workspaceSlug is correctly passed through params.
• Inspect the invitation catch/error extraction and rethrow behavior for correctness.
• Check barrel exports for accidental circular imports.
• Note placeholder components (empty fragments) — confirm intended TODOs.

Poem

🐰 I nudge the sidebar, quiet and bright,
Wrapped in observers, ready to bite,
Barrels stack exports in tidy rows,
Buttons and fragments where petal wind blows,
A tiny hop for code, a joyful byte.

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description includes required sections but is incomplete: Test Scenarios and References sections are empty, and the description lacks technical details about the actual implementation.	Fill in Test Scenarios with specific tests performed, provide any related issue references, and add more detail about the implementation approach and impact.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main changes: enhancing workspace settings layout and members page with new components and refactoring.

✨ 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 feat-workspace-settings-sidebar-details

---

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: 2

🧹 Nitpick comments (3)

apps/web/ce/components/workspace/members/members-activity-button.tsx (1)

1-6: Clarify placeholder intent and avoid eslint-disable for unused prop

This is clearly a scaffolded component, but the inline eslint-disable is a small smell. You can keep behavior identical while avoiding the rule suppression and making the placeholder intent explicit, e.g.:

-import { observer } from "mobx-react";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const MembersActivityButton = observer(function MembersActivityButton(props: { workspaceSlug: string }) {
-  return <></>;
-});
+import { observer } from "mobx-react";
+
+type MembersActivityButtonProps = { workspaceSlug: string };
+
+export const MembersActivityButton = observer(function MembersActivityButton({
+  workspaceSlug,
+}: MembersActivityButtonProps) {
+  // Placeholder: workspaceSlug will be used when activity UI is implemented.
+  void workspaceSlug;
+  return null;
+});

This keeps the API stable while avoiding disabled lint and making the placeholder status clear.

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (2)

75-80: Tighten unknown error handling to capture more context safely

Good move switching the catch to error: unknown and rethrowing the original error. You can make this a bit more robust and informative without changing behavior:

• Prefer error.error ?? error.message when error is an Error & { error?: string }.
• Normalize non-Error throwables before passing to captureError.

For example:

-    } catch (error: unknown) {
-      let message = undefined;
-      if (error instanceof Error) {
-        const err = error as Error & { error?: string };
-        message = err.error;
-      }
+    } catch (error: unknown) {
+      let message: string | undefined;
+      let errorToCapture: Error;
+
+      if (error instanceof Error) {
+        const err = error as Error & { error?: string };
+        message = err.error ?? err.message;
+        errorToCapture = err;
+      } else {
+        errorToCapture = new Error(String(error));
+      }
@@
-        payload: {
-          emails: data.emails.map((email) => email.email),
-        },
-        error: error as Error,
+        payload: {
+          emails: data.emails.map((email) => email.email),
+        },
+        error: errorToCapture,
       });
@@
-        message: `${message ?? t("something_went_wrong_please_try_again")}`,
+        message: message ?? t("something_went_wrong_please_try_again"),
       });
 
       throw error;

This keeps your external behavior the same while ensuring captureError always receives a proper Error instance and that you fall back to the standard Error.message when available.

Also applies to: 86-87, 92-93, 95-95

---

146-147: Reconfirm need for autoFocus override from an accessibility perspective

The explicit autoFocus plus // eslint-disable-next-line jsx-a11y/no-autofocus makes the search field grab focus on load:

// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus

If this is intentional (e.g., this page is primarily a search console), that’s fine, but it can be disruptive for keyboard and screen-reader users. If it’s not strictly required, consider removing autoFocus and the rule suppression so focus follows the usual document order.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f0bc2bd and 8bf72a1.

📒 Files selected for processing (6)

• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (2 hunks)
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (5 hunks)
• apps/web/ce/components/workspace/members/index.ts (1 hunks)
• apps/web/ce/components/workspace/members/members-activity-button.tsx (1 hunks)
• apps/web/ce/components/workspace/sidebar-details/index.ts (1 hunks)
• apps/web/ce/components/workspace/sidebar-details/root.tsx (1 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/ce/components/workspace/sidebar-details/root.tsx
• apps/web/ce/components/workspace/sidebar-details/index.ts
• apps/web/ce/components/workspace/members/index.ts
• apps/web/ce/components/workspace/members/members-activity-button.tsx
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.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/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx

🧬 Code graph analysis (2)

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (1)

apps/web/ce/components/workspace/sidebar-details/root.tsx (1)

• WorkspaceSettingsSidebarDetails (3-5)

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (5)

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

• MEMBER_TRACKER_EVENTS (238-248)

packages/propel/src/toast/toast.tsx (1)

• setToast (202-222)

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

• t (223-244)

apps/web/ce/components/workspace/members/members-activity-button.tsx (1)

• MembersActivityButton (4-6)

apps/space/core/store/publish/publish.store.ts (1)

• workspaceSlug (93-95)

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

apps/web/ce/components/workspace/sidebar-details/index.ts (1)

1-1: Barrel re-export looks good

The index file cleanly forwards the ./root exports and aligns with common barrel patterns; no changes needed.

apps/web/ce/components/workspace/members/index.ts (1)

1-2: Members barrel index is consistent and clear

Re-exporting invite-modal and members-activity-button from a single members barrel simplifies imports and matches the structure elsewhere.

apps/web/ce/components/workspace/sidebar-details/root.tsx (1)

1-5: Observer-wrapped sidebar details placeholder is safe

The WorkspaceSettingsSidebarDetails component is a no-op right now but correctly wired and safe to render. Once you add MobX-backed content, the existing observer wrapper will be ready.

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (1)

11-12: Sidebar details wiring is non-invasive

Importing and rendering <WorkspaceSettingsSidebarDetails /> as a sibling to the main content is safe; with the current implementation returning an empty fragment, this introduces no behavioral change yet but sets up the slot for future details content.

Also applies to: 47-47

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (1)

31-31: MembersActivityButton wiring is correct but currently a no-op

Importing MembersActivityButton from the members barrel and passing workspaceSlug is consistent with the new CE component:

import { SendWorkspaceInvitationModal, MembersActivityButton } from "@/plane-web/components/workspace/members";
// ...
<MembersActivityButton workspaceSlug={workspaceSlug} />

Given the current implementation renders an empty fragment, this doesn’t change the UI yet but cleanly reserves a slot in the toolbar for future activity UI.

Also applies to: 156-156

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's check the actual file content
cat -n "apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx"

Repository: makeplane/plane

Length of output: 2558

---

🏁 Script executed:

# Check other layout files in the app directory to see the pattern
fd "layout.tsx" apps/web/app --type f | head -20

Repository: makeplane/plane

Length of output: 1868

---

🏁 Script executed:

# Sample a few other layout files to see if they have default exports
fd "layout.tsx" apps/web/app --type f -x head -30 {} \; 2>/dev/null | head -150

Repository: makeplane/plane

Length of output: 4791

---

🏁 Script executed:

# Check the routing configuration and structure
find apps/web -name "*.tsx" -o -name "*.ts" | xargs grep -l "createBrowserRouter\|RouterProvider\|route.*element" | head -5

Repository: makeplane/plane

Length of output: 136

---

🏁 Script executed:

# Look for the main router configuration
find apps/web -type f \( -name "*.tsx" -o -name "*.ts" \) | xargs grep -l "RouterProvider\|createBrowserRouter" | head -10

Repository: makeplane/plane

Length of output: 41

---

🏁 Script executed:

# Check the layout.tsx files to see the actual import patterns - are they using react-router or next/navigation?
fd "layout.tsx" apps/web/app --type f -x grep -l "react-router\|next/navigation" {} \; | head -15

Repository: makeplane/plane

Length of output: 824

---

🏁 Script executed:

# Check a few layout files to see their imports
fd "layout.tsx" apps/web/app --type f | xargs grep -h "^import.*from" | sort | uniq -c | sort -rn | head -20

Repository: makeplane/plane

Length of output: 1381

---

🏁 Script executed:

# Find where WorkspaceSettingLayout is imported
rg "WorkspaceSettingLayout" --type tsx --type ts

Repository: makeplane/plane

Length of output: 86

---

🏁 Script executed:

# Check the main routing configuration to understand the routing system
find apps/web -type f \( -name "*.tsx" -o -name "*.ts" \) | xargs grep -l "createBrowserRouter\|element:" | head -10

Repository: makeplane/plane

Length of output: 673

---

🏁 Script executed:

# Check if there's a route configuration that uses this layout
fd "route\|router" apps/web -type f | head -20

Repository: makeplane/plane

Length of output: 229

---

🏁 Script executed:

# Find where WorkspaceSettingLayout is imported - simpler approach
rg "WorkspaceSettingLayout" --glob "*.ts" --glob "*.tsx"

Repository: makeplane/plane

Length of output: 219

---

🏁 Script executed:

# Check the main app entry points and routing configuration
find apps/web/app -name "layout.tsx" -o -name "page.tsx" | head -5 | xargs head -20

Repository: makeplane/plane

Length of output: 3309

---

🏁 Script executed:

# Let's also check if this is Next.js App Router by looking at the root layout
cat apps/web/app/layout.tsx | head -40

Repository: makeplane/plane

Length of output: 1571

---

🏁 Script executed:

# Check if there are any other layout.tsx files that use named exports like WorkspaceSettingLayout
rg "export const.*Layout.*=" apps/web/app --type ts --type tsx -A 2 | grep -E "layout\.tsx|export const"

Repository: makeplane/plane

Length of output: 86

---

🏁 Script executed:

# Check all layout.tsx files to see the export pattern consistency
find apps/web/app -name "layout.tsx" -exec head -20 {} + | grep -E "^export" | sort | uniq -c | sort -rn

Repository: makeplane/plane

Length of output: 2885

---

🏁 Script executed:

# Verify the exact line where WorkspaceSettingLayout is exported
sed -n '18,20p' "apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx"

Repository: makeplane/plane

Length of output: 245

---

Add default export to match codebase layout pattern

WorkspaceSettingLayout is the only layout file in the app directory using a named export without a default export. All other layout.tsx files (35+) consistently follow the export default pattern. Add a default export to align with the established convention:

 export const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout() {
   // ...
 });
+
+export default WorkspaceSettingLayout;

This applies to both occurrences (lines 18 and 53 as mentioned).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	export const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout() {
	export const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout() {
	// ... function body ...
	});
	export default WorkspaceSettingLayout;

🤖 Prompt for AI Agents

In apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
around lines 18 and 53, the component WorkspaceSettingLayout is exported only as
a named export; add a default export to match the project's layout pattern. Keep
the existing named export and append a default export statement exporting
WorkspaceSettingLayout (e.g., export default WorkspaceSettingLayout) at the end
of the file, ensuring both occurrences referenced (near line 18 and the second
export near line 53) are consolidated so the file provides the named export plus
a default export.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (2)

73-94: Unsafe cast on error as Error outside type guard.

The type narrowing on lines 75-78 correctly checks error instanceof Error, but line 84 casts error as Error unconditionally outside that guard. If the caught value isn't an Error instance, this cast is misleading.

     captureError({
       eventName: MEMBER_TRACKER_EVENTS.invite,
       payload: {
         emails: data.emails.map((email) => email.email),
       },
-      error: error as Error,
+      error: error instanceof Error ? error : new Error(String(error)),
     });

Alternatively, move the captureError call inside the type guard or ensure the tracking function handles unknown.

---

90-90: Unnecessary template literal.

The template literal wraps a single expression. Consider simplifying:

-        message: `${message ?? t("something_went_wrong_please_try_again")}`,
+        message: message ?? t("something_went_wrong_please_try_again"),

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8bf72a1 and b396471.

📒 Files selected for processing (2)

• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (2 hunks)
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (5 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]/(settings)/settings/(workspace)/layout.tsx
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx

🧠 Learnings (3)

📚 Learning: 2025-10-01T15:30:17.605Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.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]/(settings)/settings/(workspace)/layout.tsx
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx

📚 Learning: 2025-11-25T10:18:05.172Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: .github/instructions/typescript.instructions.md:0-0
Timestamp: 2025-11-25T10:18:05.172Z
Learning: Applies to **/*.{ts,tsx,mts,cts} : Avoid `import ... assert` syntax; use `with` instead for import attributes

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx

🧬 Code graph analysis (2)

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (1)

apps/web/ce/components/workspace/sidebar-details/root.tsx (1)

• WorkspaceSettingsSidebarDetails (3-5)

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (3)

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

• MEMBER_TRACKER_EVENTS (238-248)

packages/propel/src/toast/toast.tsx (1)

• setToast (202-222)

apps/space/core/store/publish/publish.store.ts (1)

• workspaceSlug (93-95)

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

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (1)

18-55: LGTM! Default export issue resolved.

The component is now correctly wrapped with observer and properly exports as default. The WorkspaceSettingsSidebarDetails integration follows the existing layout structure.

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx (3)

34-34: LGTM! Default export issue resolved.

The component is now correctly wrapped with observer and properly exports as default, aligning with the Next.js App Router requirements.

Also applies to: 172-174

---

154-154: LGTM!

The MembersActivityButton is correctly integrated with the required workspaceSlug prop, matching the component signature.

---

144-146: Autofocus disable is acceptable for this context.

The eslint-disable for jsx-a11y/no-autofocus is appropriately scoped. Autofocus on the search input in a settings page is a reasonable UX choice since users navigating here likely intend to search members.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/web/ce/components/workspace/right-sidebar/root.tsx (1)

3-10: Right sidebar stub is fine, consider TODO or minimal structure

The observed component and prop typing line up with its usage from the layout. Since it currently returns an empty fragment and only keeps workspaceSlug for future use, you may want to add a brief TODO or minimal structural markup when you start implementing real sidebar content, but it’s safe as-is.

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (1)

18-23: Good move to use typed route params; consider simplifying workspaceSlug handling

Switching WorkspaceSettingLayout to take { params }: Route.ComponentProps and deriving workspaceSlug from params is a cleaner and more robust pattern than parsing it from the pathname. The authorization check via WORKSPACE_SETTINGS_ACCESS[accessKey]?.includes(userWorkspaceRole as EUserWorkspaceRoles) also aligns with the existing access map.

One small nit: if params.workspaceSlug is already typed as a string in Route.ComponentProps, the workspaceSlug.toString() call when passing it to getWorkspaceRoleByWorkspaceSlug is redundant and can be dropped in favor of just workspaceSlug. If workspaceSlug can be optional, it may be better to narrow it explicitly before calling rather than coercing with .toString().

Also applies to: 28-33

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b396471 and 65ce978.

📒 Files selected for processing (3)

• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (2 hunks)
• apps/web/ce/components/workspace/right-sidebar/index.ts (1 hunks)
• apps/web/ce/components/workspace/right-sidebar/root.tsx (1 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/ce/components/workspace/right-sidebar/root.tsx
• apps/web/ce/components/workspace/right-sidebar/index.ts
• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx

🧠 Learnings (4)

📚 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/ce/components/workspace/right-sidebar/root.tsx

📚 Learning: 2025-10-01T15:30:17.605Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.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]/(settings)/settings/(workspace)/layout.tsx

📚 Learning: 2025-11-25T10:18:05.172Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: .github/instructions/typescript.instructions.md:0-0
Timestamp: 2025-11-25T10:18:05.172Z
Learning: Applies to **/*.{ts,tsx,mts,cts} : Avoid `import ... assert` syntax; use `with` instead for import attributes

Applied to files:

• apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx

🧬 Code graph analysis (1)

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (2)

apps/web/ce/components/workspace/right-sidebar/root.tsx (1)

• WorkspaceSettingsRightSidebar (5-10)

apps/space/core/store/publish/publish.store.ts (1)

• workspaceSlug (93-95)

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

apps/web/ce/components/workspace/right-sidebar/index.ts (1)

1-1: Barrel re-export looks correct

Re-exporting from ./root keeps the public surface clean and matches the usual barrel pattern; no issues here.

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx (2)

51-51: Right sidebar wiring with workspaceSlug looks consistent

Passing workspaceSlug from the route params into WorkspaceSettingsRightSidebar ensures the sidebar uses the same workspace context as the main content and authorization logic. This keeps the CE right-sidebar surface aligned with the layout’s notion of the active workspace.

---

1-3: This layout is correctly configured for the project's architecture

This codebase uses a custom compatibility layer (apps/web/app/compat/next/navigation.ts) that remaps "next/navigation" imports to react-router equivalents. The usePathname hook here is a wrapper around react-router's useLocation, not the Next.js hook. Combined with the observer() wrapper from MobX, the component already functions as a client component. No 'use client' directive is required in this setup.

Likely an incorrect or invalid review comment.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5603] Refactor workspace members page

This comment was auto-generated by Plane