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.
2026-03-08 16:37:02 +00:00
parent 7f74574a7f
commit a82f6b16b7
8 changed files with 275 additions and 123 deletions
--- 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": "الإعدادات"
+  }
 }
--- 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"
+    }
+  }
 }
--- 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"
+  }
 }
--- 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."
+      }
+    }
  }
 }
--- 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"
+  }
 }
--- 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;
+}
--- 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: <Person />,
    },
    {
      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: <Circle />,
    },
    {
      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: <AccountCircle />,
    },
    {
      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: <FamilyRestroom />,
    },
    {
      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: <Notifications />,
    },
    {
      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: <Security />,
    },
    {
      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: <Api />,
    },
    {
      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: <Storage />,
    },
    {
      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: <ViewSidebar />,
    },
    {
      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: <Palette />,
    },
    {
      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: <Language />,
    },
    {
      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: <Settings />,
    },
    {
      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: <Code />,
    },
  ]
@@ -167,10 +156,10 @@ const SettingsOverview = () => {
            level='h3'
            sx={{ fontWeight: 'lg', color: 'text.primary' }}
          >
-            Settings
+            {t('overview.title')}
          </Typography>
          <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
-            Customize your experience and manage your account preferences
+            {t('overview.subtitle')}
          </Typography>
        </Stack>
      </Box>
@@ -234,7 +223,7 @@ const SettingsOverview = () => {
                        fontSize: { xs: '0.95rem', md: '1.25rem' },
                      }}
                    >
-                      Upgrade to Plus
+                      {t('overview.upgrade.title')}
                    </Typography>
                    <Typography
                      level='body-md'
@@ -245,7 +234,7 @@ const SettingsOverview = () => {
                        lineHeight: { xs: 1.3, md: 1.5 },
                      }}
                    >
-                      Unlock powerful features to enhance your productivity
+                      {t('overview.upgrade.description')}
                    </Typography>
                    <Box
                      sx={{
@@ -256,10 +245,10 @@ const SettingsOverview = () => {
                        color: 'rgba(255, 255, 255, 0.8)',
                      }}
                    >
-                      <span>• Rich text descriptions</span>
-                      <span>• Task notifications</span>
-                      <span>• API integrations</span>
-                      <span>• Advanced automation</span>
+                      <span>• {t('overview.upgrade.features.richText')}</span>
+                      <span>• {t('overview.upgrade.features.notifications')}</span>
+                      <span>• {t('overview.upgrade.features.apiIntegrations')}</span>
+                      <span>• {t('overview.upgrade.features.advancedAutomation')}</span>
                    </Box>
                  </Box>
                </Box>
@@ -287,7 +276,7 @@ const SettingsOverview = () => {
                    navigate('/settings/account')
                  }}
                >
-                  Upgrade Now
+                  {t('overview.upgrade.button')}
                </Button>
              </Box>
            </CardContent>
--- 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: <Inbox />,
-  },
-  {
-    to: '/archived',
-    label: 'Archived',
-    icon: <Archive />,
-  },
-
-  // {
-  //   to: '/chores',
-  //   label: 'Desktop View',
-  //   icon: <ListAltRounded />,
-  // },
-  {
-    to: '/things',
-    label: 'Things',
-    icon: <Widgets />,
-  },
-  {
-    to: 'labels',
-    label: 'Labels',
-    icon: <ListAlt />,
-  },
-  {
-    to: 'projects',
-    label: 'Projects',
-    icon: <FolderOpen />,
-  },
-  {
-    to: 'filters',
-    label: 'Filters',
-    icon: <FilterAlt />,
-  },
-  {
-    to: 'activities',
-    label: 'Activities',
-    icon: <History />,
-  },
-  {
-    to: 'points',
-    label: 'Points',
-    icon: <Toll />,
-  },
-  // {
-  //   to: '/settings#sharing',
-  //   label: 'Sharing',
-  //   icon: <ShareOutlined />,
-  // },
-  // {
-  //   to: '/settings#notifications',
-  //   label: 'Notifications',
-  //   icon: <Message />,
-  // },
-  // {
-  //   to: '/settings#account',
-  //   label: 'Account',
-  //   icon: <AccountBox />,
-  // },
-  {
-    to: '/settings',
-    label: 'Settings',
-    icon: <SettingsOutlined />,
-  },
-]

 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: <Inbox />,
+    },
+    {
+      to: '/archived',
+      label: t('navigation.archived'),
+      icon: <Archive />,
+    },
+    {
+      to: '/things',
+      label: t('navigation.things'),
+      icon: <Widgets />,
+    },
+    {
+      to: 'labels',
+      label: t('navigation.labels'),
+      icon: <ListAlt />,
+    },
+    {
+      to: 'projects',
+      label: t('navigation.projects'),
+      icon: <FolderOpen />,
+    },
+    {
+      to: 'filters',
+      label: t('navigation.filters'),
+      icon: <FilterAlt />,
+    },
+    {
+      to: 'activities',
+      label: t('navigation.activities'),
+      icon: <History />,
+    },
+    {
+      to: 'points',
+      label: t('navigation.points'),
+      icon: <Toll />,
+    },
+    {
+      to: '/settings',
+      label: t('navigation.settings'),
+      icon: <SettingsOutlined />,
+    },
+  ]
  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')
        }
      >
        <ArrowBack />
@@ -296,7 +278,7 @@ const NavBar = () => {
              <ListItemDecorator>
                <Logout />
              </ListItemDecorator>
-              <ListItemContent>Logout</ListItemContent>
+              <ListItemContent>{t('logout')}</ListItemContent>
            </ListItemButton>
            <Typography
              onClick={