TQ-Slator/assets/editor/ContextPanel.tsx

import type { KeyRowTarget, Placeholder, TranslationStatus } from '@/api/types';
import { SourceText } from '@/components/SourceText';
import { StatusBadge, StatusDot } from '@/components/Status';

/**
 * Ce qui appartient à la CLÉ, et vaut donc dans les deux vues.
 */
export interface KeyContext {
    keyPath: string;
    description: string | null;
    maxLength: number | null;
    placeholders: Placeholder[];
    platforms: string[];
    sourceValue: string | null;
}

/**
 * Ce qui appartient à une LANGUE, et n'a de sens qu'en vue par langue.
 *
 * Séparé du reste plutôt que fondu dedans : le panneau servait initialement une
 * seule vue, et les deux natures d'information s'y confondaient sans dommage.
 * Avec deux vues, la confusion coûterait un panneau qui affiche « traduite »
 * au-dessus d'une liste où six langues ne le sont pas.
 */
export interface TargetContext {
    localeCode: string;
    status: TranslationStatus;
    isStale: boolean;
    isMachineTranslated: boolean;
    updatedAt: string | null;
    updatedBy: string | null;
}

/**
 * Le contexte de la clé sélectionnée.
 *
 * Panneau PERMANENT, jamais une modale. Le contexte n'est pas une information
 * secondaire qu'on consulte au besoin : c'est la matière première du traducteur.
 * Une modale l'obligerait à choisir entre lire le contexte et voir sa saisie —
 * exactement ce qu'il ne faut pas lui demander.
 */
export function ContextPanel({
    row,
    sourceCode,
    target,
    targets,
}: {
    row: KeyContext | null;
    sourceCode: string;
    /** Vue par langue : l'état de la langue affichée. */
    target?: TargetContext | null;
    /** Vue par clé : l'état de toutes les langues, en résumé. */
    targets?: KeyRowTarget[] | null;
}) {
    if (row === null) {
        return (
            <aside className="hidden w-72 shrink-0 border-l border-ink-200 bg-white p-4 lg:block">
                <p className="text-xs text-ink-400">
                    Sélectionnez une clé pour afficher son contexte : description, contraintes,
                    variables attendues et historique.
                </p>
            </aside>
        );
    }

    return (
        <aside className="hidden w-72 shrink-0 overflow-y-auto border-l border-ink-200 bg-white lg:block">
            <div className="border-b border-ink-200 p-4">
                <p className="break-all font-mono text-xs text-ink-900">{row.keyPath}</p>
                {target != null && (
                    <div className="mt-2 flex flex-wrap items-center gap-1.5">
                        <StatusBadge status={target.status} />
                        {target.isStale && (
                            <span className="rounded bg-red-50 px-1.5 py-0.5 text-[11px] font-medium text-red-700">
                                source modifiée
                            </span>
                        )}
                        {target.isMachineTranslated && (
                            <span className="rounded bg-ink-100 px-1.5 py-0.5 text-[11px] text-ink-600">
                                traduction automatique
                            </span>
                        )}
                    </div>
                )}
            </div>

            {/* Vue par clé : le panneau résume l'état de chaque langue plutôt
                que celui d'une seule, qu'il n'a aucune raison de privilégier. */}
            {targets != null && targets.length > 0 && (
                <Section title="Langues">
                    <ul className="space-y-1">
                        {targets.map((entry) => (
                            <li key={entry.locale} className="flex items-center gap-2 text-xs">
                                <StatusDot status={entry.status} />
                                <span className="w-12 shrink-0 font-mono text-ink-500">
                                    {entry.locale}
                                </span>
                                <span className="truncate text-ink-500">
                                    {entry.isStale ? 'source modifiée' : STATUS_LABEL[entry.status]}
                                </span>
                            </li>
                        ))}
                    </ul>
                </Section>
            )}

            <Section title="Contexte">
                {row.description !== null && row.description !== '' ? (
                    <p className="text-sm leading-relaxed text-ink-700">{row.description}</p>
                ) : (
                    // L'absence de description n'est pas neutre : c'est la
                    // première cause de mauvaise traduction. On la signale au
                    // lieu de laisser un vide silencieux.
                    <p className="text-sm text-amber-700">
                        Aucune description. Demandez-en une à l'équipe de développement : sans
                        contexte, le choix de formulation est un pari.
                    </p>
                )}
            </Section>

            {row.maxLength !== null && (
                <Section title="Contrainte">
                    <p className="text-sm text-ink-700">
                        <span className="tabular font-medium">{row.maxLength}</span> caractères
                        maximum
                    </p>
                    <p className="mt-1 text-xs text-ink-400">
                        Au-delà, le texte risque d'être tronqué à l'affichage.
                    </p>
                </Section>
            )}

            {row.placeholders.length > 0 && (
                <Section title="Variables">
                    <ul className="space-y-1.5">
                        {row.placeholders.map((placeholder) => (
                            <li key={placeholder.name} className="text-sm">
                                <code className="rounded bg-ink-100 px-1 py-0.5 font-mono text-xs text-ink-800">
                                    {'{'}
                                    {placeholder.name}
                                    {'}'}
                                </code>
                                <span className="ml-2 text-xs text-ink-500">{placeholder.type}</span>
                            </li>
                        ))}
                    </ul>
                    <p className="mt-2 text-xs text-ink-400">
                        Toutes doivent figurer dans la traduction — leur ordre, en revanche, est
                        libre.
                    </p>
                </Section>
            )}

            <Section title="Plateformes">
                {row.platforms.length > 0 ? (
                    <div className="flex flex-wrap gap-1">
                        {row.platforms.map((slug) => (
                            <span
                                key={slug}
                                className="rounded bg-ink-100 px-1.5 py-0.5 font-mono text-[11px] text-ink-600"
                            >
                                {slug}
                            </span>
                        ))}
                    </div>
                ) : (
                    <p className="text-sm text-amber-700">
                        Rattachée à aucune plateforme : cette clé n'entre dans aucun fichier livré.
                    </p>
                )}
            </Section>

            <Section title="Valeur source">
                <p className="whitespace-pre-wrap rounded bg-ink-50 p-2 text-sm text-ink-700">
                    {row.sourceValue === null ? '—' : <SourceText value={row.sourceValue} />}
                </p>
                <p className="mt-1 font-mono text-[11px] text-ink-400">{sourceCode}</p>
            </Section>

            {target != null && target.updatedAt !== null && (
                <Section title="Dernière modification">
                    <p className="text-xs text-ink-500">
                        {new Date(target.updatedAt).toLocaleString('fr-FR')}
                        {target.updatedBy !== null && <> · {target.updatedBy}</>}
                    </p>
                    <p className="mt-1 font-mono text-[11px] text-ink-400">{target.localeCode}</p>
                </Section>
            )}
        </aside>
    );
}

const STATUS_LABEL: Record<TranslationStatus, string> = {
    untranslated: 'à traduire',
    draft: 'brouillon',
    needs_review: 'à revoir',
    translated: 'traduite',
    reviewed: 'validée',
};

function Section({ title, children }: { title: string; children: React.ReactNode }) {
    return (
        <section className="border-b border-ink-100 p-4">
            <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
                {title}
            </h3>
            {children}
        </section>
    );
}