chore: Fix workspace state in UI

[jsingleton-dev]

The workspace selector in the top left of the UI is now properly switching after changing the workspace. The resources are switching properly but the UI still shows the stale state. Same when you go to edit the workspace. This fix makes the the selector use the same context the rest of the layout does so it's consistent.

Before

Screen.Recording.2026-04-27.at.4.29.31.PM.mov

After

Screen.Recording.2026-04-27.at.4.30.01.PM.mov

Summary by CodeRabbit

• Refactor
  • Improved internal state management for workspace selection by streamlining component architecture and reducing unnecessary prop passing.

[coderabbitai]

📝 Walkthrough

Walkthrough

WorkspaceSelector now retrieves the current workspace via useWorkspace() hook instead of accepting an activeWorkspaceId prop, and its parent component WorkspaceLayout was updated accordingly to remove this prop when rendering the selector.

Changes

Cohort / File(s)	Summary
Workspace Selection Refactoring apps/web/app/routes/ws/_components/WorkspaceSelector.tsx, apps/web/app/routes/ws/_layout.tsx	Removed activeWorkspaceId prop from WorkspaceSelector and its parent caller. Component now uses useWorkspace() hook internally to obtain workspace data instead of relying on prop-based state injection.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A workspace once passed through props came,
Now hooks do the work, much the same!
State flows cleaner, selectors are light,
The rabbit approves—refactoring done right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing workspace state synchronization in the UI by making WorkspaceSelector consume the same context as the rest of the layout.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch jsingleton/fix-workspace-selector

---

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]

🧹 Nitpick comments (1)

apps/web/app/routes/ws/_components/WorkspaceSelector.tsx (1)

20-23: Use an interface for WorkspaceSelector props instead of an inline object type.

This is an exported component, so extracting props into a named interface improves API clarity and aligns with repo TS standards.

Proposed refactor

-export const WorkspaceSelector: React.FC<{
-  viewer: { email: string };
-  workspaces: Array<{ id: string; slug: string; name: string }>;
-}> = ({ viewer, workspaces }) => {
+interface WorkspaceSelectorProps {
+  viewer: { email: string };
+  workspaces: Array<{ id: string; slug: string; name: string }>;
+}
+
+export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({
+  viewer,
+  workspaces,
+}) => {

As per coding guidelines: **/*.{ts,tsx}: "Use explicit types in TypeScript code" and "Prefer interfaces for public APIs in TypeScript".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/app/routes/ws/_components/WorkspaceSelector.tsx` around lines 20 -
23, Replace the inline object type on the exported WorkspaceSelector component
with a named interface: create an interface WorkspaceSelectorProps describing
viewer: { email: string } and workspaces: Array<{ id: string; slug: string;
name: string }>, then update the component signature to
React.FC<WorkspaceSelectorProps> and use that interface for the destructured
props in the function parameter; ensure the interface is exported if the
component is public so the props shape is explicit and follows the repo
TypeScript conventions.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/web/app/routes/ws/_components/WorkspaceSelector.tsx`:
- Around line 20-23: Replace the inline object type on the exported
WorkspaceSelector component with a named interface: create an interface
WorkspaceSelectorProps describing viewer: { email: string } and workspaces:
Array<{ id: string; slug: string; name: string }>, then update the component
signature to React.FC<WorkspaceSelectorProps> and use that interface for the
destructured props in the function parameter; ensure the interface is exported
if the component is public so the props shape is explicit and follows the repo
TypeScript conventions.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5dddb776-ca8a-4198-9891-94a50ef4d445

📥 Commits

Reviewing files that changed from the base of the PR and between 451e4f6 and 7fae6fd.

📒 Files selected for processing (2)

• apps/web/app/routes/ws/_components/WorkspaceSelector.tsx
• apps/web/app/routes/ws/_layout.tsx