fix(ui): reorder dragged tabs live with a placeholder; drop terminal tabs on a group to join or split (#1054)

Dragging a tab showed no floating copy: the ghost cloned the tab's classes, and .tab { position: relative } loaded after .ghost { position: fixed }. The ghost is now positioned inline, and a tab dragged within its strip stays as an empty slot the other tabs move around; the insertion line for tabs from another strip is drawn inside the edge tabs so the scroller doesn't clip it. A terminal group is now a drop target like an editor pane: the middle joins the group, an edge splits off a new group (dropZoneAt moves to ui and is shared).

Closes #1052

Co-authored-by: fuqiuluo <[email protected]>

src/ui/Tabs.module.css

@@ -209,10 +209,10 @@
   height: 2px;
 }
 .vertical .dropBefore::before {
-  top: -2px;
+  top: 0;
 }
 .vertical .dropAfter::after {
-  bottom: -2px;
+  bottom: 0;
 }
 
 /* Close button on the left of the label */
@@ -224,9 +224,14 @@
   padding: 0 10px 0 2px;
 }
 
-/* drag & drop */
-.dragging {
-  opacity: 0.5;
+/* drag & drop: the dragged tab is an empty slot the other tabs make room for (IDEA) */
+.tab.dragging,
+.tab.dragging:hover {
+  background: var(--bg-toolbar-hover);
+  box-shadow: none;
+}
+.dragging > * {
+  visibility: hidden;
 }
 .dropBefore::before,
 .dropAfter::after {
@@ -239,11 +244,12 @@
   z-index: 1;
   pointer-events: none;
 }
+/* Inside the tab: the scroller clips anything past the first and last tab. */
 .dropBefore::before {
-  left: -2px;
+  left: 0;
 }
 .dropAfter::after {
-  right: -2px;
+  right: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {