Add multilanguage (FR & EN)

[tresor228]

User description

---

PR Type

Enhancement, Documentation

---

Description

• Implemented internationalization (i18n) support for French and English languages

• Added language switcher components with multiple UI variants (standard, compact, minimal)

• Created translation hook and context for managing locale state

• Integrated translations across main pages and navigation components

---

Diagram Walkthrough

flowchart LR
  A["Translation Files"] --> B["LanguageContext"]
  B --> C["useTranslations Hook"]
  C --> D["UI Components"]
  E["LanguageSwitcher"] --> B
  D --> F["Translated Pages"]

Loading

File Walkthrough

	Relevant files
Enhancement	9 files useTranslations.ts Create custom hook for translation management                        +70/-0    LanguageContext.tsx Add language context provider with localStorage persistence +46/-0    LanguageSwitcher.tsx Create standard language switcher dropdown component          +76/-0    LanguageSwitcherCompact.tsx Create compact language switcher with globe icon                  +74/-0    LanguageSwitcherMinimal.tsx Create minimal flag-only language switcher variant              +72/-0    nav.tsx Integrate translations and language switcher in navbar      +18/-7    page.tsx Replace hardcoded text with translation keys                          +38/-13  layout.tsx Wrap app with LanguageProvider and update metadata              +8/-3      button2.tsx Add translation support for button text                                    +3/-1
Documentation	2 files common.json Add English translation strings for all UI elements            +132/-0  common.json Add French translation strings for all UI elements              +132/-0
Dependencies	1 files package.json Add i18n dependencies (i18next, react-i18next, next-i18next) +3/-0
Formatting	4 files resizable-navbar.tsx Adjust navbar spacing and alignment for language switcher +1/-1      navbar1.tsx Remove unused Image import                                                              +0/-1      supabaseclient.ts Remove trailing newline                                                                    +1/-1      order.ts Remove trailing newline                                                                    +1/-1
Miscellaneous	1 files page.tsx Update imports and add navbar component                                    +3/-1

---

[vercel]

@tresor228 is attempting to deploy a commit to the agastya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Client storage trust Description: Language preference is stored and read from localStorage without validation or namespace, which could be manipulated by third-party scripts; consider namespacing and validating the value against an allowed list. LanguageContext.tsx [21-31] Referred Code useEffect(() => { // Récupérer la langue depuis localStorage au chargement const savedLocale = localStorage.getItem('preferred-language') || 'en'; setLocaleState(savedLocale); setIsLoading(false); }, []); const setLocale = (newLocale: string) => { setLocaleState(newLocale); localStorage.setItem('preferred-language', newLocale); };
Ticket Compliance
⚪	🎫 No ticket provided - [ ] Create ticket/issue <!-- /create_ticket --create_ticket=true --> </details></td></tr>
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Use next-i18next instead of a custom solution Instead of the custom, client-side-only translation solution, use the next-i18next library that was already added as a dependency. This will provide proper Server-Side Rendering (SSR) support, improving performance and SEO. Examples: src/hooks/useTranslations.ts [16-49] export function useTranslations(): UseTranslationsReturn { const { locale, isLoading: contextLoading } = useLanguage(); const [translations, setTranslations] = useState<Translations>({}); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const loadTranslations = async () => { try { const response = await fetch(`/locales/${locale}/common.json`); if (!response.ok) { ... (clipped 24 lines) src/contexts/LanguageContext.tsx [17-31] export function LanguageProvider({ children }: LanguageProviderProps) { const [locale, setLocaleState] = useState('en'); const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Récupérer la langue depuis localStorage au chargement const savedLocale = localStorage.getItem('preferred-language') || 'en'; setLocaleState(savedLocale); setIsLoading(false); }, []); ... (clipped 5 lines) Solution Walkthrough: Before: // LanguageContext.tsx function LanguageProvider({ children }) { const [locale, setLocaleState] = useState('en'); useEffect(() => { // Fetches language from client-side localStorage const savedLocale = localStorage.getItem('preferred-language') || 'en'; setLocaleState(savedLocale); }, []); // ... } // useTranslations.ts function useTranslations() { const { locale } = useLanguage(); useEffect(() => { // Fetches translation files on the client fetch(`/locales/${locale}/common.json`) .then(res => res.json()) .then(data => setTranslations(data)); }, [locale]); const t = (key, fallback) => { /* ... */ }; return { t }; } After: // next-i18next.config.js (conceptual) module.exports = { i18n: { defaultLocale: 'en', locales: ['en', 'fr'], }, }; // app/[locale]/page.tsx (App Router example) import { useTranslation } from 'next-i18next'; // Translations are loaded on the server via middleware/config export default function Page() { // Hook provided by the library const { t } = useTranslation('common'); // Renders translated content on the server, no fallback needed return <h1>{t('hero.title')}</h1>; } Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a major architectural flaw where a custom, client-side-only i18n solution is built despite next-i18next being added as a dependency, which negatively impacts SSR, performance, and SEO.	High
Possible issue	Reset loading state on locale change Add setIsLoading(true) at the beginning of the useEffect in the useTranslations hook to prevent displaying stale translations while a new language file is being fetched. src/hooks/useTranslations.ts [21-49] useEffect(() => { const loadTranslations = async () => { + setIsLoading(true); try { const response = await fetch(`/locales/${locale}/common.json`); if (!response.ok) { throw new Error(`Failed to load translations for ${locale}`); } const data = await response.json(); setTranslations(data); } catch (error) { console.error('Failed to load translations:', error); // Fallback to English try { const response = await fetch('/locales/en/common.json'); const data = await response.json(); setTranslations(data); } catch (fallbackError) { console.error('Failed to load fallback translations:', fallbackError); setTranslations({}); } } finally { setIsLoading(false); } }; if (!contextLoading) { loadTranslations(); } }, [locale, contextLoading]); Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a race condition where stale translations could be displayed when the language changes, which is a significant bug in the new i18n feature.	Medium
Update