Middle-click causes forward-navigation

[AMDphreak]

Check for other issues

• I've checked for other issues, and none exist.

Issue description

Middle-click causes forward-navigation

Steps to reproduce

1. Go to Overview page
2. Middle-click to try to scroll (it works)
3. Click on any Location shown in main view
4. Back-nav to the Overview page
5. Middle-click to try to scroll. It causes page to nav forward to the folder you were just viewing.
6. It also makes the cursor icon stuck on scroll-click. Can't hit Esc to restore normal cursor.

Platform and versions

• OS: Windows 11
• Spacedrive: Yes

Development tool versions (optional)

Stack trace

Additional context

No response

Code of Conduct

• I agree to follow the Code of Conduct.

[tembo]

Issue Validation

This is a valid bug. The v2 codebase is missing the middle-click prevention handler that existed in v1. In browsers, middle-click (button 1) fires the standard click event in addition to auxclick, which causes onClick handlers with navigate() calls to trigger unintended navigation.

Relevant Code

The core navigation components use onClick handlers without checking e.button:

• packages/interface/src/components/SpacesSidebar/SpaceItem.tsx:238-250 - Navigation on click without button filtering
• packages/interface/src/routes/explorer/Sidebar.tsx:149-161 - SidebarItem onClick handlers
• packages/interface/src/routes/overview/DevicePanel.tsx:600-608 - Location button onClick

These all call navigate(path) or trigger state changes on any click, including middle-click.

What's Happening

When user middle-clicks:

1. Middle mouse button fires both click and auxclick events
2. The onClick handlers in navigation components execute
3. navigate() is called, causing forward navigation to a previously visited route
4. The cursor gets stuck in scroll-click mode because the native autoscroll behavior is interrupted

In v1, this was fixed in commit 55d2ec7a ("[ENG-1663] Prevent middle-click opening new tab") by adding:

useEffect(() => {
  const handleClick = (e: MouseEvent) => {
    if (e.button === 1) e.preventDefault();
  };
  document.addEventListener('auxclick', handleClick);
  return () => document.removeEventListener('auxclick', handleClick);
}, []);

This handler is not present in the v2 codebase.

Potential Approaches

1. Global auxclick prevention (Recommended) - Add a global auxclick handler in App.tsx or ShellLayout.tsx that prevents default for middle-click. This is the same approach used in v1.

2. Button filtering in onClick handlers - Update all onClick handlers to check e.button === 0 before navigating. More surgical but requires touching many files.

3. Custom Link component - Create a wrapper component similar to v1's Link.tsx that handles middle-click properly, then migrate navigation to use it.

4. React Router Link with proper handling - Use React Router's <Link> component instead of buttons with navigate(), then add auxclick prevention to prevent opening new tabs.

Investigation Notes

• This is a regression from v1 where the fix was explicitly implemented
• The issue specifically manifests on Windows because autoscroll (middle-click drag scrolling) is a Windows-native feature
• The cursor getting stuck is because the navigation interrupts the native autoscroll state machine
• Both the Overview page location buttons and sidebar navigation items are affected