From 26fd23c8c74223869200a3f1fa9796fd3f428ad9 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 29 Jul 2025 21:52:26 +0100
Subject: [PATCH] bug: grab cursor on empty spaces

---
 .../components/titlebar/voidContainer.spec.ts | 41 +++++++++++++++++++
 .../components/titlebar/tabsContainer.scss    |  5 ++-
 .../components/titlebar/voidContainer.ts      |  4 ++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/voidContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/voidContainer.spec.ts
index 475ada73c..78c04596f 100644
--- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/voidContainer.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/voidContainer.spec.ts
@@ -70,5 +70,46 @@ describe('voidContainer', () => {
             cut.updateDragAndDropState();
             expect(cut.element.draggable).toBe(true);
         });
+
+        test('that void container has dv-draggable class when draggable', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: false }
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.classList.contains('dv-draggable')).toBe(true);
+        });
+
+        test('that void container does not have dv-draggable class when not draggable', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: true }
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.classList.contains('dv-draggable')).toBe(false);
+        });
+
+        test('that updateDragAndDropState updates dv-draggable class based on disableDnd option', () => {
+            const options = { disableDnd: false };
+            const accessor = fromPartial<DockviewComponent>({
+                options
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.classList.contains('dv-draggable')).toBe(true);
+
+            // Simulate option change
+            options.disableDnd = true;
+            cut.updateDragAndDropState();
+            expect(cut.element.classList.contains('dv-draggable')).toBe(false);
+
+            // Change back
+            options.disableDnd = false;
+            cut.updateDragAndDropState();
+            expect(cut.element.classList.contains('dv-draggable')).toBe(true);
+        });
     });
 });
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss
index 9b35945fa..6fd341ff1 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss
@@ -28,7 +28,10 @@
     .dv-void-container {
         display: flex;
         flex-grow: 1;
-        cursor: grab;
+        
+        &.dv-draggable {
+            cursor: grab;
+        }
     }
 
     .dv-right-actions-container {
diff --git a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
index b7f8b12fe..49ca94cb0 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
@@ -10,6 +10,7 @@ import { addDisposableListener, Emitter, Event } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { DockviewGroupPanelModel } from '../../dockviewGroupPanelModel';
+import { toggleClass } from '../../../dom';
 
 export class VoidContainer extends CompositeDisposable {
     private readonly _element: HTMLElement;
@@ -37,6 +38,8 @@ export class VoidContainer extends CompositeDisposable {
 
         this._element.className = 'dv-void-container';
         this._element.draggable = !this.accessor.options.disableDnd;
+        
+        toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
 
         this.addDisposables(
             this._onDrop,
@@ -82,5 +85,6 @@ export class VoidContainer extends CompositeDisposable {
 
     updateDragAndDropState(): void {
         this._element.draggable = !this.accessor.options.disableDnd;
+        toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
     }
 }