fixed dragging splits back out into the tab bar - fixes #5410, fixes #5406, fixes #4563

tabby-core/src/components/appRoot.component.ts

@@ -14,6 +14,7 @@ import { UpdaterService } from '../services/updater.service'
 import { BaseTabComponent } from './baseTab.component'
 import { SafeModeModalComponent } from './safeModeModal.component'
 import { TabBodyComponent } from './tabBody.component'
+import { SplitTabComponent } from './splitTab.component'
 import { AppService, FileTransfer, HostWindowService, PlatformService, ToolbarButton, ToolbarButtonProvider } from '../api'
 
 /** @hidden */
@@ -196,6 +197,13 @@ export class AppRootComponent {
     }
 
     onTabsReordered (event: CdkDragDrop<BaseTabComponent[]>) {
+        const tab: BaseTabComponent = event.item.data
+        if (!this.app.tabs.includes(tab)) {
+            if (tab.parent instanceof SplitTabComponent) {
+                tab.parent.removeTab(tab)
+                this.app.wrapAndAddTab(tab)
+            }
+        }
         moveItemInArray(this.app.tabs, event.previousIndex, event.currentIndex)
         this.app.emitTabsChanged()
     }

tabby-core/src/components/splitTab.component.ts

@@ -253,6 +253,9 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         })
         this.blurred$.subscribe(() => this.getAllTabs().forEach(x => x.emitBlurred()))
 
+        this.tabAdded$.subscribe(() => this.updateTitle())
+        this.tabRemoved$.subscribe(() => this.updateTitle())
+
         this.subscribeUntilDestroyed(this.hotkeys.hotkey$, hotkey => {
             if (!this.hasFocus || !this.focusedTab) {
                 return

tabby-core/src/services/app.service.ts

@@ -170,11 +170,19 @@ export class AppService {
         if (params.type as any === SplitTabComponent) {
             return this.openNewTabRaw(params)
         }
-        const splitTab = this.tabsService.create({ type: SplitTabComponent })
         const tab = this.tabsService.create(params)
+        this.wrapAndAddTab(tab)
+        return tab
+    }
+
+    /**
+     * Adds an existing tab while wrapping it in a SplitTabComponent
+     */
+    wrapAndAddTab (tab: BaseTabComponent): SplitTabComponent {
+        const splitTab = this.tabsService.create({ type: SplitTabComponent })
         splitTab.addTab(tab, null, 'r')
         this.addTabRaw(splitTab)
-        return tab
+        return splitTab
     }
 
     async reopenLastTab (): Promise<BaseTabComponent|null> {