mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-18 20:56:43 +02:00
Claude
7f5ef93469
Les deux symptômes n'en faisaient qu'un. L'ascenseur horizontal EXISTAIT déjà (conteneur en overflow-auto, table en min-width ~2600 px), mais il était caché sous la carte de synthèse. Celle-ci était en `position: fixed` et ne réservait donc aucune hauteur : seul un `pb-12` posé sur la page compensait, trop court d'une quarantaine de pixels — exactement la bande où se trouvent la barre de défilement et la dernière ligne. Son `left-[264px]` était en prime calé sur une barre latérale dépliée, alors qu'elle est repliée par défaut : 200 px de vide à gauche, qui écrasaient ses statistiques en hauteur. Elle est remise dans le flux : la grille lui cède exactement la place nécessaire, et il n'y a plus de valeur magique à tenir en phase avec la sidebar. L'ascenseur devient visible : la règle générale (8 px, rail transparent, pouce à 12 % d'opacité) convient aux panneaux où le défilement est accessoire, pas à la Grille où il est l'outil de navigation principal. Classe `.grid-scroll` dédiée, avec rail dessiné, pouce saisissable, et prise en charge de Firefox que les sélecteurs -webkit- ignorent. Corrigé aussi : - totalWidth lisait `columnDef.size` au lieu de `getSize()`. Le redimensionnement de colonnes étant actif et persisté, la largeur plancher restait figée sur l'ancienne somme : dernières colonnes rognées, course de défilement trop courte. - Conteneur non focusable : flèches, Origine et Fin ne défilaient pas la grille. - Barre de filtres qui passait sur deux lignes sous ~1200 px, volant 48 px au tableau : largeurs réduites en dessous de xl. - Barre d'actions groupées sans flex-wrap, qui s'écrasait sur petit écran. - Double croix dans la recherche : `type="search"` ajoutait la croix native du navigateur par-dessus le bouton maison. Masquage local — la recherche de l'en-tête n'a pas de bouton propre et garde donc le sien. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y26nRZxTR57K7h8yqsF675
62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
|
import { GammeCode } from "@/types/grid";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const GAMME_OPTIONS: { label: string; code: GammeCode; color: string }[] = [
|
|
{ label: "A — Cœur", code: "A", color: "border-emerald-600 text-emerald-400 hover:bg-emerald-900/20" },
|
|
{ label: "B — Complémentaire", code: "B", color: "border-blue-600 text-blue-400 hover:bg-blue-900/20" },
|
|
{ label: "C — Saisonnier", code: "C", color: "border-amber-600 text-amber-400 hover:bg-amber-900/20" },
|
|
{ label: "Y — En veille", code: "Y", color: "border-violet-600 text-violet-400 hover:bg-violet-900/20" },
|
|
{ label: "Z — Sortie", code: "Z", color: "border-rose-600 text-rose-400 hover:bg-rose-900/20" },
|
|
];
|
|
|
|
interface BulkActionToolbarProps {
|
|
selectedCodeins: string[];
|
|
onClearSelection: () => void;
|
|
}
|
|
|
|
export function BulkActionToolbar({ selectedCodeins, onClearSelection }: BulkActionToolbarProps) {
|
|
const batchSetDraftGamme = useGridStore((s) => s.batchSetDraftGamme);
|
|
|
|
if (selectedCodeins.length === 0) return null;
|
|
|
|
const applyBulk = (code: GammeCode) => {
|
|
const changes = selectedCodeins.reduce((acc, codein) => {
|
|
acc[codein] = code;
|
|
return acc;
|
|
}, {} as Record<string, GammeCode>);
|
|
batchSetDraftGamme(changes);
|
|
onClearSelection();
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 bg-slate-900 border border-slate-700/50 rounded-xl backdrop-blur-md shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
|
|
<span className="text-[11px] font-black uppercase tracking-wider text-slate-200">
|
|
{selectedCodeins.length} sélectionné{selectedCodeins.length > 1 ? "s" : ""}
|
|
</span>
|
|
<div className="h-4 w-px bg-slate-700/50" />
|
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-tight">Appliquer en masse :</span>
|
|
{GAMME_OPTIONS.map(({ label, code, color }) => (
|
|
<button
|
|
key={code}
|
|
onClick={() => applyBulk(code)}
|
|
className={cn(
|
|
"px-3 py-1 text-xs font-bold border rounded transition-colors",
|
|
color
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
<button
|
|
onClick={onClearSelection}
|
|
className="ml-auto text-xs text-slate-500 hover:text-slate-300 transition-colors"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|