fix: sync sidebar file highlight with active tab - Add activeFilePath…

[Rish-it]

Description

This PR fixes the sidebar file highlighting synchronization issue where the red highlight remained on previously clicked files when switching between files using the top tabs instead of the sidebar.

Problem: When users clicked a file in the sidebar, it would highlight in red correctly. However, when switching to another file via the top tab bar, the red highlight would stay on the previously clicked file instead of moving to the currently active file.

Root Cause: The sidebar highlighting was controlled by react-arborist's internal selection state (aria-selected), which only updated when files were selected through the tree component directly. Tab clicks only updated the IDE.activeFile state but didn't sync back to the tree selection.

Solution:

• Added activeFilePath prop to the FileTree component to receive active file information.
• Implemented findNodeByPath() helper function to locate tree nodes by file path.
• Added useEffect to automatically sync tree selection when the active file changes.
• Connected the IDE's active file state to the file tree's selection state.

This creates bidirectional synchronization between the tab system and sidebar highlighting.

Related Issues

Fixes #2109

Type of Change

• [x] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe):

Testing

Manual Testing Steps:

1. Open the development server
2. Click a file in the sidebar → Verify red highlight appears
3. Switch to another file using the top tab → Verify red highlight moves to the correct file
4. Switch between multiple tabs → Verify highlight always matches active tab
5. Click another file in sidebar → Verify highlight updates correctly

Test Cases Covered:

• Clicking files from sidebar (existing functionality - should still work)
• Switching files via top tabs (main bug fix)
• Mixed usage of both sidebar and tab switching
• Files in nested directories
• Search functionality in file tree

Screenshots (if applicable)

Before (Bug):

• Click File A in sidebar → File A highlighted in red
• Click File B tab → File B becomes active but File A still highlighted

After (Fixed):

• Click File A in sidebar → File A highlighted in red
• Click File B tab → File B becomes active and File B highlighted in red

https://github.com/user-attachments/assets/06eac41a-b0ed-4b4b-ad25-de4c59bd897c

---

[!IMPORTANT] Fixes sidebar file highlight sync issue with active tab by adding activeFilePath prop and syncing selection in FileTree.

• Behavior:
  • Fixes sidebar file highlight not syncing with active tab in file-tree.tsx and index.tsx.
  • Adds activeFilePath prop to FileTree to track active file.
  • Implements findNodeByPath() to locate nodes by file path.
  • Uses useEffect to sync tree selection with active file changes.
• Components:
  • Updates FileTree component to accept activeFilePath and sync selection.
  • Updates DevTab to pass activeFilePath to FileTree.
• Misc:
  • Fixes #2109.

^{This description was created by for c90fd45db135d2001598cc7d7118c94c5eb02282. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.