Sync workspace layout mode across windows

[imbingox]

Summary

• sync workspace layout mode changes from the settings window back into the live workspace via storage events
• add provider coverage that verifies cross-window layout mode updates
• left-align the workspace layout mode labels and hints in General Settings

Testing

• pnpm test src/contexts/workspace-context.test.tsx src/components/settings/general-settings.test.tsx
• pnpm eslint src/contexts/workspace-context.tsx src/contexts/workspace-context.test.tsx src/components/settings/general-settings.tsx src/components/settings/general-settings.test.tsx

Summary by CodeRabbit

• New Features

  • Workspace layout preferences now synchronize across multiple browser tabs and windows, ensuring consistency when switching layout modes in one window.

• Style

  • Enhanced the visual presentation of the workspace layout selector with improved text alignment and updated styling for layout options.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a6bbaa81-ccd1-4e77-a8ba-bf55a75b564b

📥 Commits

Reviewing files that changed from the base of the PR and between fcade9d and e89ce3c.

📒 Files selected for processing (3)

• src/components/settings/general-settings.tsx
• src/contexts/workspace-context.test.tsx
• src/contexts/workspace-context.tsx

---

📝 Walkthrough

Walkthrough

This PR adds cross-window/tab synchronization for workspace layout mode by installing a storage event listener in WorkspaceProvider, tests the synchronization mechanism, and updates the workspace layout dropdown UI styling with restructured label/hint markup and text alignment adjustments.

Changes

Workspace Layout Mode Cross-Window Sync

Layer / File(s)	Summary
Storage event listener and sync mechanism src/contexts/workspace-context.tsx	WorkspaceProvider installs a storage event listener on mount to keep layoutMode synchronized when the workspace:layout-mode key changes in localStorage, reloading the persisted value and cleaning up on unmount.
Test infrastructure and storage sync verification src/contexts/workspace-context.test.tsx	WorkspaceProbe test component exposes layoutMode via data-testid, and a new test dispatches StorageEvents for workspace:layout-mode changes, verifying that layoutMode updates are reflected in the rendered output.
Layout dropdown UI restructuring src/components/settings/general-settings.tsx	Workspace layout dropdown SelectTrigger/SelectValue elements now include explicit text-left alignment, and each SelectItem label/hint is restructured from nested flex wrappers into separate div/span elements with updated text alignment and sizing classes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• imbingox/codeg#1: Shares workspace layout mode persistence and context integration with the same storage event synchronization flow in WorkspaceProvider.

Poem

🐰 Hops across the tabs with glee,
Layout syncs from window to window spree,
Storage events dance in the browser flow,
Dropdowns styled with care, all in a row! ✨

🚥 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 'Sync workspace layout mode across windows' directly and clearly describes the main objective of the PR - implementing synchronization of workspace layout mode changes across windows using storage events.
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 fix/workspace-layout-live-sync

---

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

[coderabbitai]

Actionable comments posted: 0