- Add all missing translation keys to ChoreView component
- Replace hardcoded strings with i18n translation calls
- Complete Spanish (es) translations for ChoreView and Settings
- Complete Arabic (ar) translations for ChoreView and Settings
- Update ProfileSettings component with full translation support
- Add translations for notifications, confirmations, and UI labels
The formatDate function was being called with a boolean (true) as the format
parameter, which caused moment.js to throw 'format.match is not a function' error.
Changed to use formatDateTime() which properly formats both date and time.
Navigation:
- Fix drawer to slide from right in RTL languages (Arabic, Hebrew)
- Add anchor prop based on isRTL flag
- Drawer now properly positioned for RTL languages
ChoreView Translations:
- Add comprehensive Arabic and Spanish translations for ChoreView
- Translate info cards (Assignment, Schedule, Statistics, Details)
- Translate notification messages (Task Completed, Undo, etc.)
- Translate action buttons and confirmation modals
- Translate timer-related modals (Reset Timer, Clear All Time Records)
Date Format Application:
- Replace hardcoded moment date formats with formatDate()
- Apply user's selected date format preference in ChoreView
- Due date chip now respects user's date format setting
- Dates display consistently according to user preference
All UI text in ChoreView now translates to Arabic and Spanish.
Navigation drawer slides from correct side for RTL languages.
- Add navigation translations (All Tasks, Archived, Things, etc.)
- Translate NavBar menu items and logout button
- Add comprehensive SettingsOverview translations
- Translate upgrade card and all settings sections
- Add ChoreView translations structure
- Improve RTL CSS support for better card alignment
- Fix flex, list, and container alignment for RTL languages
Navigation drawer now shows translated menu items in user's language.
Settings overview page fully translated.
RTL languages (Arabic, Hebrew) now have proper alignment for sidepanel cards.
- Add LocalizationSettings to RouterContext routes
- Add localization card to SettingsOverview menu
- Update LocalizationSettings to use SettingsLayout
- Add Language icon import
Now accessible at /settings/localization
- Add multi-language support with i18next and react-i18next
- Implement user-selectable date format preferences (5 formats)
- Add time format preferences (12-hour/24-hour)
- Implement RTL (right-to-left) support for Arabic, Hebrew, Persian, Urdu
- Add first day of week preference
- Create LocalizationContext for managing i18n settings
- Add LocalizationSettings component to Settings page
- Include sample translations: English, Spanish, Arabic
- Configure 10 languages: en, es, fr, de, ar, he, zh, ja, pt, ru
- Add translation management documentation and Crowdin config
- Create date formatting utilities that respect user preferences
- Add RTL CSS styles for proper layout mirroring
- Update Settings and ThemeToggle components to use translations
- Add comprehensive documentation (implementation guide, quick reference, translation guide)
All user preferences are persisted to localStorage and apply throughout the app.
tailwind.config.js — Added corePlugins: { preflight: false } to disable Tailwind's Preflight reset. Preflight forces svg { display: block } which breaks MUI Joy's inline icon layout inside <Select>, <Autocomplete>, etc., making the icon area unclickable. Since MUI Joy's <CssBaseline /> already provides a CSS reset, Preflight was redundant.
index.css — Removed the global button, a, [role="button"] { transform: translateZ(0); backface-visibility: hidden; } rule. This was creating new stacking contexts on every button element, which interfered with MUI Joy's internal pseudo-element overlays used for click-target expansion.
