[DRAFT] Implement Rider-style sidebar tool layout with drag-and-drop reordering

[magasser]

Description

This pull request introduces a centralized, Rider-inspired tool layout system with support for sidebar anchors, drag-and-drop reordering, and visual drop previews.

Related issues: #47

Overview

Tool Layout Management

• Introduced a centralized layout controller (IdeMainLayout) responsible for:
  • Managing tool placement across predefined anchors
  • Handling tool activation and visibility
  • Synchronizing sidebar buttons with tool areas

Sidebar & Tool Areas

• Sidebars are split into top and bottom anchors on both left and right sides.
• Each anchor maintains its own button group to ensure exclusive activation within the same area.
• Tool visibility is derived from state.
• Sidebars are hidden when they do not contain a tool but are made visible during a drag operation

Drag-and-Drop System

• Added a dedicated ToolDragOverlay to handle:
  • Drop zone detection
  • Ghost preview placement
  • Visual highlighting during drag operations
• A tool preview element is dynamically inserted into the target sidebar to indicate the drop position.
• The overlay emits move requests (ToolMoveData) instead of directly mutating layout state.

Demo

I agree to the terms of contributing as stated here

[MattParkerDev]

Hi, thanks for working on this! I think I would prefer a more Rider approach to docking, ie the toolbar icons are the draggable parts, and you drag them to other toolbars to move them. This would necessitate a new toolbar being added on the right of the code editor, which is fine.
This approach means you don't need the generic title bits for panels for a grabbable spot.
To be decided is what happens when a toolbar has no panels, ie should the right toolbar disappear when empty, and appear on drag of a panel? MVP I think it can just stay even when empty.

[magasser]

Hey, thanks for the feedback. I did some short tests in Rider, and it seems that the toolbar disappears when it has no items. The only way to put an item back, once it's gone, is by manually moving it through the context menu (no dragging):

This is not really the best UX, so maybe always keeping the toolbar might be a better approach.

In general, the panels still seem to have a common title bar for dragging:

The only panel that seems not to be draggable is the code editor panel, which still has the standard title bar with open tabs instead of a typical title. I think keeping the title bar is still useful, as it allows for panel action buttons to be placed there. However, the panels vary greatly in the content placed within this bar, so a certain amount of flexibility is needed.

What do you think?

I will try to rework my changes to a more Rider-style approach.

[MattParkerDev]

Hey, thanks for the feedback. I did some short tests in Rider, and it seems that the toolbar disappears when it has no items. The only way to put an item back, once it's gone, is by manually moving it through the context menu (no dragging)

This is not really the best UX, so maybe always keeping the toolbar might be a better approach.

I think perhaps making hidden toolbars visible while dragging a panel, makes the UX better whilst also not wasting space when there are no panels docked in that particular toolbar.

The only panel that seems not to be draggable is the code editor panel, which still has the standard title bar with open tabs instead of a typical title. I think keeping the title bar is still useful, as it allows for panel action buttons to be placed there. However, the panels vary greatly in the content placed within this bar, so a certain amount of flexibility is needed.
What do you think?

I have no problem with a title bar in general, but you're right that the content of the title bar needs to be fairly flexible, and when the title bar is filled up with buttons, it may not be intuitive where is actually clickable/draggable. IMO, dragging the panel's icon in the toolbar is the most intuitive to me, (Like Rider does, see below) and is probably all I would implement if I were doing this.

RiderDragging.mp4

[MattParkerDev]

I'd also probably only implement Left, Bottom and Right panel locations for now :)

[magasser]

Hey, I updated my implementation to a Rider-style tool managment system with the two sidebars where you can move the tools between them. I also updated the PR description and title to reflect this.

To achieve this I had to rework a lot of the UI which meant deleting/moving a lot of files and as such there are a lot of files changed. I don't know how you would like to proceed with this PR as it has become pretty big.

[MattParkerDev]

Apologies for the delay, I'm in the process of finishing up some debugger work, and then will get back to this 😊