sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve glossary selector click feedback — check icon, deselect X, visible selected state
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m37s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
sepehr
2026-05-17 01:04:20 +02:00
parent ca8abc560d
commit 9843023c4c
1 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/app/dashboard/translate/GlossarySelector.tsx
View File

@@ -154,31 +154,56 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
)} )}
{/* My glossaries */} {/* My glossaries */}
{!isLoadingGlossaries && filteredGlossaries.length > 0 && ( {!isLoadingGlossaries && (filteredGlossaries.length > 0 || selected) && (
<div className="space-y-1"> <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"> <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'} {t('translate.glossary.myGlossaries') || 'Mes glossaires'}
</span> </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 => { {filteredGlossaries.map(g => {
const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? ''; const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
const isSelected = g.id === glossaryId;
return ( return (
<button <button
key={g.id} key={g.id}
onClick={() => onChange(g.id === glossaryId ? null : g.id)} onClick={() => onChange(isSelected ? null : g.id)}
disabled={disabled} disabled={disabled}
className={cn( 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", "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 isSelected
? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20" ? "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", : "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" 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="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')} {g.terms_count} {t('translate.glossary.terms')}
</span> </span>
{isSelected && (
<span className="text-brand-accent/50 ml-1">✕</span>
)}
</button> </button>
); );
})} })}