TQ-Slator/assets/editor/NamespaceTree.tsx

import { useMemo } from 'react';
import type { NamespaceTree as Tree } from '@/api/types';
import type { TranslationStatus } from '@/api/types';
import { STATUS_META } from '@/components/Status';

const FILTERS: { value: TranslationStatus | ''; label: string }[] = [
    { value: '', label: 'Toutes' },
    { value: 'untranslated', label: STATUS_META.untranslated.label },
    { value: 'needs_review', label: STATUS_META.needs_review.label },
    { value: 'draft', label: STATUS_META.draft.label },
    { value: 'translated', label: STATUS_META.translated.label },
    { value: 'reviewed', label: STATUS_META.reviewed.label },
];

interface Props {
    tree: Tree | undefined;
    selected: string;
    status: TranslationStatus | '';
    unassigned: boolean;
    total: number;
    onSelectNamespace: (path: string | null) => void;
    // Statut et bac « non assignées » partent ENSEMBLE : ce sont deux facettes
    // du même filtre, et les envoyer en deux appels séparés faisait que le
    // second écrasait le premier.
    onSelectFilter: (next: { status: TranslationStatus | ''; unassigned: boolean }) => void;
}

export function NamespaceTree({
    tree,
    selected,
    status,
    unassigned,
    total,
    onSelectNamespace,
    onSelectFilter,
}: Props) {
    // Le serveur renvoie un compteur PROPRE à chaque namespace. L'agrégation par
    // branche se fait ici : le client possède déjà l'arbre entier, la calculer
    // côté serveur coûterait une requête récursive pour rien.
    const nodes = useMemo(() => {
        const list = tree?.namespaces ?? [];

        return list.map((node) => {
            const subtotal = list
                .filter((other) => other.path === node.path || other.path.startsWith(`${node.path}.`))
                .reduce((sum, other) => sum + other.actionable, 0);

            return { ...node, subtotal };
        });
    }, [tree]);

    return (
        <aside className="flex w-60 shrink-0 flex-col border-r border-ink-200 bg-white">
            <div className="border-b border-ink-200 p-3">
                <p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
                    Filtrer
                </p>

                <div className="flex flex-wrap gap-1">
                    {FILTERS.map((filter) => {
                        const active = status === filter.value && !unassigned;

                        return (
                            <button
                                key={filter.value || 'all'}
                                onClick={() =>
                                    onSelectFilter({ status: filter.value, unassigned: false })
                                }
                                className={`rounded px-2 py-1 text-xs transition-colors ${
                                    active
                                        ? 'bg-accent text-white'
                                        : 'bg-ink-100 text-ink-600 hover:bg-ink-200'
                                }`}
                            >
                                {filter.label}
                            </button>
                        );
                    })}
                </div>

                {/* Bac « Non assignées » : les clés rattachées à aucune plateforme
                    n'entrent dans aucun bundle. Sans cette vue elles deviennent
                    invisibles et les compteurs d'avancement mentent. */}
                {(tree?.unassigned ?? 0) > 0 && (
                    <button
                        onClick={() => onSelectFilter({ status: '', unassigned: !unassigned })}
                        className={`mt-2 flex w-full items-center justify-between rounded px-2 py-1.5 text-xs transition-colors ${
                            unassigned
                                ? 'bg-amber-100 text-amber-900'
                                : 'text-ink-500 hover:bg-ink-100'
                        }`}
                        title="Clés rattachées à aucune plateforme : elles n'entrent dans aucun bundle."
                    >
                        <span>⊘ Non assignées</span>
                        <span className="tabular font-medium">{tree?.unassigned}</span>
                    </button>
                )}
            </div>

            <div className="min-h-0 flex-1 overflow-y-auto p-2">
                <button
                    onClick={() => onSelectNamespace(null)}
                    className={`flex w-full items-center justify-between rounded px-2 py-1.5 text-sm transition-colors ${
                        selected === '' ? 'bg-accent-soft font-medium text-accent' : 'hover:bg-ink-100'
                    }`}
                >
                    <span>Toutes les clés</span>
                    <span className="tabular text-xs text-ink-400">{total}</span>
                </button>

                {nodes.map((node) => {
                    const active = selected === node.path;

                    return (
                        <button
                            key={node.path}
                            onClick={() => onSelectNamespace(active ? null : node.path)}
                            style={{ paddingLeft: `${8 + node.depth * 12}px` }}
                            className={`flex w-full items-center justify-between rounded py-1 pr-2 text-sm transition-colors ${
                                active
                                    ? 'bg-accent-soft font-medium text-accent'
                                    : 'text-ink-700 hover:bg-ink-100'
                            }`}
                            title={node.path}
                        >
                            <span className="truncate">{node.name}</span>

                            {node.subtotal > 0 && (
                                <span className="tabular ml-2 shrink-0 rounded bg-ink-100 px-1.5 text-[11px] font-medium text-ink-600">
                                    {node.subtotal}
                                </span>
                            )}
                        </button>
                    );
                })}

                {nodes.length === 0 && (
                    <p className="px-2 py-4 text-xs text-ink-400">Aucun namespace.</p>
                )}
            </div>
        </aside>
    );
}