From 9843023c4c87f993260f8a3b20751e41c2432dc1 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sun, 17 May 2026 01:04:20 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20improve=20glossary=20selector=20click=20?=
 =?UTF-8?q?feedback=20=E2=80=94=20check=20icon,=20deselect=20X,=20visible?=
 =?UTF-8?q?=20selected=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../dashboard/translate/GlossarySelector.tsx  | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/dashboard/translate/GlossarySelector.tsx b/frontend/src/app/dashboard/translate/GlossarySelector.tsx
index e9c4fa3..68dbd60 100644
--- a/frontend/src/app/dashboard/translate/GlossarySelector.tsx
+++ b/frontend/src/app/dashboard/translate/GlossarySelector.tsx
@@ -154,31 +154,56 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
           )}
 
           {/* My glossaries */}
-          {!isLoadingGlossaries && filteredGlossaries.length > 0 && (
+          {!isLoadingGlossaries && (filteredGlossaries.length > 0 || selected) && (
             <div className="space-y-1">
               <span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
                 {t('translate.glossary.myGlossaries') || 'Mes glossaires'}
               </span>
+              {selected && !filteredGlossaries.find(g => g.id === selected.id) && (
+                <button
+                  className="w-full px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest rounded-xl transition-all flex items-center gap-2 bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
+                  onClick={() => onChange(null)}
+                  disabled={disabled}
+                >
+                  <Check size={12} className="shrink-0" />
+                  <span className="truncate">{selected.name}</span>
+                  <span className="ml-auto text-brand-accent/60 font-normal normal-case shrink-0">
+                    {selected.terms_count} {t('translate.glossary.terms')}
+                  </span>
+                  <span className="text-brand-accent/50 ml-1">✕</span>
+                </button>
+              )}
               {filteredGlossaries.map(g => {
                 const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
+                const isSelected = g.id === glossaryId;
                 return (
                   <button
                     key={g.id}
-                    onClick={() => onChange(g.id === glossaryId ? null : g.id)}
+                    onClick={() => onChange(isSelected ? null : g.id)}
                     disabled={disabled}
                     className={cn(
                       "w-full px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest rounded-xl transition-all flex items-center gap-2",
-                      g.id === glossaryId
-                        ? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
+                      isSelected
+                        ? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20 shadow-sm"
                         : "bg-brand-muted/50 dark:bg-white/5 text-brand-dark/60 dark:text-white/60 hover:bg-brand-accent/5 hover:text-brand-dark dark:hover:text-white border border-transparent",
                       disabled && "opacity-50 cursor-not-allowed"
                     )}
                   >
-                    <span>{flag}</span>
+                    {isSelected ? (
+                      <Check size={12} className="shrink-0" />
+                    ) : (
+                      <span>{flag}</span>
+                    )}
                     <span className="truncate">{g.name}</span>
-                    <span className="ml-auto text-brand-dark/25 dark:text-white/25 font-normal normal-case shrink-0">
+                    <span className={cn(
+                      "ml-auto font-normal normal-case shrink-0",
+                      isSelected ? "text-brand-accent/60" : "text-brand-dark/25 dark:text-white/25"
+                    )}>
                       {g.terms_count} {t('translate.glossary.terms')}
                     </span>
+                    {isSelected && (
+                      <span className="text-brand-accent/50 ml-1">✕</span>
+                    )}
                   </button>
                 );
               })}