feat: enhance localization across settings views

- Updated LocalizationSettings to use translation keys for titles and descriptions.
- Refactored MFASettings to utilize translation for error messages, success messages, and UI text.
- Improved NotificationSetting by integrating translation for all user-facing strings.
- Initial Hebrew translation ( testing AI translation ( some of crowdin)
- Adjusted ProfileSettings to use translation for the edit photo title.
- Enhanced SettingsOverview to utilize translation for the early access label.
- Updated SidepanelSettings to implement translation for card names and descriptions.
- Refined StorageSettings to use translation for all storage-related messages and titles.
- Improved ThemeSettings to utilize translation for theme descriptions and titles.

src/views/Settings/APITokenSettings.jsx

@@ -10,8 +10,9 @@ import {
   Typography,
 } from '@mui/joy'
 import moment from 'moment'
-
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { useLocalization } from '../../contexts/LocalizationContext'
 import { useUserProfile } from '../../queries/UserQueries'
 import { useNotification } from '../../service/NotificationProvider'
@@ -26,6 +27,7 @@ import TextModal from '../Modals/Inputs/TextModal'
 import SettingsLayout from './SettingsLayout'
 
 const APITokenSettings = () => {
+  const { t } = useTranslation('settings')
   const { data: userProfile } = useUserProfile()
   const { showNotification } = useNotification()
   const { fmt } = useLocalization()
@@ -38,8 +40,8 @@ const APITokenSettings = () => {
     message,
     title,
     onConfirm,
-    confirmText = 'Confirm',
-    cancelText = 'Cancel',
+    confirmText = t('common.confirm'),
+    cancelText = t('common.cancel'),
     color = 'primary',
   ) => {
     setConfirmModalConfig({
@@ -80,23 +82,18 @@ const APITokenSettings = () => {
   }
 
   return (
-    <SettingsLayout title='API Tokens'>
+    <SettingsLayout title={t('apiTokens.title')}>
       <div className='grid gap-4 py-4' id='apitokens'>
-        <Typography level='h3'>Access Token</Typography>
+        <Typography level='h3'>{t('apiTokens.accessToken')}</Typography>
         <Divider />
-        <Typography level='body-sm'>
-          Create token to use with the API to update things that trigger task or
-          chores
-        </Typography>
+        <Typography level='body-sm'>{t('apiTokens.description')}</Typography>
         {!isPlusAccount(userProfile) && (
           <>
             <Chip variant='soft' color='warning'>
-              Plus Feature
+              {t('common.plusFeature')}
             </Chip>
             <Typography level='body-sm' color='warning' sx={{ mt: 1 }}>
-              API tokens are not available in the Basic plan. Upgrade to Plus to
-              generate API tokens for integrating with external systems and
-              automating your tasks.
+              {t('apiTokens.plusNotice')}
             </Typography>
           </>
         )}
@@ -125,7 +122,9 @@ const APITokenSettings = () => {
                     setShowTokenId(token.id)
                   }}
                 >
-                  {showTokenId === token?.id ? 'Hide' : 'Show'} Token
+                  {showTokenId === token?.id
+                    ? t('apiTokens.hideToken')
+                    : t('apiTokens.showToken')}
                 </Button>
 
                 <Button
@@ -133,15 +132,15 @@ const APITokenSettings = () => {
                   color='danger'
                   onClick={() => {
                     showConfirmation(
-                      `Are you sure you want to remove ${token.name}?`,
-                      'Remove Token',
+                      t('apiTokens.removeMessage', { name: token.name }),
+                      t('apiTokens.removeTitle'),
                       () => {
                         DeleteLongLiveToken(token.id).then(resp => {
                           if (resp.ok) {
                             showNotification({
                               type: 'success',
-                              title: 'Removed',
-                              message: 'API token has been removed',
+                              title: t('apiTokens.removedTitle'),
+                              message: t('apiTokens.removedMessage'),
                             })
                             const newTokens = tokens.filter(
                               t => t.id !== token.id,
@@ -150,13 +149,13 @@ const APITokenSettings = () => {
                           }
                         })
                       },
-                      'Remove',
-                      'Cancel',
+                      t('common.remove'),
+                      t('common.cancel'),
                       'danger',
                     )
                   }}
                 >
-                  Remove
+                  {t('common.remove')}
                 </Button>
               </Box>
             </Box>
@@ -174,7 +173,7 @@ const APITokenSettings = () => {
                         navigator.clipboard.writeText(token.token)
                         showNotification({
                           type: 'success',
-                          message: 'Token copied to clipboard',
+                          message: t('apiTokens.tokenCopied'),
                         })
                         setShowTokenId(null)
                       }}
@@ -200,15 +199,15 @@ const APITokenSettings = () => {
             setIsGetTokenNameModalOpen(true)
           }}
         >
-          Generate New Token
+          {t('apiTokens.generateNew')}
         </Button>
         <TextModal
           isOpen={isGetTokenNameModalOpen}
-          title='Give a name for your new token, something to remember it by.'
+          title={t('apiTokens.nameModalTitle')}
           onClose={() => {
             setIsGetTokenNameModalOpen(false)
           }}
-          okText={'Generate Token'}
+          okText={t('apiTokens.generateToken')}
           onSave={handleSaveToken}
         />