fix: remove non-functional panel toggle keyboard shortcuts

Removes Ctrl+B and Ctrl+I keyboard shortcuts that were causing panels
to disappear completely instead of collapsing properly. Also updates
all panel tooltips to no longer reference the removed shortcuts.

Changes:
- Removed Ctrl+B (left panel) and Ctrl+I (right panel) shortcut handlers
- Updated left panel tooltips: removed "(Ctrl+B)" references
- Updated right panel tooltips: removed "(Ctrl+I)" references
- Tooltips now simply show "Collapse Panel" / "Expand Panel"
- Escape key handler preserved for closing property panels

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-10 23:30:41 +02:00
parent 5020ce0ed7
commit 045b1aa4d6
3 changed files with 6 additions and 16 deletions

View file

@ -83,19 +83,9 @@ function AppContent() {
onSelectAll: handleSelectAll, onSelectAll: handleSelectAll,
}); });
// Panel toggle keyboard shortcuts // Escape key to close property panels
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
// Ctrl+B: Toggle left panel
if (e.ctrlKey && e.key === 'b') {
e.preventDefault();
toggleLeftPanel();
}
// Ctrl+I: Toggle right panel
if (e.ctrlKey && e.key === 'i') {
e.preventDefault();
toggleRightPanel();
}
// Escape: Close property panels // Escape: Close property panels
if (e.key === 'Escape') { if (e.key === 'Escape') {
if (selectedNode || selectedEdge) { if (selectedNode || selectedEdge) {
@ -108,7 +98,7 @@ function AppContent() {
window.addEventListener('keydown', handleKeyDown); window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown);
}, [toggleLeftPanel, toggleRightPanel, selectedNode, selectedEdge]); }, [selectedNode, selectedEdge]);
return ( return (
<div className="flex flex-col h-screen bg-gray-100"> <div className="flex flex-col h-screen bg-gray-100">

View file

@ -71,7 +71,7 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => {
if (leftPanelCollapsed) { if (leftPanelCollapsed) {
return ( return (
<div className="h-full bg-gray-50 border-r border-gray-200 flex flex-col items-center py-2 space-y-2" style={{ width: '40px' }}> <div className="h-full bg-gray-50 border-r border-gray-200 flex flex-col items-center py-2 space-y-2" style={{ width: '40px' }}>
<Tooltip title="Expand Tools Panel (Ctrl+B)" placement="right"> <Tooltip title="Expand Tools Panel" placement="right">
<IconButton size="small" onClick={expandLeftPanel}> <IconButton size="small" onClick={expandLeftPanel}>
<ChevronRightIcon fontSize="small" /> <ChevronRightIcon fontSize="small" />
</IconButton> </IconButton>
@ -89,7 +89,7 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50"> <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
<h2 className="text-sm font-semibold text-gray-700">Tools</h2> <h2 className="text-sm font-semibold text-gray-700">Tools</h2>
<Tooltip title="Collapse Panel (Ctrl+B)"> <Tooltip title="Collapse Panel">
<IconButton size="small" onClick={collapseLeftPanel}> <IconButton size="small" onClick={collapseLeftPanel}>
<ChevronLeftIcon fontSize="small" /> <ChevronLeftIcon fontSize="small" />
</IconButton> </IconButton>

View file

@ -47,7 +47,7 @@ const PanelHeader = ({ title, onClose, onCollapse }: PanelHeaderProps) => (
</IconButton> </IconButton>
</Tooltip> </Tooltip>
)} )}
<Tooltip title="Collapse Panel (Ctrl+I)"> <Tooltip title="Collapse Panel">
<IconButton size="small" onClick={onCollapse}> <IconButton size="small" onClick={onCollapse}>
<ChevronRightIcon fontSize="small" /> <ChevronRightIcon fontSize="small" />
</IconButton> </IconButton>
@ -193,7 +193,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
if (rightPanelCollapsed) { if (rightPanelCollapsed) {
return ( return (
<div className="h-full bg-gray-50 border-l border-gray-200 flex flex-col items-center py-2" style={{ width: '40px' }}> <div className="h-full bg-gray-50 border-l border-gray-200 flex flex-col items-center py-2" style={{ width: '40px' }}>
<Tooltip title="Expand Properties Panel (Ctrl+I)" placement="left"> <Tooltip title="Expand Properties Panel" placement="left">
<IconButton size="small" onClick={expandRightPanel}> <IconButton size="small" onClick={expandRightPanel}>
<ChevronLeftIcon fontSize="small" /> <ChevronLeftIcon fontSize="small" />
</IconButton> </IconButton>