Draft: feat(i18n): add Urdu locale support and RTL handling

Overview

This MR adds initial Urdu (ur) locale support along with RTL (Right-to-Left) direction handling across the application.

The primary goal of this change is to make the application locale-ready for Urdu translations without causing layout issues or broken UI flows.

Additionally, this MR aligns the Telugu (te) and Hindi (hi) translation structures with English (en) to ensure complete key coverage and zero missing translation keys.

This change is required to complete Phase 1 of i18n readiness and to unblock upcoming Urdu translation work.

---

What does this MR do and why?

The application previously supported only LTR languages and did not include Urdu locale registration.

This created two key issues:

• Urdu could not be selected as a supported language
• Layout would break for RTL languages without proper dir handling

This MR solves that by:

• registering Urdu in i18n resources
• adding Urdu to the supported language list
• dynamically updating document.documentElement.lang
• dynamically updating document.documentElement.dir
• ensuring translation JSON structures stay consistent across locales

Motivation

The motivation behind this change is to establish a scalable multilingual architecture before actual Urdu translations are introduced.

Without this, future translation work would be blocked by missing locale setup and RTL layout issues.

Approach Taken

The chosen approach was to handle RTL at the document level instead of individual component level.

This was done because:

• it is cleaner
• globally affects all UI
• avoids repetitive per-component styling
• improves maintainability

Trade-offs

Current Urdu strings are still English placeholders.

This is an intentional trade-off to enable:

• locale integration first
• translation content later

This keeps the MR scoped and easier to review.

---

Changes Made

Files Modified

• src/i18n.ts
  • Added Urdu locale resources
  • Added Urdu to supported language list
• src/App.tsx
  • Added dynamic lang + dir updates on language switch
  • Enables automatic RTL / LTR switching
• src/locales/te/translations.json
  • Added missing keys
  • Synced structure with English locale
• src/locales/hi/translations.json
  • Added missing keys
  • Synced structure with English locale

Files Added

• src/locales/ur/translations.json
  • Full translation key structure
  • English placeholder values

API / Config Changes

• No backend API changes
• No environment variable changes

---

Technical Details

Type of Change

• 🐛 Bug fix
  • ✨ New feature
  • 💥 Breaking change
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

---

Architecture Decisions

RTL handling is implemented at the document root level:

document.documentElement.dir = language === "ur" ? "rtl" : "ltr"; document.documentElement.lang = language;

This ensures all components inherit layout direction automatically.

This avoids introducing component-level RTL complexity.

---

State Management / Data Flow

Language updates flow through useTranslation().

Whenever language changes:

1. i18n updates active locale
2. dir and lang attributes are updated
3. UI automatically re-renders in correct direction

No global store changes were required.

---

Related Issues / References

Closes #281

---

How to Set Up and Validate Locally

git checkout <branch-name> bun install bun dev

Validation Steps

1. Open application
2. Switch language to te
3. Switch language to hi
4. Switch language to ur
5. Verify:
   • no missing translation keys
   • no fallback text
   • Urdu switches to RTL
   • layout aligns correctly

Expected:

• te, hi, ur all have complete key structure
• Urdu renders in RTL layout

---

Testing Done

• Manual testing completed
  • Unit tests added / updated

Test Cases Covered

Scenario	Expected Result	Status
Switch to Telugu	All strings visible	✅
Switch to Hindi	All strings visible	✅
Switch to Urdu	RTL layout applied	✅
Page navigation in Urdu	Layout remains RTL	✅

---

Known Limitations / Technical Debt

• Urdu translations are currently English placeholders
• Native Urdu translation content will be added in follow-up work

---

Additional Notes

This MR is primarily focused on locale readiness + RTL infrastructure.

Translation content population is intentionally kept out of scope to reduce review complexity.