feat(web): add first-class RTL setup

[HusseinBaraja]

Summary by CodeRabbit

• New Features

  • Added improved right-to-left (RTL) language support for dashboard routes with proper directional styling and layout configuration.

• Bug Fixes

  • Fixed text and UI element alignment for RTL languages using logical CSS properties.
  • Corrected sidebar navigation and spacing behavior in RTL display mode.

[coderabbitai]

Warning

Rate limit exceeded

@HusseinBaraja has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 47 minutes and 28 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: eb3f9f96-ba8b-4a09-870f-078cb74d8adb

📥 Commits

Reviewing files that changed from the base of the PR and between d66ca42 and df250e4.

📒 Files selected for processing (1)

• apps/web/src/App.vitest.tsx

📝 Walkthrough

Walkthrough

The PR implements RTL (Right-to-Left) direction support for dashboard routes by introducing a DirectionProvider component that wraps dashboard paths with RTL configuration, and updating dashboard components to use logical CSS utilities (start/end, border-s) instead of physical directional properties.

Changes

Cohort / File(s)	Summary
Direction Provider Infrastructure apps/web/src/components/ui/direction.tsx	Adds new DirectionProvider component that wraps content with RTL configuration and re-exports useDirection hook for accessing direction state.
App Routing Configuration apps/web/src/App.tsx, apps/web/src/App.vitest.tsx	Dashboard routes now wrap within DirectionProvider with dir="rtl" and direction="rtl"; tests updated to verify provider presence on dashboard routes and its absence on other routes.
Dashboard Component Updates apps/web/src/components/dashboard/DashboardShell.tsx, apps/web/src/components/ui/sidebar.tsx	Components updated to propagate dir attribute and use logical CSS utilities (border-s, start/end, ps-*); sidebar rail border and RTL translation adjusted for directional awareness.
Dashboard Test Assertions apps/web/src/pages/DashboardPage.vitest.tsx	Test expectations updated to verify dir="rtl" attribute, logical spacing classes (start/end), grid layout, and RTL-aware border utilities on dashboard components.
Text Alignment Utility apps/web/src/pages/UploadDataPage.tsx	Metadata text alignment changed from text-right to text-end for logical RTL-aware alignment.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat(web): add dashboard placeholder #49: Introduces AppShell and dashboard routing structure that this PR builds upon with RTL direction configuration.
• Add landing, contact, and trial pages with client-side routing #29: Modifies App.tsx route rendering logic; this PR extends that with DirectionProvider wrapping for dashboard routes.

Poem

🐰 Dashboard routes now flow right-to-left,
Logical spacing classes, beautifully deft,
DirectionProvider wraps with RTL flair,
Sidebars and borders now perfectly pair! ✨

🚥 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 objective of the changeset: establishing first-class RTL (Right-to-Left) support across the web application, which is reflected in all modified files that add directional awareness and RTL-specific styling.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/first-class-rtl

---

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

_{Review rate limit: 0/1 reviews remaining, refill in 47 minutes and 28 seconds.}

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@apps/web/src/App.vitest.tsx`:
- Around line 13-17: The test mock for DirectionProvider only verifies the
wrapper renders; update the mock of './components/ui/direction'
(DirectionProvider) to capture and render the incoming props as data attributes
(e.g., data-dir and data-direction) so tests can assert the actual RTL props,
then add assertions in the existing tests to expect data-dir="rtl" and
data-direction="rtl" when rendering the App for both "/dashboard/upload" and the
root "/dashboard" route; also apply the same change to the second mock block
referenced around lines 47-68 so both test cases validate the direction props
instead of only wrapper presence.

In `@apps/web/src/components/ui/sidebar.tsx`:
- Around line 328-333: The RTL rail currently applies two conflicting border
utilities (group-data-[side=right]:border-l and
group-data-[side=right]:border-s) in the className passed to cn for the rail
element, causing a double/thicker border in RTL; remove the redundant
group-data-[side=right]:border-l so only the logical edge rule
(group-data-[side=right]:border-s) remains in the className string used by the
sidebar rail component.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 0a2e0498-d8d4-40df-8e37-1de6d4419d1e

📥 Commits

Reviewing files that changed from the base of the PR and between 8ea1a9d and d66ca42.

📒 Files selected for processing (7)

• apps/web/src/App.tsx
• apps/web/src/App.vitest.tsx
• apps/web/src/components/dashboard/DashboardShell.tsx
• apps/web/src/components/ui/direction.tsx
• apps/web/src/components/ui/sidebar.tsx
• apps/web/src/pages/DashboardPage.vitest.tsx
• apps/web/src/pages/UploadDataPage.tsx

📜 Review details

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use the @cs/* path aliases from tsconfig.base.json for cross-package imports

Files:

• apps/web/src/pages/UploadDataPage.tsx
• apps/web/src/App.tsx
• apps/web/src/App.vitest.tsx
• apps/web/src/components/ui/direction.tsx
• apps/web/src/components/ui/sidebar.tsx
• apps/web/src/components/dashboard/DashboardShell.tsx
• apps/web/src/pages/DashboardPage.vitest.tsx

🧠 Learnings (1)

📚 Learning: 2026-04-29T09:08:43.271Z

Learnt from: CR
Repo: HusseinBaraja/CS PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-29T09:08:43.271Z
Learning: Keep tests focused on the behavior changed

Applied to files:

• apps/web/src/App.vitest.tsx

🔇 Additional comments (5)

apps/web/src/pages/UploadDataPage.tsx (1)

74-74: Good RTL-safe alignment update.

Line 74 correctly uses text-end, which is direction-aware and matches the PR’s RTL objective.

apps/web/src/components/ui/direction.tsx (1)

4-20: LGTM — this wrapper centralizes the Radix direction context cleanly.

apps/web/src/App.tsx (1)

40-53: LGTM — dashboard routes now get the RTL direction provider without affecting marketing routes.

apps/web/src/components/dashboard/DashboardShell.tsx (1)

60-146: RTL layout updates are internally consistent.

The logical start/end spacing, text-start, and end-2 badge placement all match the direction-aware sidebar changes.

apps/web/src/pages/DashboardPage.vitest.tsx (1)

62-226: These RTL assertions line up with the updated shell/sidebar behavior.

The logical start/end and ps-* checks, plus the dir="rtl" assertion on the sidebar container, cover the intended direction-aware layout changes well.