Rearrange document tabs via drag and drop

[TrueDoctor]

Allows rearranging document tabs in the graphite ui using drag and drop.
Note this code has been ai generated. It has been tested to work, but is more intended as a proof of concept and potential blueprint for a proper pr.

[TrueDoctor]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces drag-and-drop functionality for reordering document tabs, a great enhancement for user experience. The implementation spans both the Rust backend and the Svelte frontend, with a new ReorderDocument message and corresponding handler. The core drag-and-drop logic resides in the Panel.svelte component. While the feature is functional, I've identified a key area for improvement in the event listener management within Panel.svelte to boost performance and prevent potential conflicts. My review comment details this suggestion to help refine this proof-of-concept into a production-ready feature.

[gemini-code-assist]

Global event listeners for drag-and-drop are added in onMount and removed in onDestroy. This is inefficient as they are active throughout the component's lifecycle, even when no drag is occurring. This can lead to performance degradation and potential conflicts with other parts of the application.

A more performant and robust approach is to attach these listeners to the window object only when a drag operation begins (i.e., in tabPointerDown) and remove them once it's complete (in a cleanup function called from draggingPointerUp and other abort scenarios).

To implement this, you can:

1. Remove the onMount and onDestroy lifecycle hooks for these listeners.
2. Add window.addEventListener(...) for pointermove, pointerup, mousedown, and keydown inside tabPointerDown.
3. Add window.removeEventListener(...) for the same events inside abortDrag.

[TrueDoctor]

@cubic-dev-ai

[cubic-dev-ai]

@cubic-dev-ai

@TrueDoctor I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

1 issue found across 5 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/window/Panel.svelte">

<violation number="1" location="frontend/src/components/window/Panel.svelte:142">
P2: Accessing `dragState.startIndex` without a null check. `dragState` is typed `DragState | undefined` and the enclosing `if` condition doesn't narrow it. Add an explicit guard to avoid a potential runtime `TypeError`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Accessing dragState.startIndex without a null check. dragState is typed DragState | undefined and the enclosing if condition doesn't narrow it. Add an explicit guard to avoid a potential runtime TypeError.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/components/window/Panel.svelte, line 142:

<comment>Accessing `dragState.startIndex` without a null check. `dragState` is typed `DragState | undefined` and the enclosing `if` condition doesn't narrow it. Add an explicit guard to avoid a potential runtime `TypeError`.</comment>

<file context>
@@ -58,19 +74,139 @@
+
+	function draggingPointerUp() {
+		if (dragInPanel && dragDropIndex !== undefined) {
+			reorderAction?.(dragState.startIndex, dragDropIndex);
+			justFinishedDrag = true;
+			// Clear after the current tick so a same-tick click is still suppressed, but the next intentional click is not swallowed
</file context>

Suggested change

	reorderAction?.(dragState.startIndex, dragDropIndex);
	if (dragState) reorderAction?.(dragState.startIndex, dragDropIndex);

[Keavon]

Superseded by #3999.