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 (
);
}
return (
);
}
const STATUS_LABEL: Record = {
untranslated: 'à traduire',
draft: 'brouillon',
needs_review: 'à revoir',
translated: 'traduite',
reviewed: 'validée',
};
function Section({ title, children }: { title: string; children: React.ReactNode }) {
return (