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

fix(frontend): increase translation config legibility and integrate templates in glossary selector
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m31s
Details

Browse Source
This commit is contained in:
sepehr
2026-05-31 11:18:57 +02:00
parent 3f635e809e
commit 58d9d8a74c
3 changed files with 168 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/dashboard/translate/LanguageSelector.tsx
View File

@@ -66,28 +66,28 @@ function Combobox({
type="button"
onClick={() => setOpen(!open)}
className={cn(
'w-full py-2 px-3 bg-brand-muted/60 dark:bg-white/5 rounded-xl border text-[10px] font-bold uppercase tracking-wider text-brand-dark dark:text-white flex items-center justify-between hover:border-brand-accent/50 transition-all select-none cursor-pointer',
'w-full py-2.5 px-3.5 bg-brand-muted/60 dark:bg-white/5 rounded-xl border text-xs font-bold uppercase tracking-wider text-brand-dark dark:text-white flex items-center justify-between hover:border-brand-accent/50 transition-all select-none cursor-pointer',
open ? 'border-brand-accent/50' : 'border-brand-accent/20 dark:border-white/10'
)}
>
<span className="truncate">{label || placeholder}</span>
<ChevronDown className={cn('size-3 shrink-0 text-brand-accent transition-transform ms-2', open && 'rotate-180')} />
<ChevronDown className={cn('size-3.5 shrink-0 text-brand-accent transition-transform ms-2', open && 'rotate-180')} />
</button>
{open && (
<div className="absolute top-[102%] right-0 left-0 bg-white dark:bg-[#1a1a1a] border border-black/10 dark:border-white/10 rounded-xl shadow-2xl p-2 z-50 max-h-48 overflow-y-auto animate-fade-in">
<div className="border-b border-black/5 dark:border-white/5 px-2 py-1">
<div className="border-b border-black/5 dark:border-white/5 px-2 py-1.5">
<input
ref={inputRef}
type="text"
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="Search..."
className="w-full bg-transparent px-1 py-1 text-[10px] outline-none placeholder:text-brand-dark/30 dark:placeholder:text-white/30 text-brand-dark dark:text-white"
className="w-full bg-transparent px-1 py-1 text-xs outline-none placeholder:text-brand-dark/30 dark:placeholder:text-white/30 text-brand-dark dark:text-white"
/>
</div>
<div className="max-h-[160px] overflow-y-auto p-1 mt-1 space-y-0.5">
{filtered.length === 0 && (
<div className="px-3 py-3 text-center text-[9px] text-brand-dark/40 dark:text-white/40">No results</div>
<div className="px-3 py-3 text-center text-xs text-brand-dark/40 dark:text-white/40">No results</div>
)}
{filtered.map(lang => (
<button
@@ -95,14 +95,14 @@ function Combobox({
type="button"
onClick={() => { onChange(lang.code); setOpen(false); setQuery(''); }}
className={cn(
'flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-[9px] font-bold uppercase tracking-wider transition-colors cursor-pointer',
'flex w-full items-center justify-between rounded-lg px-2.5 py-2 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer',
value === lang.code
? 'bg-brand-accent/10 text-brand-accent'
: 'text-brand-dark/70 dark:text-white/70 hover:bg-brand-muted dark:hover:bg-white/5'
)}
>
<span className="truncate">{lang.name}</span>
{value === lang.code && <Check className="size-3 text-brand-accent shrink-0" />}
{value === lang.code && <Check className="size-3.5 text-brand-accent shrink-0" />}
</button>
))}
</div>
@@ -143,7 +143,7 @@ export default function LanguageSelector({
<div className="grid grid-cols-11 gap-2 items-center">
{/* Source */}
<div className="col-span-5 relative text-left">
<span className="text-[8px] font-bold text-brand-dark/30 dark:text-white/30 uppercase tracking-widest block mb-1">Source</span>
<span className="text-[10px] font-bold text-brand-dark/40 dark:text-white/40 uppercase tracking-widest block mb-1">Source</span>
<Combobox
value={sourceLang}
options={languages}
@@ -174,7 +174,7 @@ export default function LanguageSelector({
{/* Target */}
<div className="col-span-5 relative text-left">
<span className="text-[8px] font-bold text-brand-dark/30 dark:text-white/30 uppercase tracking-widest block mb-1">Cible</span>
<span className="text-[10px] font-bold text-brand-dark/40 dark:text-white/40 uppercase tracking-widest block mb-1">Cible</span>
<Combobox
value={targetLang}
options={languages}