TQ-Slator/assets/editor/KeyFocusMode.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { api } from '@/api/client';
import type { KeyRow, LocaleStats, TranslationStatus } from '@/api/types';
import { SourceText } from '@/components/SourceText';
import { StatusDot } from '@/components/Status';
import { TranslationInput } from '@/editor/TranslationInput';

interface Props {
    projectUuid: string;
    /** Langues cibles du projet, avec l'habilitation d'écriture de l'utilisateur. */
    locales: LocaleStats[];
    platform?: string;
    namespace?: string;
    onClose: () => void;
}

const ACTIONABLE: TranslationStatus[] = ['untranslated', 'draft', 'needs_review'];

/**
 * Mode Focus toutes langues confondues.
 *
 * Le pendant du mode Focus par langue, et non son remplaçant. Celui-ci enchaîne
 * les clés d'UNE langue ; celui-là enchaîne les clés en présentant d'un coup
 * **toutes les langues sur lesquelles l'utilisateur a quelque chose à faire**.
 *
 * Le gain est précis, et c'est le seul qui justifie l'écran : la source et son
 * contexte se lisent UNE fois pour plusieurs langues. María, habilitée en
 * espagnol et en portugais, rencontrait jusqu'ici deux fois la même clé dans
 * deux files séparées, et relisait deux fois « Annuler la séance » avant
 * d'écrire deux phrases voisines. Ici elle la lit une fois.
 *
 * Trois conséquences de conception :
 *
 *  1. **La file ne contient que du faisable.** Une clé qui ne manque qu'en
 *     allemand n'entre pas dans la file d'une traductrice espagnole : elle la
 *     traverserait sans rien pouvoir y faire. Le filtrage est serveur, à partir
 *     de l'identité courante.
 *  2. **Les langues déjà faites restent visibles, en lecture.** Une traduction
 *     voisine déjà écrite est la meilleure matière première qui soit — souvent
 *     meilleure que la source elle-même pour trancher un registre.
 *  3. **⌘↵ descend d'un champ, puis passe à la clé suivante.** Le geste reste
 *     celui du mode Focus par langue ; il traverse simplement plusieurs champs
 *     avant de changer de clé.
 */
export function KeyFocusMode({ projectUuid, locales, platform, namespace, onClose }: Props) {
    const [index, setIndex] = useState(0);
    const [done, setDone] = useState<Set<string>>(new Set());
    const fieldRefs = useRef<(HTMLDivElement | null)[]>([]);

    // La file est constituée UNE fois à l'ouverture. La rafraîchir à chaque
    // enregistrement ferait disparaître la clé courante sous les doigts — le
    // pire défaut possible pour un mode de saisie en rafale.
    const queue = useQuery({
        queryKey: ['key-focus-queue', projectUuid, platform, namespace],
        queryFn: () =>
            api.keys({
                projectUuid,
                platform,
                namespace,
                focus: true,
                itemsPerPage: 200,
            }),
        staleTime: Infinity,
        refetchOnWindowFocus: false,
    });

    const rows = queue.data?.items ?? [];
    const current: KeyRow | undefined = rows[index];

    useEffect(() => {
        function onKey(event: KeyboardEvent) {
            if (event.key === 'Escape') {
                event.preventDefault();
                onClose();
            }
        }

        window.addEventListener('keydown', onKey);

        return () => window.removeEventListener('keydown', onKey);
    }, [onClose]);

    const next = useCallback(() => {
        fieldRefs.current = [];
        setIndex((value) => Math.min(value + 1, rows.length));
    }, [rows.length]);

    function previous() {
        fieldRefs.current = [];
        setIndex((value) => Math.max(value - 1, 0));
    }

    // Les langues à traiter sur CETTE clé : écrivables et pas encore faites.
    const writable = locales.filter((locale) => locale.canWrite);
    const byCode = new Map((current?.targets ?? []).map((target) => [target.locale, target]));

    const todo = writable.filter((locale) => {
        const status = byCode.get(locale.code)?.status ?? 'untranslated';

        return ACTIONABLE.includes(status);
    });

    const reference = (current?.targets ?? []).filter(
        (target) => !todo.some((locale) => locale.code === target.locale) && target.value !== null,
    );

    /** ⌘↵ : champ suivant, ou clé suivante si c'était le dernier. */
    function advanceFrom(position: number) {
        const nextField = fieldRefs.current[position + 1];

        if (nextField != null) {
            nextField.querySelector('textarea')?.focus();

            return;
        }

        next();
    }

    return (
        <div className="fixed inset-0 z-50 flex flex-col bg-white">
            <header className="flex shrink-0 items-center gap-4 border-b border-ink-200 px-5 py-3">
                <span className="tabular text-sm font-medium text-ink-700">
                    {Math.min(index + 1, rows.length)} / {rows.length}
                </span>

                <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-ink-200">
                    <div
                        className="h-full bg-accent transition-[width] duration-200"
                        style={{
                            width: rows.length === 0 ? '0%' : `${(done.size / rows.length) * 100}%`,
                        }}
                    />
                </div>

                <span className="tabular text-xs text-ink-400">
                    {done.size} traitée{done.size > 1 ? 's' : ''}
                </span>

                <span className="rounded bg-ink-100 px-2 py-0.5 font-mono text-[11px] text-ink-500">
                    {writable.map((l) => l.code).join(' · ')}
                </span>

                <button
                    onClick={onClose}
                    className="rounded px-2 py-1 text-sm text-ink-500 hover:bg-ink-100"
                >
                    Quitter <kbd className="ml-1 font-mono text-[11px]">Échap</kbd>
                </button>
            </header>

            <div className="flex min-h-0 flex-1 items-start justify-center overflow-y-auto px-6 py-10">
                {queue.isLoading && <p className="text-sm text-ink-400">Constitution de la file…</p>}

                {!queue.isLoading && writable.length === 0 && (
                    <div className="max-w-md text-center">
                        <p className="text-lg font-medium text-ink-800">Aucune langue à traiter.</p>
                        <p className="mt-2 text-sm text-ink-500">
                            Vous n'êtes habilité à écrire dans aucune langue de ce projet. Le mode
                            Focus n'a rien à vous proposer ; la consultation reste ouverte.
                        </p>
                        <button
                            onClick={onClose}
                            className="mt-6 rounded-md bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
                        >
                            Revenir à la liste
                        </button>
                    </div>
                )}

                {!queue.isLoading && writable.length > 0 && current === undefined && (
                    <div className="max-w-md text-center">
                        <p className="text-lg font-medium text-ink-800">File terminée.</p>
                        <p className="mt-2 text-sm text-ink-500">
                            {done.size > 0
                                ? `${done.size} clé${done.size > 1 ? 's' : ''} traitée${done.size > 1 ? 's' : ''}.`
                                : 'Aucune clé ne restait à traiter dans vos langues.'}
                        </p>
                        <button
                            onClick={onClose}
                            className="mt-6 rounded-md bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
                        >
                            Revenir à la liste
                        </button>
                    </div>
                )}

                {current !== undefined && writable.length > 0 && (
                    <div className="w-full max-w-3xl">
                        <div className="flex items-center gap-2">
                            <p className="break-all font-mono text-xs text-ink-500">
                                {current.keyPath}
                            </p>
                            {current.platforms.map((slug) => (
                                <span
                                    key={slug}
                                    className="rounded bg-ink-100 px-1 py-0.5 font-mono text-[10px] text-ink-500"
                                >
                                    {slug}
                                </span>
                            ))}
                            <span className="tabular ml-auto shrink-0 rounded bg-ink-100 px-1.5 py-0.5 text-[11px] text-ink-600">
                                {current.completion}%
                            </span>
                        </div>

                        {current.description !== null && current.description !== '' && (
                            <p className="mt-4 rounded-md bg-ink-50 px-3 py-2 text-sm leading-relaxed text-ink-600">
                                {current.description}
                            </p>
                        )}

                        <p className="mt-6 whitespace-pre-wrap text-lg leading-relaxed text-ink-900">
                            {current.sourceValue !== null && <SourceText value={current.sourceValue} />}
                        </p>

                        {/* Un champ par langue restant à faire. La clé de React
                            inclut l'identifiant de la clé de traduction : sans
                            cela, passer à la clé suivante réutiliserait les
                            composants et garderait le texte précédent à l'écran. */}
                        <div className="mt-6 space-y-5">
                            {todo.map((locale, position) => {
                                const target = byCode.get(locale.code);

                                return (
                                    <div
                                        key={`${current.id}:${locale.code}`}
                                        ref={(element) => {
                                            fieldRefs.current[position] = element;
                                        }}
                                    >
                                        <div className="mb-1.5 flex items-center gap-2">
                                            <StatusDot status={target?.status ?? 'untranslated'} />
                                            <span className="font-mono text-xs font-medium text-ink-700">
                                                {locale.code}
                                            </span>
                                            <span className="text-xs text-ink-400">
                                                {locale.nativeName}
                                            </span>
                                            {target?.isStale === true && (
                                                <span className="rounded bg-red-50 px-1.5 py-0.5 text-[10px] font-medium text-red-700">
                                                    source modifiée
                                                </span>
                                            )}
                                        </div>

                                        <TranslationInput
                                            keyUuid={current.id}
                                            locale={locale.code}
                                            value={target?.value ?? null}
                                            version={target?.version ?? 0}
                                            direction={locale.direction}
                                            pluralCategories={locale.pluralCategories}
                                            maxLength={current.maxLength}
                                            autoFocus={position === 0}
                                            onSaved={() =>
                                                setDone((prev) => new Set(prev).add(current.id))
                                            }
                                            onRequestNext={() => advanceFrom(position)}
                                        />
                                    </div>
                                );
                            })}
                        </div>

                        {/* Les langues déjà faites, en lecture. Une traduction
                            voisine tranche souvent mieux un registre que la
                            source elle-même. */}
                        {reference.length > 0 && (
                            <div className="mt-8 rounded-md border border-ink-100 bg-ink-50/60 p-3">
                                <p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
                                    Déjà traduites
                                </p>
                                <ul className="space-y-1">
                                    {reference.map((target) => (
                                        <li key={target.locale} className="flex gap-2 text-sm">
                                            <span className="w-12 shrink-0 font-mono text-[11px] text-ink-400">
                                                {target.locale}
                                            </span>
                                            <span className="text-ink-600">{target.value}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}

                        <div className="mt-8 flex items-center justify-between text-xs text-ink-400">
                            <button
                                onClick={previous}
                                disabled={index === 0}
                                className="rounded px-2 py-1 hover:bg-ink-100 disabled:opacity-40"
                            >
                                ← Précédente
                            </button>

                            <p className="flex items-center gap-4">
                                <span>
                                    <kbd className="rounded bg-ink-100 px-1.5 py-0.5 font-mono">⌘↵</kbd>{' '}
                                    enregistrer et descendre
                                </span>
                                <span>
                                    <kbd className="rounded bg-ink-100 px-1.5 py-0.5 font-mono">Échap</kbd>{' '}
                                    quitter
                                </span>
                            </p>

                            <button onClick={next} className="rounded px-2 py-1 hover:bg-ink-100">
                                Passer →
                            </button>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}