feat(FN-3086): enhance graph navigation with toolbar and keyboard controls

The merge introduces a new Cursor CLI plugin provider with dashboard authentication (FN-3396), enabling Fusion to bundle Cursor's CLI as a native AI model source alongside native shell guide and bridge contract documentation (FN-3577). It also completes the dependency graph plugin's navigation contr

Fusion-Task-Id: FN-3086
This commit is contained in:
Fusion
2026-05-07 04:21:33 -07:00
committed by gsxdsm
parent 3735e0565a
commit f859108779
10 changed files with 518 additions and 126 deletions

View File

@@ -0,0 +1,36 @@
import { Maximize, RotateCcw, ZoomIn, ZoomOut } from "lucide-react";
import "./GraphToolbar.css";
export interface GraphToolbarProps {
zoom: number;
onZoomIn: () => void;
onZoomOut: () => void;
onFitToGraph: () => void;
onResetView: () => void;
}
export function GraphToolbar({
zoom,
onZoomIn,
onZoomOut,
onFitToGraph,
onResetView,
}: GraphToolbarProps) {
return (
<div className="graph-toolbar" data-testid="graph-toolbar">
<button className="btn btn-icon" title="Zoom in (Ctrl+=)" aria-label="Zoom in" onClick={onZoomIn}>
<ZoomIn size={16} />
</button>
<button className="btn btn-icon" title="Zoom out (Ctrl+-)" aria-label="Zoom out" onClick={onZoomOut}>
<ZoomOut size={16} />
</button>
<div className="graph-toolbar__zoom-label" aria-live="polite">{Math.round(zoom * 100)}%</div>
<button className="btn btn-icon" title="Fit to graph (Ctrl+Shift+F)" aria-label="Fit to graph" onClick={onFitToGraph}>
<Maximize size={16} />
</button>
<button className="btn btn-icon" title="Reset view (Ctrl+0)" aria-label="Reset view" onClick={onResetView}>
<RotateCcw size={16} />
</button>
</div>
);
}