From 3e33bac42627eedf457dc260577fc991ca0662c3 Mon Sep 17 00:00:00 2001
From: Jokin <jokingam@tuta.io>
Date: Sat, 11 Jul 2026 17:33:52 +0200
Subject: [PATCH] Drag & drop tab reordering

Tabs are draggable within the strip: HTML5 DnD with the WebKit setData quirk
handled, an inset primary insertion line at the drop position (no layout
shift), and the dragged tab dimmed. Reordering only touches the workspaces
array order; ids, sessions, and the active tab are unaffected.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ui/src/app/panels.service.ts  | 12 ++++++++
 ui/src/app/tab-bar/tab-bar.ts | 57 ++++++++++++++++++++++++++++++++++-
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/panels.service.ts b/ui/src/app/panels.service.ts
index 93e63bb..e172c9c 100644
--- a/ui/src/app/panels.service.ts
+++ b/ui/src/app/panels.service.ts
@@ -274,6 +274,18 @@ export class PanelsService {
     }
   }
 
+  /** Reorder a tab (drag & drop). Order is purely visual; ids stay stable. */
+  moveWorkspace(id: number, toIndex: number): void {
+    this.workspaces.update((list) => {
+      const fromIndex = list.findIndex((w) => w.id === id);
+      if (fromIndex < 0) return list;
+      const next = [...list];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(Math.max(0, Math.min(next.length, toIndex)), 0, moved);
+      return next;
+    });
+  }
+
   cycleWorkspace(delta: 1 | -1): void {
     const list = this.workspaces();
     if (list.length < 2) return;
diff --git a/ui/src/app/tab-bar/tab-bar.ts b/ui/src/app/tab-bar/tab-bar.ts
index 406e951..bb1384f 100644
--- a/ui/src/app/tab-bar/tab-bar.ts
+++ b/ui/src/app/tab-bar/tab-bar.ts
@@ -26,10 +26,17 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
       [class.pl-1.5]="!isMacChrome"
       [class.pt-1]="!isMacChrome"
     >
-      @for (ws of panels.workspaces(); track ws.id) {
+      @for (ws of panels.workspaces(); track ws.id; let i = $index) {
         <div
           class="group relative flex max-w-52 items-center rounded-md electrobun-webkit-app-region-no-drag"
           [class.bg-accent]="ws.id === panels.activeWorkspaceId()"
+          [class.opacity-50]="draggedId() === ws.id"
+          [style.box-shadow]="dropIndicatorShadow(i)"
+          draggable="true"
+          (dragstart)="onDragStart($event, ws.id)"
+          (dragover)="onDragOver($event, i)"
+          (drop)="onDrop($event, i)"
+          (dragend)="onDragEnd()"
         >
           <button
             (click)="panels.setActiveWorkspace(ws.id)"
@@ -190,8 +197,56 @@ export class TabBar {
   readonly transferModes = TRANSFER_MODES;
   readonly concurrencyChoices = CONCURRENCY_CHOICES;
 
+  // drag & drop reordering
+  readonly draggedId = signal<number | null>(null);
+  readonly dropTarget = signal<{ index: number; before: boolean } | null>(null);
+
   close(event: MouseEvent, id: number): void {
     event.stopPropagation();
     this.panels.closeWorkspace(id);
   }
+
+  /** Insertion line at the drop position (inset shadow: no layout shift). */
+  dropIndicatorShadow(index: number): string | null {
+    const target = this.dropTarget();
+    if (!target || target.index !== index || this.draggedId() === null) return null;
+    return target.before
+      ? 'inset 2px 0 0 var(--primary)'
+      : 'inset -2px 0 0 var(--primary)';
+  }
+
+  onDragStart(event: DragEvent, id: number): void {
+    this.draggedId.set(id);
+    // WebKit refuses to start a drag without data
+    event.dataTransfer?.setData('text/plain', String(id));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  }
+
+  onDragOver(event: DragEvent, index: number): void {
+    if (this.draggedId() === null) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+    const el = event.currentTarget as HTMLElement;
+    const before = event.clientX < el.getBoundingClientRect().left + el.offsetWidth / 2;
+    this.dropTarget.set({ index, before });
+  }
+
+  onDrop(event: DragEvent, index: number): void {
+    event.preventDefault();
+    const id = this.draggedId();
+    const target = this.dropTarget();
+    this.onDragEnd();
+    if (id === null || !target) return;
+    const list = this.panels.workspaces();
+    const fromIndex = list.findIndex((w) => w.id === id);
+    if (fromIndex < 0) return;
+    let toIndex = target.before ? index : index + 1;
+    if (fromIndex < toIndex) toIndex--; // account for removal before insert
+    if (toIndex !== fromIndex) this.panels.moveWorkspace(id, toIndex);
+  }
+
+  onDragEnd(): void {
+    this.draggedId.set(null);
+    this.dropTarget.set(null);
+  }
 }