diff --git a/frontend/src/app/dashboard/translate/GlossarySelector.tsx b/frontend/src/app/dashboard/translate/GlossarySelector.tsx index 7a98d21..2fb9200 100644 --- a/frontend/src/app/dashboard/translate/GlossarySelector.tsx +++ b/frontend/src/app/dashboard/translate/GlossarySelector.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect, useCallback, useRef } from 'react'; +import { useState, useEffect, useCallback, useRef, useMemo } from 'react'; import { BookOpen, Plus, Loader2, Check, ChevronDown, X, Globe, ChevronRight } from 'lucide-react'; import { API_BASE } from '@/lib/config'; import { useI18n } from '@/lib/i18n'; @@ -48,6 +48,12 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary const [showTemplates, setShowTemplates] = useState(false); const containerRef = useRef(null); + const [filterByLang, setFilterByLang] = useState(sourceLang !== 'auto'); + + useEffect(() => { + setFilterByLang(sourceLang !== 'auto'); + }, [sourceLang]); + // Form states for adding term const [newSource, setNewSource] = useState(''); const [newTarget, setNewTarget] = useState(''); @@ -222,7 +228,13 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary const sourceFlag = SUPPORTED_LANGUAGES.find(l => l.code === sourceLang)?.flag ?? ''; const targetFlag = SUPPORTED_LANGUAGES.find(l => l.code === targetLang)?.flag ?? ''; - const filteredGlossaries = glossaries; + const filteredGlossaries = useMemo(() => { + if (!filterByLang || sourceLang === 'auto') { + return glossaries; + } + return glossaries.filter(g => g.source_language === sourceLang); + }, [glossaries, filterByLang, sourceLang]); + const selected = glossaries.find(g => g.id === glossaryId); return (
+ {/* Filter toggle header */} + {sourceLang !== 'auto' && glossaries.length > 0 && ( +
+ + Filtrer par langue ({sourceFlag}) + + +
+ )} + {filteredGlossaries.length > 0 ? ( filteredGlossaries.map(g => { const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? ''; @@ -347,12 +378,28 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary ); }) ) : ( -

- {sourceLang !== 'auto' - ? `Aucun glossaire pour ${sourceFlag}➔${targetFlag}` - : "Aucun glossaire disponible" - } -

+
+

+ Aucun glossaire pour la langue {sourceFlag || sourceLang.toUpperCase()}. +

+
+ {filterByLang && glossaries.length > 0 && ( + + )} + + Créer un glossaire ➔ + +
+
)}
)}