feat: bouton ℹ + modale InfoPanel décrivant toutes les fonctionnalités
ci/woodpecker/push/woodpecker Pipeline was successful

- InfoPanel : modale avec overlay, sections Vues / Clusters / Période /
  Animation / Statistiques / Source, composants Section/Feature/Kbd
- PeriodSelector : ajout prop onInfo + bouton ℹ en fin de barre
- App.tsx : état infoOpen, onInfo → setInfoOpen(true), rendu InfoPanel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
syoul
2026-03-24 12:28:51 +01:00
parent 0e040510af
commit 810c815706
3 changed files with 160 additions and 1 deletions
+12 -1
View File
@@ -8,6 +8,7 @@ interface PeriodSelectorProps {
viewMode: 'heatmap' | 'flow';
onViewModeChange: (mode: 'heatmap' | 'flow') => void;
geoPercent?: number | null;
onInfo: () => void;
}
const PERIODS = [
@@ -18,7 +19,7 @@ const PERIODS = [
const PRESET_DAYS = new Set([1, 7, 30]);
export function PeriodSelector({ value, onChange, animationActive, onAnimate, viewMode, onViewModeChange, geoPercent }: PeriodSelectorProps) {
export function PeriodSelector({ value, onChange, animationActive, onAnimate, viewMode, onViewModeChange, geoPercent, onInfo }: PeriodSelectorProps) {
const [customOpen, setCustomOpen] = useState(false);
const [inputVal, setInputVal] = useState('');
const inputRef = useRef<HTMLInputElement>(null);
@@ -130,6 +131,16 @@ export function PeriodSelector({ value, onChange, animationActive, onAnimate, vi
{geoPercent}% Tx géoloc.
</span>
)}
<div className="w-px mx-1 bg-[#2e2f3a] self-stretch" />
<button
onClick={onInfo}
className="px-2 py-1.5 rounded-md text-sm text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23] transition-all duration-200 cursor-pointer leading-none"
aria-label="Aide"
>
</button>
</div>
);
}