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

17
frontend/src/app/dashboard/translate/ProviderSelector.tsx
View File

@@ -142,7 +142,7 @@ export function ProviderSelector({
type="button"
onClick={() => onProviderChange(p.id)}
className={cn(
'p-2 py-1.5 rounded-lg border text-left transition-all relative overflow-hidden flex flex-col justify-center min-h-[44px]',
'p-2.5 py-2 rounded-lg border text-left transition-all relative overflow-hidden flex flex-col justify-center min-h-[48px]',
isSelected
? 'border-brand-accent bg-brand-accent/5 dark:bg-brand-accent/10'
: 'border-black/[0.05] dark:border-white/[0.05] bg-brand-muted/20 dark:bg-zinc-800/10 hover:bg-brand-muted/50 dark:hover:bg-zinc-800/20'
@@ -150,14 +150,14 @@ export function ProviderSelector({
>
<div className="flex items-center justify-between">
<span className={cn(
"text-[8px] font-black uppercase tracking-tight truncate flex-1",
"text-[9.5px] font-black uppercase tracking-tight truncate flex-1",
isSelected ? 'text-brand-accent' : 'text-brand-dark/40 dark:text-white/40'
)}>
Standard
</span>
{isSelected && <div className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse shrink-0 ml-1" />}
</div>
<span className="text-[10px] font-bold text-brand-dark dark:text-white block leading-tight truncate">
<span className="text-xs font-bold text-brand-dark dark:text-white block leading-tight truncate">
{label}
</span>
</button>
@@ -167,6 +167,7 @@ export function ProviderSelector({
const renderLlmCard = (p: AvailableProvider, locked: boolean) => {
const isSelected = provider === p.id;
const theme = LLM_THEMES[p.id] || DEFAULT_LLM_THEME;
const displayLabel = p.model || p.label.replace(/^Traduction\s+IA\s+/i, '');
return (
<button
@@ -175,7 +176,7 @@ export function ProviderSelector({
disabled={locked}
onClick={() => !locked && onProviderChange(p.id)}
className={cn(
'p-2 py-1.5 rounded-lg border text-left transition-all relative overflow-hidden flex flex-col justify-between min-h-[58px]',
'p-2 py-2 rounded-lg border text-left transition-all relative overflow-hidden flex flex-col justify-between min-h-[64px]',
isSelected
? 'border-brand-accent bg-brand-accent/5 dark:bg-brand-accent/10'
: locked
@@ -185,7 +186,7 @@ export function ProviderSelector({
>
<div className="flex items-center justify-between mb-0.5">
<span className={cn(
"text-[8px] font-black uppercase tracking-tight truncate flex-1",
"text-[9px] font-black uppercase tracking-tight truncate flex-1",
isSelected ? 'text-brand-accent' : 'text-brand-dark/40 dark:text-white/40'
)}>
{theme.badge}
@@ -193,10 +194,10 @@ export function ProviderSelector({
{isSelected && <div className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse shrink-0 ml-1" />}
{locked && <Lock className="size-2 text-brand-dark/40 dark:text-white/40 shrink-0 ml-1" />}
</div>
<span className="text-[10px] font-bold text-brand-dark dark:text-white block leading-none mb-0.5 truncate">
{p.label}
<span className="text-xs font-bold text-brand-dark dark:text-white block leading-none mb-0.5 truncate">
{displayLabel}
</span>
<span className="text-[7.5px] text-brand-dark/40 dark:text-white/45 uppercase font-bold block leading-none truncate">
<span className="text-[8.5px] text-brand-dark/40 dark:text-white/45 uppercase font-bold block leading-none truncate">
{theme.subBadge}
</span>
</button>