Implemented keyboard shortcuts across the visualization tool to improve usability.

[surajgojanur]

Changes

Configuration

• Added ShortcutConfig.js to define shortcuts per algorithm.

UI

• Added a keyboard icon to the top-right controls.
• Added a Shortcuts tab to the help modal.
• Added a focus highlight effect (.shortcut-highlight).
• Improved UX:
  • Modal closes when clicking outside of it.
  • Keyboard icon toggles the modal correctly.

Logic

• Implemented a global keydown listener in AlgoSection.js that respects the active algorithm’s shortcut configuration.
• Avoids triggering shortcuts when:
  • inputs are focused
  • modifier keys are pressed (Ctrl/Cmd/Alt)

Integration

• Updated BST.js, AVL.js, LinkedList.js, and ArrayList.js to mark inputs as shortcut targets.

---

Verification

Automated Tests

N/A — relies on browser interaction events (best verified manually).

Manual Verification

1. Open the app and navigate to one of:
   • BST, AVL, LinkedList, ArrayList
2. Test shortcuts:
   • i → focus Insert input (or Add Value)
   • d → focus Delete input (or Remove Index)
   • f → focus Find input (BST/AVL only)
   • ? → toggle help modal and show Shortcuts tab
   • Ctrl+/ → toggle help modal and show Shortcuts tab
3. Test UI:
   • Click the keyboard icon in the top-right.
   • Verify the Shortcuts tab lists shortcuts for the current page.
4. Safety checks:
   • While typing in an input, pressing i/d/f/? should type normally (no shortcut triggers).
   • Pressing Ctrl+i, Alt+i, or Cmd+i should not trigger shortcuts.

---

Supported Algorithms

• Binary Search Tree (BST)
• AVL Tree
• Singly Linked List
• Array List

---

[surajgojanur]