From a82f6b16b747cc8eec8ca2c6bc7d6e68d2cf590e Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sun, 8 Mar 2026 16:37:02 +0000 Subject: [PATCH] feat: Add translations for navigation and settings overview, improve RTL support - 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. --- public/locales/ar/common.json | 17 +++- public/locales/en/chores.json | 45 ++++++++- public/locales/en/common.json | 17 +++- public/locales/en/settings.json | 69 ++++++++++++++ public/locales/es/common.json | 17 +++- src/index.css | 26 +++++ src/views/Settings/SettingsOverview.jsx | 85 +++++++---------- src/views/components/NavBar.jsx | 122 ++++++++++-------------- 8 files changed, 275 insertions(+), 123 deletions(-) diff --git a/public/locales/ar/common.json b/public/locales/ar/common.json index 080179a..60b1e2c 100644 --- a/public/locales/ar/common.json +++ b/public/locales/ar/common.json @@ -14,5 +14,20 @@ "copied": "تم النسخ!", "settings": "الإعدادات", "yes": "نعم", - "no": "لا" + "no": "لا", + "back": "رجوع", + "backToCalendar": "العودة إلى التقويم", + "logout": "تسجيل الخروج", + "version": "النسخة", + "navigation": { + "allTasks": "جميع المهام", + "archived": "المؤرشفة", + "things": "الأشياء", + "labels": "التسميات", + "projects": "المشاريع", + "filters": "الفلاتر", + "activities": "الأنشطة", + "points": "النقاط", + "settings": "الإعدادات" + } } diff --git a/public/locales/en/chores.json b/public/locales/en/chores.json index 0f74f22..7695cee 100644 --- a/public/locales/en/chores.json +++ b/public/locales/en/chores.json @@ -5,10 +5,51 @@ "addChore": "Add Chore", "editChore": "Edit Chore", "deleteChore": "Delete Chore", - "completeChore": "Complete Chore", + "completeChore": "Complete Task", "dueDate": "Due Date", "assignedTo": "Assigned To", "priority": "Priority", "status": "Status", - "description": "Description" + "description": "Description", + "choreView": { + "assignment": "Assignment", + "assigned": "Assigned", + "last": "Last", + "schedule": "Schedule", + "due": "Due", + "statistics": "Statistics", + "completed": "Completed", + "times": "times", + "details": "Details", + "createdBy": "Created By", + "na": "N/A", + "taskCompleted": "Task Completed", + "undoSuccessful": "Undo Successful", + "undoFailed": "Undo Failed", + "resetTimer": "Reset Timer", + "clearAllTimeRecords": "Clear All Time Records", + "descriptionTitle": "Description", + "previousNote": "Previous Note", + "skipTask": "Skip Task", + "markComplete": "Mark Complete", + "edit": "Edit", + "archive": "Archive", + "unarchive": "Unarchive", + "viewHistory": "View History", + "startTimer": "Start Timer", + "pauseTimer": "Pause Timer", + "approve": "Approve", + "reject": "Reject", + "undo": "Undo", + "skip": "Skip", + "addNote": "Add a note...", + "subtasks": "Subtasks", + "noDescription": "No description available", + "timer": { + "active": "Timer Active", + "paused": "Timer Paused", + "reset": "Reset Timer", + "delete": "Delete Session" + } + } } diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 31ee53c..fa493cf 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -14,5 +14,20 @@ "copied": "Copied!", "settings": "Settings", "yes": "Yes", - "no": "No" + "no": "No", + "back": "Back", + "backToCalendar": "Back to Calendar", + "logout": "Logout", + "version": "Version", + "navigation": { + "allTasks": "All Tasks", + "archived": "Archived", + "things": "Things", + "labels": "Labels", + "projects": "Projects", + "filters": "Filters", + "activities": "Activities", + "points": "Points", + "settings": "Settings" + } } diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json index 158a55f..14d10db 100644 --- a/public/locales/en/settings.json +++ b/public/locales/en/settings.json @@ -81,5 +81,74 @@ "settingsSaved": "Settings saved successfully", "settingsSaveFailed": "Failed to save settings", "invalidWebhook": "Invalid webhook URL" + }, + "overview": { + "title": "Settings", + "subtitle": "Customize your experience and manage your account preferences", + "upgrade": { + "title": "Upgrade to Plus", + "description": "Unlock powerful features to enhance your productivity", + "button": "Upgrade Now", + "features": { + "richText": "Rich text descriptions", + "notifications": "Task notifications", + "apiIntegrations": "API integrations", + "advancedAutomation": "Advanced automation" + } + }, + "sections": { + "profile": { + "title": "Profile Settings", + "description": "Update your profile information, photo, display name, and timezone preferences." + }, + "circle": { + "title": "Circle Settings", + "description": "Manage your circle, invite members, and handle join requests." + }, + "account": { + "title": "Account Settings", + "description": "Manage your subscription, change password, and account deletion options." + }, + "subaccounts": { + "title": "Managed Accounts", + "description": "Create and manage sub accounts to log in and complete assigned tasks." + }, + "notifications": { + "title": "Notifications", + "description": "Configure push notifications, email alerts, and notification targets for tasks." + }, + "mfa": { + "title": "Multi-Factor Authentication", + "description": "Add an extra layer of security with MFA using authenticator apps." + }, + "apitokens": { + "title": "API Tokens", + "description": "Generate and manage access tokens for third-party integrations and API access." + }, + "storage": { + "title": "Storage Settings", + "description": "Backup and restore your data, manage local storage and sync preferences." + }, + "sidepanel": { + "title": "Sidepanel Customization", + "description": "Customize the layout and visibility of cards in the sidepanel interface." + }, + "theme": { + "title": "Theme Preferences", + "description": "Choose your preferred theme and configure dark/light mode settings." + }, + "localization": { + "title": "Localization", + "description": "Customize language, date format, time format, and regional preferences." + }, + "advanced": { + "title": "Advanced Settings", + "description": "Configure webhooks, real-time updates, and other advanced features for enhanced productivity." + }, + "developer": { + "title": "Developer Settings", + "description": "View technical information about authentication tokens, SSE connections, and debug data." + } + } } } diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 9e8dbcc..dbcf944 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -14,5 +14,20 @@ "copied": "¡Copiado!", "settings": "Configuración", "yes": "Sí", - "no": "No" + "no": "No", + "back": "Atrás", + "backToCalendar": "Volver al Calendario", + "logout": "Cerrar Sesión", + "version": "Versión", + "navigation": { + "allTasks": "Todas las Tareas", + "archived": "Archivadas", + "things": "Cosas", + "labels": "Etiquetas", + "projects": "Proyectos", + "filters": "Filtros", + "activities": "Actividades", + "points": "Puntos", + "settings": "Configuración" + } } diff --git a/src/index.css b/src/index.css index 8c4cbe3..73381b7 100644 --- a/src/index.css +++ b/src/index.css @@ -86,3 +86,29 @@ html { [dir='rtl'] .rounded-r-none { border-radius: 0.375rem 0 0 0.375rem; } + +/* Fix flex alignment for RTL */ +[dir='rtl'] .flex { + direction: rtl; +} + +/* Ensure cards and containers align properly in RTL */ +[dir='rtl'] .MuiCard-root, +[dir='rtl'] .MuiBox-root, +[dir='rtl'] .MuiStack-root { + text-align: right; +} + +/* Fix list item alignment in RTL */ +[dir='rtl'] .MuiListItem-root, +[dir='rtl'] .MuiListItemButton-root { + flex-direction: row-reverse; +} + +/* Fix gap alignment in RTL */ +[dir='rtl'] .gap-1, +[dir='rtl'] .gap-2, +[dir='rtl'] .gap-3, +[dir='rtl'] .gap-4 { + direction: rtl; +} diff --git a/src/views/Settings/SettingsOverview.jsx b/src/views/Settings/SettingsOverview.jsx index c83d08a..cc313c2 100644 --- a/src/views/Settings/SettingsOverview.jsx +++ b/src/views/Settings/SettingsOverview.jsx @@ -30,105 +30,94 @@ import { Stack, Typography, } from '@mui/joy' +import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' import { useUserProfile } from '../../queries/UserQueries' import { isPlusAccount } from '../../utils/Helpers' import { isParentUser } from '../../utils/UserHelpers' const SettingsOverview = () => { + const { t } = useTranslation('settings') const navigate = useNavigate() const { data: userProfile } = useUserProfile() const settingsCards = [ { id: 'profile', - title: 'Profile Settings', - description: - 'Update your profile information, photo, display name, and timezone preferences.', + title: t('overview.sections.profile.title'), + description: t('overview.sections.profile.description'), icon: , }, { id: 'circle', - title: 'Circle Settings', - description: - 'Manage your circle, invite members, and handle join requests.', + title: t('overview.sections.circle.title'), + description: t('overview.sections.circle.description'), icon: , }, { id: 'account', - title: 'Account Settings', - description: - 'Manage your subscription, change password, and account deletion options.', + title: t('overview.sections.account.title'), + description: t('overview.sections.account.description'), icon: , }, { id: 'subaccounts', - title: 'Managed Accounts', - description: - 'Create and manage sub accounts to log in and complete assigned tasks.', + title: t('overview.sections.subaccounts.title'), + description: t('overview.sections.subaccounts.description'), icon: , }, { id: 'notifications', - title: 'Notifications', - description: - 'Configure push notifications, email alerts, and notification targets for tasks.', + title: t('overview.sections.notifications.title'), + description: t('overview.sections.notifications.description'), icon: , }, { id: 'mfa', - title: 'Multi-Factor Authentication', - description: - 'Add an extra layer of security with MFA using authenticator apps.', + title: t('overview.sections.mfa.title'), + description: t('overview.sections.mfa.description'), icon: , }, { id: 'apitokens', - title: 'API Tokens', - description: - 'Generate and manage access tokens for third-party integrations and API access.', + title: t('overview.sections.apitokens.title'), + description: t('overview.sections.apitokens.description'), icon: , }, { id: 'storage', - title: 'Storage Settings', - description: - 'Backup and restore your data, manage local storage and sync preferences.', + title: t('overview.sections.storage.title'), + description: t('overview.sections.storage.description'), icon: , }, { id: 'sidepanel', - title: 'Sidepanel Customization', - description: - 'Customize the layout and visibility of cards in the sidepanel interface.', + title: t('overview.sections.sidepanel.title'), + description: t('overview.sections.sidepanel.description'), icon: , }, { id: 'theme', - title: 'Theme Preferences', - description: - 'Choose your preferred theme and configure dark/light mode settings.', + title: t('overview.sections.theme.title'), + description: t('overview.sections.theme.description'), icon: , }, { id: 'localization', - title: 'Localization', - description: - 'Customize language, date format, time format, and regional preferences.', + title: t('overview.sections.localization.title'), + description: t('overview.sections.localization.description'), icon: , }, { id: 'advanced', - title: 'Advanced Settings', - description: - 'Configure webhooks, real-time updates, and other advanced features for enhanced productivity.', + title: t('overview.sections.advanced.title'), + description: t('overview.sections.advanced.description'), icon: , }, { id: 'developer', - title: 'Developer Settings', - description: - 'View technical information about authentication tokens, SSE connections, and debug data.', + title: t('overview.sections.developer.title'), + description: t('overview.sections.developer.description'), icon: , }, ] @@ -167,10 +156,10 @@ const SettingsOverview = () => { level='h3' sx={{ fontWeight: 'lg', color: 'text.primary' }} > - Settings + {t('overview.title')} - Customize your experience and manage your account preferences + {t('overview.subtitle')} @@ -234,7 +223,7 @@ const SettingsOverview = () => { fontSize: { xs: '0.95rem', md: '1.25rem' }, }} > - Upgrade to Plus + {t('overview.upgrade.title')} { lineHeight: { xs: 1.3, md: 1.5 }, }} > - Unlock powerful features to enhance your productivity + {t('overview.upgrade.description')} { color: 'rgba(255, 255, 255, 0.8)', }} > - • Rich text descriptions - • Task notifications - • API integrations - • Advanced automation + • {t('overview.upgrade.features.richText')} + • {t('overview.upgrade.features.notifications')} + • {t('overview.upgrade.features.apiIntegrations')} + • {t('overview.upgrade.features.advancedAutomation')} @@ -287,7 +276,7 @@ const SettingsOverview = () => { navigate('/settings/account') }} > - Upgrade Now + {t('overview.upgrade.button')} diff --git a/src/views/components/NavBar.jsx b/src/views/components/NavBar.jsx index 653d418..de77c9f 100644 --- a/src/views/components/NavBar.jsx +++ b/src/views/components/NavBar.jsx @@ -25,78 +25,11 @@ import { } from '@mui/joy' import { useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' import { useLocation, useNavigate, useSearchParams } from 'react-router-dom' import { version } from '../../../package.json' import UserProfileAvatar from '../../components/UserProfileAvatar' import NavBarLink from './NavBarLink' -const links = [ - { - to: '/chores', - label: 'All Tasks', - icon: , - }, - { - to: '/archived', - label: 'Archived', - icon: , - }, - - // { - // to: '/chores', - // label: 'Desktop View', - // icon: , - // }, - { - to: '/things', - label: 'Things', - icon: , - }, - { - to: 'labels', - label: 'Labels', - icon: , - }, - { - to: 'projects', - label: 'Projects', - icon: , - }, - { - to: 'filters', - label: 'Filters', - icon: , - }, - { - to: 'activities', - label: 'Activities', - icon: , - }, - { - to: 'points', - label: 'Points', - icon: , - }, - // { - // to: '/settings#sharing', - // label: 'Sharing', - // icon: , - // }, - // { - // to: '/settings#notifications', - // label: 'Notifications', - // icon: , - // }, - // { - // to: '/settings#account', - // label: 'Account', - // icon: , - // }, - { - to: '/settings', - label: 'Settings', - icon: , - }, -] import { SafeArea } from 'capacitor-plugin-safe-area' import Z_INDEX from '../../constants/zIndex' @@ -105,10 +38,59 @@ import { apiClient } from '../../utils/ApiClient' const publicPages = ['/landing', '/privacy', '/terms'] const NavBar = () => { + const { t } = useTranslation('common') const { data: resource } = useResource() const navigate = useNavigate() const [drawerOpen, setDrawerOpen] = useState(false) + + const links = [ + { + to: '/chores', + label: t('navigation.allTasks'), + icon: , + }, + { + to: '/archived', + label: t('navigation.archived'), + icon: , + }, + { + to: '/things', + label: t('navigation.things'), + icon: , + }, + { + to: 'labels', + label: t('navigation.labels'), + icon: , + }, + { + to: 'projects', + label: t('navigation.projects'), + icon: , + }, + { + to: 'filters', + label: t('navigation.filters'), + icon: , + }, + { + to: 'activities', + label: t('navigation.activities'), + icon: , + }, + { + to: 'points', + label: t('navigation.points'), + icon: , + }, + { + to: '/settings', + label: t('navigation.settings'), + icon: , + }, + ] const [openDrawer, closeDrawer] = [ () => setDrawerOpen(true), () => setDrawerOpen(false), @@ -157,7 +139,7 @@ const NavBar = () => { } }} title={ - searchParams.get('from') === 'calendar' ? 'Back to Calendar' : 'Back' + searchParams.get('from') === 'calendar' ? t('backToCalendar') : t('back') } > @@ -296,7 +278,7 @@ const NavBar = () => { - Logout + {t('logout')}