github/TREK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(client): add Arabic language support

Browse Source 
Add Arabic to the client i18n system, expose it in the language selectors, and enable RTL document handling. Also localize the remaining language-specific UI bits used by the login, demo, Vacay, and GitHub panels.
This commit is contained in:
Mansour Almohsen
2026-03-29 12:47:45 +03:00
parent df3e62af5c
commit b0ffb63d67
10 changed files with 782 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/pages/LoginPage.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuthStore } from '../store/authStore'
import { useSettingsStore } from '../store/settingsStore'
import { useTranslation } from '../i18n'
import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
import { authApi } from '../api/client'
import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield } from 'lucide-react'
@@ -273,8 +273,8 @@ export default function LoginPage(): React.ReactElement {
{/* Language toggle */}
<button
onClick={() => {
const languages = ['en', 'es', 'de']
const currentIndex = languages.indexOf(language)
const languages = SUPPORTED_LANGUAGES.map(({ value }) => value)
const currentIndex = languages.findIndex(code => code === language)
const nextLanguage = languages[(currentIndex + 1) % languages.length]
setLanguageLocal(nextLanguage)
}}

12
client/src/pages/SettingsPage.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuthStore } from '../store/authStore'
import { useSettingsStore } from '../store/settingsStore'
import { useTranslation } from '../i18n'
import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
import Navbar from '../components/Layout/Navbar'
import CustomSelect from '../components/shared/CustomSelect'
import { useToast } from '../components/shared/Toast'
@@ -266,15 +266,7 @@ export default function SettingsPage(): React.ReactElement {
<div>
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
<div className="flex flex-wrap gap-2">
{[
{ value: 'de', label: 'Deutsch' },
{ value: 'en', label: 'English' },
{ value: 'es', label: 'Español' },
{ value: 'fr', label: 'Français' },
{ value: 'nl', label: 'Nederlands' },
{ value: 'ru', label: 'Русский' },
{ value: 'zh', label: '中文' },
].map(opt => (
{SUPPORTED_LANGUAGES.map(opt => (
<button
key={opt.value}
onClick={async () => {