Feat persist user language preference

[BrayanMQ]

📝 Description

This PR implements persistent language preference storage in the database, allowing users' language selections to be saved and automatically restored across sessions and devices. Previously, language selection was only temporary and stored in localStorage, which meant users had to re-select their preferred language after logging in from different devices.

🔗 Related Issue

Closes #[issue-number] - Persist User Language Preference

🏷️ Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactoring (no functional changes)
• Performance improvement
• Dependency update

🔄 Changes Made

Database Layer

• Migration: Added language column to user_settings table
  • Default value: 'en'
  • Check constraint for valid language codes: en, es, pt, fr, de
  • Backfilled existing records with default language

Backend/Hook Layer

• useUserSettings.ts: Enhanced user settings hook
  • Updated UserSettings type to include language field
  • Added language to default settings creation
  • Created updateLanguage mutation for database persistence
  • Added language sync effect with user authentication check
  • Exported updateLanguage, isUpdatingLanguage, and updateLanguageError for UI integration

Frontend Layer

• LanguageSync.tsx: New component for automatic language restoration

  • Syncs language from database to i18next on app load
  • Runs at app level to ensure language is restored immediately on login
  • Includes console logging for debugging

• Providers.tsx: Integrated LanguageSync component

  • Added to provider tree alongside ThemeSync
  • Ensures language sync happens at the root level

• page.tsx (Settings): Updated language selection UI

  • Modified handleLanguageChange to persist language to database
  • Added optimistic UI update for immediate feedback
  • Added loading states to language selector buttons
  • Disabled buttons during language update operation

🧪 Testing

• Manual testing completed
  • ✅ Language selection persists after page refresh
  • ✅ Language selection persists across different sessions
  • ✅ Language is automatically restored on login
  • ✅ Database correctly stores selected language code
  • ✅ UI provides loading feedback during language update
• Unit tests added/updated
• Integration tests added/updated

Manual Testing Steps

1. Navigate to Settings page
2. Change language to Español
3. Verify UI updates immediately
4. Refresh the page → Language persists
5. Log out and log back in → Language is restored to Español
6. Check Supabase database → user_settings.language shows 'es'

✅ Checklist

• My code follows the project's code style guidelines
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have updated the documentation accordingly (if applicable)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published

📸 Screenshots (if applicable)

Screenshots showing language selection UI and persistence behavior would be helpful here.

📌 Additional Notes

Database Migration

After merging this PR, the database migration must be applied:

npx supabase db push

Then regenerate TypeScript types:

npm run generate:types

Language Detection Priority

The app now has the following language detection priority:

1. Database (highest) - Saved language for authenticated users
2. localStorage - Temporary language for non-authenticated users
3. Browser/System (fallback) - Automatic detection via i18next-browser-languagedetector

Future Improvements

• Add unit tests for LanguageSync component
• Add integration tests for language persistence flow
• Consider adding language preference to user onboarding flow